/* ==========================================================================
   Boi Bazar theme — foundation (tokens, base type, shared primitives).
   Loaded after every legacy stylesheet. Area styles live in bb-layout.css,
   bb-cards.css, bb-details.css, bb-checkout.css and bb-account.css.
   Palette comes from the logo: bottle-green field + crimson "sun", with a
   sparing marigold accent.
   ========================================================================== */

:root {
    --bb-green-900: #04321F;
    --bb-green-800: #064A2E;
    --bb-green-700: #07603A;
    --bb-green-600: #0A7A45;
    --bb-green-500: #11924F;
    --bb-green-100: #DDEFE4;
    --bb-green-50: #EFF6F1;

    --bb-red-700: #9A0F1E;
    --bb-red-600: #C0142B;
    --bb-red-500: #E23445;
    --bb-red-50: #FDECEE;

    --bb-gold-500: #F2B33D;
    --bb-gold-600: #D48A0C;
    --bb-gold-50: #FFF5DF;

    --bb-ink: #17241D;
    --bb-ink-2: #4A5A51;
    --bb-ink-3: #76857C;
    --bb-line: #E1E8E3;
    --bb-paper: #F5F8F6;
    --bb-white: #FFFFFF;

    --bb-grad-field: linear-gradient(135deg, #0A7A45 0%, #07603A 45%, #04321F 100%);
    --bb-grad-sun: linear-gradient(135deg, #E23445 0%, #C0142B 55%, #9A0F1E 100%);
    --bb-grad-gold: linear-gradient(135deg, #FFD36B 0%, #F2B33D 50%, #D48A0C 100%);
    --bb-grad-shelf: linear-gradient(180deg, #F4F9F6 0%, #E4F1E8 100%);

    --bb-font-ui: "Anek Bangla", "Hind Siliguri", "Noto Sans Bengali", "Nirmala UI", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bb-font-book: "Noto Serif Bengali", "Tiro Bangla", "Noto Sans Bengali", Georgia, serif;

    --bb-r-xs: 6px;
    --bb-r-sm: 10px;
    --bb-r-md: 14px;
    --bb-r-lg: 22px;
    --bb-r-pill: 999px;
    --bb-r-book: 3px 7px 7px 3px;

    --bb-shadow-1: 0 1px 2px rgba(4, 50, 31, .06), 0 4px 14px rgba(4, 50, 31, .06);
    --bb-shadow-2: 0 2px 6px rgba(4, 50, 31, .08), 0 14px 32px rgba(4, 50, 31, .14);
    --bb-shadow-book: 1px 2px 3px rgba(20, 20, 20, .20), 6px 12px 22px rgba(4, 50, 31, .22);
    --bb-shadow-sun: 0 6px 18px rgba(192, 20, 43, .28);

    --bb-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---- Base ----------------------------------------------------------------
   :where() keeps these at element-level specificity so legacy class rules
   (e.g. footer text colours) still apply where they are intentional. */
.bb {
    font-family: var(--bb-font-ui);
    font-size: 15px;
    line-height: 1.55;
    color: var(--bb-ink);
    background: var(--bb-paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
@media (min-width: 992px) {
    .bb { font-size: 16px; }
}
:where(.bb) p { color: inherit; }
:where(.bb) h1, :where(.bb) h2, :where(.bb) h3,
:where(.bb) h4, :where(.bb) h5, :where(.bb) h6 {
    font-family: var(--bb-font-ui);
    color: var(--bb-ink);
    line-height: 1.25;
}
:where(.bb) button, :where(.bb) input, :where(.bb) select, :where(.bb) textarea {
    font-family: inherit;
}
.bb ::selection { background: var(--bb-green-100); color: var(--bb-green-900); }
.bb :focus-visible { outline: 3px solid var(--bb-green-600); outline-offset: 2px; }

/* ---- Shared primitives (use these in new markup) -------------------------- */
.bb .bb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-height: 44px;
    padding: .55em 1.2em;
    border: 1.5px solid transparent;
    border-radius: var(--bb-r-sm);
    font: 600 15px/1.2 var(--bb-font-ui);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s var(--bb-ease), color .2s var(--bb-ease), border-color .2s var(--bb-ease),
        box-shadow .2s var(--bb-ease), filter .2s var(--bb-ease), transform .15s var(--bb-ease);
}
.bb .bb-btn:active { transform: translateY(1px); }
.bb .bb-btn--sun { background: var(--bb-grad-sun); color: #fff; box-shadow: var(--bb-shadow-sun); }
.bb .bb-btn--sun:hover, .bb .bb-btn--sun:focus-visible { color: #fff; filter: brightness(.93) saturate(1.05); }
.bb .bb-btn--green { background: var(--bb-green-600); color: #fff; }
.bb .bb-btn--green:hover, .bb .bb-btn--green:focus-visible { background: var(--bb-green-700); color: #fff; }
.bb .bb-btn--ghost { background: #fff; color: var(--bb-green-700); border-color: var(--bb-green-600); }
.bb .bb-btn--ghost:hover, .bb .bb-btn--ghost:focus-visible { background: var(--bb-green-600); color: #fff; }

.bb .bb-chip {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .2em .6em;
    border-radius: var(--bb-r-xs);
    background: var(--bb-green-50);
    color: var(--bb-green-800);
    font: 600 12.8px/1.4 var(--bb-font-ui);
}
.bb .bb-chip--gold { background: var(--bb-gold-50); color: #7A4B00; }
.bb .bb-chip--red { background: var(--bb-red-50); color: var(--bb-red-700); }

.bb .bb-card {
    background: #fff;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-md);
    box-shadow: var(--bb-shadow-1);
}

/* Section heading with the red "sun" disc — the site's one repeated signature. */
.bb .bb-heading {
    display: flex;
    align-items: center;
    gap: .55em;
    margin: 0;
    font: 800 25px/1.25 var(--bb-font-ui);
    font-stretch: 112%;
    letter-spacing: -.005em;
    color: var(--bb-ink);
}
.bb .bb-heading::before {
    content: "";
    flex: 0 0 auto;
    width: .48em;
    height: .48em;
    border-radius: 50%;
    background: var(--bb-grad-sun);
    box-shadow: 0 0 0 4px var(--bb-red-50);
}
@media (max-width: 767px) {
    .bb .bb-heading { font-size: 20px; }
}

.bb .bb-price { font: 700 18px/1.2 var(--bb-font-ui); color: var(--bb-red-600); }
.bb .bb-price del { margin-right: .35em; font-size: .8em; font-weight: 500; color: var(--bb-ink-3); }

.bb .bb-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Form controls (site-wide) ------------------------------------------ */
.bb .form-control,
.bb .form-select {
    min-height: 46px;
    border: 1.5px solid var(--bb-line);
    border-radius: var(--bb-r-sm);
    background-color: #fff;
    color: var(--bb-ink);
    font-family: var(--bb-font-ui);
    font-size: 15px;
    box-shadow: none;
    transition: border-color .2s var(--bb-ease), box-shadow .2s var(--bb-ease);
}
.bb textarea.form-control { min-height: 96px; }
.bb .form-control::placeholder { color: var(--bb-ink-3); }
.bb .form-control:focus,
.bb .form-select:focus {
    border-color: var(--bb-green-600);
    box-shadow: 0 0 0 4px var(--bb-green-100);
    outline: none;
}
.bb .form-check-input:checked { background-color: var(--bb-green-600); border-color: var(--bb-green-600); }
.bb .form-check-input:focus { border-color: var(--bb-green-600); box-shadow: 0 0 0 4px var(--bb-green-100); }

/* ---- Pagination (Laravel/Bootstrap) ------------------------------------- */
.bb .pagination { gap: 6px; flex-wrap: wrap; }
.bb .pagination .page-link {
    min-width: 40px;
    border: 1.5px solid var(--bb-line);
    border-radius: var(--bb-r-sm) !important;
    color: var(--bb-ink);
    text-align: center;
}
.bb .pagination .page-link:hover { border-color: var(--bb-green-600); color: var(--bb-green-700); background: var(--bb-green-50); }
.bb .pagination .page-item.active .page-link { background: var(--bb-green-600); border-color: var(--bb-green-600); color: #fff; }

/* ---- Toastr notifications ----------------------------------------------- */
.bb #toast-container > div { border-radius: var(--bb-r-sm); box-shadow: var(--bb-shadow-2); opacity: .97; font-family: var(--bb-font-ui); }
.bb #toast-container > .toast-success { background-color: var(--bb-green-600); }
.bb #toast-container > .toast-error { background-color: var(--bb-red-600); }
.bb #toast-container > .toast-warning { background-color: var(--bb-gold-600); }
.bb #toast-container > .toast-info { background-color: var(--bb-green-800); }

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .bb *, .bb *::before, .bb *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}