@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../vendor/vazirmatn/Vazirmatn-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../vendor/vazirmatn/Vazirmatn-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --paper: #131518;
    --surface: #1b1e24;
    --surface-2: #23272e;
    --ink: #ece7dd;
    --ink-soft: #a5abb5;
    --line: #2b313a;
    --line-strong: #3c434e;
    --accent: #d05a3c;
    --accent-dark: #b23c22;
    --accent-soft: rgba(208, 90, 60, 0.16);
    --sage: #7fa08c;
    --sage-soft: rgba(127, 160, 140, 0.16);
    --shadow-sm: 0 2px 10px -2px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 18px 44px -18px rgba(0, 0, 0, 0.65);
    --font-body: "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Vazirmatn", -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background: var(--paper);
    color: var(--ink);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
    outline: 3px solid rgba(179, 64, 42, 0.45);
    outline-offset: 2px;
    border-radius: 6px;
}

.container { max-width: 1180px; }

/* ============================================================
   Dark theme overrides (app.css loads after theme.css)
   ============================================================ */

:root {
    --bs-primary-rgb: 208, 90, 60;
    --bs-dark-rgb: 8, 10, 12;
    --bs-body-bg: var(--paper);
    --bs-body-color: var(--ink);
    --bs-dropdown-bg: var(--surface-2);
    --bs-dropdown-color: var(--ink);
    --bs-form-control-bg: var(--surface);
}

.logo-mark {
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 8px;
    flex-shrink: 0;
}

.site-navbar .navbar-brand .logo-mark {
    width: 42px;
    height: 42px;
}

.footer-brand .logo-mark { width: 32px; height: 32px; }

.site-navbar {
    background: rgba(15, 17, 20, 0.82);
    border-bottom-color: var(--line);
}

.search-bar .input-group-text {
    background: var(--surface-2);
    color: var(--ink-soft);
    border-color: var(--line-strong);
}

.form-control, .form-select {
    background-color: var(--surface);
    border-color: var(--line-strong);
    color: var(--ink);
}

.form-control:focus, .form-select:focus {
    background-color: var(--surface);
    color: var(--ink);
}

.dropdown-menu {
    background-color: var(--surface-2);
}

.chip {
    background: var(--surface);
    color: var(--ink);
}

.chip:hover { border-color: var(--ink); }

.chip-active, .chip.chip-active:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.chip-count {
    background: rgba(255, 255, 255, 0.10);
    color: inherit;
}

.chip-active .chip-count { background: rgba(255, 255, 255, 0.20); color: #fff; }

.mag-card {
    background: var(--surface);
}

.mag-card-cover { background: var(--surface-2); }

.mag-price { color: var(--accent); font-weight: 700; }

.alert-error {
    background: rgba(200, 60, 60, 0.12);
    border: 1px solid rgba(200, 60, 60, 0.35);
    color: #b23b3b;
}
.alert-error ul { margin: 0; padding-right: 18px; }

.page-head {
    background: var(--paper);
}

.pagination {
    --bs-pagination-bg: var(--surface);
    --bs-pagination-border-color: var(--line);
    --bs-pagination-hover-bg: var(--accent-soft);
    --bs-pagination-active-bg: var(--accent);
}

.pagination .page-item:not(.active) .page-link { background-color: var(--surface); color: var(--ink); }
.pagination .page-item:not(.active) .page-link:hover { background-color: var(--accent-soft); color: var(--accent); }
.pagination .page-item.disabled .page-link { background: rgba(255, 255, 255, 0.05); color: var(--line-strong); }

.spec-chip, .detail-description, .empty-note, .feature-tile {
    background: var(--surface);
}

.btn-outline-dark {
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: var(--ink);
    --bs-btn-hover-bg: var(--ink);
    --bs-btn-hover-border-color: var(--ink);
    --bs-btn-hover-color: var(--paper);
    --bs-btn-active-bg: var(--ink);
    --bs-btn-active-border-color: var(--ink);
    --bs-btn-active-color: var(--paper);
}

.btn-outline-secondary {
    --bs-btn-hover-bg: var(--ink);
    --bs-btn-hover-border-color: var(--ink);
    --bs-btn-hover-color: var(--paper);
    --bs-btn-active-bg: var(--ink);
    --bs-btn-active-border-color: var(--ink);
    --bs-btn-active-color: var(--paper);
}

/* Carousel controls must not swallow clicks on slide content (RTL button area overlaps control-prev) */
.carousel-control-prev,
.carousel-control-next {
    width: 3rem;
    pointer-events: none;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    pointer-events: auto;
}

/* ---------- Hero with liquid.mp4 backdrop ---------- */
.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(10, 11, 13, 0.6), rgba(19, 21, 24, 0.8));
    border-bottom: 1px solid var(--line);
    /* push content below the sticky navbar so links/buttons aren't intercepted */
    padding-top: 84px;
}

@media (max-width: 991.98px) {
    .hero {
        padding-top: 72px;
    }
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    filter: saturate(1.1);
    z-index: 0;
    pointer-events: none;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(19, 21, 24, 0.28) 0%, rgba(19, 21, 24, 0.5) 45%, rgba(19, 21, 24, 0.85) 100%);
    z-index: 1;
    pointer-events: none;
}

.hero-inner {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

.hero .badge.bg-dark {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff;
    backdrop-filter: blur(4px);
}

.hero .btn-outline-dark {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, 0.65);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-hover-color: #131518;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #fff;
    --bs-btn-active-color: #131518;
}

.hero-stat {
    background: rgba(19, 21, 24, 0.66);
    border-color: var(--line);
    backdrop-filter: blur(6px);
}

.hero-deck { color: var(--ink-soft); }

@media (max-width: 767.98px) {
    .hero-video,
    .hero-overlay {
        display: none;
    }
}

/* ---------- AI slogan banner (home) ---------- */
.ai-banner {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.6rem 1.8rem;
    border-radius: 1.1rem;
    background: linear-gradient(120deg, rgba(208, 90, 60, 0.18), rgba(127, 160, 140, 0.10) 55%, rgba(19, 21, 24, 0.45));
    border: 1px solid var(--line);
    backdrop-filter: blur(6px);
}

.ai-banner-icon { font-size: 2.1rem; color: var(--accent); flex-shrink: 0; }

.ai-banner-text h2 { font-size: 1.25rem; font-weight: 800; margin: 0 0 0.25rem; }

.ai-banner-text p { color: var(--ink-soft); margin: 0; font-size: 0.92rem; line-height: 1.8; }

.ai-banner-actions { margin-inline-start: auto; flex-shrink: 0; }

@media (max-width: 767.98px) {
    .ai-banner { flex-direction: column; align-items: flex-start; }
    .ai-banner-actions { margin-inline-start: 0; }
}

/* ---------- AI abstract box (magazine show) ---------- */
.ai-box {
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: 0.9rem;
    background: linear-gradient(150deg, var(--surface), rgba(19, 21, 24, 0.55));
    padding: 1.4rem 1.5rem;
    margin-top: 1.4rem;
}

.ai-box-head {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 0.9rem;
}

.ai-box-head > i { font-size: 1.5rem; color: var(--accent); margin-top: 0.15rem; }

.ai-box-title { font-size: 1.05rem; font-weight: 800; margin: 0 0 0.15rem; }

.ai-box-sub { font-size: 0.8rem; color: var(--ink-soft); }

.ai-summary { font-size: 0.96rem; line-height: 2; white-space: pre-line; }

.ai-summary-deep { border-top: 1px dashed var(--line); padding-top: 1rem; }

.ai-meta { margin-top: 1rem; font-size: 0.78rem; color: var(--ink-soft); }

.ai-box-locked { border-color: var(--line-strong); }

.ai-lock {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: rgba(208, 90, 60, 0.10);
    border: 1px dashed rgba(208, 90, 60, 0.35);
    border-radius: 0.8rem;
    padding: 1rem 1.2rem;
}

.ai-lock > i { font-size: 1.6rem; color: var(--accent); }

.ai-lock p { margin: 0 0 0.3rem; flex: 1 1 240px; color: var(--ink-soft); line-height: 1.9; }

.ai-lock .btn { margin-top: 0.3rem; }

.ai-preview {
    margin: 0.9rem 0 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.9;
    opacity: 0.75;
    border-top: 1px dashed var(--line);
    padding-top: 0.9rem;
}

/* ===== Blog (public) ===== */
.post-card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--surface-1); border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.post-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.post-card-cover { display: block; aspect-ratio: 16/9; background: var(--surface-2); overflow: hidden; }
.post-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.1rem 1.2rem; flex: 1; }
.post-card-meta { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; font-size: 0.75rem; color: var(--ink-soft); }
.post-card-meta i { margin-inline-end: 0.25rem; }
.post-card-title { font-size: 1.05rem; font-weight: 700; line-height: 1.6; margin: 0; }
.post-card-title a { color: var(--ink); text-decoration: none; }
.post-card-title a:hover { color: var(--accent); }
.post-card-excerpt { margin: 0; color: var(--ink-soft); font-size: 0.88rem; line-height: 1.9; }

.post-article { max-width: 780px; margin: 0 auto; background: var(--surface-1); border: 1px solid var(--line); border-radius: 1.2rem; padding: clamp(1.2rem, 4vw, 2.4rem); }
.post-article-cover { border-radius: 0.9rem; overflow: hidden; margin: -0.2rem 0 1.4rem; }
.post-article-cover img { width: 100%; max-height: 420px; object-fit: cover; display: block; }
.post-article-head { margin-bottom: 1.2rem; }
.post-article-title { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 800; line-height: 1.5; margin: 0.4rem 0; }
.post-article-meta { display: flex; gap: 1.1rem; flex-wrap: wrap; color: var(--ink-soft); font-size: 0.85rem; }
.post-article-meta i { margin-inline-end: 0.3rem; }
.post-article-excerpt { font-size: 1.05rem; color: var(--ink-soft); line-height: 2; border-inline-start: 3px solid var(--accent); padding-inline-start: 1rem; margin: 0 0 1.4rem; }

.post-body { color: var(--ink); line-height: 2.1; font-size: 1.02rem; }
.post-body p { margin: 0 0 1.1rem; }
.post-body h2, .post-body h3, .post-body h4 { margin: 1.6rem 0 0.7rem; line-height: 1.6; }
.post-body h2 { font-size: 1.35rem; }
.post-body h3 { font-size: 1.18rem; }
.post-body ul { margin: 0 0 1.1rem; padding-inline-start: 1.4rem; }
.post-body li { margin-bottom: 0.35rem; }
.post-body strong { font-weight: 700; }
/* ===== cart page: fixed LAYOUT + small fixed-size thumbnails (ASCII only) ===== */
.cart-layout{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:992px){.cart-layout{grid-template-columns:1fr 360px}}
.cart-items{display:flex;flex-direction:column;gap:.875rem}
.cart-item{border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius-lg);background:var(--bs-body-bg);overflow:hidden}
.cart-item .card-body{display:flex;flex-direction:row;align-items:center;gap:1rem}
.cart-thumb{width:92px;height:128px;flex-shrink:0;border-radius:.5rem;overflow:hidden;background:var(--bs-tertiary-bg)}
.cart-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cart-thumb .cover-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:.5rem;font-size:.75rem;text-align:center}
.cart-summary{box-shadow:var(--bs-box-shadow-sm)}
.empty-state .empty-icon{font-size:3rem;color:var(--bs-tertiary-color)}
@media(max-width:575.98px){
  .cart-item .card-body{flex-wrap:wrap}
  .cart-thumb{width:72px;height:100px}
}