/* ─── Credit Calculator Pro — Frontend CSS v2 (redesign mockup) ────────── */

/* ── Variabile implicite ─────────────────────────────────────────────────── */
.ccp-calculator-wrap {
    --ccp-primary:              #1a1a1a;
    --ccp-secondary:            #F2F2F2;
    --ccp-text:                 #1a1a1a;
    --ccp-header-text:          #ffffff;
    --ccp-input-bg:             #ffffff;
    --ccp-input-text:           #1a1a1a;
    --ccp-input-border:         #cccccc;
    --ccp-input-focus:          #1a1a1a;
    --ccp-results-bg:           transparent;
    --ccp-results-accent:       #1a1a1a;
    --ccp-card-bg:              #ffffff;
    --ccp-card-border:          #e0e0e0;
    --ccp-card-special-bg:      #ffffff;
    --ccp-card-special-border:  #1a1a1a;
    --ccp-rate-color:           #1a1a1a;
    --ccp-badge-bg:             #ff0101;
    --ccp-badge-text:           #ffffff;
    --ccp-meta-bg:              #f0f0f0;
    --ccp-meta-text:            #555555;
    --ccp-filters-bg:           #ffffff;
    --ccp-filter-border:        #cccccc;
    --ccp-filter-label:         #111111;
    --ccp-btn:                  #1a1a1a;
    --ccp-btn-text:             #ffffff;
    --ccp-btn-hover:            #333333;
    --ccp-btn-hover-text:       #ffffff;
    --ccp-btn-choose:           #1a1a1a;
    --ccp-btn-choose-text:      #ffffff;
    --ccp-btn-sec-border:       #cccccc;
    --ccp-btn-sec-text:         #1a1a1a;
    --ccp-btn-sec-hover-bg:     #1a1a1a;
    --ccp-btn-sec-hover-text:   #ffffff;
    --ccp-sched-bg:             #ffffff;
    --ccp-sched-header-bg:      #fafafa;
    --ccp-sched-th-bg:          #1a1a1a;
    --ccp-sched-th-text:        #ffffff;
    --ccp-sched-row-alt:        #f9f9f9;
    --ccp-broker-bg:            #fafafa;
    --ccp-broker-title:         #1a1a1a;
    --ccp-font:                 inherit;
    --ccp-font-size:            15px;
    --ccp-font-size-title:      18px;
    --ccp-font-size-rate:       32px;
    --ccp-font-weight-label:    400;
    --ccp-radius:               12px;
    --ccp-radius-btn:           8px;
    --ccp-border-width:         1px;
    --ccp-padding:              40px;
    --ccp-input-height:         48px;
    --ccp-card-gap:             12px;
    --ccp-wrapper-shadow:       none;
    --ccp-card-shadow:          none;
    --ccp-card-shadow-hover:    0 4px 20px rgba(0,0,0,.10);
}

/* ── Wrapper principal — fundal gri de pagina ────────────────────────────── */
.ccp-calculator-wrap {
    font-family: var(--ccp-font);
    font-size: var(--ccp-font-size);
    color: var(--ccp-text);
    max-width: 100%;
    background: var(--ccp-secondary);
    padding: 32px;
    box-sizing: border-box;
    border: none !important;
    outline: none;
    box-shadow: none !important;
}

/* ── Header (ascuns in design-ul nou) ────────────────────────────────────── */
.ccp-header { display: none; }

/* ── Card formular ───────────────────────────────────────────────────────── */
.ccp-form {
    background: var(--ccp-input-bg);
    border: var(--ccp-border-width) solid var(--ccp-card-border);
    border-radius: var(--ccp-radius);
    padding: 32px 40px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

.ccp-fields-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.ccp-field-full { grid-column: 1 / -1; }

.ccp-field label {
    display: block;
    font-size: var(--ccp-font-size-label);
    font-weight: var(--ccp-font-weight-label);
    color: var(--ccp-text);
    margin-bottom: 6px;
    letter-spacing: .1px;
}

.ccp-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.ccp-input,
.ccp-select {
    width: 100%;
    height: var(--ccp-input-height);
    padding: 0 42px 0 14px;
    border: var(--ccp-border-width) solid var(--ccp-input-border);
    border-radius: var(--ccp-radius-btn);
    font-size: 16px; /* minim 16px previne auto-zoom iOS Safari */
    font-family: var(--ccp-font);
    color: var(--ccp-input-text);
    background: var(--ccp-input-bg);
    outline: none;
    transition: border-color .15s;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
}
.ccp-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-color: var(--ccp-input-bg);
}
.ccp-input:focus,
.ccp-select:focus {
    border-color: var(--ccp-input-focus);
    box-shadow: 0 0 0 3px rgba(26,26,26,.07);
}
/* Ascunde spin buttons la input[type=number] — aspect uniform cu select */
.ccp-calculator-wrap input[type=number]::-webkit-inner-spin-button,
.ccp-calculator-wrap input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ccp-calculator-wrap input[type=number] {
    -moz-appearance: textfield;
}

/* Previne zoom si miscare pe mobile la focus/tap */
.ccp-input,
.ccp-select,
.ccp-filter-select,
.ccp-btn-calculate,
.ccp-btn-action,
.ccp-btn-choose-offer {
    touch-action: manipulation;
}
.ccp-input-suffix {
    position: absolute;
    right: 14px;
    color: #aaa;
    font-size: 12px;
    pointer-events: none;
    letter-spacing: .5px;
}

/* ── Avans minim info ────────────────────────────────────────────────────── */
.ccp-avans-info {
    margin-top: 5px;
    font-size: 12px;
    color: #666;
}
.ccp-min-down-label { font-weight: 600; color: var(--ccp-primary); }


/* ── Buton Calculează ────────────────────────────────────────────────────── */
.ccp-actions { text-align: center; }
.ccp-btn-calculate {
    background: var(--ccp-btn) !important;
    color: var(--ccp-btn-text) !important;
    border: none !important;
    min-width: 170px;
    height: 50px;
    padding: 0 48px;
    font-size: 15px;
    font-family: var(--ccp-font);
    font-weight: 600;
    border-radius: var(--ccp-radius-btn);
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    letter-spacing: .2px;
}
.ccp-btn-calculate:hover { background: var(--ccp-btn-hover) !important; color: var(--ccp-btn-hover-text) !important; transform: translateY(-1px); }
.ccp-btn-calculate:active { transform: translateY(0); }
.ccp-btn-calculate.loading { opacity: .5; cursor: wait; }

/* ── Erori ───────────────────────────────────────────────────────────────── */
.ccp-error-msg {
    margin-top: 14px;
    background: #fff5f5;
    border: 1px solid #ffd0d0;
    color: #c0392b;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
}
.ccp-no-results {
    text-align: center;
    color: #888;
    padding: 32px;
    margin: 0;
    font-size: 14px;
}

/* ── Card filtre ─────────────────────────────────────────────────────────── */
.ccp-filters-section {
    background: var(--ccp-filters-bg);
    border: var(--ccp-border-width) solid var(--ccp-card-border);
    border-radius: var(--ccp-radius);
    padding: 24px 32px;
    margin-bottom: 16px;
    box-sizing: border-box;
}
.ccp-filters-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.ccp-filter-field {
    flex: 1;
    min-width: 140px;
}
.ccp-filter-field label {
    display: block;
    font-size: var(--ccp-font-size-label);
    color: var(--ccp-filter-label);
    margin-bottom: 6px;
    font-weight: var(--ccp-font-weight-label);
}
.ccp-filter-select {
    width: 100%;
    height: 44px;
    padding: 0 32px 0 12px;
    border: var(--ccp-border-width) solid var(--ccp-filter-border);
    border-radius: var(--ccp-radius-btn);
    font-size: 14px;
    font-family: var(--ccp-font);
    color: var(--ccp-input-text);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 12px center;
    appearance: none; -webkit-appearance: none;
    cursor: pointer; outline: none;
    box-sizing: border-box;
    transition: border-color .15s;
}
.ccp-filter-select:focus { border-color: var(--ccp-primary); }

/* ── Sectiunea rezultate (fundal transparent) ────────────────────────────── */
.ccp-results {
    padding: 0;
    background: transparent;
}

/* ── Header rezultate (standalone, intre filtre si carduri) ──────────────── */
.ccp-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 0 4px;
}
.ccp-results-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--ccp-text);
}
.ccp-results-count {
    font-size: 13px;
    color: var(--ccp-results-count-text);
    background: var(--ccp-results-count-bg);
    padding: 4px 14px;
    border-radius: 20px;
    font-weight: 500;
}

/* ── Card Ofertă — Concept C: Hero Rate ─────────────────────────────────── */
.ccp-calculator-wrap .ccp-offer-card {
    border: var(--ccp-border-width) solid var(--ccp-card-border) !important;
    border-radius: var(--ccp-radius) !important;
    background: var(--ccp-card-bg) !important;
    margin-bottom: var(--ccp-card-gap) !important;
    box-shadow: var(--ccp-card-shadow) !important;
    transition: box-shadow .2s, border-color .2s;
    overflow: hidden !important;
    padding: 0 !important;
}
.ccp-calculator-wrap .ccp-offer-card:hover {
    box-shadow: var(--ccp-card-shadow-hover) !important;
    border-color: #c8c8c8 !important;
}
.ccp-calculator-wrap .ccp-offer-card.is-special {
    border-color: var(--ccp-card-special-border) !important;
    background: var(--ccp-card-special-bg) !important;
}

/* ── Body: flex row stânga + dreapta ─────────────────────────────────────── */
.ccp-calculator-wrap .ccp-offer-body {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    min-height: 160px;
    width: 100%;
    box-sizing: border-box;
}

/* ── STÂNGA: logo + info + badges + butoane secundare ────────────────────── */
.ccp-calculator-wrap .ccp-offer-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px;
    padding: 24px 28px !important;
    text-align: left !important;
    box-sizing: border-box;
}

.ccp-calculator-wrap .ccp-offer-top-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px;
}

.ccp-calculator-wrap .ccp-offer-logo-wrap {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    background: #f5f5f5 !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.ccp-calculator-wrap .ccp-offer-bank-logo {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
.ccp-calculator-wrap .ccp-offer-bank-initials {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--ccp-text) !important;
    line-height: 1 !important;
}

.ccp-calculator-wrap .ccp-offer-info {
    min-width: 0;
    text-align: left !important;
}
.ccp-calculator-wrap .ccp-offer-bank-name {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--ccp-text) !important;
    line-height: 1.2 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
}
.ccp-calculator-wrap .ccp-offer-subtitle {
    font-size: 13px !important;
    color: #777 !important;
    margin-top: 3px !important;
    line-height: 1.4 !important;
    text-align: left !important;
    font-weight: 400 !important;
}

/* Badge-uri meta */
.ccp-calculator-wrap .ccp-offer-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px;
    text-align: left !important;
}
.ccp-calculator-wrap .ccp-offer-meta-item {
    background: var(--ccp-meta-bg) !important;
    color: var(--ccp-meta-text) !important;
    font-size: 12px !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    white-space: nowrap;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Butoane secundare */
.ccp-calculator-wrap .ccp-offer-secondary-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px;
    margin-top: auto !important;
}
.ccp-calculator-wrap .ccp-btn-action {
    height: 36px !important;
    padding: 0 16px !important;
    border-radius: var(--ccp-radius-btn) !important;
    font-size: 13px !important;
    font-family: var(--ccp-font) !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all .15s;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    line-height: 1 !important;
}
.ccp-calculator-wrap .ccp-btn-schedule,
.ccp-calculator-wrap .ccp-btn-details {
    background: #ffffff !important;
    border: 1px solid var(--ccp-btn-sec-border) !important;
    color: var(--ccp-btn-sec-text) !important;
    box-shadow: none !important;
}
.ccp-calculator-wrap .ccp-btn-schedule:hover,
.ccp-calculator-wrap .ccp-btn-details:hover {
    background: var(--ccp-btn-sec-hover-bg) !important;
    color: var(--ccp-btn-sec-hover-text) !important;
    border-color: var(--ccp-btn-sec-hover-bg) !important;
}

/* ── DREAPTA: hero rata — fundal accent ──────────────────────────────────── */
.ccp-calculator-wrap .ccp-offer-right {
    width: 220px !important;
    min-width: 220px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px;
    padding: 24px 24px !important;
    background: var(--ccp-card-right-bg) !important;
    border-left: 1px solid var(--ccp-card-border) !important;
    text-align: center !important;
    position: relative !important;
    box-sizing: border-box;
}
.ccp-calculator-wrap .ccp-offer-card.is-special .ccp-offer-right {
    background: #f8f6ff !important;
}

.ccp-calculator-wrap .ccp-badge-promo {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    background: var(--ccp-badge-bg) !important;
    color: var(--ccp-badge-text) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    letter-spacing: .3px;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    border: none !important;
    box-shadow: none !important;
}

.ccp-calculator-wrap .ccp-offer-rate-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px;
}
.ccp-calculator-wrap .ccp-offer-rate-label {
    font-size: 11px !important;
    color: #888 !important;
    text-transform: uppercase !important;
    letter-spacing: .6px;
    font-weight: 500 !important;
    margin: 0 !important;
}
.ccp-calculator-wrap .ccp-offer-rate {
    font-size: var(--ccp-font-size-rate) !important;
    font-weight: 700 !important;
    color: var(--ccp-rate-color) !important;
    line-height: 1 !important;
    letter-spacing: -.5px;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
}
.ccp-calculator-wrap .ccp-offer-rate-sub {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #999 !important;
}
.ccp-calculator-wrap .ccp-offer-rate-secondary {
    font-size: 12px !important;
    color: #777 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}
.ccp-calculator-wrap .ccp-offer-rate-secondary strong {
    color: var(--ccp-text) !important;
    font-weight: 600 !important;
}

/* Buton Alege oferta */
.ccp-calculator-wrap .ccp-btn-choose-offer {
    width: 100% !important;
    height: 42px !important;
    padding: 0 16px !important;
    background: var(--ccp-btn-choose) !important;
    color: var(--ccp-btn-choose-text) !important;
    border: none !important;
    border-radius: var(--ccp-radius-btn) !important;
    font-size: 14px !important;
    font-family: var(--ccp-font) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: opacity .15s, transform .1s;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
    box-sizing: border-box !important;
}
.ccp-calculator-wrap .ccp-btn-choose-offer:hover {
    opacity: .85 !important;
    transform: translateY(-1px) !important;
    color: var(--ccp-btn-choose-text) !important;
    background: var(--ccp-btn-choose) !important;
}

/* Buton Alege oferta */
.ccp-btn-choose-offer {
    width: 100%;
    height: 42px;
    padding: 0 16px;
    background: var(--ccp-btn-choose);
    color: var(--ccp-btn-choose-text);
    border: none;
    border-radius: var(--ccp-radius-btn);
    font-size: 14px;
    font-family: var(--ccp-font);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .15s, transform .1s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ccp-btn-choose-offer:hover { opacity: .85; transform: translateY(-1px); }
.ccp-btn-choose-offer:active { transform: translateY(0); opacity: 1; }

/* ── Detalii text expandabil full-width ──────────────────────────────────── */
.ccp-calculator-wrap .ccp-offer-details-text {
    padding: 14px 28px 18px !important;
    background: var(--ccp-details-bg) !important;
    border-top: 1px solid #f0f0f0 !important;
    font-size: 13px !important;
    color: var(--ccp-details-text) !important;
    line-height: 1.7 !important;
    text-align: left !important;
}

/* ── Buton Compara — stare activa ────────────────────────────────────────── */
.ccp-calculator-wrap .ccp-btn-compare-active {
    background: #1a1a1a !important;
    color: #fff !important;
    border-color: #1a1a1a !important;
}
.ccp-calculator-wrap .ccp-offer-card.ccp-comparing {
    border-color: #1a1a1a !important;
    box-shadow: 0 0 0 2px rgba(26,26,26,.15) !important;
}

/* ── Bara de comparatie ──────────────────────────────────────────────────── */
.ccp-calculator-wrap .ccp-compare-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding: 14px 20px;
    background: #1a1a1a;
    border-radius: var(--ccp-radius);
    flex-wrap: wrap;
}
.ccp-calculator-wrap .ccp-compare-bar-slots {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.ccp-calculator-wrap .ccp-compare-slot {
    flex: 1;
    min-width: 0;
    background: rgba(255,255,255,.08);
    border: 1px dashed rgba(255,255,255,.25);
    border-radius: 8px;
    padding: 10px 14px;
    min-height: 48px;
    display: flex;
    align-items: center;
}
.ccp-calculator-wrap .ccp-compare-slot-empty {
    font-size: 12px;
    color: rgba(255,255,255,.4);
}
.ccp-calculator-wrap .ccp-compare-slot-filled {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ccp-calculator-wrap .ccp-compare-slot-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ccp-calculator-wrap .ccp-compare-slot-sub {
    font-size: 11px;
    color: rgba(255,255,255,.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ccp-calculator-wrap .ccp-compare-vs {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,.35);
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.ccp-calculator-wrap .ccp-compare-bar-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.ccp-calculator-wrap .ccp-btn-compare-now {
    height: 40px;
    padding: 0 20px;
    background: #fff;
    color: #1a1a1a;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .15s;
}
.ccp-calculator-wrap .ccp-btn-compare-now:disabled {
    opacity: .4;
    cursor: default;
}
.ccp-calculator-wrap .ccp-btn-compare-now:not(:disabled):hover { opacity: .85; }
.ccp-calculator-wrap .ccp-btn-compare-clear {
    height: 40px;
    padding: 0 16px;
    background: transparent;
    color: rgba(255,255,255,.6);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
}
.ccp-calculator-wrap .ccp-btn-compare-clear:hover {
    color: #fff;
    border-color: rgba(255,255,255,.5);
}

/* ── Panoul de comparatie ────────────────────────────────────────────────── */
.ccp-calculator-wrap .ccp-compare-panel {
    margin-top: 16px;
    border: 1px solid #e0e0e0;
    border-radius: var(--ccp-radius);
    overflow: hidden;
    background: #fff;
}
.ccp-calculator-wrap .ccp-compare-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
}
.ccp-calculator-wrap .ccp-compare-panel-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}
.ccp-calculator-wrap .ccp-btn-close-compare {
    background: none;
    border: none;
    font-size: 20px;
    color: #888;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 6px;
    line-height: 1;
}
.ccp-calculator-wrap .ccp-btn-close-compare:hover { background: #f0f0f0; color: #1a1a1a; }
.ccp-calculator-wrap .ccp-compare-table-wrap {
    overflow-x: auto;
}
.ccp-calculator-wrap .ccp-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
}
.ccp-calculator-wrap .ccp-compare-table thead th {
    padding: 16px 20px;
    text-align: center;
    border-bottom: 2px solid #e8e8e8;
    background: #fff;
    vertical-align: bottom;
    width: 50%;
}
.ccp-calculator-wrap .ccp-compare-th-bank {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 2px;
}
.ccp-calculator-wrap .ccp-compare-th-offer-name {
    font-size: 11px;
    color: #888;
    font-weight: 400;
}
.ccp-calculator-wrap .ccp-compare-row-label {
    font-size: 11px;
    color: #999;
    font-weight: 500;
    margin-bottom: 3px;
    letter-spacing: .2px;
}
.ccp-calculator-wrap .ccp-compare-row-val {
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
}
.ccp-calculator-wrap .ccp-compare-td-val {
    padding: 12px 20px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
    border-bottom: 1px solid #f5f5f5;
    vertical-align: middle;
}
.ccp-calculator-wrap .ccp-compare-td-val.ccp-compare-winner {
    background: #f0faf0;
    color: #1a7a3a;
    font-weight: 700;
}
.ccp-calculator-wrap .ccp-compare-best {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: #1a7a3a;
    margin-top: 3px;
    letter-spacing: .2px;
}
.ccp-calculator-wrap .ccp-compare-table tr:nth-child(even) .ccp-compare-td-label,
.ccp-calculator-wrap .ccp-compare-table tr:nth-child(even) .ccp-compare-td-val:not(.ccp-compare-winner) {
    background: #fafafa;
}
@media (max-width: 640px) {
    .ccp-calculator-wrap .ccp-compare-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .ccp-calculator-wrap .ccp-compare-bar-slots {
        flex-direction: column;
    }
    .ccp-calculator-wrap .ccp-compare-vs { text-align: center; }
    .ccp-calculator-wrap .ccp-compare-bar-actions { justify-content: stretch; }
    .ccp-calculator-wrap .ccp-btn-compare-now,
    .ccp-calculator-wrap .ccp-btn-compare-clear { flex: 1; }
    .ccp-calculator-wrap .ccp-compare-td-val { padding: 10px 12px; font-size: 12px; }
    .ccp-calculator-wrap .ccp-compare-row-label { font-size: 10px; }
    .ccp-calculator-wrap .ccp-compare-row-val { font-size: 12px; }
}

/* ── Formular broker in-card ─────────────────────────────────────────────── */
.ccp-calculator-wrap .ccp-card-broker {
    border-top: 1px solid #e8e8e8;
    background: #fafafa;
}
.ccp-calculator-wrap .ccp-card-broker-inner {
    /* container intern — stilurile critice sunt inline in JS */
}
.ccp-calculator-wrap .ccp-card-broker-header {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 14px !important;
    margin-bottom: 0;
}
.ccp-calculator-wrap .ccp-btn-close-broker:hover {
    color: #1a1a1a !important;
    background: #f0f0f0 !important;
    border-radius: 6px;
}
.ccp-calculator-wrap .ccp-card-broker-container .ccp-loading {
    border: none;
    background: transparent;
    padding: 24px 0;
}

/* ── Scadentar ───────────────────────────────────────────────────────────── */
.ccp-schedule-section {
    margin-top: 16px;
    border: var(--ccp-border-width) solid var(--ccp-card-border);
    border-radius: var(--ccp-radius);
    overflow: hidden;
    background: var(--ccp-sched-bg);
}
.ccp-schedule-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--ccp-sched-header-bg);
    border-bottom: 1px solid #ebebeb;
}
.ccp-schedule-header h4 { margin: 0; font-size: 14px; font-weight: 600; }
.ccp-schedule-offer-name { font-size: 13px; color: #777; flex: 1; }
.ccp-btn-close-schedule {
    background: none; border: none; cursor: pointer;
    color: #888; font-size: 13px; padding: 4px 8px; border-radius: 6px;
}
.ccp-btn-close-schedule:hover { background: #ebebeb; }
.ccp-schedule-summary {
    display: flex; flex-wrap: wrap; gap: 24px;
    padding: 12px 20px; background: #fff;
    border-bottom: 1px solid #f5f5f5; font-size: 13px;
}
.ccp-schedule-summary-item strong { color: var(--ccp-primary); }
.ccp-schedule-table-wrap { overflow-x: auto; max-height: 400px; overflow-y: auto; }
.ccp-schedule-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ccp-schedule-table th {
    position: sticky; top: 0;
    background: var(--ccp-sched-th-bg);
    color: var(--ccp-sched-th-text);
    padding: 10px 14px; text-align: right;
    font-weight: 600; white-space: nowrap; font-size: 12px; letter-spacing: .3px;
}
.ccp-schedule-table th:first-child { text-align: center; }
.ccp-schedule-table td { padding: 9px 14px; text-align: right; border-bottom: 1px solid #f5f5f5; }
.ccp-schedule-table td:first-child { text-align: center; font-weight: 600; color: #555; }
.ccp-schedule-table tr:nth-child(even) td { background: var(--ccp-sched-row-alt); }
.ccp-schedule-table tr:last-child td { border-bottom: none; }

/* ── Formular Broker ─────────────────────────────────────────────────────── */
.ccp-broker-section {
    background: var(--ccp-broker-bg);
    border: var(--ccp-border-width) solid var(--ccp-card-border);
    border-radius: var(--ccp-radius);
    padding: var(--ccp-padding);
    margin-top: 16px;
}
.ccp-broker-intro { margin-bottom: 20px; }
.ccp-broker-intro h4 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ccp-broker-title);
}
.ccp-broker-intro p { margin: 0; color: #666; font-size: 13px; }

/* ── Loading ─────────────────────────────────────────────────────────────── */
.ccp-loading {
    text-align: center; padding: 40px; color: #888; font-size: 14px;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    background: var(--ccp-input-bg);
    border: var(--ccp-border-width) solid var(--ccp-card-border);
    border-radius: var(--ccp-radius);
}
.ccp-loading::before {
    content: ''; display: inline-block;
    width: 22px; height: 22px;
    border: 2px solid #e0e0e0; border-top-color: #1a1a1a;
    border-radius: 50%; animation: ccp-spin .7s linear infinite; flex-shrink: 0;
}
@keyframes ccp-spin { to { transform: rotate(360deg); } }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .ccp-fields-grid { grid-template-columns: repeat(2, 1fr); }
    .ccp-calculator-wrap .ccp-offer-right {
        width: 200px !important;
        min-width: 200px !important;
        padding: 18px !important;
    }
}
@media (max-width: 640px) {
    .ccp-calculator-wrap { padding: 16px; }
    .ccp-form { padding: 20px; }
    .ccp-filters-section { padding: 16px 20px; }
    .ccp-fields-grid { grid-template-columns: 1fr; }
    .ccp-filters-grid { flex-direction: column; }

    /* Card: stiva verticala pe mobil */
    .ccp-calculator-wrap .ccp-offer-body {
        flex-direction: column !important;
    }
    .ccp-calculator-wrap .ccp-offer-left {
        padding: 20px 20px 16px !important;
        gap: 12px !important;
    }

    /* Panoul dreapta — full-width, compact */
    .ccp-calculator-wrap .ccp-offer-right {
        width: 100% !important;
        min-width: 0 !important;
        border-left: none !important;
        border-top: 1px solid #e0e0e0 !important;
        padding: 16px 20px !important;
        justify-content: flex-start !important;
    }

    /* Valoare principala — font mare, centrat */
    .ccp-calculator-wrap .ccp-rate-value {
        font-size: 36px !important;
        text-align: center !important;
        margin-bottom: 2px !important;
    }

    /* Subtitlu unitate */
    .ccp-calculator-wrap .ccp-rate-unit {
        text-align: center !important;
        margin-bottom: 4px !important;
    }

    /* DAE + Total */
    .ccp-calculator-wrap .ccp-rate-stats {
        margin-bottom: 12px !important;
    }

    /* Buton full-width */
    .ccp-calculator-wrap .ccp-btn-choose-offer {
        width: 100% !important;
        height: 46px !important;
        font-size: 15px !important;
    }

    .ccp-calculator-wrap .ccp-offer-secondary-actions { margin-top: 0 !important; }
    .ccp-schedule-summary { flex-direction: column; gap: 8px; }

    /* Card CTA pe mobile: actiuni sus (egale), Alege oferta full-width jos */
    .ccp-calculator-wrap .ccp-card-cta {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .ccp-calculator-wrap .ccp-card-cta-actions {
        order: 1;
        width: 100%;
        flex-wrap: nowrap !important;
    }
    .ccp-calculator-wrap .ccp-card-cta-actions button {
        flex: 1 !important;
        height: 46px !important;
        padding: 0 8px !important;
        font-size: 12px !important;
        min-width: 0 !important;
    }
    .ccp-calculator-wrap .ccp-card-cta-choose {
        order: 2;
        width: 100%;
    }
    .ccp-calculator-wrap .ccp-card-cta-choose .ccp-btn-choose-offer {
        width: 100% !important;
        max-width: 100% !important;
        height: 46px !important;
        font-size: 15px !important;
    }
}