.page-shell{padding:34px 0 80px}
.narrow-shell{max-width:720px;margin:0 auto}
.page-shell>.container{width:min(calc(100% - 32px),var(--container));margin-inline:auto}
.compact-page-hero{border-radius:24px;margin-bottom:26px;padding:28px 32px}
.compact-page-hero h1{font-size:clamp(1.7rem,4vw,2.5rem)}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:0 12px 35px rgba(30,25,13,.05)}
.form-card h1{margin:0 0 8px}
.form-footer{text-align:center;margin:20px 0 0;color:var(--muted);font-size:.9rem}
.form-footer a,.text-link{color:#8d6d0c;font-weight:700}
.validation-summary{color:#a44334;background:#fff0ec;border-radius:10px;padding:10px 12px;margin-bottom:14px}
.validation-summary:empty{display:none}
.field-validation{color:#a44334;font-size:.75rem}
.check-row{display:flex;align-items:center;gap:7px;font-size:.83rem;cursor:pointer}
.alert-success{margin-bottom:16px;padding:12px 14px;border-radius:12px;background:#e7f6ed;border:1px solid #bfe6cc;color:#0f7a48;font-size:.85rem}
.alert-error{margin-bottom:16px;padding:12px 14px;border-radius:12px;background:#fdecec;border:1px solid #f3b9b9;color:#b42318;font-size:.85rem}
.btn-light{color:var(--text);background:#fff;border:1px solid var(--line)}
.btn-light:hover{border-color:var(--gold);color:#8d6d0c}
.link-danger{padding:0;color:var(--danger);background:none;border:0;cursor:pointer;font:inherit;font-size:.83rem;font-weight:600}
.link-danger:hover{text-decoration:underline;text-underline-offset:2px}
.account-item-meta form{display:inline-flex;margin:0}
.account-data-table td form{display:inline-flex;margin:0 0 0 10px;vertical-align:middle}
.profile-image-preview{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fcfaf5}
.profile-image-preview img{width:74px;height:74px;object-fit:cover;border-radius:50%;border:2px solid var(--gold)}
.profile-image-preview div{display:grid;gap:5px}.profile-image-preview small{color:var(--muted)}
.success-card{max-width:700px;margin:40px auto;background:#fff;border:1px solid var(--line);border-radius:24px;padding:50px 30px;text-align:center}
.success-icon{width:72px;height:72px;margin:0 auto 18px;display:grid;place-items:center;border-radius:50%;background:#e7f6ed;color:#1f7b45;font-size:2rem;font-weight:900}
.success-card h1{margin:6px 0 12px}.success-card p{color:var(--muted);line-height:2}.success-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:24px}
.notice-box{margin:16px 0;padding:13px;border-radius:12px;background:#fff9e6;border:1px solid #ead18a;color:#715900;line-height:1.9}
.empty-state{background:#fff;border:1px dashed #d5c8ae;border-radius:20px;padding:60px 20px;text-align:center}
.empty-state-icon{font-size:3rem;color:var(--gold);margin-bottom:10px}.empty-state h2{margin:0 0 8px}
.cart-page-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.cart-page-items{display:grid;gap:12px}
.cart-page-item{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px}
.cart-page-item>img{width:120px;height:120px;object-fit:cover;border-radius:12px;background:#f3eee5}
.cart-page-item-info{display:grid;gap:5px}.cart-page-item-info h3{margin:0;font-size:1rem}.cart-page-item-info h3 a{color:var(--text)}.cart-page-item-info small{color:var(--muted)}.cart-page-item-info>strong{margin-top:5px}
.cart-page-item-actions{display:grid;gap:14px;justify-items:center}.cart-page-item-actions .qty{width:116px}
.order-summary{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;position:sticky;top:20px}.order-summary h3{margin-top:0}.summary-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}.summary-row.total-row{font-size:1.05rem;border-bottom:0;margin:8px 0 12px}.summary-note{font-size:.78rem;line-height:1.8}
.summary-product{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.summary-product img{width:56px;height:56px;object-fit:cover;border-radius:9px}.summary-product div{display:grid;gap:4px;min-width:0}.summary-product strong{font-size:.8rem}.summary-product small{color:var(--muted);font-size:.72rem}.order-line{justify-content:space-between}
.payment-option-list{display:grid;gap:10px}.payment-option{display:flex;align-items:flex-start;gap:10px;padding:14px;border:1px solid var(--line);border-radius:12px;cursor:pointer}.payment-option:has(input:checked){border-color:var(--gold);background:#fffaf0}.payment-option input{margin-top:4px}.payment-option div{display:grid;gap:5px}.payment-option small{color:var(--muted);font-size:.78rem;line-height:1.7}.payment-extra{display:none;margin-top:16px;padding:15px;border-radius:12px;background:#fcfaf5;border:1px dashed #d6c28a}.payment-extra.active{display:block}
.technical-code{display:block;color:var(--muted);font-size:.7rem;margin-bottom:8px}.pack-components{margin-top:22px;padding:15px;border:1px dashed #d6c28a;border-radius:14px;background:#fffdf6}.pack-components h3{margin:0 0 10px;font-size:1rem}.pack-components>div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #eee4cf;font-size:.85rem}.pack-components>div:last-child{border-bottom:0}
.toast{pointer-events:none}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:820px){.cart-page-grid{grid-template-columns:1fr}.order-summary{position:static}.cart-page-item{grid-template-columns:82px minmax(0,1fr);}.cart-page-item>img{width:82px;height:82px}.cart-page-item-actions{grid-column:1/-1;display:flex;justify-content:space-between}.narrow-shell{width:min(calc(100% - 22px),720px)}}
@media(max-width:560px){.form-card{padding:20px}.compact-page-hero{padding:22px 18px}.cart-page-item-info h3{font-size:.85rem}.cart-page-item-info>strong{font-size:.85rem}}

/* ------------------------------------------------------------------ */
/*  Product video / audio (Views/Catalog/Details.cshtml)               */
/*                                                                     */
/*  Rendered directly above the description tabs. Sized as a single    */
/*  column so a portrait phone video and a 16:9 clip both sit inside   */
/*  the content width instead of stretching the page.                  */
/* ------------------------------------------------------------------ */
.product-media {
    display: grid;
    gap: 18px;
    margin: 28px 0 8px;
}

.product-media-frame {
    margin: 0;
    padding: 14px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}

.product-media-frame figcaption {
    margin-bottom: 10px;
    font-size: .95rem;
    font-weight: 700;
}

.product-media-frame video {
    display: block;
    width: 100%;
    max-height: 520px;
    background: #000;
    border-radius: 10px;
}

.product-media-frame audio { width: 100%; }

@media (min-width: 900px) {
    /* Two side by side once there is room — a product with a clip plus a
       voice-over shouldn't push the description a screen further down. */
    .product-media { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
    .product-media-frame.product-media-audio { align-self: start; }
}
.checkout-page .field-hint{display:block;margin-bottom:5px;color:var(--muted);font-size:.78rem;line-height:1.8}
.payment-extra-title{margin:0 0 10px;font-size:.92rem}
.payment-account{display:grid;gap:8px;margin:0 0 12px;padding:12px;border-radius:10px;background:#fff;border:1px solid var(--line)}
.payment-account div{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.payment-account dt{color:var(--muted);font-size:.8rem}
.payment-account dd{margin:0;font-weight:600;letter-spacing:.04em}
.ltr-nums{direction:ltr;unicode-bidi:isolate}
.cheque-rows{display:grid;gap:12px;margin-bottom:12px}
.cheque-row{padding:12px;border-radius:10px;background:#fff;border:1px solid var(--line)}
.cheque-row-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.btn-small{padding:6px 12px;font-size:.82rem}
.btn-text{background:transparent;border:none;color:#b12642;cursor:pointer}
.btn-text:hover{text-decoration:underline}

/* ========= ویزارد ۴ مرحله‌ای تسویه حساب ========= */
.checkout-wizard-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:20px}
.wizard-step-indicator{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 8px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--muted);font-size:.82rem;font-weight:700;cursor:pointer}
.wizard-step-indicator span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#f3eee5;color:var(--text);font-size:.76rem}
.wizard-step-indicator.active{border-color:var(--gold);color:var(--text);background:#fffaf0}
.wizard-step-indicator.active span{background:var(--gold);color:#fff}
.wizard-step-indicator.done span{background:var(--success);color:#fff}
@media (max-width:700px){.checkout-wizard-nav{grid-template-columns:repeat(2,1fr)}.wizard-step-indicator small{display:none}}
.checkout-step .field-hint{margin-bottom:14px}
.wizard-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.wizard-actions .btn-block{flex:1}

/* ========= پیش‌نمایش فاکتور (مرحلهٔ ۴) ========= */
.invoice-preview{margin-top:16px;padding:22px;background:#fff;border:1px solid var(--line);border-radius:16px}
.invoice-preview-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:14px;margin-bottom:16px;border-bottom:2px solid var(--gold)}
.invoice-preview-brand{display:block;font-size:1.1rem}
.invoice-preview-doc-type{display:inline-block;margin-top:4px;color:#8d6d0c;font-size:.72rem;font-weight:700}
.invoice-preview-meta{color:var(--muted);font-size:.78rem}
.invoice-preview-parties{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:16px}
.invoice-preview-parties .meta-block{flex:1;min-width:220px;padding:14px 15px;background:#fcfaf5;border:1px solid var(--line);border-radius:12px;line-height:1.95;font-size:.82rem}
.invoice-preview-parties .meta-block h4{margin:0 0 8px;color:#8d6d0c;font-size:.78rem}
.invoice-preview-table{width:100%;border-collapse:collapse;margin-bottom:14px}
.invoice-preview-table th,.invoice-preview-table td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:right;font-size:.8rem}
.invoice-preview-table th{color:var(--muted);background:#fcfaf5;font-size:.72rem;font-weight:700}
.invoice-preview-totals{display:grid;gap:8px;padding:14px 16px;background:#fcfaf5;border:1px solid var(--line);border-radius:12px}
.invoice-preview-totals>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;font-size:.82rem}
.invoice-preview-grand-total{padding-top:8px;border-top:1px dashed var(--line);font-size:.92rem}
.invoice-preview-grand-total strong{color:#8d6d0c}

/* دامنهٔ این قانون عمداً به .checkout-wizard محدود است، نه body کلی؛
   چون storefront.css در _Layout.cshtml سراسری بارگذاری می‌شود و اگر قانون
   «همه‌چیز مخفی، فقط پیش‌فاکتور نمایان» بدون این محدودسازی نوشته می‌شد،
   چاپ هر صفحهٔ دیگر فروشگاه (محصول، سبد خرید، خانه و ...) هم تحت تأثیر
   قرار می‌گرفت و عملاً خروجی چاپ آن صفحات خالی می‌شد. */
@media print{
    .checkout-wizard *{visibility:hidden}
    .checkout-wizard .invoice-preview,.checkout-wizard .invoice-preview *{visibility:visible}
    .checkout-wizard .invoice-preview{position:absolute;inset:0;margin:0;border:0;border-radius:0}
}

/* توضیح: .checkout-grid/.form-grid/.order-summary از قبل در wwwroot/styles.css
   با breakpointهای ۱۰۵۰px و ۸۲۰px کاملاً ریسپانسیو تعریف شده‌اند (فرم ۱fr
   عریض + ستون کناری ۳۸۰px که در دسکتاپ کوچک به ۳۳۰px و در موبایل به یک
   ستون تک‌بندی تبدیل می‌شود). یک override اختصاصی .checkout-wizard اینجا
   دقیقاً همان مقادیر را بدون media query تکرار می‌کرد؛ چون سلکتور
   .checkout-wizard .checkout-grid از .checkout-grid خاص‌تر است، همان
   breakpointهای styles.css را همیشه بی‌اثر می‌کرد و صفحهٔ تسویه حساب در
   موبایل هرگز به یک ستون جمع نمی‌شد (باعث اسکرول افقی می‌شد). با حذف این
   override، صفحه دوباره از قوانین ریسپانسیو پایه استفاده می‌کند.
*/

/* ========= ریزتنظیمات ریسپانسیو ویزارد تسویه حساب برای صفحه‌های باریک ========= */
@media (max-width:560px){
    /* دو دکمهٔ «مرحله قبل/بعد» به‌جای فشرده‌شدن کنار هم، هرکدام تمام عرض و
       زیر هم قرار می‌گیرند تا متن فارسی طولانی دکمه‌ها (مثلاً «مرحله بعد:
       پیش‌نمایش فاکتور») در گوشی‌های کوچک شکسته یا فشرده نشود. */
    .wizard-actions{flex-direction:column;align-items:stretch}
    .wizard-actions .btn{width:100%}
    /* جدول پیش‌فاکتور ۵ ستون دارد و با نام محصولات فارسی ممکن است از عرض
       صفحه در گوشی بزرگ‌تر شود؛ به‌جای شکستن چیدمان کل صفحه، خود جدول به‌صورت
       افقی اسکرول می‌شود (بدون نیاز به یک div بستهٔ اضافه در ویو). */
    .invoice-preview{padding:16px}
    .invoice-preview-table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
}
@media (max-width:380px){
    .wizard-step-indicator{padding:9px 4px;gap:5px;font-size:.72rem}
    .wizard-step-indicator span{width:18px;height:18px;font-size:.68rem}
}

/* ========= جزئیات سفارش (Account/OrderDetails): پیش‌نمایش فاکتور واقعی ========= */
.invoice-print-btn{margin-bottom:14px}
@media print{
    .order-details-page *{visibility:hidden}
    .order-details-page .invoice-preview,.order-details-page .invoice-preview *{visibility:visible}
    .order-details-page .invoice-preview{position:absolute;inset:0;margin:0;border:0;border-radius:0}
}