/* ==========================================================================
   Creddo — Application / Eligibility Page Styles  (v2 redesign)
   Builds on the global system in styles.css
   ========================================================================== */

/* highlighted hero phrase */
.apply-hero .text-gold {
    background: linear-gradient(120deg, #f2a71b, #f7c04a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ==========================================================================
   APPLY HERO — light split layout with media card
   ========================================================================== */
.apply-hero {
    position: relative;
    padding: calc(var(--nav-h) + 64px) 0 76px;
    background: linear-gradient(180deg, #f7f8fa 0%, #ffffff 100%);
    overflow: hidden;
}

.apply-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(16, 25, 43, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 25, 43, .035) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(56rem 32rem at 50% 0%, #000 25%, transparent 78%);
    mask-image: radial-gradient(56rem 32rem at 50% 0%, #000 25%, transparent 78%);
    pointer-events: none;
}

.apply-hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.06fr .94fr;
    gap: 56px;
    align-items: center;
}

.apply-hero-inner.single { grid-template-columns: 1fr; text-align: center; }
.apply-hero-inner.single .apply-hero-content { max-width: 640px; margin: 0 auto; }
.apply-hero-inner.single .apply-trust-points { justify-content: center; }
.apply-hero-inner.single .hero-cta-row { justify-content: center; }

.apply-offer-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid rgba(242, 167, 27, .4);
    box-shadow: var(--shadow-sm);
    color: var(--ink-2);
    font-size: .82rem;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 100px;
    margin-bottom: 24px;
}

.apply-offer-badge i { color: var(--gold); }

.apply-hero h1 {
    font-size: clamp(2.1rem, 4.2vw, 3.2rem);
    margin-bottom: 20px;
}

.apply-hero-subtitle {
    font-size: 1.05rem;
    color: var(--body);
    max-width: 520px;
    margin-bottom: 30px;
}

.apply-trust-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-bottom: 34px;
}

.trust-point {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink-2);
}

.trust-point i { color: var(--green); }

.hero-cta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.airpods-free-tag,
.hero-gift-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .84rem;
    font-weight: 700;
    color: #8a5a00;
    background: linear-gradient(120deg, #fff7e6, #ffedc7);
    border: 1px solid rgba(242, 167, 27, .45);
    padding: 11px 18px;
    border-radius: 100px;
}

/* ---------- Full-screen hero variant (check-eligibility) ---------- */
.apply-hero.fullscreen {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: calc(var(--nav-h) + 48px) 0 64px;
    background: var(--bg-deep);
    text-align: left;
}

.apply-hero.fullscreen::before { display: none; }

.apply-hero-video-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--bg-deep);
    overflow: hidden;
}

/* zoomed in and pushed toward the bottom-right so the Gemini watermark in that
   corner is cropped off; any gap it opens on the left hides under the black wash */
.apply-hero-video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.36) translate(11%, 6%);
    transform-origin: center center;
}

/* solid black on the left blending into the video on the right */
.apply-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #000 0%, #000 22%, rgba(0, 0, 0, .82) 42%, rgba(0, 0, 0, .4) 66%, rgba(0, 0, 0, .08) 88%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

.apply-hero.fullscreen .container { position: relative; z-index: 1; }

.apply-hero.fullscreen .apply-hero-content {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.apply-hero.fullscreen h1 { color: #fff; }

.apply-hero.fullscreen .apply-hero-subtitle { color: rgba(255, 255, 255, .84); }

.apply-hero.fullscreen .trust-point { color: rgba(255, 255, 255, .88); }

/* refined welcome-gift tag (fullscreen hero) */
.apply-hero.fullscreen .apply-offer-badge {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 26px;
    color: #fff;
}

.apply-hero.fullscreen .apply-offer-badge i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(242, 167, 27, .16);
    border: 1px solid rgba(242, 167, 27, .5);
    color: var(--gold);
    font-size: .82rem;
}

.offer-badge-main {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .96rem;
    letter-spacing: .01em;
    color: #fff;
}

.offer-badge-sep {
    width: 1px;
    height: 15px;
    background: rgba(255, 255, 255, .28);
}

.offer-badge-sub {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(242, 167, 27, .92);
}

/* media card (gift / product video) */
.apply-hero-media { position: relative; }

.apply-hero-media .media-frame {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    background: var(--bg-deep);
    aspect-ratio: 4 / 4.3;
}

.apply-hero-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.apply-hero-media .media-tag {
    position: absolute;
    left: 18px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 11px 16px;
    font-size: .84rem;
    font-weight: 700;
    color: var(--ink);
    box-shadow: var(--shadow-md);
}

.apply-hero-media .media-tag i { color: var(--gold); }

/* ==========================================================================
   PROCESS STRIP
   ========================================================================== */
.apply-process { padding: 84px 0 40px; background: #fff; }

.process-cards {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: 16px;
    align-items: stretch;
}

.process-card {
    position: relative;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 30px 22px 26px;
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
}

.process-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

.process-card.highlight-card {
    background: #fff;
    border-color: var(--line-2);
    box-shadow: var(--shadow-md);
}

.process-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink-2);
    font-size: 1.1rem;
}

.process-card.highlight-card .process-icon { background: var(--primary-soft); }

.process-number {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: .78rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-sm);
}

.process-card h4 { font-size: 1rem; margin-bottom: 6px; }
.process-card p { font-size: .84rem; color: var(--body); }

.process-connector { align-self: center; color: var(--line-2); font-size: .95rem; }

.official-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-size: .74rem;
    font-weight: 700;
    color: var(--green);
    background: rgba(14, 175, 123, .1);
    border: 1px solid rgba(14, 175, 123, .3);
    padding: 5px 12px;
    border-radius: 100px;
}

/* ==========================================================================
   BANK LOGO STRIP
   ========================================================================== */
.apply-banks { padding: 40px 0 84px; background: #fff; }

.banks-title {
    text-align: center;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--muted);
    margin-bottom: 26px;
}

.banks-title i { margin-right: 7px; color: var(--ink-2); }

.banks-logos {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.banks-track {
    display: flex;
    align-items: center;
    gap: 64px;
    width: max-content;
    animation: marquee 32s linear infinite;
}

.banks-track img {
    height: 38px;
    width: auto;
    object-fit: contain;
    filter: grayscale(1) opacity(.6);
    transition: filter .3s ease;
}

.banks-track img:hover { filter: none; }

/* ==========================================================================
   GIFT SHOWCASE
   ========================================================================== */
.leather-color-section { padding: 96px 0; background: var(--bg-soft); }

.single-bag-showcase {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    flex-wrap: wrap;
}

.single-bag-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: 26px;
    width: min(330px, 100%);
    text-align: center;
    transition: transform .28s ease, box-shadow .28s ease;
}

.single-bag-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.single-bag-image-wrap {
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--bg-soft);
    margin-bottom: 18px;
}

.single-bag-image-wrap img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.single-bag-name {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.08rem;
    color: var(--ink);
}

.bag-plus {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: var(--shadow-md);
}

.two-bags-badge-row { text-align: center; margin-top: 38px; }

.single-bag-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .92rem;
    font-weight: 700;
    color: #8a5a00;
    background: linear-gradient(120deg, #fff7e6, #ffedc7);
    border: 1px solid rgba(242, 167, 27, .45);
    padding: 13px 24px;
    border-radius: 100px;
}

.single-bag-badge i { color: var(--gold); }

/* ==========================================================================
   FORM SECTION
   ========================================================================== */
.apply-form-section { padding: 96px 0; background: #fff; }

.apply-form-wrapper {
    max-width: 680px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: 44px 46px;
}

/* --- step indicator --- */
.step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 38px;
}

.step-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
}

.step-num {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: .92rem;
    background: var(--bg-soft);
    border: 1.5px solid var(--line-2);
    color: var(--muted);
    transition: all .3s ease;
}

.step-label {
    font-size: .74rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    transition: color .3s ease;
}

.step-dot.active .step-num {
    background: var(--primary);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--shadow-blue);
}

.step-dot.active .step-label { color: var(--primary); }

.step-dot.completed .step-num {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

.step-dot.completed .step-label { color: var(--green); }

.step-line {
    flex: 1;
    max-width: 110px;
    height: 3px;
    border-radius: 3px;
    background: var(--line);
    margin: 0 12px 24px;
    position: relative;
    overflow: hidden;
}

.step-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s ease;
}

.step-line.filled::after { transform: scaleX(1); }

/* --- form steps --- */
.form-step { display: none; }
.form-step.active { display: block; animation: stepIn .35s ease; }

@keyframes stepIn {
    from { opacity: 0; transform: translateX(14px); }
    to { opacity: 1; transform: translateX(0); }
}

.step-title {
    font-size: 1.2rem;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.step-title i {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--primary-soft);
    color: var(--ink-2);
    font-size: .95rem;
}

.form-btn-row {
    display: flex;
    gap: 14px;
    margin-top: 8px;
}

.form-btn-row .btn { flex: 1; }

/* --- pincode status --- */
.pincode-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .78rem;
    font-weight: 600;
    margin-top: 7px;
}

.pincode-status-badge.loading { color: var(--muted); }
.pincode-status-badge.success { color: var(--green); }
.pincode-status-badge.error { color: var(--red); }

/* --- auto-fill badge (apply-new / apply-loan city, state, area fields) --- */
.auto-fill-badge {
    position: absolute;
    top: -9px;
    right: 12px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--green);
    background: #fff;
    border: 1px solid rgba(14, 175, 123, .35);
    padding: 2px 9px;
    border-radius: 100px;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.auto-fill-badge.visible { opacity: 1; }

/* --- radio question --- */
.credit-card-question { margin-bottom: 20px; }

/* .credit-card-question is a .form-group, so its direct child <label> would be
   caught by the floating-placeholder rule (.form-group > label { position:absolute })
   and overlap the radio boxes. Pin it back into normal flow — the extra class
   specificity beats .form-group > label. */
.credit-card-question > .question-label {
    display: block;
    position: static;
    left: auto;
    top: auto;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: 12px;
    padding: 0;
    background: none;
    pointer-events: auto;
}

/* small inline radio buttons (not full-width boxes) */
.radio-group { display: flex; align-items: center; gap: 28px; }

.radio-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .95rem;
    font-weight: 500;
    color: var(--ink-2);
    cursor: pointer;
    transition: color .18s ease;
}

.radio-label:has(input:checked) { color: var(--primary); font-weight: 600; }

.radio-label input[type="radio"] {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

.radio-custom { display: none; }

/* --- trust bar under form --- */
.form-trust-bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.form-trust-bar .trust-item { font-size: .8rem; color: var(--muted); }
.form-trust-bar .trust-item i { color: var(--green); }

/* form section ineligible card width */
.apply-form-section .ineligible-message { max-width: 680px; margin: 0 auto; }

/* ==========================================================================
   BANK PROCESS HIGHLIGHT
   ========================================================================== */
.bank-process-highlight { padding: 0 0 96px; background: #fff; }

.highlight-card-wrapper {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    max-width: 860px;
    margin: 0 auto;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 38px 40px;
}

.highlight-icon {
    flex-shrink: 0;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: #fff;
    font-size: 1.4rem;
    box-shadow: var(--shadow-md);
}

.highlight-content h3 { font-size: 1.3rem; margin-bottom: 10px; }
.highlight-content p { font-size: .95rem; margin-bottom: 18px; }

.highlight-badges { display: flex; flex-wrap: wrap; gap: 10px; }

.highlight-badges span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-2);
    background: #fff;
    border: 1px solid var(--line);
    padding: 7px 14px;
    border-radius: 100px;
}

.highlight-badges i { color: var(--green); }

/* ==========================================================================
   SUCCESS MODAL
   ========================================================================== */
.apply-success-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(7, 20, 49, .55);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}

.apply-success-modal.show { opacity: 1; visibility: visible; }

.success-modal-content {
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: 46px 42px;
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    text-align: center;
    transform: translateY(14px);
    transition: transform .3s ease;
}

.apply-success-modal.show .success-modal-content { transform: translateY(0); }

.success-icon-wrap { position: relative; width: 74px; margin: 0 auto 20px; }

.success-check {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--green);
    color: #fff;
    font-size: 1.8rem;
    position: relative;
    z-index: 1;
}

.success-ring {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(14, 175, 123, .35);
    animation: successRing 1.6s ease-out infinite;
}

@keyframes successRing {
    0% { transform: scale(.85); opacity: 1; }
    100% { transform: scale(1.25); opacity: 0; }
}

.success-modal-content h2 { font-size: 1.5rem; margin-bottom: 24px; }

.success-info-cards { display: grid; gap: 14px; margin-bottom: 28px; text-align: left; }

.success-info-card {
    display: block;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 18px 20px;
}

.success-info-card.highlight {
    background: #fff;
    border-color: var(--line-2);
    box-shadow: var(--shadow-sm);
}

.success-info-card .info-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--primary-soft);
    color: var(--ink-2);
    font-size: .95rem;
    margin-bottom: 12px;
}

.success-info-card h4 { font-size: .98rem; margin-bottom: 5px; }
.success-info-card p { font-size: .86rem; color: var(--body); }

.verified-stamp {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-size: .76rem;
    font-weight: 700;
    color: var(--green);
    background: rgba(14, 175, 123, .1);
    border: 1px solid rgba(14, 175, 123, .3);
    padding: 5px 12px;
    border-radius: 100px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .apply-hero-inner { grid-template-columns: 1fr; gap: 44px; }
    .apply-hero-media { max-width: 480px; margin: 0 auto; width: 100%; }

    .process-cards { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
    .process-connector { display: none; }
}

@media (max-width: 768px) {
    .apply-hero { padding: calc(var(--nav-h) + 44px) 0 64px; }

    /* horizontal wash doesn't cover full-width text on small screens — go uniform dark */
    .apply-hero-overlay {
        background: linear-gradient(180deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .6) 55%, rgba(0, 0, 0, .78) 100%);
    }

    .apply-form-wrapper { padding: 32px 22px; }

    .step-label { display: none; }
    .step-line { margin-bottom: 0; max-width: 64px; }

    .form-btn-row { flex-direction: column-reverse; }

    .highlight-card-wrapper { flex-direction: column; padding: 30px 24px; }

    .single-bag-showcase { gap: 20px; }
    .bag-plus { width: 44px; height: 44px; }
}

@media (max-width: 560px) {
    .process-cards { grid-template-columns: 1fr; }

    /* small radios stay in a row on mobile too */
    .radio-group { flex-direction: row; gap: 24px; }

    .success-modal-content { padding: 34px 24px; }
}