/* ==========================================================
   BDA BAZAR - SHARED UI COMPONENTS
   ----------------------------------------------------------
   Foundation styles built entirely from assets/css/tokens.css.
   Nothing here hardcodes a colour, radius or spacing value.

   Scope note: product cards are NOT redesigned here. The card
   system lives in assets/css/product-card.css; this file only
   provides the base primitives (buttons, fields, badges,
   breadcrumbs, dropdowns, drawers, empty and loading states)
   that every page shares.

   Everything is scoped to body.bda-storefront so the admin,
   seller and doctor panels - which have their own header.php -
   are never affected.
   ========================================================== */

/* ==========================================================
   1. TYPOGRAPHY BASE
   ========================================================== */
body.bda-storefront{
    font-family: var(--bda-font-sans);
    font-size: var(--bda-fs-base);
    line-height: var(--bda-lh-normal);
    color: var(--bda-ink);
    background: var(--bda-page);
    /* long Hindi/English product names must never blow out a column */
    overflow-wrap: break-word;
}

body.bda-storefront h1,
body.bda-storefront h2,
body.bda-storefront h3,
body.bda-storefront h4{
    font-family: var(--bda-font-sans);
    color: var(--bda-navy);
    line-height: var(--bda-lh-tight);
    margin-top: 0;
}

body.bda-storefront .bda-page-title{
    font-size: var(--bda-fs-2xl);
    font-weight: var(--bda-fw-black);
    letter-spacing: -.2px;
    margin: 0 0 var(--bda-space-2);
}
body.bda-storefront .bda-section-title{
    font-size: var(--bda-fs-xl);
    font-weight: var(--bda-fw-bold);
    margin: 0 0 var(--bda-space-3);
}
body.bda-storefront .bda-subheading{
    font-size: var(--bda-fs-lg);
    font-weight: var(--bda-fw-semi);
    margin: 0 0 var(--bda-space-2);
}
body.bda-storefront .bda-text-muted{ color: var(--bda-muted); }
body.bda-storefront .bda-helper{
    display: block;
    font-size: var(--bda-fs-sm);
    line-height: var(--bda-lh-snug);
    color: var(--bda-muted);
    margin-top: var(--bda-space-1);
}
body.bda-storefront .bda-price{
    font-variant-numeric: tabular-nums;
    font-weight: var(--bda-fw-black);
    color: var(--bda-navy);
    white-space: nowrap;
}

/* section header: title left, action right */
body.bda-storefront .bda-section-header{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bda-space-4);
    margin-bottom: var(--bda-space-3);
    min-width: 0;
}
body.bda-storefront .bda-section-header > h2{ margin: 0; min-width: 0; }

/* ==========================================================
   2. BUTTONS
   One height, one radius, one focus treatment.
   ========================================================== */
body.bda-storefront .bda-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bda-space-2);
    min-height: var(--bda-control-h);
    padding: 0 var(--bda-space-5);
    border: 1px solid transparent;
    border-radius: var(--bda-radius);
    font-family: inherit;
    font-size: var(--bda-fs-base);
    font-weight: var(--bda-fw-bold);
    line-height: 1;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color var(--bda-dur) var(--bda-ease),
                border-color var(--bda-dur) var(--bda-ease),
                color var(--bda-dur) var(--bda-ease),
                filter var(--bda-dur) var(--bda-ease);
}
body.bda-storefront .bda-btn:disabled,
body.bda-storefront .bda-btn.is-disabled{
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}
body.bda-storefront .bda-btn-block{ width: 100%; }
body.bda-storefront .bda-btn-sm{
    min-height: var(--bda-control-h-sm);
    padding: 0 var(--bda-space-3);
    font-size: var(--bda-fs-sm);
}

/* primary = the configurable CTA colour (lime/amber from settings) */
body.bda-storefront .bda-btn-primary{
    background: var(--theme-primary, var(--bda-lime));
    border-color: rgba(11,37,69,.12);
    color: var(--bda-on-accent) !important;
}
body.bda-storefront .bda-btn-primary:hover{ filter: brightness(1.05); }

/* secondary = navy, for the lower-emphasis path */
body.bda-storefront .bda-btn-secondary{
    background: var(--bda-navy);
    border-color: var(--bda-navy);
    color: var(--bda-on-dark) !important;
}
body.bda-storefront .bda-btn-secondary:hover{ background: var(--bda-navy-soft); }

body.bda-storefront .bda-btn-outline{
    background: transparent;
    border-color: var(--bda-line-strong);
    color: var(--bda-navy) !important;
}
body.bda-storefront .bda-btn-outline:hover{
    border-color: var(--bda-navy);
    background: var(--bda-surface-alt);
}

body.bda-storefront .bda-btn-danger{
    background: var(--bda-error);
    border-color: var(--bda-error);
    color: var(--bda-on-dark) !important;
}

/* text link + icon-only button */
body.bda-storefront .bda-link{
    color: var(--bda-navy);
    font-weight: var(--bda-fw-semi);
    text-decoration: underline;
}
body.bda-storefront .bda-link:hover{ color: var(--bda-orange); }

body.bda-storefront .bda-icon-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--bda-control-h);
    height: var(--bda-control-h);
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--bda-radius);
    background: transparent;
    color: var(--bda-navy);
    cursor: pointer;
    transition: background-color var(--bda-dur) var(--bda-ease);
}
body.bda-storefront .bda-icon-btn:hover{ background: var(--bda-grey-100); }

/* ==========================================================
   3. FORM CONTROLS
   ========================================================== */
body.bda-storefront .bda-field{ margin-bottom: var(--bda-space-4); }

body.bda-storefront .bda-label{
    display: block;
    margin-bottom: var(--bda-space-1);
    font-size: var(--bda-fs-sm);
    font-weight: var(--bda-fw-semi);
    color: var(--bda-ink);
}
body.bda-storefront .bda-label .bda-req{ color: var(--bda-error); }

body.bda-storefront .bda-input,
body.bda-storefront .bda-select,
body.bda-storefront .bda-textarea{
    display: block;
    width: 100%;
    min-height: var(--bda-control-h);
    padding: var(--bda-space-2) var(--bda-space-3);
    font-family: inherit;
    /* 16px keeps mobile Safari from zooming the page on focus */
    font-size: var(--bda-fs-input);
    line-height: var(--bda-lh-snug);
    color: var(--bda-ink);
    background: var(--bda-surface);
    border: 1px solid var(--bda-line);
    border-radius: var(--bda-radius);
    box-shadow: none;
    transition: border-color var(--bda-dur) var(--bda-ease),
                box-shadow var(--bda-dur) var(--bda-ease);
}
body.bda-storefront .bda-textarea{ min-height: 110px; resize: vertical; }

body.bda-storefront .bda-input:focus,
body.bda-storefront .bda-select:focus,
body.bda-storefront .bda-textarea:focus{
    outline: none;
    border-color: var(--bda-navy);
    box-shadow: 0 0 0 3px rgba(11,37,69,.10);
}
body.bda-storefront .bda-input::placeholder,
body.bda-storefront .bda-textarea::placeholder{ color: var(--bda-grey-500); }

body.bda-storefront .bda-input[aria-invalid="true"],
body.bda-storefront .bda-field.has-error .bda-input,
body.bda-storefront .bda-field.has-error .bda-select,
body.bda-storefront .bda-field.has-error .bda-textarea{
    border-color: var(--bda-error);
}

/* checkbox / radio: the control keeps a real tap target */
body.bda-storefront .bda-check{
    display: flex;
    align-items: flex-start;
    gap: var(--bda-space-2);
    font-size: var(--bda-fs-base);
    line-height: var(--bda-lh-snug);
    cursor: pointer;
    margin: 0;
}
body.bda-storefront .bda-check input[type="checkbox"],
body.bda-storefront .bda-check input[type="radio"]{
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--bda-navy);
}

/* ==========================================================
   4. MESSAGES
   Status is never colour-only: each variant carries an icon slot
   and a text label.
   ========================================================== */
body.bda-storefront .bda-msg{
    display: flex;
    align-items: flex-start;
    gap: var(--bda-space-2);
    margin: 0 0 var(--bda-space-4);
    padding: var(--bda-space-3);
    border: 1px solid transparent;
    border-radius: var(--bda-radius-md);
    font-size: var(--bda-fs-base);
    line-height: var(--bda-lh-snug);
}
body.bda-storefront .bda-msg i{ flex: 0 0 auto; margin-top: 2px; }
body.bda-storefront .bda-msg-success{
    background: var(--bda-success-bg);
    border-color: var(--bda-success-border);
    color: var(--bda-success);
}
body.bda-storefront .bda-msg-error{
    background: var(--bda-error-bg);
    border-color: var(--bda-error-border);
    color: var(--bda-error);
}
body.bda-storefront .bda-msg-warning{
    background: var(--bda-warning-bg);
    border-color: var(--bda-warning-border);
    color: var(--bda-warning);
}
body.bda-storefront .bda-msg-info{
    background: var(--bda-info-bg);
    border-color: var(--bda-info-border);
    color: var(--bda-info);
}

/* ==========================================================
   5. BADGES / STATUS LABELS
   ========================================================== */
body.bda-storefront .bda-badge{
    display: inline-flex;
    align-items: center;
    gap: var(--bda-space-1);
    padding: 3px var(--bda-space-2);
    border-radius: var(--bda-radius-pill);
    font-size: var(--bda-fs-xs);
    font-weight: var(--bda-fw-bold);
    line-height: 1.3;
    white-space: nowrap;
}
body.bda-storefront .bda-badge-stock{ background: var(--bda-success-bg); color: var(--bda-success); }
body.bda-storefront .bda-badge-out{   background: var(--bda-error-bg);   color: var(--bda-error); }
body.bda-storefront .bda-badge-info{  background: var(--bda-info-bg);    color: var(--bda-info); }
body.bda-storefront .bda-badge-discount{
    background: var(--bda-orange);
    color: var(--bda-on-dark);
    font-weight: var(--bda-fw-black);
}

/* ==========================================================
   6. BREADCRUMBS  (markup lives in inc/breadcrumb.php)
   Base styling is in product-card.css; only the container
   rhythm is standardised here.
   ========================================================== */
body.bda-storefront .bda-breadcrumb{ margin-bottom: var(--bda-space-4); }

/* ==========================================================
   7. DROPDOWN
   ========================================================== */
body.bda-storefront .bda-dropdown{ position: relative; }
body.bda-storefront .bda-dropdown-menu{
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: var(--bda-z-dropdown);
    min-width: 210px;
    padding: var(--bda-space-2);
    background: var(--bda-surface);
    border: 1px solid var(--bda-line);
    border-radius: var(--bda-radius-lg);
    box-shadow: var(--bda-shadow-lg);
}
body.bda-storefront .bda-dropdown-menu[hidden]{ display: none; }
body.bda-storefront .bda-dropdown-menu a,
body.bda-storefront .bda-dropdown-menu button{
    display: flex;
    align-items: center;
    gap: var(--bda-space-2);
    width: 100%;
    min-height: var(--bda-control-h-sm);
    padding: var(--bda-space-2) var(--bda-space-3);
    border: 0;
    border-radius: var(--bda-radius-sm);
    background: transparent;
    color: var(--bda-ink);
    font-size: var(--bda-fs-base);
    font-weight: var(--bda-fw-medium);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
body.bda-storefront .bda-dropdown-menu a:hover,
body.bda-storefront .bda-dropdown-menu button:hover{
    background: var(--bda-grey-100);
    color: var(--bda-navy);
}
/* a labelled divider keeps customer and seller actions apart */
body.bda-storefront .bda-dropdown-sep{
    margin: var(--bda-space-2) var(--bda-space-3) var(--bda-space-1);
    padding-top: var(--bda-space-2);
    border-top: 1px solid var(--bda-line);
    font-size: var(--bda-fs-xs);
    font-weight: var(--bda-fw-bold);
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--bda-faint);
}

/* ==========================================================
   8. DRAWER + OVERLAY BASE
   ========================================================== */
body.bda-storefront .bda-overlay{
    position: fixed;
    inset: 0;
    z-index: var(--bda-z-overlay);
    background: var(--bda-overlay);
}
body.bda-storefront .bda-overlay[hidden]{ display: none; }

/* set on <body> while a drawer/modal is open */
body.bda-scroll-locked{ overflow: hidden; }

/* ==========================================================
   9. EMPTY + LOADING STATES
   ========================================================== */
body.bda-storefront .bda-empty{
    padding: var(--bda-space-10) var(--bda-space-5);
    text-align: center;
    background: var(--bda-surface);
    border: 1px dashed var(--bda-line-strong);
    border-radius: var(--bda-radius-lg);
}
body.bda-storefront .bda-empty h2,
body.bda-storefront .bda-empty h3{
    font-size: var(--bda-fs-xl);
    margin: 0 0 var(--bda-space-2);
}
body.bda-storefront .bda-empty p{
    margin: 0 0 var(--bda-space-4);
    color: var(--bda-muted);
}

body.bda-storefront .bda-skeleton{
    background: linear-gradient(90deg,
        var(--bda-grey-100) 25%,
        var(--bda-grey-200) 37%,
        var(--bda-grey-100) 63%);
    background-size: 400% 100%;
    animation: bda-shimmer 1.3s ease-in-out infinite;
    border-radius: var(--bda-radius-sm);
}
@keyframes bda-shimmer{
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ==========================================================
   10. PAGE CONTAINER + SECTION RHYTHM
   The max-width rail itself lives in storefront-shell.css; this
   only standardises the vertical spacing around it.
   ========================================================== */
body.bda-storefront .bda-page{ padding: var(--bda-section-gap) 0 var(--bda-section-gap-lg); }
body.bda-storefront .bda-stack > * + *{ margin-top: var(--bda-space-4); }

/* ==========================================================
   11. FOCUS RING - one definition for the whole storefront
   ========================================================== */
body.bda-storefront a:focus-visible,
body.bda-storefront button:focus-visible,
body.bda-storefront input:focus-visible,
body.bda-storefront select:focus-visible,
body.bda-storefront textarea:focus-visible,
body.bda-storefront summary:focus-visible,
body.bda-storefront [tabindex]:not([tabindex="-1"]):focus-visible{
    outline: var(--bda-focus-width) solid var(--bda-focus-color);
    outline-offset: var(--bda-focus-offset);
    border-radius: var(--bda-radius-sm);
}

/* ==========================================================
   12. UTILITIES
   ========================================================== */
body.bda-storefront .bda-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;
}
body.bda-storefront .bda-truncate{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ==========================================================
   PHASE 2 - navigation + footer refinements
   All values come from assets/css/tokens.css
   ========================================================== */

/* mega menu: label that separates services from shopping categories */
body.bda-storefront .bda-mega-grouplabel{
    margin: var(--bda-space-3) 0 var(--bda-space-1);
    padding: var(--bda-space-2) var(--bda-space-4) 0;
    border-top: 1px solid var(--bda-line);
    font-size: var(--bda-fs-xs);
    font-weight: var(--bda-fw-bold);
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--bda-faint);
}

/* account dropdown trigger is a <button> now - strip the UA button look
   so it still matches the cart card beside it */
body.bda-storefront .mf-action-trigger{
    border: 1px solid var(--bda-line);
    background: var(--bda-surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* icons inside the account menu line up with their labels */
body.bda-storefront .mf-dropdown-menu a i,
body.bda-storefront .mf-mobile-login-menu a i{
    width: 16px;
    margin-right: var(--bda-space-1);
    color: var(--bda-muted);
}

/* ---------- footer ---------- */
body.bda-storefront .mf-footer-widget h4{
    font-size: var(--bda-fs-md);
    font-weight: var(--bda-fw-bold);
    letter-spacing: .2px;
    margin: 0 0 var(--bda-space-3);
    padding-bottom: var(--bda-space-2);
    border-bottom: 1px solid var(--bda-line-dark);
}
body.bda-storefront .mf-footer-widget ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
body.bda-storefront .mf-footer-widget li + li{ margin-top: var(--bda-space-1); }
body.bda-storefront .mf-footer-widget li a{
    display: inline-flex;
    align-items: center;
    min-height: 32px;          /* comfortable tap target without a huge column */
    font-size: var(--bda-fs-base);
    line-height: var(--bda-lh-snug);
}
body.bda-storefront .mf-contact-list li{
    display: flex;
    gap: var(--bda-space-2);
    font-size: var(--bda-fs-base);
    line-height: var(--bda-lh-snug);
    margin-bottom: var(--bda-space-2);
}

/* social icons keep a real 44px target */
body.bda-storefront .mf-social a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--bda-control-h);
    height: var(--bda-control-h);
    border-radius: var(--bda-radius-pill);
}

@media (max-width: 767px){
    /* stacked footer: tighter rhythm so five groups do not become a wall */
    body.bda-storefront .mf-footer-widget{ margin-bottom: var(--bda-space-6); }
    body.bda-storefront .mf-footer-widget h4{ margin-bottom: var(--bda-space-2); }
    body.bda-storefront .mf-footer-widget li a{ min-height: 36px; }
}

/* drawer: services group label, mirrors the desktop mega menu */
body.bda-storefront .bda-drawer-grouplabel{
    padding: var(--bda-space-4) var(--bda-space-4) var(--bda-space-1);
    margin-top: var(--bda-space-2);
    border-top: 1px solid var(--bda-line);
    font-size: var(--bda-fs-xs);
    font-weight: var(--bda-fw-bold);
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--bda-faint);
    list-style: none;
}