/* Dashboard standalone styles (independent of Tailwind for portability). * * All brand colors flow from CSS variables exposed by the theme in * (see ar-shop-brand-tokens style block). The amber hex values * (#d97706, #b45309, #fef3c7, ...) are kept only as fallbacks for when the * dashboard renders without the theme (e.g. wp-admin preview, isolated test * pages). Never hardcode amber in new rules — always go through `var(--primary…)`. * * The dashboard renders inside `.woocommerce-MyAccount-content` (a grid cell * that's already width-constrained by the parent My Account layout). We * therefore make the dashboard fluid — no internal `max-width`, no auto * margins — and let the surrounding content cell decide the width. Every * panel below uses `min-width: 0` so flex/grid children can shrink without * pushing horizontal scroll on narrow content areas. */ .dash{ width:100%; margin:0 0 22px; padding:0; color:#1f2937; /* Inherit the storefront's active font token (Cairo / Inter / Heebo) so the dashboard switches with the admin's language selection instead of being permanently locked to Cairo. */ font-family:var(--font-family,"Cairo"),system-ui,-apple-system,"Segoe UI",Arial,sans-serif; box-sizing:border-box; min-width:0; text-align: start; } .dash *, .dash *::before, .dash *::after{box-sizing:border-box} .dash input[type="checkbox"] { appearance: auto !important; -webkit-appearance: checkbox !important; -moz-appearance: checkbox !important; inline-size: 18px !important; block-size: 18px !important; min-inline-size: 18px !important; padding: 0 !important; margin: 0 !important; border-radius: 3px !important; accent-color: var(--primary, #d97706); cursor: pointer; flex: 0 0 auto; } .dash input[type="checkbox"]:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary, #d97706) 70%, transparent); outline-offset: 2px; } .dash__head{margin-bottom:12px} .dash__title{margin:0 0 6px;font-weight:900;font-size:clamp(18px, 2.2vw, 22px);line-height:1.25} .dash__hint{opacity:.75;font-weight:700;font-size:clamp(12.5px, 1.6vw, 14px);line-height:1.5} .dash__tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .dash__tabs::-webkit-scrollbar{display:none} .tab{padding:10px 12px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;color:#374151;font-weight:800;cursor:pointer;transition:all .15s ease} .tab:hover{border-color:var(--primary, #d97706);color:var(--primary-hover, #b45309)} .tab.is-active{background:var(--primary, #d97706);border-color:var(--primary-hover, #b45309);color:#fff} .dash__panel{display:none} .dash__panel.is-active{display:block} .card.dash__card{ width:100%; padding:clamp(14px, 2vw, 20px); border-radius:14px; border:1px solid #e5e7eb; background:#fff; box-shadow:0 10px 25px rgba(0,0,0,.05); min-width:0; overflow-wrap:anywhere; } .dash .muted{opacity:.7;font-weight:700} .dash .row{display:grid;gap:6px;margin:10px 0} .dash .row label{font-weight:800} .dash .row input,.dash .row textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #d1d5db;background:#fff;color:#1f2937;transition:border-color .15s ease,box-shadow .15s ease} .dash .row input:focus,.dash .row textarea:focus{outline:none;border-color:var(--primary, #d97706);box-shadow:0 0 0 3px color-mix(in srgb, var(--primary, #d97706) 18%, transparent)} .dash .flex{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .dash .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid #e5e7eb;background:#fff;color:#1f2937;cursor:pointer;font-weight:800;transition:all .15s ease} .dash .btn:hover:not(:disabled){border-color:var(--primary, #d97706);color:var(--primary-hover, #b45309)} .dash .btn--primary{background:var(--primary, #d97706);border-color:var(--primary-hover, #b45309);color:#fff} .dash .btn--primary:hover:not(:disabled){background:var(--primary-hover, #b45309);border-color:var(--primary-dark, #92400e);color:#fff} .dash .btn--danger{border-color:#fca5a5;color:#b91c1c} .dash .btn--danger:hover:not(:disabled){background:#fee2e2;border-color:#b91c1c;color:#b91c1c} .dash .product-search-input { min-width: min(320px, 100%); font-size: 14px; } /* ============================================================ * * Responsive data tables (products / orders / sliders / etc.) * * * * Desktop (≥641px): the wrapper fills 100% of its card. The * * is forced to 100% width too. The "main" column * * (image cell `.dash-table__col-main`) absorbs all extra width * * so the action column never bloats and stays content-sized. * * Action buttons inside `.dash-table__actions` align to the * * leading edge of the row (= LEFT in RTL, RIGHT in LTR). * * * * Mobile (≤640px): the table reflows to a card stack. The thead * * is hidden, each becomes a card, each
shows * * `data-label: value` so users still know what each cell is. * * * * The wrapping `.dash .table` div still allows horizontal scroll * * as a fallback for edge-case content (very long URLs etc.). * * ============================================================ */ .dash .table { /* Force `display: block` to neutralize Tailwind Play CDN's utility * `.table { display: table }`. The wrapper here is just a scrollable * container around a real ; if Tailwind's rule wins, the * wrapper becomes a table itself and the inner
//
* collapse into an anonymous single-cell layout (rows render as one * flat line of text). `!important` here defeats both Tailwind's * .table utility *and* any inline-table cascade from the Play CDN * runtime, which inlines computed styles after our stylesheet loads. */ display: block !important; margin-top: 12px; width: 100%; min-width: 0; box-sizing: border-box; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; } .dash .table table { /* Restore proper table semantics on the inner element — guards against * any descendant `.table` utility that might cascade through. */ display: table !important; width: 100%; min-width: 100%; border-collapse: collapse; table-layout: auto; } .dash .table thead { display: table-header-group !important; } .dash .table tbody { display: table-row-group !important; } .dash .table tr { display: table-row !important; } .dash .table th, .dash .table td { display: table-cell !important; } .dash .table th, .dash .table td { padding: 10px 12px; border-bottom: 1px solid #e5e7eb; text-align: start; font-weight: 700; vertical-align: middle; white-space: nowrap; } .dash .table th { background: #f9fafb; color: #374151; font-weight: 800; font-size: 13px; } .dash .table tbody tr:last-child td { border-bottom: 0; } .dash .table tbody tr:hover { background: color-mix(in srgb, var(--primary, #d97706) 4%, #fff); } /* The wrapping parent (.card.dash__card) sets `overflow-wrap: anywhere` to keep stray long strings (URLs, hashes) from blowing out the card. That setting is *inherited* into every table cell — which combined with the rule below makes Arabic product names break character-by-character ("كلس | ون" instead of "كلسون"). Restore default word-level breaking inside tables; the .table wrapper still scrolls horizontally when the columns genuinely don't fit (via overflow-x: auto above). */ .dash .table, .dash .table * { overflow-wrap: normal; word-break: normal; } /* ------ Column sizing (table-layout: auto) -------------------- * * * `width: 100%` on a in `table-layout: auto` is a HINT that * "this column should absorb extra space". With `width: 1%` on * the action column we tell the browser "give this column only * its content width". Result: title column flexes, action column * stays compact, no more "ghost" empty space inside rows. */ .dash .table .dash-table__col-img { width: 1%; white-space: nowrap; } .dash .table .dash-table__col-main { width: 100%; white-space: normal; min-width: 160px; } .dash .table .dash-table__col-price { width: 1%; min-width: 150px; white-space: nowrap; } .dash .table .dash-table__col-actions { width: 1%; white-space: nowrap; text-align: end; /* anchor the actions container to the row's end edge */ } /* Legacy selector (kept for any table without the new class hooks). */ .dash .table td:nth-child(2):not([class*="dash-table__col-"]) { white-space: normal; min-width: 180px; } /* ------ Action button cluster --------------------------------- */ .dash-table__actions { display: inline-flex; align-items: center; justify-content: flex-end; /* sit at the row's trailing visual edge */ gap: 8px; flex-wrap: wrap; } .dash-table__actions > * { white-space: nowrap; } .dash-price { display: inline-flex; align-items: baseline; gap: 7px; flex-wrap: nowrap; font-weight: 900; color: #111827; white-space: nowrap; } .dash-price del { color: #9ca3af; font-size: 12px; font-weight: 700; } .dash-price ins { color: #059669; font-weight: 900; text-decoration: none; } .dash-sale-chip { display: inline-flex; align-items: center; margin-top: 4px; padding: 2px 7px; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: 11px; font-weight: 900; } .dash .table::-webkit-scrollbar { height: 8px; } .dash .table::-webkit-scrollbar-track { background: #f9fafb; border-radius: 0 0 12px 12px; } .dash .table::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--primary, #d97706) 35%, #d1d5db); border-radius: 8px; } .dash .table::-webkit-scrollbar-thumb:hover { background: var(--primary, #d97706); } /* ============================================================ * * Narrow viewport — reflow tables to stacked cards. * * * * Breakpoint raised to 880px (matches My Account sidebar stack * * breakpoint in theme/style.css) because BELOW 880px: * * - The 280px sidebar is still visible side-by-side, leaving * * the table area only ~500px wide — too tight for 7 * * columns. Reflowing to card layout reads much better. * * - Once sidebar stacks above the content (>=880px+ on most * * browser layouts after sidebar wraps), the desktop table * * gets its full width back and renders normally. * * ============================================================ */ @media (max-width: 880px) { .dash .table { border: 0; background: transparent; border-radius: 0; overflow-x: visible; margin-top: 8px; } .dash .table table { display: block !important; width: 100%; min-width: 0; } .dash .table thead { /* Visually hide but keep accessible to assistive tech. */ position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; } .dash .table tbody { display: block !important; } .dash .table tbody tr { display: block !important; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; margin: 0 0 10px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } .dash .table tbody tr:last-child { margin-bottom: 0; } .dash .table tbody tr:hover { background: #fff; } .dash .table tbody td { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; width: auto !important; padding: 8px 0; border-bottom: 1px dashed #f1f5f9; font-size: 13.5px; white-space: normal; text-align: end; } .dash .table tbody td:last-child { border-bottom: 0; padding-bottom: 0; } .dash .table tbody td:first-child { padding-top: 0; } /* Use the data-label attribute we add in JS as a leading label. */ .dash .table tbody td::before { content: attr(data-label); flex: 0 0 auto; font-weight: 800; font-size: 12.5px; color: #6b7280; text-transform: none; letter-spacing: 0.01em; text-align: start; } /* Empty-label cells (e.g. the action column) shouldn't leave a gap. */ .dash .table tbody td[data-label=""]::before, .dash .table tbody td:not([data-label])::before { content: none; } /* Image cell on mobile: pin the thumbnail to the start of the card. */ .dash .table tbody td.dash-table__col-img { justify-content: flex-start; } .dash .table tbody td.dash-table__col-img::before { margin-inline-end: auto; } /* Main title cell + actions cell get their own block layout so wrapping works comfortably on narrow phones. */ .dash .table tbody td.dash-table__col-main { flex-direction: column; align-items: stretch; text-align: start; gap: 4px; } .dash .table tbody td.dash-table__col-main::before { text-align: start; } .dash .table tbody td.dash-table__col-price { min-width: 0; } .dash .table tbody td.dash-table__col-price .dash-price { flex-wrap: wrap; justify-content: flex-end; } .dash .table tbody td.dash-table__col-actions { flex-direction: column; align-items: stretch; padding-top: 10px; margin-top: 4px; border-top: 1px solid #f1f5f9; border-bottom: 0; } .dash-table__actions { display: flex; flex-wrap: wrap; justify-content: stretch; gap: 8px; } .dash-table__actions > .btn, .dash-table__actions > a.btn { flex: 1 1 auto; min-width: 0; justify-content: center; } /* Empty-state row (single cell with colspan) stays a single block. */ .dash .table tbody tr:has(> td[colspan]) { text-align: center; padding: 24px 12px; } .dash .table tbody tr td[colspan] { border-bottom: 0; justify-content: center; padding: 0; } .dash .table tbody tr td[colspan]::before { content: none; } /* The pagination row sits OUTSIDE the table but inside the wrapper. Make it span the full width and re-add background on mobile. */ .dash .table .pagination { margin-top: 4px; border-radius: 12px; border: 1px solid #e5e7eb; } } /* ============================================================ * * Pagination footer (shared by products + orders tables) * * ============================================================ */ .dash .pagination{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-top:1px solid #e5e7eb;background:#f9fafb;flex-wrap:wrap} .dash .pagination__status{font-size:12.5px;font-weight:700;color:#6b7280} .dash .pagination__controls{display:inline-flex;align-items:center;gap:6px} .dash .pagination__btn{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#374151;font-weight:800;font-size:13px;cursor:pointer;transition:all .15s ease} .dash .pagination__btn:hover:not(:disabled){border-color:var(--primary, #d97706);color:var(--primary-hover, #b45309);background:color-mix(in srgb, var(--primary, #d97706) 6%, #fff)} .dash .pagination__btn:disabled{opacity:.45;cursor:not-allowed} .dash .pagination__btn.is-current{background:var(--primary, #d97706);border-color:var(--primary-hover, #b45309);color:#fff} .dash .pagination__btn.is-current:hover{background:var(--primary-hover, #b45309)} .dash-orders-manager { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 12px; padding: 2px; } .orders-control-panel { display: grid; gap: 12px; margin: 0 0 14px; padding: 14px; border: 1px solid #e5e7eb; border-radius: 16px; background: #fff; box-shadow: 0 10px 28px -24px rgba(15, 23, 42, 0.42); } .orders-control-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .orders-control-panel__head h4 { margin: 0 0 3px; color: #111827; font-size: 16px; font-weight: 950; } .orders-control-panel__head p { margin: 0; color: #6b7280; font-size: 12.5px; font-weight: 800; line-height: 1.6; } .orders-control-panel__head strong { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 34px; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--primary, #d97706) 10%, #fff); color: var(--primary-hover, #b45309); font-size: 13px; font-weight: 950; } .orders-filter-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } .orders-filter-chips::-webkit-scrollbar { display: none; } .orders-filter-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 7px 11px; border-radius: 999px; border: 1px solid #e5e7eb; background: #fff; color: #374151; font: inherit; font-size: 12.5px; font-weight: 900; cursor: pointer; } .orders-filter-chip b { min-width: 24px; padding: 2px 7px; border-radius: 999px; background: #f3f4f6; color: #111827; text-align: center; } .orders-filter-chip.is-active { border-color: var(--primary, #d97706); background: var(--primary, #d97706); color: #fff; } .orders-filter-chip.is-active b { background: rgba(255,255,255,.2); color: #fff; } .orders-filter-grid { display: grid; grid-template-columns: minmax(220px, 1.5fr) minmax(160px, .75fr) minmax(160px, .75fr); gap: 10px; } .orders-filter-grid label { display: grid; gap: 5px; color: #4b5563; font-size: 12px; font-weight: 900; } .orders-filter-grid input, .orders-filter-grid select { width: 100%; min-height: 40px; border: 1px solid #d1d5db; border-radius: 12px; background: #fff; padding: 8px 12px; font: inherit; font-weight: 800; } .manual-order-box { margin-bottom: 16px; padding: 14px; border: 1px solid color-mix(in srgb, var(--primary, #d97706) 20%, #e5e7eb); border-radius: 16px; background: color-mix(in srgb, var(--primary, #d97706) 5%, #fff); } .manual-order-box summary { cursor: pointer; color: var(--primary-hover, #b45309); font-weight: 900; } .manual-order-note { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #fff; color: #4b5563; font-size: 12.5px; font-weight: 800; line-height: 1.6; } .manual-order-note strong { color: #065f46; } .manual-order-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; } .manual-order-items { display: grid; gap: 8px; margin-top: 12px; } .manual-order-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 8px; align-items: center; } .manual-order-box input, .manual-order-box select { width: 100%; min-height: 40px; border: 1px solid #d1d5db; border-radius: 12px; background: #fff; padding: 8px 12px; font: inherit; font-weight: 800; } .manual-order-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .dash-order-card { display: grid; gap: 12px; padding: 16px; border: 1px solid #e5e7eb; border-radius: 16px; background: #ffffff; box-shadow: 0 10px 28px -24px rgba(15, 23, 42, 0.42); } .dash-order-card__head, .dash-order-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .dash-order-card__number { display: block; color: #111827; font-size: 16px; font-weight: 900; } .dash-order-card__date, .dash-order-card__customer span { display: block; color: #6b7280; font-size: 12.5px; font-weight: 700; } .dash-order-status { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 12px; border-radius: 999px; background: #f3f4f6; color: #374151; font-size: 12px; font-weight: 900; } .dash-order-status--new, .dash-order-status--pending { background: #fef3c7; color: #92400e; } .dash-order-status--confirmed { background: #dcfce7; color: #166534; } .dash-order-status--processing { background: #dbeafe; color: #1e40af; } .dash-order-status--shipped { background: #e0f2fe; color: #075985; } .dash-order-status--delivered, .dash-order-status--completed { background: #d1fae5; color: #065f46; } .dash-order-status--rejected, .dash-order-status--cancelled, .dash-order-status--failed { background: #fee2e2; color: #991b1b; } .dash-order-card__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding-block: 12px; border-block: 1px solid #f3f4f6; } .dash-order-card__customer { min-width: 0; } .dash-order-card__customer strong { display: block; color: #111827; font-weight: 900; } .dash-order-card__total { color: var(--primary-hover, #b45309); font-size: 16px; font-weight: 900; white-space: nowrap; } .dash-order-card__items { grid-column: 1 / -1; display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; } .dash-order-card__meta { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; } .dash-order-source, .dash-order-inventory { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 10px; border-radius: 999px; background: #f3f4f6; color: #4b5563; font-size: 12px; font-weight: 900; } .dash-order-source { background: #eef2ff; color: #3730a3; } .dash-order-source--web { background: #eff6ff; color: #1d4ed8; } .dash-order-inventory--applied { background: #dcfce7; color: #166534; } .dash-order-card__items li { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #f9fafb; color: #4b5563; font-size: 13px; font-weight: 800; } .dash-order-item__main { display: grid; gap: 3px; min-width: 0; } .dash-order-item__name { color: #374151; } .dash-order-item__sku { direction: ltr; unicode-bidi: plaintext; justify-self: start; width: fit-content; padding: 2px 7px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 11px; font-weight: 900; letter-spacing: 0.01em; } .dash-order-item__sku--empty { background: #f3f4f6; color: #9ca3af; } .dash-order-adjust { grid-column: 1 / -1; display: grid; gap: 10px; padding: 12px; border: 1px solid color-mix(in srgb, var(--primary, #d97706) 18%, #e5e7eb); border-radius: 14px; background: color-mix(in srgb, var(--primary, #d97706) 4%, #fff); } .dash-order-adjust__head { display: grid; gap: 3px; } .dash-order-adjust__head strong { color: #111827; font-size: 13px; font-weight: 900; } .dash-order-adjust__head small { color: #6b7280; font-size: 12px; font-weight: 700; } .dash-order-adjust__items { display: grid; gap: 8px; } .dash-order-adjust__actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .dash-order-adjust__item { display: grid; grid-template-columns: minmax(0, 1fr) 82px; align-items: center; gap: 10px; margin: 0; padding: 9px 10px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; } .dash-order-adjust__item span, .dash-order-adjust__item strong, .dash-order-adjust__item small { min-width: 0; } .dash-order-adjust__item strong, .dash-order-adjust__item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-order-adjust__item strong { color: #374151; font-size: 12.5px; font-weight: 900; } .dash-order-adjust__item small { margin-top: 3px; color: #6b7280; direction: ltr; font-size: 11px; font-weight: 800; unicode-bidi: plaintext; } .dash-order-adjust__item input { width: 82px; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 10px; font-weight: 900; text-align: center; } .dash-order-card__status-control { display: grid; gap: 5px; min-width: min(220px, 100%); color: #4b5563; font-size: 12px; font-weight: 900; } .dash-order-card__actions { display: inline-flex; gap: 8px; flex-wrap: wrap; } .dash-empty-state { display: grid; place-items: center; gap: 6px; min-height: 150px; padding: 28px; border: 1px dashed #e5e7eb; border-radius: 16px; background: #ffffff; color: #6b7280; text-align: center; } .dash-empty-state strong { color: #111827; font-size: 16px; } @media (max-width: 640px) { .orders-control-panel { padding: 12px; } .orders-control-panel__head { display: grid; } .orders-control-panel__head strong { justify-self: start; } .orders-filter-grid { grid-template-columns: 1fr; } .manual-order-grid, .manual-order-row { grid-template-columns: 1fr; } .manual-order-actions .btn { width: 100%; } .dash-order-card { padding: 14px; } .dash-order-adjust__item { grid-template-columns: 1fr; align-items: stretch; } .dash-order-adjust__item input { width: 100%; } .dash-order-adjust__actions .btn { flex: 1 1 auto; } .dash-order-card__body { grid-template-columns: 1fr; } .dash-order-card__total { white-space: normal; } .dash-order-card__status-control, .dash-order-card__actions, .dash-order-card__actions .btn { width: 100%; } } /* Generic dashboard modal shell (section editor, slide editor, etc.). * Mirrors the proven `.media-modal` pattern below: flex centering + an * explicit `[hidden]` override with `!important` so the modal never * accidentally renders inline when something in the My Account / dash * cascade fights `position: fixed` (e.g. the `.dash > *` width override * in the theme, the `.dash__panel .flex` mobile rule, or an ancestor * containing-block from a `transform`/`filter`). */ .dash .modal{ position:fixed; inset:0; z-index:2147483000; display:flex; align-items:center; justify-content:center; padding:16px; overflow:hidden; } .dash .modal[hidden]{display:none !important} .dash .modal.is-under-media{ z-index:2147482500 !important; } .dash .modal__backdrop{ position:fixed; inset:0; background:rgba(17, 24, 39, 0.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); z-index:-1; } .dash .modal__panel{ position:relative; width:100%; max-width:min(600px, 100%); margin:auto; background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:22px; max-height:calc(100vh - 48px); overflow-y:auto; box-shadow:0 25px 50px -12px rgba(0,0,0,0.25); box-sizing:border-box; } .dash .modal__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px} /* Buttons inside modal footers/heads must stay row-laid-out even though * the dashboard's mobile rule forces `.dash__panel .flex` to column. * The modals are siblings of `.dash__panel` so that rule doesn't match * here, but we still pin layout for clarity. */ .dash .modal .flex{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px} .dash .modal .flex.is-stacked{flex-direction:column} .dash .toast{margin-top:10px;padding:10px 12px;border-radius:10px;border:1px solid #bbf7d0;background:#ecfdf5;color:#065f46;font-weight:800} /* Section Builder Layout styles */ .sections-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; } .section-card { display: flex; align-items: center; justify-content: space-between; padding: 14px; border: 1px solid #e5e7eb; border-radius: 12px; background: #f9fafb; transition: all 0.2s ease; } .section-card:hover { border-color: #d1d5db; background: #f3f4f6; } .section-card__info { display: flex; flex-direction: column; gap: 4px; text-align: start; } .section-card__type { font-size: 11px; font-weight: 800; text-transform: uppercase; background: #e5e7eb; color: #4b5563; padding: 2px 6px; border-radius: 4px; display: inline-block; width: fit-content; } .section-card__title { font-size: 15px; font-weight: 900; color: #1f2937; } .section-card__summary { font-size: 12px; font-weight: 800; color: #6b7280; } .section-card__actions { display: flex; align-items: center; gap: 8px; } .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; cursor: pointer; transition: all 0.15s ease; font-size: 16px; text-decoration: none; } .btn-icon:hover { background: #f3f4f6; border-color: #d1d5db; } .btn-icon--danger:hover { background: #fee2e2; border-color: #fca5a5; } .slide-drag-handle{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; color:#64748b; cursor:grab; font-weight:900; letter-spacing:-4px; padding-inline-end:4px; touch-action:none; user-select:none; } .slide-drag-handle:active{cursor:grabbing} .slide-card.is-dragging{opacity:.55;transform:scale(.99)} .slide-card.is-drag-over{border-color:var(--brand-primary, #92400e) !important;box-shadow:0 0 0 3px rgba(146,64,14,.16) !important} .modal-body input[type="text"], .modal-body input[type="number"], .modal-body select, .modal-body textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #d1d5db; background: #fff; color: #1f2937; box-sizing: border-box; } .modal-body label { font-weight: 800; display: block; margin-bottom: 6px; } .product-section-editor { display: grid; gap: 12px; } .product-section-editor__intro { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--primary, #d97706) 18%, #e5e7eb); border-radius: 14px; background: color-mix(in srgb, var(--primary, #d97706) 5%, #fff); color: #1f2937; } .product-section-editor__intro strong { font-size: 14px; font-weight: 900; } .product-section-editor__intro span { font-size: 12.5px; font-weight: 700; color: #6b7280; line-height: 1.5; } .product-section-scope { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .product-section-scope__option { display: flex; align-items: flex-start; gap: 10px; min-height: 94px; padding: 13px; border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } .product-section-scope__option:hover { border-color: color-mix(in srgb, var(--primary, #d97706) 38%, #d1d5db); } .product-section-scope__option.is-selected { border-color: var(--primary, #d97706); background: color-mix(in srgb, var(--primary, #d97706) 8%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #d97706) 14%, transparent); } .product-section-scope__option input { margin-top: 3px; accent-color: var(--primary, #d97706); } .product-section-scope__option strong { display: block; margin-bottom: 4px; font-size: 13.5px; font-weight: 900; color: #111827; } .product-section-scope__option small { display: block; font-size: 12px; font-weight: 700; line-height: 1.45; color: #6b7280; } .product-section-scope__icon { font-size: 20px; line-height: 1; margin-top: 2px; } .product-section-category-row[hidden] { display: none !important; } .product-section-manual-row[hidden] { display: none !important; } .section-product-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .section-product-toolbar input { flex: 1 1 auto; min-width: 0; } .section-product-count { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; background: color-mix(in srgb, var(--primary, #d97706) 10%, #fff); color: var(--primary-hover, #b45309); font-size: 12px; font-weight: 900; white-space: nowrap; } .section-product-picker { display: grid; gap: 8px; max-height: 280px; overflow-y: auto; padding: 6px; border: 1px solid #e5e7eb; border-radius: 14px; background: #f8fafc; } .section-product-picker__item { display: grid !important; grid-template-columns: auto 42px minmax(0, 1fr); align-items: center; gap: 10px; margin: 0 !important; padding: 9px 10px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; cursor: pointer; } .section-product-picker__item:has(input:checked) { border-color: var(--primary, #d97706); background: color-mix(in srgb, var(--primary, #d97706) 7%, #fff); } .section-product-picker__item input { accent-color: var(--primary, #d97706); } .section-product-picker__item img, .section-product-picker__placeholder { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; background: #eef2f7; } .section-product-picker__placeholder { display: inline-flex; align-items: center; justify-content: center; } .section-product-picker__item strong, .section-product-picker__item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .section-product-picker__item strong { font-size: 13px; font-weight: 900; color: #111827; } .section-product-picker__item small { margin-top: 3px; font-size: 11.5px; font-weight: 700; color: #6b7280; } .product-section-empty { padding: 18px 12px; text-align: center; color: #6b7280; font-weight: 800; } .section-color-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0; } .section-color-grid input[type="color"] { width: 100%; height: 44px; padding: 3px; border-radius: 10px; border: 1px solid #d1d5db; background: #ffffff; cursor: pointer; } @media (max-width: 560px) { .product-section-scope { grid-template-columns: 1fr; } .product-section-scope__option { min-height: 0; } .section-product-toolbar { align-items: stretch; flex-direction: column; } .section-product-count { text-align: center; } .section-color-grid { grid-template-columns: 1fr; } } /* Micro Loading Spinner */ .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; margin-inline-end: 6px; vertical-align: middle; } .btn:not(.btn--primary) .spinner { border: 2px solid rgba(0,0,0,0.1); border-top-color: #374151; } @keyframes spin { to { transform: rotate(360deg); } } /* Pulsing Skeleton Loader */ .skeleton { padding: 24px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; display: flex; flex-direction: column; gap: 12px; margin-top: 12px; } .skeleton-line { background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%); background-size: 200% 100%; animation: skeleton-pulse 1.6s ease-in-out infinite; border-radius: 6px; } @keyframes skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Unsaved Changes Banner — re-tinted with the brand color so the whole dashboard speaks one visual language even when the admin changes the primary color from the Customizer / settings panel. */ .unsaved-notice { padding: 12px 16px; background-color: color-mix(in srgb, var(--primary, #d97706) 8%, #fff); border: 1px solid color-mix(in srgb, var(--primary, #d97706) 25%, #fff); border-radius: 10px; color: var(--primary-hover, #b45309); font-weight: 800; font-size: 13.5px; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); animation: fade-in 0.3s ease; } @keyframes fade-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } /* Compact & Premium Settings Dashboard UI Styling. * * Use `auto-fit` + `minmax` so the grid is **container-aware** instead of * viewport-aware: it stacks to one column whenever the dashboard panel is * narrower than ~620px (e.g. a wider sidebar, smaller laptop, or zoom), * regardless of the overall viewport width. The old `1fr 1fr` would force * two squished columns even when the My Account sidebar ate most of the * page. */ .settings-top-grid, .settings-bottom-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; margin-bottom: 20px; } .settings-col { display: flex; flex-direction: column; gap: 12px; } .settings-section-title { margin: 24px 0 12px; font-size: 16px; font-weight: 900; color: #111827; border-bottom: 2px solid #f3f4f6; padding-bottom: 6px; text-align: start; } .logo-picker-box { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px; border: 1px dashed #d1d5db; border-radius: 12px; background: #f9fafb; min-height: 80px; box-sizing: border-box; } .logo-picker-actions { display: flex; flex-direction: column; gap: 8px; } .logo-picker-preview { display: flex; align-items: center; justify-content: center; width: 120px; height: 56px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.03); } .logo-picker-preview img { max-width: 100%; max-height: 48px; width: auto; height: auto; object-fit: contain; } .colors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 16px 0; } .color-row { display: flex; flex-direction: column; gap: 6px; text-align: start; } .color-row label { font-size: 13px; font-weight: 800; color: #4b5563; } .color-input-wrapper { display: flex; align-items: center; gap: 10px; border: 1px solid #d1d5db; border-radius: 10px; padding: 5px 8px; background: #fff; height: 42px; box-sizing: border-box; transition: border-color 0.15s ease; } .color-input-wrapper:focus-within { border-color: var(--primary, #d97706); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #d97706) 18%, transparent); } .color-input-wrapper input[type="color"] { border: 0; width: 32px; height: 32px; padding: 0; border-radius: 6px; cursor: pointer; background: transparent; flex-shrink: 0; } .color-input-wrapper input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } .color-input-wrapper input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .color-hex { font-size: 12.5px; font-family: monospace; font-weight: 800; color: #374151; text-transform: uppercase; } .options-list { display: flex; flex-direction: column; gap: 10px; text-align: start; } .checkbox-row { display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; cursor: pointer; font-weight: 800; font-size: 14px; transition: all 0.2s ease; } .checkbox-row:hover { background: #f9fafb; border-color: #d1d5db; } .checkbox-row input[type="checkbox"] { appearance: auto !important; -webkit-appearance: checkbox !important; -moz-appearance: checkbox !important; width: 18px !important; height: 18px !important; min-width: 18px !important; padding: 0 !important; margin: 0 !important; border-radius: 3px !important; accent-color: var(--primary, #d97706); cursor: pointer; flex: 0 0 auto; } .text-block-checkboxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 10px 0; } .text-block-checkbox { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; } .text-block-checkbox .native-checkbox { appearance: auto !important; -webkit-appearance: checkbox !important; width: 18px !important; height: 18px !important; min-width: 18px !important; padding: 0 !important; margin: 0 !important; border-radius: 3px !important; accent-color: var(--primary, #d97706); cursor: pointer; } .text-block-checkbox label { margin: 0 !important; cursor: pointer; font-weight: 800; line-height: 1.4; } .muted-hint { font-size: 11.5px; font-weight: 700; color: #6b7280; margin-top: 4px; display: block; } @media (max-width: 768px) { .text-block-checkboxes { grid-template-columns: 1fr; } .settings-top-grid, .settings-bottom-grid { grid-template-columns: 1fr; gap: 16px; } } /* ============================================================ * * Mobile responsive — entire dashboard. * * * * Applied at <= 700px because by then the My Account sidebar * * has already stacked above the content (its grid breakpoint is * * 880px in style.css), but the inner dashboard widgets still * * need to compress: tabs scroll horizontally, panel headers * * stack vertically, section cards reflow, modals go full-width. * * ============================================================ */ @media (max-width: 700px) { .dash{margin-bottom:16px} .card.dash__card{padding:14px;border-radius:12px} /* Tabs: horizontal scrollable strip so 5 tabs don't pile up. */ .dash__tabs{ flex-wrap:nowrap; margin:8px -4px; padding:4px; overflow-x:auto; } .dash .tab{ flex:0 0 auto; padding:8px 12px; font-size:13px; white-space:nowrap; } /* Panel headers (h3 + filter + CTA) wrap to multiple lines and align to the start so the layout stays readable instead of cramming everything into one row. `!important` here overrides legacy inline `style="justify-content: space-between"` attributes baked into the PHP markup of `render_shortcode()` (history reasons — not worth a PHP edit just for mobile reflow). */ .dash__panel .flex{ justify-content:flex-start !important; align-items:stretch !important; flex-direction:column; gap:10px; } .dash__panel .flex > .flex{ width:100%; flex-direction:row; flex-wrap:wrap; } .dash__panel .flex .select, .dash__panel .flex select{ flex:1 1 140px; min-width:0; } .dash__panel .flex .btn{ flex:1 1 auto; } .dash__panel h3{font-size:16px;margin:0} /* Section builder cards stack their info above the row of icon actions so 5 buttons don't squeeze against the title. */ .section-card{ flex-direction:column; align-items:stretch; gap:10px; } .section-card__actions{ justify-content:flex-end; flex-wrap:wrap; } .btn-icon{width:34px;height:34px} /* Buttons in panel headers: make primary CTAs fill the row so they don't get pushed off-screen on tiny phones. */ .dash .btn{padding:9px 12px;font-size:13.5px} /* Settings color picker grid: drop the min-width so it collapses to one column when needed (default uses 220px). */ .colors-grid{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap:12px; } /* Logo picker stacks preview above buttons. */ .logo-picker-box{ flex-direction:column; align-items:stretch; text-align:center; } .logo-picker-preview{width:100%;height:64px} /* Generic modals (product / slide / section): use almost the full viewport instead of a centered fixed-width panel. The shell is now a flex centerer (see base `.dash .modal` rule), so we only tweak panel size/padding here — no `top`/`transform` overrides needed. */ .dash .modal{ padding:12px 8px; align-items:center; } .dash .modal__panel{ width:calc(100% - 16px); max-width:100%; padding:18px; border-radius:14px; max-height:calc(100vh - 24px); } /* Modal footer button rows: stack the cancel/save row vertically so buttons aren't squeezed against each other on narrow phones. The primary action goes on top thanks to row-reverse + the markup order (cancel first, primary second). */ .dash .modal__panel > .flex:last-child{ flex-direction:column-reverse; align-items:stretch; } .dash .modal__panel > .flex:last-child .btn{width:100%} /* The modal head must stay horizontal — title on one side, close button on the other. */ .dash .modal__head{flex-direction:row;align-items:center} .dash .modal__head .btn{width:auto} /* Slide editor: match the mobile bottom-sheet behavior used by the larger dashboard editors, with actions kept reachable at the bottom. */ .dash .modal[data-slide-modal], .dash .modal[data-section-modal], .dash .modal[data-product-cats-modal]{ align-items:flex-end; justify-content:center; padding:0; } .dash .modal[data-slide-modal] .modal__backdrop, .dash .modal[data-section-modal] .modal__backdrop, .dash .modal[data-product-cats-modal] .modal__backdrop{ background:rgba(15,23,42,.52); } .dash .modal[data-slide-modal] .modal__panel, .dash .modal[data-section-modal] .modal__panel, .dash .modal[data-product-cats-modal] .modal__panel{ width:100% !important; max-width:none !important; height:min(92dvh, 760px); max-height:min(92dvh, 760px) !important; margin:0; padding:0 16px 0; border-inline:0; border-bottom:0; border-radius:22px 22px 0 0; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 -22px 48px -22px rgba(15,23,42,.48); } .dash .modal[data-slide-modal] .modal__panel::before, .dash .modal[data-section-modal] .modal__panel::before, .dash .modal[data-product-cats-modal] .modal__panel::before{ content:""; position:sticky; top:0; z-index:3; display:block; width:44px; height:5px; margin:10px auto 4px; border-radius:999px; background:#d1d5db; } .dash .modal[data-slide-modal] .modal__head, .dash .modal[data-section-modal] .modal__head, .dash .modal[data-product-cats-modal] .modal__head{ position:sticky; top:0; z-index:2; margin:0 -16px 12px; padding:12px 16px; background:#fff; border-bottom:1px solid #f3f4f6; } .dash .modal[data-slide-modal] .row, .dash .modal[data-section-modal] .row, .dash .modal[data-product-cats-modal] .row{ margin:0 0 13px; } .dash .modal[data-section-modal] #section-modal-fields{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; margin-top:0 !important; margin-bottom:0 !important; padding-bottom:4px; } .dash .modal[data-slide-modal] .modal-body, .dash .modal[data-product-cats-modal] .modal-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } .dash .modal[data-slide-modal] input, .dash .modal[data-slide-modal] select, .dash .modal[data-section-modal] input, .dash .modal[data-section-modal] select, .dash .modal[data-section-modal] textarea, .dash .modal[data-product-cats-modal] input, .dash .modal[data-product-cats-modal] select{ min-height:40px; font-size:16px !important; } .dash .modal[data-slide-modal] .modal__panel > .flex:last-child, .dash .modal[data-section-modal] .modal__panel > .flex:last-child{ position:sticky; bottom:0; z-index:2; display:grid; grid-template-columns:1fr; gap:8px; margin:18px -16px 0 !important; padding:12px 16px calc(14px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid #f3f4f6; box-shadow:0 -10px 24px -22px rgba(15,23,42,.45); } .dash .modal[data-slide-modal] .modal__panel > .flex:last-child .btn, .dash .modal[data-section-modal] .modal__panel > .flex:last-child .btn{ width:100%; min-height:42px; } /* Media library modal: drop the side category panel to top, stack vertically, free up vertical space for the image grid. */ .media-modal{padding:8px} .media-modal__panel{height:calc(100vh - 16px);max-height:none;border-radius:12px} .media-modal__body{flex-direction:column;height:auto} .media-modal__sidebar{ width:100%; max-width:none; min-width:0; border-left:0; border-bottom:1px solid #f3f4f6; max-height:38vh; } .media-content-header{flex-direction:column;align-items:stretch;gap:8px} .media-upload-wrapper{width:100%} .media-upload-wrapper .btn{width:100%} /* Pagination: stack status above buttons. */ .dash .pagination{flex-direction:column;align-items:stretch;text-align:center;gap:8px} .dash .pagination__controls{justify-content:center;flex-wrap:wrap} } @media (max-width: 420px) { .card.dash__card{padding:12px} .dash__title{font-size:17px} .dash .tab{padding:7px 10px;font-size:12.5px} .dash .btn{padding:8px 10px;font-size:13px} .dash .btn-icon{width:32px;height:32px;font-size:14px} /* Section card type badge wraps under the title nicely on small screens. */ .section-card__type{font-size:10px} .section-card__title{font-size:14px;line-height:1.35} } /* Custom Media Modal Styling */ .media-modal { position: fixed; inset: 0; z-index: 2147483400; display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade-in 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .media-modal[hidden] { display: none !important; } .media-modal.is-top-layer { z-index: 2147483600 !important; } .media-modal__backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, 0.6); backdrop-filter: blur(8px); } .media-modal__panel { position: relative; width: 100%; max-width: 850px; height: 600px; max-height: calc(100vh - 40px); background: #ffffff; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; overflow: hidden; animation: modal-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); direction: rtl; font-family: "Cairo", sans-serif; } @keyframes modal-pop { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } } .media-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #f3f4f6; background: #ffffff; } .media-modal__title { font-size: 17px; font-weight: 900; color: #111827; } .media-modal__close-btn { background: transparent; border: 0; font-size: 24px; line-height: 1; color: #9ca3af; cursor: pointer; padding: 4px; border-radius: 6px; transition: all 0.2s; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; } .media-modal__close-btn:hover { background: #f3f4f6; color: #374151; } .media-modal__body { display: flex; flex: 1; overflow: hidden; height: 0; } .media-modal__sidebar { width: 28%; min-width: 250px; max-width: 300px; background: #f9fafb; border-left: 1px solid #f3f4f6; display: flex; flex-direction: column; padding: 16px; overflow: hidden; height: 100%; } .sidebar-title { font-size: 13px; font-weight: 800; color: #4b5563; margin: 0 0 12px; } .add-cat-form { display: flex; gap: 6px; margin-bottom: 16px; flex-shrink: 0; } .sidebar-input { flex: 1; font-size: 12px; padding: 8px 10px; border-radius: 8px; border: 1px solid #d1d5db; outline: none; font-family: inherit; width: 0; /* allows input to shrink nicely inside flex wrapper */ } .sidebar-input:focus { border-color: var(--primary, #d97706); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #d97706) 18%, transparent); } .add-cat-form .btn { padding: 8px 12px; font-size: 12px; border-radius: 8px; white-space: nowrap; flex-shrink: 0; } .media-categories-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; overflow-x: hidden; } .media-cat-item { padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; color: #4b5563; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: right; flex-shrink: 0; } .media-cat-item span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .media-cat-item:hover { background: #f3f4f6; color: #1f2937; } .media-cat-item.is-active { background: color-mix(in srgb, var(--primary, #d97706) 14%, #fff); color: var(--primary-hover, #b45309); font-weight: 800; } .media-cat-delete-btn { background: transparent; border: none; color: #ef4444; font-size: 16px; cursor: pointer; padding: 0 4px; border-radius: 4px; line-height: 1; opacity: 0; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; height: 20px; width: 20px; flex-shrink: 0; } .media-cat-item:hover .media-cat-delete-btn { opacity: 1; } .media-cat-delete-btn:hover { background: #fee2e2; } .media-modal__content { flex: 1; display: flex; flex-direction: column; padding: 16px 20px; overflow-y: auto; background: #ffffff; } .media-content-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; } .search-input { flex: 1; font-size: 13px; padding: 9px 12px; border-radius: 8px; border: 1px solid #d1d5db; outline: none; font-family: inherit; } .search-input:focus { border-color: var(--primary, #d97706); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #d97706) 18%, transparent); } .media-upload-wrapper .btn { padding: 9px 16px; font-size: 13px; border-radius: 8px; white-space: nowrap; } .media-stats { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: #6b7280; margin-bottom: 12px; border-bottom: 1px solid #f3f4f6; padding-bottom: 8px; } .media-upload-status { margin-inline-start: auto; display: inline-grid; gap: 4px; min-width: 150px; color: var(--primary-hover, #b45309); font-weight: 900; white-space: nowrap; } .media-upload-status__bar { display: block; height: 5px; overflow: hidden; border-radius: 999px; background: #f3d6e2; } .media-upload-status__bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary, #d97706); transition: width 0.18s ease; } .media-images-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; padding: 2px; flex: 1; } .media-img-card { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; border: 2px solid #e5e7eb; background: #f9fafb; cursor: pointer; overflow: hidden; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .media-img-card:hover { transform: translateY(-2px); border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(0,0,0,0.05); } .media-img-card img, .media-img-card video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .media-img-card:hover img, .media-img-card:hover video { transform: scale(1.06); } .media-img-card__play { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 999px; display: inline-grid; place-items: center; padding-inline-start: 2px; background: rgba(17, 24, 39, 0.76); color: #fff; font-size: 15px; box-shadow: 0 12px 24px rgba(17, 24, 39, 0.24); pointer-events: none; } .media-img-card--uploading { cursor: wait; border-color: color-mix(in srgb, var(--primary, #d97706) 55%, #e5e7eb); } .media-img-card--uploading img, .media-img-card--uploading video { opacity: 0.42; filter: blur(1px); } .media-upload-overlay { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 7px; padding: 10px; text-align: center; background: rgba(255, 255, 255, 0.72); color: #1f2937; z-index: 3; } .media-upload-overlay .spinner { display: inline-block; } .media-upload-overlay strong { font-size: 12px; font-weight: 900; color: var(--primary-hover, #b45309); } .media-upload-overlay small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: #6b7280; font-size: 10px; font-weight: 800; white-space: nowrap; } .media-img-card.is-selected { border-color: var(--primary, #d97706); background: color-mix(in srgb, var(--primary, #d97706) 14%, #fff); box-shadow: 0 0 0 1px var(--primary, #d97706); } .media-img-card.is-selected::after { content: "✓"; position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; background: var(--primary, #d97706); color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); } .media-img-delete-btn { position: absolute; top: 6px; left: 6px; background: rgba(239, 68, 68, 0.9); color: white; border: none; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; opacity: 0; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; z-index: 10; padding: 0; } .media-img-card:hover .media-img-delete-btn { opacity: 1; } .media-img-delete-btn:hover { background: #ef4444; transform: scale(1.15); } .media-skeleton-card { aspect-ratio: 1 / 1; border-radius: 10px; background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%); background-size: 200% 100%; animation: skeleton-pulse 1.6s ease-in-out infinite; } .media-grid-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: #9ca3af; font-weight: 700; font-size: 14px; text-align: center; } .media-modal__foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid #f3f4f6; background: #ffffff; } .media-modal__foot .btn { padding: 9px 18px; font-size: 13.5px; border-radius: 8px; } .media-modal__foot .btn:disabled { opacity: 0.5; cursor: not-allowed; } @media (max-width: 768px) { .media-modal, .media-modal * { box-sizing: border-box; } .media-modal { align-items: stretch; justify-content: stretch; padding: 0; background: #ffffff; } .media-modal__backdrop { background: rgba(15, 23, 42, 0.72); } .media-modal__panel { width: 100%; max-width: none; height: 100dvh; max-height: none; border-radius: 0; background: #ffffff; box-shadow: none; animation: none; } .media-modal__head { position: sticky; top: 0; z-index: 4; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; box-shadow: 0 8px 18px -20px rgba(15, 23, 42, 0.5); } .media-modal__title { font-size: 16px; } .media-modal__close-btn { width: 38px; height: 38px; border-radius: 999px; background: #f8fafc; } .media-modal__body { min-height: 0; height: auto; flex: 1; flex-direction: column; overflow: hidden; } .media-modal__sidebar { order: 0; width: 100%; min-width: 0; max-width: none; height: auto; max-height: none; padding: 12px 14px 10px; border-left: 0; border-bottom: 1px solid #f3f4f6; background: #ffffff; overflow: visible; } .sidebar-title { margin: 0 0 8px; font-size: 12px; } .add-cat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 8px; width: 100%; margin-bottom: 10px; } .add-cat-form .btn { min-width: 76px; padding: 0 12px; border-radius: 12px; font-size: 13px; } .sidebar-input, .search-input { width: 100%; min-width: 0; min-height: 40px; border-radius: 12px; font-size: 16px; } .media-categories-list { flex: 0 0 auto; flex-direction: row; gap: 8px; overflow-x: auto; overflow-y: hidden; width: 100%; padding: 0 0 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .media-categories-list::-webkit-scrollbar { display: none; } .media-cat-item { flex: 0 0 auto; max-width: 150px; padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; white-space: nowrap; } .media-cat-item.is-active { border-color: color-mix(in srgb, var(--primary, #d97706) 24%, #fff); } .media-cat-delete-btn { opacity: 1; } .media-modal__content { min-height: 0; flex: 1; padding: 12px 14px 0; overflow-y: auto; background: #ffffff; } .media-content-header { position: sticky; top: 0; z-index: 3; flex-direction: column; align-items: stretch; gap: 8px; margin: -12px -14px 10px; padding: 12px 14px; background: #ffffff; border-bottom: 1px solid #f3f4f6; } .media-upload-wrapper, .media-upload-wrapper .btn { width: 100%; } .media-upload-wrapper .btn { min-height: 42px; border-radius: 12px; font-size: 14px; } .media-stats { align-items: flex-start; flex-direction: column; gap: 7px; margin-bottom: 10px; padding-bottom: 10px; } .media-upload-status { width: 100%; min-width: 0; margin-inline-start: 0; white-space: normal; } .media-images-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 0 16px; } .media-img-card { border-radius: 12px; } .media-img-delete-btn { opacity: 1; width: 28px; height: 28px; } .media-modal__foot { position: sticky; bottom: 0; z-index: 4; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 10px; padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid #f3f4f6; background: #ffffff; box-shadow: 0 -12px 28px -24px rgba(15, 23, 42, 0.55); } .media-modal__foot .btn { width: 100%; min-height: 44px; border-radius: 12px; font-size: 14px; } } .dash .select, .dash .modal-body select, .dash .table select, .dash select { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-color: #fff !important; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%234b5563' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-size: 1.15rem !important; background-position: right 0.75rem center !important; padding-right: 2.25rem !important; padding-left: 0.75rem !important; padding-top: 8px !important; padding-bottom: 8px !important; border-radius: 10px; border: 1px solid #d1d5db; color: #1f2937; font-family: inherit; font-weight: 700; outline: none; cursor: pointer; transition: border-color 0.15s ease; } [dir="rtl"] .dash .select, [dir="rtl"] .dash .modal-body select, [dir="rtl"] .dash .table select, [dir="rtl"] .dash select { background-position: left 0.75rem center !important; padding-left: 2.25rem !important; padding-right: 0.75rem !important; } .dash .select:focus, .dash .modal-body select:focus, .dash .table select:focus, .dash select:focus { border-color: var(--primary, #d97706); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #d97706) 18%, transparent); } .dash .badge { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 6px; display: inline-block; white-space: nowrap; } /* Brand-toned soft badge (category chips in the products table, etc). Class name kept as `--amber` for HTML stability, but visually it now follows the brand color from the Customizer / dashboard settings. */ .dash .badge--amber { background: color-mix(in srgb, var(--primary, #d97706) 14%, #fff); color: var(--primary-hover, #d97706); border: 1px solid color-mix(in srgb, var(--primary, #d97706) 30%, #fff); } /* Custom Confirm Modal Styling */ .confirm-modal { position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade-in 0.2s ease; } .confirm-modal[hidden] { display: none !important; } .confirm-modal__backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, 0.4); backdrop-filter: blur(4px); } .confirm-modal__panel { position: relative; width: 100%; max-width: 400px; background: #ffffff; border-radius: 16px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); padding: 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; animation: modal-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); direction: rtl; } .confirm-modal__icon { font-size: 32px; background: #fee2e2; color: #ef4444; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; } .confirm-modal__title { font-size: 18px; font-weight: 900; color: #111827; margin: 0; } .confirm-modal__message { font-size: 14px; color: #6b7280; margin: 0 0 8px; font-weight: 700; line-height: 1.5; } .confirm-modal__actions { display: flex; gap: 10px; width: 100%; justify-content: center; } .confirm-modal__actions .btn { flex: 1; padding: 10px; font-size: 13.5px; } /* ============================================================ * * Premium Sub-Tabs for Store Settings * * ============================================================ */ .settings-subtabs { display: flex; gap: 8px; margin-bottom: 24px; border-bottom: 2px solid #f3f4f6; padding-bottom: 12px; overflow-x: auto; scrollbar-width: none; /* Firefox */ -webkit-overflow-scrolling: touch; } .settings-subtabs::-webkit-scrollbar { display: none; /* Safari and Chrome */ } .subtab { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 9999px; font-weight: 800; font-size: 13.5px; cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid transparent; background: #f9fafb; color: #4b5563; white-space: nowrap; outline: none; } .subtab:hover { background: color-mix(in srgb, var(--primary, #d97706) 6%, #f3f4f6); color: var(--primary, #d97706); } .subtab.is-active { background: var(--primary, #d97706); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--primary, #d97706) 20%, rgba(0, 0, 0, 0.05)); border-color: var(--primary-hover, #b45309); transform: translateY(-1px); } .subtab:active { transform: translateY(0); } .settings-subpanel { animation: settings-fade-in 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes settings-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ * Premium Product Modal & Variations UI Styles * * Layout (top → bottom): * * .premium-product-modal * .modal__head * .prod-tab-bar ← tab strip: General / Pricing / Inventory / Gallery / Variants * .prod-tab-panel (×5) ← one is .is-active; the rest are [hidden] * .prod-modal-footer ← delete (edit only) · cancel · save * * Each tab panel is responsible for its own internal grid; the shared * `.row` / `.row-grid` helpers from .dash above still apply inside. * ============================================================ */ .dash .premium-product-modal { /* Roomier than the old 840 — fits the new gallery grid + textareas comfortably while still leaving generous backdrop margin. */ width: min(1040px, calc(100% - 24px)) !important; max-width: 1040px !important; padding: 24px !important; } /* ---------- Tab bar ---------- */ .dash .prod-tab-bar { display: flex; gap: 6px; padding: 4px; background: #f3f4f6; border-radius: 14px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; } .dash .prod-tab-bar::-webkit-scrollbar { display: none; } .dash .prod-tab { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1; min-width: max-content; padding: 10px 14px; border: 0; border-radius: 10px; background: transparent; color: #4b5563; font-weight: 800; font-size: 13px; cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease; white-space: nowrap; } .dash .prod-tab:hover { background: #ffffff; color: var(--primary, #d97706); } .dash .prod-tab.is-active { background: #ffffff; color: var(--primary, #d97706); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .dash .prod-tab__icon { font-size: 14px; line-height: 1; } .dash .prod-tab__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--primary, #d97706) 18%, #ffffff); color: var(--primary, #d97706); font-size: 10px; font-weight: 900; } /* ---------- Tab panels ---------- */ .dash .prod-tab-panel { display: none; padding-block-start: 18px; animation: prod-panel-fade .2s ease; } .dash .prod-tab-panel.is-active { display: block; } @keyframes prod-panel-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Required-field marker. */ .dash .premium-product-modal .required { color: #dc2626; font-weight: 900; margin-inline-start: 2px; } /* Textareas — match the input style + comfortable min-height per row. */ .dash .premium-product-modal textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #d1d5db; background: #fff; color: #1f2937; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.5; resize: vertical; min-height: 80px; transition: border-color .15s ease, box-shadow .15s ease; } .dash .premium-product-modal textarea:focus { outline: none; border-color: var(--primary, #d97706); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #d97706) 18%, transparent); } /* Small inline hint shown under hint-worthy fields. */ .dash .premium-product-modal .muted { display: block; font-size: 11.5px; margin-top: 4px; } /* In-tab tip strip (Pricing tab). */ .dash .prod-tab-hint { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-top: 14px; background: color-mix(in srgb, var(--primary, #d97706) 6%, #fff); border: 1px solid color-mix(in srgb, var(--primary, #d97706) 18%, transparent); border-radius: 10px; color: #374151; font-size: 12.5px; font-weight: 700; } /* ---------- Gallery tab ---------- */ .dash .gallery-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .dash .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .dash .gallery-thumb { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: #f9fafb; border: 1px solid #e5e7eb; cursor: grab; transition: box-shadow .15s ease, transform .15s ease, opacity .15s ease; } .dash .gallery-thumb:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); transform: translateY(-1px); } .dash .gallery-thumb.is-dragging { opacity: .4; cursor: grabbing; } .dash .gallery-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .dash .gallery-thumb__remove { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(17, 24, 39, .75); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease, transform .15s ease; } .dash .gallery-thumb__remove:hover { background: #dc2626; transform: scale(1.05); } .dash .gallery-thumb__handle { position: absolute; inset-block-end: 6px; inset-inline-end: 6px; width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .9); color: #6b7280; font-size: 14px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; pointer-events: none; } .dash .gallery-empty { text-align: center; padding: 40px 20px; border: 2px dashed #e5e7eb; border-radius: 14px; background: #f9fafb; color: #6b7280; } .dash .gallery-empty__icon { font-size: 36px; display: block; margin-bottom: 8px; } .dash .gallery-empty p { margin: 4px 0; font-weight: 700; } .dash .product-video-section { margin-top: 18px; padding-top: 18px; border-top: 1px dashed #e5e7eb; } .dash .product-video-section__head { margin-bottom: 10px; } .dash .product-video-empty, .dash .product-video-card { border: 1px solid #e5e7eb; border-radius: 14px; background: #f9fafb; } .dash .product-video-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 170px; padding: 22px; text-align: center; } .dash .product-video-empty__icon { font-size: 34px; } .dash .product-video-empty strong, .dash .product-video-card__meta strong { color: #111827; font-weight: 900; } .dash .product-video-card { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 14px; padding: 12px; align-items: center; } .dash .product-video-card video { width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; background: #111827; object-fit: cover; } .dash .product-video-card__meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .dash .product-video-card__meta span { color: #6b7280; font-size: 12px; font-weight: 700; } .dash .product-video-card__actions { display: flex; gap: 8px; flex-wrap: wrap; grid-column: 2; } /* ---------- Media picker — multi-select badge ---------- */ .dash #custom-media-modal .media-img-check { position: absolute; inset-block-start: 6px; inset-inline-start: 6px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid #d1d5db; color: transparent; font-size: 13px; font-weight: 900; line-height: 18px; text-align: center; transition: all .15s ease; z-index: 2; pointer-events: none; } .dash #custom-media-modal .media-img-card.is-selected .media-img-check { background: var(--primary, #d97706); border-color: var(--primary, #d97706); color: #fff; } .dash #custom-media-modal[data-multi="1"] .media-img-card.is-selected { /* In multi mode, replace the single-select solid border with a subtle ring so users can quickly count multi-selected thumbs. */ box-shadow: 0 0 0 2px var(--primary, #d97706) inset; } /* ---------- Footer ---------- */ .dash .prod-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 24px; padding-top: 16px; border-top: 1px solid #e5e7eb; flex-wrap: wrap; } .dash .prod-modal-footer__primary { display: inline-flex; align-items: center; gap: 8px; } @media (max-width: 560px) { .dash .prod-tab { padding: 8px 10px; font-size: 12px; } .dash .prod-tab__label { display: none; } .dash .gallery-thumb__handle { display: none; } .dash .product-video-card { grid-template-columns: 1fr; } .dash .product-video-card__actions { grid-column: auto; } .dash .prod-modal-footer { flex-direction: column-reverse; align-items: stretch; } .dash .prod-modal-footer__primary { width: 100%; } .dash .prod-modal-footer__primary .btn { flex: 1; } } @media (max-width: 768px) { .dash .modal[data-product-modal] { align-items: flex-end; justify-content: center; padding: 0; } .dash .modal[data-product-modal] .modal__backdrop { background: rgba(15, 23, 42, 0.46); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .dash .premium-product-modal { width: 100% !important; max-width: none !important; height: min(92vh, 820px); max-height: min(92vh, 820px) !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; overflow: hidden !important; border-radius: 20px 20px 0 0 !important; border-inline: 0; border-bottom: 0; box-shadow: 0 -20px 46px -20px rgba(15, 23, 42, 0.45); } .dash .premium-product-modal::before { content: ""; width: 44px; height: 5px; margin: 9px auto 2px; border-radius: 999px; background: #d1d5db; flex-shrink: 0; } .dash .premium-product-modal .modal__head { flex-shrink: 0; margin: 0; padding: 10px 18px 12px; border-bottom: 1px solid #f3f4f6; } .dash .premium-product-modal .modal__head strong { font-size: 16px; font-weight: 900; } .dash .premium-product-modal .btn-close-modal { width: 36px; height: 36px; border-radius: 999px; background: #f3f4f6; color: #64748b; } .dash .premium-product-modal .prod-tab-bar { flex-shrink: 0; margin: 0; padding: 8px 12px; border-radius: 0; background: #ffffff; border-bottom: 1px solid #f3f4f6; gap: 8px; } .dash .premium-product-modal .prod-tab { flex: 0 0 auto; min-width: 48px; min-height: 38px; border-radius: 999px; background: #f8fafc; } .dash .premium-product-modal .prod-tab.is-active { background: color-mix(in srgb, var(--primary, #d97706) 12%, #fff); } .dash .premium-product-modal .prod-tab-panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 18px 22px; -webkit-overflow-scrolling: touch; } .dash .premium-product-modal .prod-tab-panel.is-active { display: block; } .dash .premium-product-modal input, .dash .premium-product-modal select, .dash .premium-product-modal textarea { font-size: 16px !important; } .dash .premium-product-modal textarea { min-height: 74px; } .dash .prod-modal-grid { margin-top: 0; gap: 16px; } .dash .prod-modal-upload-box { height: min(220px, 42vh); border-radius: 16px; } .dash .prod-modal-right { gap: 12px; } .dash .premium-product-modal .row { margin: 8px 0; } .dash .premium-product-modal .row.flex { align-items: flex-start !important; gap: 12px; } .dash .premium-product-modal .gallery-head { align-items: stretch; } .dash .premium-product-modal .gallery-head .btn { width: 100%; } .dash .premium-product-modal .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash .premium-product-modal .variants-list-container { max-height: none; overflow: visible; } .dash .premium-product-modal .variant-item-card { grid-template-columns: 46px 1fr; gap: 10px; } .dash .premium-product-modal .variant-item-card > * { min-width: 0; } .dash .prod-modal-footer { flex-shrink: 0; margin: 0; padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid #f3f4f6; background: #ffffff; box-shadow: 0 -10px 24px -22px rgba(15, 23, 42, 0.45); } .dash .prod-modal-footer, .dash .prod-modal-footer__primary { display: grid; grid-template-columns: 1fr; width: 100%; } .dash .prod-modal-footer .btn { width: 100%; min-height: 44px; border-radius: 12px; } } @media (max-width: 420px) { .dash .premium-product-modal { height: 94vh; max-height: 94vh !important; } .dash .premium-product-modal .prod-tab-panel { padding-inline: 14px; } .dash .prod-modal-upload-box { height: 190px; } } .dash .btn-close-modal { background: none; border: none; font-size: 18px; cursor: pointer; color: #9ca3af; transition: color 0.15s ease; padding: 4px; } .dash .btn-close-modal:hover { color: #374151; } .prod-modal-grid { display: grid; grid-template-columns: 1fr 220px; gap: 28px; margin-top: 16px; text-align: start; } @media (max-width: 767px) { .prod-modal-grid { grid-template-columns: 1fr; gap: 20px; } } .prod-modal-left { display: flex; flex-direction: column; } .section-label { font-weight: 800; display: block; margin-bottom: 8px; color: #374151; font-size: 13.5px; } .prod-modal-upload-box { width: 100%; height: 190px; border: 2px dashed #cbd5e1; border-radius: 14px; background: #f8fafc; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .prod-modal-upload-box:hover { border-color: var(--primary, #d97706); background: color-mix(in srgb, var(--primary, #d97706) 3%, #f8fafc); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02); } .upload-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px; text-align: center; color: #64748b; transition: all 0.2s ease; } .upload-icon { font-size: 32px; } .upload-text { font-size: 12.5px; font-weight: 800; } #prod-image-preview { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; padding: 4px; background: #fff; transition: transform 0.3s ease; } .prod-modal-upload-box:hover #prod-image-preview { transform: scale(1.02); } .prod-modal-right { display: flex; flex-direction: column; gap: 16px; } .row-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 480px) { .row-grid { grid-template-columns: 1fr; gap: 12px; } } /* Styled Switch Toggle */ .switch-toggle { position: relative; display: inline-block; width: 48px; height: 24px; flex-shrink: 0; } .switch-toggle input { opacity: 0; width: 0; height: 0; } .switch-slider { position: absolute; cursor: pointer; inset: 0; background-color: #cbd5e1; transition: .3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 24px; } .switch-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .switch-toggle input:checked + .switch-slider { background-color: var(--primary, #d97706); } .switch-toggle input:checked + .switch-slider:before { transform: translateX(24px); } /* Variations Editor */ .variants-list-container { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; max-height: 350px; overflow-y: auto; padding-inline-end: 4px; } .variant-item-card { display: flex; flex-direction: column; gap: 16px; padding: 20px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .variant-item-card:hover { border-color: #cbd5e1; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03); transform: translateY(-1px); } .variant-card-header { display: flex; align-items: flex-start; gap: 16px; width: 100%; } .variant-thumb-box { width: 54px; height: 54px; border: 2px dashed #cbd5e1; border-radius: 12px; background: #f8fafc; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; transition: all 0.2s ease; flex-shrink: 0; margin-top: 22px; } .variant-thumb-box:hover { border-color: var(--primary, #ef2a24); background: color-mix(in srgb, var(--primary, #ef2a24) 5%, #f8fafc); } .variant-thumb-box img { width: 100%; height: 100%; object-fit: cover; } .variant-thumb-box .thumb-placeholder { font-size: 20px; color: #94a3b8; } .variant-attributes-grid { display: flex; flex-wrap: wrap; gap: 12px; flex: 1; } .variant-attribute-input-wrapper { flex: 1; min-width: 130px; } .variant-attribute-input-wrapper span { font-size: 11px; color: #4b5563; font-weight: 700; display: block; margin-bottom: 6px; } .variant-attribute-input-wrapper input { padding: 8px 12px; font-size: 13px; border-radius: 10px; border: 1px solid #cbd5e1; width: 100%; background: #ffffff; transition: all 0.2s ease; } .variant-attribute-input-wrapper input:focus { border-color: var(--primary, #ef2a24); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #ef2a24) 15%, transparent); outline: none; } .variant-delete-box { display: flex; align-items: flex-start; padding-top: 22px; } .variant-delete-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid #fee2e2; background: #fef2f2; color: #ef4444; cursor: pointer; transition: all 0.2s ease; font-size: 14px; } .variant-delete-btn:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; transform: scale(1.05); } .variant-delete-btn:active { transform: scale(0.95); } .variant-card-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 10px; padding-top: 14px; border-top: 1px solid #f1f5f9; } .variant-input-group { display: flex; flex-direction: column; gap: 6px; } .variant-input-label { font-size: 11px; color: #4b5563; font-weight: 700; } .variant-input-group input { padding: 8px 12px; font-size: 13px; border-radius: 10px; border: 1px solid #cbd5e1; width: 100%; background: #ffffff; transition: all 0.2s ease; } .variant-input-group input:focus { border-color: var(--primary, #ef2a24); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #ef2a24) 15%, transparent); outline: none; } .variant-input-with-currency { position: relative; display: flex; align-items: center; } .variant-input-with-currency input { padding-inline-end: 45px; } .variant-input-with-currency .currency-badge { position: absolute; inset-inline-end: 12px; font-size: 11px; color: #94a3b8; font-weight: 600; pointer-events: none; } @media (max-width: 640px) { .variant-card-body { grid-template-columns: 1fr; gap: 12px; } .variant-card-header { flex-wrap: wrap; } .variant-delete-box { width: 100%; justify-content: flex-end; padding-top: 0; margin-top: -6px; } } /* Prevent background scrolling when modals are open */ html.no-scroll, html.no-scroll body { overflow: hidden !important; height: 100vh !important; } /* Premium styling for color picker inputs in dashboard modals */ .dash .modal-body input[type="color"] { width: 100% !important; height: 40px !important; padding: 4px 6px !important; border-radius: 10px !important; border: 1px solid #cbd5e1 !important; background: #ffffff !important; cursor: pointer !important; box-sizing: border-box !important; transition: border-color 0.2s ease !important; } .dash .modal-body input[type="color"]::-webkit-color-swatch-wrapper { padding: 0 !important; } .dash .modal-body input[type="color"]::-webkit-color-swatch { border: none !important; border-radius: 6px !important; } .dash .modal-body input[type="color"]:focus { border-color: var(--primary, #ef2a24) !important; outline: none !important; }