:root { --blue: #1a56b8; --blue-soft: #e8f1fd; --sky: #1a9be6; --red: #e5322d; --green: #1fa64a; --ink: #1c1f26; --muted: #8a919e; --line: #e6e8ec; --bg: #ffffff; --card-shadow: 0 1px 6px rgba(20, 30, 60, .10); --font: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif; } html, body { font-family: var(--font); color: var(--ink); background: var(--bg); margin: 0; } body { padding-bottom: 64px; } a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; } h1:focus { outline: none; } img { max-width: 100%; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; } .icon { display: block; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--line); } .header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; height: 56px; gap: 12px; } .header-actions { display: flex; align-items: center; gap: 12px; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--ink); cursor: pointer; background: none; border: 0; } .icon-btn:hover { text-decoration: none; color: var(--blue); } .logo img { height: 34px; display: block; } .desktop-nav { display: none; gap: 20px; align-items: center; } .desktop-nav a { color: var(--ink); font-weight: 500; } .desktop-nav a:hover { color: var(--blue); text-decoration: none; } .desktop-nav .inline-form { display: contents; } .desktop-nav .inline-form button { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: var(--ink); cursor: pointer; } .desktop-nav .inline-form button:hover { color: var(--blue); } /* ---------- Drawer ---------- */ .menu-toggle { display: none; } .drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .2s; } .drawer { position: fixed; top: 0; bottom: 0; right: 0; width: 280px; max-width: 85vw; background: #fff; z-index: 70; transform: translateX(100%); transition: transform .25s; display: flex; flex-direction: column; box-shadow: -4px 0 20px rgba(0,0,0,.15); } .menu-toggle:checked ~ .drawer { transform: translateX(0); } .menu-toggle:checked ~ .drawer-backdrop { opacity: 1; pointer-events: auto; } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; border-bottom: 1px solid var(--line); } .drawer nav { display: flex; flex-direction: column; padding: 8px 0; } .drawer nav a, .drawer nav button { padding: 14px 20px; color: var(--ink); background: none; border: 0; text-align: right; font: inherit; cursor: pointer; } .drawer nav a:hover, .drawer nav button:hover { background: var(--blue-soft); text-decoration: none; } .drawer nav a, .drawer nav button { display: flex; flex-direction: row; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; border-inline-start: 3px solid transparent; } .drawer nav a .icon, .drawer nav button .icon { flex: none; color: var(--muted); } .drawer nav a.active { background: var(--blue-soft); color: var(--blue); font-weight: 700; border-inline-start-color: var(--blue); } .drawer nav a.active .icon { color: var(--blue); } .drawer nav form { margin: 0; } /* ---------- Bottom nav (mobile) ---------- */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: #fff; border-top: 1px solid var(--line); display: flex; justify-content: space-around; height: 60px; } .bottom-nav a, .bottom-nav label { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; color: var(--ink); cursor: pointer; position: relative; } .bottom-nav a:hover { text-decoration: none; color: var(--blue); } .cart-badge { position: absolute; top: 6px; right: calc(50% + 6px); background: var(--blue); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; } /* ---------- Main ---------- */ .site-main { min-height: 60vh; } /* ---------- Hero ---------- */ .hero { display: flex; flex-direction: column; gap: 16px; padding: 24px 0 8px; } .hero-img { width: 100%; max-height: 300px; object-fit: contain; } .hero-text h1 { font-size: 1.6rem; font-weight: 800; line-height: 1.6; margin: 0 0 12px; } .hero-text p { color: #3c4250; line-height: 2; text-align: justify; margin: 0 0 20px; } .btn-pill { display: inline-block; background: #000; color: #fff; border: 0; border-radius: 999px; padding: 12px 32px; font: inherit; font-weight: 600; cursor: pointer; } .btn-pill:hover { background: #222; color: #fff; text-decoration: none; } /* ---------- Why ---------- */ .why { padding: 24px 0 8px; } .why-title { font-size: 1.4rem; font-weight: 800; margin: 0 0 16px; } .why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .why-item { background: var(--blue-soft); border-radius: 14px; padding: 16px; color: var(--blue); } .why-item h3 { font-size: 1rem; margin: 8px 0 4px; color: var(--ink); } .why-item p { font-size: .85rem; margin: 0; color: #4b5261; line-height: 1.8; } /* ---------- Section title ---------- */ .section-title { display: flex; align-items: center; gap: 16px; margin: 36px 0 18px; } .section-title .line { flex: 1; height: 1px; background: var(--line); } .section-title h2 { margin: 0; font-size: 1.25rem; font-weight: 700; } .section-title em { font-style: normal; color: var(--red); } /* ---------- Product cards ---------- */ .product-grid { display: grid; gap: 12px; padding: 4px 2px 12px; } .product-card { position: relative; background: #fff; border-radius: 8px; box-shadow: var(--card-shadow); display: flex; flex-direction: column; scroll-snap-align: start; overflow: hidden; } .product-card .thumb { display: block; aspect-ratio: 4 / 3; background: #fff; padding: 8px; box-sizing: border-box; } .product-card .thumb img { width: 100%; height: 100%; object-fit: contain; } .product-card .info { padding: 4px 12px; flex: 1; } .product-card h3 { font-size: .85rem; font-weight: 500; margin: 0 0 6px; line-height: 1.7; /* همیشه دقیقاً دو خط جا (کوتاه‌تر: خالی می‌ماند؛ بلندتر: ... ) تا اجزای زیرین کارت‌ها تراز بمانند */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; height: 3.4em; } .product-card h3 a { color: #444; } .product-card .meta { font-size: .75rem; color: var(--muted); margin: 0; line-height: 1.6; min-height: 1.6em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .price { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; } .price strong { color: var(--blue); font-size: .85rem; font-weight: 700; } .price del { color: var(--muted); font-size: .72rem; } .badges { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; z-index: 2; } .badges.static { position: static; flex-direction: row; margin-bottom: 8px; } .badge-pill { background: #2b8be0; color: #fff; font-size: .72rem; padding: 2px 12px; border-radius: 999px; } .discount-badge { position: absolute; top: 8px; left: 8px; background: var(--green); color: #fff; font-size: .72rem; padding: 2px 8px; border-radius: 999px; z-index: 2; direction: ltr; } .add-cart { position: absolute; top: 8px; left: 8px; z-index: 2; margin: 0; } .discount-badge + .add-cart { top: 40px; } .add-cart button { width: 32px; height: 32px; border-radius: 50%; border: 0; background: #fff; box-shadow: var(--card-shadow); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; } .add-cart button:hover { color: var(--blue); } .empty { color: var(--muted); text-align: center; padding: 40px 0; } /* ---------- Filters ---------- */ .filter-bar { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 20px; } .filter-bar input, .filter-bar select { padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; font: inherit; background: #fff; } /* ---------- Product details ---------- */ .breadcrumb-lite { margin: 16px 0; color: var(--muted); font-size: .85rem; } .detail { display: grid; gap: 24px; grid-template-columns: 1fr; } .detail-img { background: #fff; border-radius: 12px; box-shadow: var(--card-shadow); padding: 16px; } .detail-img img { width: 100%; max-height: 420px; object-fit: contain; } .detail-info h1 { font-size: 1.3rem; line-height: 1.8; margin: 0 0 8px; } .detail-info .meta { color: var(--muted); } .detail-info .desc { line-height: 2; } .price.big { padding: 12px 0; } .price.big strong { font-size: 1.4rem; } .discount-inline { color: var(--green); font-size: .85rem; } .out-of-stock { color: var(--red); } /* ---------- Cart ---------- */ .table-wrap { overflow-x: auto; } .btn-link-danger { background: none; border: 0; color: var(--red); cursor: pointer; font: inherit; } /* ---------- FAQ ---------- */ .faq { display: flex; flex-direction: column; gap: 12px; } .faq details { background: #fff; border-radius: 8px; box-shadow: var(--card-shadow); padding: 4px 20px; } .faq summary { list-style: none; cursor: pointer; padding: 16px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--blue); font-weight: 500; } .faq summary::-webkit-details-marker { display: none; } .faq details[open] summary .icon { transform: rotate(180deg); } .faq p { margin: 0; padding-bottom: 16px; line-height: 2; color: #3c4250; text-align: justify; } /* ---------- Footer ---------- */ /* (استایل فوتر در بخش «Footer» پایین‌تر تعریف شده است) */ /* ---------- Desktop ---------- */ @media (min-width: 768px) { body { padding-bottom: 0; } .bottom-nav, .menu-btn { display: none; } .desktop-nav { display: flex; } .header-inner { height: 68px; } .logo { position: absolute; left: 50%; transform: translateX(-50%); } .hero { flex-direction: row-reverse; align-items: center; gap: 48px; padding-top: 48px; } .hero-img { width: 45%; max-height: 380px; } .hero-text { flex: 1; } .hero-text h1 { font-size: 2rem; } .why-grid { grid-template-columns: repeat(4, 1fr); } .filter-bar { grid-template-columns: 1fr 260px auto; } .detail { grid-template-columns: 1fr 1fr; } } /* ---------- Blazor / forms ---------- */ .btn-primary { color: #fff; background-color: var(--blue); border-color: var(--blue); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } #blazor-error-ui { background: lightyellow; bottom: 60px; box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000; box-sizing: border-box; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; left: .75rem; top: .5rem; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } /* ---------- Admin panel ---------- */ .admin { display: flex; flex-direction: column; min-height: 100vh; background: #f4f6f9; } .admin-side { background: #10213f; color: #fff; } .admin-side a { color: #cfd8ea; } .admin-brand { display: flex; align-items: center; gap: 8px; padding: 14px 16px; font-weight: 700; color: #fff !important; } .admin-side nav { display: flex; overflow-x: auto; } .admin-side nav a { padding: 12px 16px; white-space: nowrap; } .admin-side nav a:hover { background: #1b3260; text-decoration: none; } .admin-side nav a.active { background: #1a56b8; color: #fff; } .admin-out { margin-inline-start: auto; } .admin-main { flex: 1; padding: 20px 16px 48px; min-width: 0; } .admin-h1 { font-size: 1.4rem; margin: 0 0 16px; } .admin-h2 { font-size: 1.1rem; margin: 28px 0 12px; } .admin-bar { display: flex; align-items: center; justify-content: space-between; } .admin-btn { display: inline-block; background: var(--blue); color: #fff; border: 0; border-radius: 8px; padding: 9px 18px; font: inherit; cursor: pointer; } .admin-btn:hover { background: #144494; color: #fff; text-decoration: none; } .admin-btn.secondary { background: #e3e7ee; color: var(--ink); } .admin-btn.secondary:hover { background: #d3d9e3; color: var(--ink); } .admin-btn.small { padding: 6px 14px; } .admin-btn.danger { background: #d23c3c; } .admin-btn.danger:hover { background: #b22e2e; color: #fff; } .confirm-overlay { position: fixed; inset: 0; background: rgba(16,23,42,.45); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; } .confirm-box { background: #fff; border-radius: 16px; padding: 22px; max-width: 360px; width: 100%; box-shadow: var(--card-shadow-hover, var(--card-shadow)); text-align: center; } .confirm-box p { margin: 0 0 18px; font-size: .95rem; line-height: 1.8; } .confirm-actions { display: flex; gap: 10px; justify-content: center; } .confirm-actions .admin-btn { flex: 1; } .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 8px; } .stat { background: #fff; border-radius: 10px; padding: 16px; box-shadow: var(--card-shadow); display: flex; flex-direction: column; gap: 6px; } .stat span { color: var(--muted); font-size: .85rem; } .stat strong { font-size: 1.5rem; color: var(--blue); } .admin-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: var(--card-shadow); font-size: .9rem; } .admin-table th, .admin-table td { padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--line); vertical-align: middle; } .admin-table th { background: #f0f3f8; font-weight: 600; white-space: nowrap; } .admin-thumb { width: 48px; height: 48px; object-fit: contain; background: #fff; border-radius: 6px; } .admin-thumb.big { width: 96px; height: 96px; } .actions { white-space: nowrap; } .actions form { display: inline; margin-inline-start: 12px; } .link-danger { background: none; border: 0; color: var(--red); cursor: pointer; font: inherit; padding: 0; } .muted { color: var(--muted); } .admin-search { display: flex; gap: 8px; margin-bottom: 12px; } .admin-search input { flex: 1; max-width: 360px; } .admin input[type=text], .admin input[type=number], .admin input[type=search], .admin select, .admin textarea { padding: 9px 12px; border: 1px solid #cfd6e2; border-radius: 8px; font: inherit; background: #fff; box-sizing: border-box; } .admin-form { background: #fff; border-radius: 10px; padding: 20px; box-shadow: var(--card-shadow); display: flex; flex-direction: column; gap: 14px; max-width: 760px; } .admin-form label { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; } .admin-form .checks { display: flex; gap: 20px; flex-wrap: wrap; } .admin-form .checks label, .current-img label { flex-direction: row; align-items: center; gap: 6px; } .admin-form .row2 { display: grid; grid-template-columns: 1fr; gap: 14px; } .admin-form .row3 { display: grid; grid-template-columns: 1fr; gap: 14px; } .form-actions { display: flex; gap: 12px; align-items: center; } .form-actions label { flex-direction: row; align-items: center; } .current-img { display: flex; align-items: center; gap: 12px; } .inline-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .inline-form label { display: flex; align-items: center; gap: 6px; } .narrow { width: 80px; } .admin-advanced { border: 1px solid var(--line); border-radius: 10px; padding: 4px 14px; } .admin-advanced summary { cursor: pointer; padding: 10px 0; font-weight: 600; font-size: .9rem; color: var(--blue); list-style: none; } .admin-advanced summary::-webkit-details-marker { display: none; } .admin-advanced summary::before { content: "▸ "; display: inline-block; transition: transform .15s; } .admin-advanced[open] summary::before { transform: rotate(90deg); } .admin-advanced-body { display: flex; flex-direction: column; gap: 14px; padding: 4px 0 16px; } .faq-admin { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; } .faq-admin .admin-form { flex: 1; } .flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; } .flash.ok { background: #e3f6ea; color: #17692f; } .flash.err { background: #fde8e8; color: #a11d1d; } @media (min-width: 768px) { .admin { flex-direction: row; } .admin-side { width: 220px; flex-shrink: 0; min-height: 100vh; position: sticky; top: 0; align-self: flex-start; height: 100vh; } .admin-side nav { flex-direction: column; } .admin-out { margin-inline-start: 0; margin-top: 16px; } .admin-main { padding: 28px 32px 48px; } .stat-grid { grid-template-columns: repeat(5, 1fr); } .admin-form .row2 { grid-template-columns: 1fr 1fr; } .admin-form .row3 { grid-template-columns: repeat(3, 1fr); } } /* ===================================================================== Visual polish, shop, checkout and user panel ===================================================================== */ :root { --blue: #1b5fd8; --blue-dark: #0f3f9a; --blue-soft: #eaf2ff; --page: #ffffff; --card-line: 1px solid rgba(16, 33, 63, .06); --radius: 16px; --card-shadow: 0 1px 4px rgba(16, 33, 63, .05); --card-shadow-hover: 0 6px 18px rgba(16, 33, 63, .10); } body { background: var(--page); } /* کارت‌های سفید سایت: فقط یک خط بسیار کم‌رنگ + سایه‌ی خیلی ملایم (به‌جای سایه‌ی سنگین قبلی) */ .pd-section, .detail-img, .detail-info, .gallery-main, .pd-info, .filter-panel, .form-card, .summary-card, .detail-card, .admin-card, .empty-box, .stat, .why-item, .cart-trust-item, .product-card, .admin-table, .admin-form { border: var(--card-line); } .site-main .container { padding-bottom: 8px; } /* Header */ .site-header { background: rgba(255,255,255,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(16,33,63,.06); box-shadow: 0 2px 14px rgba(16,33,63,.05); } .icon-btn { border-radius: 12px; transition: background .15s, color .15s; } .icon-btn:hover { background: var(--blue-soft); } .desktop-nav a { position: relative; padding: 6px 2px; } .desktop-nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--blue); transform: scaleX(0); transition: transform .2s; } .desktop-nav a:hover::after { transform: scaleX(1); } .bottom-nav { box-shadow: 0 -4px 18px rgba(16,33,63,.08); border-top: 0; border-radius: 18px 18px 0 0; } .bottom-nav a:hover, .bottom-nav label:hover { color: var(--blue); } /* Hero */ .hero { margin-top: 16px; padding: 24px 20px; border-radius: 24px; background: linear-gradient(135deg, #eaf2ff 0%, #ffffff 55%, #fff1f0 100%); box-shadow: var(--card-shadow); overflow: hidden; position: relative; } .hero::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(27,95,216,.18), transparent 70%); top: -80px; inset-inline-end: -60px; } .hero > * { position: relative; } .hero-text h1 { background: linear-gradient(90deg, #10213f, var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; } .btn-pill { transition: transform .15s, box-shadow .15s, background .15s; box-shadow: 0 6px 16px rgba(0,0,0,.18); } .btn-pill:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.22); } .btn-pill:disabled { opacity: .5; cursor: not-allowed; transform: none; } .btn-pill.pay { background: linear-gradient(135deg, var(--blue), var(--blue-dark)); width: 100%; text-align: center; box-sizing: border-box; } .btn-pill.pay:hover { background: linear-gradient(135deg, #2a70ee, var(--blue)); } /* Why */ .why-item { background: #fff; box-shadow: var(--card-shadow); border: 1px solid rgba(27,95,216,.08); border-radius: var(--radius); transition: transform .2s, box-shadow .2s; } .why-item:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); } .why-item .icon { background: var(--blue-soft); padding: 10px; border-radius: 12px; box-sizing: content-box; } /* Section titles */ .section-title h2 { font-size: 1.3rem; font-weight: 800; } .section-title .line { background: linear-gradient(90deg, transparent, #d5dbe7, transparent); } /* Product cards */ .product-card { border-radius: var(--radius); box-shadow: var(--card-shadow); transition: transform .2s, box-shadow .2s; border: 1px solid rgba(16,33,63,.04); } .product-card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); } .product-card .thumb { background: linear-gradient(180deg, #fff, #f6f8fc); } .product-card .thumb img { transition: transform .3s; } .product-card:hover .thumb img { transform: scale(1.05); } .product-card h3 a:hover { color: var(--blue); text-decoration: none; } .price strong { font-size: .95rem; } .badge-pill { background: linear-gradient(135deg, #2b8be0, var(--blue)); box-shadow: 0 2px 6px rgba(27,95,216,.3); } .add-cart button { transition: background .15s, color .15s, transform .15s; } .add-cart button:hover { background: var(--blue); color: #fff; transform: scale(1.08); } /* Chips / filters */ .chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; } .chip { white-space: nowrap; padding: 8px 18px; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: var(--card-shadow); font-size: .9rem; border: 1px solid transparent; } .chip:hover { text-decoration: none; border-color: var(--blue); color: var(--blue); } .chip.on { background: var(--blue); color: #fff; } .filter-bar input, .filter-bar select { border-radius: 12px; border: 1px solid #dbe1ec; background: #fff; } .filter-bar input:focus, .filter-bar select:focus, .form-card input:focus, .form-card textarea:focus { outline: 2px solid rgba(27,95,216,.35); border-color: var(--blue); } .result-count { margin: 0 0 12px; } .shop-layout { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; } .filter-panel { background: #fff; border-radius: var(--radius, 16px); box-shadow: var(--card-shadow); padding: 18px; } .filter-panel form { display: flex; flex-direction: column; gap: 4px; } .filter-group { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; } .filter-group:last-of-type { border-bottom: 0; } .filter-group h3 { font-size: .88rem; margin: 0 0 2px; color: var(--muted); font-weight: 600; } .filter-group .check { font-size: .88rem; } .price-range { display: flex; gap: 8px; } .price-range input { width: 0; flex: 1; padding: 8px 10px; border: 1px solid #dbe1ec; border-radius: 10px; font: inherit; } .filter-panel .btn-pill.small { margin-top: 12px; padding: 9px 0; text-align: center; } .filter-panel .link-soft { text-align: center; margin-top: 8px; font-size: .85rem; } .shop-results { min-width: 0; } @media (min-width: 900px) { .shop-layout { grid-template-columns: 240px 1fr; } } .small { font-size: .8rem; } /* FAQ */ .faq details { border-radius: 14px; border: 1px solid rgba(16,33,63,.05); transition: box-shadow .2s; } .faq details[open] { box-shadow: var(--card-shadow-hover); } /* Footer */ .site-footer { background: linear-gradient(180deg, #10213f 0%, #0b1730 100%); margin-top: 56px; padding: 48px 0 24px; color: #b8c4dc; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; } .footer-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 1.25rem; } .footer-logo:hover { text-decoration: none; } .footer-logo img { height: 38px; background: #fff; border-radius: 10px; padding: 4px 8px; box-sizing: border-box; } .footer-about { margin: 14px 0 20px; line-height: 2; font-size: .88rem; color: #b8c4dc; max-width: 560px; } .footer-social { display: flex; flex-wrap: wrap; gap: 10px; } .social-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #fff; font-size: .8rem; font-weight: 600; transition: background .15s, transform .15s, border-color .15s; } .social-btn:hover { text-decoration: none; transform: translateY(-2px); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); } .social-btn.ig:hover { background: linear-gradient(45deg, #f09433, #dc2743 55%, #bc1888); } .social-btn.tg:hover { background: #229ed9; } .social-btn.wa:hover { background: #25d366; } .social-btn.bl:hover { background: #3bb7a5; } .social-btn.et:hover { background: #f58220; } .footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .footer-col h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 800; color: #fff; position: relative; padding-bottom: 10px; } .footer-col h3::after { content: ""; position: absolute; bottom: 0; right: 0; width: 28px; height: 3px; border-radius: 3px; background: var(--sky); } .footer-col a { color: #b8c4dc; font-size: .88rem; transition: color .15s; } .footer-col a:hover { color: #fff; text-decoration: none; } .footer-phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #fff !important; letter-spacing: .3px; } .footer-phone .icon { color: var(--sky); } .site-footer .copy { text-align: center; font-size: .75rem; color: #7f8fb0; border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px; margin: 36px 0 0; } @media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } @media (min-width: 960px) { .footer-grid { grid-template-columns: 1.7fr 1fr 1fr; gap: 48px; } .footer-brand { grid-column: auto; } } /* Product detail */ .detail-img, .detail-info { border-radius: 20px; } .detail-info { background: #fff; padding: 22px; box-shadow: var(--card-shadow); } /* Cards used in cart / checkout / panel */ .form-card, .summary-card, .detail-card, .admin-card, .empty-box { background: #fff; border-radius: 18px; box-shadow: var(--card-shadow); padding: 20px; } .form-card { display: flex; flex-direction: column; gap: 14px; } .form-card label { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; font-weight: 500; } .form-card input, .form-card textarea { padding: 11px 14px; border: 1px solid #dbe1ec; border-radius: 12px; font: inherit; background: #fff; box-sizing: border-box; } .form-card input:disabled { background: #f1f3f7; color: var(--muted); } .form-card .form-actions { flex-wrap: wrap; } .link-soft { color: var(--blue); font-size: .9rem; } /* Auth pages (login / register / forgot password) */ .auth-page { max-width: 440px; margin: 0 auto; padding: 28px 0 56px; } .auth-page .form-card { margin-top: 16px; } .auth-hero { text-align: center; margin-bottom: 20px; } .auth-hero .panel-h1 { margin: 12px 0 6px; font-size: 1.5rem; } .auth-hero .muted { margin: 0; font-size: .9rem; line-height: 1.9; } .auth-badge { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, var(--sky), var(--blue-dark)); box-shadow: 0 10px 24px rgba(27,95,216,.28); } .auth-card { background: #fff; border: var(--card-line); border-radius: 22px; box-shadow: 0 12px 36px rgba(16,33,63,.08); padding: 18px 20px 20px; } .auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: #eef2f8; margin-bottom: 18px; } .auth-tabs a { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; border-radius: 11px; font-size: .86rem; font-weight: 600; color: #5b6578; transition: background .15s, color .15s, box-shadow .15s; } .auth-tabs a:hover { text-decoration: none; color: var(--blue); } .auth-tabs a.on { background: #fff; color: var(--blue); box-shadow: 0 2px 8px rgba(16,33,63,.10); } .auth-form { display: flex; flex-direction: column; gap: 16px; } .auth-form label { display: flex; flex-direction: column; gap: 8px; font-size: .88rem; font-weight: 600; color: #1d2e49; } .auth-field { position: relative; display: block; } .auth-field .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #8a96ad; pointer-events: none; } .auth-form input[type=text], .auth-form input[type=tel], .auth-form input[type=password], .auth-form input:not([type]) { width: 100%; box-sizing: border-box; min-height: 50px; padding: 12px 14px; border: 1.5px solid #dbe1ec; border-radius: 14px; font: inherit; font-weight: 500; background: #f7f9fd; transition: border-color .15s, background .15s, box-shadow .15s; } .auth-field input { padding-left: 46px !important; } .auth-form input:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(27,95,216,.12); } .auth-form .otp-input { text-align: center; font-size: 1.7rem; letter-spacing: .6em; padding-inline-start: calc(14px + .6em); font-weight: 700; } .auth-form .btn-pill.pay { min-height: 50px; border-radius: 14px; font-size: 1rem; } .auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .85rem; } .auth-row label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; } .auth-hint, .auth-foot, .auth-link { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: .82rem; color: var(--muted); text-align: center; line-height: 1.8; } .auth-link { color: var(--blue); font-weight: 600; } .auth-foot { margin-top: 18px; padding-top: 16px; border-top: 1px dashed #dbe1ec; } .auth-card .flash { margin: 0 0 14px; border-radius: 12px; font-size: .86rem; } @media (max-width: 480px) { .auth-card { padding: 14px 14px 18px; border-radius: 18px; } } /* مرحله‌ی تأیید شماره در پرداخت */ .co-phone-form input[type=tel] { background: #f7f9fd; border-width: 1.5px; font-weight: 600; letter-spacing: .04em; } .co-phone-form input[type=tel]:focus { background: #fff; box-shadow: 0 0 0 4px rgba(27,95,216,.12); } .co-phone-form .btn-outline { background: linear-gradient(135deg, var(--blue), var(--blue-dark)); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(27,95,216,.25); } .co-phone-form .btn-outline:hover { background: linear-gradient(135deg, #2a70ee, var(--blue)); } .field-error { color: #d23c3c; font-size: .8rem; font-weight: 400; } .center { text-align: center; } .detail-card { margin-bottom: 16px; } .empty-box { text-align: center; color: var(--muted); padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .empty-box .icon { color: #b8c2d6; } .checkout-grid { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: start; } .summary-card { display: flex; flex-direction: column; gap: 12px; } .summary-card .panel-h2 { margin: 0 0 4px; } .sum-row { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; } .sum-total { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px dashed #d5dbe7; } .sum-total strong { color: var(--blue); font-size: 1.15rem; } /* Cart */ .cart-list { display: flex; flex-direction: column; gap: 12px; } .cart-item { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 16px; box-shadow: var(--card-shadow); padding: 12px; } .cart-thumb { width: 84px; height: 84px; flex-shrink: 0; background: #f6f8fc; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .cart-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; } .cart-info { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .cart-name { color: var(--ink); font-weight: 600; font-size: .9rem; line-height: 1.7; } .cart-actions { display: flex; align-items: center; gap: 16px; } .cart-actions form { margin: 0; } .cart-line { color: var(--blue); font-size: .9rem; white-space: nowrap; } .qty { display: inline-flex; align-items: center; gap: 4px; background: #f1f4fa; border-radius: 999px; padding: 2px; } .qty form { display: contents; } .qty button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: #fff; box-shadow: var(--card-shadow); cursor: pointer; font-size: 1.1rem; line-height: 1; } .qty button:disabled { opacity: .4; cursor: not-allowed; } .qty span { min-width: 26px; text-align: center; font-weight: 600; } .unique-badge { font-size: .8rem; color: var(--muted); background: #f1f4fa; padding: 6px 12px; border-radius: 999px; } .cart-continue { align-self: flex-start; margin-top: 4px; } .cart-secure { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .8rem; color: var(--muted); justify-content: center; } .cart-thumb { border: 1px solid var(--line); } .cart-trust { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 28px 0 8px; } .cart-trust-item { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid rgba(27,95,216,.08); box-shadow: var(--card-shadow); border-radius: var(--radius, 14px); padding: 16px; } .cart-trust-item .icon { flex-shrink: 0; color: var(--blue); background: var(--blue-soft); padding: 10px; border-radius: 12px; box-sizing: content-box; } .cart-trust-item b { display: block; font-size: .92rem; margin-bottom: 2px; } .cart-trust-item span { display: block; font-size: .82rem; color: var(--muted); line-height: 1.7; } @media (min-width: 768px) { .cart-trust { grid-template-columns: repeat(3, 1fr); } } /* Status badges */ .status { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; } .status.s0 { background: #fff4d6; color: #8a6100; } .status.s1 { background: #dff5e6; color: #17692f; } .status.s2 { background: #dbe9ff; color: #1748a8; } .status.s3 { background: #fde1e1; color: #a11d1d; } .status.s4 { background: #eceef3; color: #566; } .status-select { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; border: 0; cursor: pointer; font-family: inherit; } .status-select.s0 { background: #fff4d6; color: #8a6100; } .status-select.s1 { background: #dff5e6; color: #17692f; } .status-select.s2 { background: #dbe9ff; color: #1748a8; } .status-select.s3 { background: #fde1e1; color: #a11d1d; } .status-select.s4 { background: #eceef3; color: #566; } /* User panel */ .panel { padding: 16px 0 8px; } .panel-tabs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 20px; padding-bottom: 4px; } .panel-tabs a { white-space: nowrap; padding: 9px 20px; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: var(--card-shadow); font-size: .9rem; } .panel-tabs a:hover { text-decoration: none; color: var(--blue); } .panel-tabs a.active { background: var(--blue); color: #fff; } .panel-h1 { font-size: 1.4rem; font-weight: 800; margin: 0 0 8px; } .panel-h2 { font-size: 1.05rem; font-weight: 700; margin: 24px 0 12px; } .panel-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .panel-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 16px 0; } .pstat { background: #fff; border-radius: 16px; padding: 16px; box-shadow: var(--card-shadow); display: flex; flex-direction: column; gap: 6px; color: var(--ink); transition: transform .2s, box-shadow .2s; } .pstat:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); text-decoration: none; } .pstat span { color: var(--muted); font-size: .82rem; } .pstat strong { font-size: 1.6rem; color: var(--blue); } .order-list { display: flex; flex-direction: column; gap: 10px; } .order-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: var(--card-shadow); color: var(--ink); } .order-row:hover { text-decoration: none; box-shadow: var(--card-shadow-hover); } .order-row small { display: block; color: var(--muted); margin-top: 2px; } .order-row b { grid-column: 1 / -1; color: var(--blue); } .info-list { margin: 0; display: flex; flex-direction: column; gap: 10px; } .info-list > div { display: flex; gap: 12px; } .info-list dt { width: 110px; flex-shrink: 0; color: var(--muted); font-size: .88rem; } .info-list dd { margin: 0; flex: 1; line-height: 1.9; } .info-list.admin-card { max-width: 760px; } .chips + .table-wrap { margin-top: 4px; } @media (min-width: 768px) { .hero { padding: 40px 48px; } .filter-bar { grid-template-columns: 1fr 220px 180px auto; } .checkout-grid { grid-template-columns: 1fr 360px; } .panel-stats { grid-template-columns: repeat(4, 1fr); } .order-row { grid-template-columns: 1fr auto auto; } .order-row b { grid-column: auto; } .stat-grid { grid-template-columns: repeat(4, 1fr); } .cart-thumb { width: 96px; height: 96px; } } .stat strong.sm { font-size: 1rem; } /* Product specs */ .specs-with-chart { margin-top: 8px; } .spec-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 12px; } .spec-group { background: #fff; border: 1px solid rgba(16, 33, 63, .06); border-radius: 18px; box-shadow: var(--card-shadow, 0 1px 4px rgba(16, 33, 63, .05)); overflow: hidden; } .spec-group-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px; background: linear-gradient(135deg, #eaf2ff, #fff); border-bottom: 1px solid rgba(16, 33, 63, .06); } .spec-group-head h3 { margin: 0; font-size: 1rem; } .spec-group-icon, .spec-item-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--blue); font-weight:700; line-height:1; } .spec-group-icon { width: 30px; height: 30px; border-radius: 10px; background: rgba(27, 95, 216, .08); font-size: 1rem; } .spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; padding: 12px; } .spec-cell { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 96px; padding: 12px 14px; border-radius: 12px; background: #f8faff; border: 1px solid rgba(16, 33, 63, .04); } .spec-label { display: flex; align-items: center; gap: 8px; color: var(--muted, #7d8799); font-size: .8rem; line-height: 1.6; } .spec-item-icon { width: 20px; font-size: .9rem; } .spec-cell b { display: block; color: var(--ink, #1c1f26); font-size: .92rem; line-height: 1.7; word-break: break-word; } @media (max-width: 480px) { .spec-grid { grid-template-columns: 1fr; } .spec-cell { min-height: 80px; } } /* ===================================================================== Quick view panel, shimmer, product page, reviews ===================================================================== */ .cart-badge[hidden] { display: none; } .product-grid, .product-grid.wrap { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, 1fr); overflow: visible; } @media (min-width: 640px) { .product-grid, .product-grid.wrap { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1000px) { .product-grid, .product-grid.wrap { grid-template-columns: repeat(4, 1fr); } } .product-card.selected { outline: 2px solid var(--blue); } .product-card .thumb, .product-card h3 a { cursor: pointer; } .add-cart-btn { position: absolute; top: 8px; left: 8px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 0; background: #fff; box-shadow: var(--card-shadow); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s, transform .15s; } .discount-badge + .add-cart-btn { top: 40px; } .add-cart-btn:hover { background: var(--blue); color: #fff; transform: scale(1.08); } .discount-badge.static { position: static; display: inline-block; } .card-more { margin: 0 12px 12px; padding: 7px 0; border: 1px solid #dbe1ec; border-radius: 10px; background: #fff; color: var(--blue); font: inherit; font-size: .8rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; transition: background .15s; } .card-more:hover { background: var(--blue-soft); } .product-card.selected .card-more .icon { transform: rotate(180deg); } .toast { position: fixed; bottom: 76px; left: 50%; transform: translateX(-50%); background: #10213f; color: #fff; padding: 10px 22px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.25); z-index: 90; font-size: .9rem; animation: toast-in .25s ease-out; } @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } } /* Quick view */ .qv-wrap { grid-column: 1 / -1; position: relative; padding-top: 12px; animation: qv-open .25s ease-out; } @keyframes qv-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .qv-wrap::before { content: ""; position: absolute; top: 4px; right: var(--caret, 50%); width: 16px; height: 16px; background: #fff; transform: translateX(50%) rotate(45deg); border-radius: 3px; box-shadow: -2px -2px 5px rgba(16,33,63,.06); z-index: 1; } .qv { position: relative; background: #fff; border-radius: 20px; box-shadow: var(--card-shadow-hover); padding: 20px; height: 470px; overflow: hidden; border: 1px solid rgba(27,95,216,.12); } .qv-close { position: absolute; top: 12px; left: 12px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #f1f4fa; cursor: pointer; display: flex; align-items: center; justify-content: center; } .qv-close:hover { background: #e2e8f4; } .qv-body { display: grid; grid-template-columns: 1fr; gap: 16px; height: 100%; overflow-y: auto; padding-inline-end: 4px; } .qv-gallery { display: flex; flex-direction: column; gap: 10px; } .qv-main { background: linear-gradient(180deg, #fff, #f6f8fc); border-radius: 14px; height: 200px; display: flex; align-items: center; justify-content: center; padding: 8px; box-sizing: border-box; } .qv-main img { max-width: 100%; max-height: 100%; object-fit: contain; } .qv-thumbs { display: flex; gap: 8px; overflow-x: auto; } .qv-thumbs button { width: 56px; height: 56px; flex-shrink: 0; padding: 3px; border: 2px solid transparent; border-radius: 10px; background: #f6f8fc; cursor: pointer; } .qv-thumbs button.on { border-color: var(--blue); } .qv-thumbs img { width: 100%; height: 100%; object-fit: contain; } .qv-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .qv-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .qv-cat { color: var(--muted); font-size: .8rem; } .qv-title { margin: 0; font-size: 1.05rem; line-height: 1.8; font-weight: 700; padding-inline-end: 36px; } .qv-specs { margin: 0; display: grid; gap: 4px; } .qv-specs > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; background: #f6f8fc; border-radius: 8px; font-size: .84rem; } .qv-specs dt { color: var(--muted); } .qv-specs dd { margin: 0; font-weight: 600; text-align: left; } .qv-desc { color: #3c4250; line-height: 2; font-size: .88rem; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } .qv-buy { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: #f6f8fc; border-radius: 16px; align-self: start; } .qv-price { display: flex; flex-direction: column; gap: 4px; } .qv-price strong { color: var(--blue); font-size: 1.35rem; } .qv-old { display: flex; align-items: center; gap: 8px; } .qv-old del { color: var(--muted); } .qv-price .save { color: var(--green); } .qv-stock { margin: 0; font-size: .82rem; color: var(--green); } .qv-stock.low { color: #c46a00; } .btn-outline { display: block; text-align: center; padding: 11px 24px; border-radius: 999px; border: 1.5px solid var(--blue); color: var(--blue); font-weight: 600; background: #fff; } .btn-outline:hover { background: var(--blue-soft); text-decoration: none; } .qv-error { padding: 40px 0; text-align: center; color: var(--muted); } .stars { position: relative; display: inline-block; font-size: 1rem; line-height: 1; letter-spacing: 1px; direction: ltr; } .stars-base { color: #d9dee8; } .stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: #f5a623; z-index: 1; } /* Shimmer (skeleton) */ .shimmer { display: block; background: linear-gradient(100deg, #eceff5 30%, #f8f9fc 50%, #eceff5 70%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; border-radius: 10px; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .qv-main-skel { height: 200px; border-radius: 14px; } .qv-gallery .qv-thumbs .shimmer { width: 56px; height: 56px; flex-shrink: 0; } .sk-line { height: 14px; margin-bottom: 10px; } .sk-line.tall { height: 28px; } .w30 { width: 30%; } .w40 { width: 40%; } .w60 { width: 60%; } .w80 { width: 80%; } .w100 { width: 100%; } .sk-actions { display: flex; gap: 10px; margin-top: 8px; } .sk-actions .shimmer { height: 42px; flex: 1; border-radius: 999px; } @media (min-width: 900px) { .qv { height: 380px; padding: 24px; } .qv-body { grid-template-columns: 300px 1fr 280px; gap: 28px; } .qv-main { height: 250px; } .qv-main-skel { height: 250px; } .qv-buy { align-self: stretch; justify-content: center; } } @media (min-width: 640px) and (max-width: 899px) { .qv { height: 440px; } .qv-body { grid-template-columns: 1fr 1fr; } .qv-buy { grid-column: 1 / -1; } } /* Product page */ .pd { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 8px; } .pd > * { min-width: 0; } .pd-gallery { display: flex; flex-direction: column; gap: 12px; min-width: 0; max-width: 100%; } .gallery-main { position: relative; background: #fff; border-radius: 20px; box-shadow: var(--card-shadow); padding: 16px; display: flex; align-items: center; justify-content: center; height: 300px; box-sizing: border-box; } .gallery-main img { max-width: 100%; max-height: 100%; object-fit: contain; } .gallery-thumbs { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; max-width: 100%; min-width: 0; padding: 2px 2px 6px; } .gallery-thumbs button { width: 72px; height: 72px; flex-shrink: 0; padding: 4px; border: 2px solid transparent; border-radius: 12px; background: #fff; box-shadow: var(--card-shadow); cursor: pointer; box-sizing: border-box; } .gallery-thumbs button.on { border-color: var(--blue); } .gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; } .pd-info { background: #fff; border-radius: 20px; box-shadow: var(--card-shadow); padding: 22px; display: flex; flex-direction: column; gap: 12px; } .pd-info h1 { font-size: 1.3rem; line-height: 1.8; margin: 0; } .pd-highlights { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 6px; } .pd-highlights li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; background: #f6f8fc; border-radius: 10px; font-size: .88rem; } .pd-highlights li span { color: var(--muted); } .pd-short-desc { font-size: .9rem; line-height: 1.9; color: #3c4250; } .pd-short-desc p { margin: 0 0 8px; } .pd-short-desc p:last-child { margin-bottom: 0; } .pd-short-desc ul { margin: 0 0 8px; padding-inline-start: 20px; } .pd-short-desc ul:last-child { margin-bottom: 0; } .pd-short-desc li { margin-bottom: 4px; } .pd-buy { background: #f6f8fc; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .pd-tabs { position: sticky; top: 56px; z-index: 20; display: flex; gap: 8px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); padding: 10px 0; margin: 20px 0 8px; overflow-x: auto; } .pd-tabs a { padding: 8px 20px; border-radius: 999px; background: #fff; box-shadow: var(--card-shadow); color: var(--ink); white-space: nowrap; font-size: .9rem; } .pd-tabs a:hover { text-decoration: none; color: var(--blue); } .pd-section { background: #fff; border-radius: 20px; box-shadow: var(--card-shadow); padding: 22px; margin-bottom: 16px; scroll-margin-top: 120px; } .pd-section h2 { font-size: 1.15rem; margin: 0 0 14px; } .pd-desc { line-height: 2.1; color: #3c4250; text-align: justify; } .pd-desc p { margin: 0 0 14px; } .pd-desc p:last-child { margin-bottom: 0; } .pd-desc h2, .pd-desc h3 { text-align: right; color: var(--ink); margin: 20px 0 10px; } .pd-desc h2 { font-size: 1.05rem; } .pd-desc h3 { font-size: .98rem; } .pd-desc ul, .pd-desc ol { margin: 0 0 14px; padding-inline-start: 22px; } .pd-desc a { color: var(--blue); } /* مشخصات فنی + نمودار قدرت نسبی قطعات: موبایل زیر هم (نمودار پایین)، دسکتاپ کنار هم (نمودار سمت راست) */ .specs-with-chart { display: flex; flex-direction: column; gap: 16px; } .specs-with-chart .specs-block { order: 1; } .specs-with-chart .power-chart { order: 2; } @media (min-width: 900px) { .specs-with-chart { flex-direction: row; align-items: flex-start; } .specs-with-chart .specs-block { order: 2; flex: 1 1 auto; min-width: 0; } .specs-with-chart .power-chart { order: 1; flex: 0 0 260px; position: sticky; top: 90px; } } .power-chart h2 { font-size: 1.05rem; margin: 0 0 16px; } .power-row { margin-bottom: 14px; } .power-row-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: .86rem; } .power-row-head span { color: var(--muted); } .power-row-head b { color: var(--ink); font-weight: 600; } .power-track { height: 8px; border-radius: 999px; background: var(--blue-soft, #eaf2ff); overflow: hidden; } .power-fill { height: 100%; border-radius: 999px; background: var(--blue); } .power-note { margin: 10px 0 0; line-height: 1.8; } .spec-groups { display: flex; flex-direction: column; gap: 18px; } .spec-group { background: linear-gradient(180deg, #fff 0%, #f8faff 100%); border: 1px solid rgba(16, 33, 63, .06); border-radius: 18px; padding: 14px 14px 12px; box-shadow: 0 2px 8px rgba(16, 33, 63, .04); } .spec-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .spec-group-icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--blue-soft); color: var(--blue); font-size: 1rem; flex-shrink: 0; } .spec-group h3 { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0; } .spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 12px; } .spec-cell { background: #fff; border: 1px solid rgba(16, 33, 63, .05); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .spec-label { display: inline-flex; align-items: center; gap: 6px; font-size: .83rem; color: var(--muted); min-width: 0; flex: 1 1 auto; } .spec-item-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .spec-cell b { font-size: .9rem; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; text-align: left; flex-shrink: 0; } @media (max-width: 640px) { .spec-group { padding: 12px 10px 10px; } .spec-grid { grid-template-columns: 1fr; } .spec-cell { align-items: flex-start; } .spec-cell b { max-width: 52%; } } .rating-summary { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .rating-summary strong { font-size: 1.8rem; color: var(--blue); } .review-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; } .review { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; } .review header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .review p { margin: 0; line-height: 2; color: #3c4250; } .verified { background: #dff5e6; color: #17692f; font-size: .72rem; padding: 2px 10px; border-radius: 999px; } .review-form { background: #f9fafc; border: 1px solid var(--line); box-shadow: none; } .review-form h3 { margin: 0; font-size: 1.05rem; } .rate-field { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 12px; padding: 10px 16px; } .rate-field-label { font-size: .88rem; color: var(--muted); font-weight: 500; } .rate-input { border: 0; padding: 0; margin: 0; display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 2px; direction: ltr; } .rate-input input { position: absolute; opacity: 0; width: 1px; height: 1px; } .rate-input label { font-size: 1.7rem; color: #d9dee8; cursor: pointer; line-height: 1; transition: color .1s, transform .1s; display: inline; flex-direction: row; } .rate-input label:hover { transform: scale(1.12); } .rate-input input:checked ~ label, .rate-input label:hover, .rate-input label:hover ~ label { color: #f5a623; } .review-form textarea { background: #fff; } .review-form-footer { display: flex; justify-content: flex-end; } .review-form-footer .btn-pill { padding: 10px 28px; } @media (min-width: 900px) { .pd { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } .pd-highlights { grid-template-columns: 1fr 1fr; } .pd-tabs { top: 68px; } .gallery-main { height: 400px; } } /* ---------- Admin: extended ---------- */ .admin-card { background: #fff; border-radius: 14px; box-shadow: var(--card-shadow); padding: 18px; margin-bottom: 16px; } .admin-h2.first { margin-top: 0; } .stat.accent { background: linear-gradient(135deg, var(--blue), var(--blue-dark)); } .stat.accent span, .stat.accent strong { color: #fff; } .dash-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 0; } .bars { display: flex; align-items: flex-end; gap: 6px; height: 180px; padding-top: 8px; } .bar-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; } .bar { width: 100%; max-width: 26px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--sky), var(--blue)); min-height: 2px; } .bar-col small { color: var(--muted); font-size: .7rem; } .mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .mini-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .88rem; } .admin-cols { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; } .admin-form.flat { background: none; box-shadow: none; padding: 0; max-width: none; } .admin-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .admin-filters input[type=search] { flex: 1; min-width: 180px; } .spec-rows { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; } .spec-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; } .spec-row select { grid-column: 1; } .spec-row button { justify-self: end; } .checks.col { display: flex; flex-direction: column; gap: 10px; } .check { display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: .9rem; } .gallery-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; } .gallery-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; } .gallery-item img { width: 100%; height: 80px; object-fit: contain; } .img-deletable { position: relative; } .img-delete-btn { position: absolute; top: 6px; left: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: #fff; box-shadow: var(--card-shadow); color: #d23c3c; font-size: .85rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; } .img-delete-btn:hover { background: #fde8e8; } .img-deletable.marked-delete img { opacity: .35; filter: grayscale(1); } .img-deletable.marked-delete::after { content: "حذف می‌شود"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .78rem; color: #d23c3c; font-weight: 600; pointer-events: none; } .img-deletable.marked-delete .img-delete-btn { background: #d23c3c; color: #fff; } .sticky-actions { position: sticky; bottom: 12px; background: #fff; padding: 12px; border-radius: 14px; box-shadow: var(--card-shadow-hover); } .pager { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; } .pager a { min-width: 34px; height: 34px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: #fff; box-shadow: var(--card-shadow); color: var(--ink); } .pager a.on { background: var(--blue); color: #fff; } .pager a:hover { text-decoration: none; } .review-admin { display: flex; flex-direction: column; gap: 10px; } .review-card header { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; } .review-card p { margin: 0 0 10px; line-height: 2; } .review-card.hidden-review { opacity: .6; border: 1px dashed #b8c2d6; } .review-card .actions { display: flex; gap: 12px; align-items: center; } .review-card .actions form { margin: 0; } .admin-side nav a.active { background: #1a56b8; } @media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } .dash-grid { grid-template-columns: 2fr 1fr; } .admin-cols { grid-template-columns: 1fr 320px; } .spec-row { grid-template-columns: 1fr 1.2fr 170px auto; } .spec-row select { grid-column: auto; } } /* ===================================================================== Gradient image placeholders, fixed spec summary, compact quick view ===================================================================== */ .lazy-img { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; background-color: #eef1f7; } .lazy-img::before { content: ""; position: absolute; inset: 0; background: inherit; filter: saturate(1.15) blur(18px); transform: scale(1.2); transition: opacity .5s ease; } .lazy-img.loaded { background-image: none !important; background-color: transparent !important; } .lazy-img.loaded::before { opacity: 0; } /* تصویر هیچ‌وقت به جاوااسکریپت برای نمایش وابسته نیست (قبلاً تا رسیدن رویداد load نامرئی می‌ماند)؛ فقط یک محوشدن کوتاه هنگام ساخت عنصر دارد. کلاس .loaded فقط گرادیان پیش‌نمایش را برمی‌دارد. */ .lazy-img img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; opacity: 1; transition: transform .3s; animation: img-in .35s ease-out; } @keyframes img-in { from { opacity: 0; } to { opacity: 1; } } @keyframes img-fallback { to { opacity: 1; } } .product-card:hover .lazy-img img { transform: scale(1.05); } .product-card .thumb { padding: 0; aspect-ratio: 4 / 3; } .product-card .thumb .lazy-img { border-radius: 0; } /* قاب تصویر کارت ثابت ۴:۳؛ عکس‌های بلند/بزرگ نباید کارت را بلندتر کنند */ .product-card .thumb { position: relative; overflow: hidden; flex: none; } .product-card .thumb .lazy-img { position: absolute; inset: 0; } .product-card .thumb .lazy-img img { padding: 8px; box-sizing: border-box; } .qv-main { padding: 0; overflow: hidden; } .qv-main .lazy-img { border-radius: 14px; } .qv-main .lazy-img img { padding: 8px; box-sizing: border-box; } .qv-thumbs button { overflow: hidden; } .qv-thumbs .lazy-img, .gallery-thumbs .lazy-img { border-radius: 8px; } .gallery-main { padding: 0; overflow: hidden; align-items: stretch; } .gallery-main .lazy-img { border-radius: 20px; } .gallery-main .lazy-img img { padding: 16px; box-sizing: border-box; } .gallery-main .discount-badge { z-index: 3; } .gallery-thumbs button { overflow: hidden; } .gallery-thumbs .lazy-img img { padding: 0; } /* Fixed-format summary under each product card */ .spec-summary { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 5px; } .spec-summary li { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 5px 7px; background: #f3f6fc; border-radius: 8px; font-size: .68rem; color: #3a4459; direction: ltr; } .spec-summary li .icon { flex-shrink: 0; color: var(--blue); } .spec-summary li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .spec-summary.chips { display: flex; flex-wrap: wrap; direction: rtl; } .spec-summary.chips li { direction: rtl; } .product-card .info { padding-bottom: 4px; } .pd-info .spec-summary { grid-template-columns: 1fr 1fr; } /* Card variant: always exactly two fixed-height rows, two columns. with GPU: CPU | RAM / HDD | GPU without GPU: CPU (full height) | RAM / (CPU) | HDD */ .spec-summary.compact { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, 36px); gap: 5px; direction: ltr; } .spec-summary.compact li { box-sizing: border-box; height: 36px; padding: 3px 6px; gap: 4px; font-size: .66rem; } .spec-summary.compact li span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow: hidden; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.3; } .spec-summary.compact.chips { display: grid; grid-template-columns: 1fr; direction: rtl; } .spec-summary.compact.chips li { direction: rtl; } .spec-summary.compact.no-gpu .s-cpu { grid-column: 1; grid-row: 1 / span 2; height: auto; } .spec-summary.compact.no-gpu .s-cpu span { -webkit-line-clamp: 4; line-clamp: 4; } .spec-summary.compact.no-gpu .s-ram { grid-column: 2; grid-row: 1; } .spec-summary.compact.no-gpu .s-hard { grid-column: 2; grid-row: 2; } .pd-info .spec-summary li { font-size: .82rem; padding: 8px 10px; } /* Quick view: compact, about the height of one card */ .qv-wrap { padding-top: 10px; } .qv { height: 400px; padding: 14px; border-radius: 18px; } .qv-body { gap: 12px; } .qv-main { height: 140px; } .qv-main-skel { height: 140px; } .qv-thumbs button, .qv-gallery .qv-thumbs .shimmer { width: 42px; height: 42px; } .qv-title { font-size: .95rem; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .qv-specs { gap: 3px; } .qv-specs > div { padding: 4px 9px; font-size: .78rem; } .qv-buy { padding: 10px 12px; gap: 8px; } .qv-price strong { font-size: 1.15rem; } .qv-buy .btn-pill { padding: 11px 14px; min-height: 44px; font-size: .86rem; width: 100%; justify-content: center; border-radius: 12px; } .qv-secondary-actions { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid #e3e9f2; padding-top: 8px; margin-top: 4px; } .qv-action-link { display: inline-flex; justify-content: center; align-items: center; gap: 7px; min-height: 36px; padding: 6px 4px; margin: 0; border: 0; border-radius: 6px; background: transparent; box-shadow: none; color: var(--blue); font: inherit; font-size: .8rem; font-weight: 500; line-height: 1.7; text-decoration: none; cursor: pointer; } .qv-action-link:hover { color: #1545aa; background: transparent; text-decoration: underline; text-underline-offset: 4px; } .qv-action-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .qv-action-link[aria-pressed="true"] { color: var(--green); background: transparent; } .qv-details-link { color: #536079; } .qv-details-link .icon { transform: rotate(90deg); } @media (min-width: 640px) and (max-width: 899px) { .qv { height: 340px; } .qv-body { grid-template-columns: 200px 1fr; } .qv-buy { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; } .qv-buy > * { flex: 1 1 auto; } } @media (min-width: 900px) { .qv { height: 320px; padding: 16px 18px; } .qv-body { grid-template-columns: 230px 1fr 250px; gap: 22px; } .qv-main { height: 200px; } .qv-main-skel { height: 200px; } .qv-specs { grid-template-columns: 1fr 1fr; } .qv-buy { align-self: center; } } .rich-editor { background: #fff; border-radius: 10px; overflow: hidden; } .rich-editor .ql-toolbar { border-radius: 10px 10px 0 0; font-family: inherit; } .rich-editor .ql-container { border-radius: 0 0 10px 10px; font-family: inherit; font-size: .95rem; min-height: 200px; } .rich-editor .ql-editor { min-height: 200px; } .laptop-fields { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; } .laptop-fields[hidden] { display: none; } .laptop-fields label { display: flex; flex-direction: column; gap: 6px; font-size: .88rem; } .laptop-fields label.full, .laptop-fields div.full { grid-column: 1 / -1; } .laptop-fields input[type=text], .laptop-fields input[type=number], .laptop-fields textarea { padding: 9px 12px; border: 1px solid #cfd6e2; border-radius: 8px; font: inherit; resize: vertical; } @media (min-width: 768px) { .laptop-fields { grid-template-columns: 1fr 1fr; } } /* مدیریت نمایش تصاویر در سایت (شرکتی/شخصی) */ .gallery-item .img-origin { font-size: .72rem; padding: 1px 8px; border-radius: 999px; background: var(--line); } .gallery-item .img-origin.personal { background: #fde8c8; } .gallery-item .img-visible { display: flex; align-items: center; gap: 4px; font-size: .78rem; cursor: pointer; } /* مشتری عمده */ .wholesale-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: #fff3cd; color: #7a5200; border: 1px solid #f0d58a; font-size: .8rem; font-weight: 600; white-space: nowrap; } .wholesale-badge.small { font-size: .7rem; padding: 0 8px; } .wholesale-badge .icon, .wholesale-badge svg { width: 14px; height: 14px; } /* ردیف افقی اسکرولی (لوازم جانبی صفحه‌ی اول): یک ردیف، کشیدن چپ و راست تا ۸ کالا */ .product-grid.product-row { display: flex; grid-template-columns: none; overflow-x: auto; overflow-y: hidden; gap: 12px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: 14px; } .product-grid.product-row > .product-card { flex: 0 0 min(250px, 72vw); } .product-grid.product-row > .qv-wrap { display: none; } /* ---------- Shop: out-of-stock cards + mobile filter toggle ---------- */ .product-card.out .thumb { filter: grayscale(.85); opacity: .7; } .product-card.out .price strong { color: var(--muted); font-weight: 600; } .filters-toggle { position: absolute; opacity: 0; pointer-events: none; } .filters-btn { display: none; align-items: center; justify-content: center; gap: 8px; margin: 0 0 12px; padding: 10px 16px; border-radius: 12px; border: 1px solid #dbe1ec; background: #fff; color: var(--blue); font-size: .9rem; cursor: pointer; user-select: none; } .filters-toggle:focus-visible + .filters-btn { outline: 2px solid var(--blue); } @media (max-width: 899px) { .filters-btn { display: flex; } .filters-toggle ~ .chips, .filters-toggle ~ .filter-bar, .filters-toggle ~ .shop-layout .filter-panel { display: none; } .filters-toggle:checked ~ .chips { display: flex; } .filters-toggle:checked ~ .filter-bar { display: grid; } .filters-toggle:checked ~ .shop-layout .filter-panel { display: block; } } /* ---------- Admin gallery: drag-to-reorder ---------- */ .gallery-admin[data-sortable] .gallery-item { cursor: grab; position: relative; transition: box-shadow .15s, opacity .15s; } .gallery-admin[data-sortable] .gallery-item.dragging { opacity: .45; cursor: grabbing; box-shadow: 0 6px 18px rgba(16,33,63,.18); } .gallery-admin[data-sortable] .gallery-item.is-main { border-color: var(--blue); } .gallery-item .img-order { position: absolute; top: 6px; right: 6px; z-index: 2; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(16,33,63,.75); color: #fff; font-size: .7rem; line-height: 22px; text-align: center; pointer-events: none; } .gallery-item.is-main .img-order { background: var(--blue); } .gallery-item .img-move { display: flex; gap: 4px; } .gallery-item .img-move button { width: 28px; height: 24px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font-size: .7rem; line-height: 1; cursor: pointer; } .gallery-item .img-move button:hover { background: var(--blue-soft); color: var(--blue); } /* ---------- Import (WordPress CSV / old app DB) ---------- */ .import-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; } .import-stats .stat { background: #f6f8fc; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; } .import-stats .stat span { font-size: .74rem; color: var(--muted); } .import-stats .stat strong { font-size: 1.05rem; } .import-stats .stat.warn { background: #fff4de; } .admin-cols.tight { gap: 18px; } .wc-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; } .wc-filters input, .wc-filters select { padding: 8px 10px; border: 1px solid #dbe1ec; border-radius: 10px; font: inherit; background: #fff; } .wc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; } .wc-table { max-height: 520px; overflow: auto; } .wc-table thead th { position: sticky; top: 0; background: #fff; z-index: 1; } .wc-table tr[hidden] { display: none; } .wc-table tr.wc-done { opacity: .55; } .wc-options { margin-top: 14px; } .danger-zone { border: 1px dashed #d23c3c; border-radius: 12px; padding: 10px 14px; margin: 12px 0; } .danger-zone legend { color: #d23c3c; font-size: .85rem; padding: 0 6px; } .clear-form { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .job-panel .job-bar { height: 10px; border-radius: 999px; background: #e6ebf4; overflow: hidden; margin: 8px 0; } .job-panel .job-fill { height: 100%; background: var(--blue); border-radius: 999px; transition: width .4s; } .job-panel .job-log { background: #0f1b33; color: #cdd8ef; border-radius: 10px; padding: 10px 12px; font-size: .74rem; line-height: 1.7; max-height: 220px; overflow: auto; white-space: pre-wrap; direction: rtl; text-align: right; } .text-danger { color: #d23c3c; } /* ---------- Pager + About ---------- */ .pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 22px 0 8px; } .pager a, .pager span { min-width: 38px; padding: 8px 12px; border-radius: 10px; background: #fff; border: 1px solid #dbe1ec; color: var(--ink); text-align: center; font-size: .9rem; } .pager a:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; } .pager .on { background: var(--blue); border-color: var(--blue); color: #fff; } .pager .gap { border-color: transparent; background: transparent; } .about { background: #fff; border-radius: var(--radius, 16px); box-shadow: var(--card-shadow); padding: 20px 22px; margin-bottom: 20px; line-height: 2; } .about p { margin: 0 0 12px; text-align: justify; } .about-points, .contact-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; } .about-points { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .about-points li { display: flex; align-items: center; gap: 8px; background: #f3f6fc; border-radius: 10px; padding: 10px 12px; font-size: .9rem; } .about-points .icon { color: var(--blue); flex-shrink: 0; } .contact-list a { font-size: 1.1rem; font-weight: 600; color: var(--blue); } .trust-seals { display: flex; gap: 12px; justify-content: center; margin-top: 10px; } .trust-seals img { height: 64px; width: auto; } /* ===================================================================== About page (professional layout) ===================================================================== */ .ab { display: flex; flex-direction: column; gap: 56px; padding: 8px 0 24px; } .ab h1, .ab h2, .ab h3, .ab p, .ab ul, .ab ol { margin: 0; } .ab-section { display: flex; flex-direction: column; gap: 22px; } .ab-head { display: flex; flex-direction: column; gap: 8px; text-align: center; max-width: 720px; margin: 0 auto; } .ab-head h2, .ab-story h2, .ab-contact h2, .ab-cta h2 { font-size: 1.55rem; font-weight: 800; line-height: 1.5; } .ab-head p { color: var(--muted); line-height: 2; } .ab-note { text-align: center; color: var(--muted); font-size: .85rem; line-height: 2; } /* hero */ .ab-hero { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 24px; overflow: hidden; padding: 44px 40px; border-radius: 28px; color: #fff; background: radial-gradient(900px 380px at 100% 0%, rgba(255,255,255,.18), transparent 60%), linear-gradient(135deg, #0f3d91 0%, #1a56b8 55%, #2f7cf0 100%); } .ab-hero::after { content: ""; position: absolute; inset: auto -60px -90px auto; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,.07); } .ab-hero-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; } .ab-eyebrow { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.16); font-size: .82rem; } .ab-hero h1 { font-size: clamp(1.45rem, 3.2vw, 2.15rem); font-weight: 800; line-height: 1.7; } .ab-hero p { line-height: 2.1; opacity: .92; max-width: 560px; } .ab-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; } .ab-hero .btn-pill { background: #fff; color: var(--blue); } .ab-btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.7); color: #fff; font-weight: 600; } .ab-btn-ghost:hover { background: rgba(255,255,255,.14); text-decoration: none; } .ab-hero-art { position: relative; z-index: 1; display: flex; justify-content: center; } .ab-hero-art img { width: 100%; max-width: 380px; height: auto; filter: drop-shadow(0 18px 28px rgba(0,0,0,.28)); } /* stats */ .ab-stats { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: #fff; border-radius: 20px; box-shadow: var(--card-shadow); margin-top: -34px; position: relative; z-index: 2; } .ab-stats li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 10px; text-align: center; } .ab-stats li + li { border-inline-start: 1px solid #e6ebf4; } .ab-stats strong { font-size: 1.35rem; color: var(--blue); font-weight: 800; } .ab-stats span { font-size: .82rem; color: var(--muted); } /* story */ .ab-story { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: start; } .ab-story-text { display: flex; flex-direction: column; gap: 14px; } .ab-story-text p { line-height: 2.1; text-align: justify; } .ab-checks { list-style: none; padding: 0; display: grid; gap: 12px; } .ab-checks li { display: flex; gap: 14px; align-items: flex-start; background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: var(--card-shadow); } .ab-checks .icon { color: var(--blue); flex-shrink: 0; margin-top: 2px; } .ab-checks div { display: flex; flex-direction: column; gap: 2px; } .ab-checks span { color: var(--muted); font-size: .85rem; } /* product types */ .ab-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .ab-type { position: relative; display: flex; flex-direction: column; gap: 12px; background: #fff; border-radius: 22px; padding: 24px 22px; box-shadow: var(--card-shadow); border: 1px solid transparent; transition: transform .2s, box-shadow .2s; } .ab-type:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(20,30,60,.14); } .ab-type h3 { font-size: 1.15rem; } .ab-type p { color: #4a5262; line-height: 2; flex: 1; } .ab-type a { font-weight: 600; } .ab-type-ic { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; background: var(--blue-soft); color: var(--blue); } .ab-type-hot { border-color: var(--blue); background: linear-gradient(180deg, #f3f8ff, #fff 60%); } .ab-badge { position: absolute; top: 16px; left: 16px; padding: 3px 12px; border-radius: 999px; background: var(--blue); color: #fff; font-size: .72rem; } /* steps */ .ab-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .ab-steps li { position: relative; display: flex; flex-direction: column; gap: 8px; background: #fff; border-radius: 20px; padding: 24px 18px 20px; box-shadow: var(--card-shadow); } .ab-steps li:not(:last-child)::after { content: ""; position: absolute; top: 42px; inset-inline-end: -18px; width: 18px; border-top: 2px dashed #b9c8e6; } .ab-step-n { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 800; } .ab-steps h3 { font-size: 1.02rem; } .ab-steps p { color: #4a5262; font-size: .9rem; line-height: 2; } /* warranty cards */ .ab-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .ab-card { display: flex; flex-direction: column; gap: 10px; background: #fff; border-radius: 20px; padding: 22px 18px; box-shadow: var(--card-shadow); } .ab-card > .icon { color: var(--blue); } .ab-card h3 { font-size: 1.02rem; } .ab-card p { color: #4a5262; font-size: .9rem; line-height: 2; } /* contact */ .ab-contact { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; background: linear-gradient(135deg, #0f2a5c, #17408a); color: #fff; border-radius: 28px; padding: 36px 34px; } .ab-contact a { color: #fff; } .ab-contact-main { display: flex; flex-direction: column; gap: 16px; } .ab-contact p { line-height: 2.1; opacity: .92; } .ab-phones { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; } .ab-phones a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 14px; background: rgba(255,255,255,.12); font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; } .ab-phones a:hover { background: rgba(255,255,255,.22); text-decoration: none; } .ab-meta { list-style: none; padding: 0; display: grid; gap: 8px; font-size: .92rem; } .ab-meta li { display: flex; align-items: center; gap: 8px; opacity: .95; } .ab-meta a { text-decoration: underline; text-underline-offset: 3px; } .ab-social { display: flex; flex-wrap: wrap; gap: 10px; } .ab-social a { padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.45); font-size: .85rem; } .ab-seals { display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; background: rgba(255,255,255,.08); border-radius: 20px; padding: 20px; } .ab-seals h3 { font-size: .95rem; opacity: .9; } .ab-seals > div { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .ab-seals a { display: block; background: #fff; border-radius: 14px; padding: 6px; } .ab-seals img { display: block; width: 90px; height: 90px; object-fit: contain; } /* CTA */ .ab-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--blue-soft); border-radius: 24px; padding: 28px 32px; } .ab-cta div { display: flex; flex-direction: column; gap: 6px; } .ab-cta p { color: #4a5262; } .ab-cta-btn { display: inline-block; padding: 13px 30px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 700; } .ab-cta-btn:hover { text-decoration: none; filter: brightness(1.08); } @media (max-width: 960px) { .ab { gap: 40px; } .ab-hero { grid-template-columns: 1fr; padding: 30px 22px 26px; border-radius: 22px; } .ab-hero-art { order: -1; } .ab-hero-art img { max-width: 240px; } .ab-stats { grid-template-columns: repeat(2, 1fr); margin-top: -24px; } .ab-stats li:nth-child(3) { border-inline-start: 0; } .ab-stats li:nth-child(n+3) { border-top: 1px solid #e6ebf4; } .ab-story { grid-template-columns: 1fr; } .ab-types { grid-template-columns: 1fr; } .ab-steps { grid-template-columns: repeat(2, 1fr); } .ab-steps li::after { display: none; } .ab-trust-grid { grid-template-columns: repeat(2, 1fr); } .ab-contact { grid-template-columns: 1fr; padding: 26px 20px; border-radius: 22px; } .ab-cta { padding: 22px 20px; } } @media (max-width: 520px) { .ab-steps, .ab-trust-grid { grid-template-columns: 1fr; } .ab-head h2, .ab-story h2, .ab-contact h2, .ab-cta h2 { font-size: 1.3rem; } .ab-phones a { width: 100%; justify-content: center; } } /* ===================================================================== Cart page v2: steps, richer items, sticky summary, recommendations ===================================================================== */ .cart-page { display: flex; flex-direction: column; gap: 22px; padding-bottom: 12px; } .cart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; } .cart-head h1 { margin: 0; font-size: 1.5rem; font-weight: 800; } .cart-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); } .cart-steps li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border-radius: 999px; background: #eef2f9; } .cart-steps li span { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #cfd8ea; color: #fff; font-size: .72rem; font-weight: 700; } .cart-steps li.on { background: var(--blue-soft); color: var(--blue); font-weight: 700; } .cart-steps li.on span { background: var(--blue); } .cart-item { align-items: stretch; gap: 16px; padding: 14px; border: 1px solid transparent; transition: border-color .15s; } .cart-item:hover { border-color: rgba(27,95,216,.18); } .cart-item.out { background: #fafafa; } .cart-item.out .cart-thumb img { filter: grayscale(1); opacity: .6; } .cart-thumb { width: 104px; height: 104px; align-self: center; } .cart-info { justify-content: center; gap: 8px; } .cart-tags { display: flex; flex-wrap: wrap; gap: 6px; } .cart-tags span { padding: 2px 10px; border-radius: 999px; background: #eef2f9; color: #4a5262; font-size: .74rem; } .cart-tags .warn { background: #fff4de; color: #a96800; } .cart-tags .bad { background: #fde8e8; color: #c23030; } .cart-unit { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: .88rem; } .cart-unit b { color: var(--ink); } .cart-unit del { color: var(--muted); font-size: .78rem; } .cart-remove { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 4px 6px; color: #c23030; font: inherit; font-size: .82rem; cursor: pointer; border-radius: 8px; } .cart-remove:hover { background: #fde8e8; } .cart-line-box { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; min-width: 120px; } .cart-line { font-size: 1rem; } .cart-line-save { font-size: .74rem; color: #12805c; background: #e3f6ee; padding: 2px 8px; border-radius: 999px; } .cart-summary { position: sticky; top: 84px; align-self: start; gap: 14px; } .cart-summary .sum-row.save b { color: #12805c; } .cart-summary .btn-pill.pay { text-align: center; } .cart-summary .btn-pill.disabled { background: #cfd6e4; color: #fff; pointer-events: none; } .cart-mini-trust { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px dashed #dbe1ec; display: grid; gap: 8px; font-size: .8rem; color: #4a5262; } .cart-mini-trust li { display: flex; align-items: center; gap: 8px; } .cart-mini-trust .icon { color: var(--blue); flex-shrink: 0; } .cart-reco { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; } .cart-reco-head { display: flex; flex-direction: column; gap: 4px; } .cart-reco-head h2 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 1.2rem; font-weight: 800; } .cart-reco-head h2 .icon { color: var(--blue); } .cart-reco-head p { margin: 0; color: var(--muted); font-size: .88rem; } @media (max-width: 720px) { .cart-item { flex-wrap: wrap; } .cart-thumb { width: 84px; height: 84px; } .cart-line-box { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; min-width: 0; border-top: 1px dashed #e6ebf4; padding-top: 10px; } .cart-summary { position: static; } } /* ---------- Import images page (per-image selection) ---------- */ .plain-list { margin: 0; padding-inline-start: 20px; display: grid; gap: 8px; line-height: 2; } .plain-list code { background: #eef2f9; padding: 1px 6px; border-radius: 6px; } .wc-products { display: flex; flex-direction: column; gap: 8px; max-height: 640px; overflow: auto; padding: 2px; } .wc-product { background: #fff; border: 1px solid #e3e8f2; border-radius: 14px; } .wc-product[hidden] { display: none; } .wc-product[open] { border-color: rgba(27,95,216,.35); } .wc-product > summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; } .wc-product > summary::-webkit-details-marker { display: none; } .wc-p-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wc-p-count { color: var(--muted); font-size: .82rem; white-space: nowrap; } .wc-empty { padding: 0 14px 12px; margin: 0; } .wc-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 4px 14px 14px; } .wc-img { display: flex; flex-direction: column; gap: 6px; border: 1px solid #e3e8f2; border-radius: 12px; padding: 8px; background: #fafbfe; } .wc-img.done { background: #f1faf5; border-color: #bfe6d1; } .wc-img label { position: relative; display: block; cursor: pointer; } .wc-img input[type=checkbox] { position: absolute; top: 6px; inset-inline-start: 6px; z-index: 1; width: 18px; height: 18px; } .wc-img img { display: block; width: 100%; height: 110px; object-fit: contain; background: #fff; border-radius: 8px; } .wc-img-name { font-size: .7rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wc-img-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: .75rem; } .wc-img-actions .ok { color: #12805c; } .wc-actions { display: flex; flex-wrap: wrap; gap: 8px; } .wc-snippet { width: 100%; margin-top: 10px; font-family: Consolas, monospace; font-size: .75rem; border: 1px solid #dbe1ec; border-radius: 10px; padding: 10px; background: #0f1b33; color: #cdd8ef; } /* ===================================================================== Performance panel (CPU/GPU position lines + use-case chart) ===================================================================== */ .specs-with-chart { display: block; } .perf { background: #fff; border-radius: 22px; box-shadow: var(--card-shadow); padding: 22px 22px 18px; margin: 18px 0; display: flex; flex-direction: column; gap: 14px; } .perf h2, .perf h3, .perf p, .perf ul { margin: 0; } .perf-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .perf-head h2 { font-size: 1.25rem; font-weight: 800; } .perf-sub { color: var(--muted); font-size: .82rem; } .perf-score { display: flex; flex-direction: column; align-items: center; min-width: 96px; padding: 8px 16px; border-radius: 16px; background: linear-gradient(135deg, #0f3d91, #2f7cf0); color: #fff; } .perf-score b { font-size: 1.7rem; line-height: 1.2; } .perf-score span { font-size: .74rem; opacity: .92; } .perf-headline { font-weight: 700; line-height: 2; font-size: 1.02rem; color: var(--ink); } .perf-details { color: #4a5262; line-height: 2; font-size: .9rem; } .perf-lines { display: grid; gap: 22px; padding: 6px 0 4px; } .perf-line { display: flex; flex-direction: column; gap: 8px; } .perf-line-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; } .perf-item { font-weight: 700; color: var(--blue); } .perf-tier { margin-inline-start: auto; font-size: .78rem; padding: 2px 10px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); } .perf-track { position: relative; height: 92px; margin: 0 8px; direction: ltr; } .perf-rail { position: absolute; left: 0; right: 0; top: 40px; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #cfd8ea, #9db8e8 45%, #2f7cf0 80%, #0f3d91); opacity: .55; } .perf-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #5b95f0, #0f3d91); } .perf-mark { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; } .perf-mark i { width: 2px; height: 10px; background: #8fa3c8; margin-top: 36px; } .perf-mark em { font-style: normal; font-size: .68rem; color: #5a6378; white-space: nowrap; margin-top: 3px; } .perf-mark.b em { margin-top: 18px; } .perf-mark.b i { height: 24px; } .perf-pin { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 2; } .perf-pin b { background: var(--blue); color: #fff; font-size: .72rem; padding: 3px 10px; border-radius: 8px; white-space: nowrap; } .perf-pin i { width: 3px; height: 30px; background: var(--blue); } .perf-pin::after { content: ""; position: absolute; top: 58px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid var(--blue); box-shadow: 0 2px 8px rgba(15,61,145,.4); } .perf-line-foot { color: #4a5262; font-size: .82rem; line-height: 1.9; } .perf-h3 { font-size: 1.05rem; font-weight: 800; margin-top: 6px; } .perf-cases { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 22px; } .perf-cases li { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; background: #f7f9fd; border: 1px solid transparent; } .perf-cases li.top { background: #f1f7ff; border-color: rgba(27,95,216,.25); } .perf-case-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .perf-case-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .92rem; } .perf-case-title .icon { color: var(--blue); } .perf-best { font-size: .68rem; padding: 1px 8px; border-radius: 999px; background: var(--blue); color: #fff; } .perf-case-level { margin-inline-start: auto; font-size: .78rem; color: #4a5262; } .perf-case-score { font-size: .95rem; min-width: 26px; text-align: end; } .perf-bar { height: 9px; border-radius: 999px; background: #e3e9f5; overflow: hidden; } .perf-bar span { display: block; height: 100%; border-radius: 999px; background: #9bb4de; } .lvl-5 .perf-bar span { background: linear-gradient(90deg, #1fb77d, #0f9a68); } .lvl-4 .perf-bar span { background: linear-gradient(90deg, #35b6a5, #1f8fa0); } .lvl-3 .perf-bar span { background: linear-gradient(90deg, #5b95f0, #2f66d0); } .lvl-2 .perf-bar span { background: linear-gradient(90deg, #f2b84b, #e09a1d); } .lvl-1 .perf-bar span { background: linear-gradient(90deg, #c9b79a, #b99d73); } .perf-hint { color: #4a5262; font-size: .8rem; line-height: 1.9; } .perf-notes { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .perf-notes li { background: #eef4ff; color: #264a8f; font-size: .8rem; line-height: 1.8; padding: 6px 12px; border-radius: 12px; } .perf-foot { color: var(--muted); font-size: .76rem; line-height: 1.9; border-top: 1px dashed #dbe1ec; padding-top: 10px; } @media (max-width: 760px) { .perf { padding: 16px 14px; border-radius: 18px; } .perf-cases { grid-template-columns: 1fr; } .perf-mark em { font-size: .62rem; } } /* Performance panel: concrete program analysis + peers */ .perf-prog-sum { color: #4a5262; line-height: 2; font-size: .9rem; } .perf-prog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .perf-prog { border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .perf-prog h4 { margin: 0; display: flex; align-items: center; gap: 6px; font-size: .92rem; font-weight: 800; } .perf-prog ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .perf-prog li { display: flex; flex-direction: column; gap: 1px; font-size: .84rem; line-height: 1.7; } .perf-prog li small { color: var(--muted); font-size: .7rem; } .perf-prog.easy { background: #eefaf4; } .perf-prog.easy h4 { color: #12805c; } .perf-prog.mod { background: #fff7e8; } .perf-prog.mod h4 { color: #a96800; } .perf-prog.hard { background: #eef4ff; } .perf-prog.hard h4 { color: #1f4fb3; } .perf-prog-tip { margin: 0; font-size: .74rem; color: #8a6a1f; } .perf-reco { background: #f1f7ff; border: 1px solid rgba(27,95,216,.2); border-radius: 14px; padding: 10px 14px; font-size: .86rem; line-height: 2; color: #1f3d73; } .perf-peers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .perf-peer-col { display: flex; flex-direction: column; gap: 8px; } .perf-peer-col h4 { margin: 0; font-size: .86rem; color: var(--muted); } .perf-peer { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: #f7f9fd; border: 1px solid #e6ebf4; color: var(--ink); } .perf-peer:hover { border-color: var(--blue); text-decoration: none; background: #f1f7ff; } .perf-peer-name { font-size: .84rem; font-weight: 600; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .perf-peer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .76rem; } .perf-peer-meta b { color: var(--blue); } .perf-peer-meta em { font-style: normal; padding: 0 8px; border-radius: 999px; } .perf-peer-meta em.in { background: #e3f6ee; color: #12805c; } .perf-peer-meta em.out { background: #eef0f4; color: #6b7384; } .perf-peer-meta i { font-style: normal; color: var(--muted); } .perf-peer-meta i.plus { color: #12805c; } .perf-peer-meta i.minus { color: #a96800; } @media (max-width: 760px) { .perf-prog-grid, .perf-peers { grid-template-columns: 1fr; } } /* ---------- Performance score: card corner chip + quick-view mini chart ---------- */ .t5 { --c: #0e9f6e; } .t4 { --c: #1b5fd8; } .t3 { --c: #0b8fa3; } .t2 { --c: #c98a14; } .t1 { --c: #7a8497; } .perf-ring { --s: 42px; position: relative; display: grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: 50%; background: conic-gradient(var(--c) calc(var(--v) * 1%), #e4e9f3 0); } .perf-ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; } .perf-ring b { position: relative; font-size: .82rem; font-weight: 800; line-height: 1; color: var(--c); } .perf-chip { --s: 40px; position: absolute; left: 8px; bottom: 8px; z-index: 3; box-shadow: 0 3px 10px rgba(16,33,63,.2), 0 0 0 3px rgba(255,255,255,.85); transition: transform .2s; } .product-card:hover .perf-chip { transform: scale(1.08); } .qv-perf { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 12px; margin-top: 2px; padding: 8px 12px; border-radius: 14px; color: inherit; background: linear-gradient(135deg, #f6f9ff, #fff); border: 1px solid #e4eaf6; transition: border-color .15s, box-shadow .15s; } .qv-perf:hover { text-decoration: none; border-color: var(--c); box-shadow: 0 4px 14px rgba(16,33,63,.08); } .qv-perf .perf-ring { --s: 44px; } .qv-perf .perf-ring b { font-size: .88rem; } .qv-perf-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .qv-perf-head strong { font-size: .84rem; color: var(--ink); } .qv-perf-head em { font-style: normal; font-size: .74rem; color: var(--c); font-weight: 700; } .qv-perf-bars { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 18px; } .qv-bar { display: grid; grid-template-columns: 64px 1fr 22px; align-items: center; gap: 6px; font-size: .7rem; color: var(--muted); } .qv-bar i { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qv-bar s { display: block; text-decoration: none; height: 6px; border-radius: 99px; background: #e8edf6; overflow: hidden; } .qv-bar u { display: block; height: 100%; border-radius: 99px; text-decoration: none; background: var(--c); } .qv-bar b { font-weight: 700; color: var(--ink); text-align: left; } @media (max-width: 520px) { .qv-perf-bars { grid-template-columns: 1fr; } .qv-bar { grid-template-columns: 96px 1fr 22px; } } @media (min-width: 900px) { .qv { height: 408px; } } @media (min-width: 640px) and (max-width: 899px) { .qv { height: 460px; } } @media (max-width: 899px) { /* روی موبایل/تبلت پنل اسکرول می‌شود؛ امتیاز بالای مشخصات دیده شود */ .qv-info .qv-perf { order: 3; } .qv-info .qv-specs, .qv-info .qv-desc { order: 4; } } /* ---------- Shop: filter panel follows the scroll (desktop) ---------- */ @media (min-width: 900px) { .filter-panel { position: sticky; top: 76px; align-self: start; max-height: calc(100vh - 92px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } } /* ---------- Gallery: swipe left/right on the main image ---------- */ .gallery-main, .qv-main { touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; } .gallery-main img, .qv-main img { -webkit-user-drag: none; user-select: none; } .gallery-count { position: absolute; bottom: 10px; left: 10px; z-index: 3; padding: 2px 10px; border-radius: 999px; background: rgba(16,33,63,.62); color: #fff; font-size: .74rem; line-height: 1.7; pointer-events: none; backdrop-filter: blur(4px); } @keyframes swipe-next { from { transform: translateX(-26px); opacity: .35; } to { transform: none; opacity: 1; } } @keyframes swipe-prev { from { transform: translateX(26px); opacity: .35; } to { transform: none; opacity: 1; } } .swipe-next .lazy-img img { animation: swipe-next .28s ease-out; } .swipe-prev .lazy-img img { animation: swipe-prev .28s ease-out; } @media (prefers-reduced-motion: reduce) { .swipe-next .lazy-img img, .swipe-prev .lazy-img img { animation: none; } } /* The custom circuit reconnect handler keeps the storefront available. */ #components-reconnect-modal, #blazor-error-ui { display: none !important; } #store-connection-toast { position: fixed; z-index: 9999; inset-inline-end: 18px; bottom: 88px; max-width: min(340px, calc(100vw - 36px)); padding: 12px 16px; border-radius: 14px; background: #10213f; color: #fff; font-size: .8rem; line-height: 1.8; box-shadow: 0 6px 24px #10213f24; pointer-events: none; } #store-connection-toast[hidden] { display: none; } .compare-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 12px; margin: 8px 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--blue); font: inherit; font-size: .78rem; cursor: pointer; } .product-card .compare-toggle { margin: 5px 12px; } .compare-toggle[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); } #compare-tray { position: fixed; z-index: 100; bottom: 84px; inset-inline: 16px; margin: auto; width: max-content; max-width: calc(100% - 32px); padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; border: 1px solid #d9e5fb; border-radius: 16px; box-shadow: 0 8px 32px #10213f24; background: #fff; font-size: .8rem; } #compare-tray[hidden] { display: none; } #compare-tray a { padding: 9px 14px; color: #fff; background: var(--blue); border-radius: 10px; } #compare-tray button { background: transparent; border: 0; color: var(--muted); font: inherit; cursor: pointer; } /* Keep the cart glyph and label on the same visual baseline. */ .btn-pill.pay { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; font-size: .9rem; line-height: 1.5; border-radius: 12px; box-shadow: 0 3px 10px #174ca622; } .btn-pill.pay .icon { flex: 0 0 auto; width: 20px; height: 20px; vertical-align: middle; } .header-compare { position: relative; flex-shrink: 0; color: var(--blue); } .header-compare[hidden] { display: none !important; } .compare-count { position: absolute; top: -5px; inset-inline-end: -5px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 50%; background: var(--blue); color: #fff; border: 2px solid #fff; display: grid; place-items: center; font-size: .65rem; line-height: 1; } .product-grid.product-row > .qv-wrap.qv-floating { display: block; position: fixed; inset: 6vh max(16px, calc((100vw - 1100px) / 2)); z-index: 110; padding: 0; overflow-y: auto; border-radius: 18px; box-shadow: 0 0 0 100vmax #10213f66; background: #fff; } .qv-floating::before { display: none; } /* Admin progressive disclosure: hidden form controls still submit their current values. */ [hidden], .confirm-overlay[hidden] { display: none !important; } html:not(.admin-expert) .admin-advanced-only { display: none !important; } .admin-mode-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; margin-bottom:20px; border:1px solid #dce5f3; background:#f5f8ff; border-radius:12px; } .flash { position:relative; padding-inline-end:48px; } .flash-dismiss { position:absolute; inset-inline-end:10px; top:5px; background:transparent; border:0; font-size:1.5rem; cursor:pointer; color:inherit; } .gallery-main, .qv-main { position:relative; border:0; background:#fff; cursor:zoom-in; width:100%; } .gallery-zoom-label { position:absolute; bottom:12px; inset-inline-end:12px; background:#ffffffed; padding:5px 12px; border-radius:16px; color:#164995; font-size:.8rem; z-index:2; } .gallery-access-note { background:#edf6ff; border-radius:10px; padding:8px; font-size:.8rem; } .product-lightbox { position:fixed; inset:0; width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; padding:16px; border:0; background:#101827; color:#fff; } .product-lightbox::backdrop { background:#101827ed; } .product-lightbox:not([open]) { display:none; } .lightbox-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; height:50px; } .lightbox-toolbar button, .lightbox-stage button { background:#ffffff20; border:1px solid #ffffff50; color:#fff; padding:10px 16px; border-radius:10px; cursor:pointer; } .lightbox-stage { display:flex; justify-content:center; align-items:center; gap:12px; height:calc(100% - 55px); direction:ltr; } .lightbox-stage img { width:calc(100% - 130px); height:100%; object-fit:contain; touch-action:pan-y pinch-zoom; } .analytics-filters label { display:flex; flex-direction:column; gap:5px; } .analytics-chart { height:230px; display:flex; align-items:stretch; gap:3px; direction:ltr; overflow-x:auto; padding-top:10px; } .analytics-column { flex:1; min-width:6px; border:0; background:transparent; padding:0; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:end; cursor:help; position:relative; padding-bottom:30px; } .analytics-column i { display:block; background:linear-gradient(#73a8ff,#1b5fd8); width:100%; min-height:2px; border-radius:4px 4px 0 0; } .analytics-column small { font-size:.65rem; position:absolute; bottom:0; transform:rotate(-45deg); white-space:nowrap; } .analytics-column:not(:nth-child(5n+1)) small { visibility:hidden; } @media(max-width:600px) { .admin-mode-bar { flex-wrap:wrap; } .lightbox-stage { gap:3px; } .lightbox-stage img { width:calc(100% - 65px); } .lightbox-stage button { padding:10px 6px; } } .product-lightbox { box-sizing:border-box; } .analytics-filters { flex-wrap:wrap; align-items:end; } .analytics-filters input:not([type=checkbox]), .analytics-filters select { border:1px solid #d7deeb; border-radius:9px; padding:9px 10px; font:inherit; min-width:140px; max-width:100%; background:white; } .stat.accent small { color:#fff; } /* Refined admin navigation and a persistent, accessible advanced-mode switch. */ .admin { background:#f5f7fb; } .admin-side { background:linear-gradient(165deg,#132640,#0c192d); padding:18px 12px; box-sizing:border-box; } .admin-brand { padding:8px 10px 20px; gap:12px; letter-spacing:-.2px; } .admin-brand-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:14px; background:#ffffff0e; border:1px solid #ffffff14; color:#a9c8ff; } .admin-brand small { display:block; font-size:.72rem; font-weight:400; color:#94a8c5; margin-top:3px; } .admin-mode-control { margin:0 2px 16px; } .admin-mode-switch { width:100%; display:flex; align-items:center; gap:10px; background:#ffffff08; border:1px solid #ffffff19; border-radius:14px; color:#dce7f8; padding:12px; cursor:pointer; text-align:start; font:inherit; transition:background .18s,border-color .18s; } .admin-mode-switch:hover { background:#ffffff10; border-color:#ffffff38; } .admin-mode-copy { flex:1; font-size:.82rem; font-weight:600; } .admin-mode-copy small { display:block; color:#93a9c5; font-size:.68rem; font-weight:400; margin-top:2px; } .admin-switch-track { display:block; position:relative; width:38px; height:22px; flex:none; background:#42526a; border-radius:99px; transition:background .2s; direction:ltr; } .admin-switch-track>span { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 2px 4px #0003; transition:transform .2s; } .admin-mode-switch[aria-checked=true] .admin-switch-track { background:#5394ff; } .admin-mode-switch[aria-checked=true] .admin-switch-track>span { transform:translateX(16px); } .admin-mode-switch[aria-checked=true] { border-color:#609cf64d; background:#609cf612; } .admin-mode-switch[aria-checked=true] .admin-mode-copy small { color:#a2c6ff; } .admin-side nav { gap:5px; padding:0 2px 12px; } .admin-side nav a { display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:11px; font-size:.83rem; font-weight:500; transition:background .16s,color .16s,box-shadow .16s; } .admin-side nav a .icon { flex:none; opacity:.8; } .admin-side nav a:hover { background:#ffffff0b; color:#fff; } .admin-side nav a.active { background:linear-gradient(110deg,#2867ce,#2056ae); box-shadow:0 4px 14px #0002,inset 0 1px 0 #ffffff18; color:#fff; } .admin-side nav a.active .icon { opacity:1; } .admin-side nav a.admin-store-link { color:#eef4ff; background:#ffffff08; border:1px solid #ffffff14; padding:10px; margin:4px 0 12px; gap:10px; white-space:normal; } .admin-store-logo { display:grid; place-items:center; background:#fff; width:43px; height:43px; border-radius:12px; padding:5px; box-sizing:border-box; flex:none; } .admin-store-logo img { width:100%; height:100%; object-fit:contain; } .admin-store-link>span:nth-child(2) { flex:1; } .admin-store-link small { display:block; color:#93a9c5; font-size:.67rem; margin-top:4px; } .admin-main { padding:28px 28px 56px; } .admin-h1,.admin-h2 { display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:#1d2e49; letter-spacing:-.3px; } .admin-h1>.icon { color:#3578d5; background:#e8f0fd; border:1px solid #dce8f9; border-radius:12px; padding:9px; width:42px; height:42px; box-sizing:border-box; } .admin-h2>.icon { color:#5176a8; flex:none; } .admin-bar { gap:12px; flex-wrap:wrap; margin-bottom:16px; } .admin-bar .admin-h1,.admin-bar .admin-h2 { margin-bottom:0; } .admin .admin-btn,.confirm-actions .admin-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:10px; min-height:40px; font-size:.84rem; font-weight:500; box-shadow:0 2px 4px #1839630a; transition:background .16s,box-shadow .16s,transform .16s; } .admin .admin-btn:hover { box-shadow:0 4px 12px #1839631a; } .admin .admin-btn.secondary { background:#edf1f7; color:#425976; border:1px solid #dce4f0; } .admin .admin-btn.secondary:hover { background:#e3eaf5; } .admin .admin-btn.small { min-height:34px; } .admin .link-soft,.admin .link-danger,.admin .actions>a { display:inline-flex; align-items:center; justify-content:center; gap:5px; } .admin .icon { vertical-align:middle; flex-shrink:0; } .admin .stat>span { display:flex; align-items:center; gap:8px; font-size:.8rem; } .admin .stat>span .icon { color:#718db3; } .admin .stat.accent>span .icon { color:#d2e4ff; } .admin-card { border:1px solid #e7edf5; border-radius:16px; box-shadow:0 4px 18px #142d4f05; } .admin :is(button,a,input,select,textarea):focus-visible,.confirm-box button:focus-visible { outline:3px solid #75b0ff; outline-offset:3px; } .admin .img-move button:first-child .icon { transform:rotate(-90deg); } .admin .img-move button:last-child .icon { transform:rotate(90deg); } @media(min-width:768px) { .admin-side { width:256px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#405471 transparent; } } @media(max-width:767px) { .admin-side { padding:14px 14px 8px; } .admin-brand { padding:0 0 14px; min-height:52px; } .admin-mode-control { position:absolute; inset-inline-end:16px; top:15px; width:190px; margin:0; } .admin-mode-switch { padding:8px 10px; } .admin-side { position:relative; } .admin-side nav { align-items:stretch; padding-bottom:10px; gap:6px; scrollbar-width:thin; } .admin-side nav a { flex:none; white-space:nowrap; padding:10px 12px; } .admin-side nav a.admin-store-link { margin:0; padding:6px 10px; white-space:nowrap; } .admin-store-logo { width:32px; height:32px; border-radius:9px; } .admin-store-link small { display:none; } .admin-main { padding:22px 16px 48px; } } @media(max-width:420px) { .admin-brand { font-size:.85rem; gap:8px; } .admin-brand-icon { display:none; } .admin-mode-control { width:169px; } .admin-mode-switch>.icon { display:none; } } @media(prefers-reduced-motion:reduce) { .admin *, .admin *::before, .admin *::after { transition:none !important; } } .admin .chip { display:inline-flex; align-items:center; gap:6px; } .admin summary>.icon { margin-inline-end:7px; color:#597ca8; } /* Independent of Bootstrap's .toast:not(.show) rule. */ .product-cart-notice { position:fixed; bottom:82px; left:50%; transform:translateX(-50%); z-index:1100; display:flex; align-items:center; justify-content:center; gap:14px; background:#10213f; color:#fff; padding:14px 20px; border-radius:16px; box-shadow:0 8px 30px #10213f35; max-width:calc(100vw - 32px); width:max-content; box-sizing:border-box; font-size:.88rem; } .product-cart-notice a { color:#b9d7ff; white-space:nowrap; text-decoration:underline; } @media(max-width:480px) { .product-cart-notice { flex-wrap:wrap; gap:8px; text-align:center; } } /* Keep the off-canvas drawer outside both painting and hit-testing on mobile RTL browsers. */ html, body { max-width:100%; overflow-x:clip; } .drawer { inset:0 0 0 auto; margin:0; width:min(320px,85vw); max-width:85vw; visibility:hidden; pointer-events:none; transform:translate3d(110%,0,0); overflow-y:auto; overscroll-behavior:contain; transition:transform .25s,visibility .25s; } .menu-toggle:checked ~ .drawer { visibility:visible; pointer-events:auto; transform:translate3d(0,0,0); } body:has(.menu-toggle:checked) { overflow:hidden; } .panel-tabs { display:flex; flex-wrap:wrap; gap:8px; padding:12px 0; } .panel-tabs a { display:inline-flex; align-items:center; gap:7px; } .panel-body, main, .checkout-grid > *, .panel { min-width:0; } .integration-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:20px; } .integration-grid .admin-form { max-width:none; } .compare-builder { padding:18px; margin-block:18px; border:1px solid var(--line); border-radius:16px; background:#fff; } .compare-builder form { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin-block:12px; } .compare-builder label { display:flex; flex-direction:column; gap:6px; flex:1 1 160px; } .compare-builder input,.compare-builder select { width:100%; padding:10px; border:1px solid var(--line); border-radius:10px; } .compare-feedback { position:fixed; inset:auto 16px 88px; z-index:55; padding:12px 18px; border-radius:14px; background:#eff6ff; border:1px solid #bcd1ff; box-shadow:0 8px 28px #152b4920; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; } .compare-feedback[hidden] { display:none; } .manual-analysis { padding:24px; background:#eff6ff; border-radius:16px; margin-block:16px; } .manual-analysis .analysis-progress { height:4px; background:#dbe8ff; overflow:hidden; border-radius:5px; } .manual-analysis .analysis-progress::after { content:''; display:block; height:100%; background:var(--blue); animation:analysis-progress 2.4s ease both; } .manual-reveal { animation:manual-reveal .5s both; animation-delay:var(--reveal-delay,0s); } @keyframes analysis-progress { from {width:0} to {width:100%} } @keyframes manual-reveal { from {opacity:0;transform:translateY(8px)} to {opacity:1;transform:translateY(0)} } @media(prefers-reduced-motion:reduce) { .manual-reveal { animation:none; } .manual-analysis .analysis-progress::after { animation:none;width:100%; } } @media(max-width:600px) { .panel-tabs a { flex:1 1 40%; justify-content:center; } .panel-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .checkout-grid { grid-template-columns:minmax(0,1fr); } } .manual-analysis { animation:analysis-dismiss .1s 1.8s forwards; } @keyframes analysis-dismiss { to {opacity:0;visibility:hidden;height:0;padding:0;margin:0;overflow:hidden;} } .manual-reveal tbody tr { animation:manual-reveal .35s both; animation-delay:2s; } .manual-reveal tbody tr:nth-child(n+7) { animation-delay:2.3s; } .manual-reveal tbody tr:nth-child(n+14) { animation-delay:2.6s; } @media(prefers-reduced-motion:reduce) { .manual-reveal tbody tr { animation:none; } .manual-analysis { display:none; } } .integration-grid .admin-form input:not([type="checkbox"]), .admin-form input:not([type="checkbox"]),.admin-form select,.admin-form textarea { width:100%; box-sizing:border-box; min-width:0; padding:10px 12px; border:1px solid #dce3ee; border-radius:10px; background:#fff; color:var(--ink); font:inherit; } .admin-form label.check { flex-direction:row; align-items:center; gap:9px; text-align:start; } .admin-form label.check input { flex:0 0 auto; width:17px; height:17px; accent-color:var(--blue); } .integration-grid .admin-card h2 { font-size:1.15rem; } .compare-count[hidden] { display:none !important; } /* Quick view (final): ارتفاع از محتوا، بدون اسکرول؛ زیر ۹۰۰px کاملاً حذف می‌شود */ .qv-wrap > .qv { height: auto; overflow: visible; } .qv-wrap .qv-body { height: auto; overflow: visible; padding-inline-end: 0; align-items: center; } .qv-wrap .qv-gallery, .qv-wrap .qv-buy { align-self: center; } .qv-wrap .qv-main, .qv-wrap .qv-main-skel { height: auto; aspect-ratio: 4 / 3; max-height: 230px; width: 100%; } @media (min-width: 900px) { .qv-wrap .qv-body { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) minmax(210px, 250px); gap: 22px; } .qv-wrap .qv-info { gap: 8px; } .qv-wrap .qv-title { display: block; -webkit-line-clamp: unset; overflow: visible; } .qv-wrap .qv-buy { align-self: center; } } @media (max-width: 899px) { .card-more, .qv-wrap, .product-grid.product-row > .qv-wrap.qv-floating { display: none !important; } } .product-grid.product-row > .qv-wrap.qv-floating { inset: 0; margin: auto; width: min(1100px, calc(100vw - 32px)); height: fit-content; max-height: 88vh; } .qv-perf { grid-template-columns: 1fr; } .qv-perf .qv-perf-bars { grid-column: 1; } /* عرض خیلی کم: فروشگاه تک‌ستونه؛ ردیف‌های افقی صفحه‌ی اول هر بار یک کارت کامل نشان می‌دهند */ @media (max-width: 420px) { .product-grid, .product-grid.wrap { grid-template-columns: minmax(0, 1fr); } .product-grid.product-row { scroll-snap-type: x mandatory; } .product-grid.product-row > .product-card { flex: 0 0 100%; scroll-snap-align: center; } } /* Quick view: مشخصات هیچ‌وقت از ستون خودشان بیرون نزنند و زیر کارت قیمت نروند */ .qv-wrap .qv-body > * { min-width: 0; } .qv-wrap .qv-specs { grid-template-columns: minmax(0, 1fr); } .qv-wrap .qv-specs > div { min-width: 0; } .qv-wrap .qv-specs dt { flex: 0 0 auto; } .qv-wrap .qv-specs dd { min-width: 0; overflow-wrap: anywhere; text-align: end; } @media (min-width: 1180px) { .qv-wrap .qv-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Quick view (responsive v3): چیدمان بر اساس عرض خودِ پنل (container query) نه عرض صفحه؛ هیچ ستونی از کادر بیرون نمی‌زند */ .qv-wrap { container-type: inline-size; min-width: 0; } .qv-wrap > .qv { box-sizing: border-box; max-width: 100%; min-width: 0; } .qv-wrap .qv-body { grid-template-columns: minmax(0, 1fr); } .qv-wrap .qv-perf-bars { grid-template-columns: minmax(0, 1fr); } .qv-wrap .qv-bar { grid-template-columns: minmax(64px, 96px) minmax(0, 1fr) 26px; } .qv-wrap .qv-bar i { min-width: 0; } .qv-wrap .qv-perf { min-width: 0; overflow: hidden; } .qv-wrap .qv-title { font-size: 1.05rem; line-height: 1.7; } .qv-wrap .qv-gallery, .qv-wrap .qv-thumbs { min-width: 0; max-width: 100%; } @container (min-width: 640px) { .qv-wrap .qv-body { grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 18px 24px; align-items: start; } .qv-wrap .qv-gallery { align-self: start; } .qv-wrap .qv-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qv-wrap .qv-buy { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 24px; align-self: stretch; } .qv-wrap .qv-price { flex: 1 1 200px; } .qv-wrap .qv-stock { flex: 0 1 auto; } .qv-wrap .qv-buy .btn-pill { flex: 1 1 220px; width: auto; } .qv-wrap .qv-secondary-actions { flex: 1 1 100%; flex-direction: row; justify-content: center; gap: 24px; } } @container (min-width: 960px) { .qv-wrap .qv-body { grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) minmax(220px, 250px); align-items: center; } .qv-wrap .qv-gallery { align-self: center; } .qv-wrap .qv-specs { grid-template-columns: minmax(0, 1fr); } .qv-wrap .qv-buy { grid-column: auto; flex-direction: column; flex-wrap: nowrap; align-items: stretch; align-self: center; } .qv-wrap .qv-price, .qv-wrap .qv-buy .btn-pill { flex: none; } .qv-wrap .qv-secondary-actions { flex: none; flex-direction: column; gap: 2px; } } /* Dashboard (panel home) */ .dash-hero { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:20px; border-radius:20px; color:#fff; background:linear-gradient(135deg,var(--blue),var(--blue-dark)); box-shadow:0 8px 24px rgba(27,95,216,.25); margin-bottom:16px; } .dash-hero .panel-h1 { color:#fff; margin:0 0 4px; } .dash-hero .muted { color:rgba(255,255,255,.8); margin:0; } .dash-hero-text { flex:1 1 200px; min-width:0; } .dash-avatar { width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .dash-cta { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:999px; background:#fff; color:var(--blue); font-weight:700; font-size:.9rem; } .dash-cta:hover { text-decoration:none; transform:translateY(-1px); } .dash-empty .dash-cta { background:var(--blue); color:#fff; } .pstat { position:relative; overflow:hidden; gap:4px; } .pstat-ico { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:8px; background:var(--blue-soft); color:var(--blue); } .pstat.t-amber .pstat-ico { background:#fff4d6; color:#b07800; } .pstat.t-green .pstat-ico { background:#dff5e6; color:#17692f; } .pstat.t-violet .pstat-ico { background:#efe7ff; color:#6a3fd0; } .pstat.t-amber strong { color:#b07800; } .pstat.t-green strong { color:#17692f; } .pstat.t-violet strong { color:#6a3fd0; } .dash-head { display:flex; align-items:center; justify-content:space-between; gap:12px; } .dash-all { display:inline-flex; align-items:center; gap:4px; font-size:.85rem; color:var(--blue); } .order-row { grid-template-columns:auto 1fr auto; } .order-row > b { grid-column:2 / -1; } .order-ico { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; grid-row:span 2; } .order-ico.s0 { background:#fff4d6; color:#8a6100; } .order-ico.s1 { background:#dff5e6; color:#17692f; } .order-ico.s2 { background:#dbe9ff; color:#1748a8; } .order-ico.s3 { background:#fde1e1; color:#a11d1d; } .order-ico.s4 { background:#eceef3; color:#566; } .order-main { min-width:0; } .order-row small { display:flex; align-items:center; gap:4px; } .order-go { display:none; color:var(--muted); transform:rotate(90deg); } .dash-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:32px 16px; color:var(--muted); text-align:center; } .dash-empty p { margin:0; } @media (min-width:768px) { .order-row { grid-template-columns:auto 1fr auto auto auto; } .order-row > b { grid-column:auto; } .order-ico { grid-row:auto; } .order-go { display:inline-flex; } .dash-hero { padding:24px 28px; } } /* Order detail tab */ .panel-tab-order { display:inline-flex; align-items:center; border-radius:999px; background:var(--blue); box-shadow:var(--card-shadow); } .panel-tabs .panel-tab-order a { background:transparent; box-shadow:none; color:#fff; } .panel-tabs .panel-tab-order a.tab-close { padding:9px 12px 9px 4px; flex:none; opacity:.85; } .panel-tabs .panel-tab-order a.tab-close:hover { opacity:1; color:#fff; } .od-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:#fff; border-radius:18px; box-shadow:var(--card-shadow); padding:16px 20px; margin-bottom:14px; } .od-head .order-ico { grid-row:auto; } .od-title { flex:1 1 160px; min-width:0; } .od-title .panel-h1 { margin:0 0 2px; } .od-title small { display:flex; align-items:center; gap:4px; color:var(--muted); } .od-close { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; background:#f1f4fa; color:var(--ink); font-size:.85rem; } .od-close:hover { background:#e4e9f4; text-decoration:none; } .od-steps { list-style:none; margin:0 0 14px; padding:16px; display:flex; background:#fff; border-radius:18px; box-shadow:var(--card-shadow); } .od-steps li { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; font-size:.82rem; color:var(--muted); } .od-steps li i { width:38px; height:38px; border-radius:50%; background:#eef1f6; display:flex; align-items:center; justify-content:center; position:relative; z-index:1; } .od-steps li:not(:last-child)::after { content:""; position:absolute; top:19px; inset-inline-start:calc(50% + 19px); width:calc(100% - 38px); height:2px; background:#e3e7ef; } .od-steps li.done { color:var(--blue); font-weight:600; } .od-steps li.done i { background:var(--blue); color:#fff; } .od-steps li.done:not(:last-child)::after { background:var(--blue); } .od-steps-bad { align-items:center; gap:8px; background:#fde8e8; color:#a11d1d; font-size:.9rem; } .od-grid { display:grid; gap:14px; grid-template-columns:minmax(0,1fr); align-items:start; } .od-main, .od-side { display:flex; flex-direction:column; gap:14px; min-width:0; } .od-main .detail-card, .od-side .detail-card { margin:0; } .od-h { display:flex; align-items:center; gap:8px; font-size:1rem; font-weight:700; margin:0 0 14px; } .od-h .icon { color:var(--blue); } .od-items { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; } .od-items li { display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); } .od-items li:first-child { border-top:0; padding-top:0; } .od-item-ico { width:44px; height:44px; border-radius:12px; background:var(--blue-soft); color:var(--blue); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .od-item-name { flex:1; min-width:0; } .od-item-name strong { display:block; overflow-wrap:anywhere; } .od-item-name small { color:var(--muted); } .od-items b { color:var(--blue); white-space:nowrap; } .od-info { margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; } .od-info.one { grid-template-columns:minmax(0,1fr); } .od-info .wide { grid-column:1 / -1; } .od-info dt { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:.82rem; margin-bottom:2px; } .od-info dd { margin:0; line-height:1.9; overflow-wrap:anywhere; } .od-line { display:flex; justify-content:space-between; gap:12px; padding:8px 0; color:var(--muted); font-size:.9rem; } .od-line.od-total { border-top:1px dashed var(--line); margin-top:4px; padding-top:12px; color:var(--ink); font-weight:700; } .od-line.od-total strong { color:var(--blue); font-size:1.1rem; } .od-summary form { margin-top:12px; } @media (min-width:900px) { .od-grid { grid-template-columns:minmax(0,1fr) 340px; } .od-side { position:sticky; top:16px; } } @media (max-width:520px) { .od-info { grid-template-columns:minmax(0,1fr); } .od-close span { display:none; } } /* Cart undo-remove */ .cart-undo { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; background:#fff7e6; color:#7a5200; border:1px dashed #f0d58a; border-radius:16px; padding:16px 18px; } .cart-undo-text { display:inline-flex; align-items:center; gap:8px; font-size:.9rem; min-width:0; overflow-wrap:anywhere; } .cart-undo-btn { border:0; background:var(--blue); color:#fff; font:inherit; font-size:.85rem; font-weight:600; padding:7px 16px; border-radius:999px; cursor:pointer; } .cart-undo-btn:hover { background:var(--blue-dark); } .cart-undo-progress { position:absolute; inset-inline:0; bottom:0; height:3px; background:#e0a526; transform-origin:right center; animation:undo-bar var(--undo-ms,6s) linear forwards; } @keyframes undo-bar { from { transform:scaleX(1); } to { transform:scaleX(0); } } /* Toasts (dashboard cart notices) */ .toast-stack { position:fixed; top:84px; inset-inline-start:16px; z-index:60; display:flex; flex-direction:column; gap:10px; width:min(380px, calc(100vw - 32px)); } .toast { display:flex; align-items:flex-start; gap:12px; background:#fff; border-radius:14px; padding:12px 14px; box-shadow:0 8px 28px rgba(20,30,60,.18); border-inline-start:4px solid var(--blue); animation:toast-in .35s ease-out, toast-out .4s ease-in 14s forwards; } .toast.good { border-color:var(--green); } .toast.warn { border-color:#e0a526; } .toast.bad { border-color:var(--red); } .toast-ico { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--blue-soft); color:var(--blue); } .toast.good .toast-ico { background:#dff5e6; color:#17692f; } .toast.warn .toast-ico { background:#fff4d6; color:#8a6100; } .toast.bad .toast-ico { background:#fde1e1; color:#a11d1d; } .toast-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; font-size:.85rem; line-height:1.7; } .toast-body span { color:var(--muted); overflow-wrap:anywhere; } .toast-close { border:0; background:none; color:var(--muted); cursor:pointer; padding:4px; border-radius:8px; } .toast-close:hover { background:#f1f4fa; } @keyframes toast-in { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:none; } } @keyframes toast-out { to { opacity:0; transform:translateY(-12px); visibility:hidden; } } @media (max-width:520px) { .toast-stack { top:72px; inset-inline-start:16px; } } /* Profile */ .pf-badges { display:flex; gap:8px; flex-wrap:wrap; } .pf-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:999px; font-size:.78rem; background:rgba(255,255,255,.18); color:#fff; } .pf-badge.ok { background:rgba(31,166,74,.9); } .pf-badge.no { background:rgba(224,165,38,.95); color:#3d2a00; } .pf-grid { display:flex; flex-direction:column; gap:14px; } .pf-card { margin:0; } .pf-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px; } .pf-field { display:flex; flex-direction:column; gap:6px; min-width:0; } .pf-field.wide { grid-column:1 / -1; } .pf-field > span { display:flex; align-items:center; gap:6px; font-size:.84rem; color:var(--muted); font-weight:500; } .pf-field input, .pf-field textarea { padding:11px 14px; border:1px solid #dbe1ec; border-radius:12px; font:inherit; background:#fff; box-sizing:border-box; width:100%; } .pf-field input:focus, .pf-field textarea:focus { outline:2px solid rgba(27,95,216,.35); border-color:var(--blue); } .pf-field input[readonly] { background:#f4f6fa; color:var(--muted); } .pf-hint { display:flex; align-items:center; gap:4px; color:var(--muted); font-size:.78rem; } .pf-switch { display:flex; align-items:center; gap:12px; cursor:pointer; font-size:.9rem; } .pf-switch input { position:absolute; opacity:0; pointer-events:none; } .pf-switch-track { position:relative; width:44px; height:24px; border-radius:999px; background:#cfd6e4; flex-shrink:0; transition:background .2s; } .pf-switch-track::after { content:""; position:absolute; top:3px; inset-inline-start:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:inset-inline-start .2s; } .pf-switch input:checked + .pf-switch-track { background:var(--blue); } .pf-switch input:checked + .pf-switch-track::after { inset-inline-start:23px; } .pf-switch input:focus-visible + .pf-switch-track { outline:2px solid rgba(27,95,216,.5); outline-offset:2px; } .pf-actions .btn-pill { width:100%; } .pf-verify { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; } .pf-verify > div { flex:1 1 200px; display:flex; flex-direction:column; gap:2px; } .pf-verify small { color:var(--muted); } .pf-verify .order-ico { grid-row:auto; } @media (min-width:900px) { .pf-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; } .pf-actions, .pf-card:nth-of-type(3) { grid-column:1 / -1; } .pf-actions .btn-pill { width:auto; min-width:240px; } } @media (max-width:520px) { .pf-fields { grid-template-columns:minmax(0,1fr); } } /* Cart hero bar */ .cart-hero { margin-bottom:16px; } .cart-hero .cart-steps { margin:0; padding:0; list-style:none; display:flex; gap:8px; flex-wrap:wrap; } .cart-hero .cart-steps li { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.14); color:rgba(255,255,255,.85); font-size:.82rem; } .cart-hero .cart-steps li.on { background:#fff; color:var(--blue); font-weight:700; box-shadow:0 2px 8px rgba(0,0,0,.12); } @media (max-width:640px) { .cart-hero .cart-steps { width:100%; } .cart-hero .cart-steps li { flex:1 1 auto; justify-content:center; padding:7px 10px; } .cart-hero .cart-steps li:not(.on) { display:none; } } /* Extended warranty selector */ .wr-free { display:flex; align-items:center; gap:8px; margin-top:10px; padding:8px 12px; border-radius:12px; background:#e8f7ee; color:#17692f; font-size:.8rem; font-weight:600; } .wr-box { margin-top:12px; padding:12px; border-radius:14px; background:linear-gradient(180deg,#f5f8ff,#eef3fd); border:1px solid #dbe6fb; } .wr-title { display:flex; align-items:center; gap:8px; margin-bottom:10px; color:var(--blue); } .wr-title b { color:var(--ink); font-size:.9rem; } .wr-title small { margin-inline-start:auto; color:var(--muted); font-size:.74rem; background:#fff; padding:2px 10px; border-radius:999px; } .wr-opts { margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .wr-opt { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:start; padding:10px 12px 10px 34px; border-radius:12px; border:1.5px solid #d6dff0; background:#fff; color:var(--ink); font:inherit; cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .15s; } .wr-opt::before { content:""; position:absolute; top:12px; inset-inline-end:10px; width:16px; height:16px; border-radius:50%; border:2px solid #c3cde2; background:#fff; box-sizing:border-box; } .wr-opt:hover { border-color:var(--blue); transform:translateY(-1px); } .wr-opt.on { border-color:var(--blue); background:var(--blue-soft); box-shadow:0 0 0 3px rgba(27,95,216,.12); } .wr-opt.on::before { border-color:var(--blue); background:radial-gradient(circle,var(--blue) 45%,#fff 50%); } .wr-name { font-weight:700; font-size:.88rem; padding-inline-end:22px; } .wr-opt small { color:var(--muted); font-size:.72rem; } .wr-opt em { font-style:normal; font-weight:700; font-size:.82rem; color:var(--blue); margin-top:2px; } .wr-opt:not(.on) em { color:#4a5670; } @media (max-width:720px) { .wr-opts { grid-template-columns:minmax(0,1fr); } .wr-opt { flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 10px; } .wr-opt em { margin-inline-start:auto; margin-top:0; } .wr-name { padding-inline-end:0; flex:1 1 100%; } } /* Cart policy strip */ .cart-policy { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:18px 0; } .cart-policy-item { display:flex; align-items:flex-start; gap:14px; padding:16px 18px; border-radius:18px; background:#fff; box-shadow:var(--card-shadow); border:1px solid rgba(27,95,216,.08); } .cart-policy-item > i { width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--blue-soft); color:var(--blue); } .cart-policy-item:nth-child(2) > i { background:#dff5e6; color:#17692f; } .cart-policy-item b { display:block; margin-bottom:4px; } .cart-policy-item span { color:var(--muted); font-size:.86rem; line-height:1.9; } @media (max-width:720px) { .cart-policy { grid-template-columns:minmax(0,1fr); } } .od-warranty { display:flex; align-items:center; gap:4px; color:#17692f !important; } .wr-search { width:100%; max-width:360px; padding:9px 14px; border:1px solid #dbe1ec; border-radius:12px; font:inherit; margin:8px 0; box-sizing:border-box; } /* Software install card */ .sw-card { display:flex; flex-direction:column; gap:14px; background:#fff; border-radius:18px; box-shadow:var(--card-shadow); padding:18px; border:1px solid rgba(27,95,216,.08); } .sw-head { display:flex; align-items:center; gap:14px; } .sw-head > i { width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--blue-soft); color:var(--blue); } .sw-head b { display:block; } .sw-head span { color:var(--muted); font-size:.84rem; line-height:1.8; } .sw-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .sw-opt { position:relative; display:flex; align-items:center; gap:10px; padding:10px 12px; border:1.5px solid #dfe5f1; border-radius:14px; background:#fff; cursor:pointer; transition:border-color .15s, background .15s; min-width:0; } .sw-opt:hover { border-color:var(--blue); } .sw-opt input { position:absolute; opacity:0; pointer-events:none; } .sw-ico { position:relative; overflow:hidden; width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--c,#eef2f9); color:#fff; font-style:normal; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); } .sw-mono { font-weight:800; font-size:.8rem; letter-spacing:-.02em; } .sw-ico img { position:absolute; inset:0; width:100%; height:100%; padding:7px; box-sizing:border-box; background:#fff; object-fit:contain; } .sw-name { flex:1; min-width:0; font-size:.86rem; font-weight:600; overflow-wrap:anywhere; } .sw-check { width:22px; height:22px; border-radius:50%; border:2px solid #c9d2e4; display:flex; align-items:center; justify-content:center; color:transparent; flex-shrink:0; } .sw-opt.on { border-color:var(--blue); background:var(--blue-soft); } .sw-opt:has(input:checked) { border-color:var(--blue); background:var(--blue-soft); } .sw-opt:has(input:checked) .sw-check { background:var(--blue); border-color:var(--blue); color:#fff; } .sw-opt:has(input:focus-visible) { outline:2px solid rgba(27,95,216,.5); outline-offset:2px; } .sw-other { display:flex; flex-direction:column; gap:6px; } .sw-other > span { display:flex; align-items:center; gap:6px; font-size:.84rem; color:var(--muted); font-weight:500; } .sw-other textarea { padding:11px 14px; border:1px solid #dbe1ec; border-radius:12px; font:inherit; box-sizing:border-box; width:100%; resize:vertical; } .sw-other textarea:focus { outline:2px solid rgba(27,95,216,.35); border-color:var(--blue); } .sw-card > .btn-pill { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; } .sw-chips { display:flex; flex-wrap:wrap; gap:8px; } .sw-chips span { padding:5px 12px; border-radius:999px; background:var(--blue-soft); color:var(--blue); font-size:.82rem; } .sw-notes { display:flex; align-items:center; gap:6px; margin:12px 0 0; color:var(--muted); font-size:.86rem; } @media (max-width:900px) { .sw-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:480px) { .sw-grid { grid-template-columns:minmax(0,1fr); } .sw-card > .btn-pill { align-self:stretch; justify-content:center; } } .sw-head { position:relative; } .sw-free { display:inline-block; margin-inline-start:8px; padding:2px 10px; border-radius:999px; background:#dff5e6; color:#17692f; font-size:.74rem; font-weight:700; vertical-align:middle; } .sw-status { margin-inline-start:auto; font-size:.78rem; color:var(--muted); white-space:nowrap; } .sw-status.ok { color:#17692f; } .sw-status.err { color:#a11d1d; } /* ===================================================================== Checkout (اطلاعات و پرداخت): کارت‌های مرحله‌ای، خلاصه‌ی سفارش، ریسپانسیو ===================================================================== */ .cart-hero .cart-steps li a { color: inherit; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .cart-hero .cart-steps li.done { background: rgba(255,255,255,.28); color: #fff; } .co-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .co-card { background: #fff; border-radius: 18px; box-shadow: var(--card-shadow); padding: 20px; display: flex; flex-direction: column; gap: 16px; } .co-head { display: flex; align-items: center; gap: 12px; } .co-head h2 { margin: 0; font-size: 1.05rem; font-weight: 800; } .co-head small { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; } .co-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); } .co-badge { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: #e3f6ee; color: #12805c; white-space: nowrap; } .co-phone-ok { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #f4f7fc; color: var(--ink); } .co-phone-ok .icon { color: var(--muted); } .co-phone-form { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; } .co-card label { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; font-weight: 500; min-width: 0; } .co-card input, .co-card textarea, .co-card select { width: 100%; padding: 11px 14px; border: 1px solid #dbe1ec; border-radius: 12px; font: inherit; background: #fff; box-sizing: border-box; min-height: 44px; } .co-card input:focus, .co-card textarea:focus, .co-card select:focus { outline: 2px solid rgba(27,95,216,.35); border-color: var(--blue); } .co-card .opt { color: var(--muted); font-weight: 400; font-size: .78rem; } .co-card .btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 12px; padding: 10px 18px; cursor: pointer; font: inherit; font-weight: 600; white-space: nowrap; } .co-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .co-fields .span2 { grid-column: 1 / -1; } .co-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 6px; border-top: 1px dashed #dbe1ec; } .co-actions .btn-pill.pay { width: auto; min-width: 220px; flex: 0 1 auto; } .co-back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .88rem; text-decoration: none; padding: 8px 4px; } .co-back:hover { color: var(--blue); } .co-hint { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .8rem; color: var(--muted); } .co-hint.warn { color: #a96800; } .co-summary { position: sticky; top: 84px; align-self: start; gap: 14px; } .co-items { list-style: none; margin: 0; padding: 0 0 12px; border-bottom: 1px dashed #dbe1ec; display: grid; gap: 12px; max-height: 320px; overflow: auto; } .co-items li { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; font-size: .84rem; } .co-items img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; background: #f1f3f7; } .co-items .co-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; } .co-items small { color: var(--muted); } .co-items b { white-space: nowrap; font-size: .82rem; } .co-summary .sum-row.save b { color: #12805c; } .co-summary .link-soft { display: inline-flex; align-items: center; gap: 6px; } @media (max-width: 900px) { .co-summary { position: static; order: -1; } } @media (max-width: 600px) { .co-card { padding: 16px; border-radius: 16px; } .co-fields, .co-phone-form { grid-template-columns: minmax(0, 1fr); } .co-actions { flex-direction: column-reverse; align-items: stretch; } .co-actions .btn-pill.pay { width: 100%; min-width: 0; } .co-back { justify-content: center; } .co-badge { padding: 4px 8px; } } /* صفحه‌ی تکمیل سفارش (پس از بازگشت از درگاه) */ .od-page .od-head, .od-page .flash { margin-bottom: 0; } .od-success { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; background: linear-gradient(135deg, #e9f8f0, #f4fbf7); border: 1px solid #bfe8d2; border-radius: 18px; padding: 20px; } .od-success > i { width: 56px; height: 56px; border-radius: 50%; background: #12805c; color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(18,128,92,.3); } .od-success h2 { margin: 0 0 4px; font-size: 1.1rem; font-weight: 800; color: #0d6347; } .od-success p { margin: 0; color: #3f5a4e; font-size: .88rem; } .od-ref { display: flex; flex-direction: column; align-items: center; padding: 8px 16px; background: #fff; border-radius: 12px; } .od-ref small { color: var(--muted); font-size: .74rem; } .od-ref b { font-size: 1.05rem; color: var(--ink); } .od-success-actions { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; } .od-success-actions .btn-pill, .od-success-actions .btn-outline { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 20px; border-radius: 12px; box-sizing: border-box; } @media (max-width: 640px) { .od-success { grid-template-columns: auto 1fr; padding: 16px; } .od-ref { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; } .od-success-actions > * { flex: 1 1 100%; justify-content: center; } } /* ---------- Responsive fixes: header overlap and warranty cards ---------- */ .desktop-nav a, .desktop-nav .inline-form button, .wholesale-badge { white-space: nowrap; } .header-actions, .desktop-nav { min-width: 0; } @media (min-width: 768px) and (max-width: 1279px) { .logo { position: static; transform: none; flex-shrink: 0; } .desktop-nav { gap: 12px; font-size: .9rem; } .header-actions { gap: 8px; } } @media (min-width: 1280px) { .desktop-nav { gap: 20px; } } .wr-opts { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } .wr-opt { min-width: 0; } .wr-name { padding-inline-end: 22px; overflow-wrap: anywhere; } .wr-opt em { white-space: nowrap; } @media (max-width:720px) { .wr-opts { grid-template-columns: minmax(0,1fr); } } /* سبد خرید: وقتی جا کم است، اطلاعات کالا به‌جای فشرده‌شدن به خط بعد می‌رود */ .cart-item { flex-wrap: wrap; } .cart-info { flex: 1 1 240px; } .cart-line-box { flex: 0 0 auto; } /* دکمه‌ی تأیید با پیامک: آیکون و متن در یک ردیف */ form button.btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; cursor: pointer; font: inherit; font-weight: 600; } [data-cart-guest-tab][hidden] { display: none !important; } /* Quick view (v4): ستونِ مشخصات و نمودارها بر اساس عرض خودِ ستون اطلاعات؛ هر دو هم‌زمان یک یا دو ستونه می‌شوند */ .qv-wrap .qv-info { container: qvinfo / inline-size; } .qv-wrap .qv-specs, .qv-wrap .qv-perf-bars { grid-template-columns: minmax(0, 1fr); } @container qvinfo (min-width: 420px) { .qv-wrap .qv-specs, .qv-wrap .qv-perf-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* order detail: customer card + shipping label */ .cust-card { display: flex; flex-direction: column; gap: 4px; padding: 8px 18px; } .cust-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eef1f6; } .cust-row:last-child { border-bottom: 0; } .cust-ico { width: 32px; height: 32px; border-radius: 10px; background: #eaf1ff; color: var(--blue); display: grid; place-items: center; flex-shrink: 0; } .cust-lbl { width: 120px; flex-shrink: 0; color: var(--muted); font-size: .88rem; } .cust-val { flex: 1; line-height: 1.9; min-width: 0; overflow-wrap: anywhere; } .cust-val.ltr-val { text-align: right; } @media (max-width: 560px) { .cust-row { flex-wrap: wrap; } .cust-lbl { width: auto; flex: 1; } .cust-val { flex-basis: 100%; padding-right: 42px; } } .label-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .ship-label { background: #fff; border: 2px solid #222; border-radius: 6px; padding: 14px 16px; max-width: 760px; font-size: .92rem; line-height: 1.9; } .sl-head { font-weight: 800; font-size: 1.05rem; border-bottom: 1px solid #222; padding: 4px 0; margin: 6px 0; } .sl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .sl-grid > div, .sl-full { border-bottom: 1px solid #bbb; padding: 3px 0; } .sl-wide { grid-column: 1 / -1; } .sl-note { font-size: .8rem; color: #555; padding: 6px 0; } .ship-label .ed { outline: none; border-radius: 3px; } .ship-label .ed:hover, .ship-label .ed:focus { background: #fff8d6; } .ship-label .ed:empty::before { content: attr(data-ph); color: #aaa; } @media (max-width: 560px) { .sl-grid { grid-template-columns: 1fr; } } /* label polish (overrides) */ .ship-label { border: 1px solid #d5dbe6; border-radius: 12px; padding: 16px 20px; box-shadow: 0 4px 18px rgba(20,39,78,.08); display: flex; flex-direction: column; gap: 10px; } .sl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 2px solid #14274e; padding-bottom: 8px; margin: 0; } .sl-logo { height: 46px; width: auto; object-fit: contain; } .sl-title { font-weight: 800; font-size: 1.15rem; color: #14274e; text-align: left; } .sl-title small { display: block; font-weight: 500; font-size: .75rem; color: #667; direction: ltr; } .sl-head { align-self: flex-start; background: #eef2f9; color: #14274e; border: 0; border-inline-start: 4px solid #14274e; border-radius: 4px; padding: 2px 12px; margin: 0; font-size: .95rem; } .sl-grid { gap: 1px; background: #c9d0de; border-block: 1px solid #c9d0de; } .sl-grid > div { background: #fff; border: 0; padding: 6px 10px; } .sl-grid > div:last-child { grid-column: auto / -1; } .sl-full { border-bottom: 1px solid #c9d0de; padding: 6px 10px; } .sl-grid b, .sl-full b { color: #14274e; } .sl-note { background: #f5f7fb; border-radius: 6px; padding: 6px 10px; } @media print { html.printing-label body > *:not(#print-root) { display: none !important; } html.printing-label body { background: #fff !important; margin: 0 !important; padding: 0 !important; } html.printing-label * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } #print-root { height: 147mm; box-sizing: border-box; padding: 9mm 11mm; } #print-root .ship-label { height: 100%; border: 0; border-radius: 0; box-shadow: none; max-width: none; margin: 0; padding: 0; font-size: 10pt; line-height: 1.5; justify-content: space-between; gap: 0; } #print-root .sl-top { border-bottom: 1.5px solid #14274e; padding-bottom: 3mm; } #print-root .sl-logo { height: 13mm; } #print-root .sl-title { font-size: 12pt; } #print-root .sl-head { font-size: 10pt; padding: 1px 10px; } #print-root .sl-grid { grid-template-columns: 1fr 1fr 1fr; background: #b8c1d3; border-block-color: #b8c1d3; } #print-root .sl-grid > div { padding: 2.2mm 3mm; } #print-root .sl-wide { grid-column: span 2; } #print-root .sl-full { border-bottom-color: #b8c1d3; padding: 2.2mm 3mm; } #print-root .sl-note { background: #f5f7fb; font-size: 8pt; padding: 2mm 3mm; line-height: 1.55; } #print-root .ed:empty::before { content: ""; } @page { size: A5 landscape; margin: 0; } } /* no filled gaps: draw cell lines instead of a grey grid background */ .sl-grid, #print-root .sl-grid { background: none; gap: 0; border-block: 0; } .sl-grid > div { box-shadow: 0 0 0 .6px #b8c1d3; } /* final: flex rows, every cell fully boxed, last row stretches (no gaps, no missing sides) */ .sl-grid, #print-root .sl-grid { display: flex; flex-wrap: wrap; background: none; gap: 0; border: 0; padding: 1px 0 0 1px; } .sl-grid > div, #print-root .sl-grid > div { box-shadow: none; border: 1px solid #aab4c8; margin: -1px 0 0 -1px; flex: 1 1 30%; min-width: 0; padding: 6px 10px; } .sl-grid > .sl-wide, #print-root .sl-grid > .sl-wide { flex-basis: 60%; grid-column: auto; } .sl-grid > div:last-child { grid-column: auto; } .sl-full, #print-root .sl-full { border: 1px solid #aab4c8; padding: 6px 10px; } @media (max-width: 560px) { .sl-grid > div { flex-basis: 100%; } } @media print { #print-root .sl-grid > div { padding: 2.2mm 3mm; flex-basis: 30%; } #print-root .sl-grid > .sl-wide { flex-basis: 60%; } #print-root .sl-full { padding: 2.2mm 3mm; } } /* Admin SMS: modern compact action buttons (not full-width) */ .admin .form-card, .admin .admin-form { align-items: stretch; } .admin .form-card > .admin-btn, .admin .admin-form > .admin-btn, .admin .integration-grid form > .admin-btn { align-self: flex-start; width: auto; min-width: 168px; padding: 0 22px; min-height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--blue), #1a4fb0); font-weight: 600; font-size: .88rem; box-shadow: 0 6px 16px #174ca62e; transition: transform .15s, box-shadow .15s, filter .15s; } .admin .form-card > .admin-btn:hover, .admin .admin-form > .admin-btn:hover, .admin .integration-grid form > .admin-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px #174ca63d; filter: brightness(1.06); } .admin .form-card > .admin-btn:active, .admin .admin-form > .admin-btn:active { transform: none; box-shadow: 0 3px 8px #174ca62e; } .admin .form-card > .admin-btn:focus-visible, .admin .admin-form > .admin-btn:focus-visible { outline: 3px solid #258cfb55; outline-offset: 2px; } @media (max-width: 520px) { .admin .form-card > .admin-btn, .admin .admin-form > .admin-btn, .admin .integration-grid form > .admin-btn { align-self: stretch; } } /* Admin hardware catalog: Excel export / import */ .hw-xl { display:grid; gap:16px; margin:0 0 22px; grid-template-columns:1fr; } @media (min-width: 900px) { .hw-xl { grid-template-columns: minmax(260px,1fr) 2fr; align-items:start; } } .hw-panel { background:#fff; border:1px solid #e7edf5; border-radius:18px; box-shadow:0 4px 18px #142d4f08; padding:22px; display:flex; flex-direction:column; gap:16px; } .hw-panel > header { display:flex; gap:14px; align-items:center; } .hw-panel h2 { margin:0; font-size:1.05rem; color:#1d2e49; } .hw-panel header p { margin:3px 0 0; font-size:.82rem; color:#6b7c93; } .hw-ico { flex:none; width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg,#e8f0fe,#d6e4ff); color:var(--blue); } .hw-import form { display:flex; flex-direction:column; gap:18px; } .hw-sheets { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; } .hw-sheets li { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:#f4f7fb; color:#425976; font-size:.88rem; font-weight:500; } .hw-sheets .icon { color:var(--blue); } .hw-hint { margin:0; font-size:.78rem; color:#8392a8; } .hw-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; align-self:flex-start; min-height:44px; padding:0 22px; border:0; border-radius:12px; cursor:pointer; font:inherit; font-size:.88rem; font-weight:600; color:#fff; text-decoration:none; background:linear-gradient(135deg,var(--blue),#1a4fb0); box-shadow:0 6px 16px #174ca62e; transition:transform .15s, box-shadow .15s, filter .15s; } .hw-btn:hover { color:#fff; text-decoration:none; transform:translateY(-1px); box-shadow:0 10px 22px #174ca63d; filter:brightness(1.06); } .hw-btn:focus-visible { outline:3px solid #258cfb55; outline-offset:2px; } .hw-drop { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:24px 16px; text-align:center; border:2px dashed #c3d3ea; border-radius:16px; background:#f8fafd; color:#425976; cursor:pointer; transition:border-color .15s, background .15s; } .hw-drop:hover, .hw-drop:focus-within { border-color:var(--blue); background:#eef4ff; } .hw-drop input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; padding:0; border:0; } .hw-drop .icon { color:var(--blue); } .hw-drop .hw-fname { font-size:.85rem; color:#1d2e49; word-break:break-all; } .hw-drop small { color:#8392a8; font-size:.75rem; } .hw-group { display:flex; flex-direction:column; gap:8px; } .hw-label { font-size:.85rem; font-weight:600; color:#1d2e49; } .hw-chips, .hw-seg { display:flex; flex-wrap:wrap; gap:10px; } .hw-chip input, .hw-seg input { position:absolute; opacity:0; pointer-events:none; width:0; height:0; } .hw-chip, .hw-seg label { position:relative; cursor:pointer; flex:0 0 auto; } .hw-chip span, .hw-seg label span { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border:1.5px solid #dce4f0; border-radius:12px; background:#fff; color:#425976; font-size:.86rem; font-weight:500; transition:all .15s; } .hw-chip span:hover, .hw-seg label span:hover { border-color:#9db8e6; } .hw-chip input:checked + span, .hw-seg input:checked + span { border-color:var(--blue); background:#e8f0fe; color:var(--blue); font-weight:600; } .hw-chip input:focus-visible + span, .hw-seg input:focus-visible + span { outline:3px solid #258cfb55; outline-offset:2px; } .hw-switch { position:relative; display:flex; gap:12px; align-items:flex-start; padding:14px; border:1.5px solid #f3d6d6; border-radius:14px; background:#fff8f8; cursor:pointer; } .hw-switch input { position:absolute; opacity:0; width:0; height:0; } .hw-switch i { flex:none; width:42px; height:24px; border-radius:99px; background:#cfd8e6; position:relative; transition:background .15s; margin-top:2px; } .hw-switch i::after { content:""; position:absolute; top:3px; inset-inline-start:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0003; transition:inset-inline-start .15s; } .hw-switch input:checked + i { background:#d23c3c; } .hw-switch input:checked + i::after { inset-inline-start:21px; } .hw-switch input:focus-visible + i { outline:3px solid #d23c3c55; outline-offset:2px; } .hw-switch span { display:flex; flex-direction:column; gap:3px; } .hw-switch b { font-size:.86rem; color:#7a2323; } .hw-switch small { font-size:.76rem; color:#8a6a6a; } @media (max-width: 520px) { .hw-panel { padding:16px; } .hw-btn { align-self:stretch; } .hw-chip, .hw-seg label { flex:1 1 100%; } .hw-chip span, .hw-seg label span { width:100%; box-sizing:border-box; } } /* Admin hardware catalog: forms and tables */ .hw-wide { margin-bottom:18px; } .hw-form { display:grid; grid-template-columns:1fr; gap:16px; } @media (min-width: 720px) { .hw-form { grid-template-columns:1fr 1fr; } .hw-form .hw-full { grid-column:1 / -1; } } .hw-field { display:flex; flex-direction:column; gap:6px; min-width:0; } .hw-field input, .hw-field textarea { width:100%; box-sizing:border-box; min-height:44px; padding:10px 14px; border:1.5px solid #dce4f0; border-radius:12px; background:#fbfcfe; color:#1d2e49; font:inherit; font-size:.9rem; transition:border-color .15s, box-shadow .15s, background .15s; } .hw-field textarea { resize:vertical; line-height:1.7; } .hw-field input::placeholder { color:#a3b0c2; } .hw-field input:focus, .hw-field textarea:focus { outline:0; border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px #2f6fe428; } .hw-scores { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; } @media (min-width: 720px) { .hw-scores { grid-template-columns:repeat(5,1fr); } } .hw-switch.hw-blue { border-color:#dce4f0; background:#f8fafd; } .hw-switch.hw-blue b { color:#1d2e49; } .hw-switch.hw-blue small { color:#7a8aa0; } .hw-switch.hw-blue input:checked + i { background:var(--blue); } .hw-switch.hw-blue input:focus-visible + i { outline-color:#258cfb55; } .hw-actions { display:flex; gap:10px; flex-wrap:wrap; } .hw-btn.ghost { background:#edf1f7; color:#425976; box-shadow:none; border:1px solid #dce4f0; } .hw-btn.ghost:hover { color:#1d2e49; background:#e3eaf5; box-shadow:none; filter:none; } .hw-btn.sm { min-height:40px; padding:0 18px; font-size:.84rem; } .hw-search { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:6px 6px 6px 12px; border:1.5px solid #dce4f0; border-radius:14px; background:#fbfcfe; } .hw-search:focus-within { border-color:var(--blue); box-shadow:0 0 0 4px #2f6fe428; background:#fff; } .hw-search > .icon { color:#7a8aa0; flex:none; } .hw-search input { flex:1 1 180px; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:.9rem; padding:8px 4px; color:#1d2e49; } .hw-table-wrap { overflow-x:auto; border:1px solid #e7edf5; border-radius:14px; } .hw-table { width:100%; border-collapse:collapse; font-size:.86rem; min-width:640px; } .hw-table th { position:sticky; top:0; background:#f4f7fb; color:#5a6c85; font-weight:600; font-size:.78rem; text-align:start; padding:12px 14px; white-space:nowrap; } .hw-table td { padding:11px 14px; border-top:1px solid #eef2f8; color:#33465f; vertical-align:middle; } .hw-table tbody tr:hover { background:#f8fbff; } .hw-name { font-weight:600; color:#1d2e49; } .hw-key { color:#7a8aa0; font-size:.78rem; text-align:right; } .hw-note { color:#6b7c93; font-size:.8rem; } .hw-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:99px; font-size:.76rem; font-weight:600; white-space:nowrap; } .hw-badge.cpu { background:#e8f0fe; color:#1f55c4; } .hw-badge.gpu { background:#f1e9fd; color:#6a35b8; } .hw-score { display:inline-block; min-width:44px; text-align:center; padding:3px 10px; border-radius:8px; background:#f0f4fa; color:#1d2e49; font-weight:600; font-variant-numeric:tabular-nums; } .hw-edit { display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:10px; background:#edf3ff; color:var(--blue); font-size:.8rem; font-weight:600; text-decoration:none; white-space:nowrap; transition:background .15s; } .hw-edit:hover { background:#dbe7ff; text-decoration:none; color:var(--blue); } /* Admin orders list (matches hardware catalog theme) */ .ord-filters { gap:8px; } .ord-chip { display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border:1.5px solid #dce4f0; border-radius:12px; background:#fff; color:#425976; font-size:.85rem; font-weight:500; text-decoration:none; white-space:nowrap; transition:all .15s; } .ord-chip:hover { border-color:#9db8e6; text-decoration:none; color:#425976; } .ord-chip.on { border-color:var(--blue); background:#e8f0fe; color:var(--blue); font-weight:600; } .ord-table .inline-form { margin:0; } .ord-table .status-select { padding:6px 12px; } @media (max-width: 720px) { .ord-table { min-width:0; } .ord-table thead { display:none; } .ord-table, .ord-table tbody, .ord-table tr, .ord-table td { display:block; width:100%; } .ord-table tr { padding:10px 14px; border-top:1px solid #eef2f8; } .ord-table td { display:flex; justify-content:space-between; align-items:center; gap:12px; border:0; padding:6px 0; } .ord-table td[data-label]::before { content:attr(data-label); color:#7a8aa0; font-size:.78rem; font-weight:600; } .ord-table .ord-act { justify-content:flex-end; } .ord-table .ord-empty td { justify-content:center; } } /* Admin list pages: shared header action, filters, inline buttons */ .hw-panel > header .hw-head-btn { margin-inline-start:auto; align-self:center; } .hw-filters select { border:1.5px solid #dce4f0; border-radius:10px; background:#fff; padding:8px 10px; font:inherit; font-size:.85rem; color:#33465f; min-width:0; } .hw-del { display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border:0; border-radius:10px; background:#fdecec; color:#b42323; font:inherit; font-size:.8rem; font-weight:600; cursor:pointer; white-space:nowrap; transition:background .15s; } .hw-del:hover { background:#fbd9d9; } button.hw-edit { border:0; font:inherit; font-size:.8rem; font-weight:600; cursor:pointer; } .ord-table .ord-inline { display:inline-flex; align-items:center; gap:8px; margin:0; } .ord-table .actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .ord-table .actions form { margin:0; } .ord-table .admin-thumb { width:44px; height:44px; border:1px solid #eef2f8; } .ord-table td { overflow-wrap:anywhere; } @media (max-width: 720px) { .hw-panel > header { flex-wrap:wrap; } .hw-panel > header .hw-head-btn { margin-inline-start:0; width:100%; } .ord-table .actions { justify-content:flex-end; } .ord-table td:not([data-label]):not(.ord-act) { justify-content:flex-start; } } /* ===== Admin theme unification (applies to all remaining admin pages) ===== */ .quick-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 18px; } .quick-actions .hw-btn { align-self:auto; } .admin .admin-card, .admin .form-card, .admin .admin-form, .admin .detail-card { background:#fff; border:1px solid #e7edf5; border-radius:18px; box-shadow:0 4px 18px #142d4f08; padding:22px; } .admin .admin-card, .admin .admin-form { margin-bottom:18px; } .admin .form-card { gap:14px; } .admin .admin-form label, .admin .form-card label { font-size:.85rem; font-weight:600; color:#1d2e49; } .admin .admin-form label.check, .admin .form-card label.check, .admin .admin-form .checks label { font-weight:500; } .admin input[type=text], .admin input[type=number], .admin input[type=search], .admin input[type=url], .admin input[type=password], .admin input[type=email], .admin input[type=tel], .admin input[type=datetime-local], .admin select, .admin textarea { border:1.5px solid #dce4f0; border-radius:12px; background:#fbfcfe; padding:10px 12px; font:inherit; font-size:.9rem; color:#1d2e49; transition:border-color .15s, box-shadow .15s, background .15s; box-sizing:border-box; } .admin input:not([type=checkbox]):not([type=radio]):not([type=file]):focus, .admin select:focus, .admin textarea:focus { outline:0; border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px #2f6fe428; } .admin .admin-h2 { font-size:1.05rem; margin:26px 0 12px; } .admin .admin-h2 > .icon { color:var(--blue); } .admin .admin-table { border:1px solid #e7edf5; border-radius:14px; box-shadow:0 4px 18px #142d4f08; font-size:.86rem; overflow:hidden; } .admin .admin-table th { background:#f4f7fb; color:#5a6c85; font-size:.78rem; padding:12px 14px; } .admin .admin-table td { padding:11px 14px; border-bottom:1px solid #eef2f8; color:#33465f; } .admin .admin-table tbody tr:hover { background:#f8fbff; } .admin .admin-table tfoot th { background:#f8fafd; color:#1d2e49; font-size:.88rem; } .admin .table-wrap { border-radius:14px; } .admin .stat { border:1px solid #e7edf5; border-radius:16px; box-shadow:0 4px 18px #142d4f08; padding:16px 18px; transition:transform .15s, box-shadow .15s; } .admin .stat:hover { transform:translateY(-2px); box-shadow:0 10px 22px #142d4f14; } .admin .stat.accent { border-color:transparent; } .admin .chip { border:1.5px solid #dce4f0; border-radius:12px; box-shadow:none; padding:8px 15px; } .admin .chip.on { border-color:var(--blue); background:#e8f0fe; color:var(--blue); font-weight:600; } .admin .review-card header { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; } .admin .review-card.hidden-review { background:#fff8f8; border-color:#f3d6d6; } .admin .review-card .actions { margin-top:10px; } .admin .admin-filters { padding:8px; border:1.5px solid #dce4f0; border-radius:14px; background:#fbfcfe; align-items:center; } .admin details.admin-card > summary { cursor:pointer; font-weight:600; color:#1d2e49; } .admin .flash { border-radius:12px; } .admin .pager a, .admin .pager span { border-radius:10px; border:1px solid #dce4f0; box-shadow:none; } .admin .pager a.on { background:var(--blue); border-color:var(--blue); color:#fff; } .admin .dash-grid { gap:16px; } @media (max-width: 720px) { .admin .admin-card, .admin .form-card, .admin .admin-form { padding:16px; border-radius:16px; } .quick-actions .hw-btn { flex:1 1 calc(50% - 10px); } .admin .admin-table { min-width:560px; } } /* Shipping settings */ .ship-form { display:flex; flex-direction:column; gap:18px; } .ship-cols { display:grid; grid-template-columns:1fr; gap:18px; align-items:stretch; } @media (min-width: 900px) { .ship-cols { grid-template-columns:1fr 2fr; } } .ship-pair { display:grid; grid-template-columns:1fr; gap:16px; } @media (min-width: 600px) { .ship-pair { grid-template-columns:1fr 1fr; } } .ship-form .hw-field input { text-align:right; } .ship-form .hw-switch { border-color:#dce4f0; } .ship-rows { display:flex; flex-direction:column; gap:10px; } .ship-row { display:grid; grid-template-columns:1fr; gap:10px; align-items:center; padding:12px; border:1px solid #e7edf5; border-radius:14px; background:#f8fafd; } @media (min-width: 720px) { .ship-row { grid-template-columns:1.2fr 1fr auto; } } .ship-row input { width:100%; box-sizing:border-box; min-height:42px; padding:9px 14px; border:1.5px solid #dce4f0; border-radius:12px; background:#fff; font:inherit; font-size:.9rem; color:#1d2e49; } .ship-row input:focus { outline:0; border-color:var(--blue); box-shadow:0 0 0 4px #2f6fe428; } .ship-del { min-height:42px; justify-content:center; } .ship-actions { position:sticky; bottom:12px; justify-content:flex-start; } .ship-actions .hw-btn { box-shadow:0 8px 22px #174ca64d; } /* ===== Admin analytics dashboard (GA-style) ===== */ .ac { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; min-width:0; max-width:100%; color:#1d2e49; --ac-line:#e7edf5; --ac-muted:#6b7a90; --ac-blue:#2f6df0; } .ac *, .ac *::before, .ac *::after { box-sizing:border-box; } .ac h1, .ac h2, .ac p, .ac ul { margin:0; } .ac-top { position:relative; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; padding:20px 22px; border-radius:22px; color:#fff; background:linear-gradient(125deg,#14284d 0%,#1d4a97 55%,#2f6df0 120%); box-shadow:0 14px 34px #1d4a9533; } .ac-top::after { content:""; position:absolute; inset-block:-60% -40%; inset-inline-end:-6%; width:340px; border-radius:50%; background:radial-gradient(closest-side,#ffffff22,transparent); pointer-events:none; } .ac-head { display:flex; align-items:center; gap:14px; min-width:0; position:relative; z-index:1; } .ac-head-icon { display:grid; place-items:center; flex:none; width:50px; height:50px; border-radius:16px; background:#ffffff1f; border:1px solid #ffffff2e; } .ac-head h1 { font-size:1.3rem; font-weight:700; letter-spacing:-.3px; color:#fff; line-height:1.4; } .ac-head p { font-size:.78rem; color:#c9d9f6; margin-top:2px; } .ac-head-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; position:relative; z-index:1; } .ac-online, .ac-chip, .ac-btn { display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 14px; border-radius:99px; font-size:.82rem; font-weight:500; color:#fff; background:#ffffff1c; border:1px solid #ffffff30; text-decoration:none; cursor:pointer; transition:background .16s,color .16s; } .ac-online b { font-size:.95rem; } .ac-btn:hover, .ac-chip:hover { background:#ffffff33; color:#fff; text-decoration:none; } .ac-online i, .ac-chip i, .ac-pulse { display:inline-block; width:8px; height:8px; border-radius:50%; background:#4ade80; animation:acPulse 1.8s infinite; flex:none; } .ac-chip i { background:#a3b6d6; animation:none; } .ac-chip.on { background:#fff; color:#1d4a97; } .ac-chip.on:hover { background:#fff; color:#1d4a97; } .ac-chip.on i { background:#22c55e; animation:acPulse 1.8s infinite; } @keyframes acPulse { 0% { box-shadow:0 0 0 0 #4ade8099; } 70% { box-shadow:0 0 0 7px #4ade8000; } 100% { box-shadow:0 0 0 0 #4ade8000; } } .ac-toolbar { display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:6; padding:6px 0; background:#f5f7fbee; backdrop-filter:blur(6px); } .ac-ranges { display:flex; gap:3px; flex:1 1 auto; min-width:0; overflow-x:auto; padding:4px; background:#fff; border:1px solid var(--ac-line); border-radius:15px; scrollbar-width:none; } .ac-ranges::-webkit-scrollbar { display:none; } .ac-ranges a { flex:none; padding:8px 14px; border-radius:11px; font-size:.8rem; font-weight:500; color:#53647f; white-space:nowrap; text-decoration:none; transition:background .15s,color .15s; } .ac-ranges a:hover { background:#eef3fb; color:#1d2e49; text-decoration:none; } .ac-ranges a.on { background:var(--ac-blue); color:#fff; box-shadow:0 4px 12px #2f6df040; } .ac-filter { position:relative; flex:none; } .ac-filter>summary { list-style:none; display:inline-flex; align-items:center; gap:7px; min-height:46px; padding:0 15px; background:#fff; border:1px solid var(--ac-line); border-radius:15px; font-size:.82rem; font-weight:500; color:#425976; cursor:pointer; } .ac-filter>summary::-webkit-details-marker { display:none; } .ac-filter[open]>summary { border-color:#b9cff7; background:#f3f7ff; } .ac-filter>summary b { display:grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:99px; background:var(--ac-blue); color:#fff; font-size:.7rem; } .ac-filter-form { position:absolute; inset-inline-end:0; top:calc(100% + 8px); z-index:20; width:min(340px,86vw); display:grid; gap:12px; padding:16px; background:#fff; border:1px solid var(--ac-line); border-radius:18px; box-shadow:0 18px 44px #142d4f26; } .ac-filter-form label { display:grid; gap:5px; font-size:.78rem; color:var(--ac-muted); } .ac-filter-form input:not([type=hidden]), .ac-filter-form select { width:100%; min-height:40px; border:1px solid #d7deeb; border-radius:11px; padding:0 11px; font:inherit; font-size:.85rem; background:#fff; color:#1d2e49; } .ac-filter-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; } .ac-filter-actions a { font-size:.8rem; color:#c0392b; } .ac-kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; } .ac-kpi { position:relative; display:flex; flex-direction:column; gap:5px; min-height:132px; padding:15px 16px 14px; background:#fff; border:1px solid var(--ac-line); border-radius:18px; color:inherit; text-decoration:none; overflow:hidden; transition:transform .16s,box-shadow .16s,border-color .16s; } a.ac-kpi:hover { transform:translateY(-2px); box-shadow:0 12px 26px #142d4f14; text-decoration:none; color:inherit; } .ac-kpi.sel { border-color:#9db9f2; box-shadow:0 8px 22px #2f6df01f; } .ac-kpi.sel::before { content:""; position:absolute; inset-inline:0; top:0; height:3px; background:var(--ac-blue); } .ac-kpi-label { font-size:.78rem; color:var(--ac-muted); } .ac-kpi strong { font-size:1.65rem; line-height:1.25; color:#14233d; font-weight:700; letter-spacing:-.5px; } .ac-kpi small { font-size:.7rem; color:#8895a8; line-height:1.6; } .ac-delta { font-style:normal; width:fit-content; padding:2px 8px; border-radius:99px; font-size:.72rem; font-weight:600; background:#eef2f8; color:#64748b; } .ac-delta.good { background:#e5f7ec; color:#15803d; } .ac-delta.bad { background:#fdeaea; color:#c0392b; } .ac-spark { position:absolute; inset-inline-end:12px; bottom:12px; width:40%; height:34px; fill:none; stroke:var(--ac-blue); stroke-width:1.8; stroke-linejoin:round; opacity:.8; } .ac-card { min-width:0; padding:18px 20px; background:#fff; border:1px solid var(--ac-line); border-radius:20px; box-shadow:0 4px 18px #142d4f06; } .ac-card-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 14px; margin-bottom:12px; } .ac-card-head h2 { display:flex; align-items:center; gap:8px; font-size:1rem; font-weight:700; color:#14233d; } .ac-card-head small { color:var(--ac-muted); font-size:.74rem; } .ac-legend { display:flex; gap:14px; font-size:.74rem; color:var(--ac-muted); } .ac-legend span { display:inline-flex; align-items:center; gap:6px; } .ac-legend i { display:inline-block; width:18px; height:0; border-top:3px solid var(--ac-blue); border-radius:2px; } .ac-legend i.prv { border-top:2px dashed #a9b6ca; } .ac-split { display:grid; gap:16px; grid-template-columns:minmax(0,1fr); } @media (min-width:1100px) { .ac-split { grid-template-columns:minmax(0,2.4fr) minmax(250px,1fr); } } .ac-grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); } .ac-grid.two { grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); } .ac-chart { display:grid; grid-template-columns:48px minmax(0,1fr); grid-template-rows:260px auto; column-gap:8px; margin-top:8px; } .ac-yaxis { position:relative; } .ac-yaxis span { position:absolute; right:0; transform:translateY(-50%); font-size:.68rem; color:var(--ac-muted); white-space:nowrap; } .ac-plot { position:relative; touch-action:pan-y; cursor:crosshair; } .ac-plot svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; } .ac-plot .grid { stroke:#e9eef6; stroke-width:1; } .ac-plot .line { fill:none; stroke:var(--ac-blue); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round; } .ac-plot .area { fill:url(#acg); stroke:none; } .ac-plot .prev { fill:none; stroke:#a9b6ca; stroke-width:1.6; stroke-dasharray:5 4; } .ac-guide { position:absolute; top:0; bottom:0; width:1px; background:#2f6df066; opacity:0; pointer-events:none; } .ac-dot { position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; border:2.5px solid #fff; opacity:0; pointer-events:none; box-shadow:0 1px 5px #0003; } .ac-dot.cur { background:var(--ac-blue); } .ac-dot.prv { background:#a9b6ca; width:10px; height:10px; margin:-5px 0 0 -5px; } .ac-tip { position:absolute; top:6px; z-index:4; opacity:0; pointer-events:none; direction:rtl; text-align:start; white-space:nowrap; padding:9px 12px; border-radius:12px; background:#14233d; color:#fff; font-size:.76rem; line-height:1.7; box-shadow:0 10px 26px #14233d40; transform:translateX(-50%); } .ac-tip.start { transform:translateX(14px); } .ac-tip.end { transform:translateX(calc(-100% - 14px)); } .ac-tip .when { font-weight:600; margin-bottom:2px; } .ac-tip .cur { color:#a9c8ff; } .ac-tip .prv { color:#b6c2d6; } .ac-chart.hot .ac-guide, .ac-chart.hot .ac-dot, .ac-chart.hot .ac-tip { opacity:1; } .ac-xaxis { position:relative; grid-column:2; height:24px; margin-top:8px; } .ac-xaxis span { position:absolute; transform:translateX(-50%); font-size:.68rem; color:var(--ac-muted); white-space:nowrap; } .ac-xaxis span:first-child { transform:none; } .ac-foot { font-size:.72rem; color:#8895a8; margin-top:8px; } .ac-foot.top { margin:-4px 0 8px; } .ac-empty { padding:36px 12px; text-align:center; color:var(--ac-muted); font-size:.88rem; } .ac-empty.sm { padding:16px 8px; font-size:.82rem; } .ac-now-count { display:flex; align-items:baseline; gap:8px; margin-bottom:12px; } .ac-now-count strong { font-size:2.4rem; line-height:1; color:#14233d; font-weight:700; } .ac-now-count span { color:var(--ac-muted); font-size:.8rem; } .ac-pulse { margin-inline-end:2px; } .ac-list { list-style:none; padding:0; display:grid; gap:6px; } .ac-list a { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 11px; border-radius:11px; background:#f6f8fc; color:#1d2e49; font-size:.8rem; text-decoration:none; } .ac-list a:hover { background:#eaf1ff; text-decoration:none; } .ac-list a span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ac-list a b { color:var(--ac-blue); } .ac-bars { list-style:none; padding:0; display:grid; gap:6px; } .ac-bars li>a, .ac-bars li>div { position:relative; display:flex; align-items:center; gap:10px; min-height:38px; padding:0 12px; border-radius:11px; background:#f6f8fc; color:#1d2e49; font-size:.8rem; overflow:hidden; text-decoration:none; } .ac-bars li>a:hover { background:#eef3fc; text-decoration:none; } .ac-bar-fill { position:absolute; inset-block:0; inset-inline-start:0; background:#d9e6ff; border-radius:11px; } .ac-bar-name { position:relative; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ac-bars b, .ac-bars em { position:relative; } .ac-bars em { min-width:44px; text-align:end; font-style:normal; color:var(--ac-muted); font-size:.72rem; } .ac-donut { display:flex; align-items:center; gap:18px; flex-wrap:wrap; } .ac-ring { position:relative; width:132px; height:132px; flex:none; } .ac-ring svg { width:100%; height:100%; } .ac-ring circle { fill:none; stroke-width:4.2; } .ac-ring circle.bg { stroke:#eef2f8; } .ac-ring span { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:.7rem; color:var(--ac-muted); line-height:1.4; } .ac-ring span b { font-size:1.15rem; color:#14233d; } .ac-keys { list-style:none; padding:0; display:grid; gap:8px; flex:1; min-width:130px; } .ac-keys li { display:flex; align-items:center; gap:8px; font-size:.8rem; } .ac-keys i { width:10px; height:10px; border-radius:3px; flex:none; } .ac-keys span { flex:1; } .ac-keys b { color:#14233d; } .ac-hours { display:flex; align-items:stretch; gap:3px; height:180px; } .ac-hours button { position:relative; flex:1; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; padding:0 0 20px; background:none; border:0; cursor:help; } .ac-hours i { display:block; width:100%; min-height:2px; border-radius:6px 6px 0 0; background:linear-gradient(#86adff,#2f6df0); transition:opacity .15s; } .ac-hours button:hover i { opacity:.7; } .ac-hours small { position:absolute; bottom:0; font-size:.66rem; color:var(--ac-muted); } .ac-table { overflow:auto; max-height:560px; margin-top:4px; border-radius:12px; } .ac-table table { width:100%; border-collapse:collapse; font-size:.82rem; } .ac-table th { position:sticky; top:0; z-index:1; padding:10px 12px; background:#f4f7fc; color:var(--ac-muted); font-weight:600; font-size:.76rem; text-align:start; white-space:nowrap; } .ac-table td { padding:10px 12px; border-top:1px solid #eef2f8; vertical-align:middle; } .ac-table tbody tr:hover td { background:#fafcff; } .ac-table small { color:var(--ac-muted); } .ac-page { display:flex; flex-direction:column; gap:2px; max-width:420px; color:#1d2e49; text-decoration:none; } .ac-page:hover { text-decoration:none; color:var(--ac-blue); } .ac-page b { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ac-page small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:end; } .ac-inbar { position:relative; display:flex; align-items:center; min-width:110px; height:28px; padding-inline:9px; } .ac-inbar span { position:absolute; inset-block:3px; inset-inline-start:0; background:#dbe7ff; border-radius:8px; } .ac-inbar b { position:relative; } .ac-act a { display:inline-flex; align-items:center; gap:5px; color:#4a6fa8; font-size:.78rem; white-space:nowrap; } .ac-note { display:flex; gap:9px; align-items:flex-start; padding:13px 15px; border:1px dashed #d4deee; border-radius:15px; background:#fff; color:var(--ac-muted); font-size:.76rem; line-height:1.95; } .ac-note .icon { flex:none; margin-top:5px; } .ac-note.warn { background:#fff8e6; border-color:#f1d68a; color:#7a5b10; } @media (max-width:640px) { .ac-top { padding:16px; border-radius:18px; } .ac-head h1 { font-size:1.1rem; } .ac-head-icon { width:42px; height:42px; border-radius:13px; } .ac-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .ac-kpi { min-height:118px; padding:13px; } .ac-kpi strong { font-size:1.3rem; } .ac-spark { width:34%; height:26px; } .ac-card { padding:15px; border-radius:17px; } .ac-chart { grid-template-columns:36px minmax(0,1fr); grid-template-rows:210px auto; column-gap:6px; } .ac-grid.two { grid-template-columns:minmax(0,1fr); } .ac-toolbar { gap:6px; } .ac-filter>summary { padding:0 12px; } } @media (prefers-reduced-motion:reduce) { .ac-online i, .ac-chip i, .ac-pulse { animation:none; } } /* Home hero photo */ /* عکس محصول روی زمینهٔ سفید است؛ multiply سفیدی را در گرادیان هیرو محو می‌کند */ .hero-photo { margin: 0; width: 100%; display: flex; justify-content: center; } .hero-photo img { width: 100%; max-width: 480px; height: auto; max-height: 320px; object-fit: contain; mix-blend-mode: multiply; display: block; -webkit-mask-image: linear-gradient(to right, transparent, #000 2%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 2%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 2%, #000 94%, transparent); mask-composite: intersect; } @media (min-width: 768px) { .hero-photo { width: 45%; flex: none; } .hero-photo img { max-width: 560px; max-height: 420px; } } /* نمادهای اعتماد (اینماد / نماد تجارت الکترونیک) */ .trust-badges { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; } .trust-badges a, .trust-badges .trust-badge { display: inline-flex; background: #fff; border-radius: 12px; padding: 8px; line-height: 0; } .trust-badges img { height: 88px; width: auto; max-width: 100%; object-fit: contain; } .trust-badges.footer-trust { margin: 28px 0 0; } .trust-badges.about-trust { margin: 32px 0 8px; } @media (max-width: 575px) { .trust-badges img { height: 72px; } }