/* ─────────────────────────────────────────────────────────────────
   KIRA STORE — Premium Dark Design System
   ───────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
  /* Colors */
  --bg:          #0d0f14;
  --bg-2:        #12151c;
  --bg-3:        #181c26;
  --surface:     #1c2030;
  --surface-2:   #222840;
  --border:      rgba(255,255,255,.07);
  --border-2:    rgba(255,255,255,.12);

  --text-1:      #f0f2f8;
  --text-2:      #9ba3be;
  --text-3:      #6b7394;

  --accent:      #ffffff;
  --accent-2:    #ee6548;
  --accent-glow: rgba(255,255,255,.10);

  --green:       #4ade80;
  --green-dim:   rgba(74,222,128,.12);
  --blue:        #60a5fa;
  --blue-dim:    rgba(96,165,250,.12);
  --purple:      #c084fc;
  --purple-dim:  rgba(192,132,252,.12);
  --red:         #f87171;
  --red-dim:     rgba(248,113,113,.12);

  /* Typography */
  --font-sans:   'Cairo', 'Segoe UI', sans-serif;
  --font-en:     'Space Grotesk', sans-serif;

  /* Spacing */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 36px;

  /* Shadows */
  --shadow-sm:   0 2px 8px rgba(0,0,0,.35);
  --shadow-md:   0 8px 30px rgba(0,0,0,.45);
  --shadow-lg:   0 20px 60px rgba(0,0,0,.5);
  --shadow-glow: 0 0 40px rgba(247,201,72,.12);

  /* Transitions */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;
  --t-slow: 400ms cubic-bezier(.2,.75,.2,1);
}

/* ── Reset & Base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
  max-width: 100vw;
}
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text-1);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  min-width: 320px;
  overflow-x: hidden;
  max-width: 100vw;
}
body.menu-open {
  overflow: hidden !important;
}
::selection { background: var(--accent); color: #1a1500; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea {
  font-family: inherit;
  font-size: 16px; /* Prevents auto-zoom on iOS Safari */
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Container ─────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 640px)  { .container { padding: 0 28px; } }
@media (min-width: 1024px) { .container { padding: 0 40px; } }

/* ── Typography helpers ─────────────────────────────────────────── */
.section-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.section-title {
  margin-top: 6px;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-1);
}
.page-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-2); }
.page-title   { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 800; line-height: 1.1; }
.page-subtitle { margin-top: 6px; font-size: .9rem; color: var(--text-2); }
.card-title    { font-size: 1.1rem; font-weight: 700; }
.card-subtitle { margin-top: 4px; font-size: .85rem; color: var(--text-2); }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-xl);
  font-size: .9rem;
  font-weight: 700;
  transition: transform var(--t-base), box-shadow var(--t-base), opacity var(--t-base);
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: #ffffff;
  color: #0d0f14;
  box-shadow: 0 4px 20px rgba(255,255,255,.15);
}
.btn-primary:hover { box-shadow: 0 8px 30px rgba(255,255,255,.22); }

.btn-outline {
  border: 1.5px solid var(--border-2);
  color: var(--text-1);
  background: transparent;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

.btn-ghost {
  color: var(--text-2);
  font-size: .82rem;
  padding: 8px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.btn-ghost:hover { color: var(--text-1); border-color: var(--border-2); }

.btn-submit {
  width: 100%;
  padding: 16px 28px;
  font-size: 1rem;
  border-radius: var(--r-xl);
  justify-content: center;
}
.btn-submit:disabled { opacity: .55; pointer-events: none; }

.btn-back {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border-2);
  color: var(--text-2);
  flex-shrink: 0;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.btn-back:hover { border-color: var(--accent); color: var(--accent); }

.btn-text-danger {
  font-size: .8rem; font-weight: 600;
  color: var(--text-3);
  transition: color var(--t-fast);
}
.btn-text-danger:hover { color: var(--red); }

/* ── Cards ──────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}

/* ── Info Box ───────────────────────────────────────────────────── */
.info-box {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-md);
  font-size: .82rem;
  color: var(--text-2);
  line-height: 1.6;
  margin-top: 14px;
}
.info-box svg { color: #ffffff; flex-shrink: 0; margin-top: 2px; }
.info-box--green {
  background: var(--green-dim);
  border-color: rgba(74,222,128,.25);
}
.info-box--green svg { color: var(--green); }

/* ── Header ─────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13,15,20,.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  gap: 12px;
}
@media (min-width: 640px) { .header-inner { padding: 14px 28px; gap: 16px; } }
@media (min-width: 1024px) { .header-inner { padding: 14px 40px; } }

/* Brand */
.brand { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; }
.brand-icon {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1.5px solid rgba(225,48,108,.4);
  box-shadow: 0 0 14px rgba(225,48,108,.3);
  transition: box-shadow var(--t-fast);
  background: #000;
}
@media (min-width: 640px) {
  .brand-icon { width: 44px; height: 44px; }
}
.brand:hover .brand-icon {
  box-shadow: 0 0 20px rgba(225,48,108,.5);
}
.brand-icon img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.045);
  transform-origin: center center;
  border: none;
  display: block;
}
.brand-name {
  font-family: var(--font-en);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -.02em;
}
@media (min-width: 640px) {
  .brand-name { font-size: 1.15rem; }
}
.brand-period { color: var(--accent-2); }

/* Nav */
.nav-desktop { display: none; gap: 28px; align-items: center; }
@media (min-width: 768px) { .nav-desktop { display: flex; } }
.nav-link {
  font-size: .88rem; font-weight: 600;
  color: var(--text-2);
  transition: color var(--t-fast);
}
.nav-link:hover { color: var(--text-1); }

/* Header actions */
.header-actions { display: flex; align-items: center; gap: 8px; }
@media (min-width: 640px) { .header-actions { gap: 10px; } }

/* Cart button */
.cart-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 11px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-1);
  transition: border-color var(--t-fast), transform var(--t-fast);
  flex-shrink: 0;
}
@media (min-width: 640px) {
  .cart-btn {
    padding: 8px 14px;
    gap: 8px;
    font-size: .85rem;
  }
}
.cart-btn:hover { border-color: rgba(255,255,255,.3); transform: translateY(-1px); }
.cart-btn svg { color: var(--text-1); width: 17px; height: 17px; }
.cart-label { display: none; }
@media (min-width: 640px) { .cart-label { display: inline; } }
.cart-count {
  display: grid; place-items: center;
  min-width: 19px; height: 19px;
  padding: 0 4px;
  border-radius: 10px;
  background: var(--text-1);
  color: #0d0f14;
  font-size: .72rem;
  font-weight: 800;
}

/* Burger */
.burger-btn {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  width: 38px; height: 38px;
  padding: 0;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  flex-shrink: 0;
  transition: all var(--t-fast);
}
@media (min-width: 768px) { .burger-btn { display: none; } }
.burger-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-2);
}
.burger-btn span {
  width: 19px; height: 2px;
  background: var(--text-1);
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-fast);
}
.burger-btn.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger-btn.open span:nth-child(2) { opacity: 0; }
.burger-btn.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile menu backdrop */
.mobile-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 10, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 48;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.mobile-menu-backdrop.open {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Mobile menu */
.mobile-menu {
  display: none;
  flex-direction: column;
  border-top: 1px solid var(--border);
  padding: 12px 16px 20px;
  gap: 3px;
  background: rgba(13, 15, 20, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  max-height: calc(100dvh - 65px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  position: relative;
  z-index: 49;
}
.mobile-menu.open {
  display: flex;
}
.mobile-link {
  font-size: .92rem; font-weight: 600;
  color: var(--text-2);
  padding: 11px 12px;
  border-radius: var(--r-sm);
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: all var(--t-fast);
}
.mobile-link:last-child { border-bottom: none; }
.mobile-link:hover, .mobile-link:active {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.phone-ltr-val {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-en);
  font-weight: 700;
  color: #fff;
  display: inline-block;
}
.hours-sub {
  color: var(--text-3);
  font-size: .78rem;
  margin-right: 4px;
}

/* ── Footer ─────────────────────────────────────────────────────── */
.site-footer {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  margin-top: 80px;
}
.footer-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 32px;
  padding: 48px 20px 36px;
}
@media (min-width: 640px) { .footer-inner { padding: 48px 28px 36px; } }
@media (min-width: 768px) { .footer-inner { flex-direction: row; justify-content: space-between; align-items: flex-start; } }
@media (min-width: 1024px) { .footer-inner { padding: 48px 40px 36px; } }

.footer-brand {}
.footer-tagline { margin-top: 14px; font-size: .85rem; line-height: 1.8; color: var(--text-3); max-width: 280px; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .footer-inner {
    padding: 36px 16px 28px;
    gap: 24px;
  }
  .footer-social {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }
  .social-pill {
    width: 100%;
    justify-content: center;
    padding: 9px 14px;
  }
}
.social-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--border-2);
  border-radius: 100px;
  font-size: .8rem; font-weight: 600;
  color: var(--text-2);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.social-pill:hover { border-color: var(--accent); color: var(--accent); }

.footer-contact { text-align: right; }
.footer-label { font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.footer-phone { display: block; margin-top: 8px; font-family: var(--font-en); font-size: 1.3rem; font-weight: 700; color: var(--text-1); }
.footer-hours { margin-top: 6px; font-size: .8rem; color: var(--text-3); }

.footer-bottom {
  border-top: 1px solid var(--border);
  text-align: center;
  padding: 16px 20px;
  font-size: .78rem;
  color: var(--text-3);
}

/* ── Floating Cart Bar ──────────────────────────────────────────── */
.float-cart {
  position: fixed; bottom: 20px; left: 50%; z-index: 40;
  transform: translateX(-50%);
  display: flex; align-items: center; justify-content: space-between;
  width: calc(100% - 32px);
  max-width: 520px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--surface-2), var(--bg-3));
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  box-shadow: 0 16px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
  color: var(--text-1);
  font-weight: 700;
  font-size: .9rem;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.float-cart[hidden] { display: none !important; }
.float-cart:hover { transform: translateX(-50%) translateY(-3px); box-shadow: 0 20px 60px rgba(0,0,0,.7); }
.float-cart-left { display: flex; align-items: center; gap: 10px; }
.float-cart-left svg { color: var(--accent); }
.float-cart-right { display: flex; align-items: center; gap: 8px; color: var(--accent); }

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%       { transform: translateY(-12px) rotate(1.5deg); }
}
@keyframes shimmer {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-rise { animation: rise .6s cubic-bezier(.2,.75,.2,1) both; }
.animate-float { animation: float 5s ease-in-out infinite; }

/* ── Hero ────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  padding: 70px 0 90px;
  background: radial-gradient(ellipse at 25% 50%, rgba(220,38,38,.08) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 20%, rgba(220,38,38,.05) 0%, transparent 50%),
              var(--bg);
  min-height: 85vh;
  display: flex;
  align-items: center;
}
.hero .container {
  width: 100%;
}

/* Hero layout — RTL: content right, image left */
.hero-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}
@media (min-width: 900px) {
  .hero-layout {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
  }
}

.hero-bg-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
}
.hero-orb-1 { width: 600px; height: 600px; top: -200px; left: -150px; background: rgba(220,38,38,.1); }
.hero-orb-2 { width: 400px; height: 400px; bottom: -150px; right: -100px; background: rgba(220,38,38,.06); }
.hero-orb-3 { width: 350px; height: 350px; top: 20%; left: 30%; background: rgba(0,0,0,.5); }

/* Text content (right side in RTL view) */
.hero-content {
  flex: 1;
  text-align: right;
  order: 1;
}
@media (min-width: 900px) {
  .hero-content { max-width: 620px; order: 1; }
}

/* Hero Title Block */
.hero-title-block {
  display: inline-flex;
  flex-direction: column;
  margin-bottom: 24px;
}

.hero-label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 14px;
}

.hero-kira-label {
  font-family: var(--font-en);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .34em;
  color: #ef4444;
  text-transform: uppercase;
}

.hero-title {
  font-family: var(--font-ar);
  font-size: clamp(2.3rem, 4.2vw, 3.85rem);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: normal;
  color: #ffffff;
  margin: 0;
  padding: 4px 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-line {
  display: block;
  white-space: nowrap;
}

.hero-line-1 {
  color: #ffffff;
  font-weight: 900;
}

.hero-line-2 {
  white-space: nowrap;
  font-weight: 900;
}

/* Exact colors matching user reference image */
.text-red-deep {
  color: #dc2626;
  font-weight: 900;
}

.text-red-light {
  color: #f0655b;
  font-weight: 900;
}

.text-champagne-light {
  color: #e2c8b9;
  font-weight: 900;
}

.text-pure-white {
  color: #ffffff;
  font-weight: 900;
}

/* 3 Trust badges row */
.hero-trust-badges {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 22px;
  gap: 0;
  background: transparent;
  border: none;
}

.trust-badge-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 20px;
  position: relative;
  background: transparent;
  border: none;
}
.trust-badge-item:first-child {
  padding-right: 0;
}

/* Single red vertical separator line between items */
.trust-badge-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 32px;
  width: 1.5px;
  background: #dc2626;
}

.trust-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border-radius: 0;
  border: none;
  box-shadow: none;
  width: auto;
  height: auto;
  flex-shrink: 0;
}
.trust-badge-icon svg {
  display: block;
}

.trust-badge-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}
.trust-badge-title {
  font-size: .88rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
}
.trust-badge-sub {
  font-size: .72rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.3;
}

@media (max-width: 768px) {
  .hero-trust-badges {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 350px;
    margin: 0 auto 22px;
  }
  .trust-badge-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-md);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 100%;
    text-align: right;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  }
  .trust-badge-item:first-child {
    padding-right: 14px;
  }
  .trust-badge-item:not(:last-child)::after {
    display: none;
  }
  .trust-badge-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .trust-badge-icon svg {
    width: 18px;
    height: 18px;
  }
  .trust-badge-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
  }
  .trust-badge-title {
    font-size: .88rem;
    font-weight: 800;
    color: #ffffff;
  }
  .trust-badge-sub {
    font-size: .74rem;
    color: rgba(255, 255, 255, 0.65);
  }
}

/* ── Hero CTA Group ─────────────────────────────────────────────── */
.hero-cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 28px;
  width: 100%;
}

.hero-subtitle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
}
.hero-subtitle-dash {
  display: inline-block;
  width: 22px;
  height: 3px;
  background: #dc2626;
  border-radius: 2px;
  flex-shrink: 0;
}
.hero-subtitle-text {
  font-size: .95rem;
  color: #c9d1d9;
  font-weight: 500;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Button with red ambient neon glow matching reference image */
.btn-hero-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #ffffff;
  color: #0b0c10;
  padding: 13px 36px;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 20px 2px rgba(239, 68, 68, 0.8), 0 0 45px 6px rgba(220, 38, 38, 0.5), 0 0 80px 10px rgba(220, 38, 38, 0.25);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-hero-primary svg {
  color: #0b0c10;
  flex-shrink: 0;
}
.btn-hero-primary:hover {
  transform: translateY(-2px) scale(1.02);
  color: #0b0c10;
  box-shadow: 0 0 30px 4px rgba(239, 68, 68, 0.95), 0 0 60px 10px rgba(220, 38, 38, 0.65), 0 0 90px 15px rgba(220, 38, 38, 0.35);
}
.btn-hero-primary:active {
  transform: translateY(0) scale(0.99);
}

.hero-bottom-tagline {
  margin-top: 22px;
  font-family: var(--font-en);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .24em;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
}

/* Hero logo showcase (left in RTL) */
.hero-logo-showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
  order: 2;
}
@media (min-width: 900px) { .hero-logo-showcase { order: 2; } }

.hero-avatar-ring {
  position: relative;
  width: 280px; height: 280px;
}
@media (min-width: 640px)  { .hero-avatar-ring { width: 340px; height: 340px; } }
@media (min-width: 1024px) { .hero-avatar-ring { width: 400px; height: 400px; } }

.hero-avatar-inner {
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(220,38,38,.65);
  box-shadow:
    0 0 0 8px rgba(220,38,38,.12),
    0 0 0 18px rgba(220,38,38,.06),
    0 0 60px rgba(220,38,38,.4),
    0 0 120px rgba(220,38,38,.2);
  position: relative;
  z-index: 2;
}
.hero-avatar-inner img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.hero-glow-ring {
  position: absolute;
  inset: -25px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(220,38,38,.22) 0%, transparent 68%);
  z-index: 1;
  animation: glow-pulse 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glow-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(1.08); }
}

/* Hero avatar badge */
.hero-avatar-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 100px;
  font-family: var(--font-en);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--text-2);
  backdrop-filter: blur(8px);
}

.status-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.25);
  animation: status-blink 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes status-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
  50% { opacity: .7; box-shadow: 0 0 0 5px rgba(34,197,94,.12); }
}

.hero-trust {
  display: flex; align-items: center; gap: 7px;
  font-size: .82rem; font-weight: 600;
  color: var(--text-3);
}
.hero-trust svg { color: var(--green); }

/* Hero card */
.hero-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2xl);
  padding: 24px;
  box-shadow: var(--shadow-lg);
  max-width: 400px;
  margin: 0 auto;
}
@media (min-width: 900px) { .hero-card { margin: 0; } }
.hero-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.hero-card-title { font-weight: 700; font-size: .95rem; }
.hero-card-badge {
  font-size: .7rem; font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--green-dim);
  color: var(--green);
  letter-spacing: .08em;
}
.hero-card-items { display: flex; flex-direction: column; gap: 10px; }
.hero-card-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  transition: border-color var(--t-fast), background var(--t-fast);
  cursor: pointer;
}
.hero-card-item:hover { border-color: var(--border-2); background: rgba(255,255,255,.05); }
.hero-card-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--item-color) 15%, transparent);
  color: var(--item-color);
  flex-shrink: 0;
}
.hero-card-item-name { font-size: .88rem; font-weight: 700; }
.hero-card-item-price { font-size: .75rem; color: var(--text-2); margin-top: 2px; }
.hero-card-arrow { margin-right: auto; color: var(--text-3); }
.hero-card-footer {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: .78rem;
  color: var(--text-3);
}
.hero-card-footer svg { color: var(--accent); }

/* ── Services Section ───────────────────────────────────────────── */
.services-section { padding: 80px 0 60px; }
.section-header {
  display: flex; flex-direction: column; gap: 20px;
  margin-bottom: 32px;
}
@media (min-width: 768px) {
  .section-header { flex-direction: row; justify-content: space-between; align-items: flex-end; }
}

.search-box {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 320px;
  transition: border-color var(--t-fast);
}
.search-box:focus-within { border-color: var(--accent); }
.search-box svg { color: var(--text-3); flex-shrink: 0; }
.search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: .88rem;
  color: var(--text-1);
  font-family: var(--font-sans);
}
.search-input::placeholder { color: var(--text-3); }

/* Category tabs */
.cat-tabs {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 40px;
  scrollbar-width: none;
}
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab {
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
  padding: 9px 18px;
  border-radius: 100px;
  font-size: .85rem; font-weight: 700;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: all var(--t-fast);
  flex-shrink: 0;
}
.cat-tab:hover { border-color: var(--border-2); color: var(--text-1); }
.cat-tab.active {
  background: #ffffff;
  color: #0d0f14;
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(255,255,255,.15);
}
.cat-tab-icon { display: flex; align-items: center; }
.cat-tab-icon svg { width: 14px; height: 14px; }

/* Categories grid */
.categories-grid { display: flex; flex-direction: column; gap: 52px; }

/* Category block */
.category-block {}
.category-header {
  display: flex; align-items: flex-start; gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.category-brand {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.category-brand svg { width: 26px; height: 26px; color: #fff; }

.category-info { flex: 1; min-width: 200px; }
.category-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
.category-name { font-size: 1.35rem; font-weight: 800; margin-top: 2px; color: var(--text-1); }
.category-desc { font-size: .84rem; color: var(--text-2); margin-top: 5px; line-height: 1.6; max-width: 420px; }

.category-count {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: .75rem; font-weight: 700;
  color: var(--text-3);
}

/* Items grid */
.items-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
@media (min-width: 640px)  { .items-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
@media (min-width: 1024px) { .items-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }

/* Service card */
.service-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.025) 0%, transparent 60%);
  pointer-events: none;
}
.service-card:hover {
  border-color: var(--border-2);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.service-card:hover .btn-add { border-color: var(--accent); color: var(--accent); }

.service-card-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 14px;
}
.service-card-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
.service-card-icon svg { width: 20px; height: 20px; color: #fff; }

.service-card-price {
  font-family: var(--font-en);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-1);
}
.service-card-label {
  font-size: .92rem; font-weight: 700;
  color: var(--text-1);
  line-height: 1.4;
  flex: 1;
}
.service-card-unit {
  font-size: .75rem; color: var(--text-3);
  margin-top: 4px; margin-bottom: 14px;
}
.btn-add {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto;
  padding: 9px 13px;
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-md);
  font-size: .82rem; font-weight: 700;
  color: var(--text-2);
  transition: all var(--t-fast);
  background: transparent;
  font-family: var(--font-sans);
}
.btn-add:hover { border-color: rgba(255,255,255,.4); color: #ffffff; background: rgba(255,255,255,.05); }
.btn-add.added { border-color: var(--green); color: var(--green); background: var(--green-dim); }

/* Empty state */
.empty-state {
  text-align: center; padding: 60px 20px;
  grid-column: 1 / -1;
}
.empty-icon { font-size: 3rem; margin-bottom: 16px; }
.empty-state h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }
.empty-state p { font-size: .9rem; color: var(--text-2); }

/* ── How it works ──────────────────────────────────────────────── */
.how-section {
  padding: 80px 0;
  background: linear-gradient(to bottom, transparent, rgba(247,201,72,.03) 50%, transparent);
}
.how-header { text-align: center; margin-bottom: 52px; }
.how-steps {
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  max-width: 820px; margin: 0 auto;
}
@media (min-width: 640px) { .how-steps { flex-direction: row; gap: 12px; } }

.how-step {
  flex: 1;
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  text-align: center;
}
.how-step-num {
  font-family: var(--font-en);
  font-size: 2.5rem; font-weight: 700;
  color: #ffffff;
  margin-bottom: 16px;
  line-height: 1;
}
.how-step-title { font-size: 1rem; font-weight: 800; margin-bottom: 8px; }
.how-step-desc { font-size: .84rem; color: var(--text-2); line-height: 1.7; }

.how-step-arrow { color: var(--text-3); flex-shrink: 0; display: none; }
@media (min-width: 640px) { .how-step-arrow { display: block; } }

/* ── Checkout ───────────────────────────────────────────────────── */
.checkout-main { padding: 40px 0 80px; }
.checkout-nav { display: flex; align-items: center; gap: 14px; margin-bottom: 36px; }
.checkout-grid {
  display: grid; gap: 24px;
}
@media (min-width: 1024px) { .checkout-grid { grid-template-columns: 340px 1fr; align-items: start; } }

.cart-sidebar {}
.cart-lines { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.cart-line {
  display: flex; gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.cart-line:last-child { border-bottom: none; }
.cart-line-icon {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.cart-line-icon svg { width: 18px; height: 18px; color: #fff; }
.cart-line-info { flex: 1; min-width: 0; }
.cart-line-name { font-size: .85rem; font-weight: 700; }
.cart-line-meta { font-size: .75rem; color: var(--text-3); margin-top: 3px; }
.cart-line-qty {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
}
.qty-btn {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  color: var(--text-2);
  font-size: 1rem; font-weight: 700;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.qty-btn:hover { border-color: var(--accent); color: var(--accent); }
.qty-num { font-size: .82rem; font-weight: 700; min-width: 20px; text-align: center; }
.cart-line-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cart-line-price { font-size: .9rem; font-weight: 700; }
.cart-line-remove { color: var(--text-3); transition: color var(--t-fast); }
.cart-line-remove:hover { color: var(--red); }

.cart-total-row {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: .88rem;
  color: var(--text-2);
}
.cart-total-amount { font-family: var(--font-en); font-size: 1.4rem; font-weight: 700; color: var(--text-1); }

/* Form */
.checkout-form { display: flex; flex-direction: column; gap: 20px; }
.form-card {}
.form-step-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.step-num {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  font-weight: 800;
  font-size: .95rem;
  flex-shrink: 0;
  font-family: var(--font-en);
}
.step-num--yellow { background: rgba(255,255,255,.1); color: #ffffff; }
.step-num--green  { background: var(--green-dim); color: var(--green); }

.form-grid {
  display: grid; gap: 16px;
}
@media (min-width: 560px) { .form-grid { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: 7px; }
.field-label { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.field-input {
  padding: 11px 14px;
  background: var(--bg-2);
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-md);
  color: var(--text-1);
  font-size: .9rem;
  outline: none;
  transition: border-color var(--t-fast);
}
.field-input::placeholder { color: var(--text-3); }
.field-input:focus { border-color: rgba(255,255,255,.4); }

/* Payment details */
.payment-details { display: grid; gap: 10px; margin-bottom: 4px; }
@media (min-width: 560px) { .payment-details { grid-template-columns: repeat(3, 1fr); } }
.payment-detail {
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.payment-detail-label { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.payment-detail-value { font-size: .88rem; font-weight: 700; margin-top: 4px; word-break: break-all; }

/* Upload area */
.upload-area {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 160px;
  border: 2px dashed var(--border-2);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  cursor: pointer;
  margin-top: 16px;
  transition: border-color var(--t-base), background var(--t-base);
  text-align: center;
  padding: 28px;
}
.upload-area:hover { border-color: var(--accent); background: rgba(247,201,72,.04); }
.upload-icon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: rgba(247,201,72,.1);
  margin-bottom: 12px;
}
.upload-icon svg { color: var(--accent); }
.upload-title { font-size: .9rem; font-weight: 700; margin-bottom: 4px; }
.upload-hint { font-size: .78rem; color: var(--text-3); }
.upload-preview {
  max-height: 200px;
  border-radius: var(--r-md);
  object-fit: contain;
}
.upload-filename {
  display: flex; align-items: center; gap: 7px;
  font-size: .78rem; font-weight: 600;
  color: var(--green);
  margin-top: 8px;
}

/* Form error */
.form-error {
  padding: 14px 18px;
  background: var(--red-dim);
  border: 1px solid rgba(248,113,113,.3);
  border-radius: var(--r-md);
  font-size: .88rem; font-weight: 600;
  color: var(--red);
}

/* Empty cart notice */
.empty-cart-notice {
  text-align: center; padding: 80px 20px;
}
.empty-cart-notice h2 { font-size: 1.5rem; font-weight: 800; margin: 16px 0 8px; }
.empty-cart-notice p { color: var(--text-2); margin-bottom: 24px; }

/* Submit total */
.submit-total { opacity: .7; font-size: .9rem; }

/* ── Order Success ──────────────────────────────────────────────── */
.success-main { padding: 60px 0 100px; }
.success-main .container { display: flex; justify-content: center; }
.success-card {
  text-align: center;
  max-width: 520px;
  width: 100%;
}
.success-icon {
  position: relative;
  display: inline-grid; place-items: center;
  width: 96px; height: 96px;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--green), #22c55e);
  box-shadow: 0 8px 30px rgba(74,222,128,.3);
  margin-bottom: 28px;
}
.success-icon svg { color: #fff; }
.success-sparkle {
  position: absolute; top: -10px; right: -10px;
  font-size: 1.3rem;
  color: var(--accent);
}
.success-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 8px; }
.success-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; letter-spacing: -.04em; margin-bottom: 14px; }
.success-body { font-size: .95rem; color: var(--text-2); line-height: 1.8; max-width: 400px; margin: 0 auto 32px; }

.success-ref-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px;
  text-align: right;
  margin-bottom: 32px;
}
.success-ref-label { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.success-ref-num {
  font-family: var(--font-en);
  font-size: 2.2rem; font-weight: 700;
  color: #ffffff;
  margin: 8px 0 16px;
}
.success-ref-info {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .82rem; color: var(--text-2); line-height: 1.6;
}
.success-ref-info svg { color: var(--accent-2); flex-shrink: 0; margin-top: 2px; }

.success-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ── Admin ──────────────────────────────────────────────────────── */
.admin-body { background: var(--bg-2); }
.admin-header {
  background: rgba(13,15,20,.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.admin-header-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
}
.admin-brand { display: flex; align-items: center; gap: 12px; }
.admin-brand-name { font-weight: 800; font-size: .95rem; }
.admin-brand-sub { font-size: .75rem; color: var(--text-3); }

.admin-main { padding: 40px 0 80px; }
.admin-container { max-width: 1400px; margin: 0 auto; padding: 0 24px; }

.admin-page-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

/* Stats */
.stats-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 36px;
}
@media (min-width: 768px)  { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .stats-grid { grid-template-columns: repeat(5, 1fr); } }

.stat-card {
  padding: 20px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}
.stat-card--purple { background: var(--purple-dim); }
.stat-card--yellow { background: rgba(255,255,255,.05); }
.stat-card--blue   { background: var(--blue-dim); }
.stat-card--green  { background: var(--green-dim); }
.stat-card--gold   { background: rgba(255,255,255,.07); }

.stat-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.stat-label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.stat-value { font-family: var(--font-en); font-size: 2rem; font-weight: 700; color: var(--text-1); }

/* Orders */
.orders-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.orders-section-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 16px;
}
.filter-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.filter-tab {
  padding: 7px 14px;
  border-radius: 100px;
  font-size: .78rem; font-weight: 700;
  color: var(--text-3);
  background: var(--bg-2);
  border: 1px solid var(--border);
  transition: all var(--t-fast);
}
.filter-tab:hover { color: var(--text-1); border-color: var(--border-2); }
.filter-tab.active { background: #ffffff; color: #0d0f14; border-color: transparent; }

.orders-loading, .orders-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 60px 24px;
  text-align: center; color: var(--text-3);
}
.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border-2);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.orders-table-wrap { overflow-x: auto; }
.orders-table { width: 100%; border-collapse: collapse; }
.orders-table th {
  padding: 12px 16px;
  text-align: right;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3);
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.orders-table td {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  font-size: .86rem;
  vertical-align: middle;
  color: var(--text-2);
}
.orders-table tr:last-child td { border-bottom: none; }
.orders-table tr:hover td { background: rgba(255,255,255,.02); }

.order-id { font-family: var(--font-en); font-weight: 700; color: var(--text-1); font-size: .9rem; }
.order-date { font-size: .75rem; color: var(--text-3); margin-top: 3px; }
.order-customer { font-weight: 700; color: var(--text-1); }
.order-phone { font-size: .78rem; color: var(--text-3); margin-top: 2px; }
.order-items { max-width: 220px; line-clamp: 2; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.order-total { font-family: var(--font-en); font-weight: 700; color: var(--text-1); font-size: .95rem; }

.badge-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border-radius: 100px;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .06em;
}
.badge-status--pending  { background: rgba(255,255,255,.06); color: #ffffff; }
.badge-status--reviewing { background: var(--blue-dim); color: var(--blue); }
.badge-status--approved { background: var(--green-dim); color: var(--green); }
.badge-status--rejected { background: var(--red-dim); color: var(--red); }

.status-select {
  padding: 6px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  color: var(--text-1);
  font-size: .82rem;
  font-family: var(--font-sans);
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.status-select:focus { border-color: rgba(255,255,255,.3); }

.btn-view-proof {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  font-size: .78rem; font-weight: 700;
  color: var(--text-2);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.btn-view-proof:hover { border-color: rgba(255,255,255,.3); color: #ffffff; }

/* ── Admin toggle buttons: active/inactive ─────────────────────── */
.toggle-active-btn, .toggle-stock-btn, .btn-del-prod, .btn-del-order, .btn-edit-price {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  font-size: .72rem; font-weight: 700;
  cursor: pointer;
  transition: all var(--t-fast);
  border: 1.5px solid transparent;
  font-family: var(--font-sans);
  white-space: nowrap;
}
.toggle-active-btn.is-active {
  background: var(--green-dim); color: var(--green); border-color: rgba(74,222,128,.2);
}
.toggle-active-btn.is-active:hover { background: rgba(74,222,128,.2); }
.toggle-active-btn.is-inactive {
  background: rgba(255,255,255,.05); color: var(--text-3); border-color: var(--border);
}
.toggle-active-btn.is-inactive:hover { border-color: var(--border-2); color: var(--text-2); }

/* Out-of-stock toggle */
.toggle-stock-btn.is-instock {
  background: rgba(99,179,237,.1); color: #63b3ed; border-color: rgba(99,179,237,.25);
}
.toggle-stock-btn.is-instock:hover { background: rgba(99,179,237,.2); }
.toggle-stock-btn.is-outofstock {
  background: rgba(251,191,36,.12); color: #fbbf24; border-color: rgba(251,191,36,.3);
}
.toggle-stock-btn.is-outofstock:hover { background: rgba(251,191,36,.22); }

/* Delete / Edit buttons */
.btn-del-prod, .btn-del-order {
  background: var(--red-dim); color: var(--red); border-color: rgba(248,113,113,.2);
}
.btn-del-prod:hover, .btn-del-order:hover { background: rgba(248,113,113,.2); }
.btn-edit-price {
  background: rgba(255,255,255,.05); color: var(--text-2); border-color: var(--border);
  margin-right: 4px;
}
.btn-edit-price:hover { border-color: var(--border-2); color: var(--text-1); }

/* ── Out-of-stock badge on service cards ───────────────────────── */
.oos-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: .68rem; font-weight: 800;
  background: rgba(251,191,36,.14);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,.25);
  letter-spacing: .04em;
}
.service-card--oos {
  opacity: .75;
  cursor: not-allowed;
}
.service-card--oos .service-card-footer { pointer-events: none; }
.service-card--oos .btn-add-cart {
  background: rgba(255,255,255,.05) !important;
  color: var(--text-3) !important;
  border-color: var(--border) !important;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Cat tab branded icon ──────────────────────────────────────── */
.cat-tab-icon--branded {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 4px;
  background: var(--cat-grad, var(--surface-2));
  padding: 2px;
}
.cat-tab-icon--branded svg { width: 100%; height: 100%; }

/* ── Sub-category tabs ──────────────────────────────────────────── */
.sub-tabs {
  display: flex; gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.sub-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px;
  border-radius: 100px;
  font-size: .82rem; font-weight: 700;
  color: var(--text-3);
  background: var(--bg-2);
  border: 1px solid var(--border);
  transition: all var(--t-fast);
  flex-shrink: 0;
}
.sub-tab:hover { color: var(--text-1); border-color: var(--border-2); }
.sub-tab.active {
  background: rgba(255,255,255,.1);
  color: #ffffff;
  border-color: rgba(255,255,255,.25);
}
.sub-tab-emoji { font-size: .9rem; }
.sub-panel--hidden { display: none; }

/* ── Carousel ───────────────────────────────────────────────────── */
.carousel-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.items-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  flex: 1;
  /* hide scrollbar */
  scrollbar-width: none;
}
.items-carousel::-webkit-scrollbar { display: none; }
.items-carousel .service-card {
  scroll-snap-align: start;
  min-width: 180px;
  max-width: 200px;
  flex-shrink: 0;
}

.carousel-arrow {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--border-2);
  background: var(--surface);
  color: var(--text-2);
  flex-shrink: 0;
  transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
  z-index: 2;
}
.carousel-arrow:hover { border-color: rgba(255,255,255,.4); color: #fff; transform: scale(1.08); }
.carousel-arrow:disabled { opacity: .3; pointer-events: none; }

/* ── Contact page ───────────────────────────────────────────────── */
.contact-main { padding: 50px 0 80px; }
.contact-grid {
  display: grid; gap: 36px;
  align-items: start;
}
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.3fr; } }

.contact-intro { font-size: .95rem; color: var(--text-2); line-height: 1.8; margin: 16px 0 28px; max-width: 440px; }
.contact-methods { display: flex; flex-direction: column; gap: 12px; }
.contact-method {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  color: var(--text-1);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.contact-method:hover { transform: translateY(-2px); }
.contact-method--green { border-color: rgba(74,222,128,.2); background: var(--green-dim); }
.contact-method--green:hover { border-color: rgba(74,222,128,.4); }
.contact-method--blue  { border-color: rgba(96,165,250,.2); background: var(--blue-dim); }
.contact-method--purple{ border-color: rgba(192,132,252,.2); background: var(--purple-dim); }
.contact-method-icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.06);
  flex-shrink: 0;
}
.contact-method--green  .contact-method-icon { color: var(--green); }
.contact-method--blue   .contact-method-icon { color: var(--blue); }
.contact-method--purple .contact-method-icon { color: var(--purple); }
.contact-method-title { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.contact-method-value { font-size: .95rem; font-weight: 700; margin-top: 2px; font-family: var(--font-en); }

.contact-form-wrap {}

/* ── FAQ page ───────────────────────────────────────────────────── */
.faq-main { padding: 50px 0 80px; }
.faq-header { text-align: center; margin-bottom: 48px; }
.faq-intro { margin-top: 14px; font-size: .95rem; color: var(--text-2); }
.faq-link { color: var(--text-1); text-decoration: underline; }

.faq-list {
  max-width: 800px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 8px;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-fast);
}
.faq-item--open { border-color: rgba(255,255,255,.2); }
.faq-question {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: right;
  padding: 18px 20px;
  font-size: .95rem; font-weight: 700;
  color: var(--text-1);
  cursor: pointer;
  transition: color var(--t-fast);
}
.faq-question:hover { color: #fff; }
.faq-icon { flex-shrink: 0; color: var(--text-3); transition: transform var(--t-base); }
.faq-item--open .faq-icon { transform: rotate(45deg); color: #fff; }
.faq-answer {
  padding: 0 20px 18px;
  font-size: .9rem;
  color: var(--text-2);
  line-height: 1.8;
  border-top: 1px solid var(--border);
}
.faq-answer[hidden] { display: none; }

.faq-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px;
  margin-top: 52px;
  text-align: center;
}
.faq-cta-text { font-size: 1.1rem; font-weight: 700; color: var(--text-1); width: 100%; }

/* ── Category tabs nav wrapper & arrows ─────────────────────────── */
.cat-nav-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  width: 100%;
  margin-bottom: 28px;
}
.cat-nav-arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--border-2);
  background: var(--surface);
  color: var(--text-2);
  flex-shrink: 0;
  cursor: pointer;
  transition: all var(--t-fast);
  z-index: 5;
}
@media (max-width: 768px) {
  .cat-nav-arrow {
    display: none !important;
  }
}
.cat-nav-arrow:hover {
  border-color: rgba(255,255,255,.5);
  color: #fff;
  background: var(--surface-2);
  transform: scale(1.08);
}
.cat-nav-wrapper .cat-tabs {
  flex: 1;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 6px 2px;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
  .cat-nav-wrapper .cat-tabs {
    padding: 6px 16px;
    margin: 0 -16px;
    width: calc(100% + 32px);
  }
}
.cat-nav-wrapper .cat-tabs::-webkit-scrollbar {
  display: none;
}

/* ── Sub-panel Grid layout ──────────────────────────────────────── */
.sub-panel-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 4px;
}
.sub-panel-name {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-1);
}
.sub-panel-meta {
  font-size: .78rem;
  color: var(--text-3);
}
.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
  width: 100%;
}
@media (max-width: 640px) {
  .items-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
@media (max-width: 340px) {
  .items-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .items-grid .service-card,
  .service-card {
    padding: 12px 10px !important;
    border-radius: 14px !important;
  }
  .service-card-top {
    margin-bottom: 8px !important;
  }
  .service-card-price {
    font-size: 1.05rem !important;
  }
  .service-card-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 8px !important;
  }
  .service-card-icon svg {
    width: 16px !important;
    height: 16px !important;
  }
  .service-card-label {
    font-size: .84rem !important;
    line-height: 1.35 !important;
  }
  .service-card-unit {
    font-size: .7rem !important;
    margin-top: 2px !important;
    margin-bottom: 8px !important;
  }
  .btn-add {
    padding: 7px 10px !important;
    font-size: .78rem !important;
    border-radius: 8px !important;
  }
  .btn-add svg {
    width: 13px !important;
    height: 13px !important;
  }
}
.items-grid .service-card {
  width: 100%;
  min-width: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.items-grid .service-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.3);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.sub-tab-badge {
  font-size: .72rem;
  opacity: .75;
  margin-right: 2px;
}

/* ── Services Page Hero ─────────────────────────────────────────── */
.services-hero {
  padding: 50px 0 24px;
  text-align: center;
  position: relative;
}
.services-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 780px;
  margin: 0 auto;
}
.services-hero .page-title {
  margin-top: 14px;
  color: #ffffff;
}
.services-hero .page-subtitle {
  margin-top: 8px;
  color: var(--text-2);
  font-size: 1rem;
}
.services-catalog-section {
  padding: 20px 0 70px;
}

/* ── Search Box Large ───────────────────────────────────────────── */
.search-box-large {
  position: relative;
  max-width: 600px;
  margin: 20px auto 0;
}
.search-box-large svg {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}
.search-box-large .search-input {
  width: 100%;
  padding: 14px 48px 14px 18px;
  background: var(--surface);
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-xl);
  font-size: .95rem;
  color: var(--text-1);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.search-box-large .search-input:focus {
  border-color: rgba(255,255,255,.45);
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
  outline: none;
}

/* ── About Page Styles ──────────────────────────────────────────── */
.about-page { padding-bottom: 80px; }
.about-hero {
  padding: 50px 0 60px;
  position: relative;
  overflow: hidden;
}
.about-hero-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  .about-hero-grid {
    grid-template-columns: 340px 1fr;
    gap: 60px;
  }
}
.about-logo-wrapper {
  display: flex;
  justify-content: center;
}
.about-logo-frame {
  position: relative;
  width: 280px;
  height: 280px;
}
@media (min-width: 900px) {
  .about-logo-frame {
    width: 320px;
    height: 320px;
  }
}
.about-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid rgba(225, 48, 108, 0.6);
  box-shadow: 0 0 35px rgba(225, 48, 108, 0.4), inset 0 0 20px rgba(0,0,0,.6);
  position: relative;
  z-index: 2;
  animation: logoPulse 4s ease-in-out infinite;
}
@keyframes logoPulse {
  0%, 100% {
    box-shadow: 0 0 35px rgba(225, 48, 108, 0.45);
    border-color: rgba(225, 48, 108, 0.7);
  }
  50% {
    box-shadow: 0 0 60px rgba(225, 48, 108, 0.7);
    border-color: #ff3366;
  }
}
.about-logo-glow {
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225, 48, 108, 0.25) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}
.about-logo-tag {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #0d0f14;
  border: 1px solid rgba(225, 48, 108, 0.6);
  padding: 4px 14px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  z-index: 3;
  box-shadow: 0 4px 12px rgba(0,0,0,.6);
}
.about-title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 900;
  line-height: 1.15;
  margin-top: 14px;
}
.about-lead {
  font-size: 1.05rem;
  color: var(--text-2);
  line-height: 1.8;
  margin-top: 16px;
  max-width: 640px;
}
.about-actions {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* About stats */
.about-stats-section { padding: 30px 0 50px; }
.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.about-stat-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px 20px;
  text-align: center;
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.about-stat-box:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.3);
}
.about-stat-number {
  font-size: 2.4rem;
  font-weight: 900;
  color: #fff;
  font-family: var(--font-en);
  line-height: 1;
}
.about-stat-label {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-1);
  margin-top: 8px;
}
.about-stat-sub {
  font-size: .8rem;
  color: var(--text-3);
  margin-top: 4px;
}

/* About story */
.about-story-section { padding: 40px 0; }
.about-story-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 36px 24px;
}
@media (min-width: 768px) {
  .about-story-card { padding: 48px; }
}
.story-header { margin-bottom: 32px; }
.story-text-columns {
  display: grid;
  gap: 32px;
}
@media (min-width: 768px) {
  .story-text-columns {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}
.story-col h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
}
.story-col p {
  font-size: .95rem;
  color: var(--text-2);
  line-height: 1.8;
  margin-bottom: 14px;
}
.story-features-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.story-features-list li {
  font-size: .92rem;
  color: var(--text-2);
  line-height: 1.6;
  padding-right: 18px;
  position: relative;
}
.story-features-list li::before {
  content: "✓";
  position: absolute;
  right: 0;
  color: var(--green);
  font-weight: 900;
}

/* Pillars */
.about-pillars-section { padding: 50px 0; }
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 36px;
}
.pillar-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px 22px;
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.pillar-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.25);
}
.pillar-icon { font-size: 1.8rem; margin-bottom: 14px; }
.pillar-card h3 {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: #fff;
}
.pillar-card p {
  font-size: .88rem;
  color: var(--text-2);
  line-height: 1.6;
}

/* About CTA */
.about-cta-section { padding: 40px 0 60px; }
.about-cta-box {
  background: linear-gradient(135deg, rgba(225, 48, 108, 0.15), rgba(13, 15, 20, 0.95)), var(--surface);
  border: 1px solid rgba(225, 48, 108, 0.3);
  border-radius: var(--r-xl);
  padding: 48px 28px;
  text-align: center;
}
.about-cta-box h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 800;
  color: #fff;
}
.about-cta-box p {
  color: var(--text-2);
  font-size: 1rem;
  margin: 10px auto 24px;
  max-width: 500px;
}
.about-cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Home Page Unique Styles ────────────────────────────────────── */
.hero-layout {
  display: grid;
  gap: 36px;
  align-items: center;
}
@media (min-width: 900px) {
  .hero-layout {
    grid-template-columns: 1fr 340px;
    gap: 48px;
  }
}
.hero-logo-showcase {
  display: flex;
  justify-content: center;
}
.hero-avatar-card {
  position: relative;
  width: 310px;
  height: 310px;
}
@media (min-width: 900px) {
  .hero-avatar-card {
    width: 370px;
    height: 370px;
  }
}
.hero-avatar-image-wrap {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #ff2a5f;
  box-shadow: 0 0 35px rgba(255, 42, 95, 0.65), 0 0 75px rgba(255, 42, 95, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.hero-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.11);
  transform-origin: center center;
  border: none;
  display: block;
}
.hero-avatar-badge {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(13,15,20,.95);
  border: 1px solid rgba(225, 48, 108, 0.5);
  padding: 5px 14px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}
.status-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}
.hero-trust-row {
  display: flex;
  gap: 18px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-2);
}
.trust-item svg { color: var(--green); }

/* Platforms Grid on Home */
.platforms-section { padding: 40px 0 60px; }
.platforms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 18px;
  margin-top: 28px;
}
.platform-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  color: var(--text-1);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.platform-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.platform-card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.platform-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  padding: 0 !important;
  overflow: hidden;
  background: #0f1523 !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.platform-card-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
  display: block !important;
}
.platform-card-icon svg {
  width: 60% !important;
  height: 60% !important;
  display: block !important;
}
.platform-card-badge {
  font-size: .74rem;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .2px;
}
.platform-card-info {
  flex: 1;
  min-width: 0;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
}
.platform-card-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px 0;
  line-height: 1.35;
}
.platform-card-desc {
  font-size: .82rem;
  color: var(--text-3);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.platform-card-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: .82rem;
  font-weight: 700;
  color: var(--accent);
  transition: color var(--t-fast);
}
.platform-card:hover .platform-card-action {
  color: #fff;
}
.platform-card-action svg {
  transition: transform var(--t-fast);
}
[dir="rtl"] .platform-card:hover .platform-card-action svg {
  transform: translateX(-4px);
}
[dir="ltr"] .platform-card:hover .platform-card-action svg {
  transform: translateX(4px);
}

/* About Preview on Home */
.about-preview-section { padding: 50px 0; }
.about-preview-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 36px 24px;
  display: grid;
  gap: 36px;
  align-items: center;
}
@media (min-width: 860px) {
  .about-preview-box {
    grid-template-columns: 240px 1fr;
    padding: 44px;
    gap: 48px;
  }
}
.preview-logo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.preview-logo-image-wrap {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(225,48,108,.35);
  background: #000;
}
.preview-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.045);
  transform-origin: center center;
  border: none;
  display: block;
}
.preview-badge-legacy {
  font-size: .72rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(225,48,108,.12);
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid rgba(225,48,108,.3);
}
.about-preview-desc {
  font-size: .95rem;
  color: var(--text-2);
  line-height: 1.8;
  margin: 14px 0 20px;
}
.about-preview-stats {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
@media (max-width: 640px) {
  .about-preview-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 16px 14px;
    margin-bottom: 22px;
    text-align: center;
  }
  .prev-stat {
    align-items: center;
    gap: 2px;
  }
  .prev-stat strong {
    font-size: 1.55rem;
    color: var(--accent);
  }
  .prev-stat span {
    font-size: .8rem;
    color: var(--text-2);
  }
  .about-preview-buttons {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  .about-preview-buttons .btn {
    width: 100%;
    justify-content: center;
  }
}
.prev-stat {
  display: flex;
  flex-direction: column;
}
.prev-stat strong {
  font-size: 1.4rem;
  color: #fff;
  font-family: var(--font-en);
}
.prev-stat span {
  font-size: .75rem;
  color: var(--text-3);
}
.about-preview-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Features grid */
.features-section { padding: 50px 0; }
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 36px;
}
.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px 20px;
  transition: transform var(--t-fast);
}
.feature-card:hover { transform: translateY(-3px); }
.feature-icon { font-size: 1.8rem; margin-bottom: 12px; }
.feature-title { font-size: 1.05rem; font-weight: 800; color: #fff; margin-bottom: 8px; }
.feature-desc { font-size: .88rem; color: var(--text-2); line-height: 1.6; }

/* Testimonials */
.testimonials-section { padding: 50px 0; }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 36px;
}
.testimonial-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.testimonial-stars { color: #facc15; font-size: 1.1rem; letter-spacing: 2px; margin-bottom: 12px; }
.testimonial-text { font-size: .9rem; color: var(--text-2); line-height: 1.7; font-style: italic; }
.testimonial-author { margin-top: 16px; font-size: .82rem; color: var(--text-3); }
.testimonial-author strong { color: var(--text-1); }

/* Home CTA */
.home-cta-section { padding: 40px 0 70px; }
.home-cta-box {
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.01)), var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  padding: 40px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.home-cta-content h2 { font-size: 1.6rem; font-weight: 800; color: #fff; }
.home-cta-content p { font-size: .92rem; color: var(--text-2); margin-top: 4px; }
.home-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Services Help Banner */
.services-help-banner { padding: 40px 0 60px; }
.help-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.help-box h3 { font-size: 1.2rem; font-weight: 800; color: #fff; }
.help-box p { font-size: .88rem; color: var(--text-2); margin-top: 4px; max-width: 600px; }
.btn-whatsapp {
  background: #22c55e;
  color: #0d0f14;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--r-xl);
  transition: all var(--t-fast);
}
.btn-whatsapp:hover {
  background: #16a34a;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(34, 197, 94, 0.4);
}

/* Ensure buttons & SVGs never blow out container width */
.btn svg,
.btn-whatsapp svg,
.btn-channel svg,
.btn-primary svg,
.btn-outline svg,
.social-pill svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}
.btn-lg svg {
  width: 22px !important;
  height: 22px !important;
  max-width: 24px !important;
  max-height: 24px !important;
}

/* Footer links styling */
.footer-links-col {
  display: flex;
  flex-direction: column;
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.footer-nav a {
  font-size: .85rem;
  color: var(--text-3);
  transition: color var(--t-fast);
}
.footer-nav a:hover { color: #fff; }

/* ── About Page Logo Frame ───────────────────────────────────────── */
.about-logo-frame {
  position: relative;
  width: 310px;
  height: 310px;
}
@media (min-width: 768px) {
  .about-logo-frame {
    width: 370px;
    height: 370px;
  }
}
.about-logo-image-wrap {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #ff2a5f;
  box-shadow: 0 0 40px rgba(255, 42, 95, 0.65), 0 0 85px rgba(255, 42, 95, 0.35);
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.11);
  transform-origin: center center;
  border: none;
  display: block;
}
.about-logo-tag {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(13,15,20,.95);
  border: 1px solid rgba(225, 48, 108, 0.5);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
  z-index: 2;
}

/* ── WhatsApp Channel Components ─────────────────────────────────── */
.channel-btn-header {
  display: none;
  align-items: center;
  gap: 6px;
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.35);
  color: #25d366;
  padding: 7px 14px;
  border-radius: var(--r-xl);
  font-size: .82rem;
  font-weight: 700;
  transition: all var(--t-fast);
}
@media (min-width: 900px) {
  .channel-btn-header { display: inline-flex; }
}
.channel-btn-header:hover {
  background: #25d366;
  color: #0d0f14;
  box-shadow: 0 0 16px rgba(37, 211, 102, 0.4);
  transform: translateY(-1px);
}
.mobile-link--channel {
  color: #25d366 !important;
  font-weight: 800 !important;
}
.instagram-btn-header {
  display: none;
  align-items: center;
  gap: 6px;
  background: rgba(225, 48, 108, 0.12);
  border: 1px solid rgba(225, 48, 108, 0.35);
  color: #f43f5e;
  padding: 7px 14px;
  border-radius: var(--r-xl);
  font-size: .82rem;
  font-weight: 700;
  transition: all var(--t-fast);
  text-decoration: none;
}
@media (min-width: 768px) {
  .instagram-btn-header { display: inline-flex; }
}
.instagram-btn-header:hover {
  background: linear-gradient(135deg, #833AB4, #E1306C, #F77737);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 0 16px rgba(225, 48, 108, 0.4);
  transform: translateY(-1px);
}
.instagram-btn-header svg {
  width: 16px;
  height: 16px;
  max-width: 16px;
  fill: currentColor;
  flex-shrink: 0;
}
.mobile-link--instagram {
  color: #ff4d6d !important;
  font-weight: 800 !important;
}
.btn-channel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: var(--r-xl);
  transition: all var(--t-fast);
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3);
}
.btn-channel:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45);
  color: #fff;
}
.channel-promo-box {
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.08), rgba(18, 140, 126, 0.04));
  border: 1px solid rgba(37, 211, 102, 0.25);
  border-radius: var(--r-xl);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
  text-align: right;
}
.channel-promo-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.15);
  color: #25d366;
  display: grid;
  place-items: center;
  padding: 10px;
  flex-shrink: 0;
}
.channel-promo-text { flex: 1; min-width: 220px; }
.channel-promo-text h3 { font-size: 1.05rem; font-weight: 800; color: #fff; }
.channel-promo-text p { font-size: .84rem; color: var(--text-2); margin-top: 2px; }

.social-pill--channel {
  background: rgba(37, 211, 102, 0.15);
  border-color: rgba(37, 211, 102, 0.4);
  color: #25d366;
}
.social-pill--channel:hover {
  background: #25d366;
  color: #0d0f14;
}
.contact-method--channel {
  background: rgba(37, 211, 102, 0.08);
  border: 1px solid rgba(37, 211, 102, 0.25);
}
.contact-method--channel .contact-method-icon {
  color: #25d366;
  background: rgba(37, 211, 102, 0.15);
}

/* ── Offers & Packages Styling ───────────────────────────────────── */
.offers-page { padding: 40px 0 80px; }
.offers-hero { text-align: center; padding-bottom: 40px; }
.offers-hero-content { max-width: 780px; margin: 0 auto; }
.offers-preview-section { padding: 40px 0 60px; }
.offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
  margin-top: 24px;
}
.offer-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  padding: 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all var(--t-fast);
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.offer-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 77, 109, 0.5);
  box-shadow: 0 10px 35px rgba(0,0,0,.5), 0 0 20px rgba(255, 77, 109, 0.2);
}
.offer-card-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.offer-badge {
  background: linear-gradient(135deg, #ff4d6d, #c9184a);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 12px;
  letter-spacing: .02em;
}
.offer-guarantee-tag {
  font-size: .72rem;
  color: #facc15;
  font-weight: 700;
}
.offer-title { font-size: 1.25rem; font-weight: 800; color: #fff; line-height: 1.3; }
.offer-subtitle { font-size: .84rem; color: var(--text-2); margin-top: 4px; }
.offer-pricing {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 16px 0;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.offer-current-price, .offer-price-new {
  font-size: 1.7rem;
  font-weight: 900;
  color: #fff;
  font-family: var(--font-en);
}
.price-curr { font-size: .9rem; color: #ff4d6d; margin-right: 4px; font-weight: 700; }
.offer-old-price, .offer-price-old {
  font-size: .95rem;
  color: var(--text-3);
  text-decoration: line-through;
  font-family: var(--font-en);
}
.offer-items-box { flex: 1; margin-bottom: 20px; }
.offer-items-heading { font-size: .78rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; margin-bottom: 8px; }
.offer-items-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.offer-items-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .86rem;
  color: var(--text-1);
}
.offer-items-list li svg, .offer-check-icon {
  color: var(--green);
  flex-shrink: 0;
}
.offer-card-footer { margin-top: auto; }
.offer-card-footer .btn, .btn-add-offer {
  width: 100%;
  justify-content: center;
  padding: 12px 18px;
}

.custom-package-section { padding: 40px 0 60px; }
.custom-package-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
@media (max-width: 768px) {
  .custom-package-box {
    flex-direction: column;
    text-align: center;
    padding: 24px 18px;
    gap: 16px;
  }
  .custom-package-box h2 {
    font-size: 1.15rem;
  }
  .custom-package-box p {
    font-size: .84rem;
  }
  .custom-package-box .btn-whatsapp {
    width: 100%;
    justify-content: center;
  }
}
.custom-package-box h2 { font-size: 1.25rem; font-weight: 800; color: #fff; }
.custom-package-box p { font-size: .88rem; color: var(--text-2); margin-top: 4px; max-width: 600px; }

/* ── Clean Vector Icons (Zero Emojis System) ─────────────────────── */
.sub-tab-icon-wrap, .sub-panel-icon-wrap {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  vertical-align: middle;
}
.sub-tab-icon-wrap svg, .sub-panel-icon-wrap svg {
  width: 100%;
  height: 100%;
}
.feature-icon-svg, .pillar-icon-svg {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: #fff;
  margin-bottom: 14px;
}
.testimonial-stars-svg {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}
.nav-link--highlight {
  color: #ff4d6d !important;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ── Admin CMS Interface Styles ─────────────────────────────────── */
.admin-cms-card {
  margin-bottom: 24px;
  border: 1px solid var(--border-2);
}
.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.admin-settings-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 18px;
}
.btn-del-prod, .btn-del-offer {
  color: var(--red);
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.2);
  padding: 4px 8px;
  border-radius: var(--r-xs);
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t-fast);
}
.btn-del-prod:hover, .btn-del-offer:hover {
  background: var(--red);
  color: #fff;
}
.btn-edit-price {
  color: var(--blue);
  background: rgba(96, 165, 250, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.2);
  padding: 4px 8px;
  border-radius: var(--r-xs);
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  margin-left: 6px;
  transition: all var(--t-fast);
}
.btn-edit-price:hover {
  background: var(--blue);
  color: #fff;
}
.toggle-active-btn {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
}
.toggle-active-btn.is-active {
  background: rgba(74, 222, 128, 0.15);
  color: var(--green);
  border: 1px solid rgba(74, 222, 128, 0.3);
}
.toggle-active-btn.is-inactive {
  background: rgba(248, 113, 113, 0.15);
  color: var(--red);
  border: 1px solid rgba(248, 113, 113, 0.3);
}

/* ── WhatsApp Channel Components ─────────────────────────────────── */
.channel-btn-header {
  display: none;
  align-items: center;
  gap: 7px;
  background: rgba(37, 211, 102, 0.12);
  color: #25d366;
  border: 1px solid rgba(37, 211, 102, 0.35);
  border-radius: var(--r-full);
  padding: 7px 14px;
  font-size: .83rem;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--t-fast);
}
@media (min-width: 768px) {
  .channel-btn-header { display: inline-flex; }
}
.channel-btn-header:hover {
  background: #25d366;
  color: #0d0f14;
  box-shadow: 0 0 16px rgba(37, 211, 102, 0.4);
  transform: translateY(-1px);
}
.channel-btn-header svg {
  width: 16px;
  height: 16px;
  max-width: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

.channel-promo-box {
  margin-top: 24px;
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.08) 0%, rgba(20, 24, 34, 0.9) 100%);
  border: 1px solid rgba(37, 211, 102, 0.3);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
  .channel-promo-box {
    flex-direction: column;
    text-align: center;
    align-items: stretch;
  }
}
.channel-promo-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 14px;
  background: rgba(37, 211, 102, 0.15);
  border: 1px solid rgba(37, 211, 102, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #25d366;
}
.channel-promo-icon svg {
  width: 26px;
  height: 26px;
  max-width: 26px;
  max-height: 26px;
  fill: currentColor;
  flex-shrink: 0;
}
.channel-promo-text {
  flex: 1;
}
.channel-promo-text h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}
.channel-promo-text p {
  font-size: .88rem;
  color: var(--text-2);
  margin: 0;
}

.btn-channel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #fff !important;
  border: none;
  border-radius: var(--r-md);
  padding: 11px 20px;
  font-weight: 800;
  font-size: .9rem;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.35);
  transition: all var(--t-fast);
  white-space: nowrap;
}
.btn-channel:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.5);
  color: #fff !important;
}
.btn-channel svg {
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

.social-pill--channel {
  background: rgba(37, 211, 102, 0.12) !important;
  color: #25d366 !important;
  border-color: rgba(37, 211, 102, 0.3) !important;
}
.social-pill--channel:hover {
  background: #25d366 !important;
  color: #0d0f14 !important;
}
.social-pill--channel svg,
.mobile-link--channel svg {
  width: 18px;
  height: 18px;
  max-width: 18px;
  fill: currentColor;
  flex-shrink: 0;
}
.contact-method--channel {
  border-color: rgba(37, 211, 102, 0.35) !important;
}
.contact-method--channel:hover {
  border-color: #25d366 !important;
  box-shadow: 0 0 20px rgba(37, 211, 102, 0.25) !important;
}
.social-pill--instagram {
  background: rgba(225, 48, 108, 0.12) !important;
  color: #ff4d6d !important;
  border-color: rgba(225, 48, 108, 0.35) !important;
}
.social-pill--instagram:hover {
  background: linear-gradient(135deg, #833AB4, #E1306C, #F77737) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 0 16px rgba(225, 48, 108, 0.4) !important;
  transform: translateY(-1px);
}
.social-pill--instagram svg,
.mobile-link--instagram svg {
  width: 18px;
  height: 18px;
  max-width: 18px;
  fill: currentColor;
  flex-shrink: 0;
}
.contact-method--instagram {
  border-color: rgba(225, 48, 108, 0.35) !important;
}
.contact-method--instagram:hover {
  border-color: #E1306C !important;
  box-shadow: 0 0 20px rgba(225, 48, 108, 0.25) !important;
}

/* ── Universal Hidden Rule ────────────────────────────────────────── */
[hidden] {
  display: none !important;
}

body.drawer-open {
  overflow: hidden !important;
}

/* ── Cart Drawer (سلة المشتريات الفخمة التفاعلية) ─────────────────── */
.cart-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 10, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.cart-drawer-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.cart-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 440px;
  background: rgba(18, 21, 28, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid rgba(255, 77, 109, 0.25);
  box-shadow: 10px 0 50px rgba(0, 0, 0, 0.7), 0 0 35px rgba(255, 77, 109, 0.15);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  transform: translateX(-105%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 640px) {
  .cart-drawer {
    width: 100vw;
    max-width: 100vw;
    border-right: none;
  }
  .cart-drawer-header {
    padding: 14px 16px !important;
  }
  .cart-drawer-body {
    padding: 14px 16px !important;
  }
  .cart-drawer-footer {
    padding: 14px 16px !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
  }
  .drawer-empty-actions {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 280px !important;
    gap: 8px !important;
  }
  .drawer-empty-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}
.cart-drawer.open {
  transform: translateX(0);
}

.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(13, 15, 20, 0.5);
}
.cart-drawer-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cart-drawer-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: rgba(255, 77, 109, 0.15);
  border: 1px solid rgba(255, 77, 109, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff4d6d;
}
.cart-drawer-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}
.cart-drawer-subtitle {
  font-size: .78rem;
  color: var(--text-2);
}
.btn-clear-cart-chip {
  background: transparent;
  color: var(--text-3);
  border: none;
  font-size: .78rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--r-xs);
  transition: all var(--t-fast);
}
.btn-clear-cart-chip:hover {
  color: var(--red);
  background: rgba(248, 113, 113, 0.1);
}
.btn-close-drawer {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-2);
  color: var(--text-2);
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--t-fast);
}
.btn-close-drawer:hover {
  background: rgba(255, 77, 109, 0.2);
  color: #fff;
  border-color: rgba(255, 77, 109, 0.4);
}

.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.cart-drawer-empty {
  text-align: center;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.drawer-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  margin-bottom: 16px;
}
.drawer-empty-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}
.drawer-empty-sub {
  font-size: .84rem;
  color: var(--text-2);
  max-width: 280px;
  line-height: 1.5;
}

.cart-drawer-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.drawer-item-card {
  background: rgba(24, 28, 38, 0.9);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color var(--t-fast);
}
.drawer-item-card:hover {
  border-color: rgba(255, 77, 109, 0.3);
}
.drawer-item-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  color: #fff;
  flex-shrink: 0;
}
.drawer-item-icon svg {
  width: 100%;
  height: 100%;
}
.drawer-item-info {
  flex: 1;
  min-width: 0;
}
.drawer-item-title {
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.drawer-item-meta {
  font-size: .75rem;
  color: var(--text-3);
  margin-bottom: 6px;
}
.drawer-item-qty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(13, 15, 20, 0.7);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 6px;
}
.drawer-qty-btn {
  background: none;
  border: none;
  color: var(--text-2);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 700;
  font-size: .88rem;
  border-radius: 50%;
  transition: all var(--t-fast);
}
.drawer-qty-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.drawer-qty-val {
  font-size: .8rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--font-en);
  min-width: 14px;
  text-align: center;
}
.drawer-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.drawer-item-price {
  font-size: .95rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--font-en);
  white-space: nowrap;
}
.drawer-item-del {
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xs);
  transition: all var(--t-fast);
}
.drawer-item-del:hover {
  color: var(--red);
  background: rgba(248, 113, 113, 0.15);
}

.cart-drawer-footer {
  padding: 20px 24px;
  background: rgba(13, 15, 20, 0.85);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.drawer-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .85rem;
  color: var(--text-2);
}
.drawer-subtotal-val {
  font-weight: 700;
  color: #fff;
  font-family: var(--font-en);
}
.badge-free-delivery {
  background: rgba(74, 222, 128, 0.15);
  color: var(--green);
  border: 1px solid rgba(74, 222, 128, 0.3);
  font-size: .75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
}
.drawer-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.drawer-total-label {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}
.drawer-total-val {
  font-size: 1.45rem;
  font-weight: 900;
  color: #ff4d6d;
  font-family: var(--font-en);
}
.drawer-multi-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 42, 95, 0.08);
  border: 1px solid rgba(255, 42, 95, 0.25);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-size: .79rem;
  color: #ffccd5;
  line-height: 1.4;
}
.drawer-multi-hint svg {
  flex-shrink: 0;
  color: #ff4d6d;
}
.drawer-buttons-stack {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
}
.btn-checkout-drawer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px;
  font-size: 1rem;
  font-weight: 800;
  width: 100%;
  box-shadow: 0 4px 20px rgba(255, 42, 95, 0.45);
}
.btn-continue-shopping-drawer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--text-1);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast);
  width: 100%;
}
.btn-continue-shopping-drawer:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
  transform: translateY(-1px);
}
.btn-continue-shopping-drawer svg {
  color: var(--text-2);
  transition: transform var(--t-fast);
}
.btn-continue-shopping-drawer:hover svg {
  color: #ff4d6d;
  transform: translateX(3px);
}

/* ── Checkout Upload Enhancements ────────────────────────────────── */
.upload-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.upload-area.drag-over {
  border-color: #ff4d6d !important;
  background: rgba(255, 77, 109, 0.1) !important;
  box-shadow: 0 0 20px rgba(255, 77, 109, 0.3);
}
.upload-file-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(24, 28, 38, 0.85);
  border: 1px solid rgba(74, 222, 128, 0.3);
  padding: 8px 14px;
  border-radius: var(--r-md);
  font-size: .84rem;
}
.upload-file-info .upload-filename {
  color: var(--green);
  font-weight: 700;
  display: inline-block;
}
.btn-remove-proof {
  background: transparent;
  border: none;
  color: var(--red);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: var(--r-xs);
  transition: all var(--t-fast);
}
.btn-remove-proof:hover {
  background: rgba(248, 113, 113, 0.15);
}

/* ── Delete Order Button ─────────────────────────────────────────── */
.btn-del-order {
  color: var(--red);
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.25);
  padding: 5px 10px;
  border-radius: var(--r-xs);
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t-fast);
}
.btn-del-order:hover {
  background: var(--red);
  color: #fff;
  box-shadow: 0 0 12px rgba(248, 113, 113, 0.4);
}

/* ── Global Floating Toast (إشعارات السلة والتسوق) ──────────────── */
.global-toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%) translateY(40px);
  background: rgba(15, 18, 25, 0.94);
  border: 1px solid rgba(255, 42, 95, 0.45);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: .88rem;
  font-weight: 700;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 24px rgba(255, 42, 95, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  max-width: 90vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.global-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* ── Multi-product in-cart visual feedback on cards ─────────────── */
.service-card.is-in-cart,
.offer-card.is-in-cart {
  border-color: rgba(255, 42, 95, 0.4) !important;
  box-shadow: 0 0 20px rgba(255, 42, 95, 0.15) !important;
}
.btn-add.in-cart-btn,
.btn-add-offer.in-cart-btn {
  background: rgba(255, 42, 95, 0.18) !important;
  border: 1px solid rgba(255, 42, 95, 0.5) !important;
  color: #ffb3c1 !important;
}
.btn-add.in-cart-btn:hover,
.btn-add-offer.in-cart-btn:hover {
  background: var(--red) !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(255, 42, 95, 0.5) !important;
}

/* ── Admin Custom Confirmation Modal ────────────────────────────── */
.admin-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.admin-modal {
  background: rgba(18, 22, 32, 0.98);
  border: 1px solid rgba(255, 42, 95, 0.45);
  border-radius: var(--r-lg);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(255, 42, 95, 0.3);
  max-width: 440px;
  width: 100%;
  padding: 28px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: adminModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes adminModalPop {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.admin-modal-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 42, 95, 0.12);
  border: 1px solid rgba(255, 42, 95, 0.35);
  color: #ff4d6d;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-modal-title {
  font-size: 1.22rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}
.admin-modal-desc {
  font-size: .88rem;
  color: var(--text-2);
  line-height: 1.5;
  margin: 0;
}
.admin-modal-actions {
  display: flex;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
}
.admin-modal-actions .btn {
  flex: 1;
  justify-content: center;
  padding: 12px;
  font-size: .92rem;
  font-weight: 700;
}
.btn-danger {
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(255, 42, 95, 0.4);
  transition: all var(--t-fast);
}
.btn-danger:hover {
  background: #ff1a4a;
  box-shadow: 0 6px 20px rgba(255, 42, 95, 0.6);
  transform: translateY(-1px);
}

/* ── Binance Pay Box (Checkout & Payments) ────────────────────────── */
.binance-pay-box {
  background: rgba(240, 185, 11, 0.05);
  border: 1px solid rgba(240, 185, 11, 0.3);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(240, 185, 11, 0.08);
}
.binance-pay-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.binance-pay-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.binance-pay-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(240, 185, 11, 0.14);
  border: 1px solid rgba(240, 185, 11, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.binance-pay-heading {
  font-size: .98rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}
.binance-pay-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  color: #F0B90B;
  background: rgba(240, 185, 11, 0.15);
  border: 1px solid rgba(240, 185, 11, 0.35);
  padding: 1px 8px;
  border-radius: 12px;
  margin-top: 3px;
}
.binance-pay-text {
  font-size: .86rem;
  color: #e2e8f0;
  line-height: 1.6;
  margin: 0;
}
.binance-pay-text strong {
  color: #F0B90B;
}
.btn-binance-whatsapp {
  background: rgba(240, 185, 11, 0.12);
  border: 1.5px solid #F0B90B;
  color: #F0B90B;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: .88rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  transition: all var(--t-fast);
  text-decoration: none;
}
.btn-binance-whatsapp:hover {
  background: #F0B90B;
  color: #0b0e14;
  box-shadow: 0 4px 20px rgba(240, 185, 11, 0.4);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUTHENTIC BRAND LOGO SYSTEM (Official Logos for all services, zero background clutter)
═══════════════════════════════════════════════════════════════════════════ */
.brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  border-radius: inherit;
}

/* All Icon containers: clean dark glass base, zero background bleed, zero extra padding */
.platform-card-icon,
.cat-tab-icon,
.category-brand,
.service-card-icon,
.drawer-item-icon,
.checkout-summary-icon {
  background: #0f1523 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* App icon images (PNG/WebP/JPG): fill container fully with smooth rounded corners */
.platform-card-icon img,
.cat-tab-icon img,
.category-brand img,
.service-card-icon img,
.drawer-item-icon img,
.checkout-summary-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Vector SVG brand logos that need clean breathing room inside the dark tile (Apple, Discord, etc.) */
.platform-card-icon img[src$=".svg"],
.cat-tab-icon img[src$=".svg"],
.category-brand img[src$=".svg"],
.service-card-icon img[src$=".svg"] {
  object-fit: contain !important;
  padding: 16% !important;
}

/* Exceptions for official square tiles in SVG format (e.g. LinkedIn tile) */
.platform-card-icon img.brand-logo-linkedin,
.cat-tab-icon img.brand-logo-linkedin,
.category-brand img.brand-logo-linkedin,
.service-card-icon img.brand-logo-linkedin {
  object-fit: cover !important;
  padding: 0 !important;
}

/* Umniah logo: horizontal wordmark contained cleanly as it was before */
.platform-card-icon img.brand-logo-umniah,
.cat-tab-icon img.brand-logo-umniah,
.category-brand img.brand-logo-umniah,
.service-card-icon img.brand-logo-umniah,
.drawer-item-icon img.brand-logo-umniah,
.checkout-summary-icon img.brand-logo-umniah {
  object-fit: contain !important;
  padding: 12% 6% !important;
}

/* Inline SVGs (Lucide icons, etc.) */
.platform-card-icon svg,
.cat-tab-icon svg,
.category-brand svg,
.service-card-icon svg {
  width: 58% !important;
  height: 58% !important;
  object-fit: contain !important;
  display: block !important;
  margin: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOP ANNOUNCEMENT BAR (Telecom & Upcoming Cards)
═══════════════════════════════════════════════════════════════════════════ */
.top-announcement-bar {
  background: linear-gradient(90deg, #131722 0%, #1c1326 50%, #111d24 100%);
  border-bottom: 1px solid rgba(245, 158, 11, 0.25);
  padding: 8px 0;
  position: relative;
  z-index: 99;
}

.top-announcement-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: .84rem;
}

.announcement-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: .74rem;
  letter-spacing: .3px;
}

.announcement-pill-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
  animation: pulse 1.5s infinite;
}

.announcement-message {
  color: #e2e8f0;
}

.announcement-message strong {
  color: #fff;
}

.announcement-logos-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.strip-logo {
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}

.announcement-link {
  color: #fbbf24;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all var(--t-fast);
}

.announcement-link:hover {
  color: #fff;
  transform: translateX(-3px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMING SOON: JORDAN TELECOM SECTION (Zain, Orange, Umniah)
═══════════════════════════════════════════════════════════════════════════ */
.coming-soon-section {
  padding: 60px 0 30px;
  position: relative;
}

.coming-soon-banner-box {
  background: linear-gradient(180deg, rgba(22, 28, 42, 0.85) 0%, rgba(15, 19, 30, 0.95) 100%);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: var(--r-xl);
  padding: 44px 32px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

.coming-soon-banner-box::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.coming-soon-banner-box::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -80px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0, 178, 169, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.coming-soon-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 40px;
  position: relative;
  z-index: 1;
}

.coming-soon-badge-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}

.coming-soon-pill {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(239, 68, 68, 0.2));
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  font-size: .8rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 999px;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
}

.coming-soon-eyebrow {
  color: var(--text-3);
  font-size: .85rem;
  font-weight: 600;
}

.coming-soon-title {
  font-size: 1.75rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 12px;
}

.text-glow-gold {
  color: #fbbf24;
  text-shadow: 0 0 16px rgba(251, 191, 36, 0.35);
}

.coming-soon-desc {
  color: var(--text-2);
  font-size: .92rem;
  line-height: 1.7;
  margin: 0;
}

.telecom-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .telecom-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.telecom-card {
  background: var(--surface-card);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all var(--t-fast);
}

.telecom-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.telecom-card--zain {
  border-color: rgba(0, 178, 169, 0.3);
}
.telecom-card--zain:hover {
  border-color: #00b2a9;
  box-shadow: 0 12px 30px rgba(0, 178, 169, 0.25);
}

.telecom-card--orange {
  border-color: rgba(255, 121, 0, 0.3);
}
.telecom-card--orange:hover {
  border-color: #FF7900;
  box-shadow: 0 12px 30px rgba(255, 121, 0, 0.25);
}

.telecom-card--umniah {
  border-color: rgba(213, 0, 50, 0.3);
}
.telecom-card--umniah:hover {
  border-color: #D50032;
  box-shadow: 0 12px 30px rgba(213, 0, 50, 0.25);
}

.telecom-badge {
  align-self: flex-start;
  font-size: .72rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
  margin-bottom: 20px;
}

.telecom-logo-wrap {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 18px;
}

.telecom-logo {
  max-height: 48px;
  max-width: 140px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}

.telecom-logo--umniah {
  max-height: 42px;
}

.telecom-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
}

.telecom-info {
  font-size: .84rem;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 18px;
  flex: 1;
}

.telecom-features {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: .8rem;
  color: var(--text-1);
}

.telecom-features li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot--zain { background: #00b2a9; box-shadow: 0 0 6px #00b2a9; }
.dot--orange { background: #FF7900; box-shadow: 0 0 6px #FF7900; }
.dot--umniah { background: #D50032; box-shadow: 0 0 6px #D50032; }

.telecom-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}

.telecom-status {
  font-size: .75rem;
  color: var(--text-3);
  font-weight: 600;
}

.btn-notify-telecom {
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.35);
  color: #25d366;
  padding: 6px 14px;
  border-radius: var(--r-sm);
  font-size: .78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: all var(--t-fast);
}

.btn-notify-telecom:hover {
  background: #25d366;
  color: #0b0e14;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICES PAGE TELECOM TEASER BANNER
═══════════════════════════════════════════════════════════════════════════ */
.services-telecom-teaser {
  background: linear-gradient(90deg, rgba(26, 32, 48, 0.95), rgba(20, 24, 38, 0.95));
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--r-md);
  padding: 14px 20px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.telecom-teaser-pill {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
  font-size: .75rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.telecom-teaser-info {
  font-size: .88rem;
  color: #cbd5e1;
  flex: 1;
  min-width: 260px;
}

.telecom-teaser-info strong {
  color: #fff;
}

.telecom-teaser-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.04);
  padding: 6px 14px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.teaser-logo {
  display: block;
  object-fit: contain;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TELECOM LIVE ACTIVE STYLES & QUICK JUMP BUTTONS
═══════════════════════════════════════════════════════════════════════════ */
.services-telecom-teaser--live {
  border-color: rgba(0, 178, 169, 0.35);
  background: linear-gradient(90deg, rgba(9, 38, 40, 0.95), rgba(20, 28, 45, 0.95));
  box-shadow: 0 4px 24px rgba(0, 178, 169, 0.12);
}

.telecom-teaser-pill--live,
.telecom-badge--live,
.coming-soon-pill--live {
  background: rgba(37, 211, 102, 0.14) !important;
  border-color: rgba(37, 211, 102, 0.4) !important;
  color: #25d366 !important;
}

.telecom-jump-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  padding: 6px 14px;
  border-radius: var(--r-sm);
  font-size: .82rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all var(--t-fast);
  font-family: inherit;
}

.telecom-jump-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.btn-telecom-action {
  text-decoration: none;
  font-size: .82rem;
  padding: 8px 16px;
  font-weight: 800;
}

#card-telecom-zain .btn-telecom-action {
  background: rgba(0, 178, 169, 0.15);
  border-color: rgba(0, 178, 169, 0.4);
  color: #00b2a9;
}
#card-telecom-zain .btn-telecom-action:hover {
  background: #00b2a9;
  color: #0b1114;
  box-shadow: 0 4px 16px rgba(0, 178, 169, 0.4);
}

#card-telecom-orange .btn-telecom-action {
  background: rgba(255, 121, 0, 0.15);
  border-color: rgba(255, 121, 0, 0.4);
  color: #FF7900;
}
#card-telecom-orange .btn-telecom-action:hover {
  background: #FF7900;
  color: #0b1114;
  box-shadow: 0 4px 16px rgba(255, 121, 0, 0.4);
}

#card-telecom-umniah .btn-telecom-action {
  background: rgba(213, 0, 50, 0.15);
  border-color: rgba(213, 0, 50, 0.4);
  color: #ff3b68;
}
#card-telecom-umniah .btn-telecom-action:hover {
  background: #D50032;
  color: #fff;
  box-shadow: 0 4px 16px rgba(213, 0, 50, 0.4);
}

.btn-contact-wa:hover {
  background: #25D366 !important;
  color: #000 !important;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35) !important;
  transform: translateY(-1px);
}

.platform-alert-banner {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.platform-alert-banner:hover {
  box-shadow: 0 4px 20px rgba(83, 252, 24, 0.12);
}

/* ─── Services Management Grid (إدارة الخدمات الرئيسية) ───────────── */
.services-manage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.service-manage-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  position: relative;
  overflow: hidden;
}

.service-manage-card:hover {
  border-color: rgba(139, 92, 246, 0.35);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.1);
}

.service-manage-card--hidden {
  opacity: 0.55;
  border-color: rgba(248, 113, 113, 0.25);
  background: rgba(248, 113, 113, 0.04);
}

.service-manage-card--hidden:hover {
  opacity: 0.75;
  border-color: rgba(248, 113, 113, 0.4);
}

.smc-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  padding: 10px;
}

.smc-icon img,
.smc-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.smc-info {
  flex: 1;
  min-width: 0;
}

.smc-eyebrow {
  font-size: 0.7rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 2px;
  font-family: 'Space Grotesk', sans-serif;
}

.smc-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-1);
  margin: 0 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smc-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.73rem;
  font-weight: 600;
  margin: 0;
}

.smc-status--visible {
  color: #34d399;
}

.smc-status--hidden {
  color: var(--red);
}

.smc-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.smc-actions .btn {
  font-size: 0.75rem;
  padding: 6px 10px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}