@font-face {
    font-family: 'Vazirmatn';
    src: url("fonts/Vazir-Thin-FD-WOL.ttf") format("truetype");
    src: url("fonts/Vazir-Thin-FD-WOL.eot") format("opentype");
    src: url("fonts/Vazir-Thin-FD-WOL.woff");
    src: url("fonts/Vazir-Thin-FD-WOL.woff2");
    font-weight: 100;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url("fonts/Vazir-Light-FD-WOL.ttf") format("truetype");
    src: url("fonts/Vazir-Light-FD-WOL.eot") format("opentype");
    src: url("fonts/Vazir-Light-FD-WOL.woff");
    src: url("fonts/Vazir-Light-FD-WOL.woff2");
    font-weight: 300;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url("fonts/Vazir-FD-WOL.ttf") format("truetype");
    src: url("fonts/Vazir-FD-WOL.eot") format("opentype");
    src: url("fonts/Vazir-FD-WOL.woff");
    src: url("fonts/Vazir-FD-WOL.woff2");
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url("fonts/Vazir-Medium-FD-WOL.ttf") format("truetype");
    src: url("fonts/Vazir-Medium-FD-WOL.eot") format("opentype");
    src: url("fonts/Vazir-Medium-FD-WOL.woff");
    src: url("fonts/Vazir-Medium-FD-WOL.woff2");
    font-weight: 500;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url("fonts/Vazir-Bold-FD-WOL.ttf") format("truetype");
    src: url("fonts/Vazir-Bold-FD-WOL.eot") format("opentype");
    src: url("fonts/Vazir-Bold-FD-WOL.woff");
    src: url("fonts/Vazir-Bold-FD-WOL.woff2");
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}
:root{
  --otic-green: #00F202;       /* نئون سبز (جدید) */
  --otic-blue: #00F202;        /* آبي روشن (جایگزین با سبز جدید) */
  --otic-deep: #1B2231;        /* آبي تيره پس‌زمینه (جدید) */
  --glass: rgba(27, 34, 49, 0.8); /* شيشه‌اي (بر اساس آبی جدید) */
  --text: #e6f0ff;
  --muted: #97a6b2;
  --danger: #ff5c5c;
  --card-radius: 18px;
  --shadow: 0 6px 24px rgba(0, 242, 2, .25);
  --ring: 0 0 0 3px rgba(0, 242, 2, .25);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Vazirmatn',Tahoma,Arial,sans-serif; line-height:1.75;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 70% -10%, rgba(10,163,255,.18), transparent 40%),
    radial-gradient(900px 600px at 20% 110%, rgba(34,255,109,.16), transparent 40%),
    linear-gradient(180deg,#0a1a28,#071521 60%, #05101a);
  min-height:100vh;
  font-feature-settings: "ss01";
}

/* ==== Header / Topbar ==== */
.topbar{
  position:sticky; top:0; z-index:30; backdrop-filter:saturate(160%) blur(8px);
  background:linear-gradient(180deg, rgba(10,27,41,.85), rgba(10,27,41,.55));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.wrap{max-width:1100px;margin:0 auto;padding:14px 18px;display:flex;align-items:center;gap:14px}
.brand{display:flex;gap:12px;align-items:center}
.brand img{height:38px;width:auto;filter:drop-shadow(0 4px 22px rgba(34,255,109,.25))}
.title{font-weight:800;letter-spacing:.3px}
.title .main{font-family:'Montserrat','Vazirmatn',Tahoma,Arial,sans-serif; font-size:22px}
.title .sub{font-size:13px;color:var(--muted)}
.spacer{flex:1}
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:16px 30px;border-radius:12px;
  background:linear-gradient(135deg,var(--otic-green), #8cffc0);
  color:#00140a;text-decoration:none;font-weight:700;box-shadow:0 6px 24px rgba(34,255,109,.25);
  transition:.18s ease-in-out;
  font-family: inherit; 
  border: none;         
  cursor: pointer;
  margin-top: 20px;
}
.btn:hover{transform:translateY(-1px)}
.btn-outline{
  background:transparent;border:1px solid rgba(255,255,255,.12);color:#d9f7ff;
  box-shadow:none; padding:8px 14px;border-radius:10px
}
.btn-outline:hover{border-color:rgba(255,255,255,.25)}
.admin-actions{
  display:flex;
  align-items:center;
  gap:16px;  /* فاصله بین دو دکمه – اگر خواستی کمتر/بیشترش کن */
}

/* ==== Layout / Card ==== */
.container{max-width:1100px;margin:24px auto;padding:0 18px}
.card{
  background:linear-gradient(180deg, rgba(12,27,41,.72), rgba(12,27,41,.56));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--card-radius);
  box-shadow:var(--shadow);
  padding:22px;
}
.menu-textarea{
  width:100%;
  min-height:52px;
  resize:none;          /* اجازه‌ی بزرگ/کوچیک‌کردن دستی نمی‌ده */
  overflow-y:hidden;    /* اسکرول عمودی مخفی، برای auto-grow */
  line-height:1.8;
  font-size:15px;
}


.card.glass{box-shadow:0 0 0 1px rgba(255,255,255,.05), var(--shadow)}
.center{display:flex;justify-content:center}
.hero{
  margin:26px auto; max-width:820px; padding:26px 22px; position:relative;
  border:1px solid rgba(34,255,109,.25);
}
.hero::before{
  content:""; position:absolute; inset:-2px; border-radius:calc(var(--card-radius) + 2px);
  background:radial-gradient(700px 250px at 50% -20%, rgba(34,255,109,.15), transparent 50%),
             radial-gradient(600px 300px at 50% 120%, rgba(10,163,255,.18), transparent 50%);
  z-index:-1; filter:blur(18px);
}

/* ==== Form ==== */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
input, textarea, select{
  width:100%; padding:12px 14px; border-radius:12px; color:#dfefff;
  background:#0c1a27; border:1px solid rgba(255,255,255,.08); outline:none; transition:.15s;
}
input::placeholder, textarea::placeholder{color:#6e8091}
input:focus, textarea:focus, select:focus{border-color:rgba(34,255,109,.35); box-shadow:var(--ring)}

/* ==== Section header ==== */
.section-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;
}
.section-title{font-size:20px;font-weight:800}
.range{
  display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;
  background:rgba(10,163,255,.12); border:1px solid rgba(10,163,255,.25); color:#cfe9ff; font-size:13px;
}

/* ==== Table ==== */
.table-wrap{overflow:auto;border-radius:14px}

.menu-table {
  width: 100%;
  min-width: 560px;
  /* این مدل ساده‌ترین و بهترین است */
  border-collapse: separate; 
  border-spacing: 0;
  border-radius: 14px;
  overflow: hidden; 
}

/* 3. همه سلول‌ها (هدر و بدنه) */
.menu-table th,
.menu-table td {
  padding: 12px;
  text-align: center;
  /* خطوط افقی برای *همه* سلول‌ها */
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* 4. استایل هدر */
.menu-table thead th {
  font-weight: 700;
  color: #cfe9ff;
  background: rgba(10, 163, 255, .10);
}

/* 5. افزودن خط عمودی فقط برای ستون روز (چون dir="rtl" است، border-left خط سمت راست را می‌کشد) */
.menu-table .day-col {
  border-left: 1px solid rgba(255, 255, 255, .08);
}

/* 6. استایل ردیف‌های زوج */
.menu-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, .02);
}

.badge{
  display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px;
  background:rgba(34,255,109,.12); border:1px solid rgba(34,255,109,.25); color:#ccffdf;
  font-size:12px;
}
/* ==== Option pills ==== */
.option-list{display:flex;flex-wrap:wrap;gap:8px}
.option{
  display:inline-block; padding:9px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.02);
  cursor:pointer; transition:.15s; color:#e6f0ff; font-size:14px
}
.option:hover{transform:translateY(-1px); border-color:rgba(10,163,255,.45)}
input[type=radio][hidden]+label.option{position:relative}
input[type=radio][hidden]:checked+label.option{
  background:linear-gradient(135deg, var(--otic-blue), #64cfff);
  border-color:transparent; color:#001521; box-shadow:0 6px 20px rgba(10,163,255,.35)
}

.notice {
  background: rgba(255, 92, 92, 0.10);   /* زمینهٔ شفاف قرمز (ملایم) */
  border: 1px solid rgba(255, 92, 92, 0.22); /* حاشیهٔ قرمز روشن */
  color: #ffdede;                         /* متن روشن و خوانا */
  padding: 10px 14px;
  border-radius: 12px;
  text-align: center;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 700;
}


/* ==== Footer ==== */
footer{color:var(--muted); text-align:center; padding:28px 18px}

/* ==== Admin pages tweaks ==== */
.admin-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.kpi{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.kpi .pill{padding:6px 10px;border-radius:10px;background:#0d2030;border:1px solid rgba(255,255,255,.08);color:#bfe1ff}

/* ==== Responsive ==== */
@media (max-width:768px){
  .form-row{grid-template-columns:1fr}
  .title .main{font-size:18px}
  .wrap{padding:12px}
}
/* وسط‌چین کردن هدر کارت اصلی */
.hero .section-head{
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.section-title{ text-align:center }
.range{ text-align:center }

/* وسط‌چین جدول و محتوا */

/* وسط‌چین گزینه‌های غذا */
.option-list{ justify-content:center }

/* وسط‌چین دکمه‌های پایین فرم */
.admin-actions{ justify-content:center }

/* ==== Styles for Admin Delete Pills ==== */
.names-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.delete-pill {
  display: inline-flex;
  align-items: center;
  /* این خط کلیدی است: اسم و دکمه را از هم جدا می‌کند */
  justify-content: space-between; 

  background: rgba(0, 242, 2, 0.1);
  border: 1px solid rgba(0, 242, 2, 0.2);
  border-radius: 999px;
  padding-left: 4px;  /* پدینگ چپ برای دکمه */
  padding-right: 12px; /* پدینگ راست برای اسم */
  font-size: 13px;
  color: var(--text);
  transition: .15s ease-in-out;

  min-width: 100px; 
}
.delete-pill:hover {
  background: rgba(0, 242, 2, 0.2);
}

.btn-delete {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  transition: .15s ease-in-out;
  flex-shrink: 0; 
}

.btn-delete:hover {
  background: var(--danger);
  color: white;
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 4px 10px rgba(255, 92, 92, 0.3);
}

.log-box {
  background-color: rgba(27, 34, 49, 0.8); /* Match the card background */
  color: #e6f0ff;
  padding: 20px;
  border-radius: 12px;
  margin-top: 30px;
}

.log-item {
  margin-bottom: 12px;
}

.log-item p {
  margin: 0;
  font-size: 14px;
}

.log-item em {
  font-style: italic;
  color: #d9f7ff;
}

/* --- Disabled Button Style --- */
.btn.locked {
  background: linear-gradient(135deg, #3a4b5c, #2c3e50); /* Dark bluish-gray gradient */
  color: #8fa0b0; /* Muted text color */
  box-shadow: none; /* Remove neon glow */
  cursor: pointer; /* Keep pointer so they can click and see the popup */
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.btn.locked:hover {
  transform: none; /* Disable lift effect */
  background: linear-gradient(135deg, #3a4b5c, #2c3e50);
}