@import "variables.css";
@import "components/product-card.css";
@import "components/product-carousel.css";
@import "components/breadcrumb.css";
@import "components/pagination.css";
@import "components/plp.css";
@import "components/pdp.css";
@import "components/alert.css";
@import "components/cart-preview.css";
@import "components/cart-page.css";
@import "components/profile.css";
@import "components/checkout.css";
@import "components/rating.css";
@import "components/review-card.css";
@import "components/ticket.css";
@import "components/navbar-menu.css";
@import "components/file-uploader.css";
@import "components/categories-index.css";
@import "components/jalali-datepicker.css";

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; }

/* Sticky footer: body is a full-height flex column, main grows to fill any
   leftover space on short pages, so the footer always sits at the bottom
   of the viewport instead of floating up under a short page's content. */
html, body { height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-base);
  background: var(--color-background);
  color: var(--color-text-primary);
  line-height: 1.8;
}
/* Doc 02 — page content must never touch the navbar/footer, including
   full-bleed sections like the homepage hero/carousels; a single padding
   rule on <main> covers every page since every page's body renders inside
   it (layouts/base.html.twig). */
body > main { flex: 1 0 auto; padding: 32px 0 48px; }
body > footer { flex-shrink: 0; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: 0.2s;
  font-family: inherit;
}
/* Without this, a disabled .btn (e.g. checkout's submit button when there's
   no address/shipping method yet — see checkout__empty-note) looked
   IDENTICAL to a clickable one: same solid color, same shadow, only the
   browser's own barely-visible default disabled treatment. Clicking it did
   nothing, with no visual sign of why — this makes "disabled" obvious on
   every button everywhere instead of fixing it once per page. */
.btn:disabled, .btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}
.btn-primary { background: var(--color-accent); color: #fff; box-shadow: 0 6px 16px rgba(201, 138, 63, .35); }
.btn-primary:hover { background: #b47a34; }
.btn-outline { background: transparent; border: 1.5px solid var(--color-primary); color: var(--color-primary); }
.btn-ghost { background: var(--color-cream); color: var(--color-primary-dark); }

/* Item 16 of the polish list — a proper button design system. Every
   state-changing action (destructive/cautionary) must be visually distinct
   from a neutral link, so it can never again read as "plain text" (the
   admin order page's "مشاهده رسید"/"مدیریت پرداخت‌ها" links were the
   reported symptom — see templates/admin/orders/show.html.twig). */
.btn-secondary { background: var(--color-secondary); color: #fff; }
.btn-secondary:hover { background: #24382e; }
.btn-danger { background: var(--color-error); color: #fff; box-shadow: 0 6px 16px rgba(179, 67, 43, .3); }
.btn-danger:hover { background: #95331f; }
.btn-warning { background: var(--color-warning); color: #fff; box-shadow: 0 6px 16px rgba(201, 138, 63, .3); }
.btn-warning:hover { background: #a8722f; }
.btn-sm { padding: 8px 16px; font-size: 12px; }

/* Heading vs. paragraph typography — headings must always read as distinct
   from body copy at a glance (darker, heavier, tighter line-height); plain
   paragraphs stay at the body's base color/weight. */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-primary-dark);
  font-weight: 800;
  line-height: 1.35;
  margin: 0 0 14px;
}
p { margin: 0 0 10px; }

.error-page {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 60px 20px;
}
.error-code { font-size: 64px; font-weight: 800; color: var(--color-primary-dark); }
.error-message { color: var(--color-text-secondary); }

@media (max-width: 600px) {
  .container { padding: 0 16px; }
}

/* Navbar */
.navbar { background: #fff; border-bottom: 1px solid var(--color-border); position: relative; z-index: 40; }
.navbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; gap: 20px; }
.navbar-brand { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.logo { font-size: 20px; font-weight: 800; color: var(--color-primary-dark); flex-shrink: 0; }
.navbar-search { flex: 1; max-width: 380px; }
.navbar-search input { width: 100%; background: var(--color-background); border: none; border-radius: 999px; padding: 9px 16px; font-family: inherit; font-size: 13px; }
.navbar-icons { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-family: inherit;
  color: inherit;
  padding: 0;
}
.badge { position: absolute; top: -4px; left: -4px; background: var(--color-error); color: #fff; font-size: 10px; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/* Footer */
.site-footer { background: var(--color-primary-dark); color: #e9dcc9; padding: 34px 0; font-size: 12px; }
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 32px; }
.site-footer a { color: #e9dcc9; }
.site-footer a:hover { color: #fff; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col.footer-links { min-width: 140px; }
.footer-copyright { color: #cbb896; }

@media (max-width: 600px) {
  .footer-inner { flex-direction: column; gap: 20px; }
}

/* Hero */
/* body > main has a 32px top padding (see the rule above) so ordinary page
   content never touches the navbar — but the hero is meant to sit flush
   against the navbar with no gap, so it cancels exactly that with a
   matching negative top margin instead of touching the shared main-padding
   rule (which every other front page still relies on). margin-bottom then
   adds back a real, explicit gap before the carousels below. */
.hero {
  /* The nut photo has a lot of light beige/cream tones, so the old overlay
     (.88 -> .55, fading to nearly see-through on one side) let white text
     land directly on light background in places — bumped both stops up
     and darkened the lighter one so the whole banner stays dark enough for
     white text everywhere, not just near the darker corner. */
  background: linear-gradient(120deg, rgba(40,24,12,.92), rgba(40,24,12,.78)), url('/assets/images/hero-banner.jpg') center / cover no-repeat;
  color: #fff;
  padding: 80px 24px;
  margin-top: -32px;
  margin-bottom: 32px;
}
.hero-content { max-width: 480px; margin: 0 auto; text-align: center; }
/* Belt-and-suspenders on top of the overlay above: a soft dark shadow
   keeps the text readable even over any stray lighter patch of the photo. */
.hero h1 { font-size: 30px; margin-bottom: 14px; text-shadow: 0 2px 10px rgba(0,0,0,.55); color: #fff;}
.hero p { color: #f1e6d2; margin-bottom: 20px; text-shadow: 0 2px 8px rgba(0,0,0,.5); }

@media (max-width: 768px) {
  .navbar-inner { flex-wrap: wrap; padding: 12px 16px; row-gap: 10px; }
  .navbar-menu { order: 3; width: 100%; }
  .navbar-search { order: 4; max-width: none; width: 100%; }
  .navbar-icons { order: 2; }
}