/* يلا هدايا — نظام التصميم المشترك (واجهة العميل) */
* { box-sizing: border-box; }
body { font-family: 'Cairo', sans-serif; background: #F8F6F2; color: #3A3A3A; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { color: #0E1726; }
.font-serif { font-family: 'Playfair Display', serif; }

/* Glassmorphism */
.glass { background: rgba(255,255,255,0.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.4); }
.glass-dark { background: rgba(14,23,38,0.75); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

/* Gold primary button */
.btn-gold {
  background: #B77945;
  color: #fff; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 14px 32px; border-radius: 6px; transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(183,121,69,0.35); position: relative; overflow: hidden;
  border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.btn-gold:hover { background: #9F643A; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(183,121,69,0.45); }
.btn-gold:active { transform: translateY(0); }
.btn-gold:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-outline {
  background: transparent; color: #0E1726; border: 1.5px solid #0E1726;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 14px 32px; border-radius: 6px; transition: all 0.3s ease;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.btn-outline:hover { background: #0E1726; color: #fff; transform: translateY(-2px); }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Card hover */
.gift-card { transition: transform 0.4s ease, box-shadow 0.4s ease; }
.gift-card:hover { transform: translateY(-8px); box-shadow: 0 24px 60px rgba(0,0,0,0.12); }

/* Overlay */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.overlay.active { opacity: 1; pointer-events: all; }

/* Cart Drawer */
#cartDrawer {
  position: fixed; top: 0; left: 0; width: 380px; max-width: 100vw;
  height: 100vh; background: #fff; z-index: 110;
  transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
  display: flex; flex-direction: column; box-shadow: 10px 0 60px rgba(0,0,0,0.18);
}
#cartDrawer.open { transform: translateX(0); }

/* AI Modal */
#aiModal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
#aiModal.open { opacity: 1; pointer-events: all; }
#aiModal .modal-box {
  background: #fff; border-radius: 20px; width: 720px; max-width: 96vw;
  max-height: 92vh; display: flex; flex-direction: column;
  box-shadow: 0 40px 100px rgba(0,0,0,0.25); transform: scale(0.9) translateY(30px);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
#aiModal.open .modal-box { transform: scale(1) translateY(0); }

/* Login Modal */
#loginModal { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
#loginModal.open { opacity: 1; pointer-events: all; }
#loginModal .modal-box {
  background: #fff; border-radius: 20px; width: 440px; max-width: 95vw;
  max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column;
  box-shadow: 0 40px 100px rgba(0,0,0,0.25); transform: scale(0.9) translateY(30px);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
#loginModal.open .modal-box { transform: scale(1) translateY(0); }

/* Mobile menu */
#mobileMenu {
  position: fixed; top: 0; right: 0; width: 280px; height: 100vh; background: #fff; z-index: 110;
  transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  box-shadow: -10px 0 60px rgba(0,0,0,0.15); padding: 80px 24px 32px;
  display: flex; flex-direction: column; gap: 8px;
}
#mobileMenu.open { transform: translateX(0); }

/* Chat bubble animation */
@keyframes bubbleIn { from { opacity: 0; transform: translateY(10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
.bubble-animate { animation: bubbleIn 0.4s ease forwards; }

/* Typing dots */
@keyframes dot { 0%,80%,100%{opacity:.2;transform:translateY(0)} 40%{opacity:1;transform:translateY(-6px)} }
.typing-dot { width:8px; height:8px; border-radius:50%; background:#B77945; animation: dot 1.2s infinite; }
.typing-dot:nth-child(2) { animation-delay:.2s; }
.typing-dot:nth-child(3) { animation-delay:.4s; }

/* Badge */
#cartBadge { display:none; }
#cartBadge.visible { display:flex; }

/* Sections */
.section-label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: #B77945; }

/* Hero text gradient */
.hero-gradient { background: linear-gradient(135deg, #0E1726 0%, #3a3a3c 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.italic-gold { font-style: italic; color: #B77945; -webkit-text-fill-color: #B77945; }

/* Scrollbar */
::-webkit-scrollbar { width:6px; } ::-webkit-scrollbar-track { background:#F2EEE8; } ::-webkit-scrollbar-thumb { background:#B7794544; border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#B7794588; }

/* Notification toast */
#toast { position:fixed; bottom:24px; right:24px; z-index:200; transform:translateY(80px); opacity:0; transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1); }
#toast.show { transform:translateY(0); opacity:1; }

/* Nav link */
.nav-link { position:relative; font-size:15.5px; line-height:1.7; letter-spacing:0.01em; font-weight:700; color:#6E6E6E; transition:color 0.2s; }
.nav-link:hover { color:#0E1726; }
.nav-link::after { content:''; position:absolute; bottom:-8px; left:0; right:0; height:2px; background:#B77945; transform:scaleX(0); transition:transform 0.3s; transform-origin:center; }
.nav-link:hover::after, .nav-link.active::after { transform:scaleX(1); }
.nav-link.active { color:#0E1726; }

/* Quick view overlay */
#quickView { position:fixed; inset:0; z-index:130; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s; }
#quickView.open { opacity:1; pointer-events:all; }
#quickView .qv-box { background:#fff; border-radius:20px; width:700px; max-width:95vw; max-height:90vh; overflow-y:auto; box-shadow:0 40px 100px rgba(0,0,0,0.25); transform:scale(0.9); transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1); }
#quickView.open .qv-box { transform:scale(1); }

/* Form fields (checkout / auth / account / forms) */
.field-input { width:100%; border:1px solid #E7E1D8; border-radius:12px; padding:12px 16px; font-size:14px; transition:all .2s; outline:none; background:#fff; color:#3A3A3A; }
.field-input:focus { border-color:#B77945; box-shadow:0 0 0 3px rgba(183,121,69,0.12); }
.field-input::placeholder { color:#6E6E6E; }
.field-label { display:block; font-size:13px; font-weight:700; color:#0E1726; margin-bottom:6px; }

/* Star rating input */
.star-input { cursor:pointer; transition: color .15s, transform .15s; }
.star-input:hover, .star-input.active { color:#B77945; transform: scale(1.1); }

/* Timeline (order tracking) */
.timeline-dot { width:16px; height:16px; border-radius:50%; flex-shrink:0; }
.timeline-line { width:2px; flex:1; min-height:28px; }


/* A31 — mobile responsive foundation */
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { width:100%; min-width:320px; }
img, video, svg, canvas { max-width:100%; }
#cartDrawer { height:100dvh; }
#aiModal .modal-box, #loginModal .modal-box, #quickView .qv-box { max-height:92dvh; }
#mobileMenu { max-width:calc(100vw - 16px); height:100dvh; overflow-y:auto; padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
.mobile-bottom-nav { min-height:72px; height:auto; padding:7px 8px calc(7px + env(safe-area-inset-bottom)); }
.mobile-bottom-nav > * { min-width:0; flex:1; }
.mobile-bottom-nav a, .mobile-bottom-nav button { min-height:54px; padding:5px 3px; justify-content:center; text-align:center; -webkit-tap-highlight-color:transparent; }
@media (max-width:767px) {
  a, button, input, select, textarea { -webkit-tap-highlight-color:transparent; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { font-size:16px !important; }
  button, .btn-gold, .btn-outline { min-height:44px; }
  .btn-gold, .btn-outline { padding:12px 18px; }
  .gift-card:hover { transform:none; box-shadow:none; }
  #cartDrawer { width:100vw; max-width:100vw; }
  #aiModal, #loginModal, #quickView { padding:12px; align-items:center; }
  #aiModal .modal-box, #loginModal .modal-box, #quickView .qv-box { width:100%; max-width:100%; max-height:calc(100dvh - 24px); border-radius:18px; }
  #toast { left:12px; right:12px; bottom:calc(84px + env(safe-area-inset-bottom)); }
  table { max-width:100%; }
}


/* Homepage hero responsive typography (moved out of the document body for valid HTML). */
@media (max-width: 767px) {
  .hero-title-mobile {
    font-size: clamp(32px, 8.5vw, 38px) !important;
    line-height: 1.12 !important;
    max-width: 100% !important;
    letter-spacing: -0.02em;
  }
}


/* Mobile-first polish for the customer storefront */
@media (max-width: 767px) {
  html { scroll-padding-top: 78px; }
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  #navbar { background: rgba(250,248,244,.96) !important; backdrop-filter: blur(18px); }
  #navbar > div { height: 68px; padding-left: 14px; padding-right: 14px; }
  #navbar img { object-fit: contain; }
  #navbar a[aria-label="Yalla Gifts"] > span { width: 54px; height: 54px; border-radius: 14px; }
  #navbar button, #navbar a[aria-label] { -webkit-tap-highlight-color: transparent; }
  #navbar .w-11, #navbar .h-11 { width: 42px; height: 42px; }
  .home-hero { min-height: auto !important; margin-top: -68px !important; padding-top: 88px !important; padding-bottom: 22px; align-items: stretch; }
  .home-hero > .absolute.inset-0 { opacity: .95; }
  .home-hero > .absolute.inset-0 > .bg-cover { background-position: 42% center !important; opacity: .22 !important; }
  .home-hero > .absolute.inset-0 > div:last-child { background: linear-gradient(180deg,rgba(248,246,242,.86),rgba(248,246,242,.96)) !important; }
  .home-hero-content { display:flex !important; flex-direction:column; gap:20px !important; padding: 10px 16px 0 !important; }
  .home-hero-content > div:first-child { order: 1; width:100%; }
  .home-hero-content > div:last-child { order: 0; width:100%; }
  .home-hero-content > div:last-child > div { aspect-ratio: 16 / 9 !important; max-width:none !important; border-radius:22px !important; box-shadow:0 12px 30px rgba(14,23,38,.12) !important; }
  .home-hero-content > div:last-child > div > img { object-position:center 48%; }
  .home-hero-content .hero-title-mobile { font-size:clamp(29px,8vw,38px) !important; line-height:1.2 !important; margin-bottom:12px !important; }
  .home-hero-content p { font-size:15px !important; line-height:1.8 !important; margin-bottom:18px !important; }
  .home-hero-content .mb-10 { margin-bottom:16px !important; }
  .home-hero-content form { width:100%; max-width:none; gap:8px !important; padding:8px !important; border-radius:18px !important; }
  .home-hero-content form input { min-width:0; width:100%; font-size:16px !important; }
  .home-hero-content form button { padding:11px 15px !important; min-height:44px; }
  .home-hero-content > div:first-child > .flex.flex-wrap { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px !important; margin-top:16px !important; }
  .home-hero-content > div:first-child > .flex.flex-wrap > div { justify-content:center; text-align:center; padding:10px 8px; background:rgba(255,255,255,.68); border:1px solid rgba(183,121,69,.12); border-radius:14px; font-size:12px !important; }
  .home-categories, .home-featured { padding:28px 16px !important; }
  .home-categories .flex.justify-between { align-items:center; margin-bottom:16px !important; gap:10px; }
  .home-categories h2, .home-featured h2 { font-size:22px !important; }
  .home-category-grid { display:flex !important; overflow-x:auto; gap:12px !important; padding:2px 1px 12px; margin-inline:-2px; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .home-category-grid::-webkit-scrollbar { display:none; }
  .home-category-grid > a { flex:0 0 104px; padding:12px 8px !important; gap:8px !important; border-radius:18px !important; scroll-snap-align:start; }
  .home-category-grid > a > div { width:64px !important; height:64px !important; border-radius:16px !important; }
  .home-category-grid > a > div img { width:100%; height:100%; object-fit:contain; }
  .home-featured-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
  .home-featured-grid .gift-card { min-width:0; border-radius:16px !important; }
  .home-featured-grid .gift-card .p-5 { padding:11px !important; }
  .home-featured-grid .gift-card h3 { font-size:14px !important; line-height:1.5; }
  .home-featured-grid .gift-card .btn-gold, .home-featured-grid .gift-card .btn-outline { padding:9px 10px !important; font-size:11px !important; min-height:40px; }
  .home-featured-grid .gift-card .text-xl { font-size:16px !important; }
  .gift-card:hover { transform:none !important; }
  .mobile-bottom-nav { min-height:70px !important; padding:6px 5px calc(6px + env(safe-area-inset-bottom)) !important; background:rgba(250,248,244,.97) !important; backdrop-filter:blur(18px); box-shadow:0 -8px 28px rgba(14,23,38,.08); }
  .mobile-bottom-nav a, .mobile-bottom-nav button { min-height:54px !important; gap:3px !important; font-size:11px; }
  .mobile-bottom-nav .material-symbols-outlined { font-size:21px !important; }
  .mobile-bottom-nav span:last-child { font-size:11px !important; }
  #toast { bottom:calc(84px + env(safe-area-inset-bottom)) !important; }
  #cartDrawer { padding-bottom:env(safe-area-inset-bottom); }
  .home-hero-content button, .home-hero-content a, .home-category-grid a { -webkit-tap-highlight-color:transparent; }
}
@media (max-width: 380px) {
  .home-hero-content { padding-left:12px !important; padding-right:12px !important; }
  .home-hero-content .hero-title-mobile { font-size:29px !important; }
  .home-category-grid > a { flex-basis:92px; }
  .home-featured-grid { gap:9px !important; }
  .home-featured-grid .gift-card .p-5 { padding:9px !important; }
}


/* Site-wide responsive refinement — customer-facing pages */
:root { color-scheme: light; }
img { height: auto; }
button, a, input, select, textarea { touch-action: manipulation; }
button, [role="button"], input[type="submit"] { -webkit-tap-highlight-color: transparent; }
:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid rgba(183,121,69,.55);
  outline-offset: 3px;
}
@media (max-width: 767px) {
  /* Consistent page gutters and vertical rhythm across storefront routes */
  main, #app, .page-content { min-width: 0; max-width: 100%; }
  body > .pt-\[68px\] { padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important; }
  body { overflow-x: clip; }
  section { scroll-margin-top: 82px; }
  section.py-14, section.py-16, section.py-12 { padding-top: 28px !important; padding-bottom: 28px !important; }
  section.px-6, section.px-5, section.px-4 { padding-left: 16px !important; padding-right: 16px !important; }
  .max-w-7xl.mx-auto, .max-w-6xl.mx-auto { max-width: 100%; }
  h1 { font-size: clamp(25px, 7vw, 34px); line-height: 1.25; }
  h2 { line-height: 1.35; }
  p { overflow-wrap: anywhere; }
  /* Inputs remain legible on iOS and don't trigger browser zoom */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select, textarea { min-height: 44px; font-size: 16px !important; max-width: 100%; }
  button, .btn-gold, .btn-outline { min-height: 44px; }
  /* Prevent long labels/actions from pushing the viewport wider */
  .flex { min-width: 0; }
  .flex > * { min-width: 0; }
  /* Product listing cards share the homepage's compact two-column rhythm */
  .grid:has(> .gift-card), .grid:has(> a .gift-card) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .gift-card { min-width: 0; border-radius: 16px !important; }
  .gift-card img { max-width: 100%; }
  .gift-card .p-5, .gift-card .p-4 { padding: 11px !important; }
  .gift-card h3 { font-size: 14px !important; line-height: 1.5; overflow-wrap: anywhere; }
  .gift-card .text-xl { font-size: 16px !important; }
  .gift-card .btn-gold, .gift-card .btn-outline { min-height: 40px; padding: 9px 10px !important; font-size: 11px !important; }
  /* Search, filters and checkout forms stack safely on narrow screens */
  form { min-width: 0; }
  form input, form select, form textarea { min-width: 0; }
  .field-input { min-height: 46px; }
  .overflow-x-auto { -webkit-overflow-scrolling: touch; }
  table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Drawers and dialogs fit between browser chrome and the bottom safe area */
  #productDetailModal, #aiModal, #loginModal, #quickView {
    padding: 12px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }
  #productDetailModal > div, #aiModal .modal-box, #loginModal .modal-box, #quickView .qv-box {
    width: 100% !important; max-width: 100% !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-bottom)) !important;
    overflow-y: auto; overscroll-behavior: contain;
  }
  #productDetailModal .flex.gap-3 { flex-wrap: wrap; }
  #productDetailModal .flex.gap-3 > * { flex: 1 1 140px; }
  .mobile-bottom-nav { padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 390px) {
  .gift-card .p-5, .gift-card .p-4 { padding: 9px !important; }
  .gift-card .btn-gold, .gift-card .btn-outline { padding: 8px !important; }
  .grid:has(> .gift-card), .grid:has(> a .gift-card) { gap: 9px !important; }
}


/* Mobile hamburger navigation only: no fixed bottom bar or reserved space. */
#mobileMenu { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
@media (max-width:767px) { body { padding-bottom: 0 !important; } #mobileMenu { width:min(360px, calc(100vw - 28px)); right:0; } }


/* Mobile drawer: explicit block layout, independent of Tailwind utility loading. */
#mobileMenu {
  width: min(380px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  padding: calc(24px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
  gap: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  direction: rtl;
  text-align: right;
}
#mobileMenu .mobile-menu-close {
  position: static;
  align-self: flex-end;
  flex: 0 0 44px;
  margin-bottom: 16px;
}
#mobileMenu .mobile-menu-section {
  display: block;
  width: 100%;
  margin: 16px 0 8px;
  color: #6e6e6e;
  font-size: 13px;
  line-height: 1.7;
  font-weight: 700;
}
#mobileMenu .mobile-menu-links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  width: 100%;
  min-width: 0;
}
#mobileMenu .mobile-menu-links form { width: 100%; margin: 0; }
#mobileMenu .mobile-menu-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #0e1726;
  font-family: 'Cairo', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  text-align: right;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
}
#mobileMenu .mobile-menu-link > .material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  font-size: 22px;
  line-height: 1;
}
#mobileMenu .mobile-menu-link > span:last-child {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}
#mobileMenu .mobile-menu-link:hover,
#mobileMenu .mobile-menu-link:focus-visible { background: #f8f2eb; }
#mobileMenu .mobile-menu-logout { color: #b33d3d; }
#mobileMenu .mobile-menu-ai {
  width: 100%;
  margin-top: 20px;
  padding-bottom: 4px;
}
#mobileMenu .mobile-menu-ai .btn-gold {
  display: flex;
  width: 100%;
  min-height: 50px;
  gap: 8px;
  padding: 12px;
  text-align: center;
  white-space: normal;
  letter-spacing: normal;
}
@media (max-width: 380px) {
  #mobileMenu { padding-left: 14px; padding-right: 14px; }
  #mobileMenu .mobile-menu-link { font-size: 13px; gap: 10px; }
}