/* =========================================================
   Coffee UI – Clean, unified, and distinctive design
   - Removed duplicates
   - Organized into clear sections
   - Cohesive "neo‑café" glassmorphism aesthetic
   - RTL-friendly, accessible focus, and smooth motion
   ========================================================= */

/* =====================
   1) Theme Tokens
   ===================== */
   :root{
    /* Café palette */
    --bg1: #1c140f;           /* deep coffee */
    --bg2: #0f0b08;           /* darker base */
    --glass: rgba(255,255,255,0.06);
    --txt: #f6efe9;           /* light cream text */
    --muted: #c8bdb5;         /* muted beige */
    --accent: #dd7d1c;        /* caramel */
    --stroke: rgba(255,255,255,0.14);
    --shadow: 0 12px 32px rgba(0,0,0,.45);
  
    /* Radii & spacing */
    --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px; --r-2xl: 28px;
    --sp-1: 6px; --sp-2: 10px; --sp-3: 14px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  
    /* Typography */
    --font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
    --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 32px;
  }
  
  /* =====================
     2) Base Reset
     ===================== */
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; font-family:var(--font); color:var(--txt);
    background:
      radial-gradient(1200px 800px at 70% -10%, #3c2b1f 0%, transparent 60%),
      linear-gradient(160deg,var(--bg1),var(--bg2));
    background-attachment:fixed; overflow-x:hidden;
  }
  /* Subtle texture */
  body::before{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
    background-image:url('images/noise.png'); opacity:.06; background-size: 200px 200px;
  }
  
  /* =====================
     3) Layout & Header
     ===================== */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(12, 9, 7, .82); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--stroke);
  }
  .container{max-width:1100px; margin:0 auto; padding:16px}
  main{padding:20px 0 60px}
  
  .brand{display:flex; align-items:flex-start; gap:16px; justify-content:space-between; flex-wrap:wrap}
  .brand-left{display:flex; flex-direction:column; gap:4px}
  .brand h1{margin:0; font-size:var(--fs-xl); letter-spacing:.5px}
  .subtitle{font-size:var(--fs-sm); color:var(--muted)}
  
  /* Status badge */
  .badge{
    background:linear-gradient(180deg, rgba(26,20,15,.85), rgba(15,11,8,.8));
    border:1px solid #4b3a2c; padding:6px 10px; border-radius:12px; font-weight:800; color:var(--txt);
  }
  
  /* =====================
     4) Controls (Buttons, Pickers, Tools)
     ===================== */
  /* Primary button style bound to existing selectors to avoid HTML changes */
  .btn, .btn-row button, header button, #backBtn, #adminPanel button.langpick,
  #langAr, #langHe, .langpick.btnEdit, .langpick.btnDelete{
    -webkit-appearance:none; appearance:none; border:none; cursor:pointer;
    font-weight:800; font-size:var(--fs-md);
    padding:10px 14px; border-radius:12px; color:#1a0f0a;
    background: linear-gradient(180deg, #ffc585, #dd7d1c);
    box-shadow: 0 6px 14px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.25);
    transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
  }
  .btn:hover, .btn-row button:hover, header button:hover, #backBtn:hover,
  #adminPanel button.langpick:hover, #langAr:hover, #langHe:hover,
  .langpick.btnEdit:hover, .langpick.btnDelete:hover{
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.3);
  }
  #backBtn{display:none}
  
  /* Language picker (select) */
  .langpick{
    appearance:none; color:var(--txt);
    background:linear-gradient(180deg, rgba(26,20,15,.85), rgba(15,11,8,.8));
    border:1px solid #4b3a2c; padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:700;
  }
  
  /* Search + sort bar */
  .tools{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0}
  .tools input[type="text"], .tools input[type="search"]{
    flex:1; min-width:220px; padding:10px 12px; border-radius:12px; border:1px solid var(--stroke);
    background:rgba(15,11,8,.82); color:var(--txt);
  }
  
  /* =====================
     5) Product Grid & Cards
     ===================== */
  .grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .card{
    position:relative; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(12,9,7,.9));
    border:1px solid var(--stroke); border-radius:16px; overflow:hidden;
    box-shadow:var(--shadow); transform:translateY(8px) scale(.98); opacity:0;
    animation:fadeUp .6s var(--delay,0ms) forwards cubic-bezier(.16,.84,.44,1);
    will-change: transform, opacity; content-visibility:auto; contain-intrinsic-size:300px;
  }
  .card:hover{transform:translateY(0) scale(1); transition:transform .25s ease, box-shadow .25s ease; box-shadow:0 16px 35px rgba(0,0,0,.5)}
  .thumb{aspect-ratio:1/1; width:100%; background:#111 center/cover no-repeat}
  .img-note{font-size:12px; color:var(--muted); text-align:center; margin:6px 10px 0; line-height:1.2}
  .body{padding:10px 12px 14px}
  .name{font-size:15px; font-weight:800; margin:2px 0 6px; line-height:1.3}
  .price-badge{
    position:absolute; top:8px; right:8px;
    background:linear-gradient(180deg, rgba(26,20,15,.85), rgba(15,11,8,.8));
    border:1px solid #4b3a2c; padding:6px 8px; border-radius:12px; font-weight:900; color:var(--txt)
  }
  .empty{opacity:.9; text-align:center; padding:40px}
  
  /* =====================
     6) Categories Grid
     ===================== */
  .catgrid{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); margin:12px 0 14px}
  .cat{
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start; background:transparent; border:none; cursor:pointer; opacity:0;
    animation:fadeUp .6s var(--delay,0ms) forwards cubic-bezier(.16,.84,.44,1);
    transition: transform .25s ease, box-shadow .25s ease; content-visibility:auto; contain-intrinsic-size:300px;
  }
  .cat-img{
    width:100%; aspect-ratio:1/1; border-radius:16px; overflow:hidden; box-shadow:0 6px 14px rgba(0,0,0,.35);
    background:#111 center/cover no-repeat; transition:transform .25s ease; opacity:0;
    animation:imgIn .7s .05s forwards cubic-bezier(.16,.84,.44,1);
  }
  .cat:hover .cat-img{transform:scale(1.05)}
  .cat-label{
    margin-top:8px; padding:4px 10px; font-size:16px; font-weight:900; text-align:center;
    color:#ffe7c4; background:rgba(0,0,0,.35); border-radius:8px; opacity:0; animation:fadeText .8s .25s forwards;
  }
  .cat-hint{font-size:12px; color:var(--muted); margin-top:3px; text-align:center; opacity:0; animation:fadeText .8s .4s forwards}
  
  /* Category fallback gradients */
  .cat--cold  .cat-img{background-image:linear-gradient(135deg,#0ea5e9,#0369a1)}
  .cat--aser  .cat-img{background-image:linear-gradient(135deg,#22c55e,#16a34a)}
  .cat--hot   .cat-img{background-image:linear-gradient(135deg,#f97316,#c2410c)}
  .cat--snacks .cat-img{background-image:linear-gradient(135deg,#f59e0b,#b45309)}
  .cat--cakes .cat-img{background-image:linear-gradient(135deg,#a78bfa,#7c3aed)}
  .cat--food  .cat-img{background-image:linear-gradient(135deg,#ef4444,#b91c1c)}
  .cat--hookah .cat-img{background-image:linear-gradient(135deg,#22d3ee,#0891b2)}
  .cat--Nuts .cat-img{background-image:linear-gradient(135deg,#b08968,#7f5539)}
  
  /* Mobile horizontal scroll for categories */
  @media (max-width:768px){
    .catgrid{display:flex; gap:10px; overflow:auto; padding-bottom:6px; scroll-snap-type:x mandatory}
    .cat{min-width:140px; scroll-snap-align:start}
  }
  
  /* =====================
     7) Admin Panel & Tables (unified to café theme)
     ===================== */
  .admin-card{
    background: rgba(255,255,255,.04);
    border:1px solid var(--stroke);
    border-radius:16px;
    padding:24px 28px;
    box-shadow:0 8px 24px rgba(0,0,0,.25);
  }
  .form-title{font-size:20px; margin-bottom:16px; color:#ffe9d6; font-weight:900}
  .form-grid{display:grid; grid-template-columns: 1fr; gap:14px}
  .field label{font-size:14px; font-weight:700; margin-bottom:6px; display:block; color:#ffe9d6}
  
  /* Inputs bound to existing markup class */
  input.langpick, select.langpick, textarea.langpick{
    width:100%; padding:12px 14px; font-size:16px; color:var(--txt);
    border:1px solid var(--stroke); border-radius:10px; outline:none;
    background:rgba(255,255,255,.04); transition:border .2s ease, box-shadow .2s ease, background .2s ease;
  }
  input.langpick:focus, select.langpick:focus, textarea.langpick:focus{
    border-color: rgba(221,125,28,.7);
    background: rgba(221,125,28,.08);
    box-shadow: 0 0 0 3px rgba(221,125,28,.2);
  }
  
  .table-wrap{overflow:auto; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.15)}
  table{width:100%; border-collapse:collapse; font-size:16px; background:rgba(255,255,255,.04)}
  th{padding:14px; text-align:right; background:rgba(221,125,28,.15); color:#ffe9d6; font-weight:800}
  td{padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08); color:var(--txt)}
  tr:hover td{background:rgba(255,255,255,.03)}
  
  /* Counters / stats */
  #productStats{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
  .counter-pill{
    display:inline-flex; align-items:center; gap:8px; padding:8px 12px; cursor:pointer;
    background:rgba(221,125,28,.12); border:1px solid rgba(221,125,28,.35);
    border-radius:999px; color:#ffead7; font-weight:800; font-size:15px;
  }
  .counter-pill.active{outline:2px solid var(--accent); box-shadow:0 0 8px rgba(221,125,28,.35)}
  .counter-badge{
    width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
    background: linear-gradient(180deg, #ffc585, #dd7d1c); color:#1a0f0a; font-weight:900; font-size:14px; box-shadow:0 2px 6px rgba(0,0,0,.2)
  }
  .counter-wrapper{display:inline-flex; align-items:center; gap:6px; margin:4px 0; font-size:16px; font-weight:600; color:#ffead7}
  
  /* Language active state */
  #langAr.active, #langHe.active{ box-shadow:0 0 0 3px rgba(221,125,28,.25) }
  
  /* =====================
     8) Utilities, Effects & Motion
     ===================== */
  footer{display:none}
  .notice{margin:14px 0; padding:12px 14px; border:1px dashed #5a4637; border-radius:10px; color:var(--txt); background:rgba(11,18,32,.3); display:none}
  
  /* Ripple effect */
  .ripple{position:absolute; border-radius:50%; transform:scale(0); opacity:.6;
    background:radial-gradient(circle, var(--accent) 0%, transparent 60%);
    animation:ripple .6s ease-out forwards; pointer-events:none}
  @keyframes ripple{to{transform:scale(8); opacity:0}}
  
  /* Skeleton */
  .skel{background:linear-gradient(90deg,#2b2119 25%,#3a2c21 37%,#2b2119 63%);
    background-size:400% 100%; animation:shimmer 1.2s infinite; border-radius:16px; height:220px; border:1px solid var(--stroke)}
  @keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
  
  /* Focus accessibility */
  :focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:12px}
  
  /* Cart count bump */
  @keyframes bump{0%{transform:scale(1)}30%{transform:scale(1.12)}100%{transform:scale(1)}}
  .badge.bump{animation:bump .3s}
  
  /* Text fades */
  @keyframes fadeText{to{opacity:1}}
  @keyframes fadeUp{0%{opacity:0; transform: translateY(10px) scale(.98)}60%{opacity:1; transform: translateY(-2px) scale(1.01)}100%{opacity:1; transform: translateY(0) scale(1)}}
  @keyframes imgIn{0%{opacity:0; transform:scale(.92)}60%{opacity:1; transform:scale(1.03)}100%{opacity:1; transform:scale(1)}}
  
  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }
  
  /* =====================
     9) Responsive Enhancements (≥ 992px)
     ===================== */
  @media (min-width: 992px){
    body{font-size:18px}
    main.container{max-width:1400px; padding:40px}
    header .container{padding:16px 20px}
    .brand h1{font-size:26px}
  
    .admin-card{padding:28px 32px}
    .form-title{font-size:22px}
    .form-grid{grid-template-columns: repeat(2, 1fr); gap:20px}
  
    table{border-radius:12px; overflow:hidden}
  }