/* ══════════════════════════════════════════════════════════
   KENYA YETU — Budget Calculator (namespace: ky-calc-*)
   ══════════════════════════════════════════════════════════ */

.page-budget { overflow-x: hidden; }

.ky-calc-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
    max-width: 100%;
    overflow: hidden;
}
.ky-calc-form-wrap { min-width: 0; overflow: hidden; }
.ky-calc-est-wrap { min-width: 0; overflow: hidden; }

/* Every step card must not exceed container */
.ky-calc-step { overflow: hidden; box-sizing: border-box; max-width: 100%; }

/* Ensure grids don't force horizontal scroll */
.ky-calc-dest-grid,
.ky-calc-radio-group,
.ky-calc-act-grid,
.ky-calc-fields,
.ky-calc-contact-grid {
    max-width: 100%;
    overflow: hidden;
}

/* ── Steps ── */
.ky-calc-step {
    display: none !important;
    background: white;
    border-radius: 16px;
    padding: 28px 28px 24px;
    box-shadow: 0 2px 16px rgba(15,23,42,0.05);
    border: 1px solid rgba(230,232,238,0.8);
    margin-bottom: 20px;
    animation: kyCalcFade 0.35s ease;
}
.ky-calc-step.ky-calc-active { display: block !important; }

@keyframes kyCalcFade {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ky-calc-step-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}
.ky-calc-step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1B3A8C, #2563EB);
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ky-calc-step-head h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text, #1a1a2e);
    margin: 0 0 2px;
}
.ky-calc-step-head p {
    font-size: 0.82rem;
    color: #64748b;
    margin: 0;
}

/* ── Destination Grid ── */
.ky-calc-dest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 10px;
}
.ky-calc-dest-card {
    position: relative;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
}
.ky-calc-dest-card:hover {
    border-color: #93b4f5;
    background: rgba(27,58,140,0.02);
}
.ky-calc-dest-card.ky-calc-selected {
    border-color: #1B3A8C;
    background: rgba(27,58,140,0.05);
}
.ky-calc-dest-card.ky-calc-selected::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 0.65rem;
    color: white;
    background: #1B3A8C;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ky-calc-dest-card i {
    font-size: 1.4rem;
    color: #1B3A8C;
    margin-bottom: 6px;
    display: block;
}
.ky-calc-dest-card strong {
    font-size: 0.8rem;
    display: block;
    color: var(--text, #1a1a2e);
}
.ky-calc-dest-card span {
    font-size: 0.7rem;
    color: #94a3b8;
}

/* ── Rows & Fields ── */
.ky-calc-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.ky-calc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ky-calc-field label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text, #1a1a2e);
}
.ky-calc-field select,
.ky-calc-field input[type="text"],
.ky-calc-field input[type="email"],
.ky-calc-field input[type="tel"] {
    padding: 10px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.9rem;
    font-family: inherit;
    background: white;
    color: var(--text, #1a1a2e);
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
}
.ky-calc-field select:focus,
.ky-calc-field input:focus {
    outline: none;
    border-color: #1B3A8C;
}

/* Counter */
.ky-calc-counter {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    width: fit-content;
}
.ky-calc-counter button {
    width: 40px;
    height: 40px;
    border: 0;
    background: #f8f9fc;
    color: #1B3A8C;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ky-calc-counter button:hover { background: #e8ecf4; }
.ky-calc-counter span {
    width: 48px;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text, #1a1a2e);
}

/* ── Radio Groups ── */
.ky-calc-radio-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}
.ky-calc-radio { cursor: pointer; }
.ky-calc-radio input { display: none; }
.ky-calc-radio-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 10px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    text-align: center;
    transition: all 0.2s;
}
.ky-calc-radio-card i { font-size: 1.3rem; color: #64748b; transition: color 0.2s; }
.ky-calc-radio-card strong { font-size: 0.82rem; color: var(--text, #1a1a2e); }
.ky-calc-radio-card span { font-size: 0.7rem; color: #94a3b8; }
.ky-calc-radio input:checked + .ky-calc-radio-card {
    border-color: #1B3A8C;
    background: rgba(27,58,140,0.04);
}
.ky-calc-radio input:checked + .ky-calc-radio-card i { color: #1B3A8C; }
.ky-calc-radio-card:hover { border-color: #93b4f5; }

/* ── Activities ── */
.ky-calc-act-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
}
.ky-calc-act-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}
.ky-calc-act-card:hover { border-color: #93b4f5; }
.ky-calc-act-card.ky-calc-selected {
    border-color: #1B3A8C;
    background: rgba(27,58,140,0.04);
}
.ky-calc-act-card i {
    font-size: 1rem;
    color: #1B3A8C;
    width: 20px;
    text-align: center;
}
.ky-calc-act-card strong { font-size: 0.82rem; color: var(--text, #1a1a2e); }
.ky-calc-act-card span { font-size: 0.68rem; color: #94a3b8; display: block; }

/* Slider */
.ky-calc-slider-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}
.ky-calc-slider-wrap input[type="range"] {
    flex: 1;
    accent-color: #1B3A8C;
    height: 6px;
}
.ky-calc-slider-wrap span {
    font-weight: 700;
    font-size: 1rem;
    color: #1B3A8C;
    min-width: 50px;
}

/* Contact grid */
.ky-calc-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ── Navigation ── */
.ky-calc-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

/* ── Estimate Panel ── */
.ky-calc-est-wrap {
    position: sticky;
    top: 100px;
    max-width: 380px;
    width: 100%;
}
.ky-calc-est {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 24px rgba(15,23,42,0.08);
    border: 1px solid rgba(230,232,238,0.8);
    margin-bottom: 16px;
}
.ky-calc-est-head { margin-bottom: 20px; }
.ky-calc-est-head h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text, #1a1a2e);
    margin: 6px 0 0;
}

.ky-calc-est-total {
    text-align: center;
    padding: 20px 0;
    border-bottom: 1px solid #f0f2f7;
    margin-bottom: 16px;
}
.ky-calc-est-label {
    font-size: 0.78rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ky-calc-est-amount {
    font-size: 2.4rem;
    font-weight: 800;
    color: #1B3A8C;
    line-height: 1.1;
    margin: 4px 0;
}
.ky-calc-est-sub {
    font-size: 0.82rem;
    color: #64748b;
}

/* Breakdown rows */
.ky-calc-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 16px;
}
.ky-calc-bd-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid #f5f6fa;
    font-size: 0.82rem;
}
.ky-calc-bd-row:last-child { border-bottom: 0; }
.ky-calc-bd-row .bd-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #475569;
}
.ky-calc-bd-row .bd-label i {
    width: 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.75rem;
}
.ky-calc-bd-row .bd-value {
    font-weight: 600;
    color: var(--text, #1a1a2e);
}

.ky-calc-est-note {
    background: #f8f9fc;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 0.75rem;
    color: #64748b;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 16px;
}
.ky-calc-est-note i { color: #94a3b8; margin-top: 1px; }

.ky-calc-est-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Tier cards */
.ky-calc-tiers {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ky-calc-tier {
    background: white;
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(230,232,238,0.8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
}
.ky-calc-tier-label {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ky-calc-tier-label i { font-size: 0.75rem; }
.ky-calc-tier strong { color: var(--text, #1a1a2e); }
.ky-calc-tier span { font-weight: 700; color: #1B3A8C; }

/* ── Buttons ── */
.ky-calc-btn-block {
    width: 100%;
    text-align: center;
    justify-content: center;
}
.ky-calc-whatsapp-btn {
    background: #25D366;
    color: white;
    border: 0;
    padding: 14px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s;
}
.ky-calc-whatsapp-btn:hover { background: #1da851; }

/* ── FAQ ── */
.ky-calc-faq {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ky-calc-faq-item {
    background: white;
    border-radius: 12px;
    border: 1px solid rgba(230,232,238,0.8);
    overflow: hidden;
}
.ky-calc-faq-q {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    border: 0;
    background: white;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text, #1a1a2e);
    text-align: left;
    font-family: inherit;
}
.ky-calc-faq-q i { color: #94a3b8; transition: transform 0.25s; }
.ky-calc-faq-item.ky-calc-open .ky-calc-faq-q i { transform: rotate(180deg); }
.ky-calc-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.ky-calc-faq-a-inner {
    padding: 0 18px 16px;
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.65;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Full mobile coverage
   ══════════════════════════════════════════════════════════ */

/* ── Tablet (768–1024px) ── */
@media (max-width: 1024px) {
    .ky-calc-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .ky-calc-est-wrap {
        position: static;
        order: -1;
    }
    .ky-calc-tiers {
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .ky-calc-tiers::-webkit-scrollbar { display: none; }
    .ky-calc-tier { min-width: 180px; flex-shrink: 0; }
    .ky-calc-step-head h3 { font-size: 1.1rem; }
    .ky-calc-dest-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
    .ky-calc-est { max-width: 100%; box-sizing: border-box; }
}

/* ── Mobile landscape (max 767px) ── */
@media (max-width: 767px) {
    .ky-calc-layout { gap: 16px; }

    .ky-calc-step {
        padding: 20px 16px;
        border-radius: 12px;
    }
    .ky-calc-step-head {
        gap: 10px;
        margin-bottom: 18px;
    }
    .ky-calc-step-num { width: 32px; height: 32px; font-size: 0.8rem; }
    .ky-calc-step-head h3 { font-size: 1rem; margin-bottom: 1px; }
    .ky-calc-step-head p { font-size: 0.78rem; }

    /* Destinations */
    .ky-calc-dest-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 8px;
    }
    .ky-calc-dest-card { padding: 12px 8px; }
    .ky-calc-dest-card i { font-size: 1.2rem; margin-bottom: 4px; }
    .ky-calc-dest-card strong { font-size: 0.76rem; }
    .ky-calc-dest-card span { font-size: 0.66rem; }

    /* Fields */
    .ky-calc-fields {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .ky-calc-field label { font-size: 0.78rem; }
    .ky-calc-field select,
    .ky-calc-field input[type="text"],
    .ky-calc-field input[type="email"],
    .ky-calc-field input[type="tel"] {
        padding: 9px 12px;
        font-size: 0.85rem;
    }
    .ky-calc-counter button { width: 36px; height: 36px; }
    .ky-calc-counter span { width: 40px; font-size: 0.9rem; }

    /* Radios */
    .ky-calc-radio-group {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .ky-calc-radio-card {
        padding: 14px 8px;
        gap: 3px;
    }
    .ky-calc-radio-card i { font-size: 1.1rem; }
    .ky-calc-radio-card strong { font-size: 0.78rem; }
    .ky-calc-radio-card span { font-size: 0.65rem; }

    /* Activities */
    .ky-calc-act-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .ky-calc-act-card {
        padding: 10px 10px;
        gap: 8px;
    }
    .ky-calc-act-card i { font-size: 0.88rem; }
    .ky-calc-act-card strong { font-size: 0.78rem; }
    .ky-calc-act-card span { font-size: 0.64rem; }

    /* Contact */
    .ky-calc-contact-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Estimate panel */
    .ky-calc-est {
        padding: 18px 16px;
        border-radius: 12px;
    }
    .ky-calc-est-amount { font-size: 1.8rem; }
    .ky-calc-est-sub { font-size: 0.78rem; }
    .ky-calc-bd-row { font-size: 0.78rem; padding: 8px 0; }
    .ky-calc-est-note { font-size: 0.72rem; padding: 10px 12px; }

    /* Nav */
    .ky-calc-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        padding: 12px 16px;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
        z-index: 100;
        margin-top: 0;
        gap: 10px;
        border-top: 1px solid #f0f2f7;
    }
    .ky-calc-nav .btn {
        padding: 13px 20px;
        font-size: 0.88rem;
    }
    /* Add bottom padding so form content isn't hidden under fixed nav */
    .ky-calc-form-wrap { padding-bottom: 80px; }

    /* Action buttons */
    .ky-calc-whatsapp-btn { padding: 13px 20px; font-size: 0.88rem; }

    /* FAQ */
    .ky-calc-faq-q {
        padding: 14px 14px;
        font-size: 0.85rem;
    }
    .ky-calc-faq-a-inner {
        padding: 0 14px 14px;
        font-size: 0.82rem;
    }
}

/* ── Mobile portrait (max 480px) ── */
@media (max-width: 480px) {
    .ky-calc-step { padding: 16px 14px; }
    .ky-calc-step-head { margin-bottom: 14px; }

    /* Destinations — 3 cols tight */
    .ky-calc-dest-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    .ky-calc-dest-card { padding: 10px 4px; border-radius: 10px; }
    .ky-calc-dest-card i { font-size: 1rem; margin-bottom: 3px; }
    .ky-calc-dest-card strong { font-size: 0.7rem; line-height: 1.2; }
    .ky-calc-dest-card span { display: none; }
    .ky-calc-dest-card.ky-calc-selected::after { width: 16px; height: 16px; font-size: 0.55rem; top: 4px; right: 4px; }

    /* Fields — stack on small screens */
    .ky-calc-fields {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .ky-calc-field input,
    .ky-calc-field select {
        font-size: 16px; /* prevents iOS zoom */
    }

    /* Radios — single column */
    .ky-calc-radio-group {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .ky-calc-radio-card { padding: 12px 6px; }
    .ky-calc-radio-card i { font-size: 1rem; }
    .ky-calc-radio-card strong { font-size: 0.74rem; }

    /* Activities — single column */
    .ky-calc-act-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .ky-calc-act-card { padding: 10px 12px; }

    /* Estimate */
    .ky-calc-est { padding: 14px 12px; }
    .ky-calc-est-head h3 { font-size: 0.95rem; }
    .ky-calc-est-amount { font-size: 1.6rem; }
    .ky-calc-est-label { font-size: 0.72rem; }
    .ky-calc-est-sub { font-size: 0.74rem; }
    .ky-calc-bd-row { font-size: 0.75rem; }
    .ky-calc-tier { padding: 12px 12px; font-size: 0.78rem; }

    /* Nav */
    .ky-calc-nav { padding: 10px 12px; }
    .ky-calc-nav .btn { padding: 12px 16px; font-size: 0.84rem; }
}

/* ── Ultra small (max 360px) ── */
@media (max-width: 360px) {
    .ky-calc-dest-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .ky-calc-radio-group { grid-template-columns: 1fr; }
    .ky-calc-step-head h3 { font-size: 0.92rem; }
    .ky-calc-est-amount { font-size: 1.4rem; }
    .ky-calc-whatsapp-btn { font-size: 0.82rem; padding: 12px 16px; }
}

/* ── Safe area notch phones ── */
@supports (padding: max(0px)) {
    .ky-calc-nav {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* ── Prevent hero overflow ── */
.page-budget .hero { overflow: hidden; }
.page-budget .hero-images { overflow: hidden; }
.page-budget .sub-hero { overflow: hidden; }

/* ── Prevent all sections from overflowing ── */
.page-budget .section,
.page-budget .cta-section,
.page-budget .footer { overflow: hidden; }
.page-budget .container { max-width: 1120px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }