/*
 * Daryani — base.css
 * ریست، تایپوگرافی پایه، چیدمان کلی، انیمیشن‌ها، اسکرول
 */

/* ── ریست ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-family);
  font-size: var(--font-base);
  color: var(--color-on-surface);
  background: var(--app-bg);
  line-height: 1.6;
  direction: rtl;
  text-align: start;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-primary); }
button { font-family: var(--font-family); cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: var(--font-family); }
img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
::selection { background: var(--color-primary-glow); }
:focus-visible { outline: 2.5px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); }

/* ── اسکرول‌بار ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-surface-2); }
::-webkit-scrollbar-thumb { background: var(--color-surface-4); border-radius: 99px; border: 2px solid var(--color-surface-2); }
::-webkit-scrollbar-thumb:hover { background: var(--color-on-surface-3); }

/* ── دسترسی‌پذیری ── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -100%; inset-inline-start: 0; z-index: 9999; background: var(--color-primary); color: #fff; padding: 8px 16px; border-end-start-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm); }
.skip-link:focus { top: 0; }

/* ── کانتینر ── */
.daryani-container { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; }
.daryani-container--narrow { max-width: var(--content-max-w); }

/* ── انیمیشن‌ها ── */
@keyframes fadeIn     { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp    { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } }
@keyframes slideDown  { from { opacity: 0; transform: translateY(-14px) } to { opacity: 1; transform: translateY(0) } }
@keyframes scaleIn    { from { opacity: 0; transform: scale(0.88) } to { opacity: 1; transform: scale(1) } }
@keyframes shimmer    { 0% { background-position: -400% 0 } 100% { background-position: 400% 0 } }
@keyframes spin       { to { transform: rotate(360deg) } }
@keyframes float      { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
@keyframes bounceIn   { 0% { transform: scale(.3); opacity: 0 } 50% { transform: scale(1.1) } 80% { transform: scale(.95) } 100% { transform: scale(1); opacity: 1 } }
@keyframes cartBump   { 0%,100% { transform: scale(1) } 40% { transform: scale(1.28) } }

.animate-fade-in   { animation: fadeIn    var(--dur-base)  var(--ease-out)    both; }
.animate-slide-up  { animation: slideUp   var(--dur-slow)  var(--ease-out)    both; }
.animate-scale-in  { animation: scaleIn   var(--dur-base)  var(--ease-spring) both; }
.animate-bounce-in { animation: bounceIn  .6s              var(--ease-spring) both; }

/* استاگر */
.stagger > * { animation: slideUp var(--dur-slow) var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: .04s }
.stagger > *:nth-child(2) { animation-delay: .08s }
.stagger > *:nth-child(3) { animation-delay: .12s }
.stagger > *:nth-child(4) { animation-delay: .16s }
.stagger > *:nth-child(5) { animation-delay: .20s }
.stagger > *:nth-child(6) { animation-delay: .24s }
.stagger > *:nth-child(7) { animation-delay: .28s }
.stagger > *:nth-child(8) { animation-delay: .32s }

/* اسکلتون */
.skeleton {
  background: linear-gradient(90deg, var(--color-surface-3) 25%, var(--color-surface-4) 37%, var(--color-surface-3) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-md);
}

/* تپ‌اسکیل */
.tap-scale { transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); -webkit-tap-highlight-color: transparent; user-select: none; }
.tap-scale:active { transform: scale(0.95); opacity: .88; }

/* اسکرول افقی */
.scroll-x { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-x > * { flex-shrink: 0; scroll-snap-align: start; }

/* دیوایدر */
.divider { height: 1px; background: var(--color-border); margin: 16px 0; }
.divider--thick { height: 8px; background: var(--color-surface-2); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin: 16px -20px; }

/* تایپوگرافی */
h1, h2, h3, h4, h5, h6 { font-weight: 800; line-height: 1.3; color: var(--color-on-surface); text-wrap: balance; }
h1 { font-size: var(--font-3xl); }
h2 { font-size: var(--font-2xl); }
h3 { font-size: var(--font-xl); }
h4 { font-size: var(--font-lg); }
p  { color: var(--color-on-surface-2); text-wrap: pretty; }

/* لینک‌ها */
.link-primary { color: var(--color-primary); font-weight: 600; }
.link-primary:hover { color: var(--color-primary-2); text-decoration: underline; }

/* Woocommerce overrides: reset */
.woocommerce *,
.woocommerce-page * { box-sizing: border-box; }