@font-face {
  font-family: 'BYekan';
  src: url('B Yekan.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
html {
  scroll-behavior: smooth;       /* اسکرول نرم */
  scroll-padding-top: 80px;      /* ارتفاع هدر */
}
body.dark-mode .logo {
  content: url("images/logo-gold.webp");
}

/* پایه و رنگ‌ها */
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0;
 background-color: #fff;
  color: #000;}
:root{
  --green:#2e7d32;
  --green-700:#1b5e20;
  --gold:#d4a017;
  --cream:#f6f5ee;
  --ink:#243029;
  --muted:#6b7a70;
  --card:#ffffff;
  --alt:#f0f7f1;
  --shadow:0 10px 25px rgba(0,0,0,.08);
}
body{
  font-family: 'BYekan', Tahoma, Arial, sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.8;
}
.container{ width:min(1100px,92vw); margin:0 auto; }

/* دکمه‌ها */
.btn {
  display: inline-block;
  padding: .65rem 1rem;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.25s ease;
  will-change: background-color, color, border-color, transform;
}



/* دکمه پر (solid) */
.btn-solid {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.btn-solid:hover {
  background: var(--green-700);
  border-color: var(--green-700);
}

/* دکمه خطی (outline) */
.btn-outline {
  background: #fff;
  color: var(--green);
  border-color: var(--green);
}
.btn-outline:hover {
  background: var(--alt);
  color: var(--green-700);
}

/* دکمه تاکیدی (accent) */
.btn-accent {
  background: var(--gold);
  color: #2a2510;
  border-color: var(--gold);
}
.btn-accent:hover {
  filter: brightness(.95);
  color: #2a2510;
}

/* دکمه گوست (ghost) */
.btn-ghost {
  background: transparent;
  color: #f1f1f1; /* متن همیشه روشن */
  border: 2px dashed #bbb;
}
.btn-ghost:hover {
  background: #2a2a2a;
  color: #d4a017;
  border-color: #d4a017;
}
.full{ width:100%; }

/* هدر + همبرگر */
.header{ position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid #e9ece8; }
.h-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.6rem 0; }

.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; }
.brand-name{ font-weight:900; color:var(--green-700); font-size: 40px; }
.logo{ max-height:50px; width:auto; height:auto; }
.logo-fallback{ width:42px; height:42px; border-radius:10px; background:linear-gradient(135deg,var(--green),var(--gold)); color:#fff; display:grid; place-items:center; font-weight:900; }
.logo-fallback.small{ width:32px; height:32px; }

.nav-toggle{ display:none; }
.hamburger{ width:42px; height:38px; display:grid; place-items:center; cursor:pointer; }
.hamburger span{ display:block; width:24px; height:2px; background:var(--ink); margin:4px 0; transition:.25s; border-radius:2px; }

/* کشوی موبایل (از راست) */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(80vw, 320px);
  background: #fff;
  padding: 1rem;
  box-shadow: -12px 0 30px rgba(0,0,0,.08);

  transform: translateX(100%);        /* ✔️ از راست بیرون صفحه */
  transition: transform 0.35s ease;   /* ✔️ انیمیشن نرم */
}

.nav-toggle:checked ~ .drawer {
  transform: translateX(0);          /*  ✔️ وقتی باز شد بیاد تو */
}


.drawer ul{ list-style:none; padding:0; margin:0; display:grid; gap:.25rem; }
.drawer a{ display:block; padding:.8rem 1rem; border-radius:10px; text-decoration:none; color:var(--ink); font-weight:700; }
.drawer a:hover{ background:var(--alt); color:var(--green-700); }
.drawer .divider{ height:1px; background:#eee; margin:.25rem 0; }
.drawer .auth{ display:flex; gap:.5rem; padding:.5rem 0 0; }

.nav-toggle:checked ~ .hamburger span:nth-child(1){ opacity:0;transform: translateY(4.5px) rotate(45deg); }
.nav-toggle:checked ~ .hamburger span:nth-child(2){ opacity:0; }
.nav-toggle:checked ~ .hamburger span:nth-child(3){ opacity:0;transform: translateY(-4.5px) rotate(-45deg); }

/* منوی دسکتاپ */
.nav-desktop{ display:none; align-items:center; gap:1rem; }
.nav-desktop ul{ list-style:none; margin:0; padding:0; display:flex; gap:.5rem; }
.nav-desktop a{ text-decoration:none; color:var(--ink); font-weight:700; padding:.5rem .75rem; border-radius:10px; }
.nav-desktop a:hover{ background:var(--alt); color:var(--green-700); }
.nav-desktop .auth{ display:flex; gap:.5rem; }

/* بنر: background ثابت و cover مثل فایل اولیه */
.banner{
  position:relative;
  min-height:60vh;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.45)),
    url("images/banner.webp");            /* ← تصویر بنر خودتان را اینجا قرار دهید */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;   /* ← دقیقا مثل فایل اولیه: fixed */
  display:grid; place-items:center;
}
.banner-overlay{ display:none; } /* برای سازگاری با ساختار، overlay با گرادیان در background آمده */
.banner-content{ position:relative; z-index:1; color:#fff; text-align:center; padding:4rem 1rem; }
.banner h1{ margin:0 0 .6rem; font-size: clamp(1.4rem, 5vw, 2.4rem); text-shadow:0 4px 30px rgba(0,0,0,.35); }
.banner p{ margin:0 0 1rem; }

/* بخش‌ها */
.section{ padding: 2.75rem 0; }
.section-alt{ background:var(--alt); }
.section-head{ text-align:center; margin-bottom:1.5rem; }
.section-head h2{ margin:0 0 .35rem; font-size: clamp(1.2rem, 3.5vw, 1.8rem); color:var(--green-700); }
.section-head p{ margin:0; color:var(--muted); }

/* کارت محصولات (mobile-first) */
.cards{ display:grid; grid-template-columns: 1fr; gap:1rem; }
.card{
  background:var(--card); border-radius:16px; padding:1rem; box-shadow:var(--shadow);
  display:grid; align-content:start; gap:.6rem; position:relative;
}
.card .badge{ position:absolute; top:.75rem; left:.75rem; background:var(--gold); color:#2a2510; padding:.2rem .5rem; border-radius:999px; font-size:.8rem; font-weight:800; z-index: 10; }
.card h3{ margin:.2rem 0; }
.features{ list-style:none; margin:0; padding:0; }
.features li{ padding:.35rem 1.2rem .35rem 1.2rem; position:relative; }
.features li::before{ content:"◆"; position:absolute; right:0rem; font-size:.7rem;top: 30%; color:var(--green); }
.price{ display:flex; align-items:baseline; gap:.5rem; color:var(--muted); border-top:1px dashed #e6e6e6; padding-top:.6rem; }
.price strong{ color:var(--ink); }

/* چرا گیل‌برنج؟ */
.benefits{ display:grid; grid-template-columns: 1fr; gap:1rem; }
.benefit{ background:#fff; border-radius:16px; padding:1rem; box-shadow:var(--shadow); }
.benefit h4{ margin:0 0 .25rem; color:var(--green-700); }

/* وبلاگ */
.blog-grid{ display:grid; grid-template-columns:1fr; gap:1rem; }
.post{ background:#fff; border-radius:16px; padding:1rem; box-shadow:var(--shadow); text-decoration:none; color:inherit; display:grid; gap:.6rem; }
.post:hover{ transform: translateY(-2px); transition:.2s; }


.readmore{ color:var(--green); font-weight:800; }
.readmore:hover{ color: #1c6321; }

/* درباره ما */
.about{ display:grid; grid-template-columns:1fr; gap:1rem; align-items:center; }
.about-img{ height:260px; border-radius:16px; box-shadow:var(--shadow); background:url("images/about-rice.webp") center/cover no-repeat; }

/* فرم تماس */
.contact{ text-align:center; }
.contact p{ color:var(--muted); margin:.25rem 0 0; }
.contact-form{ margin-top:1rem; }
.contact-form .grid{ display:grid; grid-template-columns:1fr; gap:.75rem; }
.contact-form input, .contact-form textarea{
  width:100%; border:1px solid #e1e6e3; background:#fff; padding:.85rem .9rem; border-radius:12px; font-family:inherit; outline:none;
}
.contact-form input:focus, .contact-form textarea:focus{ border-color:var(--green); box-shadow:0 0 0 3px rgba(46,125,50,.12); }
.contact-form button {
  margin-top: 1rem; /* حدود 16px فاصله */
  font-family: 'BYekan', Tahoma, Arial, sans-serif; /* برای اطمینان از فونت */
}

/* فوتر */
.footer{ background:#0f1a14; color:#cfd6d1; margin-top:2rem; }
.footer-inner{ display:grid; gap:1rem; align-items:center; padding:1.25rem 0; }
.footer-brand{ display:flex; align-items:center; gap:.5rem; font-weight:800; }
.footer-links{ list-style:none; padding:0; margin:0; display:flex; gap:1rem; flex-wrap:wrap; }
.footer a{ color:#cfd6d1; text-decoration:none; }
.footer a:hover{ color:var(--gold); }
.copy{ font-size:.9rem; opacity:.9; }

/* نقاط شکست */
@media (min-width: 600px){
  .logo{ max-height:60px; }
  .cards{ grid-template-columns: repeat(2, 1fr); }
  .benefits{ grid-template-columns: repeat(2, 1fr); }
  .blog-grid{ grid-template-columns: repeat(2, 1fr); }
  .about{ grid-template-columns: 1.1fr .9fr; }
  .contact-form .grid{ grid-template-columns: 1fr 1fr; }
  .contact-form textarea{ grid-column: 1 / -1; }
}
@media (min-width: 992px){
  .hamburger, .nav-toggle, .drawer{ display:none; }
  .nav-desktop{ display:flex; }
  .h-inner{ padding:.8rem 0; }
  .blog-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* دسترسی */
a:focus, button:focus, .btn:focus, .hamburger:focus { outline: 3px solid rgba(212,160,23,.5); outline-offset: 2px; }

/* اسکرول نرم */
html{ scroll-behavior:smooth; }
/* در 1.css اضافه کن */
.phone-link {
  display: inline-flex;
  justify-content: center;  /* متن داخل دکمه وسط */
  align-items: center;      /* عمودی وسط */
  text-align: center;       /* متن چندخطی هم وسط */
  gap: .4rem;

  font-weight: 700;
  text-decoration: none;
  padding: .5rem .75rem;
  border-radius: 10px;
  border: 2px solid var(--green);
  color: var(--green);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.phone-link:hover {
  background: var(--green);
  color: #fff;
}
.product-img {
  width: 100%;              /* تمام عرض کارت */
  height: 200px;            /* ارتفاع ثابت */
  object-fit: contain;      /* تصویر کشیده نشه */
  border-radius: 8000px;      /* گوشه‌ها گرد بشه مثل کارت */
  margin-bottom: .75rem;    /* فاصله از متن */
  background: #fff;         /* پس‌زمینه سفید تمیز */
}
.product-img-wrap {
  width: 100%;
  height: 220px;       /* ارتفاع دلخواه */
  border-radius: 16px; /* گوشه‌های گرد کامل */
  overflow: hidden;    /* همه‌چی رو ببُر */
}

.product-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* تصویر کل قاب رو پر کنه */
  display: block;
}
/* استایل‌های پیش‌فرض (حالت روشن) */
body {
  background-color: #fff;
  color: #000;
}

a {
  color: #007bff;
}

.header {
  background-color: #f8f9fa;
}

/* تاریک شدن کارت‌ها و عکس‌ها */
body.dark-mode .card {
  background: #1e1e1e;
  color: #f1f1f1;
}
body.dark-mode .banner {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,.75)),
    url("images/banner.webp");
}
body.dark-mode .product-img-wrap img {
  filter: brightness(0.7);
}
body.dark-mode .post-thumb {
  filter: brightness(0.7);
}
/* حالت تاریک برای هدر */
body.dark-mode .header {
  background-color: #121212;
  border-bottom: 1px solid #2a2a2a;
}

body.dark-mode .nav-desktop a {
  color: #f1f1f1;
}

body.dark-mode .nav-desktop a:hover {
  background-color: #1e1e1e;
  color: #d4a017; /* طلایی برای هاور */
}

body.dark-mode .brand-name {
  color: #d4a017; /* برند طلایی در حالت تاریک */
}
/* حالت تاریک برای بخش "چرا گیل‌برنج" */
body.dark-mode .section-alt {
  background-color: #1c1c1c; /* پس‌زمینه تیره */
  color: #f1f1f1;           /* متن روشن */
}
/* تیتر "چرا گیل‌برنج" در دارک مود */
body.dark-mode #why h2 {
  color: #d4a017;  /* طلایی */
}

/* تیترهای داخل کارت‌ها هم طلایی */
body.dark-mode #why .benefit h4 {
  color: #d4a017;
}

/* متن کارت‌ها روشن */
body.dark-mode #why .benefit p {
  color: #f1f1f1;
}

body.dark-mode .benefit {
  background: #2a2a2a;      /* کارت‌های تیره */
  color: #f1f1f1;
}

body.dark-mode .benefit h4 {
  color: #d4a017;           /* طلایی برای تیترها */
}
/* دکمه گوست در حالت دارک */
body.dark-mode .btn-ghost {
  background: transparent;
  color: #f1f1f1;               /* متن روشن */
  border: 2px dashed #bbb;      /* خط‌چین خاکستری روشن */
}

body.dark-mode .btn-ghost:hover {
  background: #2a2a2a;          /* پس‌زمینه خاکستری تیره هنگام هاور */
  color: #d4a017;               /* طلایی روی هاور */
  border-color: #d4a017;        /* هماهنگ با متن هاور */
}
/* دارک مود برای سکشن محصولات */
body.dark-mode section#products {
  background-color: #121212;   /* کل عرض سکشن تیره */
  color: #f1f1f1;
}

body.dark-mode section#products .card {
  background: #1e1e1e;         
  color: #f1f1f1;
  border: 1px solid #2a2a2a;
}

body.dark-mode section#products h2,
body.dark-mode section#products h3 {
  color: #d4a017;              /* تیترها طلایی */
}

body.dark-mode section .container .section-head h2{
  color: #d4a017;              /* تیترها طلایی */

}
body.dark-mode section#products .price strong {
  color: #fff;                 
}
/* دارک مود برای رسپی‌ها و وبلاگ */
body.dark-mode #recipes {
  background-color: #1e1e1e;   /* پس‌زمینهٔ سکشن تیره */
  color: #f1f1f1;              /* متن روشن */
}

body.dark-mode #recipes .post {
  background: #2a2a2a;         /* کارت‌های تیره */
  color: #f1f1f1;
}

body.dark-mode #recipes h2,
body.dark-mode #recipes h4 {
  color: #d4a017;              /* تیترها طلایی */
}

body.dark-mode #recipes .readmore {
  color: #d4a017;              /* لینک مطالعه طلایی */
}
body.dark-mode #contact {
  background-color: #121212; /* کل پس‌زمینه سکشن تیره */
  color: #f1f1f1;
}

body.dark-mode #contact h2 {
  color: #d4a017;
}

body.dark-mode #contact p {
  color: #ccc;
}

body.dark-mode #contact .contact-form input,
body.dark-mode #contact .contact-form textarea {
  background: #1e1e1e;
  border: 1px solid #333;
  color: #f1f1f1;
}
body.dark-mode {
  background-color: #121212; /* پس‌زمینهٔ کل صفحه تیره */
  color: #f1f1f1;
}
/* دارک مود برای منوی همبرگری */
body.dark-mode .drawer {
  background: #121212;      /* پس‌زمینه تیره */
  color: #f1f1f1;           /* متن روشن */
  box-shadow: -12px 0 30px rgba(0,0,0,.6);
}

body.dark-mode .drawer a {
  color: #f1f1f1;           /* لینک‌ها سفید */
}

body.dark-mode .drawer a:hover {
  background: #1e1e1e;      /* هاور خاکستری تیره */
  color: #d4a017;           /* لینک‌ها طلایی روی هاور */
}

body.dark-mode .drawer .divider {
  background: #333;         /* خط جداکننده تیره */
}
/* دارک مود برای دکمه همبرگری */
body.dark-mode .hamburger span {
  background: #f1f1f1; /* خطوط سفید در دارک مود */
}
/* دکمه‌های منوی همبرگری در حالت دارک */
body.dark-mode .drawer .btn-solid {
  background: #d4a017;   /* طلایی برند */
  border-color: #d4a017;
  color: #121212;        /* متن تیره برای تضاد */
}

body.dark-mode .drawer .btn-solid:hover {
  background: #b98c12;   /* طلایی کمی تیره‌تر روی هاور */
  border-color: #b98c12;
  color: #fff;
}

body.dark-mode .drawer .btn-outline {
  background: transparent;
  border-color: #f1f1f1;
  color: #f1f1f1;
}

body.dark-mode .drawer .btn-outline:hover {
  background: #2a2a2a;
  border-color: #d4a017;
  color: #d4a017;
}
/* شماره تماس در حالت دارک مود */
body.dark-mode .phone-link {
  border-color: #d4a017;   /* طلایی */
  color: #d4a017;          /* متن طلایی */
  background: transparent; /* پس‌زمینه خنثی */
}

body.dark-mode .phone-link:hover {
  background: #2a2a2a;     /* خاکستری تیره روی هاور */
  color: #fff;             /* متن سفید برای کنتراست */
  border-color: #d4a017;   /* طلایی بمونه */
}
/* دکمه‌های هدر دسکتاپ در حالت دارک مود */
body.dark-mode .nav-desktop .btn-outline {
  background: #1e1e1e;     /* پس‌زمینه تیره */
  border-color: #333;      /* بُردِر تیره */
  color: #f1f1f1;          /* متن روشن */
}

body.dark-mode .nav-desktop .btn-outline:hover {
  background: #2a2a2a;     /* هاور کمی روشن‌تر */
  border-color: #d4a017;   /* طلایی برند */
  color: #d4a017;          /* متن طلایی روی هاور */
}
/* نرم کردن تغییرات دارک/لایت مود */
body, 
.header, 
.section, 
.card, 
.benefit, 
.post, 
.footer, 
.drawer, 
.btn, 
.phone-link {
  transition: background-color 0.2s ease, 
              color 0.2s ease, 
              border-color 0.2s ease, 
              filter 0.2s ease;
}
/* ورودی شماره تماس راست‌چین */
input[type="tel"] {
  direction: rtl;
  text-align: right;
}
/* فونت یکان روی همه دکمه‌ها */
.btn, 
.contact-form button {
  font-family: 'BYekan', Tahoma, Arial, sans-serif;
}

/* دکمه‌های solid در دارک مود */
body.dark-mode .btn-solid {
  background: #d4a017;   /* طلایی برند */
  border-color: #d4a017;
  color: #121212;        /* متن تیره برای تضاد */
}

body.dark-mode .btn-solid:hover {
  background: #b98c12;   /* طلایی کمی تیره‌تر */
  border-color: #b98c12;
  color: #fff;
}
/* دکمه تلگرام */
.phone-link.telegram {
  border-color: #0088cc;
  color: #0088cc;
}
.phone-link.telegram:hover {
  background: #0088cc;
  color: #fff;
}
body.dark-mode .phone-link.telegram {
  border-color: #1da1f2; /* رنگ روشن‌تر برای دارک مود */
  color: #1da1f2;
}

body.dark-mode .phone-link.telegram:hover {
  background: #2a2a2a;
  color: #fff;
}
/* دکمه اینستاگرام */
.phone-link.instagram {
  border-color: #e1306c;
  color: #e1306c;
}

.phone-link.instagram:hover {
  background: #e1306c;
  color: #fff;
}

/* حالت دارک مود */
body.dark-mode .phone-link.instagram {
  border-color: #f77737; /* رنگ نارنجی/گرم‌تر */
  color: #f77737;
}

body.dark-mode .phone-link.instagram:hover {
  background: #2a2a2a;
  color: #fff;
}

/* دکمه ایتا */
.phone-link.eitaa {
  border-color: #f57c00;  /* نارنجی اصلی */
  color: #f57c00;
}

.phone-link.eitaa:hover {
  background: #f57c00;
  color: #fff;
}

/* حالت دارک مود */
body.dark-mode .phone-link.eitaa {
  border-color: #ff9800;  /* نارنجی روشن‌تر در دارک مود */
  color: #ff9800;
}

body.dark-mode .phone-link.eitaa:hover {
  background: #2a2a2a;
  color: #fff;
}
/* کانتینر دکمه‌های ارتباطی */
.contact-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;   /* همیشه وسط‌چین */
  margin: 1rem 0;
}

/* دکمه‌ها در دسکتاپ */
.contact-buttons .phone-link {
  flex: 1;
  min-width: 160px;          /* اندازه حداقل */
  max-width: 220px;          /* حداکثر عرض هر دکمه */
  text-align: center;
}

/* حالت موبایل */
@media (max-width: 600px) {
  .contact-buttons {
    flex-direction: column;  /* دکمه‌ها زیر هم */
    align-items: center;     /* وسط‌چین شدن کل ستون */
  }
  .contact-buttons .phone-link {
    width: 100%;             /* هر دکمه کل ردیف رو پر کنه */
    max-width: none;         /* محدودیت حداکثر عرض برداشته بشه */
  }
}
/* جلوگیری از شکستن آیتم‌های هدر */
.h-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: nowrap;       /* 🚀 جلوگیر از رفتن به خط بعد */
  white-space: nowrap;     /* 🚀 متن‌ها هم تو یه خط بمونن */
}

/* منوی دسکتاپ */
.nav-desktop ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: .5rem;
  flex-wrap: nowrap;       /* 🚀 منوها نرن خط بعد */
  white-space: nowrap;
}

.view-all-wrapper {
  display: flex;
  justify-content: center;   /* دکمه وسط سکشن */
  margin-top: 1.5rem;
}

.view-all-btn {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 320px;
  padding: 1.5rem;
  font-size: 1.1rem;
  text-align: center;
  overflow: hidden;
}

/* متن و چشم روی هم در مرکز */
.view-all-btn .btn-text,
.view-all-btn .eye {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
  
}

/* حالت اولیه */
.view-all-btn .btn-text { opacity: 1; }
.view-all-btn .eye { opacity: 0; }

/* وقتی روی دکمه کلیک شد */
.view-all-btn.loading .btn-text {
  opacity: 0;
  transform: translate(-50%, -70%); /* متن بره بالا */
}
.view-all-btn.loading .eye {
  opacity: 1;
  transform: translate(-50%, -50%); /* چشم دقیقاً وسط */
}
.view-all-wrapper {
  display: flex;
  justify-content: center;  /* دکمه وسط چین */
  margin-top: 1.5rem;
}

.view-all-wrapper .btn {
  width: 100%;
  max-width: 320px;
  text-align: center;
}

/* استایل لینک‌ها در منوی دسکتاپ */
.nav-desktop .rightbar li a {
  position: relative;
  text-decoration: none;
  padding-bottom: 4px; /* فاصله بین لینک و خط */
  transition: color 0.3s ease;
}

/* خط زیر لینک هنگام هاور */
.nav-desktop .rightbar li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: #2e7d32; /* رنگ سبز در حالت روشن */
  transition: width 0.3s ease, left 0.3s ease;
}

/* وقتی لینک هاور میشه */
.nav-desktop .rightbar li a:hover::after {
  width: 100%;  /* خط از راست به چپ کشیده می‌شود */
  left: 0;
}

/* وقتی هاور از روی لینک برداشته میشه */
.nav-desktop .rightbar li a:not(:hover)::after {
  width: 0%;   /* خط از چپ به راست محو میشه */
  left: 100%;
}

/* رنگ خط در حالت روشن */
body:not(.dark-mode) .nav-desktop .rightbar li a::after {
  background-color: #2e7d32; /* رنگ سبز در حالت روشن */
}

/* رنگ خط در حالت دارک مود */
body.dark-mode .nav-desktop .rightbar li a::after {
  background-color: #d4a017; /* رنگ طلایی در حالت دارک مود */
}
.nav-desktop .rightbar li a {
  
  border-radius: 8px 8px 0 0;  /* گوشه‌های بالا گرد (چپ و راست بالا)، پایین صفر */
  
}

/* کشوی موبایل (از راست) */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(80vw, 320px);
  background: #fff;
  padding: 1rem;
  box-shadow: -12px 0 30px rgba(0,0,0,.08);
  
  transform: translateX(100%);  /* از راست بیرون صفحه */
  transition: transform 0.35s ease;  /* انیمیشن نرم */
}

/* وقتی منوی همبرگری باز می‌شود */
.nav-toggle:checked ~ .drawer {
  transform: translateX(0);  /* منو از راست به چپ ظاهر شود */
}

/* برای همبرگر */
.nav-toggle:checked ~ .hamburger span:nth-child(1) {
  transform: translateY(4.5px) rotate(45deg);
}
.nav-toggle:checked ~ .hamburger span:nth-child(2) {
  opacity: 0;
}
.nav-toggle:checked ~ .hamburger span:nth-child(3) {
  transform: translateY(-4.5px) rotate(-45deg);
}

/* برای همبرگر بدون فشار */
.nav-toggle:checked ~ .hamburger {
  transition: transform 0.3s ease;
}
/* تغییرات برای دکمه‌ها در منوی همبرگری */
.drawer a{
  display: block;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  transition: all 0.3s ease;  /* انیمیشن برای تمام تغییرات */
}

.drawer a .upbar:hover {
  background: var(--alt);  /* تغییر پس‌زمینه هنگام هاور */
  color: var(--green-700);  /* تغییر رنگ متن هنگام هاور */
  transform: scale(1.05);    /* کمی بزرگ‌تر شدن دکمه هنگام هاور */
}

.drawer a .upbar:focus {
  outline: none;  /* حذف دایره‌ی فریم که در حالت فوکوس می‌آید */
  transform: scale(1.05);  /* همینطور که روی دکمه کلیک می‌شود، کمی بزرگ‌تر شود */
}

/* جلوگیری از "بلینک کردن" */
.drawer a .upbar{
  will-change: transform, background-color, color;  /* اعمال تغییرات در تمام ویژگی‌های مورد نظر */
}

/* برای دکمه‌های خاص مثل "خانه" تا 5 تای بعدی که هاور و کلیک شود */
.drawer a.upbar:hover {
  background: var(--green-700);
  color: white;
  transform: translateX(10px);  /* انیمیشن حرکت دکمه‌ها به سمت راست هنگام هاور */
}

.drawer a.upbar:focus {
  background: var(--green-700);
  color: white;
  transform: translateX(10px);  /* در حالت فوکوس هم انیمیشن اعمال شود */
}
body.dark-mode .blog-grid .post {
  background-color: #2a2a2a;  /* پس‌زمینه تیره */
  color: #f1f1f1;             /* متن روشن */
}

body.dark-mode .blog-grid .readmore {
  color: #d4a017;             /* رنگ طلایی برای لینک "همه مطالب" */
}

body.dark-mode .blog-grid .readmore:hover {
  color: #fff;                /* تغییر رنگ به سفید در هاور */
     /* پس‌زمینه تیره در هاور */
}
/* صفحه همیشه پر بشه */
html, body {
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* محتوای اصلی صفحه */
main {
  flex: 1; /* کل فضای خالی رو می‌گیره */
}

/* فوتر همیشه پایین */
.footer {
  margin-top: auto;
}

.out-of-stock {
  color: red;
}

.in-stock {
  color: green; /* یا هر رنگی که برای موجود بودن می‌خواهید */
}
.auth {
  display: flex;
  align-items: center; /* 🔹 همه عناصر داخل auth در یک خط و وسط عمودی */
  gap: .5rem;          /* فاصله مناسب بین دکمه‌ها و متن */
}

.user-greeting {
  display: block;
  align-items: center; /* 🔹 متن و ایموجی دقیقاً وسط دکمه‌ها */
  font-weight: 700;
  color: var(--green-700);
}

body.dark-mode .user-greeting {
  color: #d4a017;
}
.user-greeting {
  display: flex;
  align-items: center;
  font-weight: 700;
  color: var(--green-700);
  text-decoration: none;      /* بدون زیرخط */
  white-space: nowrap;
  transition: color 0.2s ease;
  cursor: pointer;

}

.user-greeting:hover {
  color: var(--green);
}

body.dark-mode .user-greeting {
  color: #d4a017;
}

body.dark-mode .user-greeting:hover {
  color: #fff;
}
/* 🎨 حالت دارک‌مود برای دکمه‌های outline */
body.dark-mode .btn-outline {
  background: transparent;
  border-color: #d4a017;  /* طلایی برند */
  color: #d4a017;         /* متن طلایی */
}

body.dark-mode .btn-outline:hover {
  background: #d4a017;    /* طلایی هنگام هاور */
  color: #121212;         /* متن تیره برای کنتراست */
  border-color: #d4a017;
}
/* 🎨 دارک‌مود برای کل فرم‌های ورود و ثبت‌نام */
body.dark-mode section#login,
body.dark-mode section#register {
  background-color: #121212;  /* پس‌زمینه اصلی تیره */
  color: #f1f1f1;             /* رنگ متن روشن */
}
body .contact-form {
  background: #f9f9f9;        /* پس‌زمینه روشن برای باکس فرم */
  border: 1px solid #ccc;     /* خط ملایم خاکستری اطراف فرم */
  border-radius: 16px;        /* لبه‌های نرم مثل طراحی کلی */
  padding: 1.5rem;
  box-shadow: 0 0 15px rgba(0,0,0,0.1); /* سایهٔ ملایم و سبک */
}

/* خود فرم */
body.dark-mode .contact-form {
  background: #1a1a1a;        /* رنگ تیره‌تر برای خود باکس فرم */
  border: 1px solid #2a2a2a;  /* خط ملایم اطراف فرم */
  border-radius: 16px;        /* لبه‌های نرم مثل طراحی کلی */
  padding: 1.5rem;
  box-shadow: 0 0 25px rgba(0,0,0,0.4); /* سایهٔ ملایم */
}

/* ورودی‌ها */
body.dark-mode .contact-form input,
body.dark-mode .contact-form textarea {
  background: #262626;
  border: 1px solid #444;
  color: #f1f1f1;
}

body.dark-mode .contact-form input::placeholder,
body.dark-mode .contact-form textarea::placeholder {
  color: #aaa;
}

body.dark-mode .contact-form input:focus,
body.dark-mode .contact-form textarea:focus {
  border-color: #d4a017;
  box-shadow: 0 0 0 3px rgba(212,160,23,.15);
}

/* تیتر فرم و لینک ثبت‌نام */
body.dark-mode .section-head h2 {
  color: #d4a017;
}
body.dark-mode .section-head p {
  color: #ccc;
}
body.dark-mode .contact a.readmore {
  color: #d4a017;
}
.order-card {
  background: var(--card);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.5rem;
}

.order-card h3 {
  color: var(--green-700);
  margin-top: 0;
}

.order-card p {
  margin: .25rem 0;
  line-height: 1.7;
}

.order-items {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
}
.order-items li {
  border-bottom: 1px dashed #ddd;
  padding: .35rem 0;
}

.payment-proof {
  max-width: 200px;
  border-radius: 8px;
  margin-top: .5rem;
}

/* حالت دارک مود */
body.dark-mode .order-card {
  background: #1e1e1e;
  color: #f1f1f1;
  border: 1px solid #2a2a2a;
}
body.dark-mode .order-card h3 {
  color: #d4a017;
}
body.dark-mode .order-items li {
  border-color: #444;
}
.order-form {
  background: var(--card);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--shadow);
}
body.dark-mode .order-form {
  background: #1e1e1e;
  border: 1px solid #333;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24,
  'margin-right' 8px
}

/* برای فرم‌ها و دکمه‌ها */
@media (max-width: 768px) {
  .form-group {
    margin-bottom: 1rem;
  }

  .form-group input,
  .form-group select,
  .form-group button {
    width: 100%;
    padding: 1rem;
    border-radius: 8px;
  }

  /* دکمه‌ها در موبایل */
  .btn-submit {
    font-size: 1rem;
    padding: 1rem 2rem;
  }
}

.profile-box {
  box-shadow: var(--shadow);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.profile-box h3 {
  color: var(--green-700);
  margin-bottom: 1rem;
  text-align: center;
}
@media (min-width: 768px) {
.orders-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  border-radius :100px;
}

.orders-table th,
.orders-table td {
  border: 1px solid var(--card);
  padding: .75rem;
  text-align: center;
  ;
}

.orders-table th {
  background: var(--green);
  color: #fff;
}

.order-details {
  border-radius: 12px;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #ddd;
}

body.dark-mode .orders-table th {
  background: #d4a017;
  color: #000;
}

body.dark-mode .orders-table td {
  border-color: #444;
  color: #f1f1f1;
}

body.dark-mode .profile-box {
  background: #1e1e1e;
  border: 1px solid #333;
  color: #f1f1f1;
}

.img-proof {
  max-width: 180px;
  border-radius: 10px;
  border: 1px solid #ccc;
}

.no-orders {
  text-align: center;
  padding: 2rem;
  color: gray;
  font-weight: 500;
}

.status {
  font-weight: bold;
}

.status.در\ انتظار\ بررسی { color: orange; }
.status.در\ حال\ ارسال { color: dodgerblue; }
.status.تحویل\ شده { color: green; }
.status.لغو\ شده { color: red;}
/* دارک مود برای جدول */
body.dark-mode .orders-table {
background-color: #333;  /* پس‌زمینه تیره برای جدول */
}

body.dark-mode .orders-table th {
background-color: #444;  /* پس‌زمینه تیره برای سطر عنوان */
color: #fff;             /* متن روشن برای سطر عنوان */
}

body.dark-mode .orders-table td {
background-color: #555;  /* پس‌زمینه تیره برای سلول‌ها */
color: #f1f1f1;          /* رنگ روشن برای متن سلول‌ها */
border-color: #666;      /* مرز تیره‌تر برای سلول‌ها */
}

body.dark-mode .orders-table tr:hover {
background-color: #666;  /* تغییر رنگ پس‌زمینه هنگام هاور */
}

body.dark-mode .orders-table .status {
font-weight: bold;
}

/* رنگ‌ها برای وضعیت‌های مختلف در دارک مود */
body.dark-mode .status.در\ انتظار\ بررسی {
color: orange;
}

body.dark-mode .status.در\ حال\ ارسال {
color: dodgerblue;
}

body.dark-mode .status.تحویل\ شده {
color: green;
}

body.dark-mode .status.لغو\ شده {
color: red;
}
/* دارک مود برای بخش جزئیات سفارش */
body.dark-mode .order-details {
background-color: #2a2a2a;  /* پس‌زمینه تیره */
color: #f1f1f1;             /* متن روشن */
}

/* تغییر رنگ لینک‌ها و متون دیگر در دارک مود */
body.dark-mode .order-details p,
body.dark-mode .order-details ul,
body.dark-mode .order-details li {
color: #f1f1f1;             /* رنگ روشن برای متن */
}

/* دارک مود برای دکمه‌ها */
body.dark-mode .btn-outline {
background-color: #444;     /* پس‌زمینه تیره‌تر */
color: #fff;                /* متن روشن */
border: 1px solid #666;     /* مرز روشن‌تر */
}

body.dark-mode .btn-outline:hover {
background-color: #666;     /* هاور دکمه روشن‌تر */
border-color: #f1f1f1;      /* رنگ مرز هاور */
}
/* دارک مود برای پروفایل کاربری */
body.dark-mode .profile-box {
background-color: #1e1e1e;   /* پس‌زمینه تیره برای پروفایل */
color: #f1f1f1;               /* متن روشن */
}

body.dark-mode .profile-box h3 {
color: #d4a017;               /* رنگ طلایی برای عنوان */
}

/* دارک مود برای جدول سفارشات */
body.dark-mode .orders-table {
background-color: #333;      /* پس‌زمینه تیره برای جدول */
}

body.dark-mode .orders-table th {
background-color: #444;      /* پس‌زمینه تیره برای عنوان‌های جدول */
color: #fff;                 /* رنگ روشن برای عنوان‌ها */
}

body.dark-mode .orders-table td {
background-color: #555;      /* پس‌زمینه تیره برای سلول‌ها */
color: #f1f1f1;              /* رنگ روشن برای متن سلول‌ها */
border-color: #666;          /* مرز تیره‌تر برای سلول‌ها */
}

/* دارک مود برای جزئیات سفارش */
body.dark-mode .order-details {
background-color: #2a2a2a;   /* پس‌زمینه تیره برای جزئیات */
color: #f1f1f1;               /* رنگ روشن برای متن جزئیات */
}

/* رنگ‌های لینک‌ها و متون در جزئیات */
body.dark-mode .order-details p,
body.dark-mode .order-details ul,
body.dark-mode .order-details li {
color: #f1f1f1;
             /* رنگ روشن برای متن */
background-color: #2a2a2a;   /* پس‌زمینه تیره برای جزئیات */

}

/* دارک مود برای دکمه‌ها */
body.dark-mode .btn-outline {
background-color: #444;       /* پس‌زمینه تیره برای دکمه‌ها */
color: #fff;                  /* رنگ روشن برای متن دکمه‌ها */
border: 1px solid #666;       /* مرز روشن‌تر */
}

body.dark-mode .btn-outline:hover {
background-color: #666;       /* هاور دکمه روشن‌تر */
border-color: #f1f1f1;        /* رنگ مرز هاور */
}

/* تغییر رنگ وضعیت‌ها در دارک مود */
body.dark-mode .status.در\ انتظار\ بررسی {
color: orange;
}

body.dark-mode .status.در\ حال\ ارسال {
color: dodgerblue;
}

body.dark-mode .status.تحویل\ شده {
color: green;
}

body.dark-mode .status.لغو\ شده {
color: red;
}
}
@media (max-width: 768px) {

}
.img-proof {
  max-width: 100%;  /* حداکثر عرض تصویر برابر با عرض کانتینر */
  height: auto;     /* ارتفاع تصویر به طور خودکار متناسب با عرض تغییر می‌کند */
  border-radius: 10px;
  border: 1px solid #ccc;
}
body.darkmode .container .profile-box{
  background-color: #2a2a2a;
}
/* استایل بخش کلی */
#post {
  background-color: #f9f9f9;
  padding: 2rem 0;
}

.post-header {
  text-align: center;
  margin-bottom: 2rem;
}

.post-header h1 {
  font-size: 2.5rem;
  color: #1b5e20;
}

.post-date {
  color: #777;
  font-size: 1rem;
}

.post-image {
  text-align: center;
  margin-bottom: 2rem;
}

.post-image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.post-content {
  font-size: 1.2rem;
  color: #333;
  line-height: 1.6;
  margin-top: 1.5rem;
  word-wrap: break-word;
}

/* برای دستگاه‌های موبایل */
@media (max-width: 768px) {
  .post-header h1 {
      font-size: 2rem;
  }

  .post-content {
      font-size: 1rem;
  }
}