/* Fresh Market — page-specific styles */

/* ---------- Hero ---------- */
.hero { position: relative; border-radius: var(--r-lg); overflow: hidden; margin: var(--s3) 0; }
.hero-slides { display: flex; transition: transform var(--dur-base) var(--ease-out); }
.hero-slide { flex: 0 0 100%; display: grid; place-items: center; text-align: center; color: #fff; padding: var(--s6) var(--s4); min-height: 200px; }
.hero { box-shadow: var(--sh-lg); }
.hero-slide h2 { font-size: var(--fs-2xl); margin-bottom: var(--s2); text-shadow: 0 2px 12px rgb(0 0 0 / .18); }
.hero-slide p { opacity: .92; margin-bottom: var(--s4); text-shadow: 0 1px 8px rgb(0 0 0 / .15); }
.hero-cta { background: #fff; color: var(--color-primary-dark); border-radius: var(--r-full); padding: 10px 26px; font-weight: 800; display: inline-block; box-shadow: 0 4px 14px rgb(0 0 0 / .18); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.hero-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgb(0 0 0 / .24); }
.hero-dot { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, #fff 50%, transparent); transition: background-color var(--dur-fast), transform var(--dur-fast); }
.hero-dot[aria-current="true"] { background: #fff; transform: scale(1.25); }
.hero-dots { position: absolute; bottom: 12px; inset-inline: 0; display: flex; justify-content: center; gap: 6px; }
@media (min-width: 768px) { .hero-slide { min-height: 260px; } .hero-slide h2 { font-size: var(--fs-3xl); } }

/* ---------- Category rail ---------- */
.cat-rail-wrap { margin: var(--s5) 0; }

/* ---------- Flash deals ---------- */
.flash-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.flash-head h2 { font-size: var(--fs-lg); color: var(--color-emphasis); }
.flash-timer { display: inline-flex; gap: 4px; font-variant-numeric: tabular-nums; }
.flash-timer span { background: var(--color-emphasis); color: #fff; border-radius: var(--r-sm); padding: 2px 7px; font-size: var(--fs-xs); font-weight: 800; }
[data-theme="dark"] .flash-timer span, [data-theme="dark"] .badge--discount { color: #212121; }
.flash-section { border: 1.5px dashed color-mix(in srgb, var(--color-accent) 45%, transparent); border-radius: var(--r-lg); padding: var(--s3); box-shadow: var(--sh-md); }
.fd-banner { box-shadow: var(--sh-md); }

/* ---------- Free delivery banner ---------- */
.fd-banner {
  display: flex; align-items: center; gap: var(--s3);
  background: linear-gradient(100deg, color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)), color-mix(in srgb, var(--color-accent) 10%, var(--color-surface)));
  border-radius: var(--r-lg); padding: var(--s4); margin: var(--s5) 0;
}
.fd-banner .icon--lg { color: var(--color-primary); }

/* ---------- Product page ---------- */
.pprice-row { display: flex; align-items: center; gap: var(--s3); margin: var(--s3) 0; }
.ppage__gallery { background: var(--color-surface); border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: var(--s4); }
.ppage__gallery .pcard__imgbox { border-radius: var(--r-md); overflow: hidden; }
.gallery-main { width: 100%; aspect-ratio: 1; object-fit: cover; }
.gallery-main--svg { width: 100%; aspect-ratio: 1; height: auto; padding: 20%; }
.brand-link { color: var(--color-primary); font-size: var(--fs-sm); }
.stock-note { font-size: var(--fs-sm); font-weight: 600; margin-top: var(--s2); }
.stock-note--low { color: var(--color-emphasis); }
.stock-note--oos { color: var(--color-text-muted); }
.stock-note--ok { color: var(--color-success); }
.ppage__actions { display: flex; gap: var(--s3); align-items: center; margin-top: var(--s4); }
.ppage__actions .btn { flex: 1; }
.ppage__meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s3); font-size: var(--fs-sm); color: var(--color-text-muted); }
.ppage__meta span { display: inline-flex; gap: 6px; align-items: center; }
.tagrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3); }

/* Tabs */
.tabs { display: flex; gap: var(--s2); border-bottom: 1.5px solid var(--color-border); margin: var(--s5) 0 var(--s3); }
.tabs button { padding: 10px 16px; font-size: var(--fs-sm); font-weight: 700; color: var(--color-text-muted); border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; }
.tabs button[aria-selected="true"] { color: var(--color-primary); border-color: var(--role-primary, var(--color-primary)); }

/* Reviews */
.review { border-bottom: 1px solid var(--color-border-soft); padding: var(--s3) 0; }
.review__head { display: flex; align-items: center; gap: var(--s2); margin-bottom: 4px; }
.review__head b { font-size: var(--fs-sm); }
.review__head time { font-size: var(--fs-xs); color: var(--color-text-muted); margin-inline-start: auto; }
.review p { font-size: var(--fs-sm); color: var(--color-text-muted); }
.review-bar { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-xs); color: var(--color-text-muted); }
.review-bar meter { width: 120px; height: 6px; }

/* ---------- Checkout ---------- */
.steps { display: flex; align-items: center; gap: var(--s2); margin: var(--s4) 0; }
.steps li { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--color-text-muted); }
.steps li i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--color-surface-alt); font-style: normal; font-size: var(--fs-xs); font-weight: 800; }
.steps li.active { color: var(--color-primary); font-weight: 700; }
.steps li.active i { background: var(--color-primary); color: var(--color-on-primary); }
.steps li.done i { background: color-mix(in srgb, var(--color-success) 18%, var(--color-surface)); color: var(--color-success); }
.steps .sep { flex: 1; height: 1.5px; background: var(--color-border); }

.slot { display: flex; align-items: center; justify-content: space-between; padding: var(--s3); border-radius: var(--r-md); box-shadow: inset 0 0 0 1.5px var(--color-border), var(--sh-sm); cursor: pointer; margin-bottom: var(--s2); }
.slot.is-selected { box-shadow: inset 0 0 0 2px var(--color-primary); background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)); }
.pay-methods label { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border-radius: var(--r-md); box-shadow: inset 0 0 0 1.5px var(--color-border), var(--sh-sm); margin-bottom: var(--s2); cursor: pointer; }
.pay-methods input { accent-color: var(--color-primary); }

/* ---------- Cart ---------- */
.cart-item { display: flex; gap: var(--s3); background: var(--color-surface); border-radius: var(--r-md); box-shadow: var(--sh-sm); padding: var(--s3); }
.cart-item img, .cart-item > svg { width: 72px; height: 72px; border-radius: var(--r-sm); background: var(--color-surface-alt); object-fit: cover; flex-shrink: 0; }
.cart-item__mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cart-item__mid b { font-size: var(--fs-sm); }
.cart-item__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: auto; }
.cart-item__del { color: var(--color-text-muted); }
.cart-item__del:hover { color: var(--color-error); }
.cart-item img[data-deleted], .cart-item > svg[data-deleted] { transform: translateX(120vw); opacity: 0; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base); }

/* ---------- Orders ---------- */
.status-badge { padding: 3px 10px; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 700; }
.status-تحویل-شده { background: color-mix(in srgb, var(--color-success) 15%, var(--color-surface)); color: var(--color-success); }
.status-ارسال-شده, .status-در-حال-آمادهسازی { background: color-mix(in srgb, var(--color-accent) 15%, var(--color-surface)); color: var(--color-accent-dark); }

/* ---------- Success screen ---------- */
.success-screen { position: fixed; inset: 0; z-index: 1300; background: var(--color-bg); display: none; place-items: center; text-align: center; padding: var(--s4); }
.success-screen.show { display: grid; }
.success-screen .icon--lg { width: 72px; height: 72px; color: var(--color-success); margin-inline: auto; }
.success-screen h1 { font-size: var(--fs-2xl); margin: var(--s4) 0 var(--s2); }
.success-screen .order-code { color: var(--color-text-muted); }

/* ---------- Auth ---------- */
.auth-card { max-width: 440px; margin: var(--s6) auto; background: var(--color-surface); border-radius: var(--r-lg); box-shadow: var(--sh-md); padding: var(--s5); text-align: center; }
.auth-card .logo { justify-content: center; margin-bottom: var(--s3); }
.auth-card form { text-align: start; margin-top: var(--s4); }
.auth-switch { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--color-text-muted); }
.auth-switch button { color: var(--color-primary); font-weight: 700; }

/* ---------- Product page tabs panel ---------- */
.tab-panel { background: var(--color-surface); border-radius: var(--r-md); box-shadow: var(--sh-sm); padding: var(--s4); }
.spec-table { width: 100%; font-size: var(--fs-sm); border-collapse: collapse; }
.spec-table th { text-align: start; color: var(--color-text-muted); font-weight: 600; padding: 8px 0; width: 130px; }
.spec-table td { padding: 8px 0; }

/* ---------- FBT ---------- */
.fbt { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; background: var(--color-surface); border-radius: var(--r-md); box-shadow: var(--sh-sm); padding: var(--s4); margin-top: var(--s3); }
.fbt img, .fbt svg { width: 64px; height: 64px; border-radius: var(--r-sm); background: var(--color-surface-alt); object-fit: cover; padding: 8px; }
.fbt .plus { color: var(--color-text-muted); }
.fbt__total { display: flex; flex-direction: column; align-items: flex-end; margin-inline-start: auto; gap: 6px; }