/* ==========================================================================
   Prime Islami Insurance — shared UI components
   The pieces in resources/views/components/ui (Blade) and
   resources/js/portal/ui (Vue) share these class names, so a chip, a price or
   an empty state looks the same on the website and in the portal. Values come
   from tokens.css only.

   1. Site header: keyboard menus and the phone menu button
   2. Status chip            .ui-status
   3. Money and dates        .ui-money .ui-date
   4. Empty state            .ui-empty
   5. Stepper                .ui-stepper
   6. Price bar              .ui-price-bar
   7. Product card           .ui-product-card
   8. Fields                 .ui-field (mobile, money, date of birth)
   ========================================================================== */

/* 1. Site header ---------------------------------------------------------- */

/* The menu bar sits on dark grey rather than the brand red so the red accents
   stand out against it (was an inline style in site-head). */
.header-menubar {
    background: var(--pi-dark);
}

/* The account menu opens from the top bar down over the menu bar. Both bars
   are fixed, and style.css puts the menu bar (99999) above the top bar (99),
   so the menu bar hid the dropdown's first items whatever z-index the
   dropdown had. The top bar is raised only while that menu is open (ui.js):
   once the page scrolls, the menu bar moves up over the top bar, and a top
   bar raised for good would cover the whole menu. */
.header-top.has-open-menu {
    z-index: 100000;
}

/* Menu toggles are buttons now; they look exactly like the links beside them. */
.header-menubar .nav .sub-toggle {
    background: none;
    border: 0;
    padding: 0;
    color: var(--pi-white);
    font: inherit;
    font-weight: var(--pi-weight-medium);
    cursor: pointer;
}

.header-menubar .nav .sub-toggle i {
    transition: transform .2s;
}

/* The menu was laid out for 1440px screens; on the common 1280–1366px
   laptops it wrapped onto a second row and covered the top of every page.
   A little less spacing keeps it on one row there. */
@media (min-width: 1200px) and (max-width: 1439.98px) {
    .header-menubar .nav ul li {
        padding-left: 3px;
        padding-right: 3px;
    }

    .header-menubar .nav ul li > a,
    .header-menubar .nav .sub-toggle {
        font-size: 14px;
    }
}

/* Opened from the keyboard (ui.js) as well as on hover (style.css). */
.header-menubar .sub-btn.is-open .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
    z-index: 3;
}

.header-menubar .sub-btn.is-open .sub-toggle i {
    transform: rotate(180deg);
}

/* The sub-menu is white: the header's white focus ring would vanish on it. */
.main-header .sub-menu :focus-visible {
    outline-color: var(--pi-red);
    outline-offset: -3px;
}

.mobile-menu-toggle {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    line-height: 1;
}

/* Phone menu sections are buttons too. */
.header-mobile-menubar .nav button.dropdown-toggle {
    background: none;
    border: 0;
    padding: 0;
    width: 100%;
    text-align: left;
    color: var(--pi-ink);
    font: inherit;
    font-weight: var(--pi-weight-medium);
}

.offcanvas :focus-visible {
    outline-color: var(--pi-red);
}

/* 2. Status chip ---------------------------------------------------------- */
/* As compact as the Bootstrap badge it replaces: it sits in narrow table
   columns on a phone. The words carry the meaning; the tone backs them up. */
.ui-status {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--pi-radius-pill);
    font-size: .72rem;
    font-weight: var(--pi-weight-bold);
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--pi-status-neutral-fg);
    background: var(--pi-status-neutral-bg);
}

.ui-status--waiting { color: var(--pi-status-waiting-fg); background: var(--pi-status-waiting-bg); }
.ui-status--review  { color: var(--pi-status-review-fg);  background: var(--pi-status-review-bg); }
.ui-status--active  { color: var(--pi-status-active-fg);  background: var(--pi-status-active-bg); }
.ui-status--problem { color: var(--pi-status-problem-fg); background: var(--pi-status-problem-bg); }

/* 3. Money and dates ------------------------------------------------------ */
.ui-money,
.ui-date {
    white-space: nowrap;
}

/* 4. Empty state ---------------------------------------------------------- */
.ui-empty {
    text-align: center;
    padding: var(--pi-space-12) var(--pi-space-5);
    color: var(--pi-muted);
}

.ui-empty > i {
    display: block;
    font-size: 2.2rem;
    color: var(--pi-line);
    margin-bottom: var(--pi-space-3);
}

.ui-empty__title {
    color: var(--pi-ink);
    font-weight: var(--pi-weight-bold);
    font-size: var(--pi-fs-base);
    margin-bottom: var(--pi-space-1);
}

.ui-empty__text {
    font-size: var(--pi-fs-sm);
    margin: 0 auto var(--pi-space-4);
    max-width: 36rem;
}

/* 5. Stepper -------------------------------------------------------------- */
.ui-stepper__compact {
    margin: 0 0 var(--pi-space-2);
    font-size: var(--pi-fs-sm);
    font-weight: var(--pi-weight-medium);
    color: var(--pi-muted);
}

.ui-stepper__list {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: step;
}

.ui-stepper__step {
    display: flex;
    align-items: center;
    gap: var(--pi-space-2);
    flex: 1 1 auto;
    min-width: 0;
    color: var(--pi-muted);
    font-size: var(--pi-fs-sm);
}

.ui-stepper__step + .ui-stepper__step::before {
    content: "";
    flex: 0 1 var(--pi-space-6);
    min-width: var(--pi-space-2);
    height: 2px;
    background: var(--pi-line);
}

.ui-stepper__step.is-done + .ui-stepper__step::before {
    background: var(--pi-red);
}

.ui-stepper__dot {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--pi-line);
    background: var(--pi-surface);
    font-size: var(--pi-fs-xs);
    font-weight: var(--pi-weight-bold);
}

/* Labels wrap rather than truncate: "Who is insured" cut to "Who is …" helps
   nobody. Connectors shrink first. */
.ui-stepper__label {
    line-height: 1.2;
}

.ui-stepper__step.is-done .ui-stepper__dot {
    background: var(--pi-red);
    border-color: var(--pi-red);
    color: var(--pi-white);
}

.ui-stepper__step.is-current {
    color: var(--pi-ink);
    font-weight: var(--pi-weight-medium);
}

.ui-stepper__step.is-current .ui-stepper__dot {
    border-color: var(--pi-red);
    color: var(--pi-red);
}

@media (min-width: 768px) {
    .ui-stepper__compact { display: none; }
    .ui-stepper__list { display: flex; gap: var(--pi-space-2); }
}

/* 6. Price bar ------------------------------------------------------------ */
.ui-price-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pi-space-4);
    padding: var(--pi-space-3) var(--pi-space-4);
    background: var(--pi-surface);
    border: 1px solid var(--pi-line);
    border-radius: var(--pi-radius-md);
    box-shadow: var(--pi-shadow-md);
}

.ui-price-bar__figure {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--pi-space-2);
    min-width: 0;
}

.ui-price-bar__label {
    font-size: var(--pi-fs-sm);
    color: var(--pi-muted);
}

.ui-price-bar__amount {
    font-size: var(--pi-fs-2xl);
    font-weight: var(--pi-weight-bold);
    color: var(--pi-ink);
}

.ui-price-bar__note {
    flex-basis: 100%;
    font-size: var(--pi-fs-xs);
    color: var(--pi-muted);
}

.ui-price-bar__action {
    flex: none;
}

/* On a phone the bar runs edge to edge along the bottom of the screen, with
   the button in thumb reach. */
.ui-price-bar__amount { white-space: nowrap; }

@media (max-width: 575.98px) {
    .ui-price-bar {
        margin: 0 calc(-1 * var(--pi-space-4));
        border-radius: 0;
        border-width: 1px 0 0;
        padding-bottom: calc(var(--pi-space-3) + env(safe-area-inset-bottom, 0px));
    }
    .ui-price-bar__amount { font-size: var(--pi-fs-xl); }

    /* More than one button (the application's Back / Continue): the price
       takes the first row and the buttons share the second, full width. */
    .ui-price-bar--stack { flex-wrap: wrap; gap: var(--pi-space-2); }
    .ui-price-bar--stack .ui-price-bar__figure,
    .ui-price-bar--stack .ui-price-bar__action { flex: 1 1 100%; }
    .ui-price-bar--stack .ui-price-bar__action > * { display: flex; gap: var(--pi-space-2); }
    .ui-price-bar--stack .ui-price-bar__action .btn { flex: 1 1 0; }
    .ui-price-bar--stack .ui-price-bar__note { flex-basis: auto; }
}

/* 7. Product card --------------------------------------------------------- */
.ui-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--pi-space-2);
    height: 100%;
    padding: var(--pi-space-6);
    background: var(--pi-surface);
    border: 1px solid var(--pi-line);
    border-radius: var(--pi-radius-md);
    box-shadow: var(--pi-shadow-md);
    transition: border-color .15s, transform .15s;
}

.ui-product-card:hover,
.ui-product-card:focus-within {
    border-color: var(--pi-red);
    transform: translateY(-2px);
}

.ui-product-card__icon {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--pi-radius-md);
    background: var(--pi-red-soft);
    color: var(--pi-red);
    font-size: 1.35rem;
}

.ui-product-card__title {
    margin: var(--pi-space-2) 0 0;
    font-family: var(--pi-font-sans);
    font-size: var(--pi-fs-xl);
    font-weight: var(--pi-weight-bold);
    color: var(--pi-ink);
}

.ui-product-card__text {
    margin: 0;
    color: var(--pi-muted);
    font-size: var(--pi-fs-sm);
}

.ui-product-card__from {
    margin: auto 0 0;
    padding-top: var(--pi-space-2);
    font-size: var(--pi-fs-sm);
    color: var(--pi-muted);
}

.ui-product-card__from strong {
    color: var(--pi-ink);
    font-size: var(--pi-fs-lg);
}

.ui-product-card__cta {
    align-self: flex-start;
}

/* The card is the link (stretched-link), so the button's own ring would
   only outline the button; ring the card instead. */
.ui-product-card__cta:focus-visible {
    box-shadow: none;
}

.ui-product-card:has(.ui-product-card__cta:focus-visible) {
    outline: var(--pi-focus-width) solid var(--pi-focus-color);
    outline-offset: var(--pi-focus-offset);
}

/* 8. Fields --------------------------------------------------------------- */
.ui-field {
    margin-bottom: var(--pi-space-4);
}

.ui-field .form-label,
.ui-field legend.form-label {
    font-weight: var(--pi-weight-medium);
    color: var(--pi-ink);
    font-size: var(--pi-fs-base);
}

.ui-field .form-text {
    color: var(--pi-muted);
}

.ui-field__readback {
    min-height: 1.25rem;
    margin-top: var(--pi-space-1);
    font-size: var(--pi-fs-sm);
    font-weight: var(--pi-weight-medium);
    color: var(--pi-status-active-fg);
}

.ui-field__readback.is-error {
    color: var(--pi-status-problem-fg);
}

.ui-field--dob {
    border: 0;
    padding: 0;
    min-width: 0;
}

.ui-dob {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) 6rem;
    gap: var(--pi-space-2);
}

.ui-dob__label {
    display: block;
    font-size: var(--pi-fs-xs);
    color: var(--pi-muted);
    margin-bottom: 2px;
}

/* 9. Payment methods ------------------------------------------------------ */
.ui-pay-methods {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pi-space-2);
    font-size: var(--pi-fs-xs);
    color: var(--pi-muted);
}

.ui-pay-methods__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pi-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-pay-method {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--pi-line);
    border-radius: var(--pi-radius-sm);
    background: var(--pi-surface);
    color: var(--pi-ink);
    font-weight: var(--pi-weight-bold);
    white-space: nowrap;
}

.ui-pay-method i { font-size: 1.1em; }
.ui-pay-method--bkash { color: #c2185b; }
.ui-pay-method--nagad { color: #e65100; }
.ui-pay-method--rocket { color: #6a1b9a; }

.ui-pay-methods__via::before {
    content: "\f023";              /* lock */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 4px;
}

/* 10. Public quote page --------------------------------------------------- */
.quote-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pi-space-3);
    margin-bottom: var(--pi-space-2);
}

.quote-actions__note {
    display: block;
    margin-bottom: var(--pi-space-3);
}

/* The phone bar replaces the form's own buttons while it is on screen; they
   stay for the moment the bar has scrolled away with the form's end. */
.quote-price-bar .btn {
    white-space: nowrap;
}

.ui-product-card__extra {
    font-size: var(--pi-fs-sm);
    color: var(--pi-muted);
}

.ui-product-card__needs {
    margin: 0;
}

/* Stepper, interactive (the portal's application wizard) */
.ui-stepper__target {
    display: flex;
    align-items: center;
    gap: var(--pi-space-2);
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
}

.ui-stepper--clickable button.ui-stepper__target {
    cursor: pointer;
    border-radius: var(--pi-radius-sm);
}

.ui-stepper--clickable button.ui-stepper__target:hover .ui-stepper__label {
    color: var(--pi-red);
    text-decoration: underline;
}

.ui-stepper__step.has-issue .ui-stepper__dot {
    background: var(--pi-status-waiting-bg);
    border-color: var(--pi-status-waiting-fg);
    color: var(--pi-status-waiting-fg);
}

.ui-stepper__step.is-locked {
    opacity: .6;
}

.ui-stepper__compact-issues {
    color: var(--pi-status-waiting-fg);
}

/* Step check: what the current step is still missing. */
.ui-step-check {
    border: 1px solid var(--pi-status-waiting-bg);
    background: #fffbeb;
    border-left: 4px solid var(--pi-status-waiting-fg);
    border-radius: var(--pi-radius-md);
    padding: var(--pi-space-4);
    margin-top: var(--pi-space-4);
}

.ui-step-check__title {
    font-weight: var(--pi-weight-bold);
    color: var(--pi-ink);
    margin-bottom: var(--pi-space-2);
}

.ui-step-check ul {
    margin: 0 0 var(--pi-space-3);
    padding-left: var(--pi-space-5);
    list-style: disc;
}

/* While a price bar sits along the bottom of the screen, the floating
   buttons (back-to-top, the chat launcher) rise above it — otherwise they
   cover its "Buy now" / "Continue" button. On a wide screen the quote page's
   bar only spans the form column, clear of them. */
@media (max-width: 991.98px) {
    html body:has(.quote-price-bar) #scrollUp,
    html body:has(.quote-price-bar) #prime-assistant .pa-launcher {
        bottom: 104px !important;
    }
}

/* On a phone the bar is the page's main action; back-to-top only gets in its
   way (it can sit over "Buy now" wherever the bar is not stuck). */
@media (max-width: 575.98px) {
    html body:has(.ui-price-bar) #scrollUp {
        display: none !important;
    }
}

html body:has(.ui-price-bar:not(.quote-price-bar)) #scrollUp,
html body:has(.ui-price-bar:not(.quote-price-bar)) #prime-assistant .pa-launcher {
    bottom: 104px !important;
}

@media (max-width: 575.98px) {
    html body:has(.ui-price-bar--stack) #scrollUp,
    html body:has(.ui-price-bar--stack) #prime-assistant .pa-launcher {
        bottom: 150px !important;
    }
}

/* 11. Portal screens ------------------------------------------------------ */
.portal-screen-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pi-space-2) var(--pi-space-4);
    margin-bottom: var(--pi-space-4);
}

.portal-screen-head__title {
    margin: 0;
    font-family: var(--pi-font-sans);
    font-size: var(--pi-fs-2xl);
    font-weight: var(--pi-weight-bold);
    color: var(--pi-ink);
}

.portal-screen-head__sub {
    color: var(--pi-muted);
    font-size: var(--pi-fs-sm);
    margin: 0;
}

/* Account section menu */
.account-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pi-space-2);
    margin-bottom: var(--pi-space-4);
}

.account-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--pi-line);
    border-radius: var(--pi-radius-pill);
    background: var(--pi-surface);
    color: var(--pi-ink);
    font-weight: var(--pi-weight-medium);
    font-size: var(--pi-fs-sm);
}

.account-tabs__tab:hover { border-color: var(--pi-red); color: var(--pi-red); }
.account-tabs__tab.is-active { background: var(--pi-red); border-color: var(--pi-red); color: var(--pi-white); }

@media (min-width: 992px) {
    .account-tabs__tab--phone { display: none; }
}

/* An item in a portal list — a quotation, an application, a policy: what it
   is, where it stands, and the one thing to do next. */
.ui-items {
    display: grid;
    gap: var(--pi-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--pi-space-2) var(--pi-space-4);
    padding: var(--pi-space-4);
    background: var(--pi-surface);
    border: 1px solid var(--pi-line);
    border-radius: var(--pi-radius-md);
    box-shadow: var(--pi-shadow-md);
}

.ui-item__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--pi-radius-md);
    background: var(--pi-red-soft);
    color: var(--pi-red);
    font-size: 1.15rem;
}

.ui-item__main { min-width: 0; }

.ui-item__title {
    margin: 0;
    font-size: var(--pi-fs-base);
    font-weight: var(--pi-weight-bold);
    color: var(--pi-ink);
}

.ui-item__meta {
    margin: 2px 0 0;
    font-size: var(--pi-fs-sm);
    color: var(--pi-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px var(--pi-space-2);
}

.ui-item__ref {
    font-family: var(--pi-font-mono);
    font-size: var(--pi-fs-xs);
    color: var(--pi-muted);
    overflow-wrap: anywhere;
}

.ui-item__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    text-align: right;
}

.ui-item__amount { font-weight: var(--pi-weight-bold); color: var(--pi-ink); white-space: nowrap; }

.ui-item__actions {
    grid-column: 2 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--pi-space-2);
    justify-content: flex-end;
}

@media (max-width: 575.98px) {
    .ui-item { grid-template-columns: auto minmax(0, 1fr); }
    .ui-item__side { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
    .ui-item__actions { grid-column: 1 / -1; }
    .ui-item__actions .btn { flex: 1 1 auto; }
}

/* Shortcuts on the portal home. */
.ui-shortcuts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--pi-space-3);
}

.ui-shortcut {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pi-space-2);
    padding: var(--pi-space-4);
    background: var(--pi-surface);
    border: 1px solid var(--pi-line);
    border-radius: var(--pi-radius-md);
    color: var(--pi-ink);
    font-weight: var(--pi-weight-medium);
}

.ui-shortcut i { color: var(--pi-red); font-size: 1.25rem; }
.ui-shortcut:hover { border-color: var(--pi-red); color: var(--pi-red); }

.ui-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pi-space-3);
    margin: var(--pi-space-6) 0 var(--pi-space-3);
}

.ui-section-title h3 {
    margin: 0;
    font-family: var(--pi-font-sans);
    font-size: var(--pi-fs-lg);
    font-weight: var(--pi-weight-bold);
    color: var(--pi-ink);
}

.ui-section-title a { font-size: var(--pi-fs-sm); font-weight: var(--pi-weight-medium); color: var(--pi-red); }

/* Tables become cards on a phone: each row a card, each cell a labelled
   line (data-label), the last cell — the action — full width. */
@media (max-width: 575.98px) {
    .ui-table-cards thead { display: none; }

    .ui-table-cards,
    .ui-table-cards tbody,
    .ui-table-cards tr,
    .ui-table-cards td { display: block; width: 100%; }

    .ui-table-cards tr {
        margin-bottom: var(--pi-space-3);
        padding: var(--pi-space-3) var(--pi-space-4);
        background: var(--pi-surface);
        border: 1px solid var(--pi-line);
        border-radius: var(--pi-radius-md);
    }

    .ui-table-cards td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--pi-space-3);
        padding: 4px 0 !important;
        border: 0 !important;
        text-align: right !important;
    }

    .ui-table-cards td::before {
        content: attr(data-label);
        flex: none;
        color: var(--pi-muted);
        font-size: var(--pi-fs-xs);
        font-weight: var(--pi-weight-medium);
        text-align: left;
    }

    .ui-table-cards td:not([data-label])::before { content: none; }

    .ui-table-cards td:first-child {
        display: block;
        text-align: left !important;
        font-weight: var(--pi-weight-bold);
        padding-bottom: var(--pi-space-2) !important;
    }

    /* The actions: the main one takes the room, icon buttons stay small. */
    .ui-table-cards td:last-child:not([data-label]) {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--pi-space-2);
        padding-top: var(--pi-space-2) !important;
    }

    .ui-table-cards td:last-child:not([data-label]) .btn { flex: 0 0 auto; margin: 0 !important; }
    .ui-table-cards td:last-child:not([data-label]) :is(.btn-brand, .btn-primary) { flex: 1 1 auto; }
}

.account-menu__langs {
    display: flex;
    align-items: center;
    gap: var(--pi-space-3);
    padding: 8px 16px;
    border-top: 1px solid var(--pi-line);
    color: var(--pi-muted);
}

.account-menu__langs a { padding: 0 !important; font-weight: var(--pi-weight-medium); }
.account-menu__langs a.is-current { color: var(--pi-red) !important; text-decoration: underline; }

/* 12. Site footer (web/partials/site-footer) ------------------------------ */
.site-footer {
    background: var(--pi-dark);
    border-top: 6px solid var(--pi-red);
    color: rgba(255, 255, 255, .78);
    padding: var(--pi-space-12) 0 var(--pi-space-6);
    font-size: var(--pi-fs-sm);
}

.site-footer a { color: var(--pi-white); }
.site-footer a:hover { color: #ffb4a8; }

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
    gap: var(--pi-space-8);
}

.site-footer__brand img { height: 56px; width: auto; margin-bottom: var(--pi-space-4); }
.site-footer__brand p { margin-bottom: var(--pi-space-3); }

.site-footer__phone {
    display: inline-block;
    margin-bottom: var(--pi-space-3);
    font-size: var(--pi-fs-xl);
    font-weight: var(--pi-weight-bold);
}

.site-footer__address { font-style: normal; margin: 0; }

.site-footer__col h2 {
    margin: 0 0 var(--pi-space-3);
    padding-bottom: var(--pi-space-2);
    border-bottom: 2px solid var(--pi-red);
    font-family: var(--pi-font-sans);
    font-size: var(--pi-fs-base);
    font-weight: var(--pi-weight-bold);
    color: var(--pi-white);
}

.site-footer__col ul { margin: 0; padding: 0; list-style: none; }
.site-footer__col li { margin-bottom: var(--pi-space-2); }

.site-footer__pay { margin-top: var(--pi-space-4); color: rgba(255, 255, 255, .78); }
.site-footer__pay .ui-pay-method { border-color: rgba(255, 255, 255, .2); }

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--pi-space-2) var(--pi-space-6);
    margin-top: var(--pi-space-8);
    padding-top: var(--pi-space-4);
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: var(--pi-fs-xs);
}

@media (max-width: 1199.98px) {
    .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 575.98px) {
    .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--pi-space-6); }
}

/* One-time codes (quote page save, sign-up): six digits, easy to read back. */
.ui-code-input { letter-spacing: .4em; text-align: center; font-weight: 600; font-size: 1.15rem; font-variant-numeric: tabular-nums; }