/* Store-wide brand skin.
 *
 * Every colour here reads a --sd-* token printed into the page head by
 * layouts/store.blade.php from EmailBrandingService::tokens() — the same
 * contrast-corrected pair the studio's branded emails use. Nothing in this
 * file hardcodes a studio colour, so each studio's store wears its own brand.
 *
 * Everything is scoped under .store-body (the store layout's body class) so
 * these overrides can never reach the admin app, the school portal, or Capture.
 *
 * WHY OVERRIDES RATHER THAN EDITED MARKUP: the store's account pages use
 * Bootstrap's cyan "info" palette in ~60 places. Repainting the palette in one
 * reviewable file rebrands every one of those pages without touching a line of
 * their logic. Do not "clean this up" by rewriting the Blade — the risk sits
 * entirely on the markup side, and there is nothing to gain.
 */

/* ---------- frame: header + footer ---------- */
.store-body .store-header { background-color: var(--sd-primary) !important; }
.store-body .store-footer { background-color: var(--sd-primary) !important; }
.store-body .store-footer a:hover { color: var(--sd-cta) !important; }
/* The logo is a link wrapping an image: without this it inherits Bootstrap's
   link blue, which is invisible until the image 404s and the alt text paints
   blue-on-navy. :not(.btn) is load-bearing — the header's guest buttons
   (Login / Create Account) carry their own text colours, and forcing white on
   them renders "Create Account" white-on-white. :not(.dropdown-item) is the
   same trap one level down: the account menu hangs off the header but opens on
   a WHITE panel, so this rule painted Dashboard / Orders / Favorites / Profile
   invisible. "Sign out" is a <button>, which is why it alone stayed readable
   and made the menu look half-empty rather than broken.

   :not(.sl-btn-primary):not(.sd-btn-cta) is the same trap a third time. A page
   may render its hero INSIDE this header via @section('own-header') / banner —
   the landing page does — which drags the hero's CTA under this selector. Those
   are FILLED brand buttons: they paint --sd-cta behind themselves and declare
   --sd-on-cta (navy) on top, so forcing white gave white-on-gold at 2.0:1.
   Note the sibling .sl-btn-quiet is deliberately NOT excluded: it is an outline
   button sitting directly on the navy hero, so white is the colour it wants.
   Rule of thumb for anything added here later: exclude filled brand buttons,
   never plain links or ghost/outline buttons. */
.store-body .store-header a:not(.btn):not(.dropdown-item):not(.sl-btn-primary):not(.sd-btn-cta) { color: #fff; }

/* The off-canvas mobile nav is part of the header; keep it in the family. */
.store-body #mobileNavOffcanvas { background-color: var(--sd-primary) !important; }

/* ---------- the cyan palette becomes the studio's ---------- */
.store-body .btn-info,
.store-body .btn-info:focus {
    background-color: var(--sd-cta);
    border-color: var(--sd-cta);
    color: var(--sd-on-cta);
    font-weight: 600;
}
.store-body .btn-info:hover,
.store-body .btn-info:active {
    background-color: var(--sd-cta);
    border-color: var(--sd-cta);
    color: var(--sd-on-cta);
    filter: brightness(1.07);
}
.store-body .btn-outline-info {
    border-color: var(--sd-cta);
    color: var(--sd-cta-text);
}
.store-body .btn-outline-info:hover {
    background-color: var(--sd-cta);
    border-color: var(--sd-cta);
    color: var(--sd-on-cta);
}
/* bg-info / text-info / border-info are deliberately NOT overridden here. The layout
   repoints --bs-info-rgb instead, so Bootstrap's own rules render the brand colour
   while `bg-opacity-*` / `text-opacity-*` keep working. Flattening background-color
   discarded the opacity: every `bg-info bg-opacity-10` tint panel went solid navy and
   its body text fell to ~1.1:1. Do not reintroduce that. */
.store-body .bg-info-subtle { background-color: var(--sd-tint) !important; }

/* ---------- Bootstrap's "primary" slot becomes the studio's primary ----------
   Used ~108 times across store views (step indicators, headings, main action
   buttons). Bootstrap ships it as a generic blue; the slot's whole meaning is
   "this brand's main colour", so pointing it at the studio's primary is the
   correction, not a re-purposing. The CTA/second colour stays reserved for
   shop-and-buy actions so the two never compete. */
/* .bg-primary is deliberately not repeated here — resources/sass/store.scss:374
   already flattens it to var(--brand-primary) !important and wins regardless, so a
   copy in this file would be dead weight.
   PRE-EXISTING BUG THAT LIVES THERE, NOT HERE: because store.scss points BOTH
   .bg-primary and .text-primary at that one variable, a `bg-primary bg-opacity-10`
   circle wrapping a `.text-primary` icon renders the icon in the same colour as its
   own background — 1.00:1, invisible — for ANY brand colour. True on origin/main
   (where the variable is #3b82f6) and unchanged by this branch. Three parent-facing
   spots: checkout/index, checkout/confirmation, cart/index. (student-select and
   job/select were the other two; both were deleted when the store stopped listing
   other people's children on an ambiguous search.) The fix belongs in store.scss
   and is the lead's to make. */
.store-body .text-primary { color: var(--sd-primary) !important; }
.store-body .border-primary { border-color: var(--sd-primary) !important; }
.store-body .btn-primary,
.store-body .btn-primary:focus {
    background-color: var(--sd-primary);
    border-color: var(--sd-primary);
    color: #fff;
}
.store-body .btn-primary:hover,
.store-body .btn-primary:active {
    background-color: var(--sd-primary);
    border-color: var(--sd-primary);
    color: #fff;
    filter: brightness(1.15);
}
.store-body .btn-outline-primary { border-color: var(--sd-primary); color: var(--sd-primary); }
.store-body .btn-outline-primary:hover { background-color: var(--sd-primary); border-color: var(--sd-primary); color: #fff; }

/* Links inside store content follow the brand rather than Bootstrap blue.
   --sd-cta-text is the DARKENED gold, readable as text on a WHITE surface. It is
   the wrong token the moment the link is a filled gold BUTTON: .sd-btn-cta paints
   --sd-cta behind itself and declares --sd-on-cta (navy) on top, but it is an <a>
   without .btn, so this rule outranked it and painted dark gold on gold — the
   "Order now" / "Shop these photos" buttons measured 1.9:1. Excluded by class, not
   by adding !important below, so the button keeps owning its own colour pair.

   .sl-btn-primary must be excluded HERE as well as on the header rule above, and
   for a reason worth writing down: the landing page uses that one class in TWO
   places — the hero (which renders inside <header>) and the .sl-closer nudge at
   the foot of the page (which is ordinary .store-content). Fixing only the header
   left the second one gold-on-gold at 2.03:1. It is wrapped in @guest, so it does
   not render at all when you are signed in — which is exactly how it survived a
   logged-in local check and had to be caught on production. Any future filled
   brand button needs excluding from BOTH rules, and testing signed OUT. */
.store-body .store-content a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):not(.sd-btn-cta):not(.sl-btn-primary) {
    color: var(--sd-cta-text);
}

/* Bootstrap ships no min-width utility, so this class is hand-rolled. It lived in
   store-dashboard.css, which ONLY the dashboard loads — so on every other store
   page (My Subjects, most visibly) `min-w-0` silently resolved to `auto`, flex
   items refused to shrink, and the sibling text-truncate could never fire: a long
   shoot name shoved the "Order Now" button clean off the right edge of its card.
   Defined here, where the whole store can see it. Scoped to .store-body so it
   cannot reach the admin app or the school portal. */
.store-body .min-w-0 { min-width: 0; }

/* ---------- status colours stay semantic ----------
   Status has to read as status even when a studio's brand IS green or red, so
   these are deliberately NOT brand tokens. Softened to match the dashboard. */
/* Scoped to page CONTENT on purpose. The cart and notification count pills live in the
   header and the off-canvas nav, where a softened 12%-alpha red became invisible against
   the brand-coloured bar (measured 1.03:1). Those keep Bootstrap's solid badge. */
.store-body .store-content .badge.bg-success { background-color: rgba(21,128,61,.12) !important; color: var(--sd-positive) !important; }
.store-body .store-content .badge.bg-warning { background-color: rgba(161,98,7,.12) !important; color: var(--sd-warning) !important; }
.store-body .store-content .badge.bg-danger  { background-color: rgba(185,28,28,.12) !important; color: #b3403c !important; }
.store-body .store-content .badge.bg-secondary { background-color: rgba(106,116,135,.14) !important; color: #6a7487 !important; }
.store-body .badge { font-weight: 600; }

/* ---------- surfaces: match the dashboard's card language ---------- */
.store-body .card {
    border: 1px solid #e3e8ef;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16,24,40,.03), 0 6px 18px rgba(16,24,40,.04);
}
.store-body .card-header { background-color: #fff; border-bottom-color: #eef1f6; }
.store-body .list-group-item { border-color: #eef1f6; }

/* Page headings on account sub-pages, so they sit in the same type system. */
.store-body .store-content h1,
.store-body .store-content h2 { font-weight: 700; }

/* ---------- account navigation ----------
   The current page reads as the studio's PRIMARY, never the CTA colour: gold (or
   whatever a studio's second colour is) means "buy" everywhere else on the page,
   and a navigation item is not a purchase. Bootstrap's own opacity utility is
   overridden explicitly because `bg-opacity-10` works through a variable our
   flat background-color would otherwise ignore. */
.store-body .account-nav-link.bg-info,
.store-body .account-nav-link.bg-info.bg-opacity-10 {
    background-color: var(--sd-tint) !important;
    color: var(--sd-primary) !important;
}
.store-body .account-nav-link:hover { background-color: var(--sd-tint) !important; }
.store-body .account-nav-link .badge.bg-info { background-color: var(--sd-primary) !important; color: #fff !important; }

/* The avatar bubble at the top of the sidebar. */
.store-body .account-sidebar-avatar.bg-info,
.store-body .account-sidebar-avatar.bg-info.bg-opacity-10 {
    background-color: var(--sd-tint) !important;
    color: var(--sd-primary) !important;
}

/* Mobile pill row: current page in primary, the rest quiet. */
.store-body .account-nav-pill.btn-info,
.store-body .account-nav-pill.btn-info:hover,
.store-body .account-nav-pill.btn-info:focus {
    background-color: var(--sd-primary) !important;
    border-color: var(--sd-primary) !important;
    color: #fff !important;
    filter: none;
}
.store-body .account-nav-pills { scrollbar-width: thin; }

/* ---------- form controls ----------
   Bootstrap ships these in its own blue; they are the last obviously-foreign
   colour on the account pages (notification toggles, date filters, inputs). */
.store-body .form-check-input:checked {
    background-color: var(--sd-primary);
    border-color: var(--sd-primary);
}
.store-body .form-check-input:focus {
    border-color: var(--sd-primary);
    box-shadow: 0 0 0 .2rem var(--sd-tint);
}
.store-body .form-control:focus,
.store-body .form-select:focus {
    border-color: var(--sd-primary);
    box-shadow: 0 0 0 .2rem var(--sd-tint);
}

/* Pagination — used by orders, favorites and downloads. */
.store-body .page-item.active .page-link {
    background-color: var(--sd-primary);
    border-color: var(--sd-primary);
    color: #fff;
}
.store-body .page-link { color: var(--sd-cta-text); }
.store-body .page-link:hover { background-color: var(--sd-tint); color: var(--sd-primary); }

/* Focus visibility — brand-coloured, never removed. */
.store-body a:focus-visible,
.store-body button:focus-visible,
.store-body .btn:focus-visible {
    outline: 2px solid var(--sd-cta);
    outline-offset: 2px;
}
