/* ==========================================================================
   قالب «حیاط قاجاری» — خانه تاریخی یزدان‌پناه
   --------------------------------------------------------------------------
   الهام از عکس حیاط: دیوارهای گچی کرم، آجر، درهای گردویی، حوض فیروزه‌ای
   و خط نستعلیق لوگو. این فایل فقط روی assets/css/style.css «اضافه» می‌شود؛
   برای برگشتن به ظاهر قبلی کافی است در پنل قالب «کلاسیک» را انتخاب کنید.
   ========================================================================== */

@font-face {
  font-family: "YP Nastaliq";
  src: url("../_shared/fonts/nastaliq-700.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* رنگ‌های اصلی سایت (همان متغیرهای style.css) */
  --main-strong: #7a3f1f;          /* گردویی درها */
  --main-tint: #ecdcc8;
  --main-high-tint: #f6ede1;
  --secondary-strong: #16807f;     /* فیروزه‌ای حوض */
  --secondary-tint: #dcefec;

  --gray0: #2a1b12;
  --gray1: #48342a;
  --gray2: #7c6857;
  --gray3: #a8957f;
  --gray4: #e4d5bd;                /* خط‌ها: رنگ آجر روشن */
  --gray5: #f2e9da;
  --gray6: #f7f0e3;

  /* مخصوص این قالب */
  --yp-paper: #fbf6ec;             /* سطح کارت‌ها */
  --yp-page: #f7f0e3;              /* زمینه‌ی صفحه (گچ) */
  --yp-gold: #c9964a;
  --yp-brick: #b77b4b;
  --yp-ink: #2a1b12;
  --yp-title-font: "YP Nastaliq", shabnam, serif;
  --header-bg-rgb: 251, 246, 236;  /* رنگ هدر وقتی اسکرول می‌شود */

  --radius-md: 14px;
  --radius-lg: 18px;
}

/* ---------- زمینه: گچ کرم با نقش گره‌چینی بسیار محو ---------- */
body {
  background-color: var(--yp-page);
  background-image: url("img/pattern.svg");
  background-size: 72px 72px;
  color: var(--gray1);
}

/* ---------- تیترها: نستعلیق + نقش شمسه به جای خط ساده ---------- */
.section-title {
  font-family: var(--yp-title-font);
  font-weight: 700;
  color: var(--main-strong);
  line-height: 2;
  font-size: 2.6rem;
  margin-bottom: 2.6rem;
  padding-bottom: 6px;
}
.section-title::after {
  width: 200px;
  height: 24px;
  bottom: -18px;
  border-radius: 0;
  background: url("img/ornament.svg") center / contain no-repeat;
}
@media (max-width: 768px) {
  .section-title { font-size: 2rem; }
}
@media (max-width: 576px) {
  .section-title { font-size: 26px; margin-bottom: 2.2rem; }
  .section-title::after { width: 170px; height: 20px; bottom: -14px; }
}

/* ---------- هدر ---------- */
.header.scrolled::after,
.header[data-home="0"]::after {
  content: "";
  position: absolute;
  inset: auto 0 -6px 0;
  height: 6px;
  background: url("img/band.svg") repeat-x center / auto 6px;
  opacity: .9;
}
.header.scrolled .back-btn,
.header.scrolled .hamb-icon,
.header.scrolled .cart-icon,
.header.scrolled .login-icon,
.header.scrolled .nav-link {
  color: var(--main-strong);
}
.cart-badge {
  background: var(--secondary-strong);
  border-color: var(--yp-paper);
}
.nav-link::before { background: var(--yp-gold); }

/* ---------- اسلایدر بزرگ صفحه‌ی اول ---------- */
#fullscreen-slider img {
  filter: brightness(.62) sepia(.18) saturate(1.1);
}
#fullscreen-slider .swiper-slide::after {
  /* لبه‌ی پایین کنگره‌دار، مثل لبه‌ی باغچه‌های حیاط */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 18px;
  background:
    radial-gradient(circle at 12px 0, transparent 11px, var(--yp-page) 12px) repeat-x 0 0 / 24px 18px;
  z-index: 11;
}
#fullscreen-slider .slide-text h1 {
  font-family: var(--yp-title-font);
  line-height: 2;
  letter-spacing: 0;
  background: none;
  -webkit-text-fill-color: #fff6e3;
  color: #fff6e3;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.swiper-pagination-bullet-active { background: var(--yp-gold) !important; }

/* ---------- درباره‌ی رستوران ---------- */
.about-description { color: var(--gray1); }

.feature-item {
  position: relative;
  background: var(--yp-paper);
  border: 1px solid var(--gray4);
  /* قاب طاق‌دار، مثل درها و پنجره‌های حیاط */
  border-radius: 999px 999px var(--radius-md) var(--radius-md) / 120px 120px var(--radius-md) var(--radius-md);
  padding-top: 2.4rem;
  box-shadow: 0 10px 24px -14px rgba(90, 50, 20, .35);
}
.feature-item::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid color-mix(in srgb, var(--yp-gold) 55%, transparent);
  border-radius: inherit;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .feature-item:hover { box-shadow: 0 16px 30px -14px rgba(90, 50, 20, .45); }
}
.feature-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  background: var(--secondary-strong);
  color: #fff8ea;
  clip-path: polygon(50% 0%, 64.6% 14.6%, 85.4% 14.6%, 85.4% 35.4%, 100% 50%, 85.4% 64.6%, 85.4% 85.4%, 64.6% 85.4%, 50% 100%, 35.4% 85.4%, 14.6% 85.4%, 14.6% 64.6%, 0% 50%, 14.6% 35.4%, 14.6% 14.6%, 35.4% 14.6%);
}
.feature-icon i { font-size: 1.6rem !important; }
.feature-item h3 { color: var(--main-strong); }
@media (max-width: 768px) {
  .feature-item { padding-top: 1.8rem; }
  .feature-icon { width: 52px; height: 52px; }
  .feature-icon i { font-size: 1.3rem !important; }
}

/* ---------- دسته‌بندی‌های منو در صفحه‌ی اول: قاب طاقی ---------- */
.food-categories-container {
  background: color-mix(in srgb, var(--yp-paper) 80%, transparent);
  border: 1px solid var(--gray4);
}
.food-category-card {
  background: var(--yp-paper);
  border: 2px solid var(--gray4);
  border-radius: 999px 999px 12px 12px / 90px 90px 12px 12px;
  box-shadow: 0 8px 18px -12px rgba(90, 50, 20, .45);
}
.food-category-card img { border-radius: inherit; mix-blend-mode: multiply; }
.food-category-name {
  background: linear-gradient(to top, rgba(74, 34, 14, .92), rgba(74, 34, 14, .55) 70%, transparent);
  color: #fff3dc;
  padding: 8px 0 6px;
}

/* ---------- اتاق‌ها ---------- */
.room-slider .slider-card,
.slider-card {
  background: var(--yp-paper);
  border-color: var(--gray4);
}

/* ---------- صفحه‌ی منو: دکمه‌های دسته‌بندی ---------- */
.category-filter { border-bottom-color: var(--gray4); }
.category-btn {
  background: var(--yp-paper);
  color: var(--gray1);
  border-color: var(--gray4);
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .category-btn:hover {
    background: var(--main-high-tint);
    color: var(--main-strong);
    border-color: var(--main-strong);
    box-shadow: none;
  }
}
.category-btn.active {
  background: var(--main-strong);
  border-color: var(--main-strong);
  color: #fff6e6;
  box-shadow: inset 0 0 0 2px var(--yp-paper), 0 6px 14px -8px rgba(90, 50, 20, .7);
}

/* ---------- کارت غذا ---------- */
.product-card {
  background: var(--yp-paper);
  border-color: var(--gray4);
  box-shadow: 0 8px 18px -14px rgba(90, 50, 20, .45);
}
.product-card::before {
  /* نوار کاشی بالای کارت، همیشه پیدا */
  height: 5px;
  opacity: 1;
  z-index: 2;
  background: url("img/band.svg") repeat-x center / auto 5px;
}
@media (hover: hover) and (pointer: fine) {
  .product-card:hover { border-color: var(--yp-gold); }
}
.card-body h3 { color: var(--yp-ink); }
.price, .price--final { color: var(--main-strong); }
.price-old { color: var(--gray3); }
.category-badge { background: var(--secondary-tint); color: var(--secondary-strong); }
.add-to-cart {
  background: transparent;
  border-color: var(--main-strong);
  color: var(--main-strong);
}
@media (hover: hover) and (pointer: fine) {
  .add-to-cart:hover { background: var(--main-strong); color: #fff6e6; }
}
.qty-row, .qty-val { background: var(--yp-paper); }
.qty-btn { background: var(--main-tint); color: var(--main-strong); }
.qty-btn--plus { background: var(--main-strong); color: #fff6e6; }
.product-desc--more:not(.is-expanded)::after {
  background: linear-gradient(to left, transparent, var(--yp-paper) 14px);
}

/* ---------- کارت‌های صفحه‌های داخلی (سبد، ورود، پروفایل، تاریخچه، پرداخت) ---------- */
.cart-card, .cart-item, .cart-item__thumb, .cart-btn--ghost,
.ship-profile .sp-card,
.payed_card, .payed_item-img, .payed_circle, .payed_progress,
.login_container, .login_card, .login_kv, .login_timerRow,
.history-order-card, .history-items, .history-summary-card, .history-head-status,
.history-empty, .au-card, .au-item, .loged-card {
  background-color: var(--yp-paper);
}
.cart-card, .ship-profile .sp-card, .payed_card, .login_container,
.history-order-card, .history-empty {
  border: 1px solid var(--gray4);
  box-shadow: 0 10px 24px -16px rgba(90, 50, 20, .45);
  position: relative;
}
.history-order-card::before,
.cart-card::before,
.payed_card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: url("img/band.svg") repeat-x center / auto 5px;
}
.login_input, .otp_box, .loged-control,
.ship-profile .sp-input, .ship-profile .sp-textarea {
  background: #fffdf8;
  border-color: var(--gray4);
}
.login_input:focus, .otp_box:focus, .loged-control:focus,
.ship-profile .sp-input:focus, .ship-profile .sp-textarea:focus {
  border-color: var(--secondary-strong);
}

/* ---------- منوی کناری موبایل: سر منو با عکس حیاط ---------- */
.side-menu__panel {
  background: var(--yp-page) url("img/pattern.svg");
  background-size: 72px 72px;
}
.side-menu__top {
  position: relative;
  min-height: 120px;
  align-items: flex-end;
  padding: 14px;
  border-bottom: none;
  background:
    linear-gradient(to top, rgba(42, 22, 10, .88), rgba(42, 22, 10, .25)),
    url("../_shared/img/courtyard.jpg") center 40% / cover;
}
.side-menu__top::after {
  content: "";
  position: absolute;
  inset: auto 0 -6px 0;
  height: 6px;
  background: url("img/band.svg") repeat-x center / auto 6px;
}
.side-menu__logo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  padding: 4px;
  background: #fff8ea;
  box-shadow: 0 0 0 2px var(--yp-gold);
}
.side-menu__title {
  font-family: var(--yp-title-font);
  font-size: 1.15rem;
  line-height: 2.1;
  color: #fff3dc;
}
.side-menu__subtitle { color: #ead8b8; }
.side-menu__close { background: rgba(255, 248, 234, .9); }
.side-menu__content { padding-top: 16px; }
.side-menu__link { background: var(--yp-paper); border: 1px solid var(--gray4); }
.side-menu__link i:first-child {
  background: var(--secondary-strong);
  color: #fff8ea;
  border-radius: 0;
  clip-path: polygon(50% 0%, 64.6% 14.6%, 85.4% 14.6%, 85.4% 35.4%, 100% 50%, 85.4% 64.6%, 85.4% 85.4%, 64.6% 85.4%, 50% 100%, 35.4% 85.4%, 14.6% 85.4%, 14.6% 64.6%, 0% 50%, 14.6% 35.4%, 14.6% 14.6%, 35.4% 14.6%);
}
.side-menu__actions { border-top-color: var(--gray4); }
.side-menu__btn { background: var(--yp-paper); }
.side-menu__btn.primary { background: var(--main-strong); border-color: var(--main-strong); color: #fff6e6; }

/* ---------- فوتر: عکس حیاط با سایه‌ی گردویی ---------- */
.footer {
  position: relative;
  color: #f3e6cf;
  background:
    linear-gradient(to bottom, rgba(42, 22, 10, .84), rgba(30, 16, 8, .95)),
    url("../_shared/img/courtyard.jpg") center / cover;
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 8px;
  background: url("img/band.svg") repeat-x center / auto 8px;
}
.footer-title {
  font-family: var(--yp-title-font);
  font-size: 1.5rem;
  line-height: 2;
  color: #e9c98a;
}
.footer-description,
.footer-links a,
.footer-contact, .footer-hours,
.footer-contact li a, .footer-hours li { color: #e3d3b8; }
.footer-contact li i, .footer-hours li i { color: var(--yp-gold); }
.footer-bottom { border-top-color: rgba(233, 201, 138, .2); color: #bfa983; }
@media (hover: hover) and (pointer: fine) {
  .footer-links a:hover, .footer-contact li a:hover { color: #6fd3cf; }
}
@media (max-width: 768px) {
  .footer-title { font-size: 1.05rem; }
}

/* ---------- پاپ‌آپ‌ها ---------- */
.modal-container, .bottom-modal-container {
  background-color: var(--yp-paper) !important;
}