:root {
    --bg1: #32a9b4;
    --bg2: #47b9af;
    --teal: #2aa1b8;
    --teal-dark: #16889b;
    --yellow: #ffc107;
    --white: #fff;
    --text: #2a2f37;
    --muted: #8b93a3;
    --line: #e3e7ee;
    --shadow: 0 14px 30px rgba(24, 67, 74, .14);
    --container: 1320px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    direction: rtl;
    font-family: "Cairo", "Tahoma", Arial, sans-serif;
    color: var(--text);
    background:
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(135deg, var(--bg2), var(--bg1));
    background-size: 32px 32px, 32px 32px, cover;
    padding-bottom: 92px;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

.top-header {
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: 76px;
    background: #269cb5;
    color: white;
    box-shadow: 0 8px 18px rgba(0,0,0,.10);
}

.top-header-inner {
    width: min(var(--container), calc(100% - 32px));
    min-height: 76px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand-logo {
    direction: ltr;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 900;
}

.brand-symbol {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.25);
}

.admin-link {
    opacity: .78;
    font-weight: 800;
}

.original-shell {
    width: min(var(--container), calc(100% - 32px));
    margin: 0 auto;
}

.brands-panel {
    margin: 42px auto 24px;
    background: white;
    border-radius: 16px;
    padding: 18px 22px 36px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.panel-caption {
    text-align: center;
    font-size: 20px;
    margin-bottom: 20px;
}

.brands-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 122px;
    gap: 16px;
    overflow-x: auto;
    padding: 4px 2px;
}

.brand-tile {
    height: 158px;
    border-radius: 12px;
    background: linear-gradient(145deg, #2aaebb, #168fa4);
    color: white;
    display: grid;
    place-items: center;
    text-align: center;
    align-content: center;
    gap: 10px;
    box-shadow: 0 8px 18px rgba(0,0,0,.16);
    transition: transform .18s ease;
}

.brand-tile:hover {
    transform: translateY(-4px);
}

.brand-tile.active,
.brand-tile.star {
    background: linear-gradient(145deg, #ffc400, #ffad00);
}

.brand-logo-circle {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: white;
    color: var(--teal-dark);
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 24px;
    box-shadow: inset 0 0 0 1px #edf1f6;
}

.brand-tile strong {
    font-size: 14px;
    line-height: 1.25;
}

.products-panel {
    background: white;
    border-radius: 8px 8px 0 0;
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 28px;
}

.products-title {
    min-height: 58px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.products-title h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

.products-title span {
    font-size: 28px;
}

.original-search {
    margin: 18px 18px 22px;
    height: 48px;
    border: 1px solid #d8dde6;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    background: white;
    direction: ltr;
}

.original-search button {
    width: 54px;
    border: 0;
    border-right: 1px solid #d8dde6;
    background: white;
    color: #111827;
    font-size: 30px;
}

.original-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 0 14px;
    direction: ltr;
    color: #4b5563;
}

.original-products-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 42px 54px;
    padding: 8px 34px 56px;
}

.original-product-card {
    min-width: 0;
    direction: ltr;
    text-align: left;
}

.original-product-image {
    height: 210px;
    display: grid;
    place-items: center;
    background: white;
}

.original-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.original-product-info h3 {
    margin: 12px 0 10px;
    min-height: 44px;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 900;
    color: #2f343b;
}

.code-line {
    margin: 0 0 8px;
    color: #9099a8;
    font-size: 13px;
    letter-spacing: .3px;
}

.code-line span {
    color: #7a8391;
    padding-left: 8px;
}

.price-line {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.price-line strong {
    color: var(--teal);
    font-size: 18px;
    font-weight: 900;
}

.stock-dot {
    font-size: 11px;
    border-radius: 999px;
    padding: 4px 8px;
    font-weight: 900;
}

.stock-dot.ok {
    color: #0e966a;
    background: #e8fff5;
}

.stock-dot.no {
    color: #e11d48;
    background: #fff1f2;
}

.qty-cart-row {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    align-items: center;
    gap: 10px;
}

.round-btn {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--teal);
    color: white;
    font-weight: 900;
    cursor: pointer;
}

.qty-input {
    height: 36px;
    border: 1px solid var(--teal);
    border-radius: 8px;
    background: white;
    color: var(--teal);
    font-weight: 900;
    cursor: pointer;
}

.round-btn:disabled,
.qty-input:disabled {
    background: #cbd5e1;
    border-color: #cbd5e1;
    color: white;
    cursor: not-allowed;
}

.empty-products {
    margin: 18px;
    padding: 30px 18px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    text-align: center;
    background: #f8fafc;
}

.empty-icon {
    font-size: 44px;
}

.empty-products p {
    color: var(--muted);
}

.bottom-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    height: 72px;
    background: white;
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 20px rgba(0,0,0,.06);
    display: flex;
    justify-content: center;
    gap: 44%;
}

.dock-item {
    min-width: 82px;
    display: grid;
    place-items: center;
    color: #8d95a3;
    position: relative;
    font-size: 12px;
}

.dock-circle {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f1f5f9;
    font-size: 20px;
}

.cart-count-link b {
    position: absolute;
    top: 6px;
    right: 18px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #ffc107;
    color: white;
    font-size: 11px;
    display: grid;
    place-items: center;
}

.smart-loader {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: linear-gradient(135deg, #47b9af, #2aa1b8);
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    color: white;
    transition: opacity .35s ease, visibility .35s ease;
}

.smart-loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-logo {
    width: 74px;
    height: 74px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    font-size: 40px;
    font-weight: 900;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
}

.smart-loader h2 {
    margin: 0;
    font-size: 28px;
}

.smart-loader p {
    margin: 0;
    opacity: .72;
}

.loader-dots {
    display: flex;
    gap: 12px;
}

.loader-dots span {
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    animation: dot 1s infinite ease-in-out;
}

.loader-dots span:nth-child(2) {
    animation-delay: .15s;
}

.loader-dots span:nth-child(3) {
    animation-delay: .3s;
}

@keyframes dot {
    0%, 80%, 100% { transform: scale(.7); opacity: .5; }
    40% { transform: scale(1); opacity: 1; }
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 88px;
    transform: translateX(-50%);
    z-index: 100;
    width: min(92%, 420px);
    padding: 14px 16px;
    border-radius: 14px;
    background: #111827;
    color: white;
    text-align: center;
    box-shadow: var(--shadow);
}

.toast-error {
    background: #e11d48;
}

/* Cart/Checkout keeps clean responsive style */
.cart-page {
    width: min(860px, calc(100% - 32px));
    margin: 30px auto;
    direction: rtl;
}

.cart-header,
.checkout-card,
.success-card {
    background: white;
    border-radius: 16px;
    box-shadow: var(--shadow);
}

.cart-header {
    height: 70px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 22px;
    margin-bottom: 20px;
}

.cart-header h1 {
    margin: 0;
}

.checkout-card {
    padding: 22px;
}

.checkout-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.field-label {
    display: block;
    margin-bottom: 16px;
    font-weight: 900;
}

.field-label input,
.field-label select,
.branch-select {
    width: 100%;
    height: 54px;
    margin-top: 8px;
    padding: 0 14px;
    border: 1px solid #dfe3ea;
    border-radius: 10px;
}

.location-btn,
.whatsapp-send-btn {
    width: 100%;
    height: 52px;
    border: 0;
    border-radius: 10px;
    font-weight: 900;
}

.location-btn {
    background: #eff6ff;
    color: #1d7bd6;
}

.whatsapp-send-btn {
    margin-top: 16px;
    background: linear-gradient(135deg, #74d7d0, #4fc0de);
    color: white;
}

.cart-products-box {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.cart-line {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid var(--line);
    padding: 10px 0;
}

.cart-line:last-child {
    border-bottom: 0;
}

.cart-line img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.qty-tools {
    display: flex;
    gap: 7px;
    align-items: center;
}

.qty-tools button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    font-weight: 900;
}

.total-card {
    height: 76px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    align-items: center;
    padding: 0 18px;
    margin-top: 18px;
    border-radius: 12px;
    border: 1px solid var(--line);
}

.total-card strong {
    color: var(--teal);
    font-size: 28px;
}

.success-card {
    max-width: 620px;
    margin: 40px auto;
    padding: 32px;
    text-align: center;
}

.success-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #14b86a;
    color: white;
    font-size: 40px;
    font-weight: 900;
}

.success-actions {
    display: grid;
    gap: 12px;
}

.btn {
    min-height: 48px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-weight: 900;
}

.btn-primary {
    background: var(--teal);
    color: white;
}

.btn-soft {
    background: #eef2f7;
}

@media (max-width: 900px) {
    :root {
        --container: 520px;
    }

    body {
        padding-bottom: 78px;
    }

    .top-header-inner {
        width: min(100%, 520px);
        padding: 0 16px;
    }

    .brand-logo {
        font-size: 22px;
    }

    .admin-link {
        display: none;
    }

    .original-shell {
        width: min(100%, 520px);
    }

    .brands-panel {
        margin: 16px 12px 18px;
        border-radius: 12px;
        padding: 14px 12px 24px;
    }

    .brands-row {
        grid-auto-columns: 126px;
    }

    .products-panel {
        margin: 0 12px 20px;
        border-radius: 10px;
    }

    .original-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 20px;
        padding: 8px 18px 40px;
    }

    .original-product-image {
        height: 160px;
    }

    .original-product-info h3 {
        font-size: 14px;
        min-height: 42px;
    }

    .field-row {
        grid-template-columns: 1fr;
    }

    .bottom-dock {
        gap: 30%;
    }
}

@media (max-width: 420px) {
    .original-products-grid {
        gap: 18px 14px;
        padding-inline: 14px;
    }

    .original-product-image {
        height: 135px;
    }

    .price-line {
        display: grid;
        gap: 6px;
    }

    .qty-cart-row {
        gap: 6px;
        grid-template-columns: 32px 1fr 32px;
    }

    .round-btn {
        width: 32px;
        height: 32px;
    }
}


/* ================= Admin Catalog Phase ================= */
.admin-links {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
}

.admin-links a,
.admin-links button {
    border: 0;
    min-height: 38px;
    padding: 0 13px;
    border-radius: 10px;
    background: rgba(255,255,255,.16);
    color: white;
    cursor: pointer;
    font-weight: 900;
}

.admin-links form {
    margin: 0;
}

.admin-card {
    width: min(720px, calc(100% - 28px));
    margin: 34px auto;
    padding: 24px;
    background: white;
    border-radius: 18px;
    box-shadow: var(--shadow);
}

.wide-admin {
    width: min(1180px, calc(100% - 28px));
}

.admin-card h1 {
    margin: 0 0 8px;
}

.admin-card p {
    color: var(--muted);
}

.admin-form {
    display: grid;
    gap: 14px;
}

.grid-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.full-row {
    grid-column: 1 / -1;
}

.admin-form label {
    display: grid;
    gap: 7px;
    font-weight: 900;
}

.admin-form input,
.admin-form textarea,
.admin-form select,
.admin-search input {
    width: 100%;
    min-height: 48px;
    border: 1px solid #dbe3ea;
    border-radius: 10px;
    padding: 0 12px;
    outline: none;
}

.admin-form textarea {
    min-height: 110px;
    padding-top: 12px;
}

.check-label {
    display: flex !important;
    align-items: center;
    gap: 10px !important;
}

.check-label input {
    width: auto;
    min-height: auto;
}

.primary-admin-btn,
.secondary-admin-btn {
    border: 0;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 10px;
    display: inline-grid;
    place-items: center;
    font-weight: 900;
    cursor: pointer;
}

.primary-admin-btn {
    background: var(--teal);
    color: white;
}

.secondary-admin-btn {
    background: #eef2f7;
    color: #334155;
}

.form-actions {
    display: flex;
    gap: 10px;
}

.admin-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.admin-search {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.admin-search button {
    min-width: 90px;
    border: 0;
    border-radius: 10px;
    background: var(--teal);
    color: white;
    font-weight: 900;
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.admin-table th,
.admin-table td {
    padding: 12px;
    border-bottom: 1px solid var(--line);
    text-align: right;
    vertical-align: middle;
}

.admin-table th {
    background: #f8fafc;
}

.admin-table small {
    display: block;
    color: var(--muted);
    margin-top: 4px;
}

.admin-product-img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid var(--line);
}

.actions-cell {
    display: flex;
    gap: 8px;
    align-items: center;
}

.actions-cell a,
.actions-cell button {
    border: 0;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 8px;
    background: #eef6ff;
    color: #1d7bd6;
    font-weight: 900;
    cursor: pointer;
}

.actions-cell button {
    background: #fff1f2;
    color: #e11d48;
}

.validation-summary {
    color: #e11d48;
    font-weight: 900;
}

.admin-note,
.admin-hint {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
}

@media (max-width: 900px) {
    .admin-links {
        gap: 5px;
        font-size: 12px;
    }

    .admin-links a,
    .admin-links button {
        padding: 0 8px;
    }

    .grid-form {
        grid-template-columns: 1fr;
    }

    .admin-page-head {
        display: grid;
    }

    .admin-search {
        display: grid;
    }

    .actions-cell {
        min-width: 140px;
    }
}


/* ================= Import From Current Database ================= */
.import-search {
    grid-template-columns: 240px 1fr 100px;
}

.import-search select {
    min-height: 48px;
    border: 1px solid #dbe3ea;
    border-radius: 10px;
    padding: 0 12px;
}

.admin-success {
    margin: 12px 0;
    padding: 12px;
    border-radius: 12px;
    background: #ecfdf5;
    color: #047857;
    font-weight: 900;
    border: 1px solid #bbf7d0;
}

.status-added,
.status-new {
    display: inline-grid;
    place-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.status-added {
    background: #eff6ff;
    color: #1d4ed8;
}

.status-new {
    background: #ecfdf5;
    color: #047857;
}

.small-admin-btn {
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
}

.import-table td form {
    margin: 0;
}

@media (max-width: 900px) {
    .import-search {
        grid-template-columns: 1fr;
    }

    .import-table {
        min-width: 980px;
    }
}


/* ================= Product Image Upload ================= */
.image-upload-box {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 18px;
    align-items: stretch;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fafc;
}

.file-picker-label input[type="file"] {
    padding: 11px;
    background: white;
    min-height: 48px;
}

.image-preview-card {
    border: 1px solid var(--line);
    background: white;
    border-radius: 14px;
    padding: 12px;
    display: grid;
    gap: 10px;
    align-content: start;
}

.image-preview-card span {
    font-weight: 900;
    color: #475569;
}

.image-preview-card img {
    width: 100%;
    height: 170px;
    object-fit: contain;
    border-radius: 12px;
    background: #f1f5f9;
}

.mini-hint {
    margin: 8px 0 0 !important;
    font-size: 13px;
}

.field-validation-error {
    color: #e11d48;
    font-weight: 900;
    font-size: 13px;
}

@media (max-width: 900px) {
    .image-upload-box {
        grid-template-columns: 1fr;
    }

    .image-preview-card img {
        height: 210px;
    }
}


/* ==========================================================
   Phase 08 - Professional 3D UI Effects
   تأثيرات ثلاثية الأبعاد احترافية وخفيفة للمنتجات والبطاقات
   ========================================================== */

:root {
    --depth-shadow-1: 0 10px 22px rgba(15, 23, 42, .12);
    --depth-shadow-2: 0 24px 55px rgba(15, 23, 42, .24);
    --depth-shadow-glow: 0 0 0 1px rgba(255,255,255,.58), 0 24px 60px rgba(34, 166, 183, .28);
}

.original-shell,
.page-shell {
    perspective: 1400px;
}

.original-product-card,
.mobile-product-card {
    position: relative;
    isolation: isolate;
    transform-style: preserve-3d;
    will-change: transform, box-shadow, filter;
    transition:
        transform .28s cubic-bezier(.2,.8,.2,1),
        box-shadow .28s cubic-bezier(.2,.8,.2,1),
        filter .28s ease,
        border-color .28s ease;
    box-shadow: var(--depth-shadow-1);
    border: 1px solid rgba(226, 232, 240, .92);
    backface-visibility: hidden;
}

.original-product-card::before,
.mobile-product-card::before,
.brand-tile::before,
.brand-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(135deg, rgba(255,255,255,.46), rgba(255,255,255,0) 42%),
        radial-gradient(circle at 22% 14%, rgba(255,255,255,.35), transparent 32%);
    opacity: .38;
    transform: translateZ(18px);
    transition: opacity .28s ease;
}

.original-product-card::after,
.mobile-product-card::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -10px;
    height: 22px;
    z-index: -1;
    border-radius: 999px;
    background: rgba(15, 23, 42, .22);
    filter: blur(16px);
    opacity: 0;
    transition: opacity .28s ease, transform .28s ease;
}

.original-product-card:hover,
.mobile-product-card:hover {
    transform: translateY(-10px) scale(1.025) rotateX(4deg) rotateY(-4deg);
    box-shadow: var(--depth-shadow-2);
    border-color: rgba(34, 166, 183, .55);
    filter: saturate(1.05);
}

.original-product-card:hover::before,
.mobile-product-card:hover::before,
.brand-tile:hover::before,
.brand-card:hover::before {
    opacity: .62;
}

.original-product-card:hover::after,
.mobile-product-card:hover::after {
    opacity: .78;
    transform: translateY(4px) scaleX(1.08);
}

.original-product-card:active,
.mobile-product-card:active,
.original-product-card.is-selected,
.mobile-product-card.is-selected {
    transform: translateY(-4px) scale(.99) rotateX(1.5deg) rotateY(-1.5deg);
    box-shadow: var(--depth-shadow-glow);
    border-color: rgba(255, 193, 7, .9);
}

.original-product-image,
.product-thumb {
    position: relative;
    transform: translateZ(34px);
    transition: transform .28s cubic-bezier(.2,.8,.2,1), filter .28s ease;
    z-index: 2;
}

.original-product-card:hover .original-product-image,
.mobile-product-card:hover .product-thumb {
    transform: translateZ(56px) translateY(-3px) scale(1.04);
    filter: drop-shadow(0 16px 20px rgba(15, 23, 42, .16));
}

.original-product-image img,
.product-thumb img,
.admin-product-img {
    transition: transform .28s cubic-bezier(.2,.8,.2,1), filter .28s ease;
    backface-visibility: hidden;
}

.original-product-card:hover .original-product-image img,
.mobile-product-card:hover .product-thumb img {
    transform: scale(1.045);
}

.original-product-info,
.mobile-product-info {
    position: relative;
    z-index: 3;
    transform: translateZ(26px);
}

.add-product-btn,
.round-btn,
.qty-input,
.primary-admin-btn,
.secondary-admin-btn {
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transition:
        transform .18s cubic-bezier(.2,.8,.2,1),
        box-shadow .18s ease,
        filter .18s ease;
    box-shadow: 0 7px 0 rgba(0,0,0,.10), 0 12px 22px rgba(15,23,42,.12);
}

.add-product-btn:hover,
.round-btn:hover,
.qty-input:hover,
.primary-admin-btn:hover,
.secondary-admin-btn:hover {
    transform: translateY(-3px) translateZ(18px);
    box-shadow: 0 10px 0 rgba(0,0,0,.09), 0 18px 30px rgba(15,23,42,.16);
    filter: brightness(1.03);
}

.add-product-btn:active,
.round-btn:active,
.qty-input:active,
.primary-admin-btn:active,
.secondary-admin-btn:active {
    transform: translateY(2px) translateZ(4px) scale(.98);
    box-shadow: 0 3px 0 rgba(0,0,0,.12), 0 8px 15px rgba(15,23,42,.13);
}

.brand-tile,
.brand-card {
    position: relative;
    transform-style: preserve-3d;
    will-change: transform, box-shadow;
    transition:
        transform .3s cubic-bezier(.2,.8,.2,1),
        box-shadow .3s ease,
        filter .3s ease;
    box-shadow: 0 14px 26px rgba(15, 23, 42, .16);
}

.brand-tile:hover,
.brand-card:hover {
    transform: translateY(-9px) scale(1.035) rotateX(5deg) rotateY(-5deg);
    box-shadow: 0 24px 48px rgba(15, 23, 42, .24);
    filter: saturate(1.08);
}

.brand-logo-circle,
.brand-circle {
    transform: translateZ(38px);
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
}

.brand-tile:hover .brand-logo-circle,
.brand-card:hover .brand-circle {
    transform: translateZ(58px) scale(1.06);
}

.admin-card,
.checkout-card,
.brands-panel,
.products-panel {
    transform-style: preserve-3d;
    box-shadow: 0 18px 44px rgba(15,23,42,.14);
}

.card-ripple {
    position: absolute;
    z-index: 5;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255,255,255,.92), rgba(255,255,255,0) 68%);
    transform: translate(-50%, -50%) scale(1);
    animation: cardRipple .62s ease-out forwards;
}

@keyframes cardRipple {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(18);
    }
}

.original-product-card.is-selected,
.mobile-product-card.is-selected {
    outline: 3px solid rgba(255, 193, 7, .72);
    outline-offset: 3px;
}

.original-product-card:focus-visible,
.mobile-product-card:focus-visible,
.brand-tile:focus-visible,
.brand-card:focus-visible,
.add-product-btn:focus-visible {
    outline: 3px solid rgba(255, 193, 7, .85);
    outline-offset: 4px;
}

@media (max-width: 900px) {
    .original-shell,
    .page-shell {
        perspective: 900px;
    }

    .original-product-card:hover,
    .mobile-product-card:hover {
        transform: translateY(-6px) scale(1.015);
    }

    .brand-tile:hover,
    .brand-card:hover {
        transform: translateY(-6px) scale(1.02);
    }

    .original-product-card:hover .original-product-image,
    .mobile-product-card:hover .product-thumb {
        transform: translateZ(28px) translateY(-2px) scale(1.025);
    }
}

@media (prefers-reduced-motion: reduce) {
    .original-product-card,
    .mobile-product-card,
    .brand-tile,
    .brand-card,
    .add-product-btn,
    .round-btn,
    .qty-input,
    .primary-admin-btn,
    .secondary-admin-btn,
    .original-product-image,
    .product-thumb,
    .original-product-image img,
    .product-thumb img {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    .card-ripple {
        display: none;
    }
}


/* ==========================================================
   Phase 09 - Reference Product Card
   نفس التأثير + نفس الحجم + مربع السعر
   ========================================================== */

/* شبكة ثابتة تشبه الفيديو: حجم الكروت موحد */
.reference-products-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 210px)) !important;
    justify-content: center;
    align-items: stretch;
    gap: 28px 34px !important;
    padding: 12px 32px 58px !important;
}

/* حجم موحد لكل كرت */
.reference-product-card {
    width: 210px !important;
    height: 392px !important;
    padding: 12px 12px 14px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 1px solid rgba(222, 228, 238, .95) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    transform-style: preserve-3d;
    transition:
        transform .24s cubic-bezier(.2,.8,.2,1),
        box-shadow .24s cubic-bezier(.2,.8,.2,1),
        border-color .24s ease !important;
}

/* نفس تأثير الفيديو: رفع، تكبير بسيط، إطار وظل واضح */
.reference-product-card:hover,
.reference-product-card.is-selected {
    transform: translateY(-9px) scale(1.035) !important;
    border-color: #2aa1b8 !important;
    box-shadow:
        0 20px 36px rgba(15, 23, 42, .18),
        0 0 0 2px rgba(42, 161, 184, .16) !important;
    z-index: 5;
}

.reference-product-card:active {
    transform: translateY(-4px) scale(1.01) !important;
}

/* منع الميلان الزائد من المرحلة السابقة حتى يطابق الفيديو أكثر */
.reference-product-card:hover .reference-product-image {
    transform: translateY(-4px) scale(1.035) !important;
    filter: drop-shadow(0 12px 15px rgba(15, 23, 42, .13));
}

/* صورة بحجم ثابت */
.reference-product-image {
    width: 100% !important;
    height: 150px !important;
    min-height: 150px !important;
    display: grid !important;
    place-items: center !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    transform: translateZ(18px);
}

.reference-product-image img {
    max-width: 100% !important;
    max-height: 142px !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 4px !important;
}

/* النصوص بحجم ثابت حتى تبقى كل الكروت بنفس الارتفاع */
.reference-product-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 8px 0 0 !important;
    transform: translateZ(14px);
}

.reference-product-info h3 {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 0 6px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    color: #202733 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* منطقة بيانات ثابتة */
.reference-meta {
    height: 58px !important;
    min-height: 58px !important;
    overflow: hidden !important;
    margin-bottom: 8px !important;
}

.reference-meta .code-line {
    margin: 0 0 4px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    color: #8b95a3 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* مربع السعر المطلوب */
.reference-price-box {
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 0 10px !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.95), rgba(245, 250, 252, .95));
    border: 1px solid rgba(42, 161, 184, .22) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 8px 16px rgba(42, 161, 184, .10) !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 6px !important;
}

.reference-price-box span {
    font-size: 11px !important;
    color: #8b95a3 !important;
    font-weight: 800 !important;
}

.reference-price-box strong {
    color: #259db3 !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    text-align: center !important;
    letter-spacing: .2px;
}

.reference-price-box small {
    color: #7b8493 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
}

/* أزرار السلة بنفس فكرة الفيديو: دائرتان ومربع في الوسط */
.reference-cart-row {
    height: 38px !important;
    margin-top: auto !important;
    display: grid !important;
    grid-template-columns: 34px 1fr 34px !important;
    gap: 8px !important;
    align-items: center !important;
}

.reference-cart-row .round-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #2aa1b8 !important;
    color: #fff !important;
    border: 0 !important;
    font-size: 15px !important;
    box-shadow:
        0 7px 12px rgba(42, 161, 184, .22),
        inset 0 1px 0 rgba(255,255,255,.28) !important;
}

.reference-cart-row .qty-input {
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 8px !important;
    border: 1px solid #2aa1b8 !important;
    color: #2aa1b8 !important;
    background: #fff !important;
    font-weight: 900 !important;
    box-shadow: 0 6px 13px rgba(42, 161, 184, .10) !important;
}

.reference-cart-row .round-btn:hover,
.reference-cart-row .qty-input:hover {
    transform: translateY(-2px) scale(1.04) !important;
}

/* اختيار واضح عند الضغط */
.reference-product-card.is-selected {
    outline: 3px solid rgba(42, 161, 184, .32) !important;
    outline-offset: 4px !important;
}

/* تقليل تأثير اللمعة إذا كان مزعجًا */
.reference-product-card::before {
    opacity: .18 !important;
}

/* تابلت */
@media (max-width: 1100px) {
    .reference-products-grid {
        grid-template-columns: repeat(auto-fill, minmax(190px, 190px)) !important;
        gap: 24px !important;
    }

    .reference-product-card {
        width: 190px !important;
        height: 380px !important;
    }

    .reference-product-image {
        height: 140px !important;
        min-height: 140px !important;
    }
}

/* موبايل: عمودين بنفس الشكل */
@media (max-width: 600px) {
    .reference-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px 14px !important;
        padding: 8px 14px 44px !important;
    }

    .reference-product-card {
        width: 100% !important;
        height: 370px !important;
        padding: 10px !important;
    }

    .reference-product-image {
        height: 132px !important;
        min-height: 132px !important;
    }

    .reference-product-info h3 {
        font-size: 13px !important;
        height: 42px !important;
        min-height: 42px !important;
    }

    .reference-price-box strong {
        font-size: 15px !important;
    }

    .reference-cart-row {
        grid-template-columns: 32px 1fr 32px !important;
        gap: 6px !important;
    }

    .reference-cart-row .round-btn {
        width: 32px !important;
        height: 32px !important;
    }
}


/* ==========================================================
   Phase 10 - Reference dimensions + Admin password modal
   ========================================================== */

:root {
    --reference-width: 1320px;
    --reference-header-height: 64px;
}

/* أبعاد عامة مثل الموقع المرجعي */
body {
    background:
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(135deg, #45bbb4, #29a4ba) !important;
    background-size: 34px 34px, 34px 34px, cover !important;
}

.reference-top-header {
    height: var(--reference-header-height) !important;
    min-height: var(--reference-header-height) !important;
    background: #259bb6 !important;
    box-shadow: 0 7px 18px rgba(0,0,0,.13) !important;
}

.reference-header-inner {
    width: min(var(--reference-width), calc(100% - 32px)) !important;
    height: var(--reference-header-height) !important;
    min-height: var(--reference-header-height) !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.reference-brand-logo {
    font-size: 24px !important;
    color: white !important;
}

.reference-brand-logo .brand-symbol {
    width: 44px !important;
    height: 44px !important;
    border-radius: 11px !important;
}

.reference-admin-area {
    margin-inline-start: auto !important;
}

.admin-panel-button {
    border: 0 !important;
    background: transparent !important;
    color: rgba(255,255,255,.75) !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    transition: background .18s ease, color .18s ease, transform .18s ease !important;
    box-shadow: none !important;
}

.admin-panel-button:hover {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

.reference-main-shell {
    width: min(var(--reference-width), calc(100% - 32px)) !important;
    margin: 0 auto !important;
}

/* نفس أبعاد لوحة البراندات */
.brands-panel {
    width: min(var(--reference-width), calc(100% - 32px)) !important;
    margin: 18px auto 24px !important;
    padding: 16px 20px 32px !important;
    border-radius: 14px !important;
    background: #fff !important;
}

.panel-caption {
    margin-bottom: 18px !important;
    font-size: 18px !important;
}

.brands-row {
    grid-auto-columns: 122px !important;
    gap: 16px !important;
    padding: 2px 0 2px !important;
}

.brand-tile {
    width: 122px !important;
    height: 158px !important;
    border-radius: 11px !important;
}

/* نفس أبعاد لوحة المنتجات */
.products-panel {
    width: min(var(--reference-width), calc(100% - 32px)) !important;
    margin: 0 auto 26px !important;
    border-radius: 4px 4px 0 0 !important;
    background: #fff !important;
}

.products-title {
    min-height: 50px !important;
    height: 50px !important;
}

.products-title h1 {
    font-size: 18px !important;
}

.original-search {
    margin: 16px 16px 18px !important;
    height: 44px !important;
}

.original-search button {
    width: 48px !important;
    font-size: 28px !important;
}

/* الكرت بنفس أبعاد الفيديو */
.reference-products-grid {
    grid-template-columns: repeat(4, 230px) !important;
    justify-content: space-between !important;
    gap: 32px 34px !important;
    padding: 8px 32px 58px !important;
}

.reference-product-card {
    width: 230px !important;
    height: 388px !important;
}

.reference-product-image {
    height: 155px !important;
    min-height: 155px !important;
}

.reference-product-image img {
    max-height: 150px !important;
}

.reference-price-box {
    height: 46px !important;
    min-height: 46px !important;
}

/* نافذة كلمة مرور الإدارة مثل المرجع */
.admin-login-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: none;
    place-items: center;
    background: rgba(248, 250, 252, .78);
    backdrop-filter: blur(3px);
}

.admin-login-overlay.show {
    display: grid;
}

.admin-login-modal {
    width: min(450px, calc(100% - 32px));
    min-height: 310px;
    padding: 34px 38px 36px;
    position: relative;
    direction: ltr;
    text-align: left;
    background: #fff;
    border: 1px solid #d5dbe5;
    border-radius: 5px;
    box-shadow: 0 18px 35px rgba(15,23,42,.18);
    animation: adminModalIn .22s ease-out;
}

@keyframes adminModalIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-close-button {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    font-size: 20px;
    cursor: pointer;
}

.login-shield {
    width: 35px;
    height: 35px;
    margin: 10px auto 8px;
    display: grid;
    place-items: center;
    color: #0d6efd;
    border: 2px solid #0d6efd;
    border-radius: 50%;
    font-size: 15px;
}

.admin-login-modal h2 {
    margin: 0 0 22px;
    text-align: center;
    font-size: 28px;
    color: #111827;
    font-weight: 500;
}

.admin-login-modal p {
    display: none;
}

.admin-modal-form {
    display: grid;
    gap: 15px;
}

.admin-modal-form label {
    display: grid;
    gap: 8px;
    color: #1f2937;
    font-size: 14px;
    font-weight: 500;
}

.admin-modal-form input {
    height: 42px;
    border: 1px solid #d6dce6;
    border-radius: 6px;
    outline: none;
    padding: 0 12px;
    direction: ltr;
}

.admin-modal-form input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13,110,253,.12);
}

.admin-modal-form button {
    height: 42px;
    border: 0;
    border-radius: 6px;
    background: #0d6efd;
    color: #fff;
    font-weight: 500;
    cursor: pointer;
}

.admin-modal-form button:hover {
    background: #0b5ed7;
}

/* عند ظهور خطأ كلمة المرور افتح النافذة بدل الذهاب لصفحة أخرى */
.toast.toast-error {
    bottom: 26px !important;
}

/* تجاوب الأبعاد */
@media (max-width: 1320px) {
    .reference-products-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 220px)) !important;
        justify-content: center !important;
    }

    .reference-product-card {
        width: 220px !important;
    }
}

@media (max-width: 700px) {
    :root {
        --reference-header-height: 60px;
    }

    .reference-header-inner,
    .reference-main-shell,
    .brands-panel,
    .products-panel {
        width: min(100%, 520px) !important;
    }

    .reference-header-inner {
        padding: 0 14px !important;
    }

    .reference-brand-logo {
        font-size: 20px !important;
    }

    .reference-admin-area a,
    .reference-admin-area button {
        font-size: 12px !important;
        padding: 8px !important;
    }

    .brands-panel {
        margin: 12px auto 18px !important;
        border-radius: 12px !important;
    }

    .brands-row {
        grid-auto-columns: 120px !important;
    }

    .reference-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px 14px !important;
        padding: 8px 14px 50px !important;
    }

    .reference-product-card {
        width: 100% !important;
        height: 370px !important;
    }

    .reference-product-image {
        height: 132px !important;
        min-height: 132px !important;
    }

    .admin-login-modal {
        width: calc(100% - 28px);
        padding: 30px 28px 34px;
    }
}


/* ==========================================================
   Phase 11 - Fixed bottom Cart/WhatsApp on all devices
   + internal scrolling inside Select Products panel
   ========================================================== */

:root {
    --fixed-dock-height: 76px;
}

/* اترك مساحة دائمة للشريط السفلي حتى لا يغطي آخر صف منتجات */
body {
    padding-bottom: calc(var(--fixed-dock-height) + env(safe-area-inset-bottom) + 10px) !important;
}

/* الشريط السفلي ثابت على كل الأجهزة: كمبيوتر، تابلت، موبايل */
.bottom-dock {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;

    width: min(var(--reference-width), 100%) !important;
    height: calc(var(--fixed-dock-height) + env(safe-area-inset-bottom)) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(120px, 38vw, 620px) !important;

    background: rgba(255, 255, 255, .96) !important;
    border-top: 1px solid rgba(226, 232, 240, .95) !important;
    box-shadow: 0 -10px 26px rgba(15, 23, 42, .10) !important;
    backdrop-filter: blur(10px) !important;
}

.bottom-dock .dock-item {
    min-width: 94px !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 3px !important;
    color: #8d95a3 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    position: relative !important;
}

.bottom-dock .dock-circle {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    font-size: 20px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 14px rgba(15,23,42,.08) !important;
}

.bottom-dock .cart-count-link b {
    position: absolute !important;
    top: 8px !important;
    right: 22px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    background: #ffc107 !important;
    color: #fff !important;
    font-size: 11px !important;
}

/* لوحة المنتجات تتحول إلى صندوق ثابت، والحركة داخله فقط */
.products-panel {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;

    /* ارتفاع ذكي: يترك الهيدر والبراندات والشريط السفلي */
    max-height: calc(100vh - var(--reference-header-height) - var(--fixed-dock-height) - 300px) !important;
    min-height: 430px !important;
}

.products-title,
.original-search {
    flex: 0 0 auto !important;
}

/* هذه هي منطقة الحركة الداخلية */
.products-scroll-area {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scroll-behavior: smooth !important;

    padding-bottom: 24px !important;

    /* Scrollbar Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(42, 161, 184, .65) rgba(241,245,249,.8);
}

/* Scrollbar Chrome/Edge */
.products-scroll-area::-webkit-scrollbar {
    width: 10px;
}

.products-scroll-area::-webkit-scrollbar-track {
    background: rgba(241,245,249,.85);
    border-radius: 999px;
}

.products-scroll-area::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2aa1b8, #45bbb4);
    border-radius: 999px;
    border: 2px solid rgba(241,245,249,.85);
}

.products-scroll-area::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #16889b, #2aa1b8);
}

/* منع الشبكة من عمل Scroll خارجي */
.products-scroll-area .reference-products-grid {
    padding-bottom: 90px !important;
}

/* عند الشاشات الكبيرة جدًا نعطي صندوق المنتجات مساحة أكبر */
@media (min-height: 900px) {
    .products-panel {
        max-height: calc(100vh - var(--reference-header-height) - var(--fixed-dock-height) - 270px) !important;
    }
}

/* كمبيوتر متوسط */
@media (max-height: 760px) and (min-width: 900px) {
    .products-panel {
        max-height: calc(100vh - var(--reference-header-height) - var(--fixed-dock-height) - 230px) !important;
        min-height: 340px !important;
    }

    .brands-panel {
        margin-top: 12px !important;
        margin-bottom: 16px !important;
        padding-bottom: 20px !important;
    }

    .brand-tile {
        height: 132px !important;
    }
}

/* موبايل وتابلت: الشريط ثابت والصندوق يتحرك داخليًا */
@media (max-width: 700px) {
    :root {
        --fixed-dock-height: 72px;
    }

    body {
        padding-bottom: calc(var(--fixed-dock-height) + env(safe-area-inset-bottom) + 8px) !important;
    }

    .bottom-dock {
        width: 100% !important;
        gap: clamp(70px, 30vw, 180px) !important;
    }

    .bottom-dock .dock-item {
        min-width: 74px !important;
    }

    .products-panel {
        max-height: calc(100vh - var(--reference-header-height) - var(--fixed-dock-height) - 260px) !important;
        min-height: 360px !important;
    }

    .products-scroll-area .reference-products-grid {
        padding-bottom: 86px !important;
    }
}

/* هواتف قصيرة: نقصر البراندات قليلًا حتى يظهر صندوق المنتجات */
@media (max-height: 720px) and (max-width: 700px) {
    .brands-panel {
        margin-top: 8px !important;
        margin-bottom: 10px !important;
        padding-top: 10px !important;
        padding-bottom: 14px !important;
    }

    .panel-caption {
        margin-bottom: 10px !important;
    }

    .brand-tile {
        height: 118px !important;
    }

    .brand-logo-circle {
        width: 56px !important;
        height: 56px !important;
    }

    .products-panel {
        max-height: calc(100vh - var(--reference-header-height) - var(--fixed-dock-height) - 185px) !important;
        min-height: 300px !important;
    }
}


/* ==========================================================
   Phase 12 - Uniform Product Card Dimensions + Fixed Bottom Dock
   توحيد الحجم والأبعاد وجعل الشريط ثابتًا أسفل الشاشة
   ========================================================== */

:root {
    --product-card-width-desktop: 252px;
    --product-card-height-desktop: 468px;
    --product-image-height-desktop: 205px;

    --product-card-width-tablet: 228px;
    --product-card-height-tablet: 444px;
    --product-image-height-tablet: 188px;

    --product-card-height-mobile: 392px;
    --product-image-height-mobile: 150px;

    --bottom-dock-height-force: 82px;
}

/* الشريط السفلي ثابت تمامًا على كل جهاز */
.bottom-dock {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: calc(var(--bottom-dock-height-force) + env(safe-area-inset-bottom)) !important;
    min-height: calc(var(--bottom-dock-height-force) + env(safe-area-inset-bottom)) !important;
    padding: 0 22px env(safe-area-inset-bottom) !important;
    margin: 0 !important;
    border-top: 1px solid #d9e2ec !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 -10px 24px rgba(15,23,42,.10) !important;
    backdrop-filter: blur(10px) !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(130px, 38vw, 620px) !important;
}

body {
    padding-bottom: calc(var(--bottom-dock-height-force) + env(safe-area-inset-bottom) + 18px) !important;
}

.bottom-dock .dock-item {
    height: 100% !important;
    min-width: 94px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 4px !important;
}

.bottom-dock .dock-circle {
    width: 42px !important;
    height: 42px !important;
}

/* صندوق المنتجات */
.products-panel {
    overflow: hidden !important;
    padding-bottom: 0 !important;
}

.products-scroll-area {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 0 14px !important;
}

/* نفس الحجم والأبعاد للكروت كلها */
.reference-products-grid {
    grid-template-columns: repeat(4, var(--product-card-width-desktop)) !important;
    justify-content: space-between !important;
    align-items: start !important;
    gap: 28px 24px !important;
    padding: 10px 22px 110px !important;
}

.reference-product-card,
.original-product-card.reference-product-card {
    width: var(--product-card-width-desktop) !important;
    min-width: var(--product-card-width-desktop) !important;
    max-width: var(--product-card-width-desktop) !important;
    height: var(--product-card-height-desktop) !important;
    min-height: var(--product-card-height-desktop) !important;
    max-height: var(--product-card-height-desktop) !important;
    margin: 0 !important;
    padding: 14px 16px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 2px solid rgba(42,161,184,.16) !important;
    box-shadow: 0 14px 26px rgba(15,23,42,.08) !important;
}

.reference-product-card:hover,
.reference-product-card.is-selected {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 22px 40px rgba(15,23,42,.15) !important;
    border-color: #2aa1b8 !important;
}

/* الصورة بنفس الحجم */
.reference-product-image,
.original-product-image.reference-product-image {
    width: 100% !important;
    height: var(--product-image-height-desktop) !important;
    min-height: var(--product-image-height-desktop) !important;
    max-height: var(--product-image-height-desktop) !important;
    margin: 0 0 12px !important;
    padding: 8px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #fff !important;
    display: grid !important;
    place-items: center !important;
}

.reference-product-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: calc(var(--product-image-height-desktop) - 12px) !important;
    object-fit: contain !important;
}

/* المحتوى الداخلي بنفس التقسيم */
.reference-product-info {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
}

.reference-product-info h3 {
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    margin: 0 0 8px !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    font-weight: 900 !important;
    color: #1f2937 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.reference-meta {
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
}

.reference-meta .code-line {
    margin: 0 0 6px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    color: #6b7280 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* السعر في نفس المكان والحجم */
.reference-price-box {
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    margin: 0 0 12px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 8px !important;
    background: #f8fcfd !important;
    border: 1px solid rgba(42,161,184,.24) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 6px 14px rgba(42,161,184,.08) !important;
}

.reference-price-box strong {
    font-size: 18px !important;
    line-height: 1 !important;
    text-align: center !important;
    color: #2a9db4 !important;
}

.reference-price-box span,
.reference-price-box small {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #7b8794 !important;
}

/* صف الأزرار يكون دائمًا في الأسفل */
.reference-cart-row {
    margin-top: auto !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    display: grid !important;
    grid-template-columns: 42px 1fr 42px !important;
    gap: 10px !important;
    align-items: center !important;
}

.reference-cart-row .round-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 50% !important;
    font-size: 20px !important;
    border: 0 !important;
    background: #2a9db4 !important;
    color: #fff !important;
    box-shadow: 0 10px 16px rgba(42,161,184,.20) !important;
}

.reference-cart-row .qty-input {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 10px !important;
    border: 2px solid #2a9db4 !important;
    background: #fff !important;
    color: #111827 !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    display: grid !important;
    place-items: center !important;
    box-shadow: none !important;
}

.reference-cart-row .round-btn:hover,
.reference-cart-row .qty-input:hover {
    transform: translateY(-2px) !important;
}

/* تابلت */
@media (max-width: 1200px) {
    .reference-products-grid {
        grid-template-columns: repeat(4, var(--product-card-width-tablet)) !important;
        justify-content: center !important;
        gap: 24px 18px !important;
    }

    .reference-product-card,
    .original-product-card.reference-product-card {
        width: var(--product-card-width-tablet) !important;
        min-width: var(--product-card-width-tablet) !important;
        max-width: var(--product-card-width-tablet) !important;
        height: var(--product-card-height-tablet) !important;
        min-height: var(--product-card-height-tablet) !important;
        max-height: var(--product-card-height-tablet) !important;
    }

    .reference-product-image,
    .original-product-image.reference-product-image {
        height: var(--product-image-height-tablet) !important;
        min-height: var(--product-image-height-tablet) !important;
        max-height: var(--product-image-height-tablet) !important;
    }

    .reference-product-image img {
        max-height: calc(var(--product-image-height-tablet) - 10px) !important;
    }

    .bottom-dock {
        gap: clamp(90px, 28vw, 280px) !important;
    }
}

/* موبايل */
@media (max-width: 700px) {
    :root {
        --bottom-dock-height-force: 74px;
    }

    .bottom-dock {
        gap: clamp(70px, 24vw, 140px) !important;
        padding-inline: 18px !important;
    }

    .bottom-dock .dock-item {
        min-width: 72px !important;
        font-size: 11px !important;
    }

    .bottom-dock .dock-circle {
        width: 38px !important;
        height: 38px !important;
        font-size: 18px !important;
    }

    .reference-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        justify-content: stretch !important;
        gap: 16px 12px !important;
        padding: 8px 12px 100px !important;
    }

    .reference-product-card,
    .original-product-card.reference-product-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: var(--product-card-height-mobile) !important;
        min-height: var(--product-card-height-mobile) !important;
        max-height: var(--product-card-height-mobile) !important;
        padding: 12px !important;
        border-radius: 16px !important;
    }

    .reference-product-image,
    .original-product-image.reference-product-image {
        height: var(--product-image-height-mobile) !important;
        min-height: var(--product-image-height-mobile) !important;
        max-height: var(--product-image-height-mobile) !important;
        margin-bottom: 10px !important;
    }

    .reference-product-image img {
        max-height: calc(var(--product-image-height-mobile) - 8px) !important;
    }

    .reference-product-info h3 {
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        font-size: 13px !important;
    }

    .reference-meta {
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        margin-bottom: 8px !important;
    }

    .reference-meta .code-line {
        font-size: 11px !important;
        margin-bottom: 4px !important;
    }

    .reference-price-box {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        margin-bottom: 10px !important;
        padding: 6px 8px !important;
    }

    .reference-price-box strong {
        font-size: 16px !important;
    }

    .reference-cart-row {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        grid-template-columns: 38px 1fr 38px !important;
        gap: 8px !important;
    }

    .reference-cart-row .round-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        font-size: 18px !important;
    }

    .reference-cart-row .qty-input {
        height: 38px !important;
        min-height: 38px !important;
        font-size: 20px !important;
    }
}


/* ==========================================================
   Phase 13 - Truly fixed bottom dock on any screen
   تثبيت حقيقي للشريط أسفل أي شاشة
   ========================================================== */

:root {
    --global-fixed-bottom-bar-height: 82px;
}

/* مهم جداً: الصفحة تبقى بطول الشاشة */
html, body {
    min-height: 100% !important;
}

/* اترك مساحة للشريط الثابت حتى لا يغطي المحتوى */
body {
    padding-bottom: calc(var(--global-fixed-bottom-bar-height) + env(safe-area-inset-bottom) + 14px) !important;
}

/* الشريط ثابت بالنسبة للـ viewport بالكامل وليس بالنسبة للحاوية */
.bottom-dock {
    position: fixed !important;
    inset-inline: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;

    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin: 0 !important;
    transform: none !important;

    height: calc(var(--global-fixed-bottom-bar-height) + env(safe-area-inset-bottom)) !important;
    min-height: calc(var(--global-fixed-bottom-bar-height) + env(safe-area-inset-bottom)) !important;
    max-height: calc(var(--global-fixed-bottom-bar-height) + env(safe-area-inset-bottom)) !important;
    padding: 0 18px env(safe-area-inset-bottom) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(120px, 34vw, 420px) !important;

    background: rgba(255, 255, 255, 0.98) !important;
    border-top: 1px solid rgba(214, 220, 230, 0.95) !important;
    box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.12) !important;
    backdrop-filter: blur(12px) !important;

    z-index: 2147483000 !important;
}

/* إزالة أي تموضع سابق للحاوية أو العرض المحدود */
.reference-main-shell,
.original-shell,
.page-shell,
.products-panel,
.brands-panel {
    overflow: visible !important;
}

.bottom-dock .dock-item {
    height: 100% !important;
    min-width: 86px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 4px !important;
    color: #7f8796 !important;
    text-decoration: none !important;
}

.bottom-dock .dock-circle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    background: #f4f7fb !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 6px 14px rgba(15,23,42,.08) !important;
}

.bottom-dock .cart-count-link b {
    position: absolute !important;
    top: 8px !important;
    right: 14px !important;
    min-width: 19px !important;
    height: 19px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    background: #ffc107 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    display: grid !important;
    place-items: center !important;
    box-shadow: 0 4px 12px rgba(255, 193, 7, .35) !important;
}

/* على أي حاوية منتجات نضمن مسافة كافية أسفل الأصناف */
.products-scroll-area,
.reference-products-grid {
    padding-bottom: calc(var(--global-fixed-bottom-bar-height) + env(safe-area-inset-bottom) + 22px) !important;
}

/* تابلت */
@media (max-width: 1024px) {
    .bottom-dock {
        gap: clamp(80px, 28vw, 220px) !important;
    }
}

/* موبايل */
@media (max-width: 700px) {
    :root {
        --global-fixed-bottom-bar-height: 74px;
    }

    body {
        padding-bottom: calc(var(--global-fixed-bottom-bar-height) + env(safe-area-inset-bottom) + 10px) !important;
    }

    .bottom-dock {
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        gap: clamp(70px, 22vw, 120px) !important;
        padding-inline: 10px !important;
    }

    .bottom-dock .dock-item {
        min-width: 70px !important;
        font-size: 11px !important;
    }

    .bottom-dock .dock-circle {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        font-size: 18px !important;
    }

    .bottom-dock .cart-count-link b {
        right: 10px !important;
        top: 7px !important;
    }

    .products-scroll-area,
    .reference-products-grid {
        padding-bottom: calc(var(--global-fixed-bottom-bar-height) + env(safe-area-inset-bottom) + 16px) !important;
    }
}


/* ==========================================================
   Phase 14 - Final bottom dock fix + remove horizontal scroll
   إصلاح نهائي: الشريط أسفل الشاشة بدون Scroll أفقي
   ========================================================== */

/* منع ظهور شريط التمرير الأفقي نهائياً */
html,
body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

body {
    margin: 0 !important;
    padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
}

/* أي حاوية رئيسية لا يسمح لها بتوليد عرض زائد */
.reference-main-shell,
.original-shell,
.page-shell,
.top-header,
.reference-top-header,
.products-panel,
.brands-panel {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* أهم إصلاح: لا نستخدم 100vw لأنه يسبب Horizontal Scroll مع Scrollbar المتصفح */
.bottom-dock {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: calc(76px + env(safe-area-inset-bottom)) !important;
    min-height: calc(76px + env(safe-area-inset-bottom)) !important;
    max-height: calc(76px + env(safe-area-inset-bottom)) !important;

    margin: 0 !important;
    padding: 0 16px env(safe-area-inset-bottom) !important;
    transform: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(120px, 34vw, 420px) !important;

    background: rgba(255, 255, 255, 0.985) !important;
    border-top: 1px solid rgba(214, 220, 230, 0.96) !important;
    box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.12) !important;
    backdrop-filter: blur(12px) !important;
    z-index: 2147483000 !important;
    box-sizing: border-box !important;
}

.bottom-dock .dock-item {
    position: relative !important;
    min-width: 90px !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 3px !important;
}

/* صندوق المنتجات: التمرير داخله عمودي فقط */
.products-scroll-area {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* منع الشبكة من توليد عرض زائد، وترتيب المنتجات من اليسار مثل المرجع */
.reference-products-grid {
    direction: ltr !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;

    grid-template-columns: repeat(auto-fill, minmax(252px, 252px)) !important;
    justify-content: start !important;
    justify-items: stretch !important;
    align-items: start !important;
    gap: 28px 28px !important;

    padding-left: 32px !important;
    padding-right: 32px !important;
    padding-bottom: 110px !important;
}

/* محتوى الكرت يبقى LTR/منظم، ولا يكسر العرض */
.reference-product-card {
    width: 252px !important;
    min-width: 252px !important;
    max-width: 252px !important;
    box-sizing: border-box !important;
    direction: ltr !important;
}

/* النص العربي داخل اسم المنتج مضبوط */
.reference-product-info h3 {
    direction: rtl !important;
    text-align: right !important;
}

.reference-meta,
.reference-price-box,
.reference-cart-row {
    direction: ltr !important;
}

/* عند وجود صنف واحد لا يذهب بعيداً لليمين أو يولد مساحة فارغة */
.products-scroll-area .reference-products-grid:has(.reference-product-card:only-child) {
    justify-content: start !important;
}

/* جعل Brands لا تسبب عرض زائد */
.brands-row {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

/* كمبيوتر متوسط */
@media (max-width: 1320px) {
    .reference-main-shell,
    .brands-panel,
    .products-panel,
    .reference-header-inner {
        width: min(100%, calc(100% - 28px)) !important;
    }

    .reference-products-grid {
        grid-template-columns: repeat(auto-fill, minmax(230px, 230px)) !important;
        gap: 24px 22px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .reference-product-card {
        width: 230px !important;
        min-width: 230px !important;
        max-width: 230px !important;
    }
}

/* تابلت */
@media (max-width: 900px) {
    .bottom-dock {
        gap: clamp(90px, 30vw, 220px) !important;
    }

    .reference-products-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 220px)) !important;
        justify-content: center !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .reference-product-card {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
    }
}

/* موبايل */
@media (max-width: 700px) {
    body {
        padding-bottom: calc(74px + env(safe-area-inset-bottom)) !important;
    }

    .bottom-dock {
        height: calc(72px + env(safe-area-inset-bottom)) !important;
        min-height: calc(72px + env(safe-area-inset-bottom)) !important;
        max-height: calc(72px + env(safe-area-inset-bottom)) !important;
        gap: clamp(70px, 24vw, 130px) !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .reference-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        justify-content: stretch !important;
        gap: 16px 12px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-bottom: 96px !important;
    }

    .reference-product-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}


/* ==========================================================
   Phase 15 - Match reference layout more closely
   مقارنة الفيديو: ضبط الاختلاف بين النسختين
   ========================================================== */

/*
المشاكل التي ظهرت في المقارنة:
1) كروت المنتجات تبدأ من اليمين وتترك فراغاً كبيراً.
2) صندوق المنتجات قصير ويظهر المنتج مقطوعاً خلف الشريط السفلي.
3) شريط Cart/WhatsApp يجب أن يبقى ملتصقاً بأسفل الشاشة.
4) شريط Brands عند قلة التصنيفات يجب أن يكون مرتباً ومتمركزاً.
*/

/* منع أي Scroll أفقي نهائياً */
html,
body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

body {
    padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
}

/* أبعاد عامة أقرب للمرجع */
.reference-main-shell,
.brands-panel,
.products-panel,
.reference-header-inner {
    width: min(1320px, calc(100% - 32px)) !important;
    max-width: min(1320px, calc(100% - 32px)) !important;
    box-sizing: border-box !important;
}

/* الشريط السفلي ثابت 100% بأسفل الشاشة */
.bottom-dock {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: calc(76px + env(safe-area-inset-bottom)) !important;
    min-height: calc(76px + env(safe-area-inset-bottom)) !important;
    padding: 0 16px env(safe-area-inset-bottom) !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 2147483000 !important;
    background: rgba(255,255,255,.985) !important;
    border-top: 1px solid #d9e2ec !important;
    box-shadow: 0 -10px 24px rgba(15,23,42,.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(140px, 34vw, 480px) !important;
}

/* صندوق Brands: عند قلة التصنيفات لا تبقى ملتصقة باليمين */
.brands-row {
    direction: ltr !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 122px !important;
    justify-content: end !important; /* مثل المرجع: البطاقات جهة اليمين داخل اللوحة */
    gap: 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100% !important;
}

/* صندوق المنتجات لا يكون قصيراً جداً */
.products-panel {
    height: calc(100vh - var(--reference-header-height) - 255px) !important;
    min-height: 560px !important;
    max-height: calc(100vh - var(--reference-header-height) - 96px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* على الشاشات القصيرة نعطي مساحة كافية للمنتجات */
@media (max-height: 820px) {
    .products-panel {
        height: calc(100vh - var(--reference-header-height) - 220px) !important;
        min-height: 480px !important;
    }

    .brands-panel {
        margin-top: 12px !important;
        margin-bottom: 14px !important;
        padding-bottom: 18px !important;
    }

    .brand-tile {
        height: 132px !important;
    }

    .brand-logo-circle {
        width: 66px !important;
        height: 66px !important;
    }
}

.products-title,
.original-search {
    flex: 0 0 auto !important;
}

/* الحركة داخل مربع الأصناف فقط */
.products-scroll-area {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    direction: ltr !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

/* ترتيب المنتجات مثل المرجع: من اليسار، 4 كروت في الصف */
.reference-products-grid {
    direction: ltr !important;
    display: grid !important;
    grid-template-columns: repeat(4, 245px) !important;
    justify-content: space-between !important;
    align-items: start !important;
    justify-items: stretch !important;
    gap: 28px 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 18px 30px 125px !important;
    overflow: visible !important;
}

/* الكرت حجم ثابت ومرئي بالكامل */
.reference-product-card,
.original-product-card.reference-product-card {
    width: 245px !important;
    min-width: 245px !important;
    max-width: 245px !important;
    height: 455px !important;
    min-height: 455px !important;
    max-height: 455px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    direction: ltr !important;
    padding: 14px 16px 16px !important;
}

/* الصورة لا تقص */
.reference-product-image,
.original-product-image.reference-product-image {
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
    padding: 6px !important;
    overflow: hidden !important;
}

.reference-product-image img {
    max-height: 178px !important;
    object-fit: contain !important;
}

/* الاسم العربي مضبوط */
.reference-product-info h3 {
    direction: rtl !important;
    text-align: right !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

/* البيانات والسعر والأزرار ثابثة */
.reference-meta {
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    margin-bottom: 8px !important;
}

.reference-price-box {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin-bottom: 12px !important;
}

.reference-cart-row {
    margin-top: auto !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    grid-template-columns: 40px 1fr 40px !important;
}

/* إذا كان عدد الأصناف قليل، لا ندفع الكرت لليمين */
.products-scroll-area .reference-products-grid {
    justify-content: start !important;
}

/* إذا صار عدد الأصناف 4 أو أكثر، اتركه موزعاً */
@supports selector(:has(*)) {
    .products-scroll-area .reference-products-grid:has(.reference-product-card:nth-child(4)) {
        justify-content: space-between !important;
    }
}

/* تابلت */
@media (max-width: 1180px) {
    .reference-products-grid {
        grid-template-columns: repeat(3, 235px) !important;
        justify-content: center !important;
        gap: 24px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .reference-product-card,
    .original-product-card.reference-product-card {
        width: 235px !important;
        min-width: 235px !important;
        max-width: 235px !important;
    }
}

/* موبايل */
@media (max-width: 700px) {
    body {
        padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    }

    .bottom-dock {
        height: calc(72px + env(safe-area-inset-bottom)) !important;
        min-height: calc(72px + env(safe-area-inset-bottom)) !important;
        gap: clamp(70px, 24vw, 130px) !important;
        padding-inline: 10px !important;
    }

    .brands-row {
        justify-content: start !important;
    }

    .products-panel {
        height: calc(100vh - var(--reference-header-height) - 210px) !important;
        min-height: 420px !important;
    }

    .reference-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        justify-content: stretch !important;
        gap: 16px 12px !important;
        padding: 12px 12px 105px !important;
    }

    .reference-product-card,
    .original-product-card.reference-product-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 390px !important;
        min-height: 390px !important;
        max-height: 390px !important;
        padding: 12px !important;
    }

    .reference-product-image,
    .original-product-image.reference-product-image {
        height: 150px !important;
        min-height: 150px !important;
        max-height: 150px !important;
    }

    .reference-product-image img {
        max-height: 140px !important;
    }
}


/* ==========================================================
   Phase 16 - Brands stay visible + only products panel scrolls
   تثبيت البراندات وإظهار مربع الأصناف بمحتوى متناسق
   ========================================================== */

/*
المطلوب:
1) عند النزول للأسفل لا تختفي البراندات.
2) التمرير يكون داخل مربع الأصناف فقط.
3) مربع الأصناف يظهر بشكل واضح ومحتوياته متناسقة.
*/

/* أوقف تمرير الصفحة نفسها */
html,
body {
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
}

/* لا نحتاج Padding سفلي كبير لأن الصندوق الداخلي سيأخذ الحساب */
body {
    padding-bottom: 0 !important;
}

/* الهيكل الرئيسي يأخذ الشاشة بين الهيدر والشريط السفلي */
.reference-main-shell,
.original-shell,
.page-shell {
    width: min(1320px, calc(100% - 32px)) !important;
    max-width: min(1320px, calc(100% - 32px)) !important;

    height: calc(100vh - var(--reference-header-height) - 86px) !important;
    min-height: calc(100vh - var(--reference-header-height) - 86px) !important;
    max-height: calc(100vh - var(--reference-header-height) - 86px) !important;

    margin: 12px auto 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* صندوق البراندات يبقى ظاهر دائماً */
.brands-panel {
    flex: 0 0 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* حاوية البراندات نفسها لا تختفي */
.brands-row {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
}

/* صندوق الأصناف يأخذ الباقي من الشاشة */
.products-panel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;

    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;

    border-radius: 14px !important;
    box-shadow: 0 16px 34px rgba(15,23,42,.10) !important;
}

/* العنوان والبحث ثابتان داخل الصندوق */
.products-title {
    flex: 0 0 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    border-bottom: 1px solid #e5eaf1 !important;
    background: #fff !important;
    z-index: 2 !important;
}

.original-search {
    flex: 0 0 auto !important;
    margin: 12px 16px 10px !important;
    background: #fff !important;
    z-index: 2 !important;
}

/* التمرير هنا فقط */
.products-scroll-area {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scroll-behavior: smooth !important;

    padding: 0 !important;
    background: #fff !important;

    scrollbar-width: thin;
    scrollbar-color: rgba(42,161,184,.65) rgba(241,245,249,.9);
}

.products-scroll-area::-webkit-scrollbar {
    width: 10px;
}
.products-scroll-area::-webkit-scrollbar-track {
    background: rgba(241,245,249,.9);
    border-radius: 999px;
}
.products-scroll-area::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2aa1b8, #45bbb4);
    border-radius: 999px;
    border: 2px solid rgba(241,245,249,.9);
}

/* شبكة الأصناف بشكل متناسق وواضح */
.reference-products-grid {
    display: grid !important;
    direction: ltr !important;
    grid-template-columns: repeat(4, 245px) !important;
    justify-content: space-between !important;
    justify-items: stretch !important;
    align-items: start !important;
    align-content: start !important;

    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;

    gap: 24px 22px !important;
    padding: 14px 24px 96px !important;
    overflow: visible !important;
}

/* الكروت متناسقة بالكامل */
.reference-product-card,
.original-product-card.reference-product-card {
    width: 245px !important;
    min-width: 245px !important;
    max-width: 245px !important;

    height: 452px !important;
    min-height: 452px !important;
    max-height: 452px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;

    padding: 14px 14px 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 18px !important;
}

/* الصورة */
.reference-product-image,
.original-product-image.reference-product-image {
    width: 100% !important;
    height: 186px !important;
    min-height: 186px !important;
    max-height: 186px !important;

    margin: 0 0 12px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
}

.reference-product-image img {
    width: 100% !important;
    height: 100% !important;
    max-height: 174px !important;
    object-fit: contain !important;
}

/* المعلومات الداخلية */
.reference-product-info {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

.reference-product-info h3 {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;

    margin: 0 0 8px !important;
    direction: rtl !important;
    text-align: right !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.reference-meta {
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    margin-bottom: 8px !important;
    overflow: hidden !important;
}

.reference-price-box {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin-bottom: 12px !important;
}

.reference-cart-row {
    margin-top: auto !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
}

/* الشريط السفلي يبقى ثابتاً بأسفل أي شاشة */
.bottom-dock {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;

    width: 100% !important;
    max-width: 100% !important;

    height: calc(76px + env(safe-area-inset-bottom)) !important;
    min-height: calc(76px + env(safe-area-inset-bottom)) !important;
    max-height: calc(76px + env(safe-area-inset-bottom)) !important;

    padding: 0 16px env(safe-area-inset-bottom) !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(140px, 34vw, 460px) !important;

    background: rgba(255,255,255,.985) !important;
    border-top: 1px solid #d9e2ec !important;
    box-shadow: 0 -10px 24px rgba(15,23,42,.12) !important;
    z-index: 2147483000 !important;
}

/* تابلت */
@media (max-width: 1180px) {
    .reference-main-shell,
    .original-shell,
    .page-shell {
        width: min(100%, calc(100% - 24px)) !important;
        max-width: min(100%, calc(100% - 24px)) !important;
    }

    .brands-panel {
        flex: 0 0 190px !important;
        min-height: 190px !important;
        max-height: 190px !important;
    }

    .reference-products-grid {
        grid-template-columns: repeat(3, 235px) !important;
        justify-content: center !important;
    }

    .reference-product-card,
    .original-product-card.reference-product-card {
        width: 235px !important;
        min-width: 235px !important;
        max-width: 235px !important;
    }
}

/* موبايل */
@media (max-width: 700px) {
    html,
    body {
        overflow: hidden !important;
    }

    .reference-main-shell,
    .original-shell,
    .page-shell {
        width: min(100%, calc(100% - 14px)) !important;
        max-width: min(100%, calc(100% - 14px)) !important;

        height: calc(100vh - var(--reference-header-height) - 82px) !important;
        min-height: calc(100vh - var(--reference-header-height) - 82px) !important;
        max-height: calc(100vh - var(--reference-header-height) - 82px) !important;

        gap: 10px !important;
        margin-top: 8px !important;
    }

    .brands-panel {
        flex: 0 0 162px !important;
        min-height: 162px !important;
        max-height: 162px !important;
        padding: 12px 12px 16px !important;
    }

    .panel-caption {
        margin-bottom: 8px !important;
    }

    .products-panel {
        border-radius: 12px !important;
    }

    .products-title {
        flex: 0 0 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }

    .original-search {
        margin: 10px 10px 8px !important;
    }

    .reference-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        justify-content: stretch !important;
        gap: 14px 10px !important;
        padding: 10px 10px 92px !important;
    }

    .reference-product-card,
    .original-product-card.reference-product-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 392px !important;
        min-height: 392px !important;
        max-height: 392px !important;

        padding: 12px !important;
        border-radius: 16px !important;
    }

    .reference-product-image,
    .original-product-image.reference-product-image {
        height: 150px !important;
        min-height: 150px !important;
        max-height: 150px !important;
        margin-bottom: 10px !important;
    }

    .reference-product-image img {
        max-height: 140px !important;
    }

    .reference-product-info h3 {
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        font-size: 13px !important;
    }

    .reference-meta {
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
    }

    .reference-price-box {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }

    .bottom-dock {
        height: calc(72px + env(safe-area-inset-bottom)) !important;
        min-height: calc(72px + env(safe-area-inset-bottom)) !important;
        max-height: calc(72px + env(safe-area-inset-bottom)) !important;
        gap: clamp(70px, 24vw, 130px) !important;
        padding-inline: 10px !important;
    }
}


/* ==========================================================
   Phase 17 - Page scroll + large clear products
   المطلوب: لا يوجد Scroll داخلي، النزول يكون بسكرول الصفحة
   ========================================================== */

/*
التعديل النهائي حسب الطلب:
- لا يوجد Scroll داخل مربع الأصناف.
- التمرير يكون بسكرول الصفحة الأساسي.
- عند النزول تنزل الصفحة إلى قسم المنتجات.
- Brands تختفي للأعلى طبيعيًا مع سكرول الصفحة.
- المنتجات تظهر كبيرة وواضحة.
- شريط Cart / WhatsApp يبقى ثابتًا أسفل الشاشة.
*/

/* رجوع التمرير الطبيعي للصفحة */
html,
body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* مساحة للشريط السفلي الثابت */
body {
    padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important;
}

/* الحاوية الرئيسية لا تكون محددة بارتفاع الشاشة */
.reference-main-shell,
.original-shell,
.page-shell {
    width: min(1320px, calc(100% - 32px)) !important;
    max-width: min(1320px, calc(100% - 32px)) !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 14px auto 0 !important;
    display: block !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* Brands تعود جزءًا طبيعيًا من الصفحة وتختفي للأعلى عند النزول */
.brands-panel {
    width: 100% !important;
    height: auto !important;
    min-height: 210px !important;
    max-height: none !important;
    margin: 0 auto 24px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* مربع المنتجات كبير وواضح، وليس داخله Scroll */
.products-panel {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto 28px !important;

    display: block !important;
    overflow: visible !important;
    box-sizing: border-box !important;

    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 16px 34px rgba(15,23,42,.10) !important;
}

/* العنوان والبحث جزء طبيعي من الصفحة */
.products-title {
    height: 54px !important;
    min-height: 54px !important;
    max-height: none !important;
    border-bottom: 1px solid #e5eaf1 !important;
}

.original-search {
    margin: 16px 18px 18px !important;
}

/* إلغاء التمرير الداخلي تمامًا */
.products-scroll-area {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;

    padding: 0 !important;
    background: #fff !important;
}

/* شبكة منتجات كبيرة وواضحة */
.reference-products-grid {
    display: grid !important;
    direction: ltr !important;

    grid-template-columns: repeat(4, 270px) !important;
    justify-content: space-between !important;
    justify-items: stretch !important;
    align-items: start !important;
    align-content: start !important;

    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;

    gap: 34px 26px !important;
    padding: 18px 30px 120px !important;

    overflow: visible !important;
}

/* كروت أكبر وأوضح */
.reference-product-card,
.original-product-card.reference-product-card {
    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;

    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;

    padding: 16px 16px 18px !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;

    background: #fff !important;
    border: 2px solid rgba(42,161,184,.16) !important;
    box-shadow: 0 14px 30px rgba(15,23,42,.08) !important;
}

.reference-product-card:hover,
.original-product-card.reference-product-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    border-color: #2aa1b8 !important;
    box-shadow: 0 24px 42px rgba(15,23,42,.15) !important;
}

/* صورة أكبر */
.reference-product-image,
.original-product-image.reference-product-image {
    width: 100% !important;
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;

    margin: 0 0 14px !important;
    padding: 8px !important;

    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    background: #fff !important;
    border-radius: 16px !important;
}

.reference-product-image img {
    width: 100% !important;
    height: 100% !important;
    max-height: 206px !important;
    object-fit: contain !important;
}

/* اسم المنتج واضح */
.reference-product-info {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 0 !important;
}

.reference-product-info h3 {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;

    margin: 0 0 10px !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    font-weight: 900 !important;

    direction: rtl !important;
    text-align: right !important;

    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

/* بيانات المنتج */
.reference-meta {
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
}

.reference-meta .code-line {
    font-size: 12px !important;
    margin-bottom: 6px !important;
}

/* مربع السعر أوضح */
.reference-price-box {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    margin-bottom: 14px !important;
    padding: 8px 12px !important;
}

.reference-price-box strong {
    font-size: 19px !important;
}

/* أزرار أسفل الكرت */
.reference-cart-row {
    margin-top: auto !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    grid-template-columns: 44px 1fr 44px !important;
    gap: 10px !important;
}

.reference-cart-row .round-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
}

.reference-cart-row .qty-input {
    height: 44px !important;
    min-height: 44px !important;
}

/* الشريط السفلي ثابت دائمًا */
.bottom-dock {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;

    width: 100% !important;
    max-width: 100% !important;

    height: calc(78px + env(safe-area-inset-bottom)) !important;
    min-height: calc(78px + env(safe-area-inset-bottom)) !important;
    max-height: calc(78px + env(safe-area-inset-bottom)) !important;

    padding: 0 16px env(safe-area-inset-bottom) !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(140px, 34vw, 460px) !important;

    background: rgba(255,255,255,.985) !important;
    border-top: 1px solid #d9e2ec !important;
    box-shadow: 0 -10px 24px rgba(15,23,42,.12) !important;
    backdrop-filter: blur(12px) !important;
    z-index: 2147483000 !important;
}

/* تابلت */
@media (max-width: 1240px) {
    .reference-products-grid {
        grid-template-columns: repeat(3, 270px) !important;
        justify-content: center !important;
        gap: 30px 24px !important;
    }
}

@media (max-width: 940px) {
    .reference-products-grid {
        grid-template-columns: repeat(2, 270px) !important;
        justify-content: center !important;
    }
}

/* موبايل */
@media (max-width: 700px) {
    body {
        padding-bottom: calc(74px + env(safe-area-inset-bottom)) !important;
    }

    .reference-main-shell,
    .original-shell,
    .page-shell {
        width: min(100%, calc(100% - 14px)) !important;
        max-width: min(100%, calc(100% - 14px)) !important;
        margin-top: 8px !important;
    }

    .brands-panel {
        min-height: 162px !important;
        margin-bottom: 12px !important;
        padding: 12px 12px 16px !important;
    }

    .reference-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        justify-content: stretch !important;
        gap: 16px 10px !important;
        padding: 12px 10px 100px !important;
    }

    .reference-product-card,
    .original-product-card.reference-product-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 420px !important;
        min-height: 420px !important;
        max-height: 420px !important;

        padding: 12px !important;
        border-radius: 16px !important;
    }

    .reference-product-image,
    .original-product-image.reference-product-image {
        height: 162px !important;
        min-height: 162px !important;
        max-height: 162px !important;
        margin-bottom: 10px !important;
    }

    .reference-product-image img {
        max-height: 150px !important;
    }

    .reference-product-info h3 {
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
        font-size: 13px !important;
    }

    .reference-meta {
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        margin-bottom: 8px !important;
    }

    .reference-price-box {
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        margin-bottom: 10px !important;
    }

    .reference-price-box strong {
        font-size: 16px !important;
    }

    .reference-cart-row {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        grid-template-columns: 38px 1fr 38px !important;
    }

    .reference-cart-row .round-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    .reference-cart-row .qty-input {
        height: 38px !important;
        min-height: 38px !important;
    }

    .bottom-dock {
        height: calc(72px + env(safe-area-inset-bottom)) !important;
        min-height: calc(72px + env(safe-area-inset-bottom)) !important;
        max-height: calc(72px + env(safe-area-inset-bottom)) !important;
        gap: clamp(70px, 24vw, 130px) !important;
        padding-inline: 10px !important;
    }
}


/* ==========================================================
   Phase 18 - Flat reference layout like screenshot 1
   نفس تنسيق الصورة الأولى: بدون كروت كبيرة/حدود، منتجات مسطحة وواضحة
   ========================================================== */

/*
المطلوب الآن:
- نفس تنسيق الصورة الأولى.
- المنتجات تظهر بشكل مسطح داخل مربع المنتجات.
- لا توجد حدود كبيرة حول كل منتج.
- لا يوجد مربع سعر مغلق.
- السعر يظهر نص أزرق مثل المرجع.
- الأزرار أسفل كل منتج.
- سكرول الصفحة طبيعي.
- الشريط السفلي ثابت.
*/

/* الصفحة تستخدم Scroll طبيعي */
html,
body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body {
    padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
}

/* الحاويات طبيعية */
.reference-main-shell,
.original-shell,
.page-shell {
    width: min(1320px, calc(100% - 32px)) !important;
    max-width: min(1320px, calc(100% - 32px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 14px auto 0 !important;
    display: block !important;
    overflow: visible !important;
}

/* Brands مثل الصورة الأولى */
.brands-panel {
    width: 100% !important;
    min-height: 210px !important;
    height: auto !important;
    margin: 0 auto 24px !important;
    padding: 16px 20px 32px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

.brands-row {
    direction: ltr !important;
    justify-content: end !important;
}

/* مربع المنتجات مثل الصورة الأولى */
.products-panel {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto 28px !important;
    display: block !important;
    overflow: visible !important;
    border-radius: 4px 4px 0 0 !important;
    background: #fff !important;
}

/* لا يوجد Scroll داخلي */
.products-scroll-area {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    background: #fff !important;
}

.products-title {
    height: 52px !important;
    min-height: 52px !important;
    border-bottom: 1px solid #e5eaf1 !important;
}

.original-search {
    margin: 16px 16px 22px !important;
    height: 44px !important;
}

/* شبكة مثل الصورة الأولى: 4 أعمدة، فراغات واسعة، بدون حدود */
.reference-products-grid {
    display: grid !important;
    direction: ltr !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    align-items: start !important;
    align-content: start !important;

    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;

    gap: 44px 54px !important;
    padding: 8px 34px 120px !important;

    overflow: visible !important;
}

/* المنتج مسطح مثل المرجع، وليس Card محاط بإطار */
.reference-product-card,
.original-product-card.reference-product-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;

    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;

    transform: none !important;
}

/* تأثير بسيط فقط عند المرور، بدون مربع */
.reference-product-card:hover,
.original-product-card.reference-product-card:hover,
.reference-product-card.is-selected {
    transform: translateY(-4px) !important;
    box-shadow: none !important;
    border: 0 !important;
    outline: 0 !important;
}

/* إلغاء اللمعان والظل الداخلي */
.reference-product-card::before,
.reference-product-card::after,
.original-product-card.reference-product-card::before,
.original-product-card.reference-product-card::after {
    display: none !important;
}

/* صورة المنتج بنفس شكل الصورة الأولى */
.reference-product-image,
.original-product-image.reference-product-image {
    width: 100% !important;
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;

    margin: 0 0 12px !important;
    padding: 0 !important;

    display: grid !important;
    place-items: center !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;

    transform: none !important;
    filter: none !important;
}

.reference-product-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 190px !important;
    object-fit: contain !important;
    padding: 0 !important;
}

.reference-product-card:hover .reference-product-image,
.reference-product-card:hover .reference-product-image img {
    transform: scale(1.025) !important;
    filter: none !important;
}

/* محتوى المنتج */
.reference-product-info {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    transform: none !important;
}

.reference-product-info h3 {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    margin: 0 0 9px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    color: #2f343b !important;

    direction: ltr !important;
    text-align: left !important;

    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

/* البيانات مثل الصورة الأولى */
.reference-meta {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 0 0 8px !important;
    overflow: hidden !important;
}

.reference-meta .code-line {
    margin: 0 0 6px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    color: #8b95a3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* السعر بدون مربع، مثل الصورة الأولى */
.reference-price-box {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    margin: 0 0 14px !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.reference-price-box span {
    display: none !important;
}

.reference-price-box strong {
    color: #2399b6 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    text-align: left !important;
    line-height: 1 !important;
}

.reference-price-box small {
    display: inline !important;
    color: #2399b6 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

/* الأزرار أسفل مثل الصورة الأولى */
.reference-cart-row {
    margin-top: auto !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    display: grid !important;
    grid-template-columns: 38px 58px 38px !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: start !important;
}

.reference-cart-row .round-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 50% !important;
    background: #2399b6 !important;
    color: #fff !important;
    border: 0 !important;
    font-size: 18px !important;
    box-shadow: none !important;
}

.reference-cart-row .qty-input {
    width: 58px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 7px !important;
    border: 2px solid #2399b6 !important;
    background: #fff !important;
    color: #111827 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    box-shadow: none !important;
}

/* الشريط السفلي ثابت في الأسفل */
.bottom-dock {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;

    width: 100% !important;
    max-width: 100% !important;

    height: calc(76px + env(safe-area-inset-bottom)) !important;
    min-height: calc(76px + env(safe-area-inset-bottom)) !important;

    padding: 0 16px env(safe-area-inset-bottom) !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(140px, 34vw, 460px) !important;

    background: rgba(255,255,255,.985) !important;
    border-top: 1px solid #d9e2ec !important;
    box-shadow: 0 -10px 24px rgba(15,23,42,.12) !important;
    z-index: 2147483000 !important;
}

/* تابلت */
@media (max-width: 1100px) {
    .reference-products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 38px 34px !important;
        padding-left: 26px !important;
        padding-right: 26px !important;
    }
}

/* موبايل */
@media (max-width: 700px) {
    body {
        padding-bottom: calc(74px + env(safe-area-inset-bottom)) !important;
    }

    .reference-main-shell,
    .original-shell,
    .page-shell {
        width: min(100%, calc(100% - 14px)) !important;
        max-width: min(100%, calc(100% - 14px)) !important;
        margin-top: 8px !important;
    }

    .brands-panel {
        min-height: 162px !important;
        margin-bottom: 12px !important;
        padding: 12px 12px 16px !important;
    }

    .reference-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 30px 18px !important;
        padding: 10px 16px 100px !important;
    }

    .reference-product-card,
    .original-product-card.reference-product-card {
        height: 330px !important;
        min-height: 330px !important;
        max-height: 330px !important;
    }

    .reference-product-image,
    .original-product-image.reference-product-image {
        height: 140px !important;
        min-height: 140px !important;
        max-height: 140px !important;
        margin-bottom: 10px !important;
    }

    .reference-product-image img {
        max-height: 138px !important;
    }

    .reference-product-info h3 {
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        font-size: 13px !important;
    }

    .reference-meta {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }

    .reference-price-box {
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        margin-bottom: 10px !important;
    }

    .reference-price-box strong,
    .reference-price-box small {
        font-size: 16px !important;
    }

    .reference-cart-row {
        grid-template-columns: 34px 52px 34px !important;
        gap: 7px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
    }

    .reference-cart-row .round-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
    }

    .reference-cart-row .qty-input {
        width: 52px !important;
        height: 34px !important;
        min-height: 34px !important;
    }

    .bottom-dock {
        height: calc(72px + env(safe-area-inset-bottom)) !important;
        min-height: calc(72px + env(safe-area-inset-bottom)) !important;
        gap: clamp(70px, 24vw, 130px) !important;
        padding-inline: 10px !important;
    }
}


/* ==========================================================
   Phase 19 - Bottom dock attached to browser bottom
   تثبيت شريط السلة والواتساب في أسفل شاشة المتصفح
   وجعل مربع المنتجات يلتصق به بصرياً مثل المرجع
   ========================================================== */

:root {
    --browser-bottom-dock-height: 78px;
    --header-fixed-height: var(--reference-header-height, 64px);
}

/* الصفحة تسكرول طبيعيًا، لكن تترك مساحة دقيقة للشريط الثابت */
html,
body {
    width: 100% !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body {
    margin: 0 !important;
    padding-bottom: calc(var(--browser-bottom-dock-height) + env(safe-area-inset-bottom)) !important;
}

/* الشريط ثابت في أسفل شاشة المتصفح نفسها */
.bottom-dock {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: calc(var(--browser-bottom-dock-height) + env(safe-area-inset-bottom)) !important;
    min-height: calc(var(--browser-bottom-dock-height) + env(safe-area-inset-bottom)) !important;
    max-height: calc(var(--browser-bottom-dock-height) + env(safe-area-inset-bottom)) !important;

    margin: 0 !important;
    padding: 0 16px env(safe-area-inset-bottom) !important;
    transform: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(140px, 34vw, 470px) !important;

    background: rgba(255, 255, 255, 0.985) !important;
    border-top: 1px solid #d9e2ec !important;
    box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.12) !important;
    backdrop-filter: blur(12px) !important;

    z-index: 2147483000 !important;
    box-sizing: border-box !important;
}

/* عناصر الشريط في المنتصف تماماً */
.bottom-dock .dock-item {
    height: 100% !important;
    min-width: 92px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 3px !important;
    position: relative !important;
}

.bottom-dock .dock-circle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
}

/* جعل مربع المنتجات يبدو ملتصقاً بالشريط السفلي عند النزول إليه */
.products-panel {
    margin-bottom: 0 !important;
    border-radius: 4px 4px 0 0 !important;
    overflow: visible !important;

    /*
      إذا كان عدد الأصناف قليلاً، يمتد مربع المنتجات لأسفل
      حتى لا يظهر فراغ بينه وبين شريط Cart/WhatsApp.
    */
    min-height: calc(
        100vh
        - var(--header-fixed-height)
        - var(--browser-bottom-dock-height)
        - 24px
    ) !important;
}

/* عند وجود Brands فوقه، تبقى طبيعية، لكن المنتجات نفسها تلتحم بصرياً بالشريط */
.products-scroll-area {
    overflow: visible !important;
    padding-bottom: 0 !important;
}

/* آخر جزء من شبكة المنتجات لا يختفي تحت الشريط */
.reference-products-grid {
    padding-bottom: calc(var(--browser-bottom-dock-height) + 34px) !important;
}

/* لا تجعل الحاويات تولّد فراغاً أسفل مربع المنتجات */
.reference-main-shell,
.original-shell,
.page-shell {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* في حالة الصفحة القصيرة: ادفع أسفل المنتجات حتى يلامس أعلى الشريط */
@media (min-height: 760px) {
    .products-panel {
        min-height: calc(
            100vh
            - var(--header-fixed-height)
            - var(--browser-bottom-dock-height)
            - 18px
        ) !important;
    }
}

/* تابلت */
@media (max-width: 900px) {
    .bottom-dock {
        gap: clamp(90px, 28vw, 230px) !important;
    }
}

/* موبايل */
@media (max-width: 700px) {
    :root {
        --browser-bottom-dock-height: 72px;
    }

    body {
        padding-bottom: calc(var(--browser-bottom-dock-height) + env(safe-area-inset-bottom)) !important;
    }

    .bottom-dock {
        height: calc(var(--browser-bottom-dock-height) + env(safe-area-inset-bottom)) !important;
        min-height: calc(var(--browser-bottom-dock-height) + env(safe-area-inset-bottom)) !important;
        max-height: calc(var(--browser-bottom-dock-height) + env(safe-area-inset-bottom)) !important;

        gap: clamp(70px, 24vw, 140px) !important;
        padding-inline: 10px !important;
    }

    .bottom-dock .dock-item {
        min-width: 74px !important;
        font-size: 11px !important;
    }

    .bottom-dock .dock-circle {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    .products-panel {
        min-height: calc(
            100vh
            - var(--header-fixed-height)
            - var(--browser-bottom-dock-height)
            - 12px
        ) !important;
    }

    .reference-products-grid {
        padding-bottom: calc(var(--browser-bottom-dock-height) + 28px) !important;
    }
}


/* ==========================================================
   Phase 20 - FINAL fixed bottom bar
   المطلوب النهائي:
   شريط واتساب/سلة ثابت في أسفل شاشة المتصفح، لا يتحرك مع الصفحة
   ========================================================== */

:root {
    --final-bottom-bar-height: 78px;
}

/* الصفحة تتحرك طبيعي، لكن الشريط لا يتحرك */
html,
body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    min-height: 100% !important;
}

body {
    margin: 0 !important;
    padding-bottom: calc(var(--final-bottom-bar-height) + env(safe-area-inset-bottom) + 8px) !important;
}

/* لا نربط المنتجات بالشريط، الشريط مستقل وثابت */
.products-panel {
    min-height: auto !important;
    margin-bottom: 26px !important;
}

/* مساحة أسفل المنتجات حتى لا يغطيها الشريط الثابت */
.reference-products-grid {
    padding-bottom: calc(var(--final-bottom-bar-height) + 50px) !important;
}

/* تثبيت نهائي للشريط في أسفل شاشة المتصفح */
.bottom-dock {
    position: fixed !important;
    inset: auto 0 0 0 !important;

    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    height: calc(var(--final-bottom-bar-height) + env(safe-area-inset-bottom)) !important;
    min-height: calc(var(--final-bottom-bar-height) + env(safe-area-inset-bottom)) !important;
    max-height: calc(var(--final-bottom-bar-height) + env(safe-area-inset-bottom)) !important;

    margin: 0 !important;
    padding: 0 16px env(safe-area-inset-bottom) !important;

    transform: none !important;
    translate: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(140px, 34vw, 480px) !important;

    background: rgba(255, 255, 255, 0.99) !important;
    border-top: 1px solid #d9e2ec !important;
    box-shadow: 0 -10px 24px rgba(15, 23, 42, .12) !important;
    backdrop-filter: blur(12px) !important;

    z-index: 2147483647 !important;
    box-sizing: border-box !important;
}

/* عناصر الشريط ثابتة ومرتبة */
.bottom-dock .dock-item {
    position: relative !important;
    height: 100% !important;
    min-width: 92px !important;

    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 4px !important;

    text-decoration: none !important;
    color: #7f8796 !important;
}

.bottom-dock .dock-circle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;

    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    background: #f4f7fb !important;
}

/* عداد السلة */
.bottom-dock .cart-count-link b {
    position: absolute !important;
    top: 7px !important;
    right: 16px !important;
    min-width: 19px !important;
    height: 19px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    background: #ffc107 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    display: grid !important;
    place-items: center !important;
}

/* الموبايل */
@media (max-width: 700px) {
    :root {
        --final-bottom-bar-height: 72px;
    }

    body {
        padding-bottom: calc(var(--final-bottom-bar-height) + env(safe-area-inset-bottom) + 8px) !important;
    }

    .bottom-dock {
        height: calc(var(--final-bottom-bar-height) + env(safe-area-inset-bottom)) !important;
        min-height: calc(var(--final-bottom-bar-height) + env(safe-area-inset-bottom)) !important;
        max-height: calc(var(--final-bottom-bar-height) + env(safe-area-inset-bottom)) !important;

        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: clamp(70px, 24vw, 135px) !important;
    }

    .bottom-dock .dock-item {
        min-width: 74px !important;
        font-size: 11px !important;
    }

    .bottom-dock .dock-circle {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    .reference-products-grid {
        padding-bottom: calc(var(--final-bottom-bar-height) + 34px) !important;
    }
}


/* ==========================================================
   Phase 21 - REAL viewport bottom dock
   إصلاح نهائي للمسافة أسفل الشريط:
   تم نقل شريط Cart/WhatsApp خارج main إلى _Layout حتى لا يتأثر
   بأي transform / perspective في الحاويات.
   ========================================================== */

:root {
    --real-dock-height: 78px;
}

/* لا يوجد فراغ مرئي تحت الشريط؛ فقط مساحة داخلية للمحتوى حتى لا يختفي خلف الشريط */
html,
body {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body {
    padding-bottom: calc(var(--real-dock-height) + env(safe-area-inset-bottom)) !important;
}

/* الشريط الآن direct child داخل body، لذلك bottom:0 يعني أسفل شاشة المتصفح فعلاً */
#GlobalBottomDock,
.bottom-dock {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: calc(var(--real-dock-height) + env(safe-area-inset-bottom)) !important;
    min-height: calc(var(--real-dock-height) + env(safe-area-inset-bottom)) !important;
    max-height: calc(var(--real-dock-height) + env(safe-area-inset-bottom)) !important;

    margin: 0 !important;
    padding: 0 16px env(safe-area-inset-bottom) !important;

    transform: none !important;
    translate: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(140px, 34vw, 480px) !important;

    background: #ffffff !important;
    border-top: 1px solid #d9e2ec !important;
    box-shadow: 0 -10px 24px rgba(15, 23, 42, .12) !important;
    backdrop-filter: blur(12px) !important;

    z-index: 2147483647 !important;
    box-sizing: border-box !important;
}

/* مهم: لا نترك أي bottom/margin أو transform من مراحل سابقة */
#GlobalBottomDock * {
    box-sizing: border-box !important;
}

#GlobalBottomDock .dock-item,
.bottom-dock .dock-item {
    position: relative !important;
    height: 100% !important;
    min-width: 92px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 4px !important;
    text-decoration: none !important;
    color: #7f8796 !important;
}

#GlobalBottomDock .dock-circle,
.bottom-dock .dock-circle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    background: #f4f7fb !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 6px 14px rgba(15,23,42,.08) !important;
}

#GlobalBottomDock .cart-count-link b,
.bottom-dock .cart-count-link b {
    position: absolute !important;
    top: 7px !important;
    right: 16px !important;
    min-width: 19px !important;
    height: 19px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    background: #ffc107 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    display: grid !important;
    place-items: center !important;
}

/* مساحة كافية لآخر صف منتجات بدون خلق فراغ مرئي أسفل الشريط */
.reference-products-grid {
    padding-bottom: calc(var(--real-dock-height) + 44px) !important;
}

/* الموبايل */
@media (max-width: 700px) {
    :root {
        --real-dock-height: 72px;
    }

    body {
        padding-bottom: calc(var(--real-dock-height) + env(safe-area-inset-bottom)) !important;
    }

    #GlobalBottomDock,
    .bottom-dock {
        height: calc(var(--real-dock-height) + env(safe-area-inset-bottom)) !important;
        min-height: calc(var(--real-dock-height) + env(safe-area-inset-bottom)) !important;
        max-height: calc(var(--real-dock-height) + env(safe-area-inset-bottom)) !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: clamp(70px, 24vw, 135px) !important;
    }

    #GlobalBottomDock .dock-item,
    .bottom-dock .dock-item {
        min-width: 74px !important;
        font-size: 11px !important;
    }

    #GlobalBottomDock .dock-circle,
    .bottom-dock .dock-circle {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    .reference-products-grid {
        padding-bottom: calc(var(--real-dock-height) + 32px) !important;
    }
}


/* ==========================================================
   Phase 22 - Product plus button + live quantity
   زر + بجانب المنتج يزيد السلة ويحدث الرقم فوراً
   ========================================================== */

.product-plus-btn {
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.product-minus-btn {
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.product-qty-display,
.product-qty-display:disabled {
    opacity: 1 !important;
    cursor: default !important;
    pointer-events: none !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    background: #fff !important;
    font-weight: 900 !important;
}

.reference-cart-row .product-plus-btn:hover,
.reference-cart-row .product-minus-btn:hover {
    transform: translateY(-2px) scale(1.04) !important;
}


/* ==========================================================
   Phase 23 - Toast / Error above bottom bar
   جعل رسائل الخطأ والتنبيه تظهر فوق شريط السلة والواتساب
   ========================================================== */

:root {
    --toast-bottom-offset: calc(var(--real-dock-height, var(--final-bottom-bar-height, 78px)) + env(safe-area-inset-bottom) + 18px);
}

/* جميع رسائل الخطأ والتنبيه تظهر فوق الشريط السفلي */
.toast,
.toast-error,
.toast.toast-error,
.admin-success.toast,
.validation-toast {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: var(--toast-bottom-offset) !important;
    top: auto !important;

    transform: translateX(-50%) !important;

    z-index: 2147483647 !important;

    max-width: min(520px, calc(100% - 28px)) !important;
    min-height: 44px !important;

    display: grid !important;
    place-items: center !important;

    padding: 11px 18px !important;
    border-radius: 12px !important;

    background: #111827 !important;
    color: #fff !important;

    font-weight: 900 !important;
    font-size: 14px !important;
    text-align: center !important;
    line-height: 1.45 !important;

    box-shadow: 0 18px 38px rgba(15, 23, 42, .22) !important;
    pointer-events: none !important;
}

/* شكل الخطأ */
.toast-error,
.toast.toast-error {
    background: #dc2626 !important;
    color: #fff !important;
}

/* شكل النجاح إن استخدم كـ Toast */
.toast-success,
.toast.toast-success {
    background: #059669 !important;
    color: #fff !important;
}

/* موبايل */
@media (max-width: 700px) {
    :root {
        --toast-bottom-offset: calc(var(--real-dock-height, var(--final-bottom-bar-height, 72px)) + env(safe-area-inset-bottom) + 12px);
    }

    .toast,
    .toast-error,
    .toast.toast-error,
    .admin-success.toast,
    .validation-toast {
        max-width: calc(100% - 20px) !important;
        font-size: 13px !important;
        padding: 10px 14px !important;
    }
}


/* ==========================================================
   Phase 24 - Qaisar Shopping brand theme
   ========================================================== */
:root {
    --qaisar-black: #0a0a0a;
    --qaisar-black-2: #151515;
    --qaisar-white: #ffffff;
    --qaisar-green: #58b44b;
    --qaisar-yellow: #efbe1b;
    --qaisar-text: #1f2937;
    --qaisar-muted: #6b7280;
}

html,
body {
    background:
        radial-gradient(circle at top right, rgba(239,190,27,.14), transparent 26%),
        radial-gradient(circle at top left, rgba(88,180,75,.14), transparent 28%),
        linear-gradient(180deg, #0a0a0a 0%, #121212 22%, #181818 100%) !important;
    color: var(--qaisar-white) !important;
}

.topbar,
.site-header,
header,
.page-header {
    background: linear-gradient(90deg, #050505 0%, #121212 40%, #0d0d0d 100%) !important;
    border-bottom: 3px solid var(--qaisar-green) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.28) !important;
}

.brand,
.site-brand,
.navbar-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
}

.brand-logo-image {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    border: 2px solid rgba(239,190,27,.45) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.35) !important;
    background: #000 !important;
}

.brand-name {
    color: var(--qaisar-white) !important;
    font-weight: 900 !important;
    font-size: 28px !important;
}

header a,
.topbar a {
    color: #f8fafc !important;
}
header a:hover,
.topbar a:hover {
    color: var(--qaisar-yellow) !important;
}

.brands-panel,
.products-panel,
.checkout-shell,
.auth-card,
.admin-card {
    background: #ffffff !important;
    color: var(--qaisar-text) !important;
    border: 1px solid rgba(88,180,75,.18) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.18) !important;
}

.products-title {
    color: #151515 !important;
    position: relative !important;
    border-bottom: 2px solid rgba(88,180,75,.22) !important;
}
.products-title::after {
    content: "" !important;
    position: absolute !important;
    right: 18px !important;
    left: 18px !important;
    bottom: -2px !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--qaisar-green), var(--qaisar-yellow)) !important;
    border-radius: 999px !important;
}

.btn-primary,
button[type="submit"],
.product-plus-btn,
.reference-cart-row .round-btn,
.search-btn {
    background: linear-gradient(135deg, var(--qaisar-green), #4ba63f) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 10px 20px rgba(88,180,75,.28) !important;
}
.btn-primary:hover,
button[type="submit"]:hover,
.product-plus-btn:hover,
.reference-cart-row .round-btn:hover,
.search-btn:hover {
    background: linear-gradient(135deg, #4aa83f, var(--qaisar-yellow)) !important;
    transform: translateY(-2px) !important;
}

.product-minus-btn {
    background: linear-gradient(135deg, #1f1f1f, #353535) !important;
    color: #fff !important;
    box-shadow: 0 10px 20px rgba(0,0,0,.18) !important;
}
.product-minus-btn:hover {
    background: linear-gradient(135deg, #2a2a2a, #4a4a4a) !important;
}

.original-search,
.search-box,
.search-form {
    background: #fff !important;
    border: 1px solid rgba(88,180,75,.26) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.08) !important;
}
.original-search input::placeholder,
.search-box input::placeholder,
.search-form input::placeholder {
    color: #9ca3af !important;
}

.reference-product-info h3 {
    color: #161616 !important;
    font-weight: 900 !important;
}
.reference-meta,
.reference-meta .code-line {
    color: var(--qaisar-muted) !important;
}
.reference-price-box strong,
.reference-price-box small {
    color: var(--qaisar-green) !important;
    font-weight: 900 !important;
}
.product-qty-display,
.product-qty-display:disabled,
.reference-cart-row .qty-input {
    border: 2px solid rgba(88,180,75,.9) !important;
    color: #111827 !important;
    background: #fff !important;
}

.brand-chip.is-active,
.brand-chip.active,
.brands-row .active {
    background: linear-gradient(135deg, var(--qaisar-yellow), #e9b010) !important;
    color: #111 !important;
    border-color: transparent !important;
    box-shadow: 0 14px 24px rgba(239,190,27,.28) !important;
}

#GlobalBottomDock,
.bottom-dock {
    background: linear-gradient(90deg, #ffffff 0%, #fffef9 50%, #ffffff 100%) !important;
    border-top: 3px solid var(--qaisar-green) !important;
    box-shadow: 0 -12px 28px rgba(0,0,0,.16) !important;
}
#GlobalBottomDock .dock-circle,
.bottom-dock .dock-circle {
    background: linear-gradient(135deg, rgba(88,180,75,.16), rgba(239,190,27,.18)) !important;
    border: 1px solid rgba(88,180,75,.24) !important;
}
#GlobalBottomDock .dock-item,
.bottom-dock .dock-item {
    color: #374151 !important;
    font-weight: 800 !important;
}
#GlobalBottomDock .cart-count-link b,
.bottom-dock .cart-count-link b {
    background: var(--qaisar-yellow) !important;
    color: #111 !important;
    box-shadow: 0 6px 14px rgba(239,190,27,.35) !important;
}

.toast,
.toast-error,
.toast.toast-error {
    background: linear-gradient(135deg, #111, #222) !important;
    border: 1px solid rgba(239,190,27,.28) !important;
}

a {
    color: var(--qaisar-green) !important;
}
a:hover {
    color: var(--qaisar-yellow) !important;
}

@media (max-width: 700px) {
    .brand-logo-image {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        border-radius: 12px !important;
    }
    .brand-name {
        font-size: 22px !important;
    }
}


/* ==========================================================
   Phase 25 - Green-only Qaisar theme
   المطلوب:
   - تغيير اللون الأزرق إلى أخضر
   - تغيير اللون الأسود إلى أخضر
   - الإبقاء على الأبيض والأصفر كلون مساعد
   ========================================================== */

:root {
    --qaisar-main-green: #168a3a;
    --qaisar-main-green-dark: #0f6f2d;
    --qaisar-main-green-deep: #0a5522;
    --qaisar-main-green-light: #58b44b;
    --qaisar-yellow: #efbe1b;
    --qaisar-white: #ffffff;
}

/* تحويل الخلفية السوداء إلى خضراء */
html,
body {
    background:
        radial-gradient(circle at top right, rgba(239,190,27,.18), transparent 25%),
        radial-gradient(circle at top left, rgba(255,255,255,.12), transparent 28%),
        linear-gradient(180deg, var(--qaisar-main-green-dark) 0%, var(--qaisar-main-green) 45%, var(--qaisar-main-green-deep) 100%) !important;
    color: var(--qaisar-white) !important;
}

/* الهيدر بدل الأسود/الأزرق يصبح أخضر */
.topbar,
.site-header,
header,
.page-header,
.reference-top-header {
    background: linear-gradient(90deg, var(--qaisar-main-green-deep), var(--qaisar-main-green), var(--qaisar-main-green-dark)) !important;
    border-bottom: 3px solid var(--qaisar-yellow) !important;
    box-shadow: 0 10px 22px rgba(10, 85, 34, .32) !important;
}

/* استبدال كل درجات الأزرق/التركواز المستخدمة سابقاً بالأخضر */
.products-title::after,
.panel-caption::after {
    background: linear-gradient(90deg, var(--qaisar-main-green-light), var(--qaisar-yellow)) !important;
}

/* أزرار البحث والإضافة */
.btn-primary,
.primary-btn,
button[type="submit"],
.product-plus-btn,
.reference-cart-row .round-btn,
.search-btn,
.original-search button,
.add-product-btn {
    background: linear-gradient(135deg, var(--qaisar-main-green), var(--qaisar-main-green-light)) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 10px 20px rgba(22, 138, 58, .28) !important;
}

.btn-primary:hover,
.primary-btn:hover,
button[type="submit"]:hover,
.product-plus-btn:hover,
.reference-cart-row .round-btn:hover,
.search-btn:hover,
.original-search button:hover,
.add-product-btn:hover {
    background: linear-gradient(135deg, var(--qaisar-main-green-dark), var(--qaisar-yellow)) !important;
    color: #fff !important;
}

/* زر الناقص بدل الأسود يصبح أخضر غامق */
.product-minus-btn {
    background: linear-gradient(135deg, var(--qaisar-main-green-deep), var(--qaisar-main-green-dark)) !important;
    color: #fff !important;
    box-shadow: 0 10px 20px rgba(10, 85, 34, .22) !important;
}

.product-minus-btn:hover {
    background: linear-gradient(135deg, var(--qaisar-main-green-dark), var(--qaisar-main-green-light)) !important;
}

/* السعر والنصوص التي كانت زرقاء تصبح خضراء */
.reference-price-box strong,
.reference-price-box small,
.price,
.product-price,
a {
    color: var(--qaisar-main-green) !important;
}

a:hover {
    color: var(--qaisar-yellow) !important;
}

/* حدود الحقول والكميات */
.product-qty-display,
.product-qty-display:disabled,
.reference-cart-row .qty-input,
.original-search,
.search-box,
.search-form,
input:focus,
select:focus,
textarea:focus {
    border-color: rgba(22, 138, 58, .82) !important;
    box-shadow: 0 0 0 3px rgba(22, 138, 58, .10) !important;
}

/* كروت البراند التي كانت تركواز/زرقاء تصبح خضراء */
.brand-tile,
.brand-card,
.brand-chip,
.brands-row > * {
    background: linear-gradient(135deg, var(--qaisar-main-green), var(--qaisar-main-green-light)) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.18) !important;
}

.brand-tile.active,
.brand-card.active,
.brand-chip.active,
.brands-row .active {
    background: linear-gradient(135deg, var(--qaisar-yellow), #f8d94a) !important;
    color: #17360f !important;
}

/* أيقونات البراند */
.brand-logo-circle,
.brand-circle {
    color: var(--qaisar-main-green) !important;
    background: #fff !important;
}

/* الشريط السفلي */
#GlobalBottomDock,
.bottom-dock {
    background: linear-gradient(90deg, #ffffff 0%, #f8fff6 50%, #ffffff 100%) !important;
    border-top: 3px solid var(--qaisar-main-green) !important;
    box-shadow: 0 -12px 28px rgba(10,85,34,.16) !important;
}

#GlobalBottomDock .dock-circle,
.bottom-dock .dock-circle {
    background: linear-gradient(135deg, rgba(22,138,58,.16), rgba(239,190,27,.18)) !important;
    border: 1px solid rgba(22,138,58,.30) !important;
}

#GlobalBottomDock .dock-item,
.bottom-dock .dock-item {
    color: var(--qaisar-main-green-deep) !important;
}

/* عداد السلة */
#GlobalBottomDock .cart-count-link b,
.bottom-dock .cart-count-link b {
    background: var(--qaisar-yellow) !important;
    color: var(--qaisar-main-green-deep) !important;
}

/* رسائل التنبيه بدل الأسود تصبح أخضر غامق */
.toast,
.toast-error,
.toast.toast-error {
    background: linear-gradient(135deg, var(--qaisar-main-green-deep), var(--qaisar-main-green-dark)) !important;
    color: #fff !important;
    border: 1px solid rgba(239,190,27,.35) !important;
}

/* لوحة الدخول والإدارة */
.admin-login-modal h2,
.admin-card h1,
.admin-card h2,
.admin-card h3 {
    color: var(--qaisar-main-green-deep) !important;
}

.admin-login-modal button,
.primary-admin-btn {
    background: linear-gradient(135deg, var(--qaisar-main-green), var(--qaisar-main-green-light)) !important;
    color: #fff !important;
    border: 0 !important;
}

/* استبدال أي ظلال/حدود زرقاء متبقية */
.reference-product-card:hover,
.original-product-card.reference-product-card:hover {
    border-color: var(--qaisar-main-green) !important;
}

.reference-product-card.is-selected,
.mobile-product-card.is-selected,
.original-product-card.is-selected {
    outline-color: rgba(22, 138, 58, .42) !important;
    border-color: var(--qaisar-main-green) !important;
}

/* إلغاء أي ألوان أزرق/تركواز مشهورة باقية من المراحل السابقة */
[style*="#2399b6"],
[style*="#2aa1b8"],
[style*="#259db3"],
[style*="#29a4ba"],
[style*="#45bbb4"] {
    color: var(--qaisar-main-green) !important;
}


/* ==========================================================
   Phase 26 - Checkout / Cart text visibility fix
   إصلاح اختفاء الكتابة في صفحة السلة / الطلب
   السبب: بعد تغيير الخلفية والألوان العامة أصبح بعض النص أبيض فوق كرت أبيض.
   ========================================================== */

.checkout-shell,
.checkout-card,
.checkout-panel,
.checkout-form,
.cart-card,
.cart-items,
.cart-line,
.order-summary,
.customer-form,
.delivery-form,
.form-panel,
form {
    color: #1f2937 !important;
}

/* كل النصوص داخل صفحة السلة والطلب تظهر بلون واضح */
.checkout-shell *,
.checkout-card *,
.checkout-panel *,
.cart-card *,
.cart-items *,
.cart-line *,
.order-summary *,
.customer-form *,
.delivery-form *,
.form-panel * {
    color: inherit;
}

/* عناوين الأصناف داخل السلة */
.cart-line h1,
.cart-line h2,
.cart-line h3,
.cart-line h4,
.cart-line strong,
.checkout-card h1,
.checkout-card h2,
.checkout-card h3,
.checkout-card h4,
.order-summary h1,
.order-summary h2,
.order-summary h3 {
    color: #111827 !important;
    font-weight: 900 !important;
}

/* النصوص الثانوية */
.cart-line p,
.cart-line small,
.checkout-card p,
.checkout-card small,
.order-summary p,
.order-summary small,
.form-hint,
.admin-hint {
    color: #6b7280 !important;
}

/* الحقول في السلة والطلب */
.checkout-shell input,
.checkout-shell select,
.checkout-shell textarea,
.checkout-card input,
.checkout-card select,
.checkout-card textarea,
.checkout-panel input,
.checkout-panel select,
.checkout-panel textarea,
.customer-form input,
.customer-form select,
.customer-form textarea,
.delivery-form input,
.delivery-form select,
.delivery-form textarea {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    background: #ffffff !important;
    border: 1px solid #d8e0e8 !important;
}

.checkout-shell input::placeholder,
.checkout-shell textarea::placeholder,
.checkout-card input::placeholder,
.checkout-card textarea::placeholder,
.checkout-panel input::placeholder,
.checkout-panel textarea::placeholder {
    color: #6b7280 !important;
    opacity: 1 !important;
}

/* قوائم الاختيار */
.checkout-shell option,
.checkout-card option,
.checkout-panel option {
    color: #111827 !important;
    background: #ffffff !important;
}

/* زر تحديد الموقع */
#detectLocation,
.detect-location,
.location-button {
    color: #0f6f2d !important;
    background: #eef8ee !important;
    border: 1px solid rgba(22, 138, 58, .22) !important;
}

/* كروت السلة الداخلية */
.cart-line {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
}

/* السعر والإجمالي */
#cartTotal,
.cart-total,
.total-value,
.summary-total,
.order-total {
    color: #168a3a !important;
    font-weight: 900 !important;
}

/* أزرار + و - داخل السلة */
.qty-tools button,
.cart-line button,
.checkout-card .qty-tools button {
    color: #ffffff !important;
    background: #168a3a !important;
    border: 0 !important;
}

.qty-tools span,
.cart-line .qty-tools span {
    color: #111827 !important;
    font-weight: 900 !important;
}

/* الصور لا تطمس النص */
.cart-line img {
    background: #ffffff !important;
    border-radius: 10px !important;
}

/* إصلاح خاص لأي نص ورث الأبيض من body */
.checkout-shell label,
.checkout-card label,
.checkout-panel label,
.customer-form label,
.delivery-form label {
    color: #374151 !important;
    font-weight: 800 !important;
}

/* على الموبايل */
@media (max-width: 700px) {
    .checkout-shell,
    .checkout-card,
    .checkout-panel,
    .cart-card {
        color: #1f2937 !important;
    }
}


/* Phase 30 - Standalone Excel import */
.import-summary-box {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    background: #f2fff1;
    border: 1px solid rgba(22, 138, 58, .18);
    border-radius: 18px;
    padding: 14px;
    margin: 16px 0;
    color: #0a5522;
    font-weight: 900;
}
.import-summary-box > div {
    background: #fff;
    border-radius: 14px;
    padding: 10px 14px;
    box-shadow: 0 8px 16px rgba(10,85,34,.08);
}
.big-summary > div { min-width: 145px; text-align: center; }
.import-row-error { background: #fff5f5 !important; }
.import-errors { margin: 6px 0 0; padding-right: 18px; color: #b91c1c; font-size: 12px; }
.import-upload-form { margin-top: 16px; }
.admin-error {
    background: #fff5f5;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 14px;
    padding: 12px 14px;
    margin: 12px 0;
    font-weight: 800;
}

/* ==========================================================
   Phase 31 - Delivery areas and delivery fee management
   ========================================================== */
.delivery-note-box {
    margin: 12px 0 16px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f1fff0;
    border: 1px solid rgba(22, 138, 58, .22);
    color: #0a5522 !important;
    font-weight: 800;
    line-height: 1.7;
}

.delivery-note-box strong,
.delivery-note-box span {
    color: #0a5522 !important;
}

.checkout-totals-box {
    margin-top: 16px;
    border: 1px solid rgba(22, 138, 58, .18);
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(10, 85, 34, .08);
}

.checkout-totals-box > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 13px 16px;
    border-bottom: 1px solid #edf2ed;
    color: #1f2937 !important;
    font-weight: 900;
}

.checkout-totals-box > div:last-child {
    border-bottom: 0;
}

.checkout-totals-box strong {
    color: #168a3a !important;
    font-size: 20px;
}

.checkout-totals-box .grand-total-row {
    background: linear-gradient(90deg, #f2fff1, #ffffff);
    color: #0a5522 !important;
    font-size: 19px;
}

.checkout-card textarea,
.admin-form-card textarea {
    width: 100%;
    border: 1px solid #d8e0e8;
    border-radius: 14px;
    padding: 12px 14px;
    color: #111827 !important;
    background: #ffffff !important;
    resize: vertical;
    outline: none;
}

.checkout-card textarea:focus,
.admin-form-card textarea:focus {
    border-color: #168a3a;
    box-shadow: 0 0 0 3px rgba(22, 138, 58, .10);
}

.admin-page {
    max-width: 1160px;
    margin: 24px auto;
    padding: 0 18px;
    color: #1f2937 !important;
}

.admin-page-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
    padding: 18px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(22, 138, 58, .16);
    box-shadow: 0 12px 28px rgba(10, 85, 34, .12);
}

.admin-page-header h1 {
    margin: 0 0 6px;
    color: #0a5522 !important;
    font-weight: 900;
}

.admin-page-header p {
    margin: 0;
    color: #6b7280 !important;
    font-weight: 700;
    line-height: 1.7;
}

.admin-primary-button,
.admin-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border: 0;
    border-radius: 14px;
    text-decoration: none !important;
    font-weight: 900;
    cursor: pointer;
}

.admin-primary-button {
    background: linear-gradient(135deg, #168a3a, #58b44b) !important;
    color: #fff !important;
    box-shadow: 0 10px 20px rgba(22, 138, 58, .22);
}

.admin-secondary-button {
    background: #f1fff0 !important;
    color: #0a5522 !important;
    border: 1px solid rgba(22, 138, 58, .18);
}

.admin-table-card,
.admin-form-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(22, 138, 58, .16);
    box-shadow: 0 14px 34px rgba(10, 85, 34, .12);
    overflow: hidden;
}

.admin-form-card {
    padding: 18px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: 13px 14px;
    border-bottom: 1px solid #eef2ee;
    text-align: right;
    color: #1f2937 !important;
    vertical-align: top;
}

.admin-table th {
    background: #f2fff1;
    color: #0a5522 !important;
    font-weight: 900;
}

.status-pill {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.status-pill.active {
    background: #dcfce7;
    color: #166534 !important;
}

.status-pill.inactive {
    background: #fee2e2;
    color: #991b1b !important;
}

.table-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.table-actions a,
.table-actions button {
    border: 0;
    background: #f1fff0;
    color: #0a5522 !important;
    padding: 7px 10px;
    border-radius: 10px;
    font-weight: 900;
    cursor: pointer;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.admin-form-card label {
    display: grid;
    gap: 7px;
    color: #374151 !important;
    font-weight: 900;
}

.admin-form-card input,
.admin-form-card select {
    width: 100%;
    border: 1px solid #d8e0e8;
    border-radius: 14px;
    padding: 12px 14px;
    color: #111827 !important;
    background: #fff !important;
    outline: none;
}

.wide-field {
    margin-top: 14px;
}

.check-row {
    margin-top: 14px;
    display: flex !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
}

.check-row input {
    width: auto !important;
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.field-validation-error {
    color: #b91c1c !important;
    font-weight: 800;
    font-size: 13px;
}

@media (max-width: 760px) {
    .admin-page-header,
    .form-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .admin-table-card {
        overflow-x: auto;
    }

    .admin-table {
        min-width: 760px;
    }
}


/* ==========================================================
   Phase 32 - Dark mobile order design inspired by reference video
   تصميم صفحة السلة / الطلب بشكل قريب من الفيديو المرفق
   ========================================================== */

.checkout-reference-page {
    --dark-bg: #090b0f;
    --dark-panel: #11141a;
    --dark-panel-2: #151922;
    --dark-border: rgba(255,255,255,.075);
    --dark-text: #f5f7fb;
    --dark-muted: #969daa;
    --dark-soft: #1c212b;
    --dark-green: #22c55e;
    --dark-red: #e5484d;
    --dark-orange: #f97316;

    min-height: calc(100vh - 94px);
    margin: -8px auto 0;
    padding: 14px 10px 96px;
    background:
        radial-gradient(circle at 15% 0%, rgba(34,197,94,.08), transparent 28%),
        radial-gradient(circle at 95% 10%, rgba(239,190,27,.06), transparent 22%),
        linear-gradient(180deg, #07090c 0%, #0a0d12 100%);
    color: var(--dark-text) !important;
}

.order-phone-shell {
    width: min(100%, 430px);
    margin: 0 auto;
    color: var(--dark-text) !important;
    background: transparent;
}

.order-phone-shell * {
    box-sizing: border-box;
}

.order-top-mini {
    height: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #f8fafc;
    font-size: 12px;
    font-weight: 800;
    opacity: .92;
    padding: 0 4px;
    direction: ltr;
}

.order-live-dot {
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    position: relative;
    box-shadow: 0 0 18px rgba(34,197,94,.24);
}

.order-live-dot::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    right: 8px;
    top: 6px;
}

.order-reference-header {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: start;
    gap: 6px;
    padding: 12px 0 16px;
}

.order-back {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: transparent;
    color: #d1d5db !important;
    font-size: 28px;
    line-height: 1;
    text-decoration: none !important;
    transform: rotate(180deg);
}

.order-title-block {
    text-align: center;
}

.order-title-block small {
    display: inline-flex;
    color: #aeb5c2 !important;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 6px;
}

.order-title-block h1 {
    margin: 0;
    color: #f8fafc !important;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -.2px;
}

.order-title-block h1 span {
    color: #dbeafe !important;
}

.order-title-block p {
    margin: 7px 0 0;
    color: #7f8794 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 800;
}

.whatsapp-ok {
    color: #22c55e !important;
}

.order-card {
    background: linear-gradient(180deg, rgba(20,24,32,.96), rgba(14,17,23,.96));
    border: 1px solid var(--dark-border);
    border-radius: 13px;
    box-shadow: 0 12px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.025);
    margin-bottom: 8px;
}

.dark-field-card {
    min-height: 58px;
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}

.dark-field-card .field-icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #1d222b;
    color: #e5e7eb;
    font-size: 16px;
}

.dark-field-card .delivery-icon {
    background: linear-gradient(135deg, #8a2c25, #e5484d);
    box-shadow: 0 0 0 6px rgba(229,72,77,.08);
}

.dark-field-card label,
.notes-field-card {
    display: grid;
    gap: 4px;
    width: 100%;
    color: #f8fafc !important;
}

.dark-field-card label > span,
.notes-field-card > span {
    color: #8f97a5 !important;
    font-size: 11px;
    font-weight: 900;
}

.dark-field-card input,
.dark-field-card select,
.notes-field-card textarea {
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    padding: 0 !important;
    font-weight: 900;
    font-size: 13px;
    width: 100%;
}

.dark-field-card input::placeholder,
.notes-field-card textarea::placeholder {
    color: #c6cbd3 !important;
    opacity: .75;
}

.dark-field-card select {
    appearance: none;
    cursor: pointer;
}

.delivery-select-card {
    grid-template-columns: 38px 1fr 18px;
}

.order-chevron {
    color: #e5e7eb;
    font-size: 22px;
    line-height: 1;
    opacity: .85;
}

.order-note-card {
    display: flex;
    gap: 8px;
    align-items: start;
    padding: 10px 12px;
    color: #cfd6e1 !important;
    font-size: 12px;
    line-height: 1.7;
    border-color: rgba(229,72,77,.14);
}

.order-note-card strong {
    color: #f8fafc !important;
    white-space: nowrap;
}

.order-note-card span {
    color: #9ca3af !important;
}

.gps-dark-btn {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(34,197,94,.13);
    border-radius: 13px;
    color: #dffce9 !important;
    background: linear-gradient(135deg, rgba(34,197,94,.13), rgba(34,197,94,.05)) !important;
    font-weight: 900;
    margin: 3px 0 8px;
    cursor: pointer;
}

.notes-field-card {
    padding: 10px 12px;
}

.notes-field-card textarea {
    resize: vertical;
    min-height: 58px;
    line-height: 1.7;
}

.order-items-section {
    margin-top: 14px;
}

.order-items-section h2,
.invoice-dark-card h2 {
    color: #f8fafc !important;
    font-size: 14px;
    font-weight: 900;
    margin: 0 0 10px;
}

.dark-cart-lines {
    display: grid;
    gap: 0;
}

.checkout-reference-page .cart-line {
    display: grid !important;
    grid-template-columns: 52px 1fr 94px !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    color: #f8fafc !important;
}

.checkout-reference-page .cart-line img {
    width: 46px !important;
    height: 46px !important;
    border-radius: 11px !important;
    object-fit: cover !important;
    background: #151922 !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    order: 3;
}

.checkout-reference-page .cart-line h4 {
    margin: 0 0 3px !important;
    color: #f8fafc !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.45;
}

.checkout-reference-page .cart-line p {
    margin: 0 !important;
    color: #9ca3af !important;
    font-size: 11px !important;
    line-height: 1.65;
    font-weight: 800 !important;
}

.checkout-reference-page .qty-tools {
    display: grid !important;
    grid-template-columns: 28px 30px 28px;
    align-items: center;
    justify-content: end;
    gap: 4px !important;
    order: 1;
}

.checkout-reference-page .qty-tools button {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    border: 0 !important;
    background: #202530 !important;
    color: #f8fafc !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    box-shadow: none !important;
    cursor: pointer;
}

.checkout-reference-page .qty-tools span {
    color: #f8fafc !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-align: center;
}

.dark-empty-message {
    color: #9ca3af !important;
    padding: 18px 0 !important;
    text-align: center;
    font-size: 13px;
    font-weight: 900;
}

.invoice-dark-card {
    margin-top: 12px;
    padding: 14px 0 0;
}

.invoice-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 32px;
    color: #cfd6e1 !important;
    font-size: 12px;
    font-weight: 900;
}

.invoice-row span {
    color: #cfd6e1 !important;
}

.invoice-row strong,
.invoice-row strong span {
    color: #f8fafc !important;
    font-weight: 900;
}

.invoice-divider {
    height: 8px;
    border-bottom: 1px dashed rgba(255,255,255,.30);
    margin-bottom: 8px;
}

.invoice-row.grand-total-row {
    min-height: 44px;
    background: transparent !important;
    color: #f8fafc !important;
    font-size: 14px;
}

.invoice-row.grand-total-row strong,
.invoice-row.grand-total-row strong span {
    color: #f8fafc !important;
    font-size: 16px;
}

.dark-whatsapp-submit,
.dark-reorder-btn {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 13px;
    margin-top: 12px;
    font-weight: 900;
    text-decoration: none !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.dark-whatsapp-submit {
    background: linear-gradient(135deg, #1f2937, #232a35) !important;
    color: #f8fafc !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.30);
    cursor: pointer;
}

.dark-whatsapp-submit b {
    color: #cbd5e1 !important;
    font-size: 15px;
}

.dark-reorder-btn {
    background: #202530 !important;
    color: #f8fafc !important;
}

.success-reference-page {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.success-dark-box {
    text-align: center;
    padding: 24px 18px;
}

.success-glow-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #052e16;
    background: linear-gradient(135deg, #86efac, #22c55e);
    font-size: 34px;
    font-weight: 900;
    box-shadow: 0 0 0 8px rgba(34,197,94,.10), 0 18px 40px rgba(34,197,94,.18);
}

.success-dark-box h2 {
    color: #f8fafc !important;
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 900;
}

.success-dark-box p {
    color: #9ca3af !important;
    margin: 0;
    line-height: 1.8;
    font-weight: 800;
}

.success-send-link {
    color: #f8fafc !important;
}

.checkout-reference-page .field-validation-error {
    color: #ffb4b4 !important;
    font-size: 11px;
}

/* اجعل صفحة الطلب مثل شاشة هاتف حتى على الكمبيوتر */
@media (min-width: 760px) {
    .checkout-reference-page {
        padding-top: 22px;
    }

    .order-phone-shell {
        width: 430px;
    }
}

@media (max-width: 520px) {
    .checkout-reference-page {
        margin-inline: -12px;
        padding-inline: 12px;
        padding-top: 6px;
        min-height: calc(100vh - 70px);
    }

    .checkout-reference-page .cart-line {
        grid-template-columns: 48px 1fr 90px !important;
    }

    .order-title-block h1 {
        font-size: 16px;
    }
}

/* إخفاء الشريط السفلي في صفحة مراجعة الطلب حتى تكون قريبة من الفيديو */
body:has(.checkout-reference-page) #GlobalBottomDock {
    display: none !important;
}

body:has(.checkout-reference-page) {
    padding-bottom: 0 !important;
}


/* ==========================================================
   Phase 33 - Responsive desktop + mobile checkout refinement
   ========================================================== */

.order-responsive-shell {
    width: min(100%, 1200px);
    margin: 0 auto;
}

.checkout-responsive-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.checkout-main-column,
.checkout-side-column {
    min-width: 0;
}

.dark-panel-box {
    background: linear-gradient(180deg, rgba(9,13,20,.78), rgba(8,11,17,.76));
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 18px 42px rgba(0,0,0,.24);
}

.panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.panel-heading h2 {
    margin: 0;
    color: #fff !important;
    font-size: 18px;
    font-weight: 900;
}

.panel-heading span {
    color: #97a1b3 !important;
    font-size: 12px;
    font-weight: 800;
}

.order-items-panel,
.invoice-panel-box {
    margin-bottom: 16px;
}

.dark-panel-box .order-card:last-child {
    margin-bottom: 0;
}

.order-items-panel #itemsContainer {
    display: none;
}

.checkout-reference-page .dark-cart-lines {
    display: grid;
    gap: 0;
}

.checkout-reference-page .cart-line {
    grid-template-columns: 72px minmax(0, 1fr) 116px !important;
    gap: 14px !important;
    min-height: 92px !important;
    padding: 14px 0 !important;
}

.checkout-reference-page .cart-line img {
    width: 64px !important;
    height: 64px !important;
    border-radius: 14px !important;
}

.checkout-reference-page .cart-line h4 {
    font-size: 14px !important;
    margin-bottom: 5px !important;
}

.checkout-reference-page .cart-line p {
    font-size: 12px !important;
}

.checkout-reference-page .qty-tools {
    grid-template-columns: 34px 36px 34px;
    gap: 6px !important;
}

.checkout-reference-page .qty-tools button {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    font-size: 19px !important;
}

.checkout-reference-page .qty-tools span {
    font-size: 13px !important;
}

.invoice-panel-box .invoice-dark-card {
    margin-top: 0;
}

.invoice-panel-box .dark-whatsapp-submit {
    margin-top: 18px;
}

.invoice-panel-box .dark-reorder-btn {
    margin-top: 10px;
}

@media (min-width: 900px) {
    .checkout-reference-page {
        padding: 24px 18px 34px;
    }

    .checkout-responsive-grid {
        grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
        align-items: start;
        gap: 22px;
    }

    .checkout-side-column {
        position: sticky;
        top: 18px;
    }

    .checkout-reference-page .dark-cart-lines {
        max-height: 560px;
        overflow: auto;
        padding-inline-end: 6px;
    }

    .checkout-reference-page .dark-cart-lines::-webkit-scrollbar {
        width: 8px;
    }

    .checkout-reference-page .dark-cart-lines::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.14);
        border-radius: 999px;
    }

    .notes-field-card textarea {
        min-height: 84px;
    }
}

@media (max-width: 899.98px) {
    .checkout-reference-page {
        padding-bottom: 26px;
    }

    .dark-panel-box {
        padding: 14px;
        border-radius: 16px;
    }

    .panel-heading h2 {
        font-size: 16px;
    }

    .panel-heading span {
        font-size: 11px;
    }
}

@media (max-width: 640px) {
    .checkout-reference-page {
        min-height: 100vh;
        margin-inline: -12px;
        padding-inline: 12px;
        padding-top: 8px;
    }

    .order-reference-header {
        padding-bottom: 12px;
    }

    .order-title-block h1 {
        font-size: 17px;
    }

    .dark-panel-box {
        padding: 12px;
    }

    .panel-heading {
        flex-direction: column;
        align-items: start;
        gap: 4px;
        margin-bottom: 12px;
    }

    .checkout-reference-page .cart-line {
        grid-template-columns: 52px minmax(0, 1fr) 88px !important;
        gap: 10px !important;
        min-height: 74px !important;
        padding: 10px 0 !important;
    }

    .checkout-reference-page .cart-line img {
        width: 46px !important;
        height: 46px !important;
        border-radius: 11px !important;
    }

    .checkout-reference-page .cart-line h4 {
        font-size: 12px !important;
    }

    .checkout-reference-page .cart-line p {
        font-size: 11px !important;
    }

    .checkout-reference-page .qty-tools {
        grid-template-columns: 28px 28px 28px;
        gap: 4px !important;
    }

    .checkout-reference-page .qty-tools button {
        width: 28px !important;
        height: 28px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
    }

    .checkout-reference-page .qty-tools span {
        font-size: 12px !important;
    }

    .dark-whatsapp-submit,
    .dark-reorder-btn,
    .gps-dark-btn {
        min-height: 46px;
        font-size: 14px;
    }
}


/* ==========================================================
   Phase 35 - Clear Arabic typography
   الخط المعتمد للواجهة: Cairo
   احتياطي: Tajawal
   ========================================================== */

:root {
    --app-font-arabic: "Cairo", "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
}

/* الخط العام للموقع */
html,
body {
    font-family: var(--app-font-arabic) !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* اجبار كل عناصر الواجهة على نفس الخط */
body,
button,
input,
select,
textarea,
a,
span,
small,
strong,
label,
table,
th,
td,
.card,
.panel,
.product-card,
.reference-product-card,
.checkout-reference-page,
.order-phone-shell,
.dark-field-card,
.invoice-dark-card,
.bottom-dock {
    font-family: var(--app-font-arabic) !important;
}

/* تحسين قراءة النصوص العربية */
p,
.product-name,
.reference-product-info h3,
.cart-line h4,
.order-title-block h1,
.panel-heading h2,
.products-title,
.panel-title,
.brand-name {
    font-family: var(--app-font-arabic) !important;
    letter-spacing: 0 !important;
    line-height: 1.65;
}

/* العناوين */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--app-font-arabic) !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

/* النصوص الصغيرة حتى لا تكون باهتة */
small,
.product-meta,
.reference-meta,
.panel-heading span,
.order-title-block p,
.invoice-row,
.dark-field-card label > span,
.notes-field-card > span {
    font-family: var(--app-font-arabic) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

/* الحقول */
input,
select,
textarea {
    font-family: var(--app-font-arabic) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

/* الأزرار */
button,
.btn,
.primary-btn,
.nav-btn,
.dark-whatsapp-submit,
.dark-reorder-btn,
.gps-dark-btn,
.round-btn,
.cat-btn {
    font-family: var(--app-font-arabic) !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

/* تحسين وضوح السعر والأرقام */
.price,
.reference-price-box,
.invoice-row strong,
.total-value,
.summary-total,
.order-total,
#cartTotal,
#cartSubTotal,
#deliveryAmountText {
    font-family: var(--app-font-arabic) !important;
    font-weight: 900 !important;
    letter-spacing: .1px !important;
}

/* ضبط حجم النص في صفحة الطلب الداكنة */
.checkout-reference-page .dark-field-card input,
.checkout-reference-page .dark-field-card select,
.checkout-reference-page .notes-field-card textarea {
    font-size: 14px !important;
    line-height: 1.8 !important;
}

.checkout-reference-page .cart-line h4 {
    line-height: 1.7 !important;
}

.checkout-reference-page .cart-line p {
    line-height: 1.75 !important;
}

/* الموبايل */
@media (max-width: 640px) {
    body {
        font-size: 14px;
    }

    .brand-name,
    .brand span {
        font-size: 20px !important;
        line-height: 1.35;
    }

    .product-name,
    .reference-product-info h3 {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    .checkout-reference-page .dark-field-card input,
    .checkout-reference-page .dark-field-card select,
    .checkout-reference-page .notes-field-card textarea {
        font-size: 13px !important;
    }

    .panel-heading h2,
    .order-title-block h1 {
        font-size: 16px !important;
        line-height: 1.55 !important;
    }
}


/* ==========================================================
   Phase 36 - Full screen checkout layout
   جعل شاشة الطلب أوسع ومريحة على الكمبيوتر
   ========================================================== */

.checkout-reference-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.order-responsive-shell,
.order-phone-shell {
    width: 100% !important;
    max-width: none !important;
}

@media (min-width: 992px) {
    .checkout-reference-page {
        padding: 12px 16px 24px !important;
    }

    .order-responsive-shell,
    .order-phone-shell {
        width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
        min-height: calc(100vh - 24px) !important;
        margin: 0 auto !important;
    }

    .checkout-responsive-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) !important;
        gap: 18px !important;
        align-items: start !important;
    }

    .checkout-main-column,
    .checkout-side-column {
        width: 100% !important;
        min-width: 0 !important;
    }

    .checkout-main-column .dark-panel-box,
    .checkout-side-column .dark-panel-box {
        border-radius: 20px !important;
    }

    .order-items-panel,
    .invoice-panel-box {
        margin-bottom: 18px !important;
    }

    .checkout-reference-page .dark-cart-lines {
        max-height: none !important;
        overflow: visible !important;
        padding-inline-end: 0 !important;
    }

    .invoice-panel-box .invoice-dark-card {
        min-height: 0 !important;
    }

    .checkout-reference-page .cart-line {
        min-height: 102px !important;
    }

    .checkout-reference-page .cart-line img {
        width: 72px !important;
        height: 72px !important;
    }

    .checkout-reference-page .cart-line h4 {
        font-size: 15px !important;
    }

    .checkout-reference-page .cart-line p {
        font-size: 13px !important;
    }

    .dark-whatsapp-submit,
    .dark-reorder-btn {
        min-height: 52px !important;
        font-size: 18px !important;
    }

    .gps-dark-btn {
        min-height: 50px !important;
        font-size: 18px !important;
    }

    .dark-field-card input,
    .dark-field-card select,
    .notes-field-card textarea {
        font-size: 15px !important;
    }
}

@media (min-width: 1400px) {
    .checkout-reference-page {
        padding: 14px 24px 26px !important;
    }

    .order-responsive-shell,
    .order-phone-shell {
        width: calc(100vw - 48px) !important;
        max-width: calc(100vw - 48px) !important;
    }

    .checkout-responsive-grid {
        grid-template-columns: minmax(560px, 1fr) minmax(720px, 1.2fr) !important;
        gap: 22px !important;
    }

    .dark-panel-box {
        padding: 22px !important;
    }
}


/* ==========================================================
   Phase 37 - Clean true full-screen checkout
   إصلاح ظهور المساحات الخضراء الجانبية وجعل صفحة الطلب ممتدة ومنظمة
   ========================================================== */

/* عند صفحة مراجعة الطلب نجعل خلفية الموقع كلها داكنة بدل ظهور الأخضر الجانبي */
body:has(.checkout-reference-page),
html:has(.checkout-reference-page) {
    background: #070a0f !important;
    overflow-x: hidden !important;
}

/* إلغاء أي قيود عرض أو margins من الحاويات العامة داخل صفحة الطلب */
body:has(.checkout-reference-page) main,
body:has(.checkout-reference-page) .main,
body:has(.checkout-reference-page) .main-shell,
body:has(.checkout-reference-page) .page-shell,
body:has(.checkout-reference-page) .site-main,
body:has(.checkout-reference-page) .container,
body:has(.checkout-reference-page) .content,
body:has(.checkout-reference-page) .store-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #070a0f !important;
}

/* صفحة الطلب نفسها */
.checkout-reference-page {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: calc(100vh - 76px) !important;
    margin: 0 !important;
    padding: 14px clamp(14px, 2vw, 34px) 28px !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(34,197,94,.06), transparent 26%),
        radial-gradient(circle at 98% 6%, rgba(239,190,27,.045), transparent 24%),
        linear-gradient(180deg, #071008 0%, #070a0f 24%, #070a0f 100%) !important;
    color: #f8fafc !important;
    box-sizing: border-box !important;
}

/* إزالة شكل شاشة الهاتف في الكمبيوتر وتوسيعها بشكل حقيقي */
.order-responsive-shell,
.order-phone-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
}

/* الهيدر الداخلي للطلب */
.checkout-reference-page .order-top-mini {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 4px !important;
}

.checkout-reference-page .order-reference-header {
    width: 100% !important;
    margin: 0 0 14px !important;
    border-radius: 0 0 0 0 !important;
}

/* توزيع سطح المكتب */
.checkout-responsive-grid {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(420px, .95fr) minmax(520px, 1.05fr) !important;
    gap: clamp(16px, 2vw, 26px) !important;
    align-items: start !important;
}

/* لأن الصفحة RTL: بيانات العميل تكون يمين، والفاتورة/العناصر يسار */
.checkout-main-column {
    order: 2 !important;
    min-width: 0 !important;
}

.checkout-side-column {
    order: 1 !important;
    min-width: 0 !important;
    position: sticky !important;
    top: 16px !important;
}

/* كروت متناسقة بدون تمدد غريب */
.checkout-reference-page .dark-panel-box {
    width: 100% !important;
    border-radius: 20px !important;
    padding: clamp(16px, 1.4vw, 24px) !important;
    background:
        linear-gradient(180deg, rgba(13,17,24,.98), rgba(7,10,15,.98)) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 20px 44px rgba(0,0,0,.28) !important;
}

/* عناصر الطلب والفاتورة داخل العمود الأيسر */
.checkout-side-column {
    display: grid !important;
    gap: 18px !important;
}

.checkout-side-column .order-items-panel,
.checkout-side-column .invoice-panel-box {
    margin: 0 !important;
}

/* منع ظهور مربعات أو مساحات جانبية قديمة */
.checkout-reference-page::before,
.checkout-reference-page::after,
.order-responsive-shell::before,
.order-responsive-shell::after {
    display: none !important;
}

/* تحسين عرض المنتج في سطح المكتب */
@media (min-width: 992px) {
    .checkout-reference-page .cart-line {
        grid-template-columns: 84px minmax(0, 1fr) 136px !important;
        min-height: 104px !important;
        gap: 16px !important;
        padding: 16px 0 !important;
    }

    .checkout-reference-page .cart-line img {
        width: 74px !important;
        height: 74px !important;
    }

    .checkout-reference-page .cart-line h4 {
        font-size: 16px !important;
        line-height: 1.65 !important;
    }

    .checkout-reference-page .cart-line p {
        font-size: 13px !important;
        line-height: 1.75 !important;
    }

    .checkout-reference-page .qty-tools {
        grid-template-columns: 38px 42px 38px !important;
        justify-content: end !important;
    }

    .checkout-reference-page .qty-tools button {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
    }

    .invoice-row {
        min-height: 38px !important;
        font-size: 14px !important;
    }

    .invoice-row.grand-total-row {
        min-height: 52px !important;
        font-size: 16px !important;
    }

    .invoice-row.grand-total-row strong,
    .invoice-row.grand-total-row strong span {
        font-size: 20px !important;
    }

    .dark-whatsapp-submit,
    .dark-reorder-btn {
        min-height: 56px !important;
    }
}

/* الشاشات الكبيرة جدًا */
@media (min-width: 1500px) {
    .checkout-responsive-grid {
        grid-template-columns: minmax(540px, .88fr) minmax(760px, 1.12fr) !important;
    }

    .checkout-reference-page {
        padding-inline: 44px !important;
    }
}

/* التابلت */
@media (max-width: 991.98px) {
    .checkout-reference-page {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 14px 26px !important;
        min-height: 100vh !important;
    }

    .checkout-responsive-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .checkout-main-column,
    .checkout-side-column {
        order: initial !important;
        position: static !important;
    }

    .checkout-main-column {
        order: 1 !important;
    }

    .checkout-side-column {
        order: 2 !important;
    }
}

/* الهاتف */
@media (max-width: 640px) {
    .checkout-reference-page {
        padding: 8px 10px 24px !important;
        margin: 0 !important;
    }

    .checkout-reference-page .dark-panel-box {
        border-radius: 16px !important;
        padding: 12px !important;
    }

    .checkout-reference-page .cart-line {
        grid-template-columns: 52px minmax(0, 1fr) 88px !important;
        min-height: 76px !important;
        gap: 10px !important;
    }

    .checkout-reference-page .cart-line img {
        width: 46px !important;
        height: 46px !important;
    }

    .checkout-reference-page .qty-tools {
        grid-template-columns: 28px 28px 28px !important;
    }

    .checkout-reference-page .qty-tools button {
        width: 28px !important;
        height: 28px !important;
    }
}


/* ==========================================================
   Phase 38 - LAN performance optimization
   تحسين سرعة الموقع على الشبكة المحلية
   ========================================================== */

/* حذف الاعتماد على Google Fonts لتسريع فتح الموقع على الهاتف داخل الشبكة */
:root {
    --app-font-arabic: "Segoe UI", Tahoma, Arial, sans-serif !important;
}

html,
body,
button,
input,
select,
textarea,
a,
span,
small,
strong,
label,
table,
th,
td {
    font-family: var(--app-font-arabic) !important;
}

/* إخفاء شاشة التحميل لأنها تضيف تأخيرًا غير ضروري على الشبكة */
.smart-loader {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* تقليل الحركات الثقيلة على الهواتف والأجهزة الضعيفة */
@media (max-width: 900px) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    .product-card,
    .reference-product-card,
    .dark-panel-box,
    .order-card,
    .checkout-reference-page .cart-line,
    .bottom-dock,
    .top-header {
        transition: none !important;
    }

    .reference-product-card:hover,
    .original-product-card.reference-product-card:hover,
    .product-card:hover {
        transform: none !important;
    }
}

/* تحسين عرض الصور وتقليل العمل على المتصفح */
img {
    max-width: 100%;
    height: auto;
}

/* في صفحة الطلب لا نستخدم مؤثرات ظل ضخمة على الهاتف */
@media (max-width: 700px) {
    .checkout-reference-page .dark-panel-box,
    .checkout-reference-page .order-card {
        box-shadow: 0 8px 18px rgba(0,0,0,.20) !important;
    }
}


/* ==========================================================
   Phase 57 - Discount products strip above categories
   شريط تخفيضات أعلى الأقسام - يعمل فوق نفس ملف store.css المرفوع
   ========================================================== */

/* حاوية شريط التخفيضات فوق الأصناف/الأقسام */
.discount-products-strip {
    width: min(var(--container, 1320px), calc(100% - 32px)) !important;
    margin: 18px auto 18px !important;
    padding: 14px 16px 16px !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #ffffff 0%, #fffdf4 100%) !important;
    border: 1px solid rgba(255, 193, 7, .34) !important;
    box-shadow: 0 14px 30px rgba(24, 67, 74, .14) !important;
    overflow: hidden !important;
    direction: rtl !important;
}

/* عنوان الشريط */
.discount-strip-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 0 4px 12px !important;
    border-bottom: 1px solid rgba(255, 193, 7, .22) !important;
}

.discount-strip-title {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    color: #0a5522 !important;
    -webkit-text-fill-color: #0a5522 !important;
    font-size: 19px !important;
    font-weight: 900 !important;
}

.discount-strip-title b {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #ffc107, #ffdf6b) !important;
    color: #17360f !important;
    -webkit-text-fill-color: #17360f !important;
    box-shadow: 0 8px 18px rgba(255, 193, 7, .28) !important;
}

.discount-strip-subtitle {
    color: #6b7280 !important;
    -webkit-text-fill-color: #6b7280 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

/* صف الأصناف المخفضة */
.discount-strip-row {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 282px !important;
    gap: 14px !important;
    padding: 14px 2px 2px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    direction: rtl !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(22, 138, 58, .55) rgba(241,245,249,.9) !important;
}

.discount-strip-row::-webkit-scrollbar {
    height: 8px !important;
}

.discount-strip-row::-webkit-scrollbar-track {
    background: rgba(241,245,249,.9) !important;
    border-radius: 999px !important;
}

.discount-strip-row::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #168a3a, #58b44b) !important;
    border-radius: 999px !important;
}

/* بطاقة الصنف المخفض */
.discount-strip-card {
    scroll-snap-align: start !important;
    min-height: 124px !important;
    display: grid !important;
    grid-template-columns: 88px 1fr 40px !important;
    gap: 11px !important;
    align-items: center !important;
    padding: 10px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(22, 138, 58, .14) !important;
    box-shadow: 0 10px 22px rgba(10, 85, 34, .09) !important;
    color: #1f2937 !important;
    -webkit-text-fill-color: #1f2937 !important;
    direction: rtl !important;
    position: relative !important;
    overflow: hidden !important;
}

.discount-strip-card::before {
    content: "" !important;
    position: absolute !important;
    inset-block: 0 !important;
    inset-inline-start: 0 !important;
    width: 4px !important;
    background: linear-gradient(180deg, #ffc107, #168a3a) !important;
}

.discount-strip-image {
    width: 88px !important;
    height: 88px !important;
    border-radius: 14px !important;
    display: grid !important;
    place-items: center !important;
    background: #f8fafc !important;
    border: 1px solid #eef2f7 !important;
    overflow: hidden !important;
}

.discount-strip-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 5px !important;
}

.discount-strip-info {
    min-width: 0 !important;
    display: grid !important;
    gap: 5px !important;
}

.discount-strip-name {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.55 !important;
    max-height: 42px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.discount-strip-save {
    width: max-content !important;
    max-width: 100% !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    background: #fff5cc !important;
    color: #7a5200 !important;
    -webkit-text-fill-color: #7a5200 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.discount-strip-price {
    display: flex !important;
    align-items: baseline !important;
    gap: 5px !important;
    color: #168a3a !important;
    -webkit-text-fill-color: #168a3a !important;
    font-weight: 900 !important;
}

.discount-strip-price strong {
    color: #168a3a !important;
    -webkit-text-fill-color: #168a3a !important;
    font-size: 17px !important;
    line-height: 1 !important;
}

.discount-strip-price small {
    color: #168a3a !important;
    -webkit-text-fill-color: #168a3a !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

/* زر إضافة صغير داخل شريط التخفيضات */
.discount-strip-add {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border: 0 !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(135deg, #168a3a, #58b44b) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    box-shadow: 0 10px 18px rgba(22, 138, 58, .24) !important;
}

.discount-strip-add:disabled {
    background: #cbd5e1 !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* شارة تخفيض على كرت المنتج الأصلي */
.product-discount-corner {
    position: absolute !important;
    top: 8px !important;
    inset-inline-start: 8px !important;
    z-index: 5 !important;
    min-height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #ffc107, #ffdf6b) !important;
    color: #17360f !important;
    -webkit-text-fill-color: #17360f !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    box-shadow: 0 7px 14px rgba(255, 193, 7, .24) !important;
}

.reference-product-card,
.original-product-card.reference-product-card {
    position: relative !important;
}

@media (max-width: 900px) {
    .discount-products-strip {
        width: min(100%, 520px) !important;
        margin: 12px auto 12px !important;
        padding: 12px !important;
        border-radius: 14px !important;
    }

    .discount-strip-head {
        display: grid !important;
        gap: 6px !important;
        text-align: right !important;
    }

    .discount-strip-title {
        font-size: 17px !important;
    }

    .discount-strip-row {
        grid-auto-columns: 246px !important;
        gap: 10px !important;
    }

    .discount-strip-card {
        grid-template-columns: 72px 1fr 36px !important;
        min-height: 106px !important;
        padding: 9px !important;
    }

    .discount-strip-image {
        width: 72px !important;
        height: 72px !important;
    }

    .discount-strip-name {
        font-size: 12px !important;
        max-height: 38px !important;
    }

    .discount-strip-price strong {
        font-size: 15px !important;
    }

    .discount-strip-add {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
    }
}


/* ==========================================================
   Phase 73 - Discount sale price fix
   بيع الأصناف المخفضة بسعرها بعد الخصم وليس بالسعر الأصلي
   ========================================================== */

.reference-price-box del,
.discount-strip-price del,
.product-price del,
.price-box del {
    display: inline-block;
    margin-inline-end: 7px;
    color: #9ca3af !important;
    font-size: 13px;
    font-weight: 800;
    text-decoration: line-through;
}

.discount-strip-price {
    gap: 6px;
}

.discount-strip-save {
    color: #dc2626 !important;
    font-weight: 900 !important;
}

/* ==========================================================
   Fix - Remove small top status mark in checkout page
   إزالة العلامة الصغيرة والشريط العلوي من صفحة مراجعة الطلب
   ========================================================== */

.checkout-reference-page .order-top-mini,
.checkout-reference-page .order-live-dot,
.checkout-reference-page .checkout-topbar,
.checkout-reference-page .mobile-top-strip,
.checkout-reference-page .phone-statusbar,
.checkout-reference-page .checkout-statusbar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.checkout-reference-page .order-reference-header {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ==========================================================
   Phase 87 - Recipient name field cleanup
   إلغاء الاسم التوضيحي داخل حقل اسم المستلم
   ========================================================== */

.checkout-reference-page input[name="CustomerName"],
.checkout-reference-page input#CustomerName {
    text-align: right !important;
    direction: rtl !important;
}

.checkout-reference-page input[name="CustomerName"]::placeholder,
.checkout-reference-page input#CustomerName::placeholder {
    color: #cbd5e1 !important;
    opacity: .75 !important;
    font-weight: 800 !important;
}

/* ==========================================================
   Phase 89 - Admin password change page
   ========================================================== */

.admin-password-form input[type="password"] {
    direction: ltr !important;
    text-align: left !important;
    letter-spacing: .5px;
}

.password-rules-box span {
    color: #0a5522 !important;
}


/* ==========================================================
   Phase 103 - Customer profile prompt
   ========================================================== */
.customer-profile-button {
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: 999px !important;
    padding: 0 13px !important;
    background: rgba(255, 255, 255, .12) !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.customer-profile-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 7000 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
    background: rgba(15, 23, 42, .58) !important;
    backdrop-filter: blur(10px) !important;
}

.customer-profile-overlay.show {
    display: flex !important;
}

.customer-profile-modal {
    position: relative !important;
    width: min(460px, 100%) !important;
    border-radius: 28px !important;
    padding: 24px !important;
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, .95) !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .28) !important;
    color: #0f172a !important;
    text-align: center !important;
}

.customer-profile-close {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    width: 38px !important;
    height: 38px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #f1f5f9 !important;
    color: #0f172a !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.customer-profile-icon {
    width: 74px !important;
    height: 74px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, #dcfce7, #bbf7d0) !important;
    color: #166534 !important;
    font-size: 36px !important;
    margin-bottom: 12px !important;
}

.customer-profile-modal h2 {
    margin: 0 0 8px !important;
    color: #0f172a !important;
    font-size: 26px !important;
    font-weight: 900 !important;
}

.customer-profile-modal p {
    margin: 0 0 18px !important;
    color: #64748b !important;
    font-weight: 800 !important;
    line-height: 1.8 !important;
}

#CustomerProfileForm {
    display: grid !important;
    gap: 13px !important;
    text-align: right !important;
}

#CustomerProfileForm label {
    display: grid !important;
    gap: 7px !important;
    color: #374151 !important;
    font-weight: 900 !important;
}

#CustomerProfileForm input {
    width: 100% !important;
    min-height: 50px !important;
    border: 1px solid #d8e0e8 !important;
    border-radius: 16px !important;
    padding: 0 14px !important;
    color: #111827 !important;
    background: #ffffff !important;
    outline: none !important;
    font-weight: 800 !important;
}

#CustomerProfileForm button {
    min-height: 50px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: #168a3a !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.customer-profile-help {
    margin-top: 13px !important;
    padding: 10px !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.7 !important;
}

/* Phase 102 - GPS button loading state retained */
.gps-dark-btn.is-detecting,
.gps-dark-btn:disabled {
    opacity: .75 !important;
    cursor: wait !important;
    filter: grayscale(.15) !important;
}

@media (max-width: 760px) {
    .customer-profile-button {
        min-height: 34px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }

    .customer-profile-modal {
        padding: 22px 18px !important;
        border-radius: 24px !important;
    }
}


/* ==========================================================
   Phase 113 - Shatla & Nakhla Style Image Ads
   ========================================================== */
.home-billboard-panel {
    width: calc(100% - 24px) !important;
    max-width: 1680px !important;
    margin: 10px auto 30px !important;
    padding: 0 !important;
}

.home-billboard-panel--top {
    margin-top: 10px !important;
}

.home-billboard-carousel {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1024 / 471 !important;
    min-height: 300px !important;
    max-height: 560px !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background: #f7f1df !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .16) !important;
    border: 1px solid rgba(255, 255, 255, .40) !important;
}

.billboard-slide {
    position: absolute !important;
    inset: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
    transition: opacity .75s ease, visibility .75s ease !important;
    display: block !important;
    color: #ffffff !important;
    background: #f7f1df !important;
}

.billboard-slide.active {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
}

.billboard-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

/* الإعلان نفسه يحتوي النص/السعر/الشعار، لذلك لا نضع تعتيم أو نص فوق الصورة */
.billboard-slide::after,
.billboard-overlay {
    display: none !important;
}

.billboard-dots {
    position: absolute !important;
    bottom: 18px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, .18) !important;
    backdrop-filter: blur(8px) !important;
}

.billboard-dots button {
    width: 9px !important;
    height: 9px !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0 !important;
    background: rgba(255,255,255,.75) !important;
    cursor: pointer !important;
    transition: width .25s ease, background .25s ease !important;
}

.billboard-dots button.active {
    width: 32px !important;
    background: #f6c84c !important;
}

.home-billboard-empty {
    min-height: 300px !important;
    aspect-ratio: 1024 / 471 !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 8px !important;
    border-radius: 28px !important;
    border: 2px dashed rgba(255, 255, 255, .50) !important;
    background: rgba(255, 255, 255, .13) !important;
    color: #ffffff !important;
    text-align: center !important;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .10) !important;
}

.home-billboard-empty strong {
    font-size: 24px !important;
    font-weight: 900 !important;
}

.home-billboard-empty span {
    font-size: 14px !important;
    font-weight: 800 !important;
    opacity: .92 !important;
}

.brands-panel {
    margin-top: 0 !important;
}

@media (max-width: 760px) {
    .home-billboard-panel {
        width: calc(100% - 14px) !important;
        margin-top: 8px !important;
        margin-bottom: 18px !important;
    }

    .home-billboard-carousel {
        aspect-ratio: 1024 / 520 !important;
        min-height: 170px !important;
        max-height: 260px !important;
        border-radius: 20px !important;
    }

    .home-billboard-empty {
        min-height: 170px !important;
        border-radius: 20px !important;
    }

    .billboard-dots {
        bottom: 10px !important;
        padding: 5px 8px !important;
    }

    .billboard-dots button {
        width: 8px !important;
        height: 8px !important;
    }

    .billboard-dots button.active {
        width: 24px !important;
    }

    .brands-panel {
        margin-top: 8px !important;
    }
}