/* ============================================================
   Move Spain Visa — Premium Price Calculator
   Design: matches VisaPage.jsx (Tailwind-based design system)
   Target: compact embed in ≤ 460 px iframe
   ============================================================ */

/* ── Design tokens ─────────────────────────────────────────── */
#movespain-calculator {
    --cp-blue: hsl(218, 56%, 40%);
    --cp-blue-dk: hsl(218, 56%, 27%);
    --cp-green: hsl(150, 48%, 30%);
    --cp-green-dk: hsl(150, 48%, 20%);
    --cp-orange: hsl(36, 90%, 47%);
    --cp-bg: hsl(210, 40%, 98%);
    --cp-border: hsl(214, 32%, 91%);
    --cp-text: hsl(222, 47%, 11%);
    --cp-muted: hsl(215, 16%, 47%);
    --cp-hint: hsl(215, 20%, 65%);
    --cp-radius: 12px;

    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--cp-text);
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    padding: 12px;
    background: transparent;
}

/* ── Card wrapper ──────────────────────────────────────────── */
#movespain-calculator .calc-card {
    background: #fff;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    overflow: hidden;
    max-width: 100%;
    margin: 0 auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 4px 14px rgba(0, 0, 0, .05);
}

/* ── Header ────────────────────────────────────────────────── */
#movespain-calculator .calc-header {
    background: var(--cp-bg);
    border-bottom: 1px solid var(--cp-border);
    padding: 11px 20px;
    text-align: center;
}

#movespain-calculator .calc-heading {
    font-size: 14px;
    font-weight: 600;
    color: var(--cp-blue);
    margin: 0;
    letter-spacing: -.01em;
}

#movespain-calculator .ref-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: hsl(142, 76%, 25%);
    background: hsl(141, 79%, 94%);
    border: 1px solid hsl(141, 60%, 82%);
    border-radius: 20px;
    padding: 2px 8px;
    margin-top: 4px;
}

/* ── Config rows (list layout) ────────────────────────────── */
#movespain-calculator .calc-rows {
    padding: 0 18px;
}

#movespain-calculator .calc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid var(--cp-border);
    gap: 12px;
}

#movespain-calculator .row-info {
    flex: 1;
    min-width: 0;
}

#movespain-calculator .row-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--cp-text);
}

#movespain-calculator .row-hint {
    display: block;
    font-size: 11px;
    color: var(--cp-muted);
    margin-top: 1px;
}

/* ── Counters ──────────────────────────────────────────────── */
#movespain-calculator .counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

#movespain-calculator .counter-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: var(--cp-blue);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
    transition: background .15s, transform .1s;
}

#movespain-calculator .counter-btn:hover {
    background: var(--cp-blue-dk);
}

#movespain-calculator .counter-btn:active {
    transform: scale(.88);
}

#movespain-calculator .counter-btn--alt {
    background: var(--cp-green);
}

#movespain-calculator .counter-btn--alt:hover {
    background: var(--cp-green-dk);
}

#movespain-calculator .counter-val {
    width: 36px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    border: 1.5px solid var(--cp-border);
    border-radius: 6px;
    padding: 2px;
    color: var(--cp-blue);
    background: transparent;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

#movespain-calculator .counter-val--alt {
    color: var(--cp-green);
}

#movespain-calculator .counter-val::-webkit-outer-spin-button,
#movespain-calculator .counter-val::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Translation toggle ─────────────────────────────────────── */
#movespain-calculator .translation-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

#movespain-calculator input[type="checkbox"]#translationCheck {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--cp-hint);
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
}

#movespain-calculator input[type="checkbox"]#translationCheck:checked {
    background: var(--cp-green);
    border-color: var(--cp-green);
}

#movespain-calculator input[type="checkbox"]#translationCheck:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -54%) rotate(45deg);
    display: block;
    width: 4px;
    height: 8px;
    border: 1.5px solid #fff;
    border-top: none;
    border-left: none;
}

#movespain-calculator .toggle-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--cp-muted);
    cursor: pointer;
}

/* ── Footer ─────────────────────────────────────────────────── */
#movespain-calculator .calc-footer {
    background: var(--cp-bg);
    padding: 12px 18px 14px;
}

#movespain-calculator .calc-footer-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-bottom: 10px;
}

#movespain-calculator .summary-text {
    color: var(--cp-muted);
    font-size: 12px;
    margin: 0;
}

#movespain-calculator .total-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--cp-blue);
    margin: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

#movespain-calculator .total-original {
    font-size: 13px;
    font-weight: 400;
    color: var(--cp-hint);
    text-decoration: line-through;
    margin-right: 4px;
}

#movespain-calculator .total-discount {
    font-size: 13px;
    color: var(--cp-orange);
    margin-right: 2px;
}

/* ── Payment buttons ────────────────────────────────────────── */
#movespain-calculator .calc-pay-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

#movespain-calculator .pay-btn {
    padding: 7px 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transition: opacity .15s, transform .1s;
    text-align: center;
}

#movespain-calculator .pay-btn:hover {
    opacity: .88;
}

#movespain-calculator .pay-btn:active {
    transform: scale(.98);
}

#movespain-calculator .pay-btn[disabled] {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

#movespain-calculator .pay-btn--primary {
    background: var(--cp-blue);
    color: #fff;
}

#movespain-calculator .pay-btn--flex {
    background: var(--cp-green);
    color: #fff;
}

#movespain-calculator .pay-btn-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
    opacity: .85;
    line-height: 1;
}

/* .save-tag — inline in button, JS sets textContent */

#movespain-calculator .pay-btn-amount {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

#movespain-calculator .pay-btn-now {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

#movespain-calculator .pay-btn-rest {
    font-size: 9px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    opacity: .8;
    line-height: 1.3;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 380px) {
    #movespain-calculator .calc-pay-btns {
        grid-template-columns: 1fr;
    }
}