@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200..700&display=swap');

/* مساحة تحت للـ bottom nav فالموبايل */
@media (max-width: 991.98px){
  body { padding-bottom: 80px; }
  /* ملي كيظهر mobile-cart-bar زد المسافة */
  body.cartbar-open { padding-bottom: 120px; }

  /* (اختياري) دعم الحافة السفلية فآيفون */
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  body.cartbar-open { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
}

/* ============================
   Theme (ألوان زاهية + راحة للعين)
   ============================ */
:root{
  /* Brand */
  --brand-1:#00c389; /* mint */
  --brand-2:#00a86b; /* green */
  --brand-3:#0ea5e9; /* sky */

  /* Warm / Accent */
  --warm-1:#ffb020;  /* amber */
  --warm-2:#ff6b35;  /* orange */
  --pink-1:#ff4d8d;  /* pink */

  /* Surfaces */
  --ink:#0f172a;
  --muted:#64748b;
  --surface: rgba(255,255,255,.78);
  --surface-2: rgba(255,255,255,.9);
  --border: rgba(15,23,42,.08);

  /* New: Glassmorphism and Shadows */
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(255, 255, 255, 0.4);
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Responsive typography + touch targets */
  --fs-base: clamp(0.95rem, 0.22vw + 0.9rem, 1.05rem);
  --fs-small: clamp(0.82rem, 0.16vw + 0.78rem, 0.92rem);
  --fs-title: clamp(1.18rem, 1vw + 0.95rem, 1.72rem);
  --touch-min: 44px;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}

html{
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body{
  font-family: 'Josefin Sans', sans-serif;
  font-size: var(--fs-base);
  line-height: 1.45;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 18% 0%, rgba(0,195,137,.18), transparent 60%),
    radial-gradient(900px 520px at 92% 6%, rgba(255,77,141,.14), transparent 55%),
    radial-gradient(900px 620px at 50% 96%, rgba(255,176,32,.12), transparent 62%),
    linear-gradient(180deg, #f7fbff 0%, #ffffff 62%, #ffffff 100%);
}

/* ===== Navy + Orange Theme (index + categories) ===== */
body.theme-navy{
  --brand-1:#2f5f80;
  --brand-2:#244b68;
  --brand-3:#1b3b55;
  --warm-1:#f6a623;
  --warm-2:#f59e1b;
  --pink-1:#f59f77;
  --ink:#0b1b2b;
  --muted:#5f6f7e;
  --surface: rgba(255,255,255,.92);
  --surface-2: rgba(255,255,255,.98);
  --border: rgba(10,20,30,.10);
  --main-green: var(--warm-1);
  --main-yellow: var(--warm-1);
  --pill-active:#eef1f5;
  --mh-bg: #244b68;
  --mh-fg: #fff;
  background:
    radial-gradient(720px 420px at 8% 8%, rgba(36,75,104,.18), transparent 60%),
    radial-gradient(680px 460px at 92% 12%, rgba(36,75,104,.16), transparent 60%),
    radial-gradient(540px 360px at 18% 92%, rgba(245,166,35,.10), transparent 58%),
    radial-gradient(420px 320px at 82% 88%, rgba(245,166,35,.08), transparent 58%),
    linear-gradient(180deg, #dfe4e8 0%, #eef1f4 48%, #ffffff 100%);
}

body.theme-navy .page-surface{
  background: var(--surface);
  border-color: var(--border);
}

body.theme-navy .section-underline{
  background: linear-gradient(90deg, var(--warm-1), var(--warm-2), var(--warm-1));
  box-shadow: 0 10px 24px rgba(36,75,104,.18);
}

body.theme-navy .bottom-nav .nav-item.active{
  color: var(--warm-1);
}

body.theme-navy .bottom-nav .nav-item.fav-active{
  color: var(--warm-1);
}

body.theme-navy .cats-item.active{
  background:#eef2f6;
  color: var(--brand-2);
}

body.theme-navy button.add-to-cart,
body.theme-navy a.add-to-cart,
body.theme-navy button.options-btn,
body.theme-navy a.options-btn,
body.theme-navy button.opt-add-btn,
body.theme-navy .btn-add{
  background: linear-gradient(90deg, var(--warm-1), var(--warm-2)) !important;
  box-shadow: 0 14px 28px rgba(245,166,35,.22);
  color: #3b2500 !important;
}

body.theme-navy button.add-to-cart:hover,
body.theme-navy button.options-btn:hover,
body.theme-navy button.opt-add-btn:hover,
body.theme-navy .btn-add:hover{
  filter: brightness(1.03);
  box-shadow: 0 18px 34px rgba(245,166,35,.28);
}

/* Container مريح وكيعطي نفس الروح فـ index و categories */
.page-surface{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: clamp(12px, 1vw + 8px, 20px);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: box-shadow var(--transition-smooth);
}


/* خط صغير تحت العناوين (gradient) */
.section-underline{
  width: 120px;
  height: 6px;
  margin: -0.65rem auto 1.5rem;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--brand-2), var(--brand-3), var(--warm-1));
  box-shadow: 0 10px 24px rgba(14,165,233,.18);
}

/* Search bar فـ categories (فيها زر الرجوع) */
.cat-search-bar{
  background: linear-gradient(90deg, rgba(0,195,137,.16), rgba(14,165,233,.12));
  border-radius: 18px;
  box-shadow: 0 12px 24px rgba(15,23,42,.08);
  border: 1px solid rgba(15,23,42,.08);
}
.cat-search-bar .btn{
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
}
.cat-search-bar .form-control{
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(15,23,42,.10);
}
.cat-search-bar .clear-btn{
  background: rgba(255,255,255,.65);
}


/* Bottom Nav (موبايل) */
.bottom-nav {
  position: fixed; inset-inline: 0; bottom: 0;
  background: #fff; border-top: 1px solid #ddd;
  z-index: 1040; /* فوق المحتوى وتحت المودالات */
}
.bottom-nav a.nav-item {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: .42rem .5rem;
  font-size: var(--fs-small);
  color: #888;
  text-decoration: none;
}
.bottom-nav .icon { font-size: clamp(1.42rem, 1.8vw, 1.7rem); margin-bottom: 2px; }
.bottom-nav .nav-item.active { color: #00A86B; }

/* Unify button/readability scale on touch devices */
.btn:not(.btn-close){
  font-size: clamp(0.9rem, 0.2vw + 0.84rem, 1rem);
}
.btn:not(.btn-sm):not(.btn-close){
  min-height: var(--touch-min);
}
.add-to-cart,
.options-btn,
.btn-add{
  min-height: var(--touch-min);
  font-size: clamp(0.88rem, 0.2vw + 0.83rem, 0.98rem);
}

/* Index + Categories: button text size requested */
body.theme-navy main .btn:not(.btn-close):not(.btn-round){
  font-size: 14px;
}

@media (pointer: coarse){
  .btn.btn-sm:not(.btn-close){
    min-height: 40px;
    font-size: 0.9rem;
  }
}

/* Hero */
.hero-banner{ position:relative; border-radius:18px; overflow:hidden; min-height:220px; margin:16px 0 24px; }
.hero-banner img{ width:100%; height:100%; display:block; object-fit:cover; filter:saturate(1.05); }
.hero-banner::after{ content:""; position:absolute; inset:0;
  background: linear-gradient(to left, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,0) 70%); }
.hero-content{ position:absolute; inset-block-start: clamp(16px,3vw,32px); inset-inline-start: clamp(16px,3vw,32px);
  color:#fff; max-width:min(520px,65%); text-shadow:0 2px 8px rgba(0,0,0,.25); }
.hero-content h2{ font-weight:800; line-height:1.1; font-size:clamp(22px,4.6vw,44px); margin:0 0 .5rem; }
.hero-content p{ margin:0 0 1rem; font-size:clamp(14px,2.4vw,18px); opacity:.95; }
.hero-cta{ display:inline-block; background:#fecb56; color:#422100; border:none; border-radius:999px;
  padding:.6rem 1.1rem; font-weight:700; text-decoration:none; box-shadow:0 6px 14px rgba(0,0,0,.15); }
.hero-cta:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.18); }

/* Search (نستعمل input-group ديال Bootstrap) يظهر غير فالموبايل */
@media (min-width: 992px){ .search-wrap { display:none !important; } }

/* Typing headline */
.typing-heading {
  line-height: 1.4;
}

.typing-title {
  font-size: var(--fs-title);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #244b68;
}

.typing-icon {
  font-size: 1.1em;
  color: var(--navy, #102f4a);
}

.typing-cursor {
  display: inline-block;
  margin-inline-start: 2px;
  animation: typingBlink 1.3s steps(1) infinite;
}

@keyframes typingBlink {
  50% { opacity: 0; }
}