:root {
  /* ألوان المعاينة (يمكن تعديلها من هنا بدون تغيير الكلاسات) */
  --accent: #f59e0b;           /* Amber 500 */
  --accent-dark: #d97706;      /* Amber 600 */
  --ring: rgba(245, 158, 11, .35);
  --ring-danger: rgba(244, 63, 94, .28);
  --danger: #f44b3f;           /* Rose 500 */
  --danger-2: #fb7185;         /* Rose 400 */
  --muted: #a1a1aa;            /* Zinc 400 */
  --line: #d4d4d8;             /* Zinc 300 */
  --text-strong: #18181b;      /* Zinc 900 */
  --text: #3f3f46;             /* Zinc 700 */
}

/* ===== RESET & BASE ===== */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Cairo', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

body{
  min-height:100vh;
  /* خلفية مودرن مع الصورة الأصلية */
  background:
    radial-gradient(1200px 800px at 80% -10%, #d97706 0, #0b0b0c 60%),
    url(./lastone.png) center / cover no-repeat fixed;
  background-blend-mode: overlay;
}

#logo img{ width:280px; height:auto; border-radius:10px; border-image:  url(lol.png) ;
 }

#mainMenu{ direction:rtl; margin-bottom:20px; }
#mainMenu ul{
  display:flex; justify-content:center; align-items:center; gap:22px;
  font:bold 20px/1.2 "Bookman Old Style", Georgia, serif;
  padding:10px 12px;
}
#mainMenu ul li{ text-align:center; }
#mainMenu ul li a{ display:flex; align-items:center; color:var(--accent); font-size:22px; }

.reservation{ display:flex; justify-content:center; align-items:center; margin:0; }

/* ===== CARD (مطابق لطابع الواجهة الزجاجي) ===== */
.res-bg{
  background: rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  box-shadow:0 20px 40px rgba(0,0,0,.25);
  padding:32px 36px;
  max-width:1200px; width:100%; margin-inline:auto; direction:rtl; margin-bottom:50px;
}

.text h1{ text-align:center; font-size:28px; color:var(--accent); font-weight:800; margin-bottom:6px; }
.text h2{ text-align:center; font-size:16px; color:var(--accent); font-weight:800; margin-bottom:30px; }

/* ===== FORM GRID ===== */
.form-content form{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px 18px; align-items:start; margin-bottom:50px; }
.form-item.grid-full{ grid-column:1 / -1; }

/* ===== LABELS ===== */
.form-item label,
.order-type-wrap label,
.submenu label,
.sheep-wrap label,
.submenu-chicken label,
.order-K label,
.pick-up label,
.type-sheep{
  display:block; font-size:18px; color:#f59e0b;margin-bottom:6px; font-weight:bold;
}

/* ===== INPUTS / SELECTS / TEXTAREA ===== */
.form-item input,
.form-item select,
.form-item textarea,
.order-type-wrap select,
.submenu select,
.sheep-wrap select,
.submenu-chicken select,
.order-K select,
.pick-up select,
.type-sheep{
  width:100%; background:#fff; color:#0b0b0c;
  border:1px solid var(--line); border-radius:20px;
  padding:12px 16px; font-size:16px; outline:0;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease, transform .05s ease;
}
.form-item input::placeholder, .form-item textarea::placeholder{ color:var(--text-strong); }
.form-item input:focus, .form-item select:focus, .form-item textarea:focus,
.order-type-wrap select:focus, .submenu select:focus, .sheep-wrap select:focus,
.submenu-chicken select:focus, .order-K select:focus, .pick-up select:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px var(--ring);
}
.form-item.grid-full textarea{ min-height:120px; display:block; margin:0 auto; }

/* الهاتف LTR */
.sa-wrap{ display:flex; align-items:center; gap:8px; }
.sa-prefix{ display:inline-block; background:#f5f5f5; border:1px solid #ddd; padding:10px 12px; border-radius:999px; font-weight:700; color:#333; min-width:64px; text-align:center; }
.sa-wrap input[type="tel"]{ flex:1; direction:ltr; text-align:left; }
.hint{ color:#666; font-size:12px; margin-top:4px; display:block; }

/* ===== ORDER TYPE WRAP ===== */
.order-type-wrap{ position:relative; border:1px solid #e6e6e6; border-radius:20px; padding:10px 12px; margin-top:-10px; display:block; }


.submenu, .sheep-wrap, .type-sheep , .submenu-chicken, .order-K, .pick-up{
  position:relative; top:0; display:none; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px);
  transition:opacity .25s ease, transform .25s ease;
}
.submenu.show, .sheep-wrap.show, .type-sheep.show , .submenu-chicken.show, .order-K.show{
  display:flex; flex-direction:column; gap:6px; opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}
.pick-up.show{ display:block; opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); margin-bottom:4px; }

/* ===== INFO LINK / AGREEMENT ===== */
.info span a{  display:static; font-size:19px; color:#f59e0b; font-weight:500; cursor:pointer; }
.agree span{ font-size:15px; }

/* ===== BUTTON ===== */
.form-actions{ grid-column:1 / -1; display:flex; justify-content:center; margin-top:8px; }
.btn{
  background:var(--accent); color:#111827; border:0; padding:16px 28px; font-size:17px; font-weight:700;
  border-radius:20px; cursor:pointer; box-shadow:0 14px 30px rgba(245,158,11,.20);
  transition:transform .12s ease, background-color .25s ease, box-shadow .25s ease;
}
.btn:hover{ background:var(--accent-dark); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

/* ===== VALIDATION (بدون إضافة كلاسات) ===== */
input:required:invalid:not(:placeholder-shown),
select:required:invalid,
textarea:required:invalid{ border-color:var(--danger) !important; box-shadow:0 0 0 3px var(--ring-danger) !important; }
input:required:valid,
select:required:valid,
textarea:required:valid{ border-color:#16a34a; }
input:required:invalid:placeholder-shown{ border-color:#cfcfcf !important; box-shadow:none !important; }
.form-item input[type="checkbox"] {

  width: auto;
  transform: scale(1.1);
  margin: 8px 0 12px 10px;
  cursor: pointer;
  direction: ltr;
}
.form-item span  a {
  font-size: 20px;
  color: #f5f5f5;
  font-weight: 500;
  cursor: pointer;
  gap: 8px;
}
 .hint {
font-size: 14px;
color: #fff ;
}
/* ===== RESPONSIVE ===== */
@media (max-width:1200px){ .form-content form{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:992px){ .form-content form{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px){
  .res-bg{ border-radius:22px; padding:22px; }
  .form-content form{ grid-template-columns:1fr; }

  }

/* زر القائمة (الهامبرجر) */
.mobile-menu-toggle {
  display: none;               
  position: fixed;             
  top: 15px;
  right: 15px;                 
  font-size: 22px;
  padding: 10px 16px;
  border: 0;
  background: var(--accent);   
  color: #111827;
  border-radius: 8px;
  cursor: pointer;
  z-index: 1100;               
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* القائمة الجانبية */
.mobile-side-menu {
  position: fixed;
  top: 0;
  right: -260px;              
  width: 260px;
  height: 100vh;
  background: #222;
  color: #fff;
  padding: 60px 20px;
  transition: right .3s ease;
  z-index: 1101;
}
.mobile-side-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mobile-side-menu a {
  display: block;
  padding: 14px 10px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.mobile-side-menu a:hover {
  background: rgba(255,255,255,.08);
}

/* زر الإغلاق داخل القائمة */
.mobile-side-menu .close-button {
  position: absolute;
  top: 15px;
  left: 15px;  
  font-size: 26px;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
}

/* حالة فتح القائمة */
.mobile-side-menu.open {
  right: 0;
}

/* الخلفية */
.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  display: none;
  z-index: 1100;
}
.backdrop.show {
  display: block;
}


@media (max-width: 992px) {
  .mobile-menu-toggle {
    display: block;
  }

}
@media (max-width: 992px) {
  #mainMenu ul {
    display: none;   
  }
  .mobile-menu-toggle {
    display: block; 
  }
}
@media (min-width: 993px) {
  #mainMenu ul {
    display: flex;  
  }
  .mobile-menu-toggle {
    display: none;
  }
}