/* ============================================================================
   Aroma — brand theme
   Layered on top of Bootstrap 5.3. Implements the Brand Guidelines palette and
   typography as CSS custom properties, plus RTL-aware component styling.

   This file is the immediately-usable, hand-authored theme. The equivalent
   SCSS source (resources/sass/) drives the production build once Node is
   available (see webpack.mix.js).
   ========================================================================== */

/* --- Brand fonts -----------------------------------------------------------
   The licensed brand fonts now live in public/fonts/. Each family is declared
   once per weight so `font-weight` resolves to the correct file; the browser
   synthesises italics/intermediate weights only if a real face is missing.
     Manier         → English display / headings (Brand Guidelines pp.15-19)
     AligarhArabic  → Arabic display, headings & body
   The Google-Fonts stand-ins (Playfair Display, El Messiri, …) remain as
   fallbacks in the stacks below, so the UI degrades gracefully if a file 404s. */

/* Manier — English display serif */
@font-face {
  font-family: "Manier";
  src: url("../fonts/Manier-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manier";
  src: url("../fonts/Manier-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manier";
  src: url("../fonts/Manier-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manier";
  src: url("../fonts/Manier-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manier";
  src: url("../fonts/Manier-Heavy.otf") format("opentype");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manier";
  src: url("../fonts/Manier-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Manier";
  src: url("../fonts/Manier-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Aligarh Arabic — Arabic display / headings / body */
@font-face {
  font-family: "AligarhArabic";
  src: url("../fonts/AligarhArabic-Light.otf") format("opentype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "AligarhArabic";
  src: url("../fonts/AligarhArabic-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "AligarhArabic";
  src: url("../fonts/AligarhArabic-Medium.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "AligarhArabic";
  src: url("../fonts/AligarhArabic-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "AligarhArabic";
  src: url("../fonts/AligarhArabic-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Palette — Brand Guidelines p.14 */
  --aroma-brown: #704f2f;
  --aroma-light-brown: #d3a17a;
  --aroma-skin: #ffe5ca;
  --aroma-white: #fff3e2;
  --aroma-ink: #2b2016;

  --aroma-gradient: linear-gradient(135deg, #704f2f 0%, #d3a17a 55%, #ffe5ca 100%);

  /* Font stacks — per Aroma Brand Guidelines (2024), p.15-19:
       Manier         = English headings/display   Helvetica Neue = English body/UI
       Aligarh Arabic = Arabic headings & body (elegant modern Naskh)
     The licensed Manier + Aligarh files ship in public/fonts/ (@font-face above);
     each stack keeps a free Google Font fallback matched to that role's character
     — never to each other's role — so the UI degrades gracefully if a file 404s. */
  --aroma-heading-en: "Manier", "Playfair Display", Georgia, serif;
  --aroma-body-en: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
  --aroma-script: "Snell Roundhand", "Tangerine", "Brush Script MT", cursive;
  --aroma-heading-ar: "AligarhArabic", "El Messiri", "Amiri", "Traditional Arabic", serif;
  --aroma-body-ar: "AligarhArabic", "IBM Plex Sans Arabic", "Tahoma", sans-serif;

  /* Fields the shopper types into. Inter leads because it covers ASCII symbols
     (+ < > = / \ etc.) cleanly and contains NO Arabic — so Arabic characters
     fall through, per-glyph, to AligarhArabic right after it. Inheriting the
     Arabic display face directly renders those symbols as odd/garbled shapes. */
  --aroma-input-font: "Inter", "AligarhArabic", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Map Bootstrap theme colour to the Aroma brown */
  --bs-primary: #704f2f;
  --bs-primary-rgb: 112, 79, 47;

  --aroma-radius: 0.85rem;
  --aroma-shadow: 0 10px 30px rgba(112, 79, 47, 0.12);
}

/* --- Base ------------------------------------------------------------------ */
body {
  background-color: var(--aroma-white);
  color: var(--aroma-ink);
  font-family: var(--aroma-body-en);
  -webkit-font-smoothing: antialiased;
}

html[lang="ar"] body {
  font-family: var(--aroma-body-ar);
}

h1, h2, h3, h4, h5, .aroma-heading {
  font-family: var(--aroma-heading-en);
  color: var(--aroma-brown);
  letter-spacing: 0.2px;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] .aroma-heading {
  font-family: var(--aroma-heading-ar);
}

a {
  color: var(--aroma-brown);
  text-decoration: none;
}
a:hover {
  color: var(--aroma-light-brown);
}

.aroma-script {
  font-family: var(--aroma-script);
  font-weight: 400;
}

/* --- Buttons --------------------------------------------------------------- */
.btn-aroma {
  background-color: var(--aroma-brown);
  border: 1px solid var(--aroma-brown);
  color: var(--aroma-white);
  border-radius: 999px;
  padding: 0.65rem 1.6rem;
  font-weight: 600;
  transition: all 0.2s ease;
}
.btn-aroma:hover {
  background-color: #5c3f24;
  border-color: #5c3f24;
  color: #fff;
}
.btn-aroma-outline {
  background-color: transparent;
  border: 1px solid var(--aroma-brown);
  color: var(--aroma-brown);
  border-radius: 999px;
  padding: 0.65rem 1.6rem;
  font-weight: 600;
}
.btn-aroma-outline:hover {
  background-color: var(--aroma-brown);
  color: var(--aroma-white);
}

/* --- Navbar ---------------------------------------------------------------- */
.aroma-topbar {
  background: var(--aroma-brown);
  color: var(--aroma-skin);
  font-size: 0.85rem;
}
.aroma-topbar a {
  color: var(--aroma-skin);
}
/* Language switcher lives in the dark topbar; .aroma-icon-link's brown text
   (correct on the white navbar) would be invisible here, so override it. */
.aroma-topbar .aroma-icon-link {
  color: var(--aroma-skin);
}
.aroma-topbar .aroma-icon-link:hover,
.aroma-topbar .aroma-icon-link:focus,
.aroma-topbar .aroma-icon-link.show {
  color: #fff;
}
.aroma-topbar .dropdown-menu {
  /* .aroma-navbar is sticky-top (Bootstrap z-index: 1020), which sits directly
     below the topbar and outranks the dropdown's default z-index (1000) —
     without this the open menu renders underneath the navbar. */
  z-index: 1030;
  border: none;
  border-radius: var(--aroma-radius);
  box-shadow: var(--aroma-shadow);
  margin-top: 0.5rem;
  overflow: hidden;
}
.aroma-topbar .dropdown-item {
  color: var(--aroma-ink);
  font-size: 0.9rem;
  padding: 0.5rem 1.1rem;
}
.aroma-topbar .dropdown-item:hover,
.aroma-topbar .dropdown-item:focus {
  background: var(--aroma-skin);
  color: var(--aroma-brown);
}
.aroma-topbar .dropdown-item.active {
  background: var(--aroma-brown);
  color: #fff;
}
.aroma-navbar {
  background: var(--aroma-white);
  border-bottom: 1px solid rgba(112, 79, 47, 0.12);
}
.aroma-logo {
  font-family: var(--aroma-heading-en);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--aroma-brown);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.aroma-search .form-control {
  border-radius: 999px;
  border-color: rgba(112, 79, 47, 0.25);
  background: #fff;
}
.aroma-icon-link {
  color: var(--aroma-brown);
  position: relative;
}
.aroma-badge {
  position: absolute;
  top: -8px;
  inset-inline-end: -10px;
  background: var(--aroma-light-brown);
  color: #fff;
  border-radius: 999px;
  font-size: 0.65rem;
  padding: 0 6px;
  line-height: 1.5;
}
.aroma-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  background: var(--aroma-brown);
  flex-shrink: 0;
}

/* --- Auth shell (login/register/password pages) ---------------------------- */
.aroma-auth-shell {
  background: var(--aroma-gradient);
  min-height: 100vh;
}
.aroma-auth-brand {
  color: #fff;
}
.aroma-auth-tagline {
  color: var(--aroma-skin);
}
.aroma-auth-locale-link {
  color: #fff;
}
.aroma-auth-card {
  background: #fff;
  border: none;
  border-radius: var(--aroma-radius-lg);
  box-shadow: var(--aroma-shadow-lg);
}

/* --- Hero ------------------------------------------------------------------ */
.aroma-hero {
  background: var(--aroma-gradient);
  color: #fff;
  border-radius: var(--aroma-radius);
  padding: clamp(2.5rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
}
.aroma-hero h1 {
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.4rem);
}
.aroma-hero .aroma-hero-tagline {
  font-family: var(--aroma-script);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  color: var(--aroma-skin);
}
.aroma-hero .aroma-hero-lead {
  max-width: 640px;
  margin-inline: auto;
}

/* --- Cards / sections ------------------------------------------------------ */
.aroma-section-title {
  position: relative;
  display: inline-block;
  margin-bottom: 1.75rem;
}
.aroma-section-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--aroma-light-brown);
  margin-top: 0.5rem;
}
.aroma-category-card,
.aroma-product-card {
  background: #fff;
  border: 1px solid rgba(112, 79, 47, 0.08);
  border-radius: var(--aroma-radius);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
}
.aroma-category-card:hover,
.aroma-product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--aroma-shadow);
}
.aroma-category-card .card-body {
  background: var(--aroma-skin);
}

/* --- Trust badges ---------------------------------------------------------- */
.aroma-trust {
  background: #fff;
  border-radius: var(--aroma-radius);
  border: 1px solid rgba(112, 79, 47, 0.08);
}
.aroma-trust .aroma-trust-item {
  padding: 1.25rem;
}

/* --- Newsletter ------------------------------------------------------------ */
.aroma-newsletter {
  background: var(--aroma-brown);
  color: var(--aroma-skin);
  border-radius: var(--aroma-radius);
}
.aroma-newsletter h2 {
  color: var(--aroma-skin);
}
.aroma-newsletter .form-control {
  border-radius: 999px;
}

/* --- Footer ---------------------------------------------------------------- */
.aroma-footer {
  background: var(--aroma-ink);
  color: rgba(255, 243, 226, 0.85);
}
.aroma-footer a {
  color: rgba(255, 243, 226, 0.7);
  transition: color 0.2s ease;
}
.aroma-footer a:hover {
  color: var(--aroma-skin);
}
.aroma-footer h6 {
  color: var(--aroma-skin);
  letter-spacing: 0.08em;
  font-size: 0.8rem;
}
.aroma-footer hr {
  border-color: rgba(255, 243, 226, 0.15);
}
.aroma-footer .form-control {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 243, 226, 0.2);
  color: var(--aroma-skin);
}
.aroma-footer .form-control::placeholder {
  color: rgba(255, 243, 226, 0.5);
}
.aroma-footer .aroma-footer-brand {
  font-family: var(--aroma-script);
  color: var(--aroma-skin);
  font-size: 1.6rem;
}

/* --- RTL fine-tuning -------------------------------------------------------
   Most spacing uses logical properties so it mirrors automatically. Keep any
   directional overrides here. */
[dir="rtl"] .aroma-logo {
  letter-spacing: 0;
}

/* --- Responsive polish -----------------------------------------------------
   The layout is fluid by default (Bootstrap grid + clamp()-based type/spacing).
   These refinements tighten the phone experience: comfortable touch targets,
   less aggressive letter-spacing, and breathing room around edge content. */
@media (max-width: 991.98px) {
  .aroma-logo {
    font-size: 1.45rem;
    letter-spacing: 1px;
  }
  /* Give the nav action icons a proper ~44px tap target on touch devices. */
  .aroma-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 575.98px) {
  .aroma-hero {
    border-radius: var(--aroma-radius-sm, 0.5rem);
    padding: 2rem 1.25rem;
    text-align: center;
  }
  .aroma-section-title {
    margin-bottom: 1.25rem;
  }
  /* Stack the checkout / cart action rows so buttons never overflow narrow
     screens; keep them full-width for easier thumb reach. */
  .aroma-actions-stack {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .aroma-actions-stack .btn {
    width: 100%;
  }
}

/* Respect users who prefer reduced motion — disable the card lift transitions. */
@media (prefers-reduced-motion: reduce) {
  .aroma-category-card,
  .aroma-product-card,
  .btn-aroma,
  .btn-aroma-outline {
    transition: none;
  }
  .aroma-category-card:hover,
  .aroma-product-card:hover {
    transform: none;
  }
}

/* ============================================================================
   Checkout — a calmer, more editorial treatment scoped to .checkout-page.
   Checkout is a form-first flow, so cards are quiet surfaces (crisp thin
   border, tight radius, no hover lift), the type hierarchy is restrained, and
   the step indicator replaces the ad-hoc progress bars.
   ========================================================================== */
.checkout-page {
  --checkout-radius: 0.5rem;
  max-width: 1040px;
}

/* Cards are static content here — kill the product-card hover lift/shadow. */
.checkout-page .aroma-card {
  border: 1px solid var(--aroma-border);
  border-radius: var(--checkout-radius);
  box-shadow: 0 1px 2px rgba(112, 79, 47, 0.04);
  transition: none;
}
.checkout-page .aroma-card:hover {
  transform: none;
  box-shadow: 0 1px 2px rgba(112, 79, 47, 0.04);
}
.checkout-page .aroma-card > .card-body {
  padding: clamp(1.1rem, 3vw, 1.6rem);
}

/* Section + card headings: quieter, consistent, no ad-hoc inline colours. */
.checkout-page .card-title {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--aroma-brown);
  margin-bottom: 1.1rem;
}
.checkout-page h2.aroma-section-title {
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  margin-bottom: 1.5rem;
}
.checkout-page .form-label {
  font-size: 0.85rem;
  color: var(--aroma-ink);
  margin-bottom: 0.35rem;
}
.checkout-page .form-control {
  border-radius: 0.45rem;
}

/* Sticky order summary — a subtly tinted panel that reads as a distinct rail. */
.checkout-page .checkout-summary {
  background: #fff;
}
.checkout-page .checkout-summary .card-body { padding: 1.35rem; }
.checkout-summary-total {
  background: var(--aroma-skin);
  border-radius: var(--checkout-radius);
  padding: 0.9rem 1.1rem;
}

/* --- Step indicator -------------------------------------------------------- */
.checkout-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 2.25rem;
}
.checkout-step {
  flex: 1 1 0;
  text-align: center;
  position: relative;
  min-width: 0;
}
.checkout-step-dot {
  position: relative;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid var(--aroma-border);
  color: var(--aroma-muted);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  transition: none;
}
/* Connector line runs from each dot back toward the previous step. */
.checkout-step:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 1rem;
  inset-inline-end: 50%;
  width: 100%;
  height: 2px;
  background: var(--aroma-border);
  z-index: 0;
}
.checkout-step-label {
  display: block;
  font-size: 0.78rem;
  color: var(--aroma-muted);
  padding-inline: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.checkout-step.is-active .checkout-step-dot,
.checkout-step.is-done .checkout-step-dot {
  background: var(--aroma-brown);
  border-color: var(--aroma-brown);
  color: #fff;
}
.checkout-step.is-active .checkout-step-label,
.checkout-step.is-done .checkout-step-label {
  color: var(--aroma-brown);
  font-weight: 600;
}
.checkout-step.is-active::before,
.checkout-step.is-done::before {
  background: var(--aroma-brown);
}

@media (max-width: 575.98px) {
  .checkout-step-label { font-size: 0.62rem; }
  .checkout-step-dot { width: 1.6rem; height: 1.6rem; font-size: 0.7rem; }
  .checkout-step:not(:first-child)::before { top: 0.8rem; }
}
/* 7 steps is too many dot+label pairs for a narrow phone — collapse to a
   compact "step N of 7" readout instead of squeezing every label. */
@media (max-width: 420px) {
  .checkout-steps[data-count="7"] .checkout-step-label { display: none; }
  .checkout-steps[data-count="7"] .checkout-step-dot { margin-bottom: 0; }
  .checkout-steps[data-count="7"] { margin-bottom: 0.75rem; }
  .checkout-steps-caption { display: block; text-align: center; font-size: 0.78rem; color: var(--aroma-muted); margin: 0 0 1.5rem; }
}
.checkout-steps-caption { display: none; }

/* --- Payment method selector ----------------------------------------------- */
.aroma-pay-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 0.7rem;
}
.aroma-pay-method {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--aroma-border);
  border-radius: 0.6rem;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--aroma-ink);
  transition: border-color var(--aroma-transition-fast, 0.15s ease),
              box-shadow var(--aroma-transition-fast, 0.15s ease),
              background var(--aroma-transition-fast, 0.15s ease);
}
.aroma-pay-method > i:first-child {
  font-size: 1.4rem;
  color: var(--aroma-brown);
  flex-shrink: 0;
}
.aroma-pay-method-label { flex: 1; }
.aroma-pay-check {
  margin-inline-start: auto;
  color: var(--aroma-brown);
  font-size: 1.05rem;
  opacity: 0;
  transition: opacity var(--aroma-transition-fast, 0.15s ease);
}
.aroma-pay-method:hover { border-color: var(--aroma-light-brown); }
/* Coming-soon (Tabby / Tamara): visible but not selectable. */
.aroma-pay-method.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #faf7f2;
}
.aroma-pay-method.is-disabled:hover { border-color: var(--aroma-border); }
.aroma-pay-soon {
  margin-inline-start: auto;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--aroma-muted, #8a7c68);
  background: rgba(112, 79, 47, 0.08);
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.btn-check:checked + .aroma-pay-method {
  border-color: var(--aroma-brown);
  background: var(--aroma-white);
  box-shadow: 0 0 0 3px rgba(112, 79, 47, 0.12);
}
.btn-check:checked + .aroma-pay-method .aroma-pay-check { opacity: 1; }
.btn-check:focus-visible + .aroma-pay-method {
  border-color: var(--aroma-brown);
  box-shadow: 0 0 0 3px rgba(211, 161, 122, 0.35);
}
.aroma-pay-secure {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--aroma-muted);
}
.aroma-pay-secure i { color: var(--aroma-success); }

/* --- Delivery time slot selector -------------------------------------------- */
.aroma-slot-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.7rem;
}
.aroma-slot-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 1rem;
  border: 1.5px solid var(--aroma-border);
  border-radius: 0.6rem;
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: border-color var(--aroma-transition-fast, 0.15s ease),
              box-shadow var(--aroma-transition-fast, 0.15s ease);
}
.aroma-slot-option i { font-size: 1.5rem; color: var(--aroma-brown); }
.aroma-slot-option-label { font-weight: 600; color: var(--aroma-ink); font-size: 0.9rem; }
.aroma-slot-option-time { font-size: 0.78rem; color: var(--aroma-muted); }
.aroma-slot-option:hover { border-color: var(--aroma-light-brown); }
.btn-check:checked + .aroma-slot-option {
  border-color: var(--aroma-brown);
  box-shadow: 0 0 0 3px rgba(112, 79, 47, 0.12);
}
.btn-check:focus-visible + .aroma-slot-option {
  border-color: var(--aroma-brown);
  box-shadow: 0 0 0 3px rgba(211, 161, 122, 0.35);
}

/* The sticky order summary must sit BELOW the sticky navbar, never over it. */
.checkout-page .checkout-summary.sticky-top {
  z-index: 1;
}
@media (min-width: 992px) {
  .checkout-page .checkout-summary.sticky-top {
    top: 6.5rem; /* clears the sticky navbar + category row */
  }
}
@media (max-width: 991.98px) {
  /* On mobile the summary stacks in normal flow — sticking it is jarring. */
  .checkout-page .checkout-summary.sticky-top {
    position: static;
  }
}

/* ============================================================================
   Toast notifications (live add-to-cart) + header count bump
   ========================================================================== */
.aroma-toast-container {
  position: fixed;
  z-index: 1090;
  bottom: 1.25rem;
  inset-inline-end: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: min(360px, calc(100vw - 2rem));
  pointer-events: none;
}
.aroma-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #fff;
  color: var(--aroma-ink);
  border: 1px solid var(--aroma-border);
  border-inline-start: 4px solid var(--aroma-success);
  border-radius: 0.7rem;
  box-shadow: 0 14px 34px rgba(112, 79, 47, 0.2);
  padding: 0.85rem 1.05rem;
  transform: translateY(1rem);
  opacity: 0;
  transition: transform var(--aroma-transition, 0.25s ease), opacity var(--aroma-transition, 0.25s ease);
}
.aroma-toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.aroma-toast > i {
  font-size: 1.3rem;
  color: var(--aroma-success);
  flex-shrink: 0;
}
.aroma-toast > span {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.35;
}
.aroma-toast-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--aroma-brown);
  white-space: nowrap;
  flex-shrink: 0;
}
.aroma-toast-link:hover { color: var(--aroma-light-brown); }
.aroma-toast-danger {
  border-inline-start-color: var(--aroma-danger);
}
.aroma-toast-danger > i { color: var(--aroma-danger); }

/* Header cart count pop when it changes. */
.aroma-badge.is-bumped {
  animation: aromaBadgePop 0.35s var(--aroma-ease, ease);
}
@keyframes aromaBadgePop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .aroma-toast { transition: opacity 0.2s ease; transform: none; }
  .aroma-badge.is-bumped { animation: none; }
}

/* --- Form validation spacing ----------------------------------------------
   Give validation messages breathing room from the field above and the next
   field below (Item 5) so errors never crowd the form. */
.invalid-feedback {
  margin-top: 0.45rem;
  margin-bottom: 0.15rem;
  font-size: 0.85rem;
  line-height: 1.4;
}
.form-control.is-invalid,
.form-select.is-invalid {
  margin-bottom: 0.1rem;
}

/* ============================================================================
   Brand loading animation
   Warm-white ground (Brand Guidelines "AROMA White"). The logotype wipes on
   left-to-right so the letters emerge in order, then the slogan settles in
   beneath it, then the curtain lifts. Animates only compositor-friendly
   properties (clip-path / transform / opacity) so it stays smooth on mobile.
   ========================================================================== */
.aroma-intro-lock { overflow: hidden; }

.aroma-intro {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: radial-gradient(120% 120% at 50% 35%, #fffaf2 0%, var(--aroma-white) 60%, #f7e7d2 130%);
}
.aroma-intro.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.6s;
}

/* The whole lockup eases in together, very subtly. */
/* Resting (pre-animation) states — the sequence is started by .is-ready below. */
.aroma-intro-stage {
  text-align: center;
  opacity: 0;
  transform: scale(0.985);
}
@keyframes aromaStageIn { to { opacity: 1; transform: none; } }

/* --- Logotype: revealed left → right, letter after letter ------------------ */
.aroma-intro-word img,
.aroma-intro-word .aroma-intro-fallback {
  display: block;
  margin: 0 auto;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}
.aroma-intro-word img {
  width: min(520px, 76vw);
  height: auto;
}
/* -2% so the final swash never clips on sub-pixel rounding. */
@keyframes aromaWordReveal { to { clip-path: inset(0 -2% 0 0); } }

/* --- Slogan: settles in only after the logotype has finished --------------- */
.aroma-intro-tag { margin-top: 0.9rem; }
.aroma-intro-tag img,
.aroma-intro-tag .aroma-intro-fallback-tag {
  display: block;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(8px);
}
.aroma-intro-tag img {
  width: min(320px, 52vw);
  height: auto;
}
@keyframes aromaTagIn { to { opacity: 1; transform: none; } }

/* The sequence only starts once the artwork has actually decoded. Without this
   a slow-loading PNG lands *after* the animation has finished, so the logo just
   pops in fully formed and the reveal is never seen. */
.aroma-intro.is-ready .aroma-intro-stage {
  animation: aromaStageIn 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.aroma-intro.is-ready .aroma-intro-word img,
.aroma-intro.is-ready .aroma-intro-word .aroma-intro-fallback {
  animation: aromaWordReveal 1.15s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s forwards;
}
.aroma-intro.is-ready .aroma-intro-tag img,
.aroma-intro.is-ready .aroma-intro-tag .aroma-intro-fallback-tag {
  animation: aromaTagIn 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) 1.3s forwards;
}

/* Text fallback until `php artisan aroma:prepare-logo` generates the PNGs. */
.aroma-intro-fallback {
  font-family: var(--aroma-heading-en);
  color: var(--aroma-brown);
  font-size: clamp(2.6rem, 9vw, 4.6rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
}
.aroma-intro-fallback-tag {
  color: var(--aroma-light-brown);
  font-size: clamp(1.4rem, 4.5vw, 2.2rem);
  line-height: 1.1;
}

@media (prefers-reduced-motion: reduce) {
  .aroma-intro-stage,
  .aroma-intro-word img,
  .aroma-intro-word .aroma-intro-fallback,
  .aroma-intro-tag img,
  .aroma-intro-tag .aroma-intro-fallback-tag {
    animation: none;
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}


/* --- Header logotype (official transparent asset) --------------------------- */
.aroma-logo-img {
  display: block;
  height: 38px;
  width: auto;
  max-width: min(190px, 46vw);
  object-fit: contain;
}
@media (max-width: 991.98px) {
  .aroma-logo-img { height: 32px; }
}

/* --- Typed input --------------------------------------------------------------
   Form controls use a Latin-first stack so symbols the shopper types (+ < > = &
   / \ | ~ ^ *) render correctly. The Arabic brand face sits next in the stack,
   so Arabic text still uses it via the browser's per-glyph fallback. */
input,
textarea,
select,
.form-control,
.form-select,
.admin-input,
.admin-select,
.aroma-chat-form textarea {
  font-family: var(--aroma-input-font);
}
/* Same treatment for values that are essentially data rather than prose:
   prices, quantities, SKUs, order numbers and tracking codes. */
.aroma-price,
.aroma-price-compare,
.aroma-suggest-price,
.aroma-suggest-qty,
.aroma-added-price {
  font-family: var(--aroma-input-font);
}