/*
 * Joujma brand design system — override layer.
 *
 * Loaded LAST in resources/themes/default/layouts/front-end/app.blade.php, after every
 * remaining vendor stylesheet (theme.css, style.css, custom.css) and after the
 * admin-driven inline :root block. That position is what lets the custom PROPERTY
 * redefinitions below win the cascade on their own — same :root specificity, later
 * source order — without needing !important anywhere in that section.
 *
 * Vendor CSS under public/assets/front-end/ lives ONLY on the server (gitignored, no
 * build step) and is never edited directly. Everything here is additive and tracked.
 * See the storefront-refresh plan for the full rationale.
 *
 * Palette derived from the Joujma logo (sampled 2026-09-04):
 *   blue   #1E4A8C — structure: nav, headings, chrome, hover states
 *   orange #FC9024 — action: buttons/CTAs, price, discount badges
 *
 * product-cards-complete.css (a hand-written, untracked file that used to load after
 * this one) is unlinked from app.blade.php as of Phase 4 — its rules are folded into
 * the PRODUCT CARDS section below instead, recoloured onto the tokens above, with the
 * two classes it styled that are used nowhere in the theme (.btn-add-to-cart /
 * .product-card-cart-btn, .product-loading) dropped rather than carried forward.
 */

:root {
  /* ---- Brand tokens ---- */
  --jm-blue: #1E4A8C;
  --jm-blue-dark: #163A6E;
  --jm-blue-10: #1E4A8C1a;
  --jm-blue-20: #1E4A8C33;
  --jm-blue-40: #1E4A8C66;

  --jm-orange: #FC9024;
  --jm-orange-dark: #E87B10;
  --jm-orange-10: #FC90241a;

  --jm-canvas: #FAF9F7;
  --jm-surface: #FFFFFF;
  --jm-border: #E7E4DF;
  --jm-text: #22262E;
  --jm-text-muted: #6B7280;

  /* ---- Type scale (body face stays Open Sans — not a reported problem) ---- */
  --jm-font-body: "Open Sans", sans-serif;
  --jm-text-xs: 0.75rem;    /* 12px */
  --jm-text-sm: 0.875rem;   /* 14px */
  --jm-text-base: 1rem;     /* 16px */
  --jm-text-lg: 1.125rem;   /* 18px */
  --jm-text-xl: 1.375rem;   /* 22px */
  --jm-text-2xl: 1.75rem;   /* 28px */

  /* ---- Spacing scale ---- */
  --jm-space-1: 4px;
  --jm-space-2: 8px;
  --jm-space-3: 12px;
  --jm-space-4: 16px;
  --jm-space-5: 24px;
  --jm-space-6: 32px;
  --jm-space-8: 48px;

  /* ---- Radius / shadow / motion ---- */
  --jm-radius-sm: 6px;
  --jm-radius-md: 10px;
  --jm-radius-lg: 16px;
  --jm-shadow-sm: 0 1px 3px rgba(20, 24, 33, 0.08);
  --jm-shadow-md: 0 8px 24px rgba(20, 24, 33, 0.10);
  --jm-motion: 180ms ease;

  /* ---- Remap the theme's own variables onto the brand tokens ----
   * These are the exact custom-property names the vendor CSS already reads
   * everywhere (custom.css alone has ~50 uses of --web-primary/--base across
   * dropdowns, hovers, borders, badges — that's the whole point of doing it
   * here instead of hunting down every rule individually).
   *   --web-primary / --base   : custom.css, home.css, app.blade.php inline block
   *   --primary-clr            : style.css (14 hardcoded-blue uses, now correct)
   *   --primary / --accent     : theme.css's Bootstrap 4 variable layer
   * --web-secondary is left untouched — it's used structurally in places not
   * yet audited; not part of this pass.
   */
  --base: var(--jm-blue);
  --bs-base-rgb: 30, 74, 140;
  --web-primary: var(--jm-blue);
  --web-primary-10: var(--jm-blue-10);
  --web-primary-20: var(--jm-blue-20);
  --web-primary-40: var(--jm-blue-40);
  --primary-clr: var(--jm-blue);
  --primary: var(--jm-orange);
  --accent: var(--jm-orange);

  /* Our own phone-pill token, replacing the hardcoded #FF7D1E in _header.blade.php */
  --jm-phone-pill-bg: var(--jm-orange);
}

body {
  background-color: var(--jm-canvas);
  font-family: var(--jm-font-body);
}

/* ---- Deliberate divergence: these are ACTION elements, not structure ----
 * The vendor CSS ties buttons, price and discount badges to the same
 * --web-primary variable as navigation/headings. The brand direction calls
 * for those to split: blue for structure, orange for anything actionable.
 * Explicit overrides below (still no !important needed against custom.css's
 * var()-based rules, since these match on class name at equal specificity
 * and this file loads after it — !important is only added where the vendor
 * rule we're beating is itself !important).
 */

.btn--primary,
.btn-primary {
  background-color: var(--jm-orange) !important;
  border-color: var(--jm-orange) !important;
}

.btn--primary:hover,
.btn--primary:focus,
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--jm-orange-dark) !important;
  border-color: var(--jm-orange-dark) !important;
}

.text-accent {
  color: var(--jm-orange);
}

.for-discount-value {
  background: var(--jm-orange);
}

/* .product-price/.flash-product-price/.text-accent.text-dark colour is set once,
 * correctly, in the PRODUCT CARDS section below — no need to repeat it here now
 * that product-cards-complete.css (which used to force these blue) is unlinked. */

/* Hardcoded phone-pill replacement target — see _header.blade.php,
 * which now sets class="topbar-phone-pill" instead of an inline style. */
.topbar-phone-pill {
  background: var(--jm-phone-pill-bg);
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.topbar-phone-pill i {
  color: #fff;
}

/* =========================================================================
 * PRODUCT CARDS
 * Ported from product-cards-complete.css (was: public/assets/front-end/css/
 * product-cards-complete.css, a hand-written file that only ever existed on
 * the server, untracked). Recoloured onto the tokens above; !important kept
 * throughout to preserve the exact cascade behaviour it had before — this is
 * a straight port + recolour, not a rewrite, so nothing here was guessed at.
 * Two classes it styled that are used nowhere in the theme were dropped:
 * .btn-add-to-cart/.product-card-cart-btn and .product-loading (shimmer).
 * ========================================================================= */

.product-single-hover,
.flash_deal_product {
  border: 2px solid var(--jm-blue-10) !important;
  border-radius: var(--jm-radius-md) !important;
  background: var(--jm-surface) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 2px 8px rgba(30, 74, 140, 0.08) !important;
}

.product-single-hover:hover,
.flash_deal_product:hover {
  border-color: var(--jm-blue) !important;
  box-shadow: 0 12px 40px rgba(30, 74, 140, 0.25) !important;
  transform: translateY(-8px) scale(1.02) !important;
}

.product-single-hover::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(135deg, var(--jm-blue-10) 0%, var(--jm-orange-10) 100%) !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.product-single-hover:hover::before {
  opacity: 1 !important;
}

.inline_product,
.flash-deals-background-image {
  border-radius: var(--jm-radius-sm) !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  position: relative !important;
}

.inline_product img,
.__img-125px,
.product-single-hover .inline_product img {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  display: block !important;
}

.product-single-hover:hover .inline_product img,
.flash_deal_product:hover .__img-125px {
  transform: scale(1.15) rotate(2deg) !important;
}

.quick-view {
  background: transparent !important;
  backdrop-filter: none !important;
  transition: all 0.4s ease !important;
}

.product-single-hover:hover .quick-view {
  background: rgba(30, 74, 140, 0.92) !important;
  backdrop-filter: blur(8px) !important;
}

.quick-view .btn-circle {
  background: white !important;
  border: 2px solid var(--jm-blue) !important;
  color: var(--jm-blue) !important;
  width: 45px !important;
  height: 45px !important;
  box-shadow: 0 4px 15px rgba(30, 74, 140, 0.3) !important;
  transition: all 0.3s ease !important;
}

.quick-view .btn-circle:hover {
  background: var(--jm-blue) !important;
  color: white !important;
  transform: scale(1.15) !important;
  border-color: white !important;
}

.quick-view .btn-circle i {
  font-size: 18px !important;
}

.single-product-details,
.flash_deal_product_details {
  padding: 15px !important;
  position: relative !important;
  z-index: 2 !important;
  background: var(--jm-surface) !important;
}

.single-product-details h3 a,
.flash-product-title,
.single-product-details a {
  color: var(--jm-blue) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  transition: all 0.3s ease !important;
  display: block !important;
}

.product-single-hover:hover .single-product-details h3 a,
.product-single-hover:hover .single-product-details a,
.flash_deal_product:hover .flash-product-title {
  color: var(--jm-blue-dark) !important;
  transform: translateX(3px) !important;
}

.product-price,
.flash-product-price,
.text-accent.text-dark {
  color: var(--jm-orange) !important;
  font-weight: 700 !important;
}

.product-price,
.flash-product-price {
  font-size: 18px !important;
  margin-top: 8px !important;
}

.category-single-product-price,
del {
  color: #999 !important;
  font-size: 14px !important;
  opacity: 0.8 !important;
  text-decoration: line-through !important;
}

.for-discount-value {
  background: linear-gradient(135deg, var(--jm-orange) 0%, var(--jm-orange-dark) 100%) !important;
  color: white !important;
  border-radius: var(--jm-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 6px 12px !important;
  position: absolute !important;
  top: 15px !important;
  left: 15px !important;
  z-index: 10 !important;
  box-shadow: 0 4px 12px rgba(252, 144, 36, 0.4) !important;
  animation: pulse-discount 2s ease-in-out infinite !important;
}

@keyframes pulse-discount {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(252, 144, 36, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(252, 144, 36, 0.6);
  }
}

.rating-show,
.flash-product-review {
  margin-bottom: 8px !important;
}

.rating-show i,
.flash-product-review i {
  color: #ffa41c !important;
  font-size: 14px !important;
  margin-right: 2px !important;
}

.badge-style,
.badge-style2 {
  color: #666 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  background: #f0f0f0 !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  margin-left: 4px !important;
}

.out_fo_stock {
  position: absolute !important;
  bottom: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
  color: white !important;
  padding: 6px 20px !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  z-index: 10 !important;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4) !important;
}

.flash_deal_product .flash-deals-background-image {
  min-height: 150px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.product-single-hover.style--card {
  background: white !important;
  border: 2px solid var(--jm-blue-10) !important;
}

.product-single-hover.style--card:hover {
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%) !important;
}

@media (max-width: 768px) {
  .product-single-hover:hover,
  .flash_deal_product:hover {
    transform: translateY(-4px) scale(1.01) !important;
  }

  .product-price,
  .flash-product-price {
    font-size: 16px !important;
  }

  .single-product-details h3 a,
  .flash-product-title {
    font-size: 14px !important;
  }
}

.flash-deals-wrapper .product-single-hover {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.flash-deals-wrapper .product-single-hover > div {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.flash-deals-wrapper .single-product-details {
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

/* =========================================================================
 * MOBILE TAP TARGETS
 * Owl-carousel dot/arrow sizing is governed by ~15 competing, breakpoint- and
 * context-specific rules across style.css/owl.carousel.min.css (some scoped
 * to #featured_products_list specifically) — safely enlarging the VISIBLE
 * box without fighting all of those isn't worth the risk. Instead: an
 * invisible ::after hit-zone centred on each element via absolute
 * positioning, which enlarges the tappable area without changing anything
 * about how the element itself looks or where the visible dot/arrow sits.
 * These elements are already owl-carousel's own positioning contexts
 * (dots inline-block in a flex dot-row, arrows position:absolute), so the
 * pseudo-element positions correctly without adding position: here.
 * ========================================================================= */

.owl-theme .owl-dots .owl-dot,
.owl-nav .owl-prev,
.owl-nav .owl-next {
  position: relative;
}

.owl-theme .owl-dots .owl-dot::after,
.owl-nav .owl-prev::after,
.owl-nav .owl-next::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
}

/* Topbar phone/currency/language links: ~29px tall today, just under the
   32px WCAG AA minimum. */
.topbar-link {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

/* =========================================================================
 * MOBILE BOTTOM NAV
 * The theme has no bottom nav at all — navigation is hamburger-collapse
 * only. Markup: layouts/front-end/partials/_mobile-bottom-nav.blade.php.
 * ========================================================================= */

.jm-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030; /* below Bootstrap modals (1050+), above page content */
  display: flex;
  background: var(--jm-surface);
  border-top: 1px solid var(--jm-border);
  box-shadow: 0 -2px 12px rgba(20, 24, 33, 0.08);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.jm-bottom-nav-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 2px;
  min-height: 56px;
  color: var(--jm-text-muted);
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.jm-bottom-nav-item:hover,
.jm-bottom-nav-item:focus {
  color: var(--jm-blue);
  text-decoration: none;
}

.jm-bottom-nav-item i {
  font-size: 22px;
  line-height: 1;
}

.jm-bottom-nav-item.active {
  color: var(--jm-orange);
}

.jm-bottom-nav-icon-wrap {
  position: relative;
  display: inline-flex;
}

.jm-bottom-nav-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--jm-orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* Reserve space so the fixed bar never overlaps the footer/last content, and
   push the existing floating WhatsApp/scroll-top buttons (fixed at bottom:34px,
   z-index:999 in style.css) up above the new bar instead of overlapping it. */
@media (max-width: 767.98px) {
  body {
    padding-bottom: 64px;
  }

  .floating-btn-grp {
    bottom: calc(34px + 64px) !important;
  }

  .floating-btn-grp.has-product-details-sticky {
    bottom: calc(150px + 64px) !important;
  }
}