/*
 * Gozar UI: the design foundation of the redesigned storefront.
 *
 * Tokens are CSS variables (--gz-*) and every component is a gz- class, so this file changes nothing on pages that do
 * not use them (old storefront pages, the panels). New parts are built only from these tokens and components, so they
 * stay consistent. The kit page (/ui-kit, admins only) shows all of them. Behaviour: assets/js/gozar-ui.js.
 */

:root {
    /* brand: Gozar purple */
    --gz-brand-50: #F7F1FD;
    --gz-brand-100: #EFE3FB;
    --gz-brand-200: #DDC4F5;
    --gz-brand-300: #C49BEC;
    --gz-brand-400: #AA6DE2;
    --gz-brand-500: #9339D9;
    --gz-brand-600: #7B2DBA;
    --gz-brand-700: #642596;
    --gz-brand-800: #4A1D6E;
    --gz-brand-900: #3D264E;
    --gz-brand-950: #281933;

    /* second accent: turquoise */
    --gz-accent-50: #E8FAFC;
    --gz-accent-100: #C9F3F7;
    --gz-accent-500: #36D1DE;
    --gz-accent-700: #0E7490;

    /* ink and surfaces */
    --gz-ink: #241D29;
    --gz-ink-2: #4A4250;
    --gz-ink-3: #6E6575;
    --gz-ink-4: #9A92A0;
    --gz-surface: #FFFFFF;
    --gz-surface-2: #F8F6FA;
    --gz-surface-3: #F1EEF4;
    --gz-border: #ECE7F0;
    --gz-border-strong: #DCD4E3;
    --gz-overlay: rgba(28, 18, 36, .45);

    /* states */
    --gz-success: #16A34A;
    --gz-success-50: #EAF8EF;
    --gz-danger: #E11D48;
    --gz-danger-50: #FDECF0;
    --gz-warning: #D97706;
    --gz-warning-50: #FEF5E7;
    --gz-info: #1D60C5;
    --gz-info-50: #EBF2FD;
    --gz-star: #F5A524;

    /* type (the storefront's font) */
    --gz-font: IRANSansXFaNum, IRANSansX, Tahoma, sans-serif;
    --gz-text-xs: 11.5px;
    --gz-text-sm: 13px;
    --gz-text-md: 14px;
    --gz-text-lg: 16px;
    --gz-text-xl: 19px;
    --gz-text-2xl: 23px;
    --gz-text-3xl: 30px;

    /* spacing */
    --gz-space-1: 4px;
    --gz-space-2: 8px;
    --gz-space-3: 12px;
    --gz-space-4: 16px;
    --gz-space-5: 20px;
    --gz-space-6: 24px;
    --gz-space-8: 32px;
    --gz-space-10: 40px;

    /* shape and depth */
    --gz-radius-xs: 5px;
    --gz-radius-sm: 8px;
    --gz-radius-md: 10px;
    --gz-radius-lg: 13px;
    --gz-radius-xl: 18px;
    --gz-radius-pill: 999px;
    --gz-shadow-sm: 0 1px 2px rgba(36, 29, 41, .06);
    --gz-shadow-md: 0 6px 18px rgba(36, 29, 41, .08);
    --gz-shadow-lg: 0 14px 40px rgba(36, 29, 41, .14);
    --gz-ring: 0 0 0 3px rgba(147, 57, 217, .22);

    /* layout and motion */
    --gz-container: 1280px;
    --gz-gutter: 16px;
    --gz-header-h: 64px;
    --gz-appbar-h: 56px;
    --gz-tabbar-h: 64px;
    --gz-ease: cubic-bezier(.2, .7, .2, 1);
    --gz-fast: .15s;
    --gz-normal: .25s;
    --gz-safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 992px) {
    :root { --gz-gutter: 24px; }
}

/* ---------- layout ---------- */
.gz-container { box-sizing: border-box; width: 100%; max-width: var(--gz-container); margin-inline: auto; padding-inline: var(--gz-gutter); }
.gz-stack { display: flex; flex-direction: column; gap: var(--gz-space-4); }
.gz-row { display: flex; align-items: center; gap: var(--gz-space-3); }
.gz-divider { height: 1px; border: 0; margin: 0; background: var(--gz-border); }
.gz-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons ---------- */
.gz-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--gz-space-2);
    box-sizing: border-box; min-height: 44px; padding: 0 var(--gz-space-5);
    border: 1px solid transparent; border-radius: var(--gz-radius-md);
    font-family: var(--gz-font); font-size: var(--gz-text-md); font-weight: 700; line-height: 1;
    text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
    transition: background-color var(--gz-fast), border-color var(--gz-fast), color var(--gz-fast), box-shadow var(--gz-fast), transform var(--gz-fast);
}
.gz-btn:focus-visible { outline: 0; box-shadow: var(--gz-ring); }
.gz-btn:active { transform: scale(.98); }
.gz-btn[disabled], .gz-btn.is-disabled { opacity: .5; pointer-events: none; }
.gz-btn svg, .gz-btn i { flex-shrink: 0; font-size: 1.15em; }
.gz-btn--primary { background: var(--gz-brand-500); color: #fff !important; }
.gz-btn--primary:hover { background: var(--gz-brand-600); }
.gz-btn--dark { background: var(--gz-brand-900); color: #fff !important; }
.gz-btn--dark:hover { background: var(--gz-brand-950); }
.gz-btn--soft { background: var(--gz-brand-50); color: var(--gz-brand-600) !important; }
.gz-btn--soft:hover { background: var(--gz-brand-100); }
.gz-btn--outline { background: var(--gz-surface); border-color: var(--gz-border-strong); color: var(--gz-ink) !important; }
.gz-btn--outline:hover { border-color: var(--gz-brand-300); color: var(--gz-brand-600) !important; }
.gz-btn--ghost { background: transparent; color: var(--gz-ink-2) !important; }
.gz-btn--ghost:hover { background: var(--gz-surface-3); color: var(--gz-ink) !important; }
.gz-btn--accent { background: var(--gz-accent-500); color: #12232A !important; }
.gz-btn--sm { min-height: 36px; padding: 0 var(--gz-space-3); font-size: var(--gz-text-sm); border-radius: var(--gz-radius-sm); }
.gz-btn--lg { min-height: 52px; padding: 0 var(--gz-space-6); font-size: var(--gz-text-lg); border-radius: var(--gz-radius-lg); }
.gz-btn--pill { border-radius: var(--gz-radius-pill); }
.gz-btn--block { display: flex; width: 100%; }

/* Gozar's own outline icons (front.inc.gz_icons), sized by font-size */
.gzi { display: inline-block; flex-shrink: 0; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.gzi .f { fill: transparent; transition: fill var(--gz-fast); }

/* icon-only button (header actions, app bar) */
.gz-icon-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    box-sizing: border-box; width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: var(--gz-radius-md); background: transparent; color: var(--gz-ink-2) !important;
    font-size: 22px; cursor: pointer; text-decoration: none; transition: background-color var(--gz-fast), color var(--gz-fast);
}
.gz-icon-btn:hover { background: var(--gz-surface-3); color: var(--gz-ink) !important; }
.gz-icon-btn:focus-visible { outline: 0; box-shadow: var(--gz-ring); }
.gz-icon-btn--boxed { background: var(--gz-surface-2); border: 1px solid var(--gz-border); }

/* the small count on an icon (cart) */
.gz-count {
    position: absolute; top: 4px; inset-inline-start: 4px; display: inline-flex; align-items: center; justify-content: center;
    box-sizing: border-box; min-width: 18px; height: 18px; padding: 0 5px; border: 2px solid var(--gz-surface); border-radius: var(--gz-radius-pill);
    background: var(--gz-brand-500); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1;
}

/* ---------- form fields ---------- */
.gz-field { display: flex; flex-direction: column; gap: var(--gz-space-1); }
.gz-label { font-size: var(--gz-text-sm); font-weight: 600; color: var(--gz-ink-2); }
.gz-input {
    box-sizing: border-box; width: 100%; min-height: 46px; padding: 0 var(--gz-space-4);
    border: 1px solid var(--gz-border-strong); border-radius: var(--gz-radius-md); background: var(--gz-surface);
    font-family: var(--gz-font); font-size: var(--gz-text-md); color: var(--gz-ink);
    transition: border-color var(--gz-fast), box-shadow var(--gz-fast);
}
.gz-input::placeholder { color: var(--gz-ink-4); }
.gz-input:focus { outline: 0; border-color: var(--gz-brand-400); box-shadow: var(--gz-ring); }
.gz-hint { font-size: var(--gz-text-xs); color: var(--gz-ink-3); }

/* search box: icon, input, rotating placeholder (gozar-ui.js) and an action at the end */
.gz-search {
    position: relative; display: flex; align-items: center; gap: var(--gz-space-2);
    box-sizing: border-box; min-height: 48px; padding: 0 var(--gz-space-3) 0 var(--gz-space-2);
    border: 1px solid var(--gz-border); border-radius: var(--gz-radius-lg); background: var(--gz-surface-2);
    transition: border-color var(--gz-fast), box-shadow var(--gz-fast), background-color var(--gz-fast);
}
.gz-search:focus-within { border-color: var(--gz-brand-300); background: var(--gz-surface); box-shadow: var(--gz-ring); }
.gz-search__icon { display: inline-flex; flex-shrink: 0; color: var(--gz-brand-500); font-size: 20px; padding-inline-start: var(--gz-space-2); }
.gz-search__input {
    flex: 1; min-width: 0; height: 46px; padding: 0; border: 0; background: transparent;
    font-family: var(--gz-font); font-size: var(--gz-text-md); color: var(--gz-ink); outline: 0;
}
.gz-search__input::-webkit-search-cancel-button { display: none; }
.gz-search__rotator { position: absolute; inset-inline-start: 44px; inset-inline-end: 52px; top: 0; bottom: 0; overflow: hidden; pointer-events: none; color: var(--gz-ink-4); font-size: var(--gz-text-md); }
.gz-search__rotator span { position: absolute; inset-inline: 0; top: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: translateY(-50%); transition: transform .45s var(--gz-ease), opacity .45s; }
.gz-search__rotator span.is-out { opacity: 0; transform: translateY(-160%); }
.gz-search__rotator span.is-in { opacity: 0; transform: translateY(60%); }
.gz-search.is-filled .gz-search__rotator, .gz-search:focus-within .gz-search__rotator { display: none; }
.gz-search__action { flex-shrink: 0; width: 36px; height: 36px; font-size: 19px; }

/* ---------- badges, chips ---------- */
.gz-badge {
    display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box; height: 24px; padding: 0 var(--gz-space-2);
    border-radius: var(--gz-radius-pill); font-size: var(--gz-text-xs); font-weight: 700; line-height: 1; white-space: nowrap;
    background: var(--gz-surface-3); color: var(--gz-ink-2);
}
.gz-badge--brand { background: var(--gz-brand-50); color: var(--gz-brand-600); }
.gz-badge--danger { background: var(--gz-danger); color: #fff; }
.gz-badge--danger-soft { background: var(--gz-danger-50); color: var(--gz-danger); }
.gz-badge--success { background: var(--gz-success-50); color: var(--gz-success); }
.gz-badge--info { background: var(--gz-info-50); color: var(--gz-info); }
.gz-badge--warning { background: var(--gz-warning-50); color: var(--gz-warning); }
.gz-badge--accent { background: var(--gz-accent-50); color: var(--gz-accent-700); }

.gz-chip {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; box-sizing: border-box; height: 36px; padding: 0 var(--gz-space-4);
    border: 1px solid var(--gz-border); border-radius: var(--gz-radius-pill); background: var(--gz-surface);
    font-family: var(--gz-font); font-size: var(--gz-text-sm); font-weight: 600; color: var(--gz-ink-2) !important;
    text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color var(--gz-fast), background-color var(--gz-fast), color var(--gz-fast);
}
.gz-chip:hover { border-color: var(--gz-brand-200); color: var(--gz-brand-600) !important; }
.gz-chip.is-active { border-color: var(--gz-brand-900); background: var(--gz-brand-900); color: #fff !important; }
.gz-chips { display: flex; gap: var(--gz-space-2); overflow-x: auto; scrollbar-width: none; }
.gz-chips::-webkit-scrollbar { display: none; }

/* ---------- cards ---------- */
.gz-card { box-sizing: border-box; border: 1px solid var(--gz-border); border-radius: var(--gz-radius-lg); background: var(--gz-surface); }
.gz-card--pad { padding: var(--gz-space-4); }
.gz-card--hover { transition: box-shadow var(--gz-normal), border-color var(--gz-normal), transform var(--gz-normal); }
.gz-card--hover:hover { border-color: var(--gz-border-strong); box-shadow: var(--gz-shadow-md); }
.gz-tile { display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--gz-radius-md); background: var(--gz-surface-3); }
.gz-tile img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- section heading ---------- */
.gz-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--gz-space-3); margin-bottom: var(--gz-space-4); }
.gz-section-head__title { display: flex; align-items: center; gap: var(--gz-space-2); margin: 0; font-size: var(--gz-text-xl); font-weight: 800; color: var(--gz-ink); line-height: 1.5; }
.gz-section-head__sub { display: block; margin-top: 2px; font-size: var(--gz-text-sm); font-weight: 500; color: var(--gz-ink-3); }
.gz-section-head__more { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: var(--gz-text-sm); font-weight: 700; color: var(--gz-brand-500) !important; text-decoration: none; }
@media (min-width: 992px) {
    .gz-section-head__title { font-size: var(--gz-text-2xl); }
}

/* ---------- price, rating ---------- */
.gz-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1.3; }
.gz-price__row { display: flex; align-items: center; gap: var(--gz-space-2); }
.gz-price__old { font-size: var(--gz-text-xs); color: var(--gz-ink-4); text-decoration: line-through; }
.gz-price__now { font-size: var(--gz-text-lg); font-weight: 900; color: var(--gz-ink); }
.gz-price__unit { margin-inline-start: 3px; font-size: var(--gz-text-xs); font-weight: 500; color: var(--gz-ink-3); }
.gz-off { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--gz-radius-pill); background: var(--gz-danger); color: #fff; font-size: 11px; font-weight: 800; }
.gz-rating { display: inline-flex; align-items: center; gap: 4px; font-size: var(--gz-text-sm); font-weight: 700; color: var(--gz-ink); }
.gz-rating svg, .gz-rating i { color: var(--gz-star); }
.gz-rating small { font-weight: 500; color: var(--gz-ink-3); }

/* ---------- avatar ---------- */
.gz-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; width: 48px; height: 48px; border: 1px solid var(--gz-border); border-radius: var(--gz-radius-md); background: var(--gz-surface); }
.gz-avatar img { width: 100%; height: 100%; object-fit: contain; }
.gz-avatar--round { border-radius: 50%; }
.gz-avatar--lg { width: 72px; height: 72px; border-radius: var(--gz-radius-lg); }

/* ---------- skeleton ---------- */
.gz-skeleton { border-radius: var(--gz-radius-sm); background: linear-gradient(90deg, var(--gz-surface-3) 25%, var(--gz-surface-2) 50%, var(--gz-surface-3) 75%); background-size: 200% 100%; animation: gz-shimmer 1.2s linear infinite; }
@keyframes gz-shimmer { to { background-position: -200% 0; } }

/* ---------- app-like mobile ---------- */

/* top bar of an inner page: back, title, actions */
.gz-appbar {
    position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: var(--gz-space-1);
    box-sizing: border-box; height: var(--gz-appbar-h); padding: 0 var(--gz-space-2);
    border-bottom: 1px solid var(--gz-border); background: rgba(255, 255, 255, .96); backdrop-filter: saturate(180%) blur(10px);
}
.gz-appbar__title { flex: 1; min-width: 0; overflow: hidden; margin: 0; font-size: var(--gz-text-lg); font-weight: 800; color: var(--gz-ink); text-align: center; white-space: nowrap; text-overflow: ellipsis; }

/* bottom tab bar */
.gz-tabbar {
    position: fixed; z-index: 1030; inset-inline: 0; bottom: 0; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column;
    box-sizing: content-box; height: var(--gz-tabbar-h); padding-bottom: var(--gz-safe-bottom);
    border-top: 1px solid var(--gz-border); background: rgba(255, 255, 255, .97); backdrop-filter: saturate(180%) blur(10px);
}
.gz-tabbar__item {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--gz-ink-3) !important; font-size: 11px; font-weight: 600; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.gz-tabbar__item svg, .gz-tabbar__item i { font-size: 24px; }
.gz-tabbar__item.is-active { color: var(--gz-brand-900) !important; font-weight: 800; }
.gz-tabbar__item .gz-count { top: 6px; inset-inline-start: calc(50% - 22px); }

/* sticky action bar at the bottom (product page: price + add to cart) */
.gz-actionbar {
    position: fixed; z-index: 1031; inset-inline: 0; bottom: 0; display: flex; align-items: center; gap: var(--gz-space-3);
    box-sizing: border-box; padding: var(--gz-space-3) var(--gz-space-4) calc(var(--gz-space-3) + var(--gz-safe-bottom));
    border-top: 1px solid var(--gz-border); background: var(--gz-surface); box-shadow: 0 -8px 24px rgba(36, 29, 41, .06);
}
.gz-actionbar .gz-btn { flex: 1; }

/* bottom sheet */
.gz-sheet-backdrop { position: fixed; z-index: 1040; inset: 0; background: var(--gz-overlay); opacity: 0; transition: opacity var(--gz-normal); }
.gz-sheet {
    position: fixed; z-index: 1041; inset-inline: 0; bottom: 0; box-sizing: border-box; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--gz-space-2) var(--gz-space-4) calc(var(--gz-space-6) + var(--gz-safe-bottom));
    border-radius: var(--gz-radius-xl) var(--gz-radius-xl) 0 0; background: var(--gz-surface); transform: translateY(100%); transition: transform var(--gz-normal) var(--gz-ease);
}
.gz-sheet::before { content: ''; display: block; width: 40px; height: 4px; margin: 0 auto var(--gz-space-3); border-radius: 2px; background: var(--gz-border-strong); }
.gz-sheet.is-open { transform: none; }
.gz-sheet-backdrop.is-open { opacity: 1; }

/* horizontal scroller (product rows on phones) */
.gz-scroller { display: flex; gap: var(--gz-space-3); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(var(--gz-gutter) * -1); padding-inline: var(--gz-gutter); }
.gz-scroller::-webkit-scrollbar { display: none; }
.gz-scroller > * { scroll-snap-align: start; }

@media (prefers-reduced-motion: reduce) {
    .gz-btn, .gz-chip, .gz-card--hover, .gz-sheet, .gz-sheet-backdrop, .gz-search__rotator span { transition: none; }
    .gz-skeleton { animation: none; }
}