/* ==========================================================================
   BazarKoribo Design System
   Tokens, primitives and components shared by the storefront and the admin.
   Everything else is composed from these; nothing below hard-codes a colour.
   ========================================================================== */

:root {
    /* Brand ---------------------------------------------------------------- */
    --brand-primary: #E85D2C;
    --brand-primary-dark: #C94A1E;
    --brand-primary-light: #FF7B4D;
    --brand-primary-soft: #FDEEE7;

    --brand-secondary: #1F6F4A;
    --brand-secondary-dark: #165638;
    --brand-secondary-light: #2E9163;
    --brand-secondary-soft: #E8F3ED;

    /* Surfaces: warm off-white ground, per the approved brand direction ----- */
    --surface-page: #FDFBF7;
    --surface-card: #FFFFFF;
    --surface-raised: #FFFFFF;
    --surface-sunken: #F6F1E9;
    --surface-overlay: rgba(28, 25, 23, 0.55);

    /* Glass: used sparingly — readability and speed come first -------------- */
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-bg-strong: rgba(255, 255, 255, 0.88);
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-blur: 12px;

    /* Text ----------------------------------------------------------------- */
    --text-primary: #1C1917;
    --text-secondary: #57534E;
    --text-muted: #8B8681;
    --text-inverse: #FFFFFF;
    --text-on-brand: #FFFFFF;

    /* Borders -------------------------------------------------------------- */
    --border-subtle: #EFE8DE;
    --border-default: #E2D9CC;
    --border-strong: #CDC1B0;

    /* Status --------------------------------------------------------------- */
    --success: #15803D;
    --success-soft: #E7F5EC;
    --warning: #B45309;
    --warning-soft: #FDF3E3;
    --danger: #B91C1C;
    --danger-soft: #FDECEC;
    --info: #1D4ED8;
    --info-soft: #EAF0FD;

    /* Spacing: a 4px scale keeps rhythm consistent across every screen ------ */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Radii ---------------------------------------------------------------- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* Shadows: soft and warm-tinted rather than neutral grey ---------------- */
    --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.05);
    --shadow-sm: 0 2px 6px rgba(28, 25, 23, 0.07);
    --shadow-md: 0 6px 18px rgba(28, 25, 23, 0.09);
    --shadow-lg: 0 14px 34px rgba(28, 25, 23, 0.12);
    --shadow-brand: 0 8px 22px rgba(232, 93, 44, 0.28);

    /* Typography ----------------------------------------------------------- */
    --font-bangla: 'Hind Siliguri', 'Noto Sans Bengali', 'SolaimanLipi', system-ui, sans-serif;
    --font-latin: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: var(--font-bangla);

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;

    --leading-tight: 1.25;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    /* Motion: short and purposeful; long transitions read as lag ----------- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 320ms;

    /* Layout --------------------------------------------------------------- */
    --container-max: 1280px;
    --header-height: 64px;
    --bottom-nav-height: 60px;

    --z-dropdown: 100;
    --z-sticky: 200;
    --z-drawer: 300;
    --z-modal: 400;
    --z-toast: 500;
}

/* The English experience switches to a Latin-first stack. -------------------- */
:root[lang^="en"] {
    --font-body: var(--font-latin);
}

/* ==========================================================================
   Reset and base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

/* A phone viewport must never scroll sideways. One overflowing descendant makes the
   whole page drift, which is both ugly and hard to trace, so the guard lives here near
   the root rather than being chased element by element. Anything genuinely wide
   (tables, code, carousels) scrolls inside its own container instead.

   On <body> only, NOT on <html>: any overflow value other than visible turns an element
   into the scroll container for its descendants, and position:sticky resolves against
   that container rather than the viewport. With the guard on <html>, the sticky header
   scrolled away instead of pinning -- it had nothing to stick to. Leaving <html> alone
   keeps the viewport as the scroll container, and the guard still contains sideways
   drift because every visible element is inside <body>. */
html { max-width: 100%; }
body { max-width: 100%; overflow-x: hidden; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: var(--surface-page);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-3);
    line-height: var(--leading-tight);
    font-weight: 700;
    color: var(--text-primary);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 var(--space-4); }

a {
    color: var(--brand-primary);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

a:hover { color: var(--brand-primary-dark); }

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button, input, select, textarea { font: inherit; color: inherit; }

/* A visible focus ring on every interactive element: keyboard users must always
   be able to see where they are. */
:focus-visible {
    outline: 3px solid var(--brand-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Skip link for keyboard and screen-reader users. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: var(--z-toast);
    padding: var(--space-3) var(--space-5);
    background: var(--brand-primary);
    color: var(--text-on-brand);
    border-radius: 0 0 var(--radius-md) 0;
}

.skip-link:focus {
    left: 0;
    color: var(--text-on-brand);
}

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

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

@media (min-width: 768px) {
    .container { padding-inline: var(--space-6); }
}

.stack > * + * { margin-top: var(--space-4); }

.grid { display: grid; gap: var(--space-4); }

.product-grid {
    display: grid;
    gap: var(--space-4);
    /* Two columns on the smallest phones; the grid grows with the viewport
       instead of stepping through fixed breakpoints. */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

@media (min-width: 640px) {
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

@media (min-width: 1024px) {
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}

.section { padding-block: var(--space-10); }

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.section-title {
    margin: 0;
    font-size: var(--text-2xl);
    position: relative;
    padding-left: var(--space-4);
}

/* A short brand bar rather than a full underline: quieter, and it scales. */
.section-title::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 1.1em;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, var(--brand-primary), var(--brand-secondary));
}

/* ==========================================================================
   Surfaces
   ========================================================================== */

.card {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}

.card--interactive:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.card__body { padding: var(--space-5); }

/* Glass is reserved for overlays above imagery, where the blur has something to
   act on. Applying it over flat colour only costs paint time. */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}

.glass--strong { background: var(--glass-bg-strong); }

/* Older browsers without backdrop-filter get an opaque panel, not a transparent
   one that would leave text unreadable. */
@supports not (backdrop-filter: blur(1px)) {
    .glass, .glass--strong { background: var(--surface-card); }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    /* 44px is the minimum comfortable touch target on a phone. */
    min-height: 44px;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.btn:active { transform: translateY(1px); }

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.btn--primary {
    background: var(--brand-primary);
    color: var(--text-on-brand);
    box-shadow: var(--shadow-brand);
}

.btn--primary:hover:not(:disabled) {
    background: var(--brand-primary-dark);
    color: var(--text-on-brand);
}

.btn--secondary {
    background: var(--brand-secondary);
    color: var(--text-on-brand);
}

.btn--secondary:hover:not(:disabled) {
    background: var(--brand-secondary-dark);
    color: var(--text-on-brand);
}

.btn--outline {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.btn--outline:hover:not(:disabled) {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.btn--ghost {
    background: transparent;
    color: var(--text-secondary);
}

.btn--ghost:hover:not(:disabled) {
    background: var(--surface-sunken);
    color: var(--text-primary);
}

.btn--danger { background: var(--danger); color: var(--text-inverse); }

.btn--sm { padding: var(--space-2) var(--space-3); min-height: 36px; font-size: var(--text-xs); }

/* A small button stays visually small, but on a touch screen it has to be reachable: 36px
   is where mis-taps start, and a "view all" or a quantity control sitting next to other
   controls is exactly where one costs the customer something. Only under (hover: none), so
   a dense desktop toolbar keeps its compact rhythm. */
@media (hover: none) {
    .btn--sm { min-height: 44px; }
}
.btn--lg { padding: var(--space-4) var(--space-8); min-height: 52px; font-size: var(--text-base); }
.btn--block { width: 100%; }

.btn--icon {
    padding: var(--space-2);
    min-height: 40px;
    min-width: 40px;
    border-radius: var(--radius-pill);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.field { margin-bottom: var(--space-4); }

.field__label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.field__label .required { color: var(--danger); margin-left: 2px; }
.field__label .optional { color: var(--text-muted); font-weight: 400; font-size: var(--text-xs); }

.input,
.select,
.textarea {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    min-height: 44px;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }

.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-soft);
}

.input[aria-invalid="true"],
.input.input--error {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-soft);
}

.textarea { min-height: 110px; resize: vertical; }

.field__hint {
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.field__error {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--danger);
    font-weight: 500;
}

.checkbox, .radio {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
    padding: var(--space-2) 0;
}

.checkbox input, .radio input {
    width: 20px; height: 20px;
    margin: 2px 0 0;
    accent-color: var(--brand-primary);
    flex-shrink: 0;
    cursor: pointer;
}

/* ==========================================================================
   Badges, chips and pills
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.badge--new { background: var(--info-soft); color: var(--info); }
.badge--sale { background: var(--brand-primary); color: var(--text-on-brand); }
.badge--best { background: var(--brand-secondary-soft); color: var(--brand-secondary); }
.badge--featured { background: var(--brand-primary-soft); color: var(--brand-primary); }
.badge--out { background: var(--surface-sunken); color: var(--text-muted); }
.badge--low { background: var(--warning-soft); color: var(--warning); }
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }
.badge--info { background: var(--info-soft); color: var(--info); }
.badge--warning { background: var(--warning-soft); color: var(--warning); }
.badge--neutral { background: var(--surface-sunken); color: var(--text-secondary); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.chip:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

.chip--active {
    background: var(--brand-primary-soft);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    font-weight: 600;
}

.chip__remove {
    display: inline-flex;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: var(--text-base);
    line-height: 1;
    color: inherit;
}

/* ==========================================================================
   Alerts
   ========================================================================== */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}

.alert--success { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.alert--danger { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.alert--warning { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
.alert--info { background: var(--info-soft); border-color: var(--info); color: var(--info); }

/* ==========================================================================
   Tables
   ========================================================================== */

/* Wide tables scroll inside their own container so the page body never scrolls
   horizontally on a phone. */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.table th {
    text-align: start;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-sunken);
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    border-bottom: 1px solid var(--border-default);
}

.table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--surface-page); }

.table__numeric { text-align: end; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Skeletons — shown instead of a blank screen while content loads
   ========================================================================== */

.skeleton {
    background: linear-gradient(
        90deg,
        var(--surface-sunken) 25%,
        #ECE4D8 37%,
        var(--surface-sunken) 63%
    );
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.skeleton--text { height: 0.9em; margin-bottom: var(--space-2); }
.skeleton--title { height: 1.4em; width: 60%; margin-bottom: var(--space-3); }
.skeleton--image { aspect-ratio: 1; width: 100%; border-radius: var(--radius-md); }

/* ==========================================================================
   Empty and error states
   ========================================================================== */

.state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-12) var(--space-4);
    gap: var(--space-3);
}

.state__icon { font-size: 3rem; line-height: 1; opacity: 0.65; }
.state__title { margin: 0; font-size: var(--text-xl); }
.state__text { margin: 0; color: var(--text-secondary); max-width: 42ch; }

/* ==========================================================================
   Toasts
   ========================================================================== */

.toast-region {
    position: fixed;
    bottom: calc(var(--bottom-nav-height) + var(--space-4));
    inset-inline: var(--space-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
}

@media (min-width: 768px) {
    .toast-region {
        bottom: var(--space-6);
        inset-inline: auto var(--space-6);
        width: min(380px, calc(100vw - var(--space-12)));
    }
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-inline-start: 4px solid var(--brand-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    animation: toast-in var(--duration-slow) var(--ease-out);
}

.toast--success { border-inline-start-color: var(--success); }
.toast--danger { border-inline-start-color: var(--danger); }
.toast--warning { border-inline-start-color: var(--warning); }

.toast.is-leaving { animation: toast-out var(--duration-base) var(--ease-in-out) forwards; }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-out {
    to { opacity: 0; transform: translateY(8px) scale(0.98); }
}

/* ==========================================================================
   Modals and drawers
   ========================================================================== */

.overlay {
    position: fixed;
    inset: 0;
    background: var(--surface-overlay);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    animation: fade-in var(--duration-base) var(--ease-out);
}

.modal {
    background: var(--surface-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: min(520px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    animation: modal-in var(--duration-base) var(--ease-out);
}

.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}

.modal__body { padding: var(--space-5); }

.modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-5);
    border-top: 1px solid var(--border-subtle);
}

@keyframes modal-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.drawer {
    position: fixed;
    top: 0; bottom: 0;
    inset-inline-start: 0;
    width: min(320px, 85vw);
    background: var(--surface-card);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-drawer);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform var(--duration-slow) var(--ease-out);
}

.drawer.is-open { transform: translateX(0); }
.drawer--end { inset-inline: auto 0; transform: translateX(100%); }
.drawer--end.is-open { transform: translateX(0); }

/* ==========================================================================
   Utilities
   ========================================================================== */

.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }

.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.text-lg { font-size: var(--text-lg); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-brand { color: var(--brand-primary); }
.text-center { text-align: center; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }

.hidden { display: none !important; }

@media (max-width: 767px) { .hide-mobile { display: none !important; } }
@media (min-width: 768px) { .hide-desktop { display: none !important; } }

/* ==========================================================================
   Reduced motion — honour the OS preference rather than overriding it
   ========================================================================== */

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

    .skeleton { animation: none; background: var(--surface-sunken); }
}

/* ==========================================================================
   Print — invoices and order details must print cleanly
   ========================================================================== */

@media print {
    .site-header, .site-footer, .bottom-nav, .btn, .toast-region { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; border-color: #ddd; }
}