/* ============================================================
   BUILDORA STOREFRONT BRAND LAYER
   Loaded after custom.css — flat navy + emerald, no gradients.
   Header/footer chrome + component polish. Colour tokens live in
   front-end/modern/template.php (--theme-c1..4, --bd-*).
   ============================================================ */

html {
    scrollbar-color: var(--bd-green-500) var(--bd-surface-soft);
    scrollbar-width: thin;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--bd-surface-soft); }
*::-webkit-scrollbar-thumb {
    min-height: 44px;
    border: 2px solid var(--bd-surface-soft);
    border-radius: 999px;
    background: var(--bd-green-500);
}
*::-webkit-scrollbar-thumb:hover { background: var(--bd-green-700); }

/* ── Header shell ─────────────────────────────────────────────────────────── */
.site-header-outer { background: transparent; }

.bd-header-main {
    width: 100%;
    background: var(--bd-navy-800) !important;
    border: 0;
    border-top: 3px solid var(--bd-green-400);
    box-shadow: 0 6px 22px rgba(3, 11, 35, 0.18);
    padding: 0 !important;
}
.bd-header-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    padding: 10px 0;
}
@media (max-width: 991.98px) {
    .bd-header-row { min-height: 60px; gap: 10px; }
}

/* Mobile menu trigger */
.bd-menu-btn {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 22px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}
.bd-menu-btn:hover { background: rgba(255, 255, 255, 0.10); }

/* Logo */
.bd-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none !important;
}
.bd-logo img {
    height: 34px;
    width: auto;
    max-width: 168px;
    object-fit: contain;
}
@media (max-width: 575.98px) {
    .bd-logo img { height: 28px; max-width: 130px; }
}

/* Search pill — the header's centrepiece */
.bd-search {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 560px;
    margin-inline: clamp(16px, 4vw, 48px);
    padding: 0 18px;
    height: 44px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.bd-search:hover {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.24);
}
.bd-search:focus-visible {
    outline: none;
    border-color: var(--bd-green-400);
    box-shadow: 0 0 0 3px rgba(25, 211, 161, 0.22);
}
.bd-search i.uil-search { font-size: 18px; flex-shrink: 0; }
.bd-search-label {
    flex: 1;
    text-align: start;
    font-size: 0.86rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bd-search-key {
    flex-shrink: 0;
    font-family: inherit;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 5px;
    padding: 1px 7px;
}

/* Right-side action cluster */
.bd-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-inline-start: auto;
}
.bd-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 20px;
    text-decoration: none !important;
    transition: background .15s, color .15s;
}
.bd-icon-btn:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
.bd-cart-count {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--bd-green-400);
    color: var(--bd-navy-900);
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}
.bd-cart-count:empty { display: none; }

.bd-signin {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 20px;
    margin-inline-end: 4px;
    border-radius: 999px;
    background: var(--bd-green-500);
    color: var(--bd-navy-900) !important;
    font-weight: 700;
    font-size: 0.86rem;
    text-decoration: none !important;
    transition: background .15s, transform .15s;
}
.bd-signin:hover { background: var(--bd-green-300); transform: translateY(-1px); }

/* Account dropdown */
.bd-account-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 14px 0 10px;
    border-radius: 999px;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 0.86rem;
    font-weight: 600;
    transition: background .15s;
}
.bd-account-btn:hover { background: rgba(255, 255, 255, 0.10); }
.bd-account-btn i.uil-user {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.bd-account-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bd-account-caret { font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.bd-account-menu {
    margin-top: 10px !important;
    min-width: 200px;
    padding: 8px;
    border: 1px solid var(--bd-border);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(3, 11, 35, 0.16);
}
.bd-account-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--bd-ink);
}
.bd-account-menu .dropdown-item i { color: var(--bd-green-600); font-size: 17px; width: 18px; text-align: center; }
.bd-account-menu .dropdown-item:hover,
.bd-account-menu .dropdown-item:focus { background: var(--bd-green-50); color: var(--bd-ink); }
.bd-account-menu .dropdown-divider { margin: 6px 4px; border-color: var(--bd-border); }

/* ── Row 2 — light nav strip ──────────────────────────────────────────────── */
.bd-header-nav {
    background: var(--bd-green-50);
    border-bottom: 1px solid var(--bd-border);
}
@media (min-width: 992px) {
    /* Row 2 sticks on desktop once row 1 scrolls out of view — see the
       scroll listener near the end of header.php. `position: sticky` can't
       be used here: this theme's <body> is a fixed-height flex/overflow
       shell that leaves the *viewport* as the actual scrolling box, which
       breaks sticky's ancestor detection. The spacer keeps content from
       jumping when row 2 is lifted into fixed positioning. */
    .bd-header-nav--stuck {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1029;
        box-shadow: 0 10px 26px rgba(3, 11, 35, 0.14);
    }
    .bd-header-nav-spacer { height: 0; }
}
.bd-header-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
}
.bd-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.bd-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 48px;
    padding: 0 14px;
    color: var(--bd-ink);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: color .15s;
}
.bd-nav a::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--bd-green-500);
    transform: scaleX(0);
    transition: transform .18s ease;
}
.bd-nav a:hover { color: var(--bd-green-700); }
.bd-nav a:hover::after,
.bd-nav a.active::after { transform: scaleX(1); }
.bd-nav a.active { color: var(--bd-green-700); }

.bd-nav-end { display: flex; align-items: center; }
.bd-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--bd-muted) !important;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: .3px;
    text-decoration: none !important;
    text-transform: uppercase;
    transition: background .15s, color .15s;
}
.bd-lang-btn:hover { background: var(--bd-green-50); color: var(--bd-green-700) !important; }
.bd-lang-caret { font-size: 12px; }
.bd-lang-menu { min-width: 190px; padding: 6px; border: 1px solid var(--bd-border); border-radius: 12px; }
.bd-lang-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.85rem;
}
.bd-lang-menu .dropdown-item:hover { background: var(--bd-green-50); }
.bd-lang-code { font-weight: 800; color: var(--bd-green-700); width: 26px; }

/* ── Mobile search row ────────────────────────────────────────────────────── */
.bd-mobile-search { padding: 10px 16px; background: var(--bd-surface); border-bottom: 1px solid var(--bd-border); }

/* select2 hides the native <select> it progressively-enhances via
   .select2-hidden-accessible (clip-to-nothing + width:1px, all !important)
   — but the vendor's mobile search widget also stamps a literal `w-100`
   class on that same <select>, and Bootstrap's `.w-100{width:100%
   !important}` has equal specificity+importance and happens to load
   later, so it wins the width battle. The element stays invisible (still
   clipped) but its layout box balloons to full viewport width while
   absolutely positioned — nothing visible on screen, yet it still forces
   ~16px of horizontal overflow on every ancestor up to <body>, which is
   what read as a whole-page rightward "shift" on RTL mobile. Re-assert
   with higher specificity (both classes) so nothing can outrank it. */
.select2-hidden-accessible.w-100 {
    width: 1px !important;
}

/* ── Mobile drawer ────────────────────────────────────────────────────────── */
.bd-drawer {
    background: var(--bd-navy-800) !important;
    color: #fff;
    --bs-offcanvas-width: min(86vw, 380px);
    /* custom.css bumps the CART offcanvas above floating page buttons via
       #offcanvas-cart{z-index:100001}, but its .offcanvas-backdrop{z-index:
       100000} rule is unscoped — Bootstrap reuses that one backdrop class
       for whichever offcanvas is open, so it also sat above THIS drawer
       (Bootstrap default z:1045), rendering as a washed-out gray film over
       the whole menu. Clear it above the shared backdrop too. */
    z-index: 100002 !important;
}
.bd-drawer .offcanvas-header {
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
/* .bd-drawer deliberately reuses .navbar-collapse (see header.php comment)
   so Bootstrap's offcanvas JS finds it, but that class carries a rule
   meant for the DESKTOP horizontal bar — align-items:center, to vertically
   center nav items in a shallow row. Here it becomes the CROSS-axis of a
   *vertical* column flex (.offcanvas is flex-direction:column), so the
   header and body shrank to their content's width and centered instead of
   stretching — nav links, language chips, and the sign-in/sign-up buttons
   all floated as a narrow column with big empty gutters on both sides.
   That was the "crushed in the center" look. */
.bd-drawer.navbar-collapse {
    align-items: stretch !important;
}
.bd-drawer-logo img { height: 28px; width: auto; }
.bd-drawer .btn-close { opacity: .8; }

.bd-drawer-nav { list-style: none; margin: 0; padding: 10px 10px 0; }
.bd-drawer-nav--sub { padding-top: 4px; }
.bd-drawer-nav li + li { margin-top: 2px; }
.bd-drawer-nav a {
    display: block;
    padding: 11px 12px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.86);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none !important;
}
.bd-drawer-nav a:hover,
.bd-drawer-nav a.active { background: rgba(255, 255, 255, 0.08); color: #fff; }

.bd-drawer-label {
    margin: 18px 12px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: center;
    gap: 6px;
}
.bd-lang-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px; }
.bd-lang-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-decoration: none !important;
    border: 1.5px solid rgba(255, 255, 255, 0.20);
    color: rgba(255, 255, 255, 0.75);
    transition: background .15s, border-color .15s, color .15s;
}
.bd-lang-chip:hover { border-color: rgba(255, 255, 255, 0.40); color: #fff; }
.bd-lang-chip.is-active { background: var(--bd-green-500); border-color: var(--bd-green-500); color: var(--bd-navy-900); }

.bd-drawer-auth { display: flex; flex-direction: column; gap: 10px; padding: 4px 12px 20px; }
.bd-btn-solid,
.bd-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none !important;
    transition: background .15s, color .15s, border-color .15s;
}
.bd-btn-solid { background: var(--bd-green-500); color: var(--bd-navy-900) !important; }
.bd-btn-solid:hover { background: var(--bd-green-300); }
.bd-btn-ghost { border: 1.5px solid rgba(255, 255, 255, 0.30); color: #fff !important; }
.bd-btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.55); }

/* No .bd-rtl overrides needed: the storefront sets a real `direction: rtl`
   on <body> in Arabic, so the logical properties used throughout this file
   (margin-inline-*, text-align: start, etc.) already flip correctly. */

/* ── Small screens ────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .bd-header-main { border-top-width: 2px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.bf-footer {
    background: var(--bd-navy-800);
    color: rgba(255, 255, 255, 0.88);
    margin-top: 64px;
    position: relative;
}
/* Top edge echoes the logo mark's angular roofline chevron (long shallow
   rise, short sharp drop) instead of the flat green rule this replaces.
   Two earlier attempts both faked this with a CSS background-image tile:
   first as two overlapping filled shapes (pinched to zero width at every
   valley instead of reading as one continuous outline), then as a tiled
   SVG stroke (fixed the width, but every tile *repeat* is an independent
   stroke instance — at each valley, which always lands on a tile
   boundary, two separately-capped strokes meet instead of joining as one
   vertex, showing as a phantom extra facet). A real inline <svg> with
   ONE continuous path fixes both: every vertex, peak or valley, is a
   genuine stroke-linejoin. `preserveAspectRatio="none"` stretches the
   fixed 7-tooth viewBox to fill any width (tooth count stays constant
   rather than re-tiling); `vector-effect="non-scaling-stroke"` on the
   stroke keeps its width uniform even though that stretch is
   non-uniform (X and Y scale differently). See footer.php for the
   markup — this block just positions/sizes it. */
.bf-ridge {
    position: absolute;
    top: -44px;
    left: 0;
    width: 100%;
    /* Element is taller than the visible peak-to-baseline span (44px):
       the extra 4px (half the 8px stroke width) is bottom headroom so the
       stroke isn't clipped right at each valley's point — without it, the
       two converging edges get sliced before they finish meeting, which
       reads as a flat little dash instead of a clean "v". `top` stays at
       -44 (unchanged) since that's what keeps the baseline itself flush
       with the footer's edge; only `height` grows to reveal the headroom
       already built into the SVG's viewBox (see footer.php). */
    height: 48px;
    display: block;
    pointer-events: none;
}
@media (max-width: 600px) {
    /* Same viewBox (0 0 700 48), just rendered smaller — top isn't simply
       -height here like on desktop, because desktop's numbers only lined
       up that way by coincidence (css height was set equal to the
       viewBox's own unit count, so nothing was actually being rescaled).
       At a different height the valley (local y=44 of 48) needs its own
       proportional offset to still land exactly on the footer edge:
       -(44/48 × 24) = -22. */
    .bf-ridge { top: -22px; height: 24px; }
    .bf-ridge path[stroke] { stroke-width: 4; }
}
.bf-row { padding: 56px 0 40px; }

/* Brand column */
.bf-brand-col { margin-bottom: 36px; }
.bf-logo { display: inline-block; text-decoration: none; margin-bottom: 16px; }
.bf-logo img { max-height: 38px; width: auto; object-fit: contain; }
.bf-about-text {
    max-width: 340px;
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.84rem;
    line-height: 1.75;
}
.bf-socials { display: flex; flex-wrap: wrap; gap: 8px; }
.bf-soc {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.bf-soc:hover { background: var(--bd-green-600); border-color: var(--bd-green-600); color: #fff; }

/* Link / contact columns */
.bf-col { margin-bottom: 32px; }
.bf-col-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.bf-col-title::before {
    content: '';
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    background: var(--bd-green-400);
    border-radius: 2px;
}
.bf-links { list-style: none; margin: 0; padding: 0; }
.bf-links li + li { margin-top: 11px; }
.bf-links a {
    color: rgba(255, 255, 255, 0.68);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color .15s;
}
.bf-links a:hover { color: var(--bd-green-400); }

.bf-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: 0.85rem;
    line-height: 1.5;
    transition: color .15s;
}
.bf-contact-row + .bf-contact-row { margin-top: 14px; }
.bf-contact-row i { color: var(--bd-green-400); font-size: 17px; flex-shrink: 0; margin-top: 1px; }
a.bf-contact-row:hover { color: #fff; }
.bf-contact-row--static { color: rgba(255, 255, 255, 0.62); }

/* Bottom bar */
.bf-bottom { border-top: 1px solid rgba(255, 255, 255, 0.10); padding: 16px 0; }
.bf-bottom-row { text-align: center; }
.bf-bottom-copy { margin: 0; color: rgba(255, 255, 255, 0.55); font-size: 0.76rem; }

@media (min-width: 992px) {
    .bf-brand-col,
    .bf-col { margin-bottom: 0; }
    .bf-bottom-row { text-align: start; }
}

/* ============================================================
   MY ACCOUNT — ADDRESSES (list + modal forms)
   ============================================================ */
.bd-addr-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.bd-addr-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--bd-green-600);
    color: #fff;
    font-weight: 700;
    font-size: 0.86rem;
    transition: background .15s;
}
.bd-addr-add-btn:hover { background: var(--bd-green-700); color: #fff; }
.bd-addr-add-btn i { font-size: 18px; }

.bd-addr-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.bd-addr-loading,
.bd-addr-empty {
    grid-column: 1 / -1;
    padding: 40px 20px;
    text-align: center;
    color: var(--bd-muted);
    background: var(--bd-surface-soft);
    border: 1px dashed var(--bd-border);
    border-radius: 14px;
    font-size: 0.9rem;
}

.bd-addr-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    background: var(--bd-surface);
    border: 1px solid var(--bd-border);
    border-radius: 14px;
    transition: border-color .15s, box-shadow .15s;
}
.bd-addr-card:hover { border-color: var(--bd-green-400); box-shadow: 0 8px 22px rgba(6, 19, 52, 0.06); }

.bd-addr-card-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.bd-addr-name { font-weight: 700; color: var(--bd-ink); font-size: 0.95rem; }
.bd-addr-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--bd-surface-soft);
    border: 1px solid var(--bd-border);
    color: var(--bd-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.bd-addr-badge--default {
    background: var(--bd-green-50);
    border-color: var(--bd-green-400);
    color: var(--bd-green-700);
}
.bd-addr-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 6px;
    color: var(--bd-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}
.bd-addr-line:last-child { margin-bottom: 0; }
.bd-addr-line i { color: var(--bd-green-600); font-size: 15px; margin-top: 2px; flex-shrink: 0; }

.bd-addr-card-actions {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--bd-border);
}
.bd-addr-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--bd-border);
    border-radius: 9px;
    background: var(--bd-surface);
    color: var(--bd-muted);
    font-size: 15px;
    transition: background .15s, border-color .15s, color .15s;
}
.bd-addr-action:hover { background: var(--bd-green-50); border-color: var(--bd-green-400); color: var(--bd-green-700); }
.bd-addr-action.delete-address:hover { background: #fdecec; border-color: #e8a6a6; color: #b3261e; }

/* Edit-address modal city field spacing (pre-existing, kept from the old inline style) */
.edit_city > span { margin-top: 12px; }

/* ============================================================
   CONFIRMATION DIALOGS (SweetAlert2) + BOOTSTRAP MODALS
   Covers Toast, showConfirmationModal(), and direct Swal.fire()
   calls used across the storefront (logout, delete account,
   delete address, cancel order, etc).
   ============================================================ */
.swal2-popup {
    background: var(--bd-surface) !important;
    border: 1px solid var(--bd-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 60px rgba(6, 19, 52, 0.22), 0 8px 22px rgba(6, 19, 52, 0.10) !important;
    max-width: min(430px, calc(100vw - 28px)) !important;
    padding: 1.6rem !important;
}
.swal2-title { color: var(--bd-ink) !important; font-size: 1.5rem !important; font-weight: 700 !important; }
.swal2-html-container,
.swal2-content { color: var(--bd-muted) !important; }
/* Resize the icon via font-size only, and never in toast mode: the X/✓
   are separate em-positioned stroke elements tuned to the icon box, so
   forcing width/height alone shears the drawing apart (mangled toast
   icons), while font-size scales the whole drawing proportionally. */
.swal2-popup:not(.swal2-toast) .swal2-icon {
    font-size: 0.85rem !important;
    margin: 0.6rem auto 1rem !important;
}
.swal2-actions { gap: 0.6rem !important; }
.swal2-styled { border-radius: 10px !important; box-shadow: none !important; min-width: 104px; padding: 0.65rem 1.2rem !important; font-weight: 700 !important; }
.swal2-confirm {
    background: var(--bd-green-600) !important;
    border: 1px solid var(--bd-green-600) !important;
}
.swal2-confirm:hover,
.swal2-confirm:focus {
    background: var(--bd-green-700) !important;
    border-color: var(--bd-green-700) !important;
    box-shadow: 0 0 0 3px rgba(10, 131, 103, 0.18) !important;
}
.swal2-cancel {
    background: var(--bd-surface) !important;
    border: 1px solid var(--bd-navy-800) !important;
    color: var(--bd-navy-800) !important;
}
.swal2-cancel:hover,
.swal2-cancel:focus {
    background: var(--bd-surface-soft) !important;
    box-shadow: none !important;
}
.swal2-deny { background: #dc3545 !important; border: 1px solid #dc3545 !important; }
.swal2-timer-progress-bar { background: var(--bd-green-500) !important; }

.swal2-popup.swal2-toast { border-radius: 12px !important; padding: 0.7rem 1rem !important; }
.swal2-popup.swal2-toast .swal2-title { font-size: 0.92rem !important; }

/* Bootstrap modal chrome, kept consistent with the dialog treatment above */
.modal-backdrop.show { background: var(--bd-navy-900); opacity: 0.62; }
.modal-content { border: 1px solid var(--bd-border); border-radius: 16px; box-shadow: 0 24px 60px rgba(6, 19, 52, 0.20); overflow: hidden; }
.modal-header { background: var(--bd-green-50); border-bottom: 1px solid var(--bd-border); }
.modal-title { color: var(--bd-ink); }

/* ============================================================
   PRODUCT CARDS
   Vendor default: flat grey circles, a full-bleed near-black
   "Add to Cart" bar, no card-level hover feedback at all. Redesigned,
   not just recoloured: the card lifts on hover, the image gets a soft
   zoom, the action circles get their own evenly-spaced column with a
   pop-in stagger, and the cart action is an inset rounded pill instead
   of a flush bar. (The compare feature was removed from the product
   entirely — like + quick-view are the only circles left.)
   ============================================================ */
.item,
.swiper-slide {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.item:hover,
.swiper-slide:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 34px rgba(6, 19, 52, 0.14);
    border-radius: 10px;
}
.item figure,
.swiper-slide figure {
    border-radius: 10px;
}
.item figure .fig_image,
.swiper-slide figure .fig_image {
    transition: transform 0.4s ease;
}
.item:hover figure .fig_image,
.swiper-slide:hover figure .fig_image {
    transform: scale(1.05);
}

/* Sale badge — vendor default is bare text with zero padding/radius (the
   box is only as big as "SALE" itself, so it reads as a cramped rectangle).
   Rebuilt as a proper rounded chip with breathing room. Kept on a fixed
   physical left (matches the vendor's own convention, and this storefront's
   `dir` follows a separate language cookie independent of whether the
   product data itself is translated — logical inset-inline-start flipped
   this to the right on an English-text page that still had dir="rtl"
   underneath, which read as broken, not "mirrored"; physical left is what
   actually stays put). Selector list matches the vendor's own `.sale_tag`
   rules (not just `!important`) so this still loses gracefully to their
   existing `figure:hover .sale_tag` shadow-color shift on card hover — the
   resting ring below is layered on top of that same rule, at rest only. */
.sale_tag,
figure .sale_tag,
.product-grid .sale_tag {
    left: 0.85rem;
    right: auto;
    padding: 0.32rem 0.9rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.3;
    box-shadow: 0 6px 16px rgba(var(--theme-c2-rgb), 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    z-index: 2;
}
@media (max-width: 600px) {
    .sale_tag {
        left: 0.4rem !important;
        right: auto !important;
    }
}

/* Action circles — like / quick-view, each on its own row */
.item figure .item-like,
.item figure .item-view,
.swiper-slide figure .item-like,
.swiper-slide figure .item-view {
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    background: var(--bd-surface);
    border: 1px solid var(--bd-border);
    color: var(--bd-navy-800);
    box-shadow: 0 8px 18px rgba(6, 19, 52, 0.16);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.25s ease, right 0.25s ease;
}
.item figure .item-like,
.swiper-slide figure .item-like { top: 1rem; }
.item figure .item-view,
.swiper-slide figure .item-view { top: 4rem; }
.item figure .item-view,
.swiper-slide figure .item-view { transition-delay: 0.03s; }

.item figure .item-like:hover,
.item figure .item-view:hover,
.swiper-slide figure .item-like:hover,
.swiper-slide figure .item-view:hover {
    background: var(--bd-green-600);
    border-color: var(--bd-green-600);
    color: #fff;
    transform: scale(1.08);
}
.item figure .item-like.active,
.swiper-slide figure .item-like.active {
    background: var(--bd-green-600);
    border-color: var(--bd-green-600);
    color: #fff;
}

/* Add to Cart — inset rounded pill, not a flush full-width bar */
.item figure .item-cart,
.swiper-slide figure .item-cart {
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    bottom: -3rem;
    border-radius: 999px;
    padding: 0.7rem 1rem;
    background: var(--bd-navy-800);
    box-shadow: 0 10px 24px rgba(6, 19, 52, 0.24);
}
.item:hover figure .item-cart,
.swiper-slide:hover figure .item-cart {
    bottom: 0.75rem;
}
.item figure .item-cart:hover,
.swiper-slide figure .item-cart:hover {
    background: var(--bd-green-600);
}

/* ============================================================
   QUICK VIEW (product modal, #quick-view via iziModal)
   Vendor look was old-theme leftovers: yellow Add to Cart, pink
   Buy Now, red outline heart, red seller/brand links. Re-laned:
   green = primary action, navy = strong secondary, quiet bordered
   circle for the wishlist toggle. The struck-through old price
   keeps its semantic red.
   ============================================================ */
.iziModal {
    border-radius: 16px !important;
    box-shadow: 0 24px 60px rgba(6, 19, 52, 0.28) !important;
    overflow: hidden;
}
#quick-view .icon-close {
    background: var(--bd-surface) !important;
    border: 1px solid var(--bd-border) !important;
    box-shadow: 0 4px 12px rgba(6, 19, 52, 0.10);
    transition: background 0.2s ease, border-color 0.2s ease;
}
#quick-view .icon-close:hover {
    background: var(--bd-green-50) !important;
    border-color: var(--bd-green-500) !important;
}
#quick-view .product-title {
    color: var(--bd-ink);
    font-weight: 700;
}
/* Seller / brand links come in from JS with text-danger — re-lane to the
   brand green. The struck old price (.striped-price) stays red. */
#quick-view a.text-danger,
#quick-view #modal-product-brand .text-danger {
    color: var(--bd-green-700) !important;
    font-weight: 600;
}
#quick-view a.text-danger:hover { color: var(--bd-green-600) !important; }
#quick-view .badge-success {
    background: var(--bd-green-600) !important;
    border-radius: 6px;
}
#quick-view hr { border-top-color: var(--bd-border); opacity: 1; }
#quick-view .price #modal-product-price {
    color: var(--bd-ink);
    font-size: 1.45rem;
    font-weight: 700;
}

/* Quantity stepper */
#quick-view .num-in {
    max-width: 150px;
    border: 1px solid var(--bd-border) !important;
    border-radius: 999px;
    background: var(--bd-surface);
    box-shadow: none;
}
#quick-view .num-in span.minus,
#quick-view .num-in span.plus {
    border-radius: 999px;
    transition: background 0.15s ease;
}
#quick-view .num-in span.minus:hover,
#quick-view .num-in span.plus:hover { background: var(--bd-green-50); }
#quick-view .num-in .in-num { color: var(--bd-ink); font-weight: 700; }

/* Action row */
#quick-view #modal-add-to-cart-button {
    background: var(--bd-green-600) !important;
    border: 1px solid var(--bd-green-600) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: none !important;
    transition: background 0.2s ease, border-color 0.2s ease;
}
#quick-view #modal-add-to-cart-button:hover,
#quick-view #modal-add-to-cart-button:focus {
    background: var(--bd-green-700) !important;
    border-color: var(--bd-green-700) !important;
}
#quick-view #modal-buy-now-button {
    background: var(--bd-navy-800) !important;
    border: 1px solid var(--bd-navy-800) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: none !important;
    transition: background 0.2s ease, border-color 0.2s ease;
}
#quick-view #modal-buy-now-button:hover,
#quick-view #modal-buy-now-button:focus {
    background: var(--bd-navy-700) !important;
    border-color: var(--bd-navy-700) !important;
}
#quick-view #modal-buy-now-button.disabled {
    background: var(--bd-navy-800) !important;
    opacity: 0.45;
}
#quick-view #add_to_favorite_btn {
    background: var(--bd-surface) !important;
    border: 1px solid var(--bd-border) !important;
    color: var(--bd-navy-800) !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
#quick-view #add_to_favorite_btn:hover {
    border-color: var(--bd-green-500) !important;
    color: var(--bd-green-600) !important;
}
/* remove-fav = product is already in the wishlist */
#quick-view #add_to_favorite_btn.remove-fav {
    background: var(--bd-green-600) !important;
    border-color: var(--bd-green-600) !important;
    color: #fff !important;
}

/* Tag chips (JS-injected .badge-secondary) */
#quick-view #modal-product-tags .badge {
    background: var(--bd-green-50) !important;
    color: var(--bd-green-700) !important;
    border: 1px solid var(--bd-green-100);
    border-radius: 999px;
    font-weight: 600;
    padding: 0.35em 0.75em !important;
}

/* ── FAQ page illustration ──────────────────────────────────────────────────
   Stock isometric illustration ships blue by default (faq2.webp — a raster
   image, not SVG/Lottie, so it can't be recoloured shape-by-shape). A hue
   rotation shifts its dominant blue onto the brand green while leaving the
   whites/near-blacks/light-grey clouds essentially untouched (hue-rotate
   only affects saturated colour, not near-neutral tones). */
.faq-img {
    filter: hue-rotate(-61deg) saturate(1.05);
}

/* ── Empty state (no products / no favourites) ──────────────────────────────
   Was just a bare heading + a leftover orange button floating in a lot of
   blank space. Card treatment with a Lottie above the heading (green
   palette — assets/No file found.json, already brand-toned, reused from
   the 404 page) and a real subtitle line, matching the product-card /
   auth-card visual language elsewhere. */
.bd-empty-state {
    max-width: 440px;
    margin: 24px auto 40px;
    padding: 48px 32px;
    text-align: center;
    background: var(--bd-surface);
    border: 1px solid var(--bd-border);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(6, 19, 52, 0.06);
}
.bd-empty-state-lottie {
    width: 200px;
    height: 200px;
    margin: 0 auto 4px;
}
.bd-empty-state-title {
    color: var(--bd-ink);
    font-weight: 700;
    font-size: 1.35rem;
    margin: 0 0 8px;
}
.bd-empty-state-text {
    color: var(--bd-muted);
    font-size: 0.92rem;
    line-height: 1.6;
    max-width: 320px;
    margin: 0 auto 24px;
}
.bd-empty-state-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 999px;
    background: var(--bd-green-600);
    color: #fff !important;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none !important;
    transition: background 0.2s ease, transform 0.2s ease;
}
.bd-empty-state-btn:hover {
    background: var(--bd-green-700);
    transform: translateY(-2px);
}
.bd-empty-state-btn i { font-size: 1.05rem; }

/* ── Product detail page — action buttons, wishlist, seller/brand links,
   tags. Same off-brand vendor colours already fixed in the quick-view
   modal (yellow cart / pink buy-now / red wishlist+links) reappear here
   because this is the full standalone page, not the modal — same fix,
   scoped to this page's own selectors. .btn-danger/.btn-outline-red/
   .text-danger are also used elsewhere sitewide for genuinely semantic
   red (delete actions, error text, the struck-through old price), so
   these are scoped by ID or compound selector — never the bare vendor
   class — to avoid recolouring anything unrelated. .btn-yellow is safe
   as a blanket rule: it's only ever used for cart CTAs (checked — 2
   occurrences sitewide, both this kind of button). */
.btn-yellow {
    background: var(--bd-green-600) !important;
    border-color: var(--bd-green-600) !important;
    color: #fff !important;
}
.btn-yellow:hover,
.btn-yellow:focus {
    background: var(--bd-green-700) !important;
    border-color: var(--bd-green-700) !important;
}
#buy_now.btn-danger {
    background: var(--bd-navy-800) !important;
    border-color: var(--bd-navy-800) !important;
    color: #fff !important;
}
#buy_now.btn-danger:hover,
#buy_now.btn-danger:focus {
    background: var(--bd-navy-700) !important;
    border-color: var(--bd-navy-700) !important;
}
.item-like.btn-outline-red {
    background: var(--bd-surface);
    border-color: var(--bd-border) !important;
    color: var(--bd-navy-800) !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.item-like.btn-outline-red:hover {
    border-color: var(--bd-green-500) !important;
    color: var(--bd-green-600) !important;
}
/* Favourited state — vendor markup adds .text-danger (red heart) on top
   of the same classes; solid green fill instead, matching the quick-view
   modal's .remove-fav treatment. */
.item-like.btn-outline-red.text-danger {
    background: var(--bd-green-600) !important;
    border-color: var(--bd-green-600) !important;
    color: #fff !important;
}
.bd-seller-info a.text-danger {
    color: var(--bd-green-700) !important;
    font-weight: 600;
}
.bd-seller-info a.text-danger:hover { color: var(--bd-green-600) !important; }
.bd-product-tags .badge-secondary {
    background: var(--bd-green-50) !important;
    color: var(--bd-green-700) !important;
    border: 1px solid var(--bd-green-100);
    font-weight: 600;
}

/* ── File inputs — every plain "Choose File" button on the storefront ─────
   Same fix as assets/admin/custom/buildora-brand.css: restyle the native
   ::file-selector-button pseudo-element so any <input type="file"> that
   *isn't* using the custom hidden-input+button pattern (see
   pages/profile.php's #profile_image_btn) still picks up the brand look
   automatically, no markup changes needed. Button label text is native
   browser UI and can't be reliably overridden via CSS. */
input[type="file"] {
    color: var(--bd-muted);
    height: auto;
    padding: 0.4rem 0.6rem;
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    background: var(--bd-green-600);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    margin-inline-end: 0.85rem;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s ease;
}
input[type="file"]:hover::file-selector-button,
input[type="file"]:hover::-webkit-file-upload-button {
    background: var(--bd-green-700);
}
input[type="file"]:disabled::file-selector-button,
input[type="file"]:disabled::-webkit-file-upload-button {
    background: var(--bd-muted);
    cursor: not-allowed;
}

/* Storefront bug-fix overrides ported from the sibling storefront. */
#quick-view.iziModal {
    z-index: 1035 !important;
}

.related-products .swiper,
.related-products .swiper-container,
.mySwiper,
.mySwiper4 {
    padding-bottom: 34px;
}

.pagination {
    box-shadow: none !important;
}

.pagination .page-item.active .page-link,
.pagination .page-item.active .page-link:hover,
.pagination .page-item.active .page-link:focus {
    color: #fff !important;
}

#cart-item-sidebar a:hover {
    text-decoration: none !important;
}

.product-grid .product-content,
.post-header {
    padding-inline: 0.35rem;
}

.bd-not-found {
    padding: 64px 0 84px;
}

.bd-not-found__inner {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.bd-not-found__art {
    max-width: 420px;
    margin: 0 auto 16px;
}

.bd-not-found__art svg {
    display: block;
    width: 100%;
    height: auto;
}

.bd-not-found__code {
    margin: 0 0 8px;
    color: var(--bd-green-700);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.bd-not-found h1 {
    margin: 0 0 12px;
    color: var(--bd-ink);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
}

.bd-not-found p:not(.bd-not-found__code) {
    max-width: 480px;
    margin: 0 auto 26px;
    color: var(--bd-muted);
    line-height: 1.7;
}

.bd-not-found__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.swal2-container {
    z-index: 20020 !important;
}

.modal-backdrop {
    z-index: 20000 !important;
}

.modal {
    z-index: 20010 !important;
}

.bd-cart-sidebar-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    padding: 16px 4px 4px;
    border-top: 1px solid var(--bd-border);
    color: var(--bd-ink);
    font-weight: 700;
}

.bd-cart-sidebar-total strong {
    color: var(--bd-green-700);
}

.swiper-slide-category .brand_image_div,
.category-section .category-image {
    min-height: 160px;
}

.swiper-slide-category .brand_image_div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 100%;
}

.swiper-slide-category .brand_image_div img,
.category-image-container img {
    width: 112px;
    height: 112px;
    object-fit: contain;
}

.swiper-slide-category .brand_image_div h6,
.category-section .category-image span {
    min-height: 2.7em;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.35;
}

section.slider .homeSlider {
    aspect-ratio: 1120 / 570;
    border-radius: 1rem 1rem 0 0;
}

section.slider .homeSlider,
section.slider .homeSlider .swiper-wrapper,
section.slider .homeSlider .swiper-slide,
section.slider .homeSlider picture,
section.slider .homeSlider .swiper-slide > a {
    line-height: 0;
}

section.slider .homeSlider .swiper-wrapper {
    padding: 0 !important;
    align-items: stretch;
    height: 100%;
}

section.slider .homeSlider .swiper-slide {
    overflow: hidden;
    background: transparent;
    height: 100%;
}

section.slider .homeSlider picture,
section.slider .homeSlider .swiper-slide > a {
    display: block;
    width: 100%;
    height: 100%;
}

section.slider .homeSlider .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 1rem 1rem 0 0 !important;
    object-fit: cover;
    max-width: none;
    max-height: none;
    transform: none !important;
    transition: none !important;
}

section.slider .homeSlider:hover .swiper-slide img {
    transform: none !important;
}

section.slider .homeSlider .my-prev-button,
section.slider .homeSlider .my-next-button {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

section.slider .homeSlider .my-prev-button img,
section.slider .homeSlider .my-next-button img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    max-width: 42px;
    max-height: 42px;
}

.seller-list-card {
    padding: 24px;
}

.seller-list-card-row {
    display: grid !important;
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
    align-items: center !important;
    gap: 24px !important;
}

.seller-list-card-row > .col-md-3,
.seller-list-card-row > .col-md-9 {
    width: auto;
    max-width: none;
    padding-inline: 0;
}

.seller-list-card .product-image,
.seller-list-card .product-image-container {
    height: 100%;
}

.seller-list-card .product-list-image {
    width: 100%;
    height: 180px;
    object-fit: contain;
}

.seller-list-card .product-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-height: 180px;
    padding-block: 4px;
}

.seller-list-card .view-products {
    margin-top: 18px !important;
    margin-bottom: 6px;
}

.seller-grid-card {
    height: 100%;
}

.seller-grid-card .product-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 150px;
    padding: 0 16px 16px;
    text-align: left;
}

.seller-grid-card .view-products {
    margin-top: auto;
}

.seller-rating-left {
    text-align: left;
}

.bd-address-type-field > .control-label,
.bd-address-type-field > .form-check-label {
    display: block;
    margin-bottom: 8px;
}

.bd-address-type-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.bd-address-type-options .form-check {
    margin-bottom: 0;
}

.process-wrapper.line {
    gap: 18px;
    min-width: max-content;
}

.process-wrapper.line > [class*="col-"] {
    position: relative;
    flex: 0 0 150px;
    max-width: 150px;
    text-align: center;
}

.process-wrapper.line > [class*="col-"]:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 22px;
    left: calc(50% + 24px);
    width: calc(100% - 30px);
    height: 2px;
    background: var(--bd-border);
}

.process-wrapper.line > .active:not(:last-child)::after {
    background: var(--bd-green-500);
}

.process-wrapper.line h5,
.process-wrapper.line p {
    white-space: normal !important;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.bd-reset-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    background: #f6f8fb;
}

.bd-reset-card {
    width: min(100%, 460px);
    padding: 32px;
    border: 1px solid var(--bd-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

.bd-reset-card h1 {
    margin-bottom: 18px;
    color: var(--bd-ink);
    font-size: 1.65rem;
    font-weight: 800;
}

.bd-reset-message {
    margin-bottom: 16px;
    color: var(--bd-muted);
}

.bd-reset-field {
    margin-bottom: 16px;
}

.bd-reset-field label {
    display: block;
    margin-bottom: 8px;
    color: var(--bd-ink);
    font-weight: 600;
}

.bd-reset-field input {
    width: 100%;
    min-height: 44px;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--bd-border);
    border-radius: 6px;
}

.bd-reset-submit {
    width: 100%;
    min-height: 44px;
    border: 0;
    border-radius: 999px;
    background: var(--bd-green-600);
    color: #fff;
    font-weight: 700;
}

.bd-reset-submit:hover,
.bd-reset-submit:focus {
    background: var(--bd-green-700);
}

#modal-signup_v2 .signup-feedback {
    display: none;
    width: 100%;
    margin: 18px auto 0;
    padding: 13px 16px !important;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: start !important;
}

#modal-signup_v2 .signup-feedback:not(:empty) {
    display: block;
}

#modal-signup_v2 .signup-feedback::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-inline-end: 9px;
    border-radius: 999px;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    vertical-align: top;
}

#modal-signup_v2 .signup-feedback.is-error {
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #b42318;
}

#modal-signup_v2 .signup-feedback.is-error::before {
    content: "!";
    background: #dc2626;
}

#modal-signup_v2 .signup-feedback.is-info {
    border: 1px solid #bae6fd;
    background: #eff8ff;
    color: #075985;
}

#modal-signup_v2 .signup-feedback.is-info::before {
    content: "i";
    background: #0284c7;
}

#modal-signup_v2 .signup-feedback.is-success {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

#modal-signup_v2 .signup-feedback.is-success::before {
    content: "\2713";
    background: #16a34a;
}

#modal-signup_v2 #signup_verify_form .form-floating {
    margin-bottom: 24px;
}

#modal-signup_v2 .signup-otp-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
}

#modal-signup_v2 .signup-otp-actions-secondary {
    margin-bottom: 16px;
}

#modal-signup_v2 .signup-otp-actions-primary {
    margin: 0;
}

#modal-signup_v2 .signup-otp-actions .btn {
    white-space: nowrap;
}

#modal-signup_v2 .signup-text-action {
    border: 0;
    background: transparent;
    color: var(--bd-green-700);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.4;
    padding: 4px 2px;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}

#modal-signup_v2 .signup-text-action:hover,
#modal-signup_v2 .signup-text-action:focus {
    color: var(--bd-green-600);
}

#modal-signup_v2 .signup-text-action:disabled {
    color: #8a94a6;
    cursor: not-allowed;
    opacity: 0.85;
    text-decoration: none;
}

@media (max-width: 420px) {
    #modal-signup_v2 .signup-otp-actions {
        gap: 10px;
        flex-wrap: wrap;
    }
}

@media (max-width: 767.98px) {
    .seller-list-card {
        padding: 18px;
    }

    .seller-list-card-row {
        grid-template-columns: 1fr;
        gap: 16px !important;
    }

    .seller-list-card .product-list-image {
        height: 150px;
    }

    .seller-list-card .product-content {
        min-height: auto;
    }

    .seller-list-card .view-products {
        margin-bottom: 0;
    }

    .seller-grid-card .product-content {
        min-height: 170px;
        padding: 0 12px 14px;
    }
}