/* =================================================
   SNEXO CAFE – PROFESSIONAL GLASS + 3D
   UI / UX / DARK MODE / ANIMATION / ORIGINAL COLORS
   ================================================= */

/* ===== VARIABLES ===== */
:root{
  --bg:#f8f5f2;
  --main:#6f4e37;
  --accent:#d4a373;
  --dark:#2d1b12;
  --muted:#777;
  --card:rgba(255,255,255,0.25);
  --glass:rgba(255,255,255,0.15);
  --radius:22px;
  --shadow:0 15px 35px rgba(0,0,0,0.15);
  --transition:.4s ease;
}

/* ===== DARK MODE AUTO ===== */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#121212;
    --dark:#f5f5f5;
    --card:rgba(30,30,30,0.3);
    --glass:rgba(255,255,255,0.08);
    --shadow:0 15px 35px rgba(0,0,0,0.6);
  }
}

/* ===== RESET ===== */
*{
  box-sizing:border-box;
  font-family:"Cairo",sans-serif;
  -webkit-tap-highlight-color:transparent;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--dark);
  transition:background var(--transition), color var(--transition);
}

/* ===== HEADER ===== */
header{
  position:sticky;
  top:0;
  z-index:1000;
  padding:16px 22px;
  background:linear-gradient(135deg,#6f4e37,#4b2e1f);
  backdrop-filter:blur(20px);
  box-shadow:var(--shadow);
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,0.15);
  transition:all .5s ease;
}

/* ===== LOGO ===== */
.logo-container{
  display:flex;
  align-items:center;
  gap:14px;
}

.logo{
  width:60px;
  height:60px;
  border-radius:50%;
  border:2px solid #fff;
  object-fit:cover;
  animation:float 4s ease-in-out infinite;
  transition:transform .3s, box-shadow .3s;
}

.logo:hover{
  transform:scale(1.1) rotate(3deg);
  box-shadow:0 10px 28px rgba(0,0,0,0.35);
}

@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}

/* ===== SEARCH ===== */
.search-bar input{
  width:100%;
  padding:14px 24px;
  border:none;
  border-radius:35px;
  margin:14px 0;
  outline:none;
  font-size:15px;
  background:var(--glass);
  backdrop-filter:blur(20px);
  color:#fff;
  transition:all .4s;
}

.search-bar input:focus{
  background:rgba(255,255,255,0.25);
  transform:scale(1.02);
  box-shadow:0 8px 20px rgba(0,0,0,0.25);
}

/* ===== TABS ===== */
.menu-tabs{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding-bottom:6px;
  scrollbar-width:thin;
  scrollbar-color:var(--accent) transparent;
}

.tab{
  background:rgba(255,255,255,0.25);
  border:none;
  padding:10px 26px;
  border-radius:30px;
  cursor:pointer;
  font-weight:bold;
  white-space:nowrap;
  transition:all .4s;
  backdrop-filter:blur(14px);
}

.tab:hover,
.tab.active{
  background:var(--accent);
  color:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,0.35);
  transform:scale(1.05);
}

/* ===== MAIN ===== */
main{
  padding:22px 14px 140px;
}

/* ===== CATEGORY ===== */
.category-title{
  margin:32px 16px 18px;
  font-size:24px;
  color:var(--main);
  animation:slideIn .6s ease;
}

@keyframes slideIn{
  from{opacity:0; transform:translateX(30px);}
  to{opacity:1; transform:none;}
}

/* ===== GRID ===== */
.items-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:20px;
  padding:10px;
}

/* ===== ITEM CARD ===== */
.item{
  background:var(--card);
  backdrop-filter:blur(25px);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  transition:transform .5s ease, box-shadow .5s ease, background .5s ease;
  border:1px solid rgba(255,255,255,0.15);
}

.item:hover{
  transform:translateY(-12px) scale(1.07) rotateX(4deg);
  box-shadow:0 22px 48px rgba(0,0,0,0.4);
}

/* ===== ITEM INFO ===== */
.item-info{
  display:flex;
  align-items:center;
  gap:14px;
}

.thumb{
  font-size:40px;
}

.item h3{
  margin:0;
  font-size:16px;
  line-height:1.4;
}

/* ===== STAR RATING ===== */
.stars{
  color:#f4c430;
  font-size:13px;
  margin-top:5px;
}

/* ===== BADGES ===== */
.badge{
  position:absolute;
  top:14px;
  right:14px;
  padding:5px 12px;
  font-size:11px;
  border-radius:14px;
  color:#fff;
  font-weight:bold;
}

.badge.hot{background:#e63946}
.badge.new{background:#2a9d8f}
.badge.best{background:#f4a261}

/* ===== FAVORITE ICON ===== */
.favorite{
  position:absolute;
  top:14px;
  left:14px;
  font-size:20px;
  opacity:.5;
  cursor:pointer;
  transition:.4s;
}

.favorite:hover{
  opacity:1;
  transform:scale(1.35) rotate(-12deg);
}

/* ===== ADD BUTTON ===== */
.add{
  margin-top:16px;
  background:linear-gradient(135deg,var(--main),#8b5e3c);
  color:#fff;
  border:none;
  padding:16px;
  border-radius:30px;
  cursor:pointer;
  font-size:15px;
  transition:all .5s;
  box-shadow:0 10px 28px rgba(0,0,0,0.25);
}

.add:hover{
  transform:scale(1.1) rotate(-2deg);
  box-shadow:0 14px 40px rgba(0,0,0,0.35);
}

/* ===== CART FLOATING ===== */
.cart-floating{
  position:fixed;
  bottom:30px;
  left:30px;
  background:var(--main);
  color:#fff;
  padding:18px 24px;
  border-radius:55px;
  font-size:18px;
  cursor:pointer;
  box-shadow:0 12px 32px rgba(0,0,0,0.35);
  animation:pulse 2s infinite;
  display:flex;
  align-items:center;
  gap:8px;
  transition:transform .3s, box-shadow .3s;
}

.cart-floating:hover{
  transform:scale(1.07);
  box-shadow:0 18px 48px rgba(0,0,0,0.45);
}

#cart-count{
  background:#fff;
  color:var(--main);
  padding:4px 10px;
  border-radius:50%;
  font-size:14px;
  font-weight:bold;
}

/* ===== MODAL ===== */
.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  justify-content:center;
  align-items:center;
  z-index:2000;
}

.modal-content{
  background:var(--card);
  backdrop-filter:blur(28px);
  width:90%;
  max-width:460px;
  border-radius:26px;
  padding:26px;
  animation:zoomIn .5s ease;
  border:1px solid rgba(255,255,255,0.15);
}

@keyframes zoomIn{
  from{transform:scale(.8);opacity:0;}
  to{transform:scale(1);opacity:1;}
}

#cart-close{
  cursor:pointer;
  font-size:20px;
}

/* ===== FORM ===== */
.order-form input,
.order-form select,
.order-form textarea{
  width:100%;
  padding:16px;
  margin:12px 0;
  border-radius:18px;
  border:none;
  background:var(--glass);
  color:var(--dark);
  transition:all .4s;
}

.order-form input:focus,
.order-form select:focus,
.order-form textarea:focus{
  background:rgba(255,255,255,0.3);
  transform:scale(1.02);
  box-shadow:0 10px 25px rgba(0,0,0,0.25);
}

/* ===== CONFIRM BUTTON ===== */
.confirm-btn{
  background:linear-gradient(135deg,var(--main),#8b5e3c);
  color:#fff;
  border:none;
  width:100%;
  padding:16px;
  border-radius:30px;
  font-size:16px;
  cursor:pointer;
  transition:all .5s;
  box-shadow:0 12px 32px rgba(0,0,0,0.35);
}

.confirm-btn:hover{
  transform:scale(1.1);
  box-shadow:0 18px 48px rgba(0,0,0,0.45);
}

/* ===== SKELETON LOADING ===== */
.skeleton{
  height:160px;
  border-radius:var(--radius);
  background:linear-gradient(
    90deg,
    #e0e0e0 25%,
    #f5f5f5 37%,
    #e0e0e0 63%
  );
  background-size:400% 100%;
  animation:skeleton 1.4s infinite;
}

@keyframes skeleton{
  0%{background-position:100% 0;}
  100%{background-position:0 0;}
}

/* ===== ACCESSIBILITY ===== */
button:focus,
input:focus,
select:focus,
textarea:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{
  width:6px;
  height:6px;
}
::-webkit-scrollbar-thumb{
  background:var(--accent);
  border-radius:10px;
}
::-webkit-scrollbar-track{
  background:transparent;
}

/* ===== MOBILE ===== */
@media(max-width:480px){
  header h1{font-size:18px}
  .category-title{font-size:18px}
  .item h3{font-size:14px}
  .add, .confirm-btn{font-size:14px;padding:14px;}
  .items-grid{gap:14px;}
}
/* ===== FIX TEXT OVERFLOW ===== */
.item h3,
.item p,
.item span{
  overflow-wrap: break-word; /* يكسر الكلمات الطويلة */
  word-wrap: break-word;     /* للمتصفحات القديمة */
  hyphens: auto;             /* يضيف - عند الكسر إذا متاح */
  max-width: 100%;
}

.item-info,
.item{
  overflow: hidden;          /* يمنع أي عنصر يخرج من الكارد */
}

.thumb{
  max-width: 100%;
  height: auto;
}
/* ===== HOT NUMBER FIXED ===== */
.hot-number{
  position:fixed;      /* ثابت على الشاشة */
  bottom:20px;         /* المسافة من الأسفل */
  right:20px;          /* المسافة من اليمين */
  background:var(--accent);
  color:#fff;
  font-weight:bold;
  font-size:16px;
  padding:10px 14px;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
  z-index:3000;
  cursor:default;
  text-align:center;
}