/* ==========================================================================
   Prime Islami Insurance — customer portal
   Quotation calculator, account pages and auth screens.

   The site's own style.css sets the brand: #520707 top bar, #c90000 nav,
   #b02a30 accents, a #CB2D3E→#EF473A gradient on calls to action, Playfair
   Display for headings and Roboto for body text. Everything below reuses that
   palette so the portal does not read as a bolted-on Bootstrap app.
   ========================================================================== */

/* Colours, radius and shadow come from tokens.css (resources/design/tokens.json).
   The --pi-* names this file always used are defined there. */

/* --------------------------------------------------------------------------
   1. Clear the fixed header.
   .header-menubar is position:fixed, and the site clears it with
   .page-breadcrumb { margin-top:140px }. Pages without a breadcrumb band —
   sign in, register, forgot password — were rendering underneath the nav.
   -------------------------------------------------------------------------- */
.portal-page {
    margin-top: 140px;
    background: var(--pi-canvas);
}

@media (max-width: 767.98px) {
    .portal-page { margin-top: 90px; }
}

/* --------------------------------------------------------------------------
   2. Repair checkboxes and radios.
   style.css styles every input/select/textarea with padding and a 2.25
   line-height, which stretches checkboxes into wide grey rectangles.
   -------------------------------------------------------------------------- */
.form-check-input[type="checkbox"],
.form-check-input[type="radio"] {
    width: 1.05em;
    height: 1.05em;
    padding: 0;
    line-height: 1;
    margin-top: .2em;
    background-color: #fff;
    border: 1px solid #b9bfc7;
    flex: 0 0 auto;
}

.form-check-input:checked {
    background-color: var(--pi-red);
    border-color: var(--pi-red);
}

.form-check-input:focus {
    border-color: var(--pi-red-light);
    box-shadow: 0 0 0 .2rem rgba(176, 42, 48, .2);
}

.form-switch .form-check-input { width: 2em; border-radius: 2em; }

/* --------------------------------------------------------------------------
   3. Brand the controls
   -------------------------------------------------------------------------- */
.portal-page .form-control,
.portal-page .form-select {
    background-color: #fff;
    border: 1px solid #d7dbe0;
    border-radius: 8px;
    padding: .55rem .85rem;
    line-height: 1.5;
    font-size: .95rem;
    color: var(--pi-ink);
}

.portal-page .form-control:focus,
.portal-page .form-select:focus {
    border-color: var(--pi-red-light);
    box-shadow: 0 0 0 .2rem rgba(176, 42, 48, .15);
}

.portal-page .form-label {
    font-weight: 600;
    font-size: .875rem;
    margin-bottom: .3rem;
    color: #32383e;
}

.portal-page .form-control::placeholder { color: #a9b0b8; }

.btn-brand {
    background-image: var(--pi-gradient);
    background-size: 200% auto;
    border: none;
    color: #fff;
    font-weight: 600;
    padding: .65rem 1.5rem;
    border-radius: 8px;
    transition: background-position .4s, box-shadow .2s, transform .15s;
}

.btn-brand:hover:not(:disabled),
.btn-brand:focus:not(:disabled) {
    background-position: right center;
    color: #fff;
    box-shadow: 0 .35rem .9rem rgba(203, 45, 62, .3);
    transform: translateY(-1px);
}

.btn-brand:disabled { opacity: .45; background-image: none; background-color: #9aa1a9; }

.btn-outline-brand {
    border: 1px solid var(--pi-red);
    color: var(--pi-red);
    background: #fff;
    font-weight: 600;
    border-radius: 8px;
}

.btn-outline-brand:hover { background: var(--pi-red); color: #fff; }

/* Text links only. Buttons and badges rendered as <a> keep their own colours:
   this rule used to outrank .btn-brand and .badge-brand, painting their text
   the same red as their background ("Continue", "Apply", "Download PDF"). */
.portal-page a:not(.btn):not(.badge) { color: var(--pi-red); }
.portal-page a:not(.btn):not(.badge):hover { color: var(--pi-red-dark); }

/* --------------------------------------------------------------------------
   4. Cards
   -------------------------------------------------------------------------- */
.portal-card {
    background: var(--pi-surface);
    border: 1px solid var(--pi-line);
    border-radius: var(--pi-radius);
    box-shadow: var(--pi-shadow);
    overflow: hidden;
}

.portal-card__head {
    padding: .9rem 1.25rem;
    border-bottom: 1px solid var(--pi-line);
    background: #fff;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.portal-card__head h6 {
    margin: 0;
    font-family: var(--pi-font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--pi-ink);
}

.portal-card__head .step {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--pi-red); color: #fff;
    display: grid; place-items: center;
    font-size: .78rem; font-weight: 700; flex: 0 0 auto;
}

.portal-card__body { padding: 1.25rem; }

/* --------------------------------------------------------------------------
   5. Premium panel — the headline number on the quote page
   -------------------------------------------------------------------------- */
.premium-panel {
    border: 1px solid var(--pi-line);
    border-radius: var(--pi-radius);
    box-shadow: var(--pi-shadow);
    overflow: hidden;
    background: #fff;
}

.premium-panel__head {
    background: var(--pi-red-deep);
    color: #fff;
    padding: .85rem 1.25rem;
    font-family: var(--pi-font-display);
    font-weight: 700;
}

.premium-hero {
    background: var(--pi-gradient);
    color: #fff;
    text-align: center;
    padding: 1.5rem 1rem 1.25rem;
}

.premium-hero .label {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: .68rem;
    opacity: .9;
}

.premium-hero .amount {
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1.15;
    margin: .2rem 0;
}

.premium-hero .amount .cur { font-size: 1.1rem; font-weight: 600; opacity: .9; }
.premium-hero .cover { font-size: .82rem; opacity: .92; }

.premium-empty {
    /* A column so the checklist sits under the message rather than beside it. */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.75rem 1.25rem;
    color: var(--pi-muted);
    font-size: .88rem;
}

.premium-empty i { font-size: 1.9rem; color: #cfd4da; margin-bottom: .6rem; }

.premium-empty .todo {
    margin: 1rem auto 0;
    padding: .85rem 1.1rem;
    list-style: none;
    font-size: .82rem;
    text-align: left;
    background: #fbfbfc;
    border: 1px solid var(--pi-line);
    border-radius: 8px;
    min-width: 62%;
}

.premium-empty .todo:empty { display: none; }
.premium-empty .todo li { padding: .18rem 0; display: flex; align-items: center; gap: .45rem; }
.premium-empty .todo li::before { content: "○"; font-size: .8rem; line-height: 1; color: #c3c8ce; }
.premium-empty .todo li.done { color: #16a34a; text-decoration: line-through; text-decoration-color: #bfe6cb; }
.premium-empty .todo li.done::before { content: "✓"; font-size: .8rem; line-height: 1; color: #16a34a; }

.breakdown { width: 100%; margin: 0; font-size: .875rem; }
.breakdown td { padding: .45rem 1.25rem; border-bottom: 1px solid #f2f4f6; }
.breakdown td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.breakdown .sub td { color: var(--pi-muted); font-size: .78rem; padding-top: 0; border-bottom: none; }
.breakdown .discount td { color: #16a34a; }
.breakdown .loading td { color: #b45309; }
.breakdown .net td { border-top: 1px solid var(--pi-line); }
.breakdown .total td {
    font-weight: 800; font-size: 1rem;
    background: #fbfbfc; border-top: 2px solid var(--pi-red);
    border-bottom: none; padding-top: .7rem; padding-bottom: .7rem;
}

/* --------------------------------------------------------------------------
   6. Cover / exclusion lists
   -------------------------------------------------------------------------- */
.cover-list { list-style: none; padding: 0; margin: 0; }

.cover-list li {
    display: flex; gap: .6rem; align-items: flex-start;
    padding: .45rem 0; font-size: .875rem; border-bottom: 1px dashed #eef0f2;
}

.cover-list li:last-child { border-bottom: none; }
.cover-list li i { margin-top: .18rem; font-size: .8rem; flex: 0 0 auto; }
.cover-list li .limit { display: block; color: var(--pi-muted); font-size: .78rem; }
.cover-list.is-excluded li i { color: #c0c4c9; }
.cover-list.is-excluded li { color: #6b7280; }

/* --------------------------------------------------------------------------
   7. Product chooser
   -------------------------------------------------------------------------- */
.product-card {
    display: flex; flex-direction: column; height: 100%;
    padding: 1.6rem; background: #fff;
    border: 1px solid var(--pi-line); border-radius: var(--pi-radius);
    text-decoration: none; color: inherit;
    transition: border-color .2s, box-shadow .2s, transform .2s;
    position: relative; overflow: hidden;
}

.product-card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: var(--pi-gradient); opacity: 0; transition: opacity .2s;
}

.product-card:hover {
    border-color: rgba(176, 42, 48, .45);
    box-shadow: 0 .6rem 1.6rem rgba(176, 42, 48, .12);
    transform: translateY(-3px);
    color: inherit;
}

.product-card:hover::before { opacity: 1; }

.product-card__icon {
    width: 52px; height: 52px; border-radius: 13px;
    display: grid; place-items: center; margin-bottom: 1rem;
    background: rgba(176, 42, 48, .09); color: var(--pi-red); font-size: 1.4rem;
}

.product-card h5 {
    font-family: var(--pi-font-display);
    font-weight: 700; font-size: 1.15rem; margin-bottom: .5rem;
}

.product-card p { color: var(--pi-muted); font-size: .88rem; flex: 1 1 auto; margin-bottom: .9rem; }

.product-card__meta {
    font-size: .78rem; color: var(--pi-muted);
    border-top: 1px dashed var(--pi-line); padding-top: .7rem; margin-bottom: .7rem;
}

.product-card__cta { color: var(--pi-red); font-weight: 700; font-size: .88rem; }

/* --------------------------------------------------------------------------
   8. Auth screens
   -------------------------------------------------------------------------- */
.auth-card {
    background: #fff; border: 1px solid var(--pi-line);
    border-radius: var(--pi-radius); box-shadow: var(--pi-shadow); overflow: hidden;
}

.auth-card__head {
    padding: 1.5rem 1.5rem 1.15rem;
    border-bottom: 1px solid var(--pi-line);
    background: linear-gradient(180deg, #fff 0%, #fdf7f7 100%);
}

.auth-card__head h4,
.auth-card__title {
    font-size: var(--pi-fs-xl);
    margin: 0 0 .3rem;
    font-family: var(--pi-font-display);
    font-weight: 700; color: var(--pi-ink);
}

.auth-card__head p { margin: 0; color: var(--pi-muted); font-size: .9rem; }
.auth-card__body { padding: 1.5rem; }

.auth-tab { gap: .5rem; }

.auth-tab .nav-link {
    border: 1px solid #dfe3e8; border-radius: 8px;
    color: #4b5259; background: #f7f8fa; font-weight: 600; font-size: .9rem;
}

.auth-tab .nav-link.active {
    background-image: var(--pi-gradient);
    border-color: transparent; color: #fff;
}

.otp-input {
    letter-spacing: .55em; font-size: 1.5rem; font-weight: 700;
    text-align: center; padding-left: .55em;
}

/* --------------------------------------------------------------------------
   9. Account area
   -------------------------------------------------------------------------- */
.user-sidenav {
    background: #fff; border: 1px solid var(--pi-line);
    border-radius: var(--pi-radius); box-shadow: var(--pi-shadow); overflow: hidden;
}

.user-sidenav__head {
    display: flex; align-items: center; gap: .75rem;
    padding: 1.1rem; color: #fff; background: var(--pi-red-deep);
}

.user-sidenav__head h6 { color: #fff; margin: 0; font-size: .95rem; }
.user-sidenav__head small { color: rgba(255, 255, 255, .72); }

.user-sidenav__avatar {
    width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center; flex: 0 0 auto;
    background: rgba(255, 255, 255, .16); color: #fff;
}

.user-sidenav__menu { list-style: none; margin: 0; padding: .4rem 0; }

.user-sidenav__menu a {
    display: flex; align-items: center; gap: .65rem;
    padding: .6rem 1.1rem; color: #444; text-decoration: none; font-size: .9rem;
    border-left: 3px solid transparent;
}

.user-sidenav__menu a:hover { background: #faf9fa; color: var(--pi-red); }

.user-sidenav__menu a.active {
    background: rgba(176, 42, 48, .06);
    color: var(--pi-red); font-weight: 600; border-left-color: var(--pi-red);
}

.user-sidenav__menu i { width: 18px; text-align: center; }

.stat-card {
    display: flex; align-items: center; gap: 1rem; height: 100%;
    padding: 1.15rem 1.25rem; border-radius: var(--pi-radius);
    background: #fff; border: 1px solid var(--pi-line);
    box-shadow: var(--pi-shadow); text-decoration: none; color: inherit;
    transition: transform .15s, box-shadow .15s;
    border-left: 4px solid var(--stat-color, var(--pi-red));
}

a.stat-card:hover {
    color: inherit; transform: translateY(-2px);
    box-shadow: 0 .5rem 1.2rem rgba(16, 24, 40, .1);
}

.stat-card i {
    font-size: 1.3rem; color: var(--stat-color, var(--pi-red));
    width: 44px; height: 44px; border-radius: 11px; flex: 0 0 auto;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--stat-color, #b02a30) 12%, #fff);
}

.stat-card h3 { margin: 0; font-size: 1.6rem; font-weight: 800; color: var(--pi-ink); }
.stat-card h6 { margin: 0; font-size: .82rem; color: var(--pi-muted); }

/* --------------------------------------------------------------------------
   10. Small helpers
   -------------------------------------------------------------------------- */
.section-title {
    font-family: var(--pi-font-display);
    font-weight: 700; margin-bottom: .35rem;
}

.text-brand { color: var(--pi-red) !important; }
.badge-brand { background: var(--pi-red); color: #fff; }

.field-note { font-size: .78rem; color: var(--pi-muted); margin-top: .25rem; display: block; }
.field-note.is-good { color: #16a34a; }
.field-note.is-bad { color: #dc2626; }

.help-strip {
    background: #fff; border: 1px solid var(--pi-line);
    border-left: 4px solid var(--pi-red); border-radius: var(--pi-radius);
    padding: .9rem 1.1rem; font-size: .86rem; color: var(--pi-muted);
}

.help-strip a { font-weight: 600; }

@media (max-width: 575.98px) {
    .premium-hero .amount { font-size: 1.9rem; }
    .portal-card__body { padding: 1rem; }
}

/* The site sets a 1.4rem horizontal padding on every select, which leaves the
   Bootstrap chevron sitting on top of the text in narrow input-group selects. */
.portal-page .form-select {
    padding-right: 2.1rem;
    background-position: right .7rem center;
}

.portal-page .input-group > .form-select { width: auto; }
.portal-page .input-group-text { background: #f4f5f7; border-color: #d7dbe0; color: var(--pi-muted); }

/* --------------------------------------------------------------------------
   11. Site-wide mobile guard
   .mobile-menu-icon i carries 30px of horizontal padding inside a right-floated
   20% column, which pushes ~8px past the viewport and gives every page a
   horizontal scroll on a phone. Pre-existing across the site, not just here.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    /* clip, not hidden: hidden turns <body> into its own scroll box, which
       stops anything inside it sticking (the phone price bar). Browsers
       without clip keep hidden. */
    html, body { overflow-x: hidden; overflow-x: clip; }

    .mobile-menu-icon i { padding: 23px 16px; }

    /* 8px of letter-spacing on a 27-character company name does not fit. */
    .page-breadcrumb p { font-size: 13px; letter-spacing: 3px; }
    .page-breadcrumb h1, .page-breadcrumb h3 { font-size: 22px; line-height: 1.3; }
}

/* --------------------------------------------------------------------------
   12. Plan comparison
   -------------------------------------------------------------------------- */
.compare-table { width: 100%; margin: 0; font-size: .875rem; }
.compare-table td { padding: .65rem 1.25rem; border-bottom: 1px solid #f2f4f6; vertical-align: middle; }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table tr.is-current { background: rgba(176, 42, 48, .05); }
.compare-table .plan { font-weight: 600; color: var(--pi-ink); }
.compare-table .si { font-size: .78rem; color: var(--pi-muted); }
.compare-table .amt { text-align: right; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.compare-table .pick { text-align: right; width: 1%; white-space: nowrap; }
.compare-table .na { color: var(--pi-muted); font-weight: 400; font-size: .8rem; }
.compare-table .tag {
    display: inline-block; font-size: .62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; padding: .1rem .4rem; border-radius: 4px; vertical-align: middle;
    background: #dcfce7; color: #15803d; margin-left: .3rem;
}
.compare-table .tag-current { background: rgba(176, 42, 48, .12); color: var(--pi-red); }

/* --------------------------------------------------------------------------
   13. Language switcher in the contact bar
   -------------------------------------------------------------------------- */
.lang-switch { display: flex; justify-content: flex-end; align-items: center; gap: .25rem; height: 100%; }
.lang-switch a {
    color: rgba(255, 255, 255, .72); text-decoration: none;
    font-size: .78rem; padding: .1rem .5rem; border-radius: 4px; line-height: 1.9;
}
.lang-switch a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.lang-switch a.active { color: #fff; background: rgba(255, 255, 255, .18); font-weight: 600; }

/* --------------------------------------------------------------------------
   14. Product cards — the manual way into the calculator. These live inside
       the homepage AI section (section 18) and on the quote index.
   -------------------------------------------------------------------------- */
.quote-widget__card {
    display: flex; flex-direction: column; height: 100%; gap: .35rem;
    padding: 1rem .95rem; border: 1px solid var(--pi-line); border-radius: 9px;
    background: #fcfcfd; text-decoration: none; color: inherit;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.quote-widget__card:hover {
    color: inherit; border-color: rgba(176, 42, 48, .45); background: #fff;
    box-shadow: 0 .35rem 1rem rgba(176, 42, 48, .12); transform: translateY(-2px);
}

.quote-widget__card > i { font-size: 1.25rem; color: var(--pi-red); }
.quote-widget__card .name { font-weight: 700; font-size: .92rem; line-height: 1.3; }
.quote-widget__card .go { font-size: .76rem; color: var(--pi-red); font-weight: 600; margin-top: auto; }

.quote-widget__foot { margin-top: 1rem; font-size: .82rem; color: var(--pi-muted); }
.quote-widget__foot a { color: var(--pi-red); font-weight: 600; text-decoration: none; }
.quote-widget__foot a:hover { text-decoration: underline; }
.quote-widget__foot .sep { margin: 0 .5rem; color: #cfd4da; }

/* --------------------------------------------------------------------------
   15. Blog
   -------------------------------------------------------------------------- */
.blog-filters { display: flex; flex-wrap: wrap; gap: .4rem; }

.blog-filters a {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .8rem; border: 1px solid var(--pi-line); border-radius: 999px;
    background: #fff; color: #4b5259; text-decoration: none;
    font-size: .84rem; font-weight: 600;
}

.blog-filters a:hover { border-color: rgba(176, 42, 48, .45); color: var(--pi-red); }
.blog-filters a.active { background: var(--pi-red); border-color: var(--pi-red); color: #fff; }
.blog-filters .count { font-size: .7rem; opacity: .7; }

.blog-card {
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border: 1px solid var(--pi-line); border-radius: var(--pi-radius);
    overflow: hidden; text-decoration: none; color: inherit;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.blog-card:hover {
    color: inherit; border-color: rgba(176, 42, 48, .4);
    box-shadow: 0 .6rem 1.5rem rgba(16, 24, 40, .1); transform: translateY(-3px);
}

.blog-card__media { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #eef0f2; }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.blog-card:hover .blog-card__media img { transform: scale(1.04); }

.blog-card__cat {
    position: absolute; left: .7rem; bottom: .7rem;
    background: rgba(82, 7, 7, .88); color: #fff;
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    padding: .2rem .55rem; border-radius: 4px;
}

.blog-card__body { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.1rem 1.15rem; flex: 1 1 auto; }
.blog-card__meta { font-size: .75rem; color: var(--pi-muted); display: flex; align-items: center; gap: .35rem; }
.blog-card__meta .dot { opacity: .5; }
.blog-card__title { font-family: var(--pi-font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.35; color: var(--pi-ink); }
.blog-card__text { font-size: .85rem; color: var(--pi-muted); flex: 1 1 auto; }
.blog-card__cta { font-size: .82rem; font-weight: 700; color: var(--pi-red); }

.blog-hero { width: 100%; max-height: 420px; object-fit: cover; display: block; }
.blog-title { font-family: var(--pi-font-display); font-weight: 700; font-size: 1.9rem; line-height: 1.25; margin: .75rem 0 .5rem; }

.blog-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .8rem; color: var(--pi-muted); padding-bottom: .9rem; border-bottom: 1px solid var(--pi-line); }
.blog-meta i { margin-right: .3rem; }

.blog-body { padding-top: 1.1rem; font-size: .97rem; line-height: 1.85; color: #33383d; }
.blog-body p { margin-bottom: 1rem; }
.blog-body h2, .blog-body h3, .blog-body h4 { font-family: var(--pi-font-display); font-weight: 700; margin: 1.6rem 0 .6rem; }
.blog-body h2 { font-size: 1.4rem; } .blog-body h3 { font-size: 1.2rem; } .blog-body h4 { font-size: 1.05rem; }
.blog-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 1rem 0; }
.blog-body ul, .blog-body ol { margin: 0 0 1rem 1.15rem; }
.blog-body li { margin-bottom: .4rem; }
.blog-body a { color: var(--pi-red); }
.blog-body blockquote {
    border-left: 3px solid var(--pi-red); background: #fbfbfc;
    margin: 1.2rem 0; padding: .8rem 1.1rem; color: #4b5259; font-style: italic;
}
.blog-body table { width: 100%; margin-bottom: 1rem; }
.blog-body table td, .blog-body table th { border: 1px solid var(--pi-line); padding: .5rem .65rem; }

.blog-share { display: flex; align-items: center; gap: .5rem; margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--pi-line); font-size: .85rem; color: var(--pi-muted); }
.blog-share a {
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    background: #f4f5f7; color: #4b5259; text-decoration: none; font-size: .8rem; transition: .2s;
}
.blog-share a:hover { background: var(--pi-red); color: #fff; }

.related-item { display: flex; gap: .7rem; padding: .6rem 0; border-bottom: 1px solid #f2f4f6; text-decoration: none; color: inherit; }
.related-item:last-child { border-bottom: none; }
.related-item img { width: 68px; height: 52px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; background: #eef0f2; }
.related-item strong { display: block; font-size: .85rem; line-height: 1.35; color: var(--pi-ink); }
.related-item small { color: var(--pi-muted); font-size: .74rem; }
.related-item:hover strong { color: var(--pi-red); }

@media (max-width: 575.98px) {
    .blog-title { font-size: 1.45rem; }
    .blog-hero { max-height: 240px; }
}

/* --------------------------------------------------------------------------
   16. Fixes for rules that outrank the component styles above
   -------------------------------------------------------------------------- */

/* `.portal-page a` is (0,1,1) and beat `.badge-brand` (0,1,0), painting the
   badge text the same red as its background. */
a.badge-brand,
.portal-page a.badge-brand,
.portal-page a.badge-brand:hover { color: #fff; }

/* style.css strips list markers from every ul on the site. Article bodies and
   product copy need them back. */
.blog-body ul { list-style: disc; }
.blog-body ol { list-style: decimal; }
.blog-body ul ul { list-style: circle; }
.blog-body li { display: list-item; }

/* Same problem inside the cover/exclusion lists is intentional there — those
   use their own icons — so they are left alone. */

/* --------------------------------------------------------------------------
   17. Document upload — AI extraction on the quote form
   -------------------------------------------------------------------------- */
.doc-drop {
    display: block; width: 100%; cursor: pointer; text-align: center;
    padding: 1.75rem 1.25rem;
    border: 2px dashed #d3d8de; border-radius: 10px;
    background: #fbfbfc; transition: border-color .2s, background .2s;
}

.doc-drop:hover, .doc-drop.is-over { border-color: var(--pi-red); background: #fdf6f6; }
.doc-drop.is-busy { cursor: progress; border-style: solid; border-color: var(--pi-red); background: #fdf6f6; }

.doc-drop > span { display: block; }
.doc-drop i { font-size: 1.6rem; color: var(--pi-red); display: block; margin-bottom: .5rem; }
.doc-drop strong { display: block; font-size: .92rem; color: var(--pi-ink); }
.doc-drop small { display: block; margin-top: .25rem; font-size: .78rem; color: var(--pi-muted); }

.doc-summary {
    border: 1px solid #cfe9d6; background: #f6fbf7;
    border-radius: 10px; padding: .9rem 1.1rem;
}

.doc-summary.is-error { border-color: #f0cfcf; background: #fdf6f6; }
.doc-summary__head { font-weight: 700; font-size: .92rem; color: #15803d; margin-bottom: .5rem; }
.doc-summary.is-error .doc-summary__head { color: #b91c1c; }
.doc-summary__head i { margin-right: .35rem; }

.doc-summary__list { list-style: none; margin: 0 0 .4rem; padding: 0; font-size: .85rem; }
.doc-summary__list li {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .25rem 0; border-bottom: 1px dashed #dcebe0;
}
.doc-summary__list li:last-child { border-bottom: none; }
.doc-summary__list span { color: var(--pi-muted); }
.doc-summary__list strong { text-align: right; }

.doc-summary__note, .doc-summary__ask {
    font-size: .82rem; color: var(--pi-muted); margin-top: .5rem;
    padding-top: .5rem; border-top: 1px dashed #dcebe0;
}
.doc-summary__ask strong { color: var(--pi-ink); }

.doc-summary__redo {
    margin-top: .7rem; background: none; border: none; padding: 0;
    color: var(--pi-red); font-weight: 600; font-size: .82rem; cursor: pointer;
}
.doc-summary__redo:hover { text-decoration: underline; }

/* The full preview: what was read, under headings, each value marked. */
.doc-summary__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.doc-summary__top .doc-summary__head { margin-bottom: 0; }
.doc-summary__badge {
    display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 600;
    padding: .15rem .55rem; border-radius: 99px; background: #e3f4e8; color: #166534; border: 1px solid #bfe3ca;
}
.doc-summary__badge.is-check { background: #fff7e6; color: #92400e; border-color: #f5d9a8; }
.doc-summary__view { font-size: .78rem; font-weight: 600; color: var(--pi-red); }
.doc-summary__thumb { display: block; margin: 0 0 .7rem; }
.doc-summary__thumb img { max-width: 100%; max-height: 150px; border-radius: 8px; border: 1px solid #dcebe0; object-fit: contain; background: #fff; }
.doc-summary__section { margin-top: .55rem; }
.doc-summary__section h6 {
    margin: 0 0 .2rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #166534; font-weight: 700;
}
.doc-summary__list strong .st { font-size: .78rem; margin-left: .3rem; }
.doc-summary__list strong .st-mrz { color: #15803d; }
.doc-summary__list strong .st-check { color: #b45309; }
.doc-summary__list li.is-missing strong { color: #b91c1c; font-weight: 600; }
/* A box the application still needs (TravellerForm, OMP). */
.form-control.is-missing { border-color: #f0b4b4; background: #fffafa; }
.doc-summary__valid { font-size: .8rem; margin-top: .45rem; padding: .35rem .6rem; border-radius: 6px; background: #e3f4e8; color: #166534; }
.doc-summary__valid.is-bad { background: #fdecec; color: #991b1b; }
.doc-summary__carry {
    display: flex; gap: .45rem; align-items: flex-start; font-size: .8rem; color: #1e3a5f;
    margin-top: .6rem; padding: .45rem .6rem; border-radius: 6px; background: #eef4fb;
}
.doc-summary__carry i { margin-top: .15rem; }
.doc-drop__step { display: block; margin-top: .35rem; font-size: .76rem; color: var(--pi-muted); }

/* A field the document filled in, so the customer can see what came from where. */
.portal-page .form-control.from-document,
.portal-page .form-select.from-document {
    border-color: #86c79a;
    background-color: #f7fdf9;
}

/* --------------------------------------------------------------------------
   18. Homepage AI introduction — the section under the slider
   -------------------------------------------------------------------------- */
.ai-intro {
    background:
        radial-gradient(900px 380px at 15% 0%, rgba(203, 45, 62, .07), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
    padding: 3.25rem 0 3rem;
    border-bottom: 1px solid var(--pi-line);
}

.ai-intro__badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(176, 42, 48, .1); color: var(--pi-red);
    font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px;
    padding: .32rem .8rem; border-radius: 999px; margin-bottom: .85rem;
}

.ai-intro__title {
    font-family: var(--pi-font-display); font-weight: 700;
    font-size: 2.1rem; line-height: 1.2; color: var(--pi-ink); margin: 0 0 .6rem;
}

.ai-intro__lead { color: var(--pi-muted); font-size: .98rem; margin: 0; }

.ai-steps { display: flex; flex-direction: column; gap: 1rem; }

.ai-step {
    display: flex; gap: 1rem; align-items: flex-start;
    background: #fff; border: 1px solid var(--pi-line); border-radius: 10px;
    padding: 1rem 1.15rem; box-shadow: var(--pi-shadow);
}

.ai-step__num {
    width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
    display: grid; place-items: center;
    background: var(--pi-gradient); color: #fff; font-weight: 800; font-size: .92rem;
}

.ai-step h6 { margin: 0 0 .2rem; font-weight: 700; font-size: 1rem; color: var(--pi-ink); }
.ai-step p  { margin: 0; font-size: .875rem; color: var(--pi-muted); }

.ai-intro__assure {
    display: flex; flex-wrap: wrap; gap: 1.1rem;
    margin-top: 1.1rem; font-size: .82rem; color: var(--pi-muted);
}
.ai-intro__assure i { color: var(--pi-red); margin-right: .35rem; }

.ai-panel {
    height: 100%;
    background: #fff; border: 1px solid var(--pi-line);
    border-top: 4px solid var(--pi-red); border-radius: 12px;
    box-shadow: 0 .6rem 1.8rem rgba(16, 24, 40, .08);
    display: flex; flex-direction: column;
}

.ai-panel__body { padding: 1.35rem; display: flex; flex-direction: column; height: 100%; }

.ai-drop {
    /* Fills whatever height the steps column leaves, so the panel has no
       dead space under the dashed box on wide screens. */
    display: flex; flex-direction: column; justify-content: center;
    flex: 1 1 auto; min-height: 8.5rem;
    cursor: pointer; text-align: center;
    padding: 1.6rem 1rem; margin-bottom: .5rem;
    border: 2px dashed #d3d8de; border-radius: 10px;
    background: #fbfbfc; transition: border-color .2s, background .2s;
}
.ai-drop:hover, .ai-drop.is-over { border-color: var(--pi-red); background: #fdf6f6; }
.ai-drop.is-busy { cursor: progress; border-style: solid; border-color: var(--pi-red); background: #fdf6f6; }
.ai-drop > span { display: block; }
.ai-drop i { font-size: 1.5rem; color: var(--pi-red); display: block; margin-bottom: .45rem; }
.ai-drop strong { display: block; font-size: .9rem; color: var(--pi-ink); }
.ai-drop small { display: block; margin-top: .25rem; font-size: .76rem; color: var(--pi-muted); line-height: 1.45; }

.ai-panel__msg {
    font-size: .84rem; padding: .55rem .75rem; border-radius: 8px;
    background: #f0f9f3; color: #15803d; border: 1px solid #cfe9d6; margin-bottom: .5rem;
}
.ai-panel__msg.is-error { background: #fdf6f6; color: #b91c1c; border-color: #f0cfcf; }


/* The manual way in. Sits under the upload when AI is on, and is the whole
   section when it is off — so it only needs the top rule in the first case. */
.ai-manual--after {
    margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--pi-line);
}

.ai-manual__label {
    display: block; text-align: center; margin-bottom: 1rem;
    font-size: .78rem; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: #a9b0b8;
}

.ai-manual .quote-widget__foot { text-align: center; }

@media (max-width: 991.98px) {
    .ai-intro { padding: 2.25rem 0; }
    .ai-intro__title { font-size: 1.65rem; }
}

@media (max-width: 575.98px) {
    .ai-intro__title { font-size: 1.4rem; }
    .ai-intro__assure { gap: .65rem; font-size: .78rem; }
    .ai-step { padding: .85rem .95rem; }
    .ai-manual--after { margin-top: 1.5rem; padding-top: 1.25rem; }
    .quote-widget__foot .sep { margin: 0 .3rem; }
}

/* --------------------------------------------------------------------------
   19. Site search — the nav control, its suggestions, and the results page
   -------------------------------------------------------------------------- */
/* Search + (when sticky) the phone number, on one row inside the last nav
   column. The search gives up width so the phone never wraps. */
.nav-utility {
    display: flex; align-items: center; gap: .5rem;
    height: 100%; min-height: 56px;
}

.nav-utility .nav-search { flex: 1 1 auto; min-width: 0; }
.nav-utility .header-menu-contact { flex: 0 0 auto; }
.nav-utility .header-menu-contact h5 {
    margin: 0; font-size: .85rem; white-space: nowrap;
}

.nav-search { position: relative; }

.nav-search form {
    position: relative; display: block;
}

.nav-search form > i {
    position: absolute; top: 50%; left: .6rem; transform: translateY(-50%);
    font-size: .78rem; color: rgba(255, 255, 255, .6); pointer-events: none;
}

.nav-search input {
    width: 100%; height: 32px; padding: 0 .6rem 0 1.85rem;
    font-size: .8rem; color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px; outline: none;
    transition: background .2s, border-color .2s;
}

.nav-search input::placeholder { color: rgba(255, 255, 255, .6); }
.nav-search input:focus {
    background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .45);
}

/* The browser's own clear button is invisible on a dark ground. */
.nav-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .6; }

.nav-search__results {
    position: absolute; z-index: 1200; top: calc(100% + .35rem); right: 0;
    width: min(360px, 82vw); max-height: 60vh; overflow-y: auto;
    background: #fff; border: 1px solid var(--pi-line); border-radius: 10px;
    box-shadow: 0 .75rem 2rem rgba(16, 24, 40, .18); padding: .35rem;
}

.nav-search__item {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .6rem; border-radius: 7px;
    text-decoration: none; color: var(--pi-ink);
}

.nav-search__item:hover, .nav-search__item.is-active {
    background: #f6f7f9; color: var(--pi-ink);
}

.nav-search__item > i { color: var(--pi-red); font-size: .9rem; width: 1rem; text-align: center; }
.nav-search__item strong { display: block; font-size: .84rem; font-weight: 600; line-height: 1.3; }
.nav-search__item small { display: block; font-size: .72rem; color: var(--pi-muted); }
.nav-search__none { padding: .7rem .6rem; font-size: .82rem; color: var(--pi-muted); }

.nav-search__all {
    display: block; text-align: center; padding: .5rem;
    font-size: .78rem; font-weight: 600; color: var(--pi-red);
    text-decoration: none; border-top: 1px solid var(--pi-line); margin-top: .25rem;
}

/* In the mobile offcanvas the ground is light, so the dark-bar styling
   has to be undone rather than inherited. */
.nav-search--mobile { padding: 0 0 1rem; }
.nav-search--mobile input {
    color: var(--pi-ink); background: #f4f5f7; border-color: var(--pi-line); height: 38px;
}
.nav-search--mobile input::placeholder { color: var(--pi-muted); }
.nav-search--mobile form > i { color: var(--pi-muted); }
.nav-search--mobile input::-webkit-search-cancel-button { filter: none; }
.nav-search--mobile .nav-search__results { right: auto; left: 0; width: 100%; }

/* Results page */
.search-page__form { position: relative; display: flex; gap: .5rem; }
.search-page__form > i {
    position: absolute; top: 50%; left: .9rem; transform: translateY(-50%);
    color: var(--pi-muted); pointer-events: none;
}
/* Outranks ".portal-page .form-control", which otherwise sets the left
   padding and slides the text under the magnifying glass. */
.portal-page .search-page__form input { padding-left: 2.4rem; height: 46px; }
.search-page__form .btn { flex: 0 0 auto; padding-inline: 1.4rem; }

.search-count { font-size: .88rem; color: var(--pi-muted); margin-bottom: 1rem; }

.search-group { margin-bottom: 1.5rem; }
.search-group__head {
    font-size: .72rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
    color: var(--pi-muted); margin-bottom: .5rem;
}

.search-result {
    display: flex; align-items: center; gap: .85rem;
    padding: .85rem 1rem; margin-bottom: .5rem;
    background: #fff; border: 1px solid var(--pi-line); border-radius: 10px;
    text-decoration: none; color: inherit;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.search-result:hover {
    color: inherit; border-color: rgba(176, 42, 48, .4);
    box-shadow: 0 .35rem 1rem rgba(176, 42, 48, .1); transform: translateY(-1px);
}

.search-result__icon {
    flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: 8px;
    display: grid; place-items: center;
    background: rgba(176, 42, 48, .08); color: var(--pi-red);
}

.search-result__body { flex: 1 1 auto; min-width: 0; }
.search-result__body strong { display: block; font-size: .95rem; line-height: 1.35; }
.search-result__body small { display: block; font-size: .8rem; color: var(--pi-muted); margin-top: .15rem; }

.search-result__go {
    flex: 0 0 auto; font-size: .78rem; font-weight: 600; color: var(--pi-red); white-space: nowrap;
}

.search-empty, .search-hint { text-align: center; padding: 2rem 1rem; }
.search-empty > i { font-size: 2.2rem; color: #d3d8de; margin-bottom: .75rem; display: block; }
.search-empty h5 { font-size: 1.05rem; }
.search-empty p, .search-hint p { color: var(--pi-muted); font-size: .9rem; }

.search-hint__chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .75rem; }
.search-hint__chips a {
    padding: .4rem .85rem; border: 1px solid var(--pi-line); border-radius: 999px;
    font-size: .82rem; text-decoration: none; color: var(--pi-ink); background: #fff;
}
.search-hint__chips a:hover { border-color: var(--pi-red); color: var(--pi-red); }

@media (max-width: 575.98px) {
    .search-result__go { display: none; }
    .search-page__form .btn { padding-inline: 1rem; }
}

/* --------------------------------------------------------------------------
   20. Bangla. The same labels run noticeably wider than in English, so the
       menu needs to give back a little space or it wraps to a second row and
       pushes the bar over the page. Scoped to the html lang attribute, which
       now follows the visitor's choice rather than the config default.
   -------------------------------------------------------------------------- */
/* The menu items are inline-block, so every newline between the <li> tags
   renders as a real space — about 30px across the bar, which is most of the
   overflow. Zeroing the list's font size removes that whitespace; the items
   set their own size back. */
html[lang="bn"] .nav > ul { font-size: 0; }

html[lang="bn"] .nav > ul > li { font-size: .85rem; }

html[lang="bn"] .nav > ul > li > a {
    font-size: .83rem;
    padding-left: .28rem;
    padding-right: .28rem;
    /* A label must break between menu items, never inside one. */
    white-space: nowrap;
}

html[lang="bn"] .sub-menu a { font-size: .85rem; }

html[lang="bn"] .nav-utility .header-menu-contact h5 { font-size: .8rem; }

/* Bengali sits lower in its line box than Latin; a touch more leading stops
   the descenders being clipped in tight components. */
html[lang="bn"] .ai-step p,
html[lang="bn"] .search-result__body small,
html[lang="bn"] .quote-widget__card .name { line-height: 1.6; }

/* --------------------------------------------------------------------------
   21. Purpose of travel — the first question on the OMP form. Tiles rather
       than a dropdown: there are four, each needs a line of explanation, and
       it is the choice that decides everything below it.
   -------------------------------------------------------------------------- */
.purpose-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
}

.purpose-tile { display: block; margin: 0; cursor: pointer; }

/* The radio stays in the DOM for keyboard and form semantics, but off-screen
   rather than display:none so it can still receive focus. */
.purpose-tile input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}

.purpose-tile__face {
    display: block;
    height: 100%;
    padding: 1rem .9rem;
    text-align: center;
    background: #fcfcfd;
    border: 1px solid var(--pi-line);
    border-radius: 10px;
    transition: border-color .2s, box-shadow .2s, background .2s, transform .2s;
}

.purpose-tile:hover .purpose-tile__face {
    border-color: rgba(176, 42, 48, .4);
    background: #fff;
    transform: translateY(-1px);
}

.purpose-tile input:checked + .purpose-tile__face {
    border-color: var(--pi-red);
    background: #fdf6f6;
    box-shadow: 0 0 0 .15rem rgba(176, 42, 48, .14);
}

.purpose-tile input:focus-visible + .purpose-tile__face {
    outline: 2px solid var(--pi-red-light);
    outline-offset: 2px;
}

.purpose-tile__face i {
    display: block;
    font-size: 1.35rem;
    color: #a9b0b8;
    margin-bottom: .5rem;
    transition: color .2s;
}

.purpose-tile input:checked + .purpose-tile__face i { color: var(--pi-red); }

.purpose-tile__face strong {
    display: block;
    font-size: .92rem;
    line-height: 1.3;
    color: var(--pi-ink);
}

.purpose-tile__face small {
    display: block;
    margin-top: .2rem;
    font-size: .76rem;
    line-height: 1.4;
    color: var(--pi-muted);
}

@media (max-width: 575.98px) {
    .purpose-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
    .purpose-tile__face { padding: .8rem .6rem; }
    .purpose-tile__face i { font-size: 1.15rem; }
    .purpose-tile__face strong { font-size: .85rem; }
    .purpose-tile__face small { font-size: .72rem; }
}

/* ------------------------------------------------------------------
   Portal SPA
   ------------------------------------------------------------------
   The Vue portal reuses everything above; only the states Blade never
   had — loading, empty, error — are new here.
   ------------------------------------------------------------------ */

/* The Blade sidenav marks its current link with mm-active (what the
   shared menuActive() helper returns, named for the admin template),
   while this file only ever styled .active — so the customer sidebar
   never highlighted anything. Both now match; the Vue sidenav uses
   .active, the Blade pages keep mm-active. */
.user-sidenav__menu a.mm-active {
    background: rgba(176, 42, 48, .06);
    color: var(--pi-red); font-weight: 600; border-left-color: var(--pi-red);
}

.portal-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--pi-surface);
    border: 1px solid var(--pi-line);
    border-radius: var(--pi-radius);
}

.portal-skeleton::after {
    content: "";
    position: absolute; inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(16, 24, 40, .05), transparent);
    animation: portal-shimmer 1.4s infinite;
}

.portal-skeleton--tile  { height: 86px; }
.portal-skeleton--panel { height: 240px; }
.portal-skeleton--row   { height: 52px; margin-bottom: .5rem; }
.portal-skeleton--text  { height: 14px; border: 0; background: rgba(16, 24, 40, .07); }

@keyframes portal-shimmer {
    100% { transform: translateX(100%); }
}

/* Motion is decoration here; a still grey block reads the same. */
@media (prefers-reduced-motion: reduce) {
    .portal-skeleton::after { animation: none; }
}

.portal-empty {
    text-align: center;
    padding: 3rem 1.25rem;
    color: var(--pi-muted);
}

.portal-empty i {
    font-size: 2.2rem;
    color: var(--pi-line);
    margin-bottom: .75rem;
    display: block;
}

.portal-empty h6 { color: var(--pi-ink); margin-bottom: .35rem; }
.portal-empty p  { font-size: .88rem; margin-bottom: 1rem; }

.portal-error {
    border: 1px solid #f3d0d2;
    background: #fdf5f5;
    color: var(--pi-red-dark);
    border-radius: var(--pi-radius);
    padding: 1rem 1.15rem;
    font-size: .9rem;
}

.portal-error__title { font-weight: 600; margin-bottom: .2rem; }

/* Pagination inside the portal, which the SPA renders itself rather
   than taking Laravel's Blade links. */
.portal-pager {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; padding: .85rem 1.25rem; border-top: 1px solid var(--pi-line);
    font-size: .85rem; color: var(--pi-muted);
}

/* ------------------------------------------------------------------
   Sign-up and sign-in
   ------------------------------------------------------------------ */

/* Where someone is in a short sequence. Most of what makes a
   multi-step signup tolerable is being able to see it end. */
.auth-steps {
    display: flex; align-items: center; justify-content: center;
    gap: .35rem; list-style: none; margin: 0; padding: 0;
    font-size: .78rem; color: var(--pi-muted); flex-wrap: wrap;
}

.auth-steps li { display: flex; align-items: center; gap: .4rem; }

.auth-steps li + li::before {
    content: ""; width: 18px; height: 1px;
    background: var(--pi-line); margin-right: .35rem;
}

.auth-steps span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: #eef0f3; color: var(--pi-muted);
    font-size: .7rem; font-weight: 700;
}

.auth-steps .is-done span    { background: #16a34a; color: #fff; }
.auth-steps .is-done         { color: #16a34a; }
.auth-steps .is-current span { background: var(--pi-red); color: #fff; }
.auth-steps .is-current      { color: var(--pi-ink); font-weight: 600; }

/* Six boxes rather than one field: on a phone each digit lands where
   the eye expects it, and a wrong one is fixed without retyping the
   rest. */
.otp-boxes { display: flex; gap: .5rem; justify-content: space-between; }

.otp-box {
    flex: 1 1 0; min-width: 0; height: 56px;
    text-align: center; font-size: 1.4rem; font-weight: 700;
    color: var(--pi-ink);
    border: 1px solid #dfe3e8; border-radius: 10px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.otp-box:focus {
    outline: 0; border-color: var(--pi-red);
    box-shadow: 0 0 0 3px rgba(176, 42, 48, .12);
}

/* A filled box should look settled, not still waiting. */
.otp-box:not(:placeholder-shown),
.otp-box[value]:not([value=""]) { border-color: #b9c0c7; background: #fbfbfc; }

@media (max-width: 420px) {
    .otp-boxes { gap: .35rem; }
    .otp-box { height: 48px; font-size: 1.15rem; }
}

/* The resend link while its cooldown runs. Shown rather than hidden,
   so the wait is explained instead of being a dead tap. */
.is-waiting { pointer-events: none; color: var(--pi-muted) !important; text-decoration: none; }

/* Advisory, never blocking. A bar that refuses a password teaches
   people to append "1!" to a weak one. */
.pw-meter { display: flex; align-items: center; gap: .6rem; }

.pw-meter__bar {
    flex: 1 1 auto; height: 4px; border-radius: 2px;
    background: #eef0f3; overflow: hidden;
}

.pw-meter__bar span {
    display: block; height: 100%; width: 0;
    border-radius: 2px; transition: width .2s, background .2s;
}

.pw-meter__label { font-size: .75rem; white-space: nowrap; }

.pw-meter[data-tone="weak"]   .pw-meter__bar span { background: #dc2626; }
.pw-meter[data-tone="ok"]     .pw-meter__bar span { background: #f59e0b; }
.pw-meter[data-tone="strong"] .pw-meter__bar span { background: #16a34a; }

.pw-meter[data-tone="weak"]   .pw-meter__label { color: #dc2626; }
.pw-meter[data-tone="ok"]     .pw-meter__label { color: #b45309; }
.pw-meter[data-tone="strong"] .pw-meter__label { color: #16a34a; }

/* Said while typing, not after a rejected submit — finding out a
   number is taken only after choosing a password is what makes
   people give up. */
.availability.is-free  { color: #16a34a; }
.availability.is-taken { color: #dc2626; }
.availability.is-taken a { font-weight: 600; text-decoration: underline; }

/* A second way in, not a second button on the same form. */
.auth-or {
    display: flex; align-items: center; gap: .75rem;
    margin: 1.1rem 0; color: var(--pi-muted);
    font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
}

.auth-or::before,
.auth-or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--pi-line); }

/* ------------------------------------------------------------------
   Account menu in the site header
   ------------------------------------------------------------------ */
.header-top__right {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 1rem; flex-wrap: wrap;
}

.account-menu { position: relative; display: flex; align-items: center; gap: .5rem; }

.account-link {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .8rem; font-weight: 600; line-height: 1;
    color: rgba(255, 255, 255, .92); text-decoration: none;
    padding: .4rem .6rem; border-radius: 6px;
    transition: background .15s, color .15s;
}

.account-link:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* One of the two is the one most people want; it says so. */
.account-link--solid {
    background: #fff; color: var(--pi-red);
    padding: .4rem .85rem;
}

.account-link--solid:hover { background: #fff; color: var(--pi-red-dark); }

.account-menu__toggle {
    display: inline-flex; align-items: center; gap: .45rem;
    background: rgba(255, 255, 255, .12); border: 0; border-radius: 6px;
    color: #fff; font-size: .8rem; font-weight: 600;
    padding: .4rem .7rem; cursor: pointer;
}

.account-menu__toggle:hover { background: rgba(255, 255, 255, .2); }

.account-menu__panel {
    position: absolute; top: calc(100% + .45rem); right: 0; z-index: 1200;
    min-width: 210px; padding: .35rem;
    background: #fff; border: 1px solid var(--pi-line);
    border-radius: var(--pi-radius); box-shadow: 0 8px 28px rgba(16, 24, 40, .14);
}

.account-menu__panel a {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .65rem; border-radius: 6px;
    color: var(--pi-ink); font-size: .85rem; text-decoration: none;
}

.account-menu__panel a:hover { background: #faf9fa; color: var(--pi-red); }
.account-menu__panel i { width: 16px; text-align: center; color: var(--pi-muted); }
.account-menu__panel a:hover i { color: var(--pi-red); }

.account-menu__sep { height: 1px; background: var(--pi-line); margin: .35rem .25rem; }

/* On a phone this is what a returning customer opened the menu for, so it
   sits at the top of the list and is marked off from the site sections. */
.mobile-account {
    border-bottom: 1px solid var(--pi-line);
    padding-bottom: .5rem; margin-bottom: .5rem;
}

.mobile-account a { font-weight: 600; }
.mobile-account a:first-child { color: var(--pi-red); }

/* --------------------------------------------------------------------------
   "Buy this online" panel on product pages (web/partials/buy-online-cta)
   -------------------------------------------------------------------------- */
.buy-cta { padding: 1.5rem 0; }
.buy-cta--bottom { padding: 2.5rem 0 3rem; background: var(--pi-canvas); }
.buy-cta__card {
    display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center; justify-content: space-between;
    background: var(--pi-surface); border: 1px solid var(--pi-line); border-left: 4px solid var(--pi-red);
    border-radius: var(--pi-radius); box-shadow: var(--pi-shadow); padding: 1.5rem 1.75rem;
}
.buy-cta__text { flex: 1 1 340px; min-width: 0; }
.buy-cta__title { font-family: var(--pi-font-sans); font-weight: 700; font-size: 1.6rem; line-height: 1.25; color: var(--pi-ink); margin: 0; }
.buy-cta__lead { color: var(--pi-muted); margin: .4rem 0 0; font-size: 1.05rem; }
.buy-cta__points { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; font-size: .95rem; color: var(--pi-ink); }
.buy-cta__points i { color: #16a34a; margin-right: .25rem; }
.buy-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.buy-cta__actions .btn { font-family: var(--pi-font-sans); }
.buy-cta__help { flex-basis: 100%; font-size: .9rem; color: var(--pi-muted); font-family: var(--pi-font-sans); }
.buy-cta__help a { color: var(--pi-red); font-family: var(--pi-font-sans); font-weight: 600; }
@media (max-width: 575.98px) {
    .buy-cta__card { padding: 1.25rem; }
    .buy-cta__title { font-size: 1.35rem; }
    .buy-cta__actions, .buy-cta__actions .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Homepage announcement bar (web/partials/popup-box)
   -------------------------------------------------------------------------- */
/* The homepage header is fixed over the top of the slider, so the bar sits
   on the slider just below it. The script beside the bar measures the real
   header; these are its usual heights. */
.notice-bar {
    position: absolute; top: 130px; left: 0; right: 0; z-index: 50;
    background: rgba(255, 247, 237, .97); border-bottom: 1px solid #fed7aa; font-family: var(--pi-font-sans);
}
@media (max-width: 575.98px) { .notice-bar { top: 84px; } }
.notice-bar[hidden] { display: none; }
.notice-bar__inner { display: flex; align-items: center; gap: .75rem; padding-top: .5rem; padding-bottom: .5rem; min-height: 44px; }
.notice-bar__tag {
    flex: none; background: var(--pi-red); color: #fff; font-size: .75rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: .15rem .6rem;
}
.notice-bar__title { flex: 1 1 auto; min-width: 0; color: var(--pi-ink); font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-bar__open {
    flex: none; background: none; border: 1px solid var(--pi-red); color: var(--pi-red); border-radius: 999px;
    font-size: .85rem; font-weight: 600; padding: .2rem .9rem;
}
.notice-bar__open:hover, .notice-bar__open:focus-visible { background: var(--pi-red); color: #fff; }
.notice-bar__close {
    flex: none; background: none; border: 0; color: var(--pi-muted); font-size: 1.5rem; line-height: 1;
    width: 44px; height: 44px; margin: -.5rem -.75rem -.5rem 0; cursor: pointer;
}
.notice-bar__close:hover { color: var(--pi-ink); }
@media (max-width: 575.98px) {
    .notice-bar__title { white-space: normal; font-size: .9rem; }
}

/* ==========================================================================
   Portal shell (web/layouts/portal): slim header, sidebar on wide screens,
   tab bar on phones, short footer. Built from the design tokens.
   ========================================================================== */
.portal-body { background: var(--pi-canvas); }

.portal-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--pi-maroon);
}

.portal-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pi-space-3);
    min-height: 64px;
}

.portal-header__logo img { height: 42px; width: auto; }

.portal-header__actions {
    display: flex;
    align-items: center;
    gap: var(--pi-space-3);
}

.portal-header .portal-header__quote {
    background: var(--pi-white);
    border-color: var(--pi-white);
    color: var(--pi-red);
    font-weight: var(--pi-weight-bold);
}

.portal-header .portal-header__quote:hover { background: var(--pi-red-soft); color: var(--pi-red-dark); }
.portal-header__quote i { margin-right: 6px; }

.portal-header__call {
    color: var(--pi-white);
    font-weight: var(--pi-weight-medium);
    white-space: nowrap;
}

.portal-header__call:hover { color: var(--pi-white); text-decoration: underline; }
.portal-header__call i { margin-right: 6px; }

.portal-header .lang-switch a { color: rgba(255, 255, 255, .8); }
.portal-header .lang-switch a.active { color: var(--pi-white); }

@media (max-width: 767.98px) {
    .portal-header__call span,
    .portal-header__lang { display: none; }
    .portal-header__logo img { height: 34px; }
    .portal-header .account-menu__toggle span { display: none; }
}

@media (max-width: 419.98px) {
    .portal-header__quote span { display: none; }
    .portal-header__quote i { margin-right: 0; }
}

.portal-main {
    padding: var(--pi-space-6) 0 var(--pi-space-10);
    min-height: 60vh;
}

.portal-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--pi-space-6);
    align-items: start;
}

.portal-shell__nav { position: sticky; top: 88px; }

@media (max-width: 991.98px) {
    .portal-shell { grid-template-columns: minmax(0, 1fr); }
    .portal-shell__nav { display: none; }
}

/* Sidebar */
.portal-nav {
    background: var(--pi-surface);
    border: 1px solid var(--pi-line);
    border-radius: var(--pi-radius-md);
    box-shadow: var(--pi-shadow-md);
    overflow: hidden;
}

.portal-nav__who {
    display: flex;
    align-items: center;
    gap: var(--pi-space-3);
    padding: var(--pi-space-4);
    background: var(--pi-maroon);
    color: var(--pi-white);
}

.portal-nav__avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
}

.portal-nav__name { min-width: 0; }
.portal-nav__name strong { display: block; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-nav__name small { color: rgba(255, 255, 255, .75); }

.portal-nav__list { list-style: none; margin: 0; padding: var(--pi-space-2) 0; }

.portal-nav__link {
    display: flex;
    align-items: center;
    gap: var(--pi-space-3);
    padding: 10px var(--pi-space-4);
    color: var(--pi-ink);
    font-weight: var(--pi-weight-medium);
    border-left: 3px solid transparent;
}

.portal-nav__link i { width: 18px; text-align: center; color: var(--pi-muted); }
.portal-nav__link:hover { background: var(--pi-canvas); color: var(--pi-red); }

.portal-nav__link.is-active {
    background: var(--pi-red-soft);
    color: var(--pi-red);
    border-left-color: var(--pi-red);
}

.portal-nav__link.is-active i { color: var(--pi-red); }

.portal-nav__signout {
    display: block;
    padding: var(--pi-space-3) var(--pi-space-4);
    border-top: 1px solid var(--pi-line);
    color: var(--pi-muted);
    font-weight: var(--pi-weight-medium);
}

.portal-nav__signout:hover { color: var(--pi-red); }

/* Phone tab bar */
.portal-tabs { display: none; }

@media (max-width: 991.98px) {
    .portal-tabs {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        background: var(--pi-surface);
        border-top: 1px solid var(--pi-line);
        box-shadow: 0 -2px 12px rgba(16, 24, 40, .06);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .portal-tabs__tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 58px;
        font-size: .72rem;
        font-weight: var(--pi-weight-medium);
        color: var(--pi-muted);
    }

    .portal-tabs__tab i { font-size: 1.15rem; }
    .portal-tabs__tab.is-active { color: var(--pi-red); }

    .portal-tabs__tab--buy i {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        margin-top: -14px;
        border-radius: 50%;
        background: var(--pi-red);
        color: var(--pi-white);
        box-shadow: var(--pi-shadow-md);
        font-size: 1rem;
    }

    .portal-tabs__tab--buy { color: var(--pi-red); }

    /* Content, sticky price bars and floating buttons clear the tab bar. */
    .portal-body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
    .portal-body .ui-price-bar { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }

    html body.portal-body #scrollUp,
    html body.portal-body #prime-assistant .pa-launcher { bottom: 76px !important; }

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

/* Footer */
.portal-footer {
    border-top: 1px solid var(--pi-line);
    background: var(--pi-surface);
    color: var(--pi-muted);
    font-size: var(--pi-fs-sm);
}

.portal-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--pi-space-2) var(--pi-space-6);
    padding: var(--pi-space-5) 0;
}

.portal-footer__links { display: flex; flex-wrap: wrap; gap: var(--pi-space-4); }
.portal-footer a { color: var(--pi-red); font-weight: var(--pi-weight-medium); }