/* ===========================================================
   Style Emras — Brand Theme
   Colors sourced from the official brand identity document.
   =========================================================== */

:root{
  /* brand blues */
  --brand-light:  #d5e8ef;   /* Light Blue Gray */
  --brand-sky:    #97cadb;   /* Sky Blue */
  --brand-primary:#009cd8;   /* Vivid Cerulean */
  --brand-dark:   #004f76;   /* Deep Teal Blue */

  /* warm neutral accents (balance the blue, keep pages from feeling flat) */
  --accent-gold:  #c08e4e;
  --accent-gold-light:#e3c393;
  --cream:        #faf6ee;
  --cream-2:      #f2ead9;

  /* the "pop" color — breaks the all-blue/classic feel, used sparingly for energy */
  --accent-pop:       #ff6a45;
  --accent-pop-light: #ffd8cc;

  --ink:          #1f2d33;
  --muted:        #6b7780;
  --line:         #e3edf1;

  --radius-lg: 16px;
  --radius-md: 10px;
  --shadow-sm: 0 2px 10px rgba(0,79,118,.06);
  --shadow-md: 0 10px 30px rgba(0,79,118,.10);
}

/* ---------- dark mode: redefines the surface/text tokens, brand colors stay put ----------
   A single deliberate deep-navy family (derived from --brand-dark) instead of a near-black
   neutral gray — --cream is the page surface, --cream-2 one step lighter for cards/inputs,
   --line one step lighter again for borders. Every dark-mode override in this file should
   reuse these three tokens rather than a one-off hex, so the whole page reads as one
   consistent shade of dark instead of a patchwork of unrelated grays. */
html[data-theme="dark"]{
  --cream:        #0f1b24;
  --cream-2:      #182a3b;
  --brand-light:  #1c3650;
  --ink:          #eaf0f3;
  --muted:        #93a5b8;
  --line:         #2a4256;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.25);
  --shadow-md: 0 10px 30px rgba(0,0,0,.35);
}
html[data-theme="dark"] .se-navbar{ background: var(--cream-2); border-color: var(--line); }
html[data-theme="dark"] .se-navbar .nav-link{ color: var(--ink) !important; }
html[data-theme="dark"] .se-lang-toggle,
html[data-theme="dark"] .se-theme-toggle{ background: var(--cream-2); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .se-contact-card{ background: var(--cream-2); }
html[data-theme="dark"] .journey-card{ background: var(--cream-2); }
html[data-theme="dark"] .journey-card h3{ color: var(--accent-gold-light); }
html[data-theme="dark"] .form-control{ background: var(--cream-2); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .form-control::placeholder{ color: var(--muted); }
html[data-theme="dark"] .form-control:focus{ background: var(--cream-2); color: var(--ink); }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6{ color: var(--accent-gold-light); }
html[data-theme="dark"] .se-auth-title{ color: var(--accent-gold-light); }
/* Bootstrap's .text-muted and .form-text both ship a fixed gray that isn't wired to our
   theme tokens, so they go almost invisible against the dark background — override here. */
html[data-theme="dark"] .text-muted{ color: var(--muted) !important; }
html[data-theme="dark"] .form-text{ color: var(--muted) !important; }
/* Several elements deliberately use the brand-dark navy as text, which reads fine on the
   light cream surfaces it was designed for but goes near-invisible once dark mode swaps
   those same surfaces to a dark background — redirect them to the lighter gold token,
   same treatment already used for headings. */
html[data-theme="dark"] .se-navbar .navbar-brand,
html[data-theme="dark"] .se-admin-stat .num,
html[data-theme="dark"] .se-price-range-values,
html[data-theme="dark"] .se-catalog-sidebar-title,
html[data-theme="dark"] .se-cert-modal-title{ color: var(--accent-gold-light) !important; }
html[data-theme="dark"] .se-admin-badge{ color: var(--ink); }
html[data-theme="dark"] .btn-outline-secondary{ color: var(--muted); border-color: var(--muted); }
html[data-theme="dark"] .btn-outline-secondary:hover{ color: var(--ink); border-color: var(--ink); background: var(--cream); }

html{
  height: 100%;
}
body{
  font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
  background: var(--cream);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main{ flex: 1 0 auto; }
body > footer{ flex-shrink: 0; }

h1, h2, h3, h4, h5, h6{
  font-weight: 700;
  color: var(--brand-dark);
}

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

/* ---------- navbar ---------- */
body > header{
  position: sticky;
  top: 0;
  z-index: 1030;
}
.se-navbar{
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
/* Bootstrap's default toggler icon is a fixed-color SVG background-image not wired to our
   theme tokens — barely visible against the light border, and nearly invisible against a dark
   navbar. Replaced with our own icon button matching the rest of the navbar's icon family. */
.se-nav-toggler{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  padding: 0;
  color: var(--ink);
  transition: border-color .15s ease, color .15s ease;
}
.se-nav-toggler svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.se-nav-toggler:hover, .se-nav-toggler:focus{ border-color: var(--brand-primary); color: var(--brand-primary); box-shadow: none; outline: none; }
html[data-theme="dark"] .se-nav-toggler{ background: var(--cream-2); border-color: var(--line); color: var(--ink); }

.se-navbar .navbar-brand{
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--brand-dark) !important;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.se-navbar .navbar-brand .brand-en{ color: var(--brand-primary); }
.se-navbar .nav-link{
  color: var(--ink) !important;
  font-weight: 600;
  margin: 0 .35rem;
  position: relative;
  padding-bottom: 4px;
}
    .se-navbar .nav-link::after {
        content: "";
        position: absolute;
        bottom: 0;
        inset-inline-start: 0;
        width: 0;
        height: 2px;
        background: var(--accent-pop);
        border-radius: 2px;
        transition: width .22s ease;
    }
.se-navbar .nav-link:hover,
.se-navbar .nav-link.active{
  color: var(--brand-primary) !important;
}
.se-navbar .nav-link:hover::after,
.se-navbar .nav-link.active::after{
  width: 100%;
}

.btn-brand{
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
  font-weight: 700;
  border-radius: var(--radius-md);
}
.btn-brand:hover{
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}
.btn-brand-outline{
  background: transparent;
  border: 1.5px solid var(--brand-primary);
  color: var(--brand-primary);
  font-weight: 700;
  border-radius: var(--radius-md);
}
.btn-brand-outline:hover{
  background: var(--brand-primary);
  color: #fff;
}
.btn-gold{
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: #fff;
  font-weight: 700;
  border-radius: var(--radius-md);
}
.btn-gold:hover{
  background:#a97a3d;
  border-color:#a97a3d;
  color:#fff;
}

/* ---------- leaf motif (from the logo shape) ---------- */
.se-leaf{
  width: 22px; height: 22px;
  border-radius: 0 100% 0 100%;
  display: inline-block;
}
.se-leaf-pattern{
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 18px; padding: 20px;
  opacity: .05; pointer-events: none; overflow: hidden;
}

/* ---------- حركة الدخول لصفحة "من نحن" — إيد حقيقية (Bootstrap Icon، مش رسمة) بتسحب
   المحتوى لتحت. الإيد بتفضل واقفة وهي شادة لحد ما المحتوى يستقر تمامًا في مكانه (0%-78%)،
   وبعد كده بس — مش قبل — بتكمل نزول وتختفي (78%-100%). صفحة "من نحن" كلها (مش بس الهيرو)
   بتنزل بنفس الاتجاه ده (.se-about-drop تحت)، عشان تبقى ليها حركتها الخاصة المختلفة عن
   باقي الموقع اللي بيطلع من تحت (reveal-up) — كل صفحة بشخصيتها. ---------- */
.se-about-intro-gesture{
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  animation: seAboutGestureSweep 1.8s cubic-bezier(.65, 0, .35, 1) forwards;
}
@keyframes seAboutGestureSweep{
  0%{ transform: translateY(0); opacity: 1; }
  55%{ transform: translateY(46vh); opacity: 1; }
  78%{ transform: translateY(46vh); opacity: 1; }
  100%{ transform: translateY(52vh); opacity: 0; }
}

/* محتوى صفحة "من نحن" — بينزل من فوق (عكس reveal-up العادي)، عشان يتماشى مع اتجاه سحب
   الإيد فوق. مستخدم في كل سكاشن الصفحة بدل reveal-up. */
.se-about-drop{
  opacity: 0;
  transform: translateY(-28px);
  transition: opacity .6s ease, transform .6s ease;
}
.se-about-drop.is-visible{ opacity: 1; transform: none; }

/* ⚠️ لازم right فيزيائي مش inset-inline-end — أي حاجة هنا لازم تفضل ثابتة الجنب مع RTL،
   نفس الدرس اللي اتوثّق قبل كده مع نص الهيرو (§14). */
.se-about-intro-hand{
  position: absolute;
  top: 16%;
  right: 16%;
  font-size: 2.75rem;
  color: var(--brand-dark);
  transform: rotate(-18deg);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18));
}
html[data-theme="dark"] .se-about-intro-hand{ color: var(--accent-gold-light); }

@media (max-width: 575.98px){
  .se-about-intro-hand{ font-size: 2.1rem; top: 14%; right: 20%; }
}

@media (prefers-reduced-motion: reduce){
  .se-about-intro-gesture{ display: none; }
}

/* ---------- "ليش الطلب عبر واتساب" — 3 كروت بأيقونة، بتحوّل حقيقة (مفيش بوابة دفع،
   متابعة يدوية) من نقطة مدفونة في فقرة نص لميزة واضحة. ---------- */
.se-about-why-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  max-width: 900px;
  margin-inline: auto;
}
.se-about-why-card{ text-align: center; padding: .5rem 1rem; }
.se-about-why-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand-dark);
  font-size: 1.4rem;
}
html[data-theme="dark"] .se-about-why-icon{ color: var(--accent-gold-light); }
.se-about-why-card h3{ font-size: 1.05rem; margin-bottom: .35rem; }
@media (max-width: 767.98px){
  .se-about-why-grid{ grid-template-columns: 1fr; max-width: 340px; }
}

/* ---------- "معتمدون رسميًا" — نفس شارات الفوتر الحقيقية، بس معروضة أكبر وبمساحة تنفس
   كسكشن قائم بذاته بدل شريط ضيق تحت. ---------- */
.se-leaf-pattern .se-leaf:nth-child(odd){ background: var(--accent-gold); transform: translateY(8px); }
.se-leaf-pattern .se-leaf:nth-child(even){ background: var(--brand-dark); }

/* ---------- footer ---------- */
.se-footer{
  background: var(--cream);
  color: var(--ink);
  border-top: 1px solid var(--line);
  margin-top: 4rem;
}
.se-footer-accent{
  height: 4px;
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-pop));
}
.se-footer-leaves{ opacity: .06; }
.se-footer-leaves .se-leaf:nth-child(odd){ background: var(--accent-gold); }
.se-footer-leaves .se-leaf:nth-child(even){ background: var(--brand-primary); }
/* The logo used here is now the transparent version, so it no longer needs a solid white
   card behind it to avoid a stray box — sits directly on the footer's own background. */
.se-footer-brand-badge{
  display: inline-flex;
}
.se-footer-brand-badge img{ height: 48px; width: auto; display: block; }
.se-footer .col-lg-3 p,
.se-footer .col-lg-5 p{ color: color-mix(in srgb, var(--muted) 80%, var(--ink) 20%); }
.se-footer a{ color: color-mix(in srgb, var(--muted) 80%, var(--ink) 20%); }
.se-footer a:hover{ color: var(--brand-primary); }
.se-footer h6{
  color: var(--brand-dark);
  font-weight: 700;
  margin-bottom: 1rem;
  position: relative;
  padding-bottom: .6rem;
}
html[data-theme="dark"] .se-footer h6{ color: var(--accent-gold-light); }
.se-footer h6::after {
    content: "";
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    width: 34px;
    height: 3px;
    border-radius: 3px;
    background: var(--accent-gold-light);
}
.se-footer-links li{ margin-bottom: .55rem; }
.se-footer-links li a,
.se-footer-policy-link{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: gap .15s ease, color .15s ease;
}
.se-footer-links li a::before,
.se-footer-policy-link::before{
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-pop);
  flex-shrink: 0;
}
.se-footer-links li a:hover,
.se-footer-policy-link:hover{ gap: .7rem; }
.se-footer-policy-link{
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: start;
}

.se-cert-modal-body{
  color: var(--ink);
  font-size: .92rem;
  line-height: 1.9;
  overflow-y: auto;
}
.se-cert-modal-body p{ margin: 0 0 .8rem; }
.se-cert-modal-body p:last-child{ margin-bottom: 0; }
.se-cert-modal-body ul{ margin: 0 0 .8rem; padding-inline-start: 1.2rem; }
/* ---------- footer contact + registration numbers: plain lines, no boxes or fills ---------- */
.se-footer-contact { display: flex; flex-direction: column; gap: .75rem; margin: 0; padding: 0; }
.se-footer-contact a {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    font-size: .92rem;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.se-footer-contact a::before { content: none; }
.se-footer-contact svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: var(--accent-gold);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
html[data-theme="dark"] .se-footer-contact svg { stroke: var(--accent-gold-light); }

.se-footer-reg { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .95rem; }
.se-footer-reg li { display: flex; align-items: center; gap: .85rem; }
.se-fr-logo { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.se-fr-icon { fill: none; stroke: var(--brand-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; padding: 3px; }
.se-fr-text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.se-fr-text small { font-size: .74rem; font-weight: 600; color: var(--muted); }
.se-fr-text b {
    font-size: 1rem;
    font-weight: 800;
    color: var(--brand-dark);
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    text-align: start;
    unicode-bidi: plaintext;
}
html[data-theme="dark"] .se-fr-text b { color: var(--accent-gold-light); }
html[data-theme="dark"] .se-fr-icon { stroke: var(--accent-gold-light); }
/* the ministry-of-industry ring is mid-grey: lift it a little on the dark footer so it stays legible */
html[data-theme="dark"] .se-fr-logo:not(.se-fr-icon) { filter: brightness(1.35); }
.se-footer .footer-bottom{
  border-top: 1px solid var(--line);
  margin-top: 2rem;
  padding: 1rem 0;
  font-size: .85rem;
  color: color-mix(in srgb, var(--muted) 80%, var(--ink) 20%);
}

/* ---------- pop accent ---------- */
.pop-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  background: var(--accent-pop-light);
  color:#c1410f;
  border-radius:100px;
  padding:.4rem 1rem;
  font-weight:700; font-size:.85rem;
}
.btn-pop{
  background: var(--accent-pop);
  border-color: var(--accent-pop);
  color:#fff; font-weight:700; border-radius: var(--radius-md);
}
.btn-pop:hover{ background:#e0532f; border-color:#e0532f; color:#fff; }
/* Bootstrap's own .btn.disabled rule (two classes) outranks a plain .btn-pop/.btn-brand-outline
   color rule (one class), so a disabled admin CTA was silently falling back to Bootstrap's
   default disabled colors — transparent, generic gray border — instead of just fading its own
   real color. Re-declared at the same specificity so each button keeps its own look, just dimmed. */
.btn-pop.disabled{ background: var(--accent-pop); border-color: var(--accent-pop); color: #fff; }
.btn-brand.disabled{ background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.btn-brand-outline.disabled{ background: transparent; border-color: var(--brand-primary); color: var(--brand-primary); }

/* logo */
.se-navbar .navbar-brand img{ height: 46px; width:auto; }

/* ---------- language toggle: drives the Google Translate widget ---------- */
.se-lang-toggle{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .35rem .8rem;
  font-weight: 700;
  font-size: .85rem;
  color: var(--ink);
  transition: border-color .15s ease, color .15s ease;
}
.se-lang-toggle svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.se-lang-toggle:hover{ border-color: var(--brand-primary); color: var(--brand-primary); }

/* hide Google's own translate UI/banner, we drive it via our own button */
#google_translate_element{ display: none !important; }
.goog-te-banner-frame{ display: none !important; }
body{ top: 0 !important; }
.skiptranslate{ display: none !important; }

/* ---------- dark / light theme toggle button ---------- */
.se-theme-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  transition: border-color .15s ease, color .15s ease;
}
.se-theme-toggle:hover{ border-color: var(--brand-primary); color: var(--brand-primary); }
.se-theme-toggle svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.se-theme-icon-moon{ display: none; }
.se-theme-toggle.is-dark .se-theme-icon-sun{ display: none; }
.se-theme-toggle.is-dark .se-theme-icon-moon{ display: block; }

/* ---------- toast notifications (success/error, site-wide) ---------- */
.se-toast-stack{
  position: fixed;
  top: 90px;
  left: 16px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: min(340px, calc(100vw - 32px));
  pointer-events: none;
}
@media (max-width: 575.98px){
  .se-toast-stack{ left: 8px; right: 8px; width: auto; }
}
.se-toast{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: .9rem 1.1rem;
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: auto;
  overflow: hidden;
}
.se-toast.is-visible{ opacity: 1; transform: translateX(0); }
.se-toast-row{ display: flex; align-items: center; gap: .75rem; }
.se-toast-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}
.se-toast-success .se-toast-icon{ background: rgba(37,169,90,.15); color: #25a95a; }
.se-toast-error .se-toast-icon{ background: rgba(255,106,69,.15); color: var(--accent-pop); }
.se-toast-icon svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.se-toast-message{ flex: 1; font-size: .9rem; font-weight: 600; color: var(--ink); }
.se-toast-close{
  background: none; border: none; color: var(--muted); font-size: 1.2rem; line-height: 1; padding: 0 .2rem; cursor: pointer;
}
.se-toast-actions{ display: flex; gap: .5rem; padding-inline-start: 40px; }
.se-toast-actions .btn{ flex: 1; padding: .35rem .6rem; font-size: .8rem; }
.se-toast-progress{
  position: absolute; bottom: 0; right: 0; left: 0; height: 3px;
  color: inherit;
  background: currentColor;
  transform-origin: right;
  animation: seToastProgress 4.2s linear forwards;
}
.se-toast-success .se-toast-progress{ color: #25a95a; }
.se-toast-error .se-toast-progress{ color: var(--accent-pop); }
@keyframes seToastProgress{
  from{ transform: scaleX(1); }
  to{ transform: scaleX(0); }
}
html[data-theme="dark"] .se-toast{ background: var(--cream-2); }
@media (prefers-reduced-motion: reduce){
  .se-toast{ transition: none; }
  .se-toast-progress{ animation: none; }
}

/* ---------- admin new-order notification bell ---------- */
.se-notif-bell{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--accent-gold);
  transition: border-color .15s ease, color .15s ease;
}
.se-notif-bell:hover{ border-color: var(--accent-gold); color: var(--accent-gold); }
.se-notif-bell svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.se-notif-badge{
  position: absolute;
  top: -4px; left: -4px;
  min-width: 17px; height: 17px;
  padding: 0 3px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-pop);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  border-radius: 100px;
  border: 2px solid var(--cream);
}
html[data-theme="dark"] .se-notif-bell{ background: var(--cream-2); border-color: var(--line); }
html[data-theme="dark"] .se-notif-badge{ border-color: var(--cream-2); }

/* ---------- logout icon button ---------- */
.se-logout-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  padding: 0;
  transition: border-color .15s ease, color .15s ease;
}
.se-logout-btn:hover{ border-color: var(--accent-pop); color: var(--accent-pop); }
.se-logout-btn svg{ width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme="dark"] .se-logout-btn{ background: var(--cream-2); border-color: var(--line); color: var(--ink); }

.se-login-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  transition: border-color .15s ease, color .15s ease;
}
.se-login-link:hover{ border-color: var(--brand-primary); color: var(--brand-primary); }
.se-login-link svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme="dark"] .se-login-link{ background: var(--cream-2); border-color: var(--line); color: var(--ink); }

/* ---------- navbar greeting dropdown ---------- */
.se-greeting-menu{
  min-width: 190px;
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: .5rem;
}
.se-greeting-menu .dropdown-item{
  display: flex;
  align-items: center;
  gap: .6rem;
  border-radius: 8px;
  padding: .55rem .75rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
}
.se-greeting-menu .dropdown-item svg{ width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; color: var(--muted); }
.se-greeting-menu .dropdown-item:hover{ background: var(--cream-2); }
    .se-greeting-menu .dropdown-item.se-greeting-logout {
        color: var(--accent-pop);
        width: 100%;
        text-align: start;
        background: none;
        border: none;
    }
.se-greeting-logout svg{ color: var(--accent-pop) !important; }
html[data-theme="dark"] .se-greeting-menu{ background: var(--cream); }
html[data-theme="dark"] .se-greeting-menu .dropdown-item:hover{ background: var(--cream-2); }

/* ---------- hero section: rounded, elevated "paper" edge ---------- */
.se-hero{
  margin: 0;
  height: calc(100vh - var(--nav-height, 88px));
  box-shadow: 0 40px 70px -30px rgba(0, 79, 118, .3);
}

/* ---------- ريش خفيفة عايمة في الهيرو — لمسة حياة هادية، مش لافتة للنظر أكتر من اللازم ---------- */
.se-hero-feathers{
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.se-hero-feather{
  position: absolute;
  border-radius: 0 100% 0 100%;
  opacity: .22;
  animation: seHeroFeatherFloat 9s ease-in-out infinite;
}
.se-hero-feather:nth-child(1){ width: 26px; height: 26px; top: 18%; left: 8%;  background: var(--accent-gold); animation-duration: 10s; }
.se-hero-feather:nth-child(2){ width: 18px; height: 18px; top: 62%; left: 16%; background: var(--brand-sky); animation-duration: 8s; animation-delay: 1.2s; }
.se-hero-feather:nth-child(3){ width: 32px; height: 32px; top: 40%; left: 32%; background: var(--accent-pop); opacity: .14; animation-duration: 12s; animation-delay: 2.5s; }
.se-hero-feather:nth-child(4){ width: 20px; height: 20px; top: 78%; left: 38%; background: var(--accent-gold-light); animation-duration: 9s; animation-delay: .6s; }
.se-hero-feather:nth-child(5){ width: 15px; height: 15px; top: 12%; left: 42%; background: var(--brand-primary); animation-duration: 7.5s; animation-delay: 1.8s; }

@keyframes seHeroFeatherFloat{
  0%, 100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-18px) rotate(12deg); }
}

@media (max-width: 991.98px){
  .se-hero-feathers{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .se-hero-feather{ animation: none; }
}

/* ---------- hero product photo, with text overlaid on its empty side ---------- */
.se-hero-photo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  transform: scale(1.15);
  transform-origin: 30% 50%;
  /* الصورة دي بتتحرك (scale) باستمرار بـ GSAP وهي full-viewport — بنثبتها على طبقة GPU
     خاصة بيها عشان المتصفح مايعيدش رسم/دمج الهيرو كله كل فريم، ده كان سبب حقيقي في اللاج */
  will-change: transform;
}
.se-hero-fade{
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--cream) 45%, transparent) 0%,
    color-mix(in srgb, var(--cream) 18%, transparent) 18%,
    transparent 36%);
}
/* The light-mode fade above is deliberately subtle (tuned across several rounds to keep the
   photo vivid), which isn't enough to darken the photo or keep the gold/muted hero text
   readable once dark mode swaps that text to light colors meant for a dark backdrop — dark
   mode gets its own stronger, wider scrim instead of reusing the same light-mode gradient. */
html[data-theme="dark"] .se-hero-fade{
  background: linear-gradient(to right,
    rgba(6, 12, 17, .82) 0%,
    rgba(6, 12, 17, .58) 30%,
    rgba(6, 12, 17, .3) 55%,
    rgba(6, 12, 17, .08) 80%);
}
.se-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 480px;
    margin-left: 0;
    margin-right: auto;
}

@media (max-width: 991.98px){
  .se-hero-fade{
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--cream) 38%, transparent) 0%,
      color-mix(in srgb, var(--cream) 16%, transparent) 45%,
      color-mix(in srgb, var(--cream) 3%, transparent) 100%);
  }
    .hero-actions {
        margin-top: 6rem !important;
    }
  html[data-theme="dark"] .se-hero-fade{
    background: linear-gradient(180deg,
      rgba(6, 12, 17, .8) 0%,
      rgba(6, 12, 17, .5) 45%,
      rgba(6, 12, 17, .15) 100%);
  }
 /* .se-hero-copy{ max-width: 100%; margin-inline: auto; }
 */
    .se-hero-copy {
        margin-top: -9rem !important;
        max-width: 100%;
        margin-inline: auto;
    }
  .se-hero-photo{ transform: scale(1.05); transform-origin: center 25%; }
  .se-hero{ align-items: flex-start; }
    .se-hero .container {
        padding-top: 0 !important;
    }
}
/*@media (max-width: 575.98px){
  .hero-actions{ flex-direction: column; width: 100%; align-items: center; }
  .hero-actions .btn{ width: 100%; max-width: 280px; }
  .se-hero .btn-brand-outline{
    background: rgba(255,255,255,.8);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
}*/

@media (max-width: 575.98px) {
    .hero-actions {
        flex-direction: column;
        width: 100%;
        align-items: center;
        margin-top: 15rem; /* بينزل الأزرار لتحت من غير ما يأثر على مكان العنوان/الوصف فوق */
    }

        .hero-actions .btn {
            width: 100%;
            max-width: 280px;
        }

    .se-hero .btn-brand-outline {
        background: rgba(255,255,255,.8);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }
}

/* ---------- hero scroll-down cue ---------- */
.se-hero-scroll-cue{
  position: absolute;
  z-index: 3;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 50%;
  color: var(--brand-dark);
  backdrop-filter: blur(3px);
}
.se-hero-scroll-cue svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference){
  .se-hero-scroll-cue{ animation: seScrollCueBounce 2.2s ease-in-out infinite; }
}
@keyframes seScrollCueBounce{
  0%, 100%{ transform: translateX(-50%) translateY(0); }
  50%{ transform: translateX(-50%) translateY(6px); }
}
html[data-theme="dark"] .se-hero-scroll-cue{ background: rgba(18,24,28,.55); border-color: rgba(255,255,255,.15); color: var(--accent-gold-light); }

/* ---------- reveal-on-scroll base state (JS adds .is-visible) ---------- */
.reveal-up{ opacity: 0; transform: translateY(28px); }
/* transform: none هنا عن قصد، مش translateY(0) — أي قيمة transform غير none (حتى لو 0px)
   بتعمل containing block جديد لأي عنصر جواها بـ position:fixed. ده كان بيكسر مودال
   "العين" بتاع _LatestProductCard.cshtml بعد ما الكارت يتكشف: المودال (المفروض ياخد
   الشاشة كاملة كـ overlay) كان بيتحبس جوه مربع الكارت نفسه بدل ما يتمركز في نص الشاشة —
   بالظبط اللي ظهر في الصورة (بوبين صغيرين جنب الكاردات بدل بوب واحدة في النص). */
.reveal-up.is-visible{ opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }

/* الكروت التلاتة بتوع "أحدث تشكيلاتنا" تطلع واحد ورا التاني بدل ما تظهر كلها مع بعض دفعة
   واحدة — نفس نظام reveal-up بس بتأخير بسيط متدرج لكل كارت. */
.se-latest-strip-row > .reveal-up.is-visible:nth-child(1){ transition-delay: 0s; }
.se-latest-strip-row > .reveal-up.is-visible:nth-child(2){ transition-delay: .12s; }
.se-latest-strip-row > .reveal-up.is-visible:nth-child(3){ transition-delay: .24s; }

/* ---------- section heading ---------- */
.section-eyebrow{
  display: block;
  color: var(--accent-gold);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .03em;
  margin-bottom: .5rem;
}
.section-title{
  font-size: 2rem;
  margin: 0;
}

/* ---------- journey / "رحلتك معانا" timeline ---------- */
.se-journey{
  background: var(--cream);
}
.journey-line-wrap{
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding: 1rem 0;
}
.journey-line{
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.journey-line-fill{
  width: 100%; height: 100%;
  background: linear-gradient(180deg, var(--accent-gold) 0%, var(--accent-pop) 100%);
  transform: scaleY(0);
  transform-origin: top;
}

.journey-card-shipping-logos{
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: .75rem;
}
.journey-card-shipping-logos img{ height: 34px; width: auto; }
.journey-item{
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding: 1.75rem 0;
}
   
.journey-item:nth-child(even){ justify-content: flex-start; }
.journey-dot{
  position: absolute;
  top: 2.25rem; left: 50%;
  width: 16px; height: 16px;
  transform: translateX(-50%);
  background: var(--accent-gold);
  border: 3px solid var(--cream);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  z-index: 1;
}
.journey-card {
    width: 44%;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem 1.5rem;
    text-align: start;
}
.journey-card h3{ font-size: 1.05rem; margin-bottom: .35rem; }
.journey-card p{ margin: 0; color: var(--muted); font-size: .92rem; }

@media (max-width: 767.98px){
  .journey-line{ left: 18px; }
  .journey-dot{ left: 18px; }
    .journey-item,
    .journey-item:nth-child(even) {
        justify-content: flex-end;
        padding-inline-start: 2.75rem;
    }
  .journey-card{ width: 100%; }
}

/* ---------- phone-mockup showcase (scroll-scrubbed crossfade, no pin) ---------- */
.se-phone-showcase{
  background: var(--cream);
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: 3rem 0;
}
.se-phone-showcase > .container{ width: 100%; }
.journey-line-continue-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  margin-top: -.5rem;
}
.journey-line-continue{
  width: 3px;
  height: 64px;
  background: linear-gradient(180deg, var(--accent-pop), var(--accent-gold));
  border-radius: 3px;
  transform: scaleY(0);
  transform-origin: top;
}
.journey-line-continue-dot{
  width: 12px; height: 12px;
  margin-top: -2px;
  background: var(--accent-pop);
  border: 3px solid var(--cream);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transform: scale(0);
}
html[data-theme="dark"] .journey-line-continue-dot{ border-color: var(--cream-2); }
.phone-pin-stage{
  position: relative;
  height: 380px;
  /* كان 1000px — الموبايل والنص كانوا بيتباعدوا لأقصى الحواف فيحسّوا إن الشاشة فاضية ومش
     متمركزة وقت التثبيت؛ عرض أضيق يخلي الاتنين أقرب لمنتصف الشاشة فعليًا */
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}
.phone-mock{
  position: absolute;
  top: 50%; left: 76%;
  width: 190px;
  transform: translate(-50%, -50%);
}
.phone-mock svg{ width: 100%; height: auto; filter: drop-shadow(var(--shadow-md)); }
.phone-copy{
  position: absolute;
  top: 50%; left: 4%;
  width: 42%;
  transform: translateY(-50%);
}
.phone-copy h3{ font-size: 1.3rem; }
.phone-copy-2{ left: 54%; opacity: 0; }

/* محتوى شاشة الموبايل بيتبدل مع نفس توقيت تبديل الكلام: تصفح (كروت منتجات + بادج طلب) وقت
   الحالة الأولى، وتوصيل (لوجو سبل وناقل كبيرين) وقت الحالة التانية.
   ⚠️ الـ transition متعمول عن قصد بس على الموبايل (شوف الميديا كويري تحت) — الديسكتوب
   بيعتمد على GSAP scrub بيحدّث الـ opacity كل فريم سكرول مباشرة؛ لو سبنا transition هنا
   في القاعدة العامة، كل تحديث من الـ scrub كان بيبدأ transition جديد فوق التاني، فيبان
   تأخير/تكهرب حقيقي بين موضع الموبايل والنص وبين لحظة ظهور شاشة التوصيل فعليًا. */
.phone-screen-deliver{ opacity: 0; }

@media (max-width: 991.98px){
  .se-phone-showcase{ min-height: 0; gap: 1.25rem; padding: 2rem 0; }
  .phone-pin-stage{ height: auto; position: static; }
  .phone-mock,
  .phone-copy{
    position: static; transform: none; width: 100%; max-width: 260px; margin: 0 auto 1.25rem;
    opacity: 0; translate: 0 20px;
    transition: opacity .6s ease, translate .6s ease;
  }
  .phone-mock{ max-width: 150px; }
  .phone-copy{ max-width: none; }
  .phone-copy-2{ margin-top: 0; }
  /* الثلاثة بيتفعّلوا مع بعض من نفس نقطة المراقبة (شوف animations.js) — تدرّج بسيط
     بالتأخير هنا بس، عشان يبانوا كوحدة واحدة مركّبة مش ظهور مبعثر على مراحل سكرول مختلفة */
  .phone-mock.is-visible{ opacity: 1; translate: 0 0; transition-delay: 0s; }
  .phone-copy-1.is-visible{ opacity: 1; translate: 0 0; transition-delay: .12s; }
  .phone-copy-2.is-visible{ opacity: 1; translate: 0 0; transition-delay: .22s; }
  /* شاشة الموبايل (تصفح/توصيل) بتتبدل بالـ scroll-scrub في animations.js مباشرة —
     مقصود متسيبش transition هنا، عشان الـ opacity يفضل مربوط بموضع السكرول 1:1 في
     الاتجاهين (نزول وطلوع)، من غير أي تأخير إضافي فوق حركة GSAP نفسها. */
}

/* ---------- floating WhatsApp button ---------- */
.se-whatsapp-fab{
  position: fixed;
  bottom: 22px;
  left: 22px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  z-index: 1040;
  transition: transform .2s ease;
}
.se-whatsapp-fab:hover{ transform: scale(1.08); }
.se-whatsapp-fab svg{ width: 28px; height: 28px; fill: #fff; }

/* ---------- auth pages (login / register): split screen ---------- */
.se-auth-form-col{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  background: var(--cream);
}
.se-auth-form-wrap{ width: 100%; max-width: 400px; }
.se-auth-logo{ display: inline-block; margin-bottom: 2rem; }
.se-auth-logo img{ height: 42px; width: auto; }
.se-auth-confirm-icon{
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-light);
  border-radius: 50%;
  margin-bottom: 1.5rem;
}
.se-auth-confirm-icon svg{ width: 32px; height: 32px; fill: none; stroke: var(--brand-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.se-auth-confirm-icon-success{ background: linear-gradient(135deg, var(--accent-gold), var(--accent-pop)); }
.se-auth-confirm-icon-success svg{ stroke: #fff; stroke-width: 2.2; }
.se-auth-confirm-icon-error{ background: color-mix(in srgb, var(--accent-pop) 16%, transparent); }
.se-auth-confirm-icon-error svg{ stroke: var(--accent-pop); }
.se-auth-title{ color: var(--brand-dark); font-weight: 700; margin-bottom: .35rem; }
.se-auth-sub{ color: var(--muted); margin-bottom: 0; }
.se-auth-countdown{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--brand-primary);
  background: var(--brand-light);
  border-radius: 100px;
  padding: .45rem 1rem;
  font-size: .82rem;
  font-weight: 600;
  margin: 1rem 0 0;
}
.se-auth-countdown span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-size: .74rem;
  font-weight: 800;
}
html[data-theme="dark"] .se-auth-confirm-icon-error{ background: color-mix(in srgb, var(--accent-pop) 24%, transparent); }
.se-auth-btn-icon{ width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; margin-inline-end: .4rem; }
.se-auth-form-wrap .form-label{ font-weight: 600; color: var(--ink); font-size: .9rem; }
.se-auth-form-wrap .form-control{ border-radius: var(--radius-md); padding: .65rem .9rem; border-color: var(--line); }
.se-auth-form-wrap .form-control:focus{ border-color: var(--brand-primary); box-shadow: 0 0 0 .2rem rgba(0,156,216,.15); }
.se-auth-form-wrap a{ font-weight: 600; }

.se-auth-visual{
  position: relative;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 15% 12%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(160deg, var(--brand-primary) 0%, var(--brand-dark) 65%, #00314a 100%);
  padding: 3rem;
}
.se-auth-visual .se-leaf-pattern{ opacity: .12; }
.se-auth-visual .se-leaf-pattern .se-leaf:nth-child(odd){ background: var(--accent-gold-light); }
.se-auth-visual .se-leaf-pattern .se-leaf:nth-child(even){ background: #fff; }
.se-auth-visual-content{
  position: relative;
  z-index: 1;
  max-width: 380px;
  text-align: center;
  color: #fff;
}
.se-auth-visual-content h2{ color: #fff; font-weight: 700; margin: 0; font-size: 1.5rem; }
.se-auth-visual-content p{ color: rgba(255,255,255,.85); margin: 0; }

/* ---------- auth panel icon: simple line-art mark, not a filled cartoon ---------- */
.se-auth-icon{
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.se-auth-icon svg{
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  fill: none;
  stroke: var(--accent-gold-light);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.se-auth-icon-ring{
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: 50%;
}
.se-auth-icon-ring-2{ inset: 18px; border-color: rgba(255,255,255,.22); }
.se-auth-icon-glow{
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227,195,147,.35) 0%, rgba(227,195,147,0) 70%);
}
.se-auth-icon-spark{ stroke: var(--accent-gold-light); stroke-width: 2.5; }

@media (prefers-reduced-motion: no-preference){
  .se-auth-icon svg{ animation: seAuthIconFloat 4.5s ease-in-out infinite; }
  .se-auth-icon-ring{ animation: seAuthRingPulse 3s ease-out infinite; }
  .se-auth-icon-ring-2{ animation-delay: 1.5s; }
  .se-auth-icon-spark{ animation: seAuthSparkPulse 1.8s ease-in-out infinite; transform-origin: 130px 64px; }
}
@keyframes seAuthIconFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
@keyframes seAuthRingPulse{
  0%{ transform: scale(.85); opacity: .8; }
  100%{ transform: scale(1.25); opacity: 0; }
}
@keyframes seAuthSparkPulse{
  0%, 100%{ opacity: .5; transform: scale(.8); }
  50%{ opacity: 1; transform: scale(1.15); }
}

/* ---------- auth page wrapper: bounded elevated "floating card" ---------- */
.se-auth-page{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: var(--cream);
}
.se-auth-card{
  width: 100%;
  max-width: 1000px;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 40px 70px -30px rgba(0, 79, 118, .3);
}
.se-auth-split{ min-height: 620px; }

@media (max-width: 991.98px){
  .se-auth-split{ min-height: auto; }
  .se-auth-form-col{ padding: 3rem 1.25rem; }
  .se-auth-page{ padding: 0; }
  .se-auth-card{ border-radius: 0; box-shadow: none; max-width: none; }
}

/* ---------- contact page ---------- */
.se-contact{ background: var(--cream); min-height: 70vh; }
.se-contact-card{
  max-width: 760px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 2rem;
}
.se-contact-card .form-label{ font-weight: 600; color: var(--ink); font-size: .9rem; }
.se-contact-card .form-control{ border-radius: var(--radius-md); padding: .65rem .9rem; border-color: var(--line); }
.se-contact-card .form-control:focus{ border-color: var(--brand-primary); box-shadow: 0 0 0 .2rem rgba(0,156,216,.15); }

@media (max-width: 767.98px){
  .se-contact-card{ padding: 1.5rem; }
}

/* ---------- checkout order summary, styled like an itemized invoice/receipt ---------- */
.se-invoice-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 2px dashed var(--line);
}

.se-invoice-head-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.se-invoice-rows {
  display: flex;
  flex-direction: column;
}

.se-invoice-row {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}

  .se-invoice-row:last-child {
    border-bottom: none;
  }

.se-invoice-photo {
  display: block;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--cream-2);
}

  .se-invoice-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

.se-invoice-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

  .se-invoice-photo-placeholder svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--line);
    stroke-width: 1.4;
  }

.se-invoice-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.se-invoice-name {
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

  .se-invoice-name:hover {
    color: var(--brand-primary);
    text-decoration: underline;
  }

.se-invoice-qty {
  font-size: .8rem;
  color: var(--muted);
  margin-top: .15rem;
}

.se-invoice-line-total {
  flex-shrink: 0;
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink);
  white-space: nowrap;
}

.se-invoice-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 800;
  font-size: 1.15rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px dashed var(--line);
}

/* ---------- invoice card: receipt-edge cutout + accent underline + row entrance
   (the modern/"جامد" polish pass — a scalloped bottom edge is the single clearest
   visual shortcut for "this is a real receipt", so it's worth the CSS trick) ---------- */
.se-invoice-card {
  position: relative;
  padding-bottom: 2.25rem;
  overflow: visible;
}

  .se-invoice-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 16px;
    background-image: radial-gradient(circle at 8px 8px, var(--cream) 8px, transparent 8.5px);
    background-size: 16px 16px;
    background-position: bottom center;
    background-repeat: repeat-x;
  }

.se-invoice-head {
  position: relative;
}

  .se-invoice-head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-pop));
    transform: scaleX(0);
    transform-origin: right center;
  }

  .se-invoice-head.is-drawn::after {
    transform: scaleX(1);
    transition: transform .7s cubic-bezier(.65, 0, .35, 1);
  }

.se-invoice-row {
  opacity: 0;
  translate: 0 14px;
  transition: opacity .45s ease, translate .45s ease;
}

  .se-invoice-row.is-in {
    opacity: 1;
    translate: 0 0;
  }

.se-invoice-total-value {
  color: var(--accent-pop);
}

/* ---------- FAQ accordion ---------- */
.se-faq{ max-width: 760px; display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
.se-faq-item{
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.se-faq-question{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: none;
  border: none;
  padding: 1.1rem 1.4rem;
  text-align: start;
  font-weight: 700;
  color: var(--ink);
  font-size: .98rem;
}
.se-faq-question svg{
  width: 18px; height: 18px; flex-shrink: 0;
  fill: none; stroke: var(--brand-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s ease;
}
.se-faq-item.is-open .se-faq-question svg{ transform: rotate(180deg); }
.se-faq-answer{
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.se-faq-answer p{ margin: 0; padding: 0 1.4rem 1.1rem; color: var(--muted); font-size: .92rem; line-height: 1.7; }
.se-faq-item.is-open .se-faq-answer{ max-height: 200px; }
html[data-theme="dark"] .se-faq-item{ background: var(--cream-2); }

/* ---------- admin dashboard shell ---------- */
.se-admin-page{ background: var(--cream); min-height: 70vh; }
.se-admin-nav{
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.se-admin-nav a{
  padding: .5rem 1.1rem;
  border-radius: 100px;
  font-weight: 700;
  font-size: .9rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  transition: border-color .15s ease, color .15s ease;
}
.se-admin-nav a:hover,
.se-admin-nav a.active{
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}
.se-admin-card{
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.75rem;
}
.se-admin-stat{
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  text-align: center;
}
.se-admin-stat .num{ font-size: 2rem; font-weight: 800; color: var(--brand-dark); display: block; }
.se-admin-stat .label{ color: var(--muted); font-size: .9rem; }
.se-admin-table{ width: 100%; border-collapse: collapse; }
    .se-admin-table th {
        text-align: start;
        font-size: .85rem;
        color: var(--muted);
        font-weight: 700;
        padding: .75rem;
        border-bottom: 2px solid var(--line);
    }
.se-admin-table td{
  padding: .75rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.se-admin-badge{
  display: inline-block;
  padding: .25rem .7rem;
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 700;
  background: var(--brand-light);
  color: var(--brand-dark);
}
.se-admin-badge.is-inactive{ background: var(--line); color: var(--muted); }
.se-admin-image-preview{
  display: block;
  width: 120px; height: 120px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}
.se-admin-thumb{
  width: 46px; height: 46px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
}

html[data-theme="dark"] .se-admin-nav a{ background: var(--cream-2); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .se-admin-card,
html[data-theme="dark"] .se-admin-stat{ background: var(--cream-2); }
html[data-theme="dark"] .se-admin-table th{ border-color: var(--line); }
html[data-theme="dark"] .se-admin-table td{ border-color: var(--line); }

/* ---------- admin product/package form (centered, modern) ---------- */
.se-admin-form-card{
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2rem 2.25rem;
  max-width: 560px;
}
.se-admin-form-head{
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.se-admin-form-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--brand-light);
  flex-shrink: 0;
}
.se-admin-form-icon svg{ width: 19px; height: 19px; fill: none; stroke: var(--brand-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.se-upload-zone{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 140px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-md);
  background: var(--cream-2);
  cursor: pointer;
  padding: 1.25rem;
  text-align: center;
  transition: border-color .15s ease, background .15s ease;
}
.se-upload-zone:hover{ border-color: var(--brand-primary); background: var(--brand-light); }
.se-upload-zone svg{ width: 30px; height: 30px; fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.se-upload-zone-text{ font-size: .85rem; color: var(--muted); font-weight: 600; }
.se-upload-zone.has-file .se-upload-zone-text{ color: var(--brand-primary); }
.se-upload-zone .se-admin-image-preview{ margin: 0; }
html[data-theme="dark"] .se-admin-form-card{ background: var(--cream-2); }
html[data-theme="dark"] .se-upload-zone{ background: var(--cream); }

/* ---------- product form: the three image sections (main / hover / gallery), each its own clearly
   labelled block so an admin unfamiliar with the card-hover effect can't confuse one upload for another ---------- */
.se-image-section{
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.2rem 1.3rem;
  margin-bottom: 1.25rem;
}
.se-image-section-head{ display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; }
.se-image-section-num{
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-light); color: var(--brand-dark);
  font-size: .78rem; font-weight: 800;
}
.se-image-section-title{ font-weight: 700; font-size: .98rem; margin: 0; }
.se-image-section-hint{ font-size: .82rem; color: var(--muted); margin: 0 0 .85rem; line-height: 1.5; }
html[data-theme="dark"] .se-image-section-num{ background: var(--brand-primary); color: #fff; }

.se-package-product-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .6rem;
  max-height: 260px;
  overflow-y: auto;
  padding: .25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.se-package-product-item{
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .6rem .75rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.se-package-product-item:has(input:checked){ border-color: var(--brand-primary); background: var(--brand-light); }
.se-package-product-item input{ margin-inline-end: .4rem; }

/* ---------- admin profile ---------- */
.se-profile-header{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-primary));
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  color: #fff;
}
.se-profile-orders-btn{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}
.se-profile-orders-btn svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 575.98px){
  .se-profile-orders-btn{ width: 100%; justify-content: center; }
}
.se-profile-avatar{
  position: relative;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 3px solid rgba(255,255,255,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.se-profile-avatar img{ width: 100%; height: 100%; object-fit: cover; }
.se-profile-avatar span{ font-size: 2.2rem; font-weight: 800; color: #fff; }
.se-profile-avatar-edit{
  position: absolute;
  inset-inline-end: -2px;
  inset-block-end: -2px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent-pop);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid #fff;
  transition: transform .15s ease;
}
.se-profile-avatar-edit:hover{ transform: scale(1.08); }
.se-profile-avatar-edit svg{ width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.se-profile-header .se-admin-badge{ background: rgba(255,255,255,.2); color: #fff; }

/* ---------- about page ---------- */
.se-about-banner{
  background: linear-gradient(160deg, var(--cream-2), var(--cream));
}
.se-about-banner .se-leaf-pattern{ opacity: .5; }

.se-about-photo-frame{
  position: relative;
  max-width: 420px;
  margin: 0 auto;
}
.se-about-photo-frame::before{
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  border: 3px solid var(--accent-gold);
  border-radius: var(--radius-lg);
  z-index: -1;
}
.se-about-photo-frame img{
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center center;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* ---------- values: quiet editorial list (chosen over the boxed-icon-card grid —
   same four cards looked repetitive; this trades icons for a colored rule + an
   irregular label-column width per row, closer to a magazine layout than a
   feature grid) ---------- */
.se-values-list{
  max-width: 780px;
  display: flex;
  flex-direction: column;
}
.se-value-row{
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.se-value-row:first-child{ padding-top: 0; }
.se-value-row:last-child{ border-bottom: none; padding-bottom: 0; }
.se-value-row-wide{ grid-template-columns: 42% 1fr; }
.se-value-row-narrow{ grid-template-columns: 20% 1fr; }
.se-value-row-label h3{
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.45;
}
.se-value-rule{
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-pop));
  margin-bottom: .6rem;
}
.se-value-row p{ padding-top: .2rem; }

@media (max-width: 575.98px){
  .se-value-row,
  .se-value-row-wide,
  .se-value-row-narrow{ grid-template-columns: 1fr; gap: .5rem; }
}

.se-about-cta{
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-primary));
  border-radius: var(--radius-lg);
  margin-inline: 1rem;
  color: #fff;
}
.se-about-cta .section-title,
.se-about-cta p{ color: #fff; }
.se-about-cta .btn-brand-outline{ color: #fff; border-color: rgba(255,255,255,.6); }
.se-about-cta .btn-brand-outline:hover{ background: rgba(255,255,255,.12); }
.se-about-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
}

.se-about-cta-text {
    flex: 1 1 55%;
}

.se-about-cta-anim {
    flex: 1 1 35%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.se-about-cta-lottie {
    width: 100%;
    max-width: 240px;
}

.se-about-cta-shipping {
    justify-content: center;
}

    .se-about-cta-shipping .se-shipping-partners-label {
        color: rgba(255,255,255,.85);
    }

@media (max-width: 767.98px) {
    .se-about-cta-inner {
        flex-direction: column;
    }
}
/* ---------- trust badge certificate popup ---------- */
.se-cert-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

    .se-cert-modal.is-open {
        opacity: 1;
        visibility: visible;
    }

.se-cert-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 25, 30, .72);
    backdrop-filter: blur(2px);
}

.se-cert-modal-dialog {
    position: relative;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    max-width: min(600px, 92vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    transform: scale(.96) translateY(8px);
    transition: transform .2s ease;
}

.se-cert-modal.is-open .se-cert-modal-dialog {
    transform: scale(1) translateY(0);
}

    .se-cert-modal-title {
        margin: 0;
        font-size: 1.05rem;
        color: var(--brand-dark);
        text-align: center;
    }

    .se-cert-modal-img {
        max-width: 100%;
        max-height: 58vh;
        object-fit: contain;
        border-radius: var(--radius-md);
        border: 1px solid var(--line);
        align-self: center;
    }

    .se-cert-modal-close {
        position: absolute;
        top: -14px;
        left: -14px;
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--brand-dark);
        border: 3px solid #fff;
        border-radius: 50%;
        color: #fff;
        box-shadow: var(--shadow-sm);
    }

        .se-cert-modal-close svg {
            width: 16px;
            height: 16px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
        }

    html[data-theme="dark"] .se-cert-modal-dialog {
        background: var(--cream-2);
    }

    html[data-theme="dark"] .se-cert-modal-title {
        color: var(--accent-gold-light);
    }

    @media (max-width: 575.98px) {
        .se-cert-modal-close {
            top: -10px;
            left: -10px;
        }
    }

/* ---------- شريط "معتمدون رسميًا" (الرئيسية) — كتابة متحركة + كروت بتتقلب تلقائيًا،
   من غير أي تفاعل/بوب، مجرد لمسة ثقة عابرة قبل سكشن آراء العملاء. ---------- */
.se-trust-typewriter{
    font-weight: 800;
    color: var(--brand-dark);
    min-height: 2.2rem;
}
html[data-theme="dark"] .se-trust-typewriter{ color: var(--accent-gold-light); }
.se-trust-cursor{
    display: inline-block;
    margin-inline-start: 2px;
    color: var(--accent-pop);
    animation: seTrustBlink 1s steps(1) infinite;
}
@keyframes seTrustBlink{ 50%{ opacity: 0; } }

.se-trust-flip-row{
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
    perspective: 800px;
}
.se-trust-flip-card{ width: 72px; height: 72px; }
.se-trust-flip-inner{
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: seTrustFlip 6s ease-in-out infinite;
}
.se-trust-flip-card:nth-child(2) .se-trust-flip-inner{ animation-delay: 1.2s; }
@keyframes seTrustFlip{
    0%, 40%{ transform: rotateY(0deg); }
    55%, 90%{ transform: rotateY(180deg); }
    100%{ transform: rotateY(360deg); }
}
.se-trust-flip-front, .se-trust-flip-back{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}
.se-trust-flip-front{ font-size: 1.6rem; color: var(--accent-gold); }
.se-trust-flip-back{ transform: rotateY(180deg); padding: 10px; }
.se-trust-flip-back img{ max-width: 100%; max-height: 100%; object-fit: contain; }
@media (prefers-reduced-motion: reduce){
    .se-trust-flip-inner{ animation: none; }
    .se-trust-cursor{ animation: none; }
}

/* ---------- سكشن "آراء العملاء" (الرئيسية) — كارت شفاف بالكامل (بدون خلفية بيضا)،
   سلايد واحد ظاهر في المرة، بيتغير أوتوماتيك كل ثانتين + أسهم يدوية. ---------- */
.se-reviews-carousel{ position: relative; overflow: hidden; min-height: 220px; }
.se-reviews-track{
    display: flex;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.se-review-slide{
    flex: 0 0 100%;
    text-align: center;
    padding: 1rem 2rem;
    background: transparent;
}
.se-review-stars{ color: var(--accent-gold); font-size: 1.3rem; letter-spacing: 2px; margin-bottom: .75rem; }
.se-review-text{ font-size: 1.15rem; line-height: 1.9; color: var(--ink); margin-bottom: 1rem; font-style: italic; }
.se-review-name{ font-weight: 700; color: var(--brand-dark); }
html[data-theme="dark"] .se-review-name{ color: var(--accent-gold-light); }
.se-reviews-nav{ display: flex; justify-content: center; gap: .75rem; margin-top: 1rem; }
.se-review-arrow{
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--brand-dark);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
html[data-theme="dark"] .se-review-arrow{ color: var(--accent-gold-light); }
.se-review-arrow:hover{ background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }
.se-review-arrow svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; }

/* ---------- فورم "شاركنا رأيك" — نفس هيكل se-cert-modal، اسم كلاس مختلف عشان يبقى
   مستقل (بيتفتح من أماكن مختلفة: سكشن الآراء، وبعد تأكيد الطلب مباشرة). ---------- */
.se-review-modal{
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
.se-review-modal.is-open{ opacity: 1; visibility: visible; }
.se-review-modal-backdrop{ position: absolute; inset: 0; background: rgba(15, 25, 30, .72); backdrop-filter: blur(2px); }
.se-review-modal-dialog{
    position: relative;
    width: min(440px, 100%);
    max-height: 90vh;
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 30px 80px rgba(8, 24, 36, .35);
    padding: 1.75rem 1.75rem 1.6rem;
    border-top: 4px solid var(--accent-pop);
    transform: scale(.96) translateY(8px);
    transition: transform .2s ease;
}
.se-review-modal.is-open .se-review-modal-dialog{ transform: scale(1) translateY(0); }
html[data-theme="dark"] .se-review-modal-dialog{ background: var(--cream-2); }
/* the close button sits INSIDE the dialog: it used to hang -14px outside the corner, which the dialog's own
   overflow clipped (a cut-off circle) and which forced a horizontal scrollbar under the form */
.se-review-modal-close{
    position: absolute;
    top: .9rem;
    left: .9rem;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--brand-dark) 8%, transparent);
    border: 0;
    border-radius: 50%;
    color: var(--brand-dark);
    transition: background .2s ease, color .2s ease;
}
.se-review-modal-close:hover{ background: var(--accent-pop); color: #fff; }
html[data-theme="dark"] .se-review-modal-close{ color: var(--ink); background: rgba(255,255,255,.08); }
.se-review-modal-close svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.se-review-modal-head{ display: flex; align-items: center; gap: .9rem; margin-bottom: 1.4rem; padding-inline-end: 2.4rem; }
.se-review-modal-icon{
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-gold-light), var(--accent-gold));
    color: #fff;
}
.se-review-modal-icon svg{ width: 24px; height: 24px; fill: currentColor; }
.se-review-modal-title{ font-size: 1.35rem; font-weight: 800; color: var(--brand-dark); margin: 0 0 .15rem; }
html[data-theme="dark"] .se-review-modal-title{ color: var(--accent-gold-light); }
.se-review-modal-sub{ font-size: .85rem; color: var(--muted); margin: 0; }
.se-review-modal-dialog .form-label{ font-size: .85rem; font-weight: 700; color: var(--brand-dark); margin-bottom: .4rem; }
html[data-theme="dark"] .se-review-modal-dialog .form-label{ color: var(--ink); }
.se-review-modal-dialog textarea.form-control{ resize: none; min-height: 110px; }
.se-star-input{ display: flex; gap: .5rem; font-size: 2rem; }
.se-star-input button{
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    color: color-mix(in srgb, var(--accent-gold) 28%, var(--line));
    cursor: pointer;
    transition: color .15s ease, transform .15s ease;
}
.se-star-input button:hover{ transform: scale(1.18); }
.se-star-input button.active{ color: var(--accent-gold); }
@media (max-width: 575.98px){
    .se-review-modal{ padding: 1.25rem; }
    .se-review-modal-dialog{ padding: 1.4rem 1.25rem 1.25rem; }
}



    /* ---------- product catalog ---------- */
    .se-catalog-sidebar {
        position: sticky;
        top: 90px;
        background: #fff;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        padding: 1.5rem;
        border-top: 3px solid var(--accent-pop);
    }

    .se-catalog-sidebar-title {
        font-size: 1rem;
        font-weight: 800;
        color: var(--brand-dark);
        margin-bottom: 1.25rem;
    }

    .se-catalog-sidebar .form-label {
        font-size: .85rem;
        font-weight: 600;
        color: var(--muted);
    }

    .se-catalog-sidebar-clear {
        display: block;
        text-align: center;
        margin-top: .75rem;
        font-size: .85rem;
        font-weight: 600;
        color: var(--muted);
        text-decoration: underline;
    }

        .se-catalog-sidebar-clear:hover {
            color: var(--accent-pop);
        }

    .se-category-pills {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
    }

    .se-category-option {
        border: 1px solid var(--line);
        background: #fff;
        color: var(--ink);
        font-size: .8rem;
        font-weight: 600;
        padding: .35rem .8rem;
        border-radius: 100px;
        transition: background .15s ease, border-color .15s ease, color .15s ease;
    }

        .se-category-option.active {
            background: var(--brand-primary);
            border-color: var(--brand-primary);
            color: #fff;
        }

        /* the pills are real links (crawlable category pages) — keep them looking exactly like the old pill buttons */
        a.se-category-option {
            text-decoration: none;
            text-align: center;
        }

        a.se-category-option:not(.active):hover {
            color: var(--ink);
        }

    html[data-theme="dark"] .se-category-option {
        background: var(--cream);
        border-color: var(--line);
        color: var(--ink);
    }

    html[data-theme="dark"] .se-catalog-sidebar {
        background: var(--cream-2);
    }

    @media (max-width: 991.98px) {
        .se-catalog-sidebar {
            position: static;
        }
    }
    /* ---------- profile page: sidebar tabs (customer + admin) ---------- */
    .se-profile-tabs {
        display: flex;
        flex-direction: column;
        gap: .3rem;
    }

    .se-profile-tab {
        display: flex;
        align-items: center;
        gap: .6rem;
        text-align: start;
        text-decoration: none;
        border: none;
        background: transparent;
        color: var(--muted);
        font-weight: 700;
        font-size: .92rem;
        padding: .75rem .9rem;
        border-radius: var(--radius-md);
        transition: background .15s ease, color .15s ease;
    }

        .se-profile-tab:hover {
            background: var(--cream-2);
            color: var(--ink);
        }

        .se-profile-tab.active {
            background: var(--brand-primary);
            color: #fff;
        }

        .se-profile-tab svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
            flex-shrink: 0;
        }

    html[data-theme="dark"] .se-profile-tab.active {
        background: var(--brand-primary);
        color: #fff;
    }

    @media (max-width: 991.98px) {
        .se-profile-tabs {
            flex-direction: row;
            flex-wrap: wrap;
        }

        .se-profile-tab {
            flex: 1 1 auto;
            justify-content: center;
        }
    }

    .se-price-range-values {
        display: flex;
        justify-content: center;
        gap: .3rem;
        font-weight: 700;
        color: var(--brand-dark);
        margin-bottom: .6rem;
    }

    .se-price-range-slider {
        position: relative;
        height: 26px;
    }

        .se-price-range-slider input[type="range"] {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            width: 100%;
            margin: 0;
            height: 26px;
            background: transparent;
            appearance: none;
            -webkit-appearance: none;
            pointer-events: none;
        }

            .se-price-range-slider input[type="range"]::-webkit-slider-runnable-track {
                height: 4px;
                background: var(--line);
                border-radius: 4px;
            }

            .se-price-range-slider input[type="range"]::-moz-range-track {
                height: 4px;
                background: var(--line);
                border-radius: 4px;
            }

            .se-price-range-slider input[type="range"]::-webkit-slider-thumb {
                -webkit-appearance: none;
                pointer-events: auto;
                width: 18px;
                height: 18px;
                margin-top: -7px;
                border-radius: 50%;
                background: var(--brand-primary);
                border: 2px solid #fff;
                box-shadow: var(--shadow-sm);
                cursor: pointer;
            }

            .se-price-range-slider input[type="range"]::-moz-range-thumb {
                pointer-events: auto;
                width: 18px;
                height: 18px;
                border-radius: 50%;
                background: var(--brand-primary);
                border: 2px solid #fff;
                box-shadow: var(--shadow-sm);
                cursor: pointer;
            }

    .se-sort-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 50%;
        color: var(--ink);
        box-shadow: var(--shadow-sm);
    }

        .se-sort-toggle:hover {
            border-color: var(--brand-primary);
            color: var(--brand-primary);
        }

        .se-sort-toggle svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
        }

    .se-sort-option.active {
        color: var(--brand-primary);
        font-weight: 700;
    }

    html[data-theme="dark"] .se-sort-toggle {
        background: var(--cream-2);
        border-color: var(--line);
        color: var(--ink);
    }
    /* ---------- products/packages view toggle ---------- */
    .se-catalog-view-toggle {
        display: flex;
        width: max-content;
        gap: .25rem;
        background: var(--cream-2);
        border-radius: 100px;
        padding: .3rem;
        margin: 0 auto 2rem;
    }

    .se-view-tab {
        border: none;
        background: transparent;
        color: var(--muted);
        font-weight: 700;
        font-size: .9rem;
        padding: .5rem 1.5rem;
        border-radius: 100px;
        transition: background .2s ease, color .2s ease;
    }

        .se-view-tab.active {
            background: #fff;
            color: var(--brand-dark);
            box-shadow: var(--shadow-sm);
        }
    /* The container's own background is --cream-2, so the light-mode logic (active tab = a
   lighter, elevated fill) needs a real fill in dark mode too — --cream is actually darker
   than --cream-2, which made the "active" tab sink into the pill instead of popping out.
   Matches the same solid-fill treatment already used for .se-profile-tab.active. */
    html[data-theme="dark"] .se-view-tab.active {
        background: var(--brand-primary);
        color: #fff;
    }

    /* ---------- product details: breadcrumb, quantity stepper, info tabs ---------- */
    .se-breadcrumb {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .4rem;
        font-size: .85rem;
        color: var(--muted);
        margin-bottom: 1.25rem;
    }

        .se-breadcrumb a {
            color: var(--muted);
            text-decoration: none;
        }

        .se-breadcrumb a:hover {
            color: var(--brand-primary);
        }

        .se-breadcrumb .se-breadcrumb-current {
            color: var(--ink);
            font-weight: 600;
        }

    .se-qty-stepper {
        display: inline-flex;
        align-items: center;
        border: 1px solid var(--line);
        border-radius: 100px;
        overflow: hidden;
        height: 52px;
    }

        .se-qty-stepper button {
            width: 44px;
            height: 100%;
            border: none;
            background: transparent;
            color: var(--ink);
            font-size: 1.1rem;
            font-weight: 700;
            cursor: pointer;
            transition: background .15s ease;
        }

        .se-qty-stepper button:hover {
            background: var(--cream-2);
        }

        .se-qty-stepper input {
            width: 42px;
            height: 100%;
            border: none;
            border-inline: 1px solid var(--line);
            background: transparent;
            color: var(--ink);
            text-align: center;
            font-weight: 700;
            font-size: 1rem;
            -moz-appearance: textfield;
        }

            .se-qty-stepper input::-webkit-outer-spin-button,
            .se-qty-stepper input::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }

    .se-product-tabs-panel {
        display: none;
        padding-top: 1.5rem;
        color: var(--ink);
        font-size: .95rem;
        line-height: 1.9;
    }

        .se-product-tabs-panel.is-active {
            display: block;
        }

        .se-product-tabs-panel p{ margin: 0 0 .9rem; }
        .se-product-tabs-panel p:last-child{ margin-bottom: 0; }

        .se-desc-heading{
            font-size: 1rem;
            font-weight: 700;
            color: var(--brand-dark);
            margin: 1.2rem 0 .6rem;
        }
        .se-desc-heading:first-child{ margin-top: 0; }

        .se-desc-list{
            list-style: none;
            margin: 0 0 1rem;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: .5rem;
        }
            .se-desc-list li{
                position: relative;
                padding-inline-start: 1.4rem;
            }
            .se-desc-list li::before{
                content: "";
                position: absolute;
                inset-inline-start: 0;
                top: .55em;
                width: 6px; height: 6px;
                border-radius: 50%;
                background: var(--accent-gold);
            }
            .se-desc-list-check li::before{
                content: "\2714";
                width: auto; height: auto;
                background: none;
                top: 0;
                font-size: .8rem;
                color: var(--brand-primary);
            }

        .se-desc-lead{
            font-size: 1.05rem;
            line-height: 1.95;
            color: var(--ink);
            font-weight: 600;
        }
        .se-desc-list li strong.se-desc-lead-in{
            display: block;
            color: var(--brand-dark);
            font-weight: 700;
            margin-bottom: .1rem;
        }
        html[data-theme="dark"] .se-desc-list li strong.se-desc-lead-in{ color: var(--accent-gold-light); }
        .se-desc-list li span{ color: var(--muted); }

        .se-spec-list{
            margin: 0 0 1rem;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            overflow: hidden;
        }
        .se-spec-row{
            display: grid;
            grid-template-columns: minmax(110px, 38%) 1fr;
            gap: 1rem;
            padding: .65rem 1rem;
        }
        .se-spec-row:nth-child(odd){ background: var(--cream-2); }
        .se-spec-row dt{ font-weight: 700; color: var(--brand-dark); }
        html[data-theme="dark"] .se-spec-row dt{ color: var(--accent-gold-light); }
        .se-spec-row dd{ margin: 0; }

    .se-shipping-highlights {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: .6rem;
    }

        .se-shipping-highlights li {
            display: flex;
            align-items: center;
            gap: .6rem;
            font-size: .85rem;
            color: var(--ink);
        }

        .se-shipping-highlights svg {
            flex: none;
            width: 18px;
            height: 18px;
            fill: none;
            stroke: var(--brand-primary);
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .se-product-tabs-shipping-note {
        display: flex;
        align-items: center;
        gap: .6rem;
        color: var(--muted);
        font-size: .85rem;
        margin-top: 1rem;
    }

    .se-trust-row {
        display: flex;
        flex-direction: column;
        gap: .6rem;
        padding: 1rem 1.1rem;
        background: var(--cream-2);
        border-radius: var(--radius-md);
    }

    .se-trust-item {
        display: flex;
        align-items: center;
        gap: .6rem;
        font-size: .85rem;
        color: var(--ink);
    }

        .se-trust-item svg {
            flex: none;
            width: 20px;
            height: 20px;
            fill: none;
            stroke: var(--brand-primary);
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    html[data-theme="dark"] .se-trust-row {
        background: var(--cream);
        border: 1px solid var(--line);
    }

    .se-product-card {
        position: relative;
        height: 100%;
    }

    .se-product-card-link {
        display: block;
        background: #fff;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        text-decoration: none;
        color: var(--ink);
        transition: transform .2s ease, box-shadow .2s ease;
        height: 100%;
    }

    .se-product-card:hover .se-product-card-link {
        transform: translateY(-6px);
        box-shadow: var(--shadow-md);
        color: var(--ink);
    }

    .se-product-card-img {
        position: relative;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        background: var(--cream-2);
    }

    .se-product-discount-badge {
        position: absolute;
        top: 12px;
        inset-inline-start: 12px;
        z-index: 2;
        background: var(--accent-pop);
        color: #fff;
        font-size: .75rem;
        font-weight: 800;
        padding: .3rem .65rem;
        border-radius: 100px;
        box-shadow: 0 4px 10px rgba(255,106,69,.35);
    }

    /* ---------- favorite/wishlist heart toggle ---------- */
    .se-favorite-toggle {
        position: absolute;
        top: 12px;
        inset-inline-end: 12px;
        z-index: 2;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: none;
        background: rgba(255,255,255,.9);
        box-shadow: var(--shadow-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform .15s ease;
    }

        .se-favorite-toggle:hover {
            transform: scale(1.08);
        }

        .se-favorite-toggle-inline {
            position: static;
            flex: none;
            box-shadow: none;
            border: 1px solid var(--line);
        }

        .se-favorite-toggle svg {
            width: 17px;
            height: 17px;
            fill: none;
            stroke: var(--brand-dark);
            stroke-width: 1.8;
            transition: fill .15s ease, stroke .15s ease;
        }

        .se-favorite-toggle.is-favorited svg,
        [data-favorite-toggle].is-favorited svg {
            fill: var(--accent-pop);
            stroke: var(--accent-pop);
        }

    .se-favorite-add-to-cart {
        margin-top: .4rem;
        border: 1px solid var(--brand-primary);
        background: transparent;
        color: var(--brand-primary);
        font-size: .78rem;
        font-weight: 700;
        padding: .3rem .8rem;
        border-radius: 100px;
        cursor: pointer;
        transition: background .15s ease, color .15s ease;
    }

        .se-favorite-add-to-cart:hover {
            background: var(--brand-primary);
            color: #fff;
        }

    .se-product-discount-badge-inline {
        position: static;
        display: inline-block;
        margin-bottom: .5rem;
    }

    .se-product-card-price-wrap {
        display: flex;
        align-items: baseline;
        gap: .5rem;
    }

    .se-product-card-price-old,
    .se-product-details-price-old {
        color: var(--muted);
        text-decoration: line-through;
        font-size: .85rem;
        font-weight: 600;
    }

    .se-product-details-price-old {
        font-size: 1.1rem;
        margin-inline-end: .6rem;
    }

    .se-package-included-list li {
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: .5rem 0;
        border-bottom: 1px solid var(--line);
    }

        .se-package-included-link {
            color: inherit;
            text-decoration: none;
        }

            .se-package-included-link:hover {
                color: var(--brand-primary);
            }

        .se-package-included-list li svg {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            fill: none;
            stroke: var(--brand-primary);
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
    /* ---------- homepage packages strip ---------- */
    .se-package-card {
        position: relative;
        height: 100%;
    }

    .se-package-card-link {
        display: block;
        background: #fff;
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        text-decoration: none;
        color: var(--ink);
        height: 100%;
        transition: transform .2s ease, box-shadow .2s ease;
    }

    .se-package-card:hover .se-package-card-link {
        transform: translateY(-6px);
        box-shadow: var(--shadow-md);
        color: var(--ink);
    }

    .se-package-card-img {
        position: relative;
        aspect-ratio: 4/3;
        overflow: hidden;
        background: var(--cream-2);
    }

        .se-package-card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .35s ease;
        }

    .se-package-card:hover .se-package-card-img img {
        transform: scale(1.06);
    }

    .se-package-card-badge {
        position: absolute;
        bottom: 10px;
        inset-inline-start: 10px;
        background: rgba(0,79,118,.85);
        color: #fff;
        font-size: .72rem;
        font-weight: 700;
        padding: .25rem .6rem;
        border-radius: 100px;
    }

    .se-package-card-body {
        padding: 1rem 1.2rem 1.2rem;
    }

        .se-package-card-body h3 {
            font-size: 1rem;
            margin-bottom: .5rem;
        }

    html[data-theme="dark"] .se-package-card-link {
        background: var(--cream-2);
    }
    /* ---------- homepage marquee: round product thumbnails, distinct from the catalog grid ---------- */
    .se-packages-marquee-track .se-product-card-link {
        background: none;
        box-shadow: none;
        text-align: center;
    }

    .se-packages-marquee-track .se-product-card:hover .se-product-card-link {
        box-shadow: none;
        transform: none;
    }

    .se-packages-marquee-track .se-product-card-img {
        aspect-ratio: 1 / 1;
        width: 150px;
        border-radius: 50%;
        margin: 0 auto;
        box-shadow: var(--shadow-sm);
        border: 3px solid var(--cream);
    }

    .se-packages-marquee-track .se-product-discount-badge {
        border-radius: 100px;
    }

    .se-packages-marquee-track .se-product-card-body {
        padding: .9rem .5rem 0;
        text-align: center;
    }

    .se-packages-marquee-track .se-product-card-footer {
        justify-content: center;
    }
    /* Positioned on the circle itself (bottom-right edge, like a badge), not dead-center where it
   used to overlap the boundary between the photo and the title text below it. */
    .se-packages-marquee-track .se-quick-add {
        top: 112px;
        bottom: auto;
        inset-inline-end: -18px;
    }

    .se-packages-marquee-wrap {
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
    }

    .se-packages-marquee-track {
        display: flex;
        width: max-content;
        gap: 1.25rem;
        padding: .5rem 1.25rem;
        animation: se-packages-marquee 28s linear infinite;
    }

        .se-packages-marquee-track .se-package-card,
        .se-packages-marquee-track .se-product-card {
            flex: 0 0 260px;
            width: 260px;
        }

    .se-packages-marquee-wrap:hover .se-packages-marquee-track,
    .se-packages-marquee-wrap:focus-within .se-packages-marquee-track {
        animation-play-state: paused;
    }

    @keyframes se-packages-marquee {
        from {
            transform: translateX(0);
        }
        /* Positive, not negative: in this RTL layout the track's own right edge sits flush against
     the wrap's right edge (normal-flow start in RTL), so its rendered content only extends
     further left from there — shifting further left runs past the track's own right edge into
     nothing. Shifting right instead reveals the next repeat of the pattern that's already
     rendered to the left. --se-marquee-shift is set by JS to the exact pixel width of one full
     card set, so the loop stays seamless for any product count/screen width — see
     Home/Index.cshtml. The 50% fallback only applies for the brief instant before that script
     runs. */
        to {
            transform: translateX(var(--se-marquee-shift, 50%));
        }
    }

    @media (max-width: 575.98px) {
        .se-packages-marquee-track .se-package-card,
        .se-packages-marquee-track .se-product-card {
            flex-basis: 210px;
            width: 210px;
        }

        .se-packages-marquee-track {
            animation-duration: 20s;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .se-packages-marquee-track {
            animation: none;
            overflow-x: auto;
        }

        .se-packages-marquee-wrap {
            overflow-x: auto;
            -webkit-mask-image: none;
            mask-image: none;
        }
    }

    .se-product-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .35s ease;
    }

    .se-product-card:hover .se-product-card-img img {
        transform: scale(1.06);
    }

    /* Products-page-only hover swap: the hover image is a second <img> stacked exactly over the main one,
       invisible until the card is hovered/focused, when it crossfades in on top. No JS needed — it's the
       same two-image-crossfade technique the card already doesn't otherwise use, kept this simple on purpose. */
    .se-product-card-img-base,
    .se-product-card-img-hover { position: absolute; inset: 0; }
    .se-product-card-img-hover { opacity: 0; transition: opacity .35s ease, transform .35s ease; }
    .se-product-card:hover .se-product-card-img-hover,
    .se-product-card-link:focus-visible .se-product-card-img-hover { opacity: 1; }

    .se-product-card-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--muted);
    }

        .se-product-card-placeholder svg {
            width: 42px;
            height: 42px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.4;
        }

    .se-product-card-body {
        padding: 1.1rem 1.25rem 1.3rem;
    }

        .se-product-card-body h3 {
            font-size: 1.05rem;
            margin-bottom: .5rem;
        }

    .se-product-card-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .se-product-card-price {
        color: var(--accent-pop);
        font-weight: 800;
        font-size: 1.05rem;
    }

    html[data-theme="dark"] .se-product-card-link {
        background: var(--cream-2);
    }

    .se-quick-add {
        position: absolute;
        bottom: 14px;
        inset-inline-end: 14px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: var(--brand-dark);
        color: #fff;
        border: none;
        border-radius: 50%;
        transition: background .15s ease, transform .15s ease;
    }

        .se-quick-add svg {
            width: 17px;
            height: 17px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .se-quick-add:hover {
            background: var(--accent-pop);
        }

        .se-quick-add.is-added {
            background: var(--accent-pop);
            transform: scale(1.15);
        }

    .se-add-to-cart.is-added {
        background: var(--accent-pop);
    }

    /* ---------- favorites gallery page (/Favorites) — deliberately not a cart-style list:
       big portrait photos, dark scrim caption, feels like a moodboard not an order queue ---------- */
    .se-fav-header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 2.5rem;
    }

    .se-fav-header-actions {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .se-fav-count {
        color: var(--muted);
        font-weight: 600;
        font-size: .9rem;
    }

    .se-fav-empty {
        text-align: center;
        padding: 4rem 1rem;
        color: var(--muted);
    }

        .se-fav-empty svg {
            width: 56px;
            height: 56px;
            fill: none;
            stroke: var(--accent-pop);
            stroke-width: 1.4;
            opacity: .55;
            margin-bottom: 1rem;
        }

        .se-fav-empty p {
            margin-bottom: 1.25rem;
            font-size: 1.05rem;
        }

    .se-fav-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 1.75rem;
    }

    .se-fav-card-photo {
        position: relative;
        aspect-ratio: 3 / 4;
        border-radius: 22px;
        overflow: hidden;
        background: var(--cream-2);
        box-shadow: var(--shadow-sm);
        padding: 14%;
        box-sizing: border-box;
        transition: box-shadow .25s ease, transform .25s ease;
    }

        .se-fav-card-photo:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-4px);
        }

        /* Product photos come in all sorts of shapes/margins (a tall cup, a wide tissue box, a roll shot
           diagonally) — object-fit: cover on a fixed 3:4 box was cropping into the product itself and made
           it look zoomed-in/off-center. contain shows the whole product, centred, at its own natural
           proportions, matching how the rest of the site (product cards, About's own showcase) already
           handles this same problem. */
        .se-fav-card-photo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
            transition: transform .5s ease;
        }

        .se-fav-card-photo:hover img {
            transform: scale(1.04);
        }

        .se-fav-card-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .se-fav-card-placeholder svg {
                width: 40px;
                height: 40px;
                fill: none;
                stroke: var(--line);
                stroke-width: 1.4;
            }

    .se-fav-remove {
        position: absolute;
        top: 12px;
        inset-inline-start: 12px;
        z-index: 2;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: none;
        background: rgba(20, 24, 28, .55);
        color: #fff;
        font-size: 1.3rem;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        backdrop-filter: blur(2px);
        transition: background .15s ease, transform .15s ease;
    }

        .se-fav-remove:hover {
            background: var(--accent-pop);
            transform: scale(1.08);
        }

    .se-fav-card-overlay {
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        padding: 2.25rem .9rem .9rem;
        background: linear-gradient(to top, rgba(8, 12, 15, .88) 15%, rgba(8, 12, 15, .3) 60%, transparent);
        color: #fff;
    }

        .se-fav-card-overlay h4 {
            font-size: .95rem;
            margin: 0 0 .15rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

            .se-fav-card-overlay h4 a {
                color: #fff;
                text-decoration: none;
            }

    .se-fav-card-price {
        display: block;
        font-weight: 800;
        color: var(--accent-gold-light);
        font-size: .95rem;
        margin-bottom: .55rem;
    }

    .se-fav-card-add {
        display: block;
        width: 100%;
        background: var(--accent-pop);
        color: #fff;
        border: none;
        border-radius: 100px;
        padding: .45rem;
        font-weight: 700;
        font-size: .82rem;
        cursor: pointer;
        transition: background .15s ease;
    }

        .se-fav-card-add:hover {
            background: var(--brand-dark);
        }

    .se-pagination {
        display: flex;
        justify-content: center;
        gap: .4rem;
        flex-wrap: wrap;
    }

    .se-pagination-item {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid var(--line);
        color: var(--ink);
        font-weight: 700;
        text-decoration: none;
    }

        .se-pagination-item:hover {
            border-color: var(--brand-primary);
            color: var(--brand-primary);
        }

        .se-pagination-item.active {
            background: var(--brand-primary);
            border-color: var(--brand-primary);
            color: #fff;
        }

    html[data-theme="dark"] .se-pagination-item {
        background: var(--cream-2);
        border-color: var(--line);
    }

    .se-back-link {
        align-items: center;
        gap: .5rem;
        color: var(--ink);
        font-weight: 700;
        text-decoration: none;
    }

        .se-back-link svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .se-back-link:hover {
            color: var(--brand-primary);
        }
    /*.se-product-details-img{
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--cream-2);
  box-shadow: var(--shadow-sm);
}*/
    .se-product-details-img {
        border-radius: var(--radius-lg);
        overflow: hidden;
        aspect-ratio: 1 / 1;
        background: var(--cream-2);
        box-shadow: var(--shadow-sm);
    }

    @media (min-width: 992px) {
        .se-product-details-img {
            max-height: 380px;
        }
    }

    .se-product-details-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .se-product-details-price {
        color: var(--accent-pop);
        font-weight: 800;
        font-size: 1.6rem;
    }
    /* ---------- cart icon + drawer ---------- */
    .se-cart-toggle {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 50%;
        color: var(--ink);
        transition: border-color .15s ease, color .15s ease;
    }

        .se-cart-toggle:hover {
            border-color: var(--brand-primary);
            color: var(--brand-primary);
        }

        .se-cart-toggle svg {
            width: 17px;
            height: 17px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .se-cart-badge {
        position: absolute;
        top: -6px;
        left: -6px;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border-radius: 100px;
        background: var(--accent-pop);
        color: #fff;
        font-size: .68rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .se-cart-badge.is-empty {
            display: none;
        }

    html[data-theme="dark"] .se-cart-toggle {
        background: var(--cream-2);
        border-color: var(--line);
        color: var(--ink);
    }

    .se-cart-drawer {
        position: fixed;
        inset: 0;
        z-index: 1100;
        visibility: hidden;
    }

        .se-cart-drawer.is-open {
            visibility: visible;
        }

    .se-cart-drawer-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(15,25,30,.55);
        opacity: 0;
        transition: opacity .25s ease;
    }

    .se-cart-drawer.is-open .se-cart-drawer-backdrop {
        opacity: 1;
    }

    .se-cart-drawer-panel {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(380px, 90vw);
        background: var(--cream);
        box-shadow: 12px 0 30px rgba(0,0,0,.15);
        display: flex;
        flex-direction: column;
        transform: translateX(-100%);
        transition: transform .28s ease;
    }

    .se-cart-drawer.is-open .se-cart-drawer-panel {
        transform: translateX(0);
    }

    .se-cart-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--line);
    }

        .se-cart-drawer-header h3 {
            margin: 0;
            font-size: 1.1rem;
        }

        .se-cart-drawer-header button {
            background: none;
            border: none;
            font-size: 1.4rem;
            line-height: 1;
            color: var(--muted);
        }

    .se-cart-drawer-items {
        flex: 1;
        overflow-y: auto;
        padding: 1rem 1.5rem;
    }

    .se-cart-empty {
        color: var(--muted);
        text-align: center;
        margin-top: 2rem;
    }

    .se-cart-item {
        display: flex;
        align-items: center;
        gap: .85rem;
        padding: .85rem 0;
        border-bottom: 1px solid var(--line);
    }

        .se-cart-item img,
        .se-cart-item .se-cart-item-placeholder {
            width: 56px;
            height: 56px;
            border-radius: var(--radius-md);
            object-fit: cover;
            background: var(--cream-2);
            flex-shrink: 0;
        }

    .se-cart-item-info {
        flex: 1;
        min-width: 0;
    }

        .se-cart-item-info h4 {
            font-size: .9rem;
            margin: 0 0 .3rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

            .se-cart-item-info h4 a {
                color: inherit;
                text-decoration: none;
            }

                .se-cart-item-info h4 a:hover {
                    color: var(--brand-primary);
                    text-decoration: underline;
                }

    .se-cart-item-price {
        color: var(--accent-pop);
        font-weight: 700;
        font-size: .85rem;
    }

    .se-cart-item-badge {
        display: inline-block;
        margin-inline-start: .4rem;
        padding: .1rem .5rem;
        background: var(--brand-light);
        color: var(--brand-dark);
        font-size: .68rem;
        font-weight: 700;
        border-radius: 100px;
        vertical-align: middle;
    }

    .se-cart-item-qty-fixed {
        display: block;
        margin-top: .4rem;
        font-size: .8rem;
        color: var(--muted);
    }

    .se-cart-item-qty {
        display: flex;
        align-items: center;
        gap: .4rem;
        margin-top: .4rem;
    }

        .se-cart-item-qty button {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 1px solid var(--line);
            background: #fff;
            font-weight: 700;
            line-height: 1;
            color: var(--ink);
        }

    .se-cart-item-remove {
        background: none;
        border: none;
        color: var(--muted);
        font-size: 1.2rem;
        line-height: 1;
    }

        .se-cart-item-remove:hover {
            color: var(--accent-pop);
        }

    .se-cart-drawer-footer {
        padding: 1.25rem 1.5rem;
        border-top: 1px solid var(--line);
    }

        .se-cart-drawer-footer .btn + .btn {
            margin-top: .6rem;
        }

    .se-cart-total {
        font-weight: 700;
        margin-bottom: .85rem;
        display: flex;
        justify-content: space-between;
    }

        .se-cart-total span {
            color: var(--accent-pop);
            font-weight: 800;
        }

    html[data-theme="dark"] .se-cart-drawer-panel {
        background: var(--cream-2);
    }

    html[data-theme="dark"] .se-cart-item-qty button {
        background: var(--cream);
    }

    .se-cart-toggle, .se-theme-toggle, .se-lang-toggle, .se-nav-toggler,
    .se-notif-bell, .se-logout-btn, .se-login-link {
        flex-shrink: 0;
    }


    .se-password-field {
        position: relative;
    }

        .se-password-field .form-control {
            padding-inline-end: 42px;
        }

    .se-password-toggle {
        position: absolute;
        top: 50%;
        inset-inline-end: 10px;
        transform: translateY(-50%);
        background: none;
        border: none;
        padding: 4px;
        color: var(--muted);
        display: flex;
        align-items: center;
    }

        .se-password-toggle svg {
            width: 19px;
            height: 19px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.7;
        }

        .se-password-toggle .se-eye-off {
            display: none;
        }

        .se-password-toggle.is-visible .se-eye {
            display: none;
        }

        .se-password-toggle.is-visible .se-eye-off {
            display: block;
        }
    /* ---------- gallery grid: admin product form ---------- */
    .se-gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: .6rem;
    }

    .se-gallery-slot {
        position: relative;
        aspect-ratio: 1 / 1;
        border-radius: var(--radius-md);
        overflow: hidden;
        background: var(--cream-2);
        border: 1.5px dashed var(--line);
    }

        .se-gallery-slot.has-file {
            border-style: solid;
        }

        .se-gallery-slot img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .se-gallery-add {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--muted);
        transition: border-color .15s ease, background .15s ease, color .15s ease;
    }

        .se-gallery-add:hover {
            border-color: var(--brand-primary);
            background: var(--brand-light);
            color: var(--brand-primary);
        }

        .se-gallery-add svg {
            width: 26px;
            height: 26px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
        }

    .se-gallery-remove {
        position: absolute;
        top: 4px;
        inset-inline-end: 4px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: none;
        background: rgba(0,0,0,.55);
        color: #fff;
        line-height: 1;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .se-gallery-remove:hover {
            background: var(--accent-pop);
        }
    /* ---------- product gallery: details page ---------- */
    .se-product-gallery {
        display: flex;
        flex-direction: column;
        gap: .9rem;
    }

    .se-gallery-zoom {
        position: relative;
        cursor: zoom-in;
    }

    /* ---------- lightbox: click الصورة تفتح نسخة مكبّرة على خلفية غامقة (زي سندس) ---------- */
    .se-lightbox {
        position: fixed;
        inset: 0;
        z-index: 1080;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem;
        background: rgba(10,16,20,.9);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility .25s ease;
    }

        .se-lightbox.is-open {
            opacity: 1;
            visibility: visible;
        }

        .se-lightbox img {
            max-width: 90vw;
            max-height: 90vh;
            object-fit: contain;
            border-radius: var(--radius-md);
            transform: scale(.92);
            transition: transform .25s ease;
        }

        .se-lightbox.is-open img {
            transform: scale(1);
        }

    .se-lightbox-close {
        position: absolute;
        top: 20px;
        inset-inline-end: 24px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: none;
        background: rgba(255,255,255,.12);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background .2s ease;
    }

        .se-lightbox-close:hover {
            background: rgba(255,255,255,.22);
        }

        .se-lightbox-close svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: #fff;
            stroke-width: 2;
        }

    .se-gallery-arrow {
        position: absolute;
        top: 50%;
        translate: 0 -50%;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: none;
        background: rgba(255,255,255,.85);
        box-shadow: var(--shadow-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
    }

        .se-gallery-arrow svg {
            width: 20px;
            height: 20px;
            fill: none;
            stroke: var(--brand-dark);
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .se-gallery-arrow-prev {
        left: 12px;
    }

    .se-gallery-arrow-next {
        right: 12px;
    }

    .se-gallery-arrow:hover {
        background: #fff;
    }

    .se-gallery-thumbs {
        display: flex;
        gap: .6rem;
        flex-wrap: wrap;
    }

    .se-gallery-thumb {
        width: 70px;
        height: 70px;
        border-radius: var(--radius-md);
        overflow: hidden;
        border: 2px solid transparent;
        padding: 0;
        background: var(--cream-2);
    }

        .se-gallery-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .se-gallery-thumb.active {
            border-color: var(--brand-primary);
        }
    /* ---------- page preloader ---------- */
    .se-preloader {
        position: fixed;
        inset: 0;
        z-index: 2000;
        background: var(--cream-2);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity .4s ease, visibility .4s ease;
    }

        .se-preloader.is-hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
    /*.se-preloader-spinner {
    position: relative;
    width: 120px;
    height: 120px;
}

    .se-preloader-spinner::before,
    .se-preloader-spinner::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 3px solid transparent;
    }

    .se-preloader-spinner::before {
        border-top-color: var(--brand-primary);
        border-inline-end-color: var(--brand-primary);
        animation: se-preloader-spin 1s linear infinite;
    }

    .se-preloader-spinner::after {
        inset: 10px;
        border-bottom-color: var(--brand-dark);
        border-inline-start-color: var(--brand-dark);
        animation: se-preloader-spin-reverse 1.4s linear infinite;
    }

.se-preloader-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 56px;
    height: 56px;
    object-fit: contain;
    animation: se-preloader-pulse 1.3s ease-in-out infinite;
}

@keyframes se-preloader-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes se-preloader-spin-reverse {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes se-preloader-pulse {
    0%,100% {
        transform: translate(-50%,-50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translate(-50%,-50%) scale(1.08);
        opacity: .85;
    }
}*/

    .se-preloader-ring-wrap {
        position: relative;
        width: 120px;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .se-preloader-spinner {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 2px solid color-mix(in srgb, var(--brand-primary) 18%, transparent);
        animation: se-preloader-spin 1.6s linear infinite;
    }

    .se-preloader-dot {
        position: absolute;
        top: -5px;
        left: 50%;
        translate: -50% 0;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--brand-primary);
        box-shadow: 0 0 10px 2px color-mix(in srgb, var(--brand-primary) 55%, transparent);
    }

    .se-preloader-logo {
        position: relative;
        width: 54px;
        height: 54px;
        object-fit: contain;
        z-index: 1;
    }

    @keyframes se-preloader-spin {
        to {
            transform: rotate(360deg);
        }
    }
    /* ---------- back to top: feather + scroll-progress ring ---------- */
/* ---------- back to top: same footprint as the WhatsApp bubble (56×56) ---------- */
.se-back-to-top {
    position: fixed;
    bottom: 84px;
    left: 22px;
    width: 56px;
    height: 56px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1039;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

    .se-back-to-top.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

.se-back-to-top-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.se-back-to-top-track {
    fill: none;
    stroke: var(--line);
    stroke-width: 3;
}

.se-back-to-top-bar {
    fill: none;
    stroke: var(--brand-primary);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset .1s linear;
}

.se-back-to-top-feather {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 34px;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 4px 8px rgba(0,79,118,.35));
    transition: transform .2s ease;
}

.se-back-to-top:hover .se-back-to-top-feather {
    transform: translate(-50%, -50%) translateY(-2px);
}
    /* ---------- shipping partners strip (footer bottom) ---------- */
    .se-shipping-partners {
        display: flex;
        align-items: center;
        gap: .9rem;
    }

    .se-shipping-partners-label {
        font-size: .85rem;
        color: var(--muted);
    }

.se-shipping-partners img {
    height: 42px;
    width: auto;
    object-fit: contain;
    opacity: 1;
}
    /* ---------- marketing text ticker ---------- */
    .se-text-ticker-wrap {
        overflow: hidden;
        background: linear-gradient(90deg, var(--brand-dark), var(--brand-primary));
        padding: .85rem 0;
    }

    .se-text-ticker-track {
        display: flex;
        width: max-content;
        gap: 3rem;
        animation: se-ticker-scroll 24s linear infinite;
    }

    .se-text-ticker-item {
        color: #fff;
        font-weight: 600;
        font-size: .95rem;
        white-space: nowrap;
    }

        .se-text-ticker-item::after {
            content: "✦";
            opacity: .55;
            margin-inline-start: 3rem;
        }

    @keyframes se-ticker-scroll {
        to {
            transform: translateX(var(--se-ticker-shift, -50%));
        }
    }
    /* ---------- latest products grid card — عن قصد شكلها مش نفس كارت صفحة المنتجات
       (.se-product-card بزاويا متساوية) عشان الحتة دي تحس إنها "معروضة مميزة" في الصفحة
       الرئيسية، مش نسخة تانية من الكاتالوج. زوايا غير متماثلة (نفس فكرة الريشة/اللوجو) بدل
       الزوايا الموحدة، بس نفس المحتوى والوظيفة بالظبط. ---------- */
    .se-latest-card {
        background: #fff;
        border-radius: 28px 8px 28px 8px;
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--line);
        transition: transform .2s ease, box-shadow .2s ease;
        /* من غير حد أقصى، الكارد كان بياخد ثلث عرض الـ container كامل على الشاشات الواسعة —
           يعني صورة مربعة كبيرة جدًا بتخلي القسم كله طويل وغير مريح للعين. */
        max-width: 300px;
        margin-inline: auto;
    }

        .se-latest-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-md);
        }

    .se-latest-card-img {
        position: relative;
        aspect-ratio: 1 / 1;
        background: var(--cream-2);
        overflow: hidden;
        border-radius: 22px 0 0 0;
    }

        .se-latest-card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .35s ease;
        }

    .se-latest-card:hover .se-latest-card-img img {
        transform: scale(1.06);
    }

    /* ⚠️ كانت مخفية إلا لما تعمل hover — :hover مش موجودة أصلاً على شاشة لمس، فعلى الموبايل
       كان المستخدم مضطر يدوس على الكارد (وده بيروح لصفحة التفاصيل) عشان بس يشوف الأزرار
       تبان. خليناها ظاهرة طول الوقت في أي مقاس، بدل ما تكون حاجة لازم "تكتشفها" بالهافر. */
    .se-latest-card-actions {
        position: absolute;
        top: 10px;
        inset-inline-end: 10px;
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }

    .se-latest-action-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background: #fff;
        box-shadow: var(--shadow-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: relative;
    }

        .se-latest-action-btn svg {
            width: 17px;
            height: 17px;
            fill: none;
            stroke: var(--brand-dark);
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .se-latest-action-btn::after {
            content: attr(data-tooltip);
            position: absolute;
            inset-inline-end: calc(100% + 8px);
            top: 50%;
            translate: 0 -50%;
            background: var(--brand-dark);
            color: #fff;
            font-size: .72rem;
            padding: .3rem .6rem;
            border-radius: 6px;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: opacity .15s ease;
            pointer-events: none;
        }

        .se-latest-action-btn:hover::after {
            opacity: 1;
            visibility: visible;
        }

    .se-share-wrap {
        position: relative;
    }

    .se-share-popover {
        position: absolute;
        top: 0;
        inset-inline-end: calc(100% + 8px);
        display: flex;
        gap: .4rem;
        background: #fff;
        padding: .5rem;
        border-radius: 999px;
        box-shadow: var(--shadow-md);
        opacity: 0;
        visibility: hidden;
        transform: translateX(6px);
        transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    }

        .se-share-popover.is-open {
            opacity: 1;
            visibility: visible;
            transform: translateX(0);
        }

    .se-share-link {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: none;
        background: var(--cream-2);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

        .se-share-link svg {
            width: 15px;
            height: 15px;
            fill: currentColor;
            stroke: none;
        }

    .se-share-fb {
        color: #1877f2;
    }

    .se-share-x {
        color: #000;
    }

    .se-share-wa {
        color: #25D366;
    }

    .se-share-mail svg, .se-share-copy svg {
        fill: none;
        stroke: var(--brand-dark);
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    /* ---------- quick view modal ---------- */
    .se-quick-view-modal {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.5rem;
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility .25s ease;
    }

        .se-quick-view-modal.is-open {
            opacity: 1;
            visibility: visible;
        }

    .se-quick-view-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(15,25,30,.72);
        backdrop-filter: blur(2px);
    }

    .se-quick-view-dialog {
        position: relative;
        background: #fff;
        border-radius: var(--radius-lg);
        overflow: hidden;
        max-width: min(880px, 94vw);
        max-height: 90vh;
        overflow-y: auto;
        transform: scale(.94) translateY(10px);
        transition: transform .25s ease;
    }

    .se-quick-view-modal.is-open .se-quick-view-dialog {
        transform: scale(1) translateY(0);
    }

    .se-quick-view-close {
        position: absolute;
        top: 12px;
        inset-inline-end: 12px;
        z-index: 2;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(255,255,255,.9);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: var(--shadow-sm);
    }

        .se-quick-view-close svg {
            width: 16px;
            height: 16px;
            fill: none;
            stroke: var(--brand-dark);
            stroke-width: 2;
        }

    .se-quick-view-gallery {
        padding: 1.25rem;
    }

    .se-quick-view-main {
        position: relative;
        aspect-ratio: 1/1;
        border-radius: var(--radius-md);
        overflow: hidden;
        background: var(--cream-2);
    }

    .se-quick-view-main-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .se-quick-view-thumbs {
        margin-top: .75rem;
    }

    .se-quick-view-info {
        padding: 2rem 1.5rem;
    }

    html[data-theme="dark"] .se-quick-view-dialog {
        background: var(--cream-2);
    }
/* ---------- staggered reveal: image pops in first, details unfold from behind it ---------- */
.se-quick-view-gallery {
    opacity: 0;
    transform: scale(.8);
    transition: opacity .35s ease, transform .35s ease;
}

.se-quick-view-modal.is-open .se-quick-view-gallery {
    opacity: 1;
    transform: scale(1);
}

/* البوب من غير الحجم بتاع الصورة بس أول ما تفتح — العمود التاني (التفاصيل) بعرض 0fr، يعني
   مش موجود في حساب حجم البوب أصلاً. لما تفتح، العمود يتسع لـ 1fr فيوسع البوب كله معاه —
   حرفيًا "البوب بيتقسم من نص الصورة"، مش بوب كاملة الحجم من الفريم الأول. الشاشات الصغيرة
   (تحت 768px) بيرجعوا يترصّوا فوق بعض عادي زي أي وقت (Bootstrap)، من غير أي حركة تمدد. */
@media (min-width: 768px) {
    .se-quick-view-dialog {
        width: fit-content;
    }

    .se-quick-view-row {
        display: grid;
        grid-template-columns: 380px 0px;
        align-items: start;
        transition: grid-template-columns .5s ease;
        margin: 0;
    }

    /* is-expanded عن قصد كلاس منفصل عن is-open: is-open بس بيتحكم في ظهور/اختفاء البوب نفسها
       (fade + scale)، وis-expanded (بيتحط بتأخير بسيط بالـ JS) بيتحكم في اتساع العمود وظهور
       الكلام. الفصل ده هو اللي بيدي إحساس "الصورة تبان لوحدها لحظة خفيفة الأول، وبعدين البوب
       يتسع" بدل ما كل حاجة تتحرك مع بعض من أول لحظة.
       ملحوظة مهمة: العمود التاني عرضه رقم ثابت (420px) مش 1fr — لو سيبناه مرن، النص جواه كان
       بيعيد التفاف (wrap) على كل عرض بيتغير أثناء الحركة، وعند عرض صغير جدًا كل كلمة بتاخد سطر
       لوحدها فيطلع بلوك طويل جدًا يشد ارتفاع الصف كله معاه (وده اللي كان بيبان إن "الصورة
       بتطول" وقت القفل). بعرض ثابت + overflow:hidden، النص بيتلف مرة واحدة على 420px ومايتغيرش
       طول الحركة، فالارتفاع يفضل ثابت من الأول للآخر. */
    .se-quick-view-modal.is-expanded .se-quick-view-row {
        grid-template-columns: 380px 420px;
    }

    .se-quick-view-gallery-col,
    .se-quick-view-info-col {
        width: auto;
        max-width: none;
        flex: none;
        padding: 0;
    }

    .se-quick-view-info-col {
        min-width: 0;
        overflow: hidden;
    }

    .se-quick-view-info {
        width: 420px;
    }
}

.se-quick-view-info {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity .3s ease, transform .3s ease;
    transition-delay: 0s;
}

.se-quick-view-modal.is-expanded .se-quick-view-info {
    opacity: 1;
    transform: translateX(0);
    transition-delay: .15s; /* تتأخر شوية عن اتساع العمود عشان تبان إنها "بتتكشف" من وراه */
}

/* ---------- نفس حكاية "الصورة الأول، التفاصيل تتكشف بعدها" بس على الموبايل بمحور رأسي
   بدل الأفقي — فوق كده، على الديسكتوب العمود التاني عرضه صفر أصلاً (grid-template-columns)
   فمفيش حاجة تحجز مكان؛ على الموبايل الأعمدة بترص عادي (Bootstrap col-12) من غير grid، فلو
   سبنا العمود بارتفاعه الطبيعي من الأول، هيبان فاضي/محجوز مكانه قبل ما يتفتح. بنقفل
   .se-quick-view-info-clip بـ max-height:0 بدل كده، ونفتحها بنفس لحظة is-expanded. ---------- */
@media (max-width: 767.98px) {
    .se-quick-view-info-clip {
        max-height: 0;
        overflow: hidden;
        transition: max-height .5s ease;
    }

    .se-quick-view-modal.is-expanded .se-quick-view-info-clip {
        max-height: 640px;
        transition-delay: .15s;
    }

    .se-quick-view-info {
        transform: translateY(16px);
    }

    .se-quick-view-modal.is-expanded .se-quick-view-info {
        transform: translateY(0);
    }
}

/* ---------- National Address field helper: a small icon next to the label that opens a premium
   card-style popover explaining how to find the code via Tawakkalna — deliberately styled like the
   rest of the site's own cards (icon badge, brand accents, soft shadow), not a plain browser-default
   tooltip box. ---------- */
.se-field-help-row{
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .35rem;
}
.se-field-help-row .form-label{ margin-bottom: 0; }
.se-field-help{
    position: relative;
    display: inline-flex;
}
.se-field-help-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--brand-light);
    color: var(--brand-primary);
    padding: 0;
    cursor: pointer;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}
.se-field-help-icon svg{ width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; fill: none; }
.se-field-help-icon:hover,
.se-field-help-icon:focus-visible{
    color: #fff;
    background: var(--brand-primary);
    transform: scale(1.06);
}
html[data-theme="dark"] .se-field-help-icon{ background: var(--brand-primary); color: #fff; }

.se-field-help-popover{
    position: absolute;
    top: calc(100% + 14px);
    right: -8px;
    width: min(320px, 88vw);
    background: var(--cream);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(0, 79, 118, .16);
    padding: 1.3rem 1.35rem 1.15rem;
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.98);
    transform-origin: top left;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.se-field-help.is-open .se-field-help-popover{
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.se-field-help-popover-head{
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 0 .7rem;
}
.se-field-help-popover-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-pop));
}
.se-field-help-popover-icon svg{
    width: 19px;
    height: 19px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.se-field-help-popover h4{
    font-size: .96rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
    line-height: 1.35;
}
.se-field-help-popover p{
    font-size: .84rem;
    color: var(--muted);
    margin: 0 0 .9rem;
    line-height: 1.7;
}
.se-field-help-popover p strong{ color: var(--brand-primary); }
.se-field-help-example{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .6rem .85rem;
}
.se-field-help-example span{ font-size: .74rem; color: var(--muted); }
.se-field-help-example code{
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--brand-dark);
    direction: ltr;
}
html[data-theme="dark"] .se-field-help-example code{ color: var(--accent-gold-light); }
.se-field-help-close{
    position: absolute;
    top: .8rem;
    left: .8rem;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.se-field-help-close svg{ width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.se-field-help-close:hover{ background: var(--cream-2); color: var(--ink); }

html[data-theme="dark"] .se-field-help-popover{ background: var(--cream-2); box-shadow: 0 18px 45px rgba(0, 0, 0, .45); }

/* ---------- checkout page: section grouping inside the form card, trust row under the invoice,
   and the plain-text payment note (no fake "select a payment method" UI — this site has no
   payment gateway, so the honest thing is to say up front it's cash-on-delivery). ---------- */
.se-checkout-subtitle{ color: var(--muted); margin: .4rem 0 0; }

.se-checkout-section{ margin-bottom: 1.5rem; }
.se-checkout-section:last-of-type{ margin-bottom: 1rem; }
.se-checkout-section-title{
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--brand-dark);
    margin: 0 0 1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--line);
}
.se-checkout-section-title svg{
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: var(--accent-gold);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
html[data-theme="dark"] .se-checkout-section-title{ color: var(--accent-gold-light); }

.se-checkout-payment-note{
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--brand-light);
    color: var(--brand-dark);
    border-radius: var(--radius-md);
    padding: .75rem 1rem;
    font-size: .85rem;
    margin-bottom: 1.2rem;
}
.se-checkout-payment-note svg{
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
html[data-theme="dark"] .se-checkout-payment-note{ background: var(--brand-primary); color: #fff; }

.se-checkout-trust-row{
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1rem;
}
.se-checkout-trust-item{
    flex: 1 1 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: .9rem .6rem;
    font-size: .76rem;
    color: var(--muted);
    box-shadow: var(--shadow-sm);
}
.se-checkout-trust-item svg{
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--brand-primary);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
html[data-theme="dark"] .se-checkout-trust-item{ background: var(--cream-2); }

/* ---------- order confirmation page: success header, order-meta row (number/date/status),
   and a delivery-info grid — reuses the same .se-invoice-* receipt styling as checkout so the
   two pages read as one connected flow, not two unrelated designs. ---------- */
.se-confirmation-head{ text-align: center; margin-bottom: 2rem; }
.se-confirmation-check{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-pop));
    margin-bottom: 1.2rem;
}
.se-confirmation-check svg{
    width: 30px;
    height: 30px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.se-confirmation-card{ max-width: 640px; }
.se-confirmation-meta{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    padding-bottom: 1.2rem;
    margin-bottom: 1.2rem;
    border-bottom: 1px dashed var(--line);
}
.se-confirmation-meta > div{ display: flex; flex-direction: column; gap: .3rem; }
.se-confirmation-meta-label{ font-size: .74rem; color: var(--muted); }
.se-confirmation-meta-value{ font-weight: 700; color: var(--ink); }
.se-confirmation-delivery{ margin-bottom: 1.5rem; }
.se-confirmation-delivery-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .9rem 1.2rem;
}
.se-confirmation-delivery-grid > div{ display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; }
.se-confirmation-delivery-grid span{ color: var(--muted); font-size: .76rem; }
.se-confirmation-delivery-grid strong{ color: var(--ink); font-weight: 600; }
.se-confirmation-delivery-wide{ grid-column: 1 / -1; }

@media (max-width: 420px){
    /* Narrow screens: the icon can sit anywhere along the label row, so anchoring the popover
       by a fixed `right` offset (like on desktop) risks it running off the viewport edge —
       center it on the icon instead, which keeps it on-screen regardless of label length. */
    .se-field-help-popover{
        right: auto;
        left: 50%;
        transform: translateX(-50%) translateY(-8px) scale(.98);
    }
    .se-field-help.is-open .se-field-help-popover{
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

/* ---------- order confirmation: the required "send it on WhatsApp" step ---------- */
.se-confirm-steps{
    list-style: none;
    margin: 0 auto 1.75rem;
    padding: 1.1rem 1.25rem;
    max-width: 640px;
    display: grid;
    gap: .85rem;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border-inline-start: 4px solid var(--accent-pop);
}
html[data-theme="dark"] .se-confirm-steps{ background: var(--cream-2); }
.se-confirm-steps li{ display: flex; align-items: center; gap: .85rem; opacity: .6; }
.se-confirm-steps li.is-done, .se-confirm-steps li.is-current{ opacity: 1; }
.se-confirm-step-dot{
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .9rem;
    color: var(--muted);
    border: 2px solid var(--line);
}
.se-confirm-step-dot svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.is-done .se-confirm-step-dot{ background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.is-current .se-confirm-step-dot{ background: var(--accent-pop); border-color: var(--accent-pop); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-pop) 22%, transparent); }
.se-confirm-step-text{ display: flex; flex-direction: column; line-height: 1.35; }
.se-confirm-step-text strong{ color: var(--brand-dark); font-size: .98rem; }
html[data-theme="dark"] .se-confirm-step-text strong{ color: var(--ink); }
.se-confirm-step-text small{ color: var(--muted); font-size: .8rem; }
.is-current .se-confirm-step-text small{ color: var(--accent-pop); font-weight: 700; }
.se-confirm-required-note{
    max-width: 640px;
    margin: 1rem auto 0;
    text-align: center;
    font-size: .9rem;
    font-weight: 600;
    color: var(--brand-dark);
}
html[data-theme="dark"] .se-confirm-required-note{ color: var(--accent-gold-light); }
.se-confirm-required-note span{ font-weight: 500; color: var(--muted); }

/* ---------- friendly form validation (every form on the site) ---------- */
/* Edge draws its own show-password eye inside password fields; ours (see forms.js) is the only one wanted. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }

.form-control, .form-select { scroll-margin-top: 140px; }   /* a field focused after a failed submit must not hide under the sticky navbar */

.se-required::after {
    content: " *";
    color: var(--accent-pop);
    font-weight: 700;
}

.form-control.input-validation-error,
.form-select.input-validation-error {
    border-color: var(--accent-pop) !important;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent-pop) 16%, transparent);
}

.field-validation-error,
.validation-summary-errors {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-top: .45rem;
    padding: .5rem .8rem;
    border: 1px solid color-mix(in srgb, var(--accent-pop) 32%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-pop) 9%, transparent);
    color: #a52d14 !important;
    font-size: .86rem !important;
    font-weight: 600;
    line-height: 1.65;
    text-align: start;
    animation: se-field-error-in .25s ease;
}

.field-validation-error::before,
.validation-summary-errors::before {
    content: "!";
    flex: 0 0 1.25rem;
    height: 1.25rem;
    margin-top: .2rem;
    border-radius: 50%;
    background: var(--accent-pop);
    color: #fff;
    font-size: .75rem;
    font-weight: 800;
    line-height: 1.25rem;
    text-align: center;
}

.validation-summary-errors ul { list-style: none; margin: 0; padding: 0; }
.validation-summary-errors li + li { margin-top: .25rem; }
.validation-summary-valid { display: none; }

html[data-theme="dark"] .field-validation-error,
html[data-theme="dark"] .validation-summary-errors {
    color: #ffa58f !important;
    background: color-mix(in srgb, var(--accent-pop) 14%, transparent);
    border-color: color-mix(in srgb, var(--accent-pop) 42%, transparent);
}

@keyframes se-field-error-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .field-validation-error, .validation-summary-errors { animation: none; }
}

/* ---------- admin tables turn into stacked cards when the screen is too narrow for all columns ---------- */
/* (a horizontally scrolling table hid its last column — the order status — on laptops and phones) */
@media (max-width: 1199.98px) {
    .se-admin-table.se-stack-xl thead { display: none; }
    .se-admin-table.se-stack-xl, .se-admin-table.se-stack-xl tbody, .se-admin-table.se-stack-xl tr, .se-admin-table.se-stack-xl td { display: block; width: 100%; }
    .se-admin-table.se-stack-xl tr {
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: .35rem 1rem;
        margin-bottom: .9rem;
        background: var(--cream);
    }
    .se-admin-table.se-stack-xl td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .55rem 0;
        border-bottom: 1px dashed var(--line);
        text-align: end;
    }
    .se-admin-table.se-stack-xl td:last-child { border-bottom: 0; }
    .se-admin-table.se-stack-xl td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        min-width: 6rem;
        font-size: .82rem;
        font-weight: 700;
        color: var(--muted);
        text-align: start;
    }
    .se-admin-table.se-stack-xl td form { flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 575.98px) {
    .se-admin-table.se-stack-sm thead { display: none; }
    .se-admin-table.se-stack-sm, .se-admin-table.se-stack-sm tbody, .se-admin-table.se-stack-sm tr, .se-admin-table.se-stack-sm td { display: block; width: 100%; }
    .se-admin-table.se-stack-sm tr {
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: .35rem 1rem;
        margin-bottom: .9rem;
        background: var(--cream);
    }
    .se-admin-table.se-stack-sm td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .55rem 0;
        border-bottom: 1px dashed var(--line);
        text-align: end;
    }
    .se-admin-table.se-stack-sm td:last-child { border-bottom: 0; }
    .se-admin-table.se-stack-sm td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        min-width: 6rem;
        font-size: .82rem;
        font-weight: 700;
        color: var(--muted);
        text-align: start;
    }
    .se-admin-table.se-stack-sm td form { flex-wrap: wrap; justify-content: flex-end; }
}

/* ---------- buttons: every state keeps the button's own colours, and a click never draws a second box ---------- */
/* Bootstrap paints a button's hover / pressed / keyboard-focus look from its own --bs-btn-* variables. Our
   .btn-pop / .btn-brand / .btn-brand-outline / .btn-gold only set the resting colours, so the moment one was
   pressed or focused Bootstrap reached for variables that did not exist: the fill dropped out, the text colour
   flipped, and a blue ring (plus the browser's own white-and-blue ring) was drawn on top — the "boxes stacking
   on top of each other" after a click. Each variant now defines the full set. */
.btn-pop {
    --bs-btn-color: #fff; --bs-btn-bg: var(--accent-pop); --bs-btn-border-color: var(--accent-pop);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #e0532f; --bs-btn-hover-border-color: #e0532f;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #cf4724; --bs-btn-active-border-color: #cf4724;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--accent-pop); --bs-btn-disabled-border-color: var(--accent-pop);
    --bs-btn-focus-shadow-rgb: 255, 106, 69;
}
.btn-brand {
    --bs-btn-color: #fff; --bs-btn-bg: var(--brand-primary); --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #003a58; --bs-btn-active-border-color: #003a58;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--brand-primary); --bs-btn-disabled-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb: 0, 156, 216;
}
.btn-brand-outline {
    --bs-btn-color: var(--brand-primary); --bs-btn-bg: transparent; --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand-primary); --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark);
    --bs-btn-disabled-color: var(--brand-primary); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb: 0, 156, 216;
}
.btn-gold {
    --bs-btn-color: #fff; --bs-btn-bg: var(--accent-gold); --bs-btn-border-color: var(--accent-gold);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #a97a3d; --bs-btn-hover-border-color: #a97a3d;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #8f6733; --bs-btn-active-border-color: #8f6733;
    --bs-btn-focus-shadow-rgb: 192, 142, 78;
}

/* No ring at all for a mouse click or a tap; keyboard users get one single, clean outline. */
.btn { --bs-btn-focus-box-shadow: none; }
.btn:focus:not(:focus-visible),
.btn:active:focus:not(:focus-visible) { outline: 0; box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; box-shadow: none; }
.btn-pop:focus-visible { outline-color: var(--accent-pop); }
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) { outline: none; }
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* no grey flash box over a button or link on a phone tap */
a, button, .btn, label, [role="button"] { -webkit-tap-highlight-color: transparent; }