/* ------------ Volleyball portal - public (applicant) site ------------ */

:root {
    --vb-teal: #1f8b96;
    --vb-teal-dark: #176b74;
    --vb-teal-light: #61c7d1;
    --vb-slate: #404659;
    --vb-ink: #2b3040;
    --vb-bg: #f4f7f9;
    --vb-radius: 1.1rem;
}

body.public-site {
    background: var(--vb-bg);
    color: var(--vb-slate);
    font-size: 15px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.public-site main {
    flex: 1;
}

.public-site h1, .public-site h2, .public-site h3 {
    color: var(--vb-ink);
}

.public-site a:not(.btn):not(.nav-link) {
    color: var(--vb-teal);
}

.public-site .btn-primary,
.public-site .btn-success {
    color: #fff;
}

.public-site .btn {
    border-radius: .7rem;
}

.public-site .btn-lg {
    padding: .7rem 1.4rem;
    font-size: 1rem;
}

.public-site .form-control,
.public-site .form-select {
    border-radius: .65rem;
    min-height: 46px;
}

.public-site .form-control:focus,
.public-site .form-select:focus {
    border-color: var(--vb-teal);
    box-shadow: 0 0 0 3px rgba(31, 139, 150, .15);
}

/* select2 dropdowns sized and focused like the inputs above */
.public-site .birth-date {
    --birth-date-radius: .65rem;
}

.public-site .birth-date .select2-container .select2-selection--single {
    height: 46px;
}

.public-site .birth-date .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 44px;
}

.public-site .birth-date .select2-container .select2-selection--single .select2-selection__arrow {
    height: 44px;
}

.public-site .birth-date .select2-container--focus .select2-selection,
.public-site .birth-date .select2-container--open .select2-selection {
    border-color: var(--vb-teal) !important;
    box-shadow: 0 0 0 3px rgba(31, 139, 150, .15);
}

.public-site .birth-date .form-select.is-invalid + .select2-container .select2-selection,
.public-site .birth-date.is-invalid .select2-selection {
    border-color: #ff5b5c !important;
}

.public-site .select2-dropdown {
    border-color: var(--vb-teal);
    overflow: hidden;
}

.public-site .select2-dropdown--below {
    border-radius: 0 0 .65rem .65rem;
}

.public-site .select2-dropdown--above {
    border-radius: .65rem .65rem 0 0;
}

.public-site .select2-results__option[aria-selected=true] {
    background-color: rgba(31, 139, 150, .12) !important;
    color: var(--vb-teal-dark) !important;
}

.public-site .select2-results__option--highlighted[aria-selected],
.public-site .select2-results__option--highlighted {
    background-color: var(--vb-teal) !important;
    color: #fff !important;
}

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: .7rem 0;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: box-shadow .2s ease, padding .2s ease;
}

.site-header.scrolled {
    box-shadow: 0 4px 20px rgba(38, 50, 70, .08);
    padding: .45rem 0;
}

.site-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
}

/* Horizontal lockup: icon + two-line lettering */
.site-brand .brand-icon {
    height: 46px;
    width: auto;
    transition: height .2s ease;
}

.site-brand .brand-type {
    height: 38px;
    width: auto;
    transition: height .2s ease;
}

.site-header.scrolled .site-brand .brand-icon { height: 40px; }
.site-header.scrolled .site-brand .brand-type { height: 32px; }

.site-nav .nav-link {
    color: var(--vb-slate);
    padding: .45rem .8rem;
    border-radius: .6rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
}

.site-nav .nav-link i {
    font-size: 1.4rem;
}

.site-nav .nav-link:hover,
.site-nav .nav-link.active {
    color: var(--vb-teal);
    background: rgba(31, 139, 150, .08);
}

.btn-apply {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .site-brand .brand-icon { height: 34px; }
    .site-brand .brand-type { display: none; }
    .btn-apply { padding: .45rem .8rem; font-size: .85rem; }
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 5rem 0 6.5rem;
    background:
        radial-gradient(circle at 12% 18%, rgba(97, 199, 209, .35), transparent 38%),
        radial-gradient(circle at 92% 90%, rgba(31, 139, 150, .65), transparent 45%),
        linear-gradient(135deg, #2b3040 0%, #404659 42%, #1f8b96 100%);
}

.hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 70px;
    background: var(--vb-bg);
    clip-path: ellipse(75% 100% at 50% 100%);
}

.hero-ball {
    position: absolute;
    width: 520px;
    height: 520px;
    left: -110px;
    top: -40px;
    opacity: .22;
    pointer-events: none;
}

.hero-ball-spin {
    transform-origin: 50px 50px;
    animation: ballSpin 90s linear infinite;
}

.hero-ball-panel { fill: #f3f6f8; }
.hero-ball-panel-alt { fill: var(--vb-teal-light); }

.hero-ball-seam,
.hero-ball-rim {
    fill: none;
    stroke: var(--vb-ink);
    stroke-width: .6;
    stroke-linejoin: round;
}

@keyframes ballSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-ball-spin { animation: none; }
}

@media (max-width: 991.98px) {
    .hero-ball {
        width: 340px;
        height: 340px;
        left: -130px;
        top: -110px;
        opacity: .16;
    }
}

.hero-net {
    position: absolute;
    inset: auto 0 70px 0;
    height: 120px;
    opacity: .07;
    background-image:
        linear-gradient(90deg, #fff 1px, transparent 1px),
        linear-gradient(#fff 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    padding: .35rem .9rem;
    border-radius: 2rem;
    font-size: .85rem;
    margin-bottom: 1.2rem;
}

.hero-title {
    color: #fff !important;
    font-size: clamp(1.9rem, 4.6vw, 3.1rem);
    font-weight: 800;
    line-height: 1.35;
    margin-bottom: 1rem;
}

.hero-lead {
    font-size: 1.1rem;
    opacity: .85;
    max-width: 560px;
    line-height: 1.9;
}

@media (max-width: 991.98px) {
    .hero-lead { margin-inline: auto; }
}

.hero-cta {
    color: var(--vb-teal-dark) !important;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}

.hero .btn-outline-light:hover {
    color: var(--vb-teal-dark);
}

.hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.4rem;
    margin-top: 2rem;
    font-size: .85rem;
    opacity: .8;
    justify-content: center;
}

@media (min-width: 992px) {
    .hero-facts { justify-content: flex-start; }
}

.hero-facts i {
    color: var(--vb-teal-light);
    vertical-align: middle;
    margin-left: .2rem;
}

/* Real press card (cards/card.blade.php) in the hero */
.hero-card {
    width: 100%;
    max-width: 440px;
}

.hero-card .card-scale {
    border-radius: .9rem;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .35), 0 0 0 6px rgba(255, 255, 255, .08);
}

@media (max-width: 991.98px) {
    .hero { padding: 3rem 0 5.5rem; }
    .hero-card { max-width: 360px; }
}

/* ---------- Sections ---------- */
.section {
    padding: 4.5rem 0;
}

.section-alt {
    background: #fff;
}

.section-head {
    margin-bottom: 2.5rem;
}

.section-head h2 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    margin: .3rem 0 0;
}

.section-kicker {
    color: var(--vb-teal);
    font-weight: 700;
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.section-kicker::before {
    content: '';
    width: 22px;
    height: 3px;
    border-radius: 3px;
    background: var(--vb-teal-light);
}

.steps .step-card {
    background: #fff;
    border-radius: var(--vb-radius);
    padding: 1.8rem 1.4rem;
    height: 100%;
    position: relative;
    box-shadow: 0 6px 24px rgba(38, 50, 70, .06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.steps .step-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(31, 139, 150, .14);
}

.step-num {
    position: absolute;
    top: 1rem;
    left: 1.2rem;
    font-size: 2.6rem;
    font-weight: 800;
    color: rgba(31, 139, 150, .1);
    line-height: 1;
}

.step-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #fff;
    background: linear-gradient(135deg, var(--vb-teal-light), var(--vb-teal));
    box-shadow: 0 8px 18px rgba(31, 139, 150, .3);
    margin-bottom: 1.1rem;
}

.step-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.step-card p {
    color: #7b8394;
    margin: 0;
    line-height: 1.9;
    font-size: .92rem;
}

.panel {
    background: var(--vb-bg);
    border-radius: var(--vb-radius);
    padding: 1.8rem;
}

.panel-title {
    font-size: 1.2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.panel-title i {
    color: var(--vb-teal);
    font-size: 1.5rem;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.chip {
    background: #fff;
    border-radius: 2rem;
    padding: .45rem 1rem;
    font-size: .9rem;
    box-shadow: 0 2px 8px rgba(38, 50, 70, .06);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.chip i {
    color: var(--vb-teal);
    font-size: 1.15rem;
}

.doc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: .4rem;
}

@media (min-width: 576px) {
    .doc-list { grid-template-columns: 1fr 1fr; }
}

.doc-list li {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    border-radius: .7rem;
    padding: .55rem .8rem;
    font-size: .9rem;
}

.doc-list li i {
    font-size: 1.25rem;
    color: #a7b0bc;
}

.doc-list li.required i {
    color: var(--vb-teal);
}

.doc-list li small {
    margin-right: auto;
    font-size: .72rem;
    color: #a7b0bc;
}

.doc-list li.required small {
    color: var(--vb-teal);
    font-weight: 600;
}

.track-box {
    border-radius: var(--vb-radius);
    padding: 2rem;
    color: #fff;
    background:
        radial-gradient(circle at 100% 0%, rgba(97, 199, 209, .45), transparent 50%),
        linear-gradient(150deg, var(--vb-slate), var(--vb-teal-dark));
    box-shadow: 0 16px 40px rgba(31, 139, 150, .25);
}

.track-box h2 {
    color: #fff !important;
    font-size: 1.35rem;
    font-weight: 800;
}

.track-box p {
    opacity: .8;
    font-size: .92rem;
}

.track-box .form-control {
    background: rgba(255, 255, 255, .95);
    border: 0;
}

.track-box .btn-light {
    color: var(--vb-teal-dark);
    font-weight: 700;
}

.faq .accordion-item {
    border: 0;
    border-radius: .9rem !important;
    margin-bottom: .6rem;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(38, 50, 70, .05);
}

.faq .accordion-button {
    font-weight: 600;
    font-size: .98rem;
    background: #fff;
    box-shadow: none;
}

.faq .accordion-button:not(.collapsed) {
    color: var(--vb-teal);
}

.faq .accordion-body {
    color: #6b7385;
    line-height: 1.9;
    padding-top: 0;
}

.cta-band {
    background: linear-gradient(120deg, var(--vb-teal), var(--vb-teal-dark));
    color: #fff;
    padding: 2.6rem 0;
}

.cta-band h2 {
    color: #fff !important;
    font-weight: 800;
    font-size: 1.5rem;
}

.cta-band .btn-light {
    color: var(--vb-teal-dark);
    font-weight: 700;
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--vb-ink);
    color: rgba(255, 255, 255, .85);
    padding: 2.5rem 0;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
}

.footer-brand .brand-icon {
    height: 52px;
    width: auto;
}

.footer-brand .brand-type {
    height: 42px;
    width: auto;
}

@media (max-width: 575.98px) {
    .footer-brand .brand-icon { height: 40px; }
    .footer-brand .brand-type { height: 32px; }
}

.site-footer a {
    color: var(--vb-teal-light);
}

.public-site .site-footer a.footer-site-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem 1rem;
    border: 1px solid rgba(97, 199, 209, .5);
    border-radius: 2rem;
    background: rgba(97, 199, 209, .12);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}

.footer-site-link .bx-globe {
    color: var(--vb-teal-light);
    font-size: 1.25rem;
}

.footer-site-link .bx-link-external {
    font-size: .9rem;
    opacity: .7;
}

.public-site .site-footer a.footer-site-link:hover {
    background: var(--vb-teal);
    border-color: var(--vb-teal);
}

.site-footer a.footer-site-link:hover .bx-globe {
    color: #fff;
}

/* ---------- Inner pages ---------- */
.page-hero {
    color: #fff;
    text-align: center;
    padding: 2.6rem 0 5.2rem;
    background:
        radial-gradient(circle at 15% 20%, rgba(97, 199, 209, .35), transparent 40%),
        linear-gradient(135deg, #2b3040 0%, #404659 45%, #1f8b96 100%);
}

.page-hero h1 {
    color: #fff !important;
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    font-weight: 800;
    margin-bottom: .4rem;
}

.page-hero p {
    opacity: .8;
    margin: 0;
}

.form-container {
    max-width: 920px;
    margin-top: -3.6rem;
    padding-bottom: 4rem;
}

.narrow-container {
    max-width: 560px;
    margin-top: -3.6rem;
    padding-bottom: 4rem;
}

.form-card {
    background: #fff;
    border-radius: var(--vb-radius);
    padding: 2rem;
    box-shadow: 0 12px 40px rgba(38, 50, 70, .1);
}

@media (max-width: 575.98px) {
    .form-card { padding: 1.25rem; }
    .form-container, .narrow-container { padding-left: .75rem; padding-right: .75rem; }
}

/* Stepper */
.stepper {
    list-style: none;
    padding: 1rem 1.2rem;
    margin: 0 0 1.2rem;
    display: flex;
    justify-content: space-between;
    background: #fff;
    border-radius: var(--vb-radius);
    box-shadow: 0 12px 40px rgba(38, 50, 70, .1);
    position: relative;
}

.stepper li {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    position: relative;
    text-align: center;
}

.stepper li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 18px;
    left: calc(-50% + 22px);
    right: calc(50% + 22px);
    height: 3px;
    border-radius: 3px;
    background: #e6eaee;
    transition: background .3s ease;
}

.stepper li.done:not(:last-child)::after {
    background: var(--vb-teal);
}

.stepper-dot {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #eef1f4;
    color: #8b94a3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    position: relative;
    z-index: 1;
    transition: all .3s ease;
}

.stepper-dot i { display: none; font-size: 1.4rem; }

.stepper li.active .stepper-dot {
    background: var(--vb-teal);
    color: #fff;
    box-shadow: 0 0 0 5px rgba(31, 139, 150, .18);
}

.stepper li.done .stepper-dot {
    background: var(--vb-teal);
    color: #fff;
    cursor: pointer;
}

.stepper li.done .stepper-dot .num { display: none; }
.stepper li.done .stepper-dot i { display: block; }

.stepper-label {
    font-size: .82rem;
    color: #8b94a3;
    font-weight: 500;
}

.stepper li.active .stepper-label { color: var(--vb-ink); font-weight: 700; }

@media (max-width: 575.98px) {
    .stepper-label { font-size: .7rem; }
    .stepper li:not(.active) .stepper-label { display: none; }
}

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

@keyframes stepIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.step-head {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.6rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid #eef1f4;
}

.step-head h2 {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 .15rem;
}

.step-head p {
    margin: 0;
    color: #8b94a3;
    font-size: .88rem;
}

.step-head-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    background: rgba(31, 139, 150, .1);
    color: var(--vb-teal);
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-actions {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 2rem;
    padding-top: 1.4rem;
    border-top: 1px solid #eef1f4;
}

@media (max-width: 575.98px) {
    .step-actions {
        position: sticky;
        bottom: 0;
        background: #fff;
        margin-left: -1.25rem;
        margin-right: -1.25rem;
        padding: .9rem 1.25rem;
        box-shadow: 0 -6px 16px rgba(38, 50, 70, .06);
        border-radius: 0 0 var(--vb-radius) var(--vb-radius);
        z-index: 5;
    }
    .step-actions .btn { flex: 1; }
    .step-actions > span:empty { display: none; }
}

.review-list {
    border: 1px solid #eef1f4;
    border-radius: .9rem;
    overflow: hidden;
}

.review-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 1rem;
    font-size: .92rem;
}

.review-row:nth-child(odd) { background: #f8fafb; }
.review-row span { color: #8b94a3; flex-shrink: 0; }
.review-row strong { text-align: left; word-break: break-word; }

[dir="rtl"] .form-check.consent {
    background: rgba(31, 139, 150, .06);
    border-radius: .8rem;
    padding: 1rem 2.75rem 1rem 1rem;
    font-size: .9rem;
    line-height: 1.8;
}

[dir="rtl"] .form-check.consent .form-check-input {
    margin-right: -1.75rem;
    margin-top: .3em;
}

/* Result / status */
.result-card {
    background: #fff;
    border-radius: var(--vb-radius);
    padding: 2.6rem 2rem;
    text-align: center;
    box-shadow: 0 12px 40px rgba(38, 50, 70, .1);
    margin-top: 4.5rem;
}

.result-card h1 {
    font-size: 1.45rem;
    font-weight: 800;
    margin: 1rem 0 .6rem;
}

.result-icon {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    margin: -5.5rem auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #fff;
    border: 6px solid #fff;
}

.result-icon.success {
    background: linear-gradient(135deg, #43e097, #20a866);
    box-shadow: 0 10px 26px rgba(32, 168, 102, .35);
    animation: pop .5s cubic-bezier(.2, 1.4, .4, 1);
}

@keyframes pop {
    from { transform: scale(.4); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.tracking-code {
    margin: 1.6rem auto .8rem;
    border: 2px dashed rgba(31, 139, 150, .4);
    border-radius: 1rem;
    padding: 1rem;
    max-width: 320px;
    background: rgba(31, 139, 150, .04);
}

.tracking-code small {
    display: block;
    color: #8b94a3;
}

.tracking-code strong {
    display: block;
    font-size: 2rem;
    letter-spacing: .25rem;
    color: var(--vb-teal);
    margin: .2rem 0 .5rem;
    font-family: Consolas, 'Courier New', monospace;
}

.status-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-size: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.progress-track {
    list-style: none;
    padding: 0;
    margin: 0 0 1.6rem;
    display: flex;
}

.progress-track li {
    flex: 1;
    text-align: center;
    position: relative;
}

.progress-track li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 18px;
    left: calc(-50% + 20px);
    right: calc(50% + 20px);
    height: 3px;
    background: #e6eaee;
    border-radius: 3px;
}

.progress-track li.done:not(:last-child)::after { background: var(--vb-teal); }

.progress-track .dot {
    width: 38px;
    height: 38px;
    margin: 0 auto .4rem;
    border-radius: 50%;
    background: #eef1f4;
    color: #a7b0bc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    position: relative;
    z-index: 1;
}

.progress-track li.done .dot {
    background: var(--vb-teal);
    color: #fff;
}

.progress-track li.failed .dot {
    background: #ff5b5c;
    color: #fff;
}

.progress-track .label {
    font-size: .78rem;
    color: #8b94a3;
}

.status-note {
    display: flex;
    gap: .8rem;
    padding: 1rem 1.1rem;
    border-radius: .9rem;
    line-height: 1.9;
}

.status-note > i {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.summary-list dt { color: #8b94a3; font-weight: 400; margin-bottom: .5rem; }
.summary-list dd { margin-bottom: .5rem; font-weight: 500; }

/* ---------- Apply / track / status pages: accreditation card identity (see card.css / img/card) ----------
   Royal blue with faint oversized ball outlines, gold bands, navy corner accent, Exo for Latin type. */
@font-face {
    font-family: 'Exo';
    src: url('../fonts/exo/exo-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

.card-theme {
    --vb-card-blue: #20448f;
    --vb-card-blue-dark: #183573;
    --vb-card-gold: #e0b848;
    --vb-card-navy: #211d51;
    --vb-card-label: #0e6e8c;
    --vb-card-pattern: url('../img/card/card-pattern.svg');
}

/* Hero: blue card face + gold band */
.card-theme .page-hero {
    background-color: var(--vb-card-blue);
    background-image: var(--vb-card-pattern), linear-gradient(160deg, var(--vb-card-blue) 0%, var(--vb-card-blue-dark) 100%);
    background-size: cover, cover;
    background-position: center;
    border-bottom: 8px solid var(--vb-card-gold);
}

.page-hero-kicker {
    display: inline-block;
    font-family: 'Exo', sans-serif;
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: var(--vb-card-gold);
    margin-bottom: .5rem;
    direction: ltr;
}

/* Buttons and inputs */
.card-theme .btn-primary {
    background-color: var(--vb-card-blue);
    border-color: var(--vb-card-blue);
    box-shadow: 0 .25rem .75rem rgba(32, 68, 143, .3);
}

.card-theme .btn-primary:hover,
.card-theme .btn-primary:focus {
    background-color: var(--vb-card-blue-dark);
    border-color: var(--vb-card-blue-dark);
}

.card-theme .btn-success {
    background-color: var(--vb-card-gold);
    border-color: var(--vb-card-gold);
    color: var(--vb-card-navy);
    font-weight: 700;
    box-shadow: 0 .25rem .75rem rgba(224, 184, 72, .4);
}

.card-theme .btn-success:hover,
.card-theme .btn-success:focus {
    background-color: #d4a935;
    border-color: #d4a935;
    color: var(--vb-card-navy);
}

.card-theme .form-label {
    color: var(--vb-card-label);
    font-weight: 700;
}

.card-theme .form-control:focus,
.card-theme .form-select:focus,
.card-theme .birth-date .select2-container--focus .select2-selection,
.card-theme .birth-date .select2-container--open .select2-selection {
    border-color: var(--vb-card-blue) !important;
    box-shadow: 0 0 0 3px rgba(32, 68, 143, .15);
}

.card-theme .select2-dropdown { border-color: var(--vb-card-blue); }

.card-theme .select2-results__option[aria-selected=true] {
    background-color: rgba(32, 68, 143, .1) !important;
    color: var(--vb-card-blue) !important;
}

.card-theme .select2-results__option--highlighted[aria-selected],
.card-theme .select2-results__option--highlighted {
    background-color: var(--vb-card-blue) !important;
}

.card-theme .form-check-input:checked {
    background-color: var(--vb-card-blue);
    border-color: var(--vb-card-blue);
}

/* Stepper: blue dots, gold progress line */
.card-theme .stepper li.active .stepper-dot {
    background: var(--vb-card-blue);
    box-shadow: 0 0 0 5px rgba(224, 184, 72, .45);
}

.card-theme .stepper li.done .stepper-dot { background: var(--vb-card-blue); }
.card-theme .stepper li.done:not(:last-child)::after { background: var(--vb-card-gold); }
.card-theme .stepper li.active .stepper-label { color: var(--vb-card-navy); }

/* Form card: each step opens with a blue card header over a gold band */
.card-theme .step-head {
    margin: -2rem -2rem 1.8rem;
    padding: 1.4rem 2rem;
    border-bottom: 6px solid var(--vb-card-gold);
    border-radius: var(--vb-radius) var(--vb-radius) 0 0;
    background-color: var(--vb-card-blue);
}

.card-theme .step-head h2 { color: #fff !important; }
.card-theme .step-head p { color: rgba(255, 255, 255, .75); }

/* Icon tile echoes the card's photo frame (white box with a navy corner) */
.card-theme .step-head-icon {
    position: relative;
    overflow: hidden;
    background: #fff;
    color: var(--vb-card-blue);
}

.card-theme .step-head-icon::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 14px;
    height: 14px;
    background: var(--vb-card-navy);
    border-top-right-radius: 6px;
}

@media (max-width: 575.98px) {
    .card-theme .step-head {
        margin: -1.25rem -1.25rem 1.4rem;
        padding: 1.1rem 1.25rem;
    }
}

/* Position picker and upload tiles */
.card-theme .position-option:hover .position-card { border-color: rgba(32, 68, 143, .5); }

.card-theme .position-option input:checked + .position-card {
    border-color: var(--vb-card-blue);
    background: rgba(32, 68, 143, .07);
    color: var(--vb-card-blue);
    box-shadow: 0 0 0 3px rgba(224, 184, 72, .35);
}

.card-theme .position-option input:checked + .position-card i { color: var(--vb-card-blue); }
.card-theme .position-option input:focus-visible + .position-card { outline-color: var(--vb-card-blue); }

.card-theme .doc-group-title { color: var(--vb-card-navy); }
.card-theme .doc-group-title::after { background: linear-gradient(90deg, transparent, var(--vb-card-gold)); }

.card-theme .upload-tile:hover,
.card-theme .upload-tile.dragover {
    border-color: var(--vb-card-blue);
    background: rgba(32, 68, 143, .05);
}

.card-theme .upload-preview { background: rgba(32, 68, 143, .08); }
.card-theme .upload-preview i,
.card-theme .upload-status { color: var(--vb-card-blue); }

/* Review step */
.card-theme .review-list { border-color: rgba(32, 68, 143, .15); }
.card-theme .review-row:nth-child(odd) { background: rgba(32, 68, 143, .04); }
.card-theme .review-row span { color: var(--vb-card-label); font-weight: 600; }

.card-theme .form-check.consent {
    background: rgba(224, 184, 72, .12);
    border-inline-start: 4px solid var(--vb-card-gold);
}

/* Status page: progress track and summary */
.card-theme .progress-track li.done .dot { background: var(--vb-card-blue); }
.card-theme .progress-track li.done:not(:last-child)::after { background: var(--vb-card-gold); }
.card-theme .progress-track li.done .label { color: var(--vb-card-navy); font-weight: 600; }
.card-theme .summary-list dt { color: var(--vb-card-label); font-weight: 600; }

/* Done page: result card and the tracking code as a mini card face */
.card-theme .result-card {
    border-top: 6px solid var(--vb-card-gold);
}

.card-theme .result-icon.success {
    background: var(--vb-card-blue);
    box-shadow: 0 0 0 4px var(--vb-card-gold), 0 10px 26px rgba(32, 68, 143, .35);
}

.card-theme .result-card h1 { color: var(--vb-card-navy); }

.card-theme .tracking-code {
    border: 0;
    border-bottom: 6px solid var(--vb-card-gold);
    background-color: var(--vb-card-blue);
    box-shadow: 0 .5rem 1.5rem rgba(32, 68, 143, .25);
}

.card-theme .tracking-code small { color: rgba(255, 255, 255, .75); }

.card-theme .tracking-code strong {
    color: #fff;
    font-family: 'Exo', Consolas, monospace;
    font-weight: 700;
}

.card-theme .tracking-code .btn {
    background: rgba(255, 255, 255, .15);
    border-color: transparent;
    color: #fff;
}

.card-theme .tracking-code .btn:hover {
    background: var(--vb-card-gold);
    color: var(--vb-card-navy);
}

/* Shared header links and footer */
.card-theme .site-nav .nav-link:hover,
.card-theme .site-nav .nav-link.active {
    color: var(--vb-card-blue);
    background: rgba(32, 68, 143, .08);
}

.card-theme .site-footer {
    background: var(--vb-card-navy);
    border-top: 6px solid var(--vb-card-gold);
}

.card-theme .site-footer a { color: var(--vb-card-gold); }

.public-site.card-theme .site-footer a.footer-site-link {
    border-color: rgba(224, 184, 72, .5);
    background: rgba(224, 184, 72, .12);
    color: #fff;
}

.card-theme .footer-site-link .bx-globe { color: var(--vb-card-gold); }

.public-site.card-theme .site-footer a.footer-site-link:hover {
    background: var(--vb-card-gold);
    border-color: var(--vb-card-gold);
    color: var(--vb-card-navy);
}

.card-theme .site-footer a.footer-site-link:hover .bx-globe { color: var(--vb-card-navy); }

/* Home hero: darker than the card itself, with a soft light behind it so the blue card stands out.
   Keeps the curved bottom edge, traced by a gold line (a slightly taller gold ellipse under the page-colored one). */
.card-theme .hero {
    background-color: var(--vb-card-navy);
    background-image:
        radial-gradient(circle at 22% 50%, rgba(97, 140, 230, .45), transparent 42%),
        linear-gradient(160deg, var(--vb-card-blue-dark) 0%, var(--vb-card-navy) 100%);
}

@media (max-width: 991.98px) {
    .card-theme .hero {
        background-image:
            radial-gradient(circle at 50% 78%, rgba(97, 140, 230, .45), transparent 45%),
            linear-gradient(160deg, var(--vb-card-blue-dark) 0%, var(--vb-card-navy) 100%);
    }
}

.card-theme .hero-ball { opacity: .1; }

.card-theme .hero::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 77px;
    background: var(--vb-card-gold);
    clip-path: ellipse(75% 100% at 50% 100%);
}

.card-theme .hero-ball-panel-alt { fill: var(--vb-card-gold); }
.card-theme .hero-ball-seam,
.card-theme .hero-ball-rim { stroke: var(--vb-card-navy); }

.card-theme .hero-kicker {
    background: rgba(224, 184, 72, .14);
    border-color: rgba(224, 184, 72, .45);
}

.card-theme .hero-kicker i,
.card-theme .hero-facts i { color: var(--vb-card-gold); }

.card-theme .hero-cta,
.card-theme .hero .btn-outline-light:hover { color: var(--vb-card-blue) !important; }

.card-theme .hero-card .card-scale {
    box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--vb-card-gold), 0 34px 70px rgba(5, 10, 35, .6), 0 0 90px rgba(97, 140, 230, .35);
}

/* Home: sections */
.card-theme .section-kicker {
    color: var(--vb-card-navy);
    background: rgba(224, 184, 72, .18);
    border: 1px solid rgba(224, 184, 72, .55);
    padding: .3rem .95rem;
    border-radius: 2rem;
    font-size: .85rem;
}

.card-theme .section-kicker::before { display: none; }
.card-theme .section-head h2 { color: var(--vb-card-navy); }

.card-theme .steps .step-card { border-top: 4px solid var(--vb-card-gold); }
.card-theme .steps .step-card:hover { box-shadow: 0 16px 36px rgba(32, 68, 143, .16); }
.card-theme .step-num { color: rgba(32, 68, 143, .1); }

.card-theme .step-icon {
    position: relative;
    overflow: hidden;
    background: var(--vb-card-blue);
    box-shadow: 0 8px 18px rgba(32, 68, 143, .3);
}

.card-theme .step-icon::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    background: var(--vb-card-gold);
    border-top-right-radius: 7px;
}

.card-theme .panel-title,
.card-theme .step-card h3 { color: var(--vb-card-navy); }

.card-theme .panel-title i,
.card-theme .chip i,
.card-theme .doc-list li.required i,
.card-theme .doc-list li.required small { color: var(--vb-card-blue); }

.card-theme .track-box {
    background-color: var(--vb-card-blue);
    border-bottom: 6px solid var(--vb-card-gold);
    box-shadow: 0 16px 40px rgba(32, 68, 143, .3);
}

.card-theme .track-box h2 i { color: var(--vb-card-gold); }
.card-theme .track-box .btn-light { color: var(--vb-card-blue); }

.card-theme .faq .accordion-button:not(.collapsed) { color: var(--vb-card-blue); }