* {
    margin: 0;
    padding: 0;
    max-width: 100%;
}

iframe {
    max-width: none;
}

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    background-color: #eee;
    color: #444;
    direction: rtl;
    text-align: right;
    overflow-x: hidden;
    max-width: 100vw;
}

html {
    overflow-x: hidden;
}


.container {
    padding: 10px;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 15px 20px;
    position: sticky;
    flex-direction: column;
    top: -1px;
    z-index: 100;
}

.navbar a {
    text-decoration: none;
}

.navbar-left {
    display: flex;
    align-items: center;
}

.discount,
.alertDiv {
    top: 0;
    right: 0;
    position: fixed;
    z-index: 1100;
    width: 100%;
    min-height: 100vh;
    align-items: center;
    display: flex;
    justify-content: center;
    background-color: #00000080;
}

.discount .discountDiv,
.alert {
    width: 80%;
    text-align: center;
    background-color: #ddd;
    padding: 20px;
    border-radius: 10px;
}

.discountDiv div,
.alert div {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.discount button,
.alert button {
    margin: 0;
}

.discountAmont {
    background-color: #af1b1b;
    color: #eee;
    border-radius: 5px;
    padding: 3px;
    position: absolute;
    bottom: 0;
    right: 0;
}

#discountTitle {
    background-color: #af1b1b;
    color: #eee;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
    margin-bottom: 15px;
}

.close {
    background-color: transparent;
    border: none;
    color: #ff8c00;
}

.notes {
    margin-bottom: 10px;
}

.orange {
    color: #ff8c00;
    font-weight: bold;
}

.navbar-right {
    display: flex;
    align-items: center;
}

.logo {
    color: #FF8C00;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 28px;
    font-weight: bold;
    margin-left: 20px;
}

.logo-img {
    height: 30px;
    width: auto;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    transition: transform .25s;
}
.logo:hover .logo-img { transform: scale(1.1) rotate(-6deg); }

.search-bar {
    position: relative;
    margin-left: 20px;
}

.search-bar input {
    background-color: #ddd;
    border: none;
    border-radius: 20px;
    padding: 8px 15px;
    padding-right: 40px;
    color: #333;
    width: 200px;
}

.search-bar input::placeholder {
    color: #bbb;
}

.search-bar .fas.fa-search {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #555;
}

.cart-icon {
    position: relative;
    margin-right: 20px;
    font-size: 24px;
    color: #333;
}

.cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #FF8C00;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
}

.menu-icon {
    font-size: 24px;
    color: #333;
    cursor: pointer;
}

.filter-navbar {
    background-color: #fff;
    padding: 10px 0;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.filter-scroll-container {
    display: inline-flex;
    padding: 0 20px;
}

.filter-scroll-container .active,
.group .active {
    background-color: #ff8c00 !important;
    color: #eee;
}

.filter-item {
    display: inline-block;
    color: #333;
    text-decoration: none;
    padding: 8px 15px;
    margin-left: 10px;
    border-radius: 20px;
    background-color: #eee;
    transition: background-color 0.3s ease;
}

.filter-item:hover {
    background-color: #FF8C00;
}

.product-grid,
.group-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 2fr));
    gap: 20px;
}

.group-card img {
    border-radius: 10px;
}

.groupTitle {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}

.groupTitle a {
    color: #FF8C00;
}

.product-card {
    text-align: center;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 15px;
}

.spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #FF8C00;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-card img {
    width: 250px;
    scroll-behavior: smooth;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
}

#productGridV .product-card {
    background-color: #eee;
}

#productGridV img {
    margin: 0;
}

.product-image-large img {
    width: 500px;
    object-fit: cover;
    border-radius: 8px;
}

.product-title {
    margin-bottom: 10px;
}

.packages {
    flex: 0 0 auto;
    width: 250px;
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
    margin: 10px 0;
}

.package-info {
    display: flex;
    justify-content: space-between;
}

.packages a {
    text-decoration: none;
}

.packages p {
    color: #222;
}

.package {
    margin: 10px;
}

.packages img {
    width: 100%;
    border-radius: 10px;
}

.no-products {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: 1.5rem;
}

.no-products i {
    font-size: 4rem;
}

:root {
    --dot-size: 10px;
    --dot-gap: 10px;
    --dot-inactive: rgba(0, 0, 0, 0.25);
    --dot-active: rgba(0, 0, 0, 0.9);
}

/* ===== PRODUCT IMAGE GALLERY (احترافي) ===== */
.carousel-wrap {
    width: 100%;
    margin-bottom: 10px;
    position: relative;
}

/* Main image container */
.gallery-main {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f8f9fa;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e8e8e8;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    cursor: zoom-in;
}

.gallery-main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
    display: block;
    padding: 10px;
    box-sizing: border-box;
}

.gallery-main:hover .gallery-main-img {
    transform: scale(1.08);
}

/* Badge overlay on image */
.gallery-discount-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: linear-gradient(135deg, #dc3545, #c0392b);
    color: #fff;
    font-family: 'Tajawal', sans-serif;
    font-weight: 800;
    font-size: 0.92em;
    padding: 6px 14px;
    border-radius: 20px;
    z-index: 3;
    box-shadow: 0 2px 10px rgba(220,53,69,0.4);
    letter-spacing: 0.5px;
}

/* Nav arrows */
.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,0.92);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    transition: all 0.2s;
    color: #333;
    font-size: 0.85em;
}
.gallery-arrow:hover {
    background: #FF8C00;
    color: #fff;
    box-shadow: 0 4px 14px rgba(255,140,0,0.4);
    transform: translateY(-50%) scale(1.1);
}
.gallery-arrow-prev { right: 10px; }
.gallery-arrow-next { left: 10px; }

/* Counter pill */
.gallery-counter {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.78em;
    padding: 3px 12px;
    border-radius: 20px;
    z-index: 3;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* Thumbnails strip */
.gallery-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    padding: 4px 2px 6px;
    scrollbar-width: none;
}
.gallery-thumbs::-webkit-scrollbar { display: none; }

.gallery-thumb {
    flex: 0 0 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    background: #f0f0f0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    box-sizing: border-box;
    transition: transform 0.25s;
}
.gallery-thumb:hover { border-color: #FF8C00; transform: translateY(-2px); }
.gallery-thumb.active { border-color: #FF8C00; box-shadow: 0 0 0 1px #FF8C00; }
.gallery-thumb:hover img { transform: scale(1.05); }

/* Fullscreen modal */
.gallery-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.gallery-modal.open { display: flex; }
.gallery-modal-img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 10px 60px rgba(0,0,0,0.6);
}
.gallery-modal-close {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    color: #fff;
    font-size: 1.1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.gallery-modal-close:hover { background: rgba(255,255,255,0.3); }

/* Legacy carousel fallback (hidden) */
.carousel { display: none; }
.slide { display: none; }
.slide img { display: none; }
.dots { display: none !important; }

@media (max-width: 480px) {
    .gallery-thumb { flex: 0 0 58px; height: 58px; }
    .gallery-arrow { width: 32px; height: 32px; font-size: 0.78em; }
}

.dots {
    display: flex;
    gap: var(--dot-gap);
    justify-content: center;
    margin-top: 12px;
    user-select: none;
}

.dot {
    border: none;
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
    background: var(--dot-inactive);
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
    transform: scale(1);
    display: inline-block;
}

.dot[data-active] {
    background-color: linear-gradient(#fff, #fff);
}

.product-info {
    flex-grow: 1;
    padding-right: 10px;
}

.product-info h3,
.product-title {
    margin-top: 0;
    margin: 5px 0;
    color: #444;
}

.product-info h3 {
    font-size: 1.2em;
}

.product-card-small .rating,
.product-card .rating {
    direction: ltr;
    display: flex;
    align-items: center;
    margin: 5px 0;
}

.product-card-small .rating .fas.fa-star,
.rating snap,
.product-card .rating .fas.fa-star {
    font-size: 10px;
    color: #555;
    margin: 0 1px;
}

.rating .fas.fa-star.gold {
    color: gold;
}

.price {
    font-weight: bold;
    color: #ff8c00;
    font-size: 1em;
    margin-bottom: 10px;
}

.year-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 180px;
    overflow: auto;
    border: 1px solid #ccc;
    background: #fff;
    z-index: 1000;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    display: none;
}

.year-item {
    padding: 8px 10px;
    cursor: pointer;
}

.year-item:hover {
    background: #f1f1f1;
}

.year-list.show {
    display: block;
}

.packages .price {
    text-align: center;
}

.add-to-cart-btn,
.product-details-content button,
#discountBtn,
#removeDiscount,
#top,
#removeTop,
#delete,
#quantityBtn,
#overAll,
#removeOverAll,
#removeImgBtn {
    background-color: #ff8c00;
    color: #eee;
    border: none;
    padding: 10px 15px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 0.9em;
}

#delete,
#quantityBtn,
#removeImgBtn {
    background-color: #f00;
}

.add-to-cart-btn:hover,
.product-details-content button:hover,
#discountBtn:hover,
#removeDiscount:hover,
#top:hover,
#removeTop:hover,
#overAll:hover,
#removeOverAll:hover {
    background-color: #e77f00;
}

#delete:hover,
#quantityBtn:hover,
#removeImgBtn:hover {
    background-color: rgb(193, 0, 0);
}

/* ============================================================
   SIDEBAR — Professional Dark Theme
============================================================ */
.sidebar {
    overflow-y: auto;
    overflow-x: hidden;
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100%;
    background: linear-gradient(180deg, #1a1f35 0%, #141827 50%, #0f1120 100%);
    transition: right 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    padding: 0;
    box-sizing: border-box;
    box-shadow: -8px 0 32px rgba(0,0,0,0.4);
    border-left: 1px solid rgba(255,255,255,0.06);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,140,0,0.3) transparent;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,140,0,0.3); border-radius: 4px; }

.sidebar a {
    text-decoration: none;
}

.sidebar.active {
    right: 0;
}

/* ---- Sidebar Header ---- */
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,140,0,0.06);
    position: sticky;
    top: 0;
    z-index: 2;
    backdrop-filter: blur(10px);
}

.sidebar-header .logo {
    font-size: 20px;
    margin: 0;
    color: #fff;
    font-family: 'Tajawal', sans-serif;
    font-weight: 800;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.sidebar-header .logo i {
    color: #FF8C00;
    font-size: 0.9em;
}

.close-sidebar-btn {
    background: linear-gradient(135deg, #FF8C00, #e67e00);
    color: white;
    border: none;
    padding: 7px 14px;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.82em;
    font-weight: 700;
    transition: opacity 0.2s, transform 0.2s;
    white-space: nowrap;
}
.close-sidebar-btn:hover { opacity: 0.88; transform: scale(0.97); }

.close-sidebar-btn i {
    margin-left: 0;
    font-size: 0.9em;
}

#closeSidebarBtn {
    position: fixed;
    width: 100%;
    min-height: 100vh;
    top: 0px;
    z-index: 999;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    border: none;
    outline: none;
}

/* ---- Sidebar Nav ---- */
.sidebar-nav {
    padding-bottom: 24px;
}

.sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.request-details div {
    margin-top: 10px;
}

.sidebar-nav > ul > li {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sidebar-nav > ul > li:last-child { border-bottom: none; }

.sidebar-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #FF8C00;
    font-size: 0.75em;
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 14px 20px 6px;
    margin-bottom: 0;
    opacity: 0.9;
}

.sidebar-section-title i {
    margin-left: 0;
    font-size: 1em;
    width: 16px;
    text-align: center;
}

.sidebar-section-title h3 {
    font-size: 1em;
    margin: 0;
    font-weight: 700;
    font-family: inherit;
    color: inherit;
}

.sidebar-nav button {
    transition: color 0.2s ease, background 0.2s ease;
    border: none;
    padding: 9px 20px 9px 18px;
    outline: none;
    background-color: transparent;
    color: rgba(255,255,255,0.75);
    font-family: 'Tajawal', sans-serif;
    font-size: 0.88em;
    cursor: pointer;
    width: 100%;
    text-align: right;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sidebar-nav button:hover {
    color: #FF8C00;
    background: rgba(255,140,0,0.06);
}

.sidebar-nav ul ul {
    padding-right: 0;
    margin-top: 0;
    padding-bottom: 6px;
}

.sidebar-nav ul ul li {
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
}

.sidebar-nav .cart-count {
    position: relative;
    font-size: 17px;
    height: 18px;
    top: 0;
    right: 0;
}

.sidebar-nav a {
    width: 100%;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 20px 9px 18px;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.88em;
    transition: color 0.2s ease, background 0.2s ease;
    border-radius: 0;
}

.sidebar-nav a:hover {
    color: #FF8C00;
    background: rgba(255,140,0,0.06);
}

/* Active link indicator */
.sidebar-nav a.active {
    color: #FF8C00;
    background: rgba(255,140,0,0.1);
    border-right: 2px solid #FF8C00;
}

/* Admin stats in sidebar */
.sidebar-nav p {
    font-family: 'Tajawal', sans-serif;
    font-size: 0.8em;
    color: rgba(255,255,255,0.45);
    padding: 4px 20px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.product-link {
    text-decoration: none;
}

.auth-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #eee;
    padding: 20px;
    box-sizing: border-box;
}

.auth-box {
    background-color: #1c1f26;
    padding: 30px;
    border-radius: 20px;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    font-family: "Tajawal", sans-serif;
    font-style: normal;
    font-weight: bold;
}

.auth-box .auth-subtitle {
    color: #ff8c00;
    font-size: .8rem;
    margin-top: 10px;
}

.auth-box .auth-form {
    background-color: transparent;
    width: 100%;
    padding: 0;
    max-width: 100%;
}

.auth-box .auth-form input {
    background-color: #282b32;
    width: 100%;
    color: #eee;
}

.auth-box .auth-form .fas {
    left: 10px;
}

.auth-box .auth-form label,
.auth-box p {
    color: #eee;
    font-size: .6rem;
}

.auth-box .auth-form label,
.auth-box .auth-footer p,
.auth-box a {
    font-size: .75rem;
}

.auth-box hr {
    width: 100%;
    margin: 10px 0;
}

.auth-header {
    text-align: center;
    margin-bottom: 15px;
}

.auth-logo {
    width: 150px;
    height: auto;
    margin-bottom: 20px;
    border-radius: 10px;
}

.auth-title {
    color: #FF8C00;
    font-size: 2.5em;
    margin: 0;
}

.auth-form {
    background-color: #ddd;
    padding: 30px;
    border-radius: 10px;
    width: 90%;
    max-width: 400px;
    text-align: center;
}

.input-group {
    position: relative;
    margin: 10px 0;
}

.input-group span {
    position: absolute;
    left: 55px;
    top: 50%;
    transform: translateY(-50%);
    direction: ltr;
}

.input-group input,
.input-group textarea,
.input-group select {
    width: calc(100% - 40px);
    background-color: #eee;
    border: none;
    border-radius: 20px;
    padding: 12px 15px;
    padding-left: 40px;
    color: #333;
    font-size: 1em;
    box-sizing: border-box;
}

.familyServices .input-group input {
    padding-left: 75px;
}

.input-group textarea {
    border-radius: 10px;
    resize: vertical;
    padding-right: 15px;
}

.input-group select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-left: 15px;
}

.input-group input:focus,
.input-group textarea:focus {
    outline: #FF8C00 solid 2px;
}

.input-group .fas {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    color: #FF8C00;
}

.checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: 0.9em;
}

.checkbox-group a {
    color: #FF8C00;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    accent-color: #FF8C00;
}

.checkbox-group label {
    color: #333;
    margin-right: 10px;
}

.auth-button,
.save-button,
.upgrade-button,
.submit-product-btn,
.buy-all-button,
.accept-btn {
    background-color: #FF8C00;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 20px auto 0 auto;
}

.auth-button i,
.save-button i,
.upgrade-button i,
.submit-product-btn i,
.buy-all-button i {
    margin-left: 10px;
}

.auth-button:hover,
.save-button:hover,
.upgrade-button:hover,
.submit-product-btn:hover,
.buy-all-button:hover,
.accept-btn:hover {
    background-color: #e67e00;
    transform: translateY(-2px);
}

.forgot-password {
    color: #FF8C00;
    text-decoration: none;
    font-size: 0.9em;
    margin-top: 15px;
    display: block;
}

.forgot-password:hover {
    text-decoration: underline;
}

.auth-footer {
    color: #333;
    font-size: 0.95em;
}

.auth-footer a {
    color: #FF8C00;
    text-decoration: none;
    font-weight: bold;
}

.auth-footer a:hover {
    text-decoration: underline;
}

.product-detail-section {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.product-image-large {
    display: flex;
    justify-content: center;
}

.section-title {
    color: #ff8c00;
    font-size: 1.8em;
    margin-top: 30px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #444;
    display: flex;
    align-items: center;
}

.section-title i {
    margin-left: 10px;
    font-size: 1.1em;
}

.horizontal-scroll-container {
    display: flex;
    overflow-x: auto;
    padding-bottom: 15px;
    -webkit-overflow-scrolling: touch;
    gap: 15px;
}

.vertical-scroll-container div {
    width: inherit;
    margin-bottom: 10px;
}

.vertical-scroll-container .product-card {
    background-color: #eee;
}

.product-card-small {
    flex: 0 0 auto;
    width: 180px;
    background-color: #eee;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    transition: transform 0.2s ease;
    position: relative;
}

.product-card-small:hover {
    transform: translateY(-3px);
}

.product-card-small img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 10px;
}

.product-info-small h3 {
    margin: 0 0 5px 0;
    font-size: 1em;
    color: #ff8c00;
    min-height: 50px;
    white-space: normal;
}

.product-info-small .rating {
    margin-bottom: 5px;
}

.product-info-small .price {
    font-size: 0.9em;
    margin-bottom: 10px;
}

.add-to-cart-btn-small {
    background-color: #ff8c00;
    color: #eee;
    border: none;
    padding: 8px 12px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 0.8em;
    transition: background-color 0.3s ease;
}

.add-to-cart-btn-small:hover {
    background-color: #e77f00;
}

.product-details-content,
.comments-section {
    background-color: #eee;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    color: #444;
    line-height: 1.6;
}

.comments-section a {
    text-align: left;
    width: 100%;
    display: block;
    color: #ff8c00;
}

.comments {
    background-color: #ddd;
    padding: 10px;
    border-radius: 10px;
    margin: 10px 0;
}

.comments span {
    margin-top: 10px;
    width: 100%;
    font-size: .8rem;
    justify-content: space-between;
    align-self: center;
    display: flex;
}

.comments span div {
    width: 40%;
    align-items: center;
    display: flex;
    justify-content: space-around;
    align-self: center;
}

.comments span button {
    background-color: transparent;
    border: none;
}

.comments i {
    color: #555;
    font-size: .8rem;
    margin-left: 3px;
}

.comments .fas.fa-star.gold {
    color: gold;
}

.comments-section input,
.send input {
    padding: 5px 10px;
    background-color: #ddd;
    border: none;
    color: #333;
    border-radius: 10px;
    width: 75%;
    height: 20px;
}

.send input {
    background-color: #222;
}

.comments-section button,
.send button {
    padding: 5px 10px;
    border: none;
    background-color: #ff8c00;
    border-radius: 10px;
    color: #fff;
}

.comments-section .commentStar {
    color: #333;
    text-align: center;
    text-decoration: none;
    border: solid 2px #333;
    border-radius: 10px;
    width: 35px;
}

.group {
    overflow: auto;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-bottom: 10px;
    border-radius: 10px;
    padding: 15px 0;
}

.group a {
    text-decoration: none;
    color: #333;
    flex: 0 0 auto;
}

.group span {
    background-color: #eee;
    padding: 5px 10px;
    border-radius: 20px;
    margin: 0 5px;
}

/* ══════════════════════════════════════════════════
   infoDiv — Checkout Modal  (redesigned Feb 2026)
   ══════════════════════════════════════════════════ */

/* ── Overlay ── */
.infoDiv {
    position: fixed;
    inset: 0;
    z-index: 9800;
    background: rgba(6, 8, 20, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: flex-end;   /* bottom-sheet on mobile */
    padding: 0;
    box-sizing: border-box;
    animation: infoDivFadeIn .22s ease;
}
@keyframes infoDivFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Card ── */
.info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
    width: 100%;
    max-width: 560px;
    border-radius: 24px 24px 0 0;   /* bottom-sheet style */
    max-height: 92dvh;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 -8px 40px rgba(0,0,0,.35);
    font-family: 'Tajawal', sans-serif;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,140,0,.35) transparent;
    animation: infoSlideUp .28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes infoSlideUp {
    from { transform: translateY(60px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* on larger screens → center it like a dialog */
@media (min-width: 600px) {
    .infoDiv {
        align-items: center;
        padding: 16px;
    }
    .info {
        border-radius: 24px;
        box-shadow: 0 24px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,140,0,.1);
    }
}

/* Full-width grid items */
.info h3,
.info .btn,
.infoDiv .payment,
.infoDiv .or {
    grid-column: 1 / -1;
}

/* ── Header ── */
.info h3 {
    background: linear-gradient(135deg, #1a1f35 0%, #232f3e 100%);
    color: #FF8C00;
    font-family: 'Tajawal', sans-serif;
    font-size: 1.08rem;
    font-weight: 800;
    padding: 18px 20px;
    margin: 0;
    border-radius: 24px 24px 0 0;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.2px;
    border-bottom: 2px solid rgba(255,140,0,.2);
    grid-row: 1;
    position: sticky;
    top: 0;
    z-index: 2;
}
@media (min-width: 600px) {
    .info h3 { border-radius: 24px 24px 0 0; }
}

/* ── Section divider label ── */
.info-section-label {
    grid-column: 1 / -1;
    font-family: 'Tajawal', sans-serif;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #FF8C00;
    background: rgba(255,140,0,.06);
    border-top: 1px solid rgba(255,140,0,.12);
    padding: 8px 20px 6px;
    margin: 8px 0 0;
}

/* ── Two-column name row ── */
label[for="fName"] {
    grid-column: 1;
    grid-row: 2;
    margin: 14px 12px 5px 20px;
    color: #4b5472;
    font-size: 0.82rem;
    font-weight: 700;
}
label[for="lName"] {
    grid-column: 2;
    grid-row: 2;
    margin: 14px 20px 5px 12px;
    color: #4b5472;
    font-size: 0.82rem;
    font-weight: 700;
}
#fName {
    grid-column: 1;
    grid-row: 3;
    width: auto !important;
    margin: 0 12px 4px 20px !important;
}
#lName {
    grid-column: 2;
    grid-row: 3;
    width: auto !important;
    margin: 0 20px 4px 12px !important;
}

/* ── All other labels (full-width) ── */
.infoDiv label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: #4b5472;
    margin: 12px 20px 5px;
    grid-column: 1 / -1;
}

/* ── All inputs & selects ── */
.infoDiv input:not([type="radio"]),
.infoDiv select {
    display: block;
    width: calc(100% - 40px);
    margin: 0 20px 4px;
    color: #1a1f35;
    padding: 0 14px;
    height: 48px;
    background: #f6f7fc;
    border: 1.5px solid #e3e6f0;
    border-radius: 13px;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.95rem;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s, background .2s;
    grid-column: 1 / -1;
    direction: rtl;
}
.infoDiv input:not([type="radio"]):focus,
.infoDiv select:focus {
    outline: none;
    border-color: #FF8C00;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255,140,0,.13);
}
.infoDiv input::placeholder { color: #a8afc4; }

/* ── Payment section ── */
.infoDiv .payment {
    background: #f6f7fc;
    border-radius: 14px;
    padding: 8px 14px 14px;
    margin: 6px 20px 0;
    border: 1.5px solid #e3e6f0;
}

/* OR divider pill */
.infoDiv .or {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin: 4px 0;
}
.infoDiv .or::after {
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    content: "";
    background: #e3e6f0;
}
.infoDiv .or p {
    margin: 10px 0;
    background: #f6f7fc;
    padding: 4px 16px;
    z-index: 1;
    font-size: .82rem;
    font-weight: 800;
    color: #FF8C00;
    font-family: 'Tajawal', sans-serif;
    border: 1px solid rgba(255,140,0,.28);
    border-radius: 20px;
}

/* Payment option cards */
.infoDiv .payment > label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin: 8px 0 0 !important;
    background: #fff;
    border: 1.5px solid #e3e6f0;
    border-radius: 12px;
    cursor: pointer;
    font-size: .93rem !important;
    font-weight: 700 !important;
    color: #3a4260 !important;
    transition: border-color .2s, background .2s, color .2s;
    width: auto !important;
    height: auto !important;
    grid-column: unset;
}
.infoDiv .payment > label:has(input[type="radio"]:checked) {
    border-color: #FF8C00;
    background: rgba(255,140,0,.06);
    color: #FF8C00 !important;
}
.infoDiv .payment > label input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    accent-color: #FF8C00;
    cursor: pointer;
    flex-shrink: 0;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ShamCash hidden panel */
#shamCash {
    display: none;
    margin-top: 10px;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    border: 1.5px solid rgba(255,140,0,.25);
}

/* ── Action bar (sticky at bottom) ── */
.info .btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px 20px;
    gap: 10px;
    margin: 8px 0 0;
    border-top: 1px solid #eef0f6;
    background: #fff;
    position: sticky;
    bottom: 0;
    z-index: 2;
}

.info .btn button {
    background: linear-gradient(135deg, #FF8C00, #e07800);
    color: #fff;
    border: none;
    border-radius: 13px;
    padding: 13px 24px;
    font-family: 'Tajawal', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    flex: 1;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 4px 18px rgba(255,140,0,.35);
    letter-spacing: .3px;
    min-height: 48px;
}
.info .btn button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255,140,0,.48);
}
.info .btn button:active { transform: translateY(0); }

.info .btn a {
    color: #b0b8cc;
    font-family: 'Tajawal', sans-serif;
    font-size: .86rem;
    text-decoration: none;
    cursor: pointer;
    padding: 10px 8px;
    transition: color .2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.info .btn a:hover { color: #e05252; }

/* ── Mobile: stack name fields to single column ── */
@media (max-width: 420px) {
    .info { grid-template-columns: 1fr; }
    label[for="fName"], label[for="lName"],
    #fName, #lName {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        width: calc(100% - 40px) !important;
        margin-right: 20px !important;
        margin-left: 20px !important;
    }
    label[for="fName"] { margin-top: 14px !important; margin-bottom: 5px !important; }
    label[for="lName"] { margin-bottom: 5px !important; }
    #fName { margin-bottom: 4px !important; }
    #lName { margin-bottom: 4px !important; }
}

/* ── .info form — paragraph & payment section clarity ── */

/* "هل معلوماتك صحيحة؟" — question title */
.info > p:first-of-type {
    grid-column: 1 / -1;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.97rem !important;
    font-weight: 800 !important;
    color: #1a1f35 !important;
    margin: 14px 20px 4px !important;
    padding: 0 !important;
}
/* Delivery price info */
.info > p:nth-of-type(2) {
    grid-column: 1 / -1;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.81rem !important;
    color: #5a6480 !important;
    line-height: 1.6 !important;
    margin: 0 20px 10px !important;
    padding: 9px 14px !important;
    background: rgba(59,130,246,.06) !important;
    border: 1px solid rgba(59,130,246,.14) !important;
    border-radius: 11px !important;
}
/* Phone hint: "يرجى التأكد من الرقم جيداً" */
.info > p:nth-of-type(3) {
    grid-column: 1 / -1;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #b85c00 !important;
    margin: 4px 20px 6px !important;
    padding: 9px 14px !important;
    background: rgba(255,140,0,.08) !important;
    border: 1px solid rgba(255,140,0,.25) !important;
    border-radius: 11px !important;
    display: block !important;
}
/* Village hint */
.info > p:nth-of-type(4) {
    grid-column: 1 / -1;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.80rem !important;
    font-weight: 600 !important;
    color: #6b7494 !important;
    margin: 4px 20px 4px !important;
    padding: 8px 14px !important;
    background: #f6f7fc !important;
    border: 1px solid #e3e6f0 !important;
    border-radius: 11px !important;
    display: block !important;
    line-height: 1.55 !important;
}
/* "طريقة الدفع:" h3 */
.info h3[style] {
    background: linear-gradient(135deg, #1a1f35, #232f3e) !important;
    color: #FF8C00 !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    padding: 13px 20px 11px !important;
    margin: 10px 0 0 !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    border-top: none !important;
    grid-column: 1 / -1 !important;
    grid-row: unset !important;
    position: static !important;
}
/* Inline radio payment labels */
.info > div[style*="flex"] {
    grid-column: 1 / -1;
    gap: 10px !important;
    padding: 0 20px 6px !important;
    flex-wrap: wrap !important;
}
.info > div[style*="flex"] > label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Tajawal', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #3a4260 !important;
    background: #f6f7fc !important;
    border: 1.5px solid #e3e6f0 !important;
    border-radius: 12px !important;
    padding: 11px 16px !important;
    cursor: pointer !important;
    transition: border-color .2s, background .2s, color .2s !important;
    flex: 1;
    min-width: 120px;
    justify-content: center;
}
.info > div[style*="flex"] > label:has(input:checked) {
    border-color: #FF8C00 !important;
    background: rgba(255,140,0,.08) !important;
    color: #FF8C00 !important;
}
/* ShamCash QR section */
#shamCash { grid-column: 1 / -1; text-align: center; }
#shamCash p { font-size: 0.82rem !important; color: #5a6480 !important; margin: 6px 0 10px !important; line-height: 1.5 !important; }

/* ── Dark mode overrides ── */
html.dilbox-dark .info {
    background: #1a1f35 !important;
}
html.dilbox-dark .info > p:first-of-type { color: #e0e2ec !important; }
html.dilbox-dark .info > p:nth-of-type(2) {
    color: #8a90a8 !important;
    background: rgba(59,130,246,.07) !important;
    border-color: rgba(59,130,246,.18) !important;
}
html.dilbox-dark .info > p:nth-of-type(3) {
    color: #e8900a !important;
    background: rgba(255,140,0,.1) !important;
    border-color: rgba(255,140,0,.3) !important;
}
html.dilbox-dark .info > p:nth-of-type(4) {
    color: #8a90a8 !important;
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.08) !important;
}
html.dilbox-dark .infoDiv label { color: #8a90a8 !important; }
html.dilbox-dark .infoDiv input:not([type="radio"]),
html.dilbox-dark .infoDiv select {
    background: #242840 !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #e0e2ec !important;
}
html.dilbox-dark .infoDiv input:focus,
html.dilbox-dark .infoDiv select:focus {
    background: #2a2f4a !important;
    border-color: #FF8C00 !important;
}
html.dilbox-dark .infoDiv .payment {
    background: #242840 !important;
    border-color: rgba(255,255,255,.1) !important;
}
html.dilbox-dark .infoDiv .payment > label {
    background: #1a1f35 !important;
    border-color: rgba(255,255,255,.1) !important;
    color: #c0c4d4 !important;
}
html.dilbox-dark .infoDiv .payment > label:has(input:checked) {
    border-color: #FF8C00 !important;
    background: rgba(255,140,0,.1) !important;
    color: #FF8C00 !important;
}
html.dilbox-dark .info .btn {
    background: #1a1f35 !important;
    border-top-color: rgba(255,255,255,.08) !important;
}
html.dilbox-dark .info > div[style*="flex"] > label {
    background: #242840 !important;
    border-color: rgba(255,255,255,.1) !important;
    color: #c0c4d4 !important;
}
html.dilbox-dark .info > div[style*="flex"] > label:has(input:checked) {
    border-color: #FF8C00 !important;
    background: rgba(255,140,0,.1) !important;
    color: #FF8C00 !important;
}

/* ── Sidebar dark mode toggle button ── */
.sb-dark-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px 14px;
    border-top: 1px solid rgba(255,255,255,.07);
    margin-top: auto;
}
.sb-dark-toggle-label {
    font-family: 'Tajawal', sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    color: rgba(255,255,255,.6);
    display: flex;
    align-items: center;
    gap: 8px;
}
#darkModeBtn {
    background: rgba(255,255,255,.1);
    border: 1.5px solid rgba(255,255,255,.15);
    border-radius: 50px;
    padding: 6px 14px;
    color: rgba(255,255,255,.7);
    font-size: 1em;
    cursor: pointer;
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: background .25s, border-color .25s, color .25s;
    white-space: nowrap;
}
#darkModeBtn:hover {
    background: rgba(255,215,0,.18);
    border-color: rgba(255,215,0,.4);
    color: #FFD700;
}
html.dilbox-dark #darkModeBtn {
    background: rgba(255,215,0,.12);
    border-color: rgba(255,215,0,.35);
    color: #FFD700;
}

/* Copy phone button in buyer-group */
.buyer-phone-copy {
    background: none;
    border: none;
    color: rgba(255,255,255,.5);
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 6px;
    font-size: .8em;
    transition: color .2s, background .2s;
    vertical-align: middle;
    margin-right: 3px;
}
.buyer-phone-copy:hover { color: #25d366; background: rgba(37,211,102,.15); }
.buyer-phone-copy.copied { color: #25d366; }

.ratingMainDiv {
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 112;
    display: flex;
    background-color: #00000080;
    top: 0;
    justify-content: center;
    align-items: center;
}

.ratingDiv {
    background-color: #222;
    padding: 15px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}

.ratingDiv .star {
    margin: 10px;
    background-color: transparent;
    border: none;
    font-size: 1rem;
}

.commentBtn {
    display: flex;
    justify-content: space-around;
}

.commentBtn #closeBtn {
    background-color: transparent;
    border: none;
    color: #fff;
}

.commentBtn #send {
    background-color: #ff8c00;
    border: none;
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
}

.send {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 10px;
    background-color: #333;
}

.product-details-content input {
    background-color: #ddd;
    border: none;
    border-radius: 20px;
    padding: 8px 15px;
    color: #444;
    width: 50px;
}

.profile-form {
    text-align: center;
}

.profile-section .profile-form {
    background-color: #ddd;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
}

.profile-section .profile-form .input-group {
    margin-bottom: 15px;
}

.profile-section .profile-form .save-button {
    margin-top: 20px;
    margin-right: 0;
    margin-left: auto;
}

.upgrade-section {
    background-color: #ddd;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.image-upload-section {
    margin-bottom: 30px;
}

.image-upload-box {
    border: 2px dashed #666;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    position: relative;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.image-upload-box p {
    color: #bbb;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
}

.onsell {
    overflow: auto;
    display: flex;
    background-color: #fff;
    margin: 10px 0;
}

footer {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    padding: 10px;
    text-align: center;
}

footer a,
footer button {
    margin: 5px 0;
    color: #ff8c00;
    text-decoration: none;
    font-size: 1.1rem;
}

footer button {
    border: none;
    background-color: transparent;
}

footer hr {
    margin: 10px 0;
}

.quantity {
    background-color: #ac2626;
    color: #eee;
    padding: 5px 10px;
    border-radius: 20px;
}

#products {
    display: none;
    background-color: #eee;
    padding: 10px;
    border-radius: 10px;
}

#products div {
    margin: 10px;
}

#products img {
    border-radius: 10px;
}

#products button {
    margin: 10px;
}

#productsName {
    margin: 10px;
}

#productsName div {
    margin: 10px;
    background-color: #ff8c00;
    padding: 5px 10px;
    border-radius: 20px;
    color: #eee;
    margin: 10px;
}

#productsName button {
    border: solid 2px #eee;
    background-color: transparent;
    color: #eee;
    margin-right: 10px;
    padding: 1px 5px;
    border-radius: 50%;
}

footer p {
    font-size: 1.1rem;
}

.onsell div {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 15px 5px;
    padding: 0;
}

.onsell div img {
    height: 60px;
    border-radius: 50%;
}

.image-upload-box:hover {
    border-color: #FF8C00;
}

.image-upload-box i {
    font-size: 3em;
    color: #FF8C00;
    margin-bottom: 10px;
}

.image-upload-box p {
    background-color: #22222290;
    padding: 10px;
    border-radius: 10px;
    color: #eee;
    margin: 0;
}

.image-upload-box .file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upgrade-button {
    margin-top: 30px;
    width: auto;
    margin-right: 0;
    margin-left: auto;
}

.add-product-section {
    background-color: #ddd;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.product-form {
    text-align: center;
}

.product-form .input-group {
    margin-bottom: 20px;
}

.product-form textarea {
    min-height: 100px;
}

.submit-product-btn {
    margin-top: 30px;
    width: auto;
    margin-right: 0;
    margin-left: auto;
}

.records-section {
    background-color: #ddd;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.records-section {
    overflow-wrap: anywhere;
}

.record-item {
    display: flex;
    align-items: center;
    background-color: #eee;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.record-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
    margin-left: 15px;
}

.record-details {
    flex-grow: 1;
}

.order-details {
    gap: 6px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.note {
    width: 90%;
    padding: 5px 10px;
    border-radius: 10px;
    background-color: #ddd;
    color: #333;
    border: none;
}

.details {
    text-align: right;
}

.details hr {
    margin: 10px 0;
}

.record-details p {
    margin: 0 0 10px 0;
    color: #eee;
    font-size: 1em;
}

.view-product-link {
    color: #FF8C00;
    text-decoration: none;
    font-size: 0.9em;
}

.view-product-link:hover {
    text-decoration: underline;
}

.basket-section {
    background-color: #ddd;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.basket-item,
.history-item {
    display: flex;
    align-items: center;
    background-color: #eee;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.basket-item img,
.history-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 5px;
    margin-left: 15px;
}

.basket-details {
    flex-grow: 1;
    width: 85%;
}

.basket-details p {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 1em;
}

.basket-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.action-button {
    text-decoration: none;
    background-color: #FF8C00;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
}

.action-button.remove-button,
.removeNoti {
    background-color: #dc3545;
}

.action-button:hover {
    background-color: #e67e00;
}

.action-button.remove-button:hover,
.removeNoti:hover {
    background-color: #c82333;
}

.removeNoti {
    border: none;
    border-radius: 20px;
    padding: 5px 10px;
    color: #eee;
}

.buy-all-button {
    display: block;
    width: fit-content;
    margin: 30px auto 0 auto;
}

@media (max-width: 768px) {
    .navbar {
        justify-content: space-between;
        padding: 10px 15px;
    }

    .navbar-left {
        width: auto;
        justify-content: flex-start;
    }

    .search-bar {
        flex-grow: 1;
        margin-right: 10px;
    }

    .search-bar input {
        width: 75%;
        padding-right: 35px;
    }

    .logo {
        font-size: 24px;
        margin-left: 10px;
    }

    .cart-icon,
    .menu-icon {
        font-size: 20px;
        margin-right: 10px;
    }

    .filter-scroll-container {
        padding: 0 10px;
    }

    .filter-item {
        margin-left: 5px;
        padding: 6px 12px;
        font-size: 0.9em;
    }

    .product-card {
        text-align: center;
    }

    .product-card img {
        width: 100%;
        margin-left: 0;
        margin-bottom: 15px;
    }

    .product-image-large img {
        width: 100%;
        margin-left: 0;
        margin-bottom: 0;
    }

    .product-info {
        padding-right: 0;
    }

    .sidebar {
        width: 250px;
    }

    .auth-form {
        padding: 20px;
    }

    .auth-title {
        font-size: 2em;
    }

    .auth-button,
    .save-button,
    .upgrade-button,
    .submit-product-btn,
    .buy-all-button {
        padding: 10px 20px;
        font-size: 1em;
    }

    .section-title {
        font-size: 1.5em;
    }

    .record-item,
    .basket-item,
    .history-item {
        flex-direction: column;
        text-align: center;
    }

    .record-item img,
    .basket-item img,
    .history-item img {
        margin-left: 0;
        margin-bottom: 10px;
    }

    .basket-actions {
        flex-direction: column;
        gap: 8px;
    }

    .action-button {
        width: 100%;
    }

    .add-category-group,
    .add-color-group,
    .add-size-group,
    .add-sizeNum-group,
    .add-shoes-group {
        flex-direction: column;
        align-items: stretch;
    }

    .add-category-group input,
    .add-color-group input,
    .add-size-group input,
    .add-sizeNum-group input,
    .add-shoes-group input {
        border-radius: 20px;
        margin-bottom: 10px;
        flex-grow: 1;
        padding-left: 40px;
    }

    .add-new-category-btn,
    .add-new-color-btn,
    .add-new-size-btn,
    .add-new-sizeNum-btn,
    .add-new-shoes-btn {
        width: 100%;
        margin-right: 0;
        border-radius: 20px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {

    .product-grid,
    .group-card {
        grid-template-columns: repeat(auto-fit, minmax(200px, 2fr));
    }
}

@media (min-width:320px) and (max-width: 480px) {

    .product-grid,
    .group-card {
        grid-template-columns: repeat(auto-fit, minmax(140px, 2fr));
        gap: 10px;
    }

    .navbar {
        padding: 8px 10px;
    }

    .logo {
        font-size: 20px;
    }

    .search-bar input {
        padding: 6px 10px;
        padding-right: 30px;
        font-size: 0.9em;
    }

    .search-bar .fas.fa-search {
        right: 10px;
    }

    .cart-icon,
    .menu-icon {
        font-size: 18px;
    }

    .filter-item {
        font-size: 0.8em;
        padding: 5px 10px;
    }

    .product-card {
        padding: 10px;
    }

    .product-info h3 {
        font-size: .9em;
    }

    .add-to-cart-btn {
        padding: 8px 12px;
        font-size: 0.8em;
    }

    .sidebar {
        width: 75%;
        right: -100%;
    }

    .sidebar.active {
        right: 0;
    }

    .auth-form {
        padding: 15px;
    }

    .auth-title {
        font-size: 1.8em;
    }

    .input-group input,
    .input-group textarea,
    .input-group select {
        padding: 10px 12px;
        padding-left: 35px;
        font-size: 0.9em;
    }

    .auth-button,
    .save-button,
    .upgrade-button,
    .submit-product-btn,
    .buy-all-button {
        padding: 8px 18px;
        font-size: 0.9em;
    }

    .section-title {
        font-size: 1.3em;
    }

    .product-card-small {
        width: 150px;
    }

    .add-to-cart-btn-small {
        font-size: 0.7em;
        padding: 6px 10px;
    }

    .record-item p,
    .basket-item p,
    .history-item p {
        font-size: 0.9em;
    }

    .add-category-group .fas,
    .add-color-group .fas,
    .add-size-group .fas,
    .add-sizeNum-group .fas,
    .add-shoes-group .fas {
        top: 40%;
        left: 30px;
    }
}

@media (max-width:320px) {

    .product-grid,
    .group-card {
        grid-template-columns: repeat(auto-fit, minmax(100px, 2fr));
        gap: 10px;
    }
}

.custom-select-wrapper {
    position: relative;
    width: 100%;
    text-align: right;
}

.product-form .input-add {
    margin: 0px !important;
}

.btn-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.select-selected {
    background-color: #eee;
    border: none;
    border-radius: 20px;
    padding: 20px 15px;
    padding-right: 40px;
    color: #444;
    font-size: 1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.select-selected:focus {
    outline: #FF8C00 solid 2px;
}

.select-selected .dropdown-arrow {
    margin-right: 10px;
    transition: transform 0.3s ease;
}

.select-selected.select-arrow-active .dropdown-arrow {
    top: 35%;
    transform: rotate(180deg);
}

.select-items {
    position: absolute;
    background-color: #ddd;
    border-radius: 10px;
    z-index: 99;
    top: 100%;
    right: 0;
    left: 0;
    margin-top: 5px;
    padding: 10px;
    max-height: 200px;
    overflow-y: auto;
}

.select-hide {
    display: none;
}

.select-items label {
    display: block;
    padding: 8px 10px;
    color: #444;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.select-items label:hover {
    background-color: #ccc;
}

.select-items label input[type="checkbox"] {
    margin-right: 10px;
    accent-color: #FF8C00;
}

.selected-categories-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 5px;
    border-radius: 8px;
    min-height: 40px;
    align-items: center;
    justify-content: flex-end;
}

.category-tag,
.color-tag,
.size-tag,
.sizeNum-tag,
.shoes-tag {
    background-color: #FF8C00;
    color: white;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.category-tag:hover,
.color-tag:hover,
.size-tag:hover,
.sizeNum-tag:hover,
.shoes-tag:hover {
    background-color: #e67e00;
}

.category-tag .remove-tag-btn,
.color-tag .remove-tag-btn,
.size-tag .remove-tag-btn,
.sizeNum-tag .remove-tag-btn,
.shoes-tag .remove-tag-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.1em;
    margin-right: 8px;
    cursor: pointer;
    padding: 0;
}

.add-category-group {
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 30px;
}

.add-category-group input {
    flex-grow: 1;
    padding-left: 40px;
}

.add-category-group .fas {
    left: 30px;
}

.add-new-category-btn,
.add-new-color-btn,
.add-new-size-btn,
.add-new-sizeNum-btn,
.add-new-shoes-btn {
    background-color: #FF8C00;
    color: white;
    border: none;
    padding: 12px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
    margin-right: -20px;
    z-index: 1;
    margin-right: 10px;
}

.add-new-category-btn:hover {
    background-color: #ff9a20;
}

.selected-colors-container,
.selected-sizes-container,
.selected-sizesNum-container,
.selected-shoes-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 5px;
    border-radius: 8px;
    min-height: 40px;
    align-items: center;
    justify-content: flex-end;
}

#sizes,
#sizesNum,
#shoes {
    display: none;
}

.color-tag,
.size-tag,
.sizeNum-tag,
.shoes-tag,
.category-tag {
    color: white;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.2s ease;
    border: 1px solid #555;
}

.color-tag .color-box,
.size-tag .color-box,
.sizeNum-tag .color-box,
.shoes-tag .color-box {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-right: 8px;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.color-tag .remove-tag-btn,
.size-tag .remove-tag-btn,
.sizeNum-tag .remove-tag-btn,
.shoes-tag .remove-tag-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.1em;
    margin-right: 8px;
    cursor: pointer;
    padding: 0;
}

.add-color-group,
.add-size-group,
.add-sizeNum-group,
.add-shoes-group {
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 30px;
    justify-content: center;
}

.add-new-color-btn:hover,
.add-new-size-btn:hover,
.add-new-sizeNum-btn:hover,
.add-new-shoes-btn:hover {
    background-color: #ff9a20;
}

.password-requirements p,
#passwordMatch {
    color: #dc3545;
    font-size: 0.85em;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: right;
}

.password-requirements p.valid,
#passwordMatch.valid {
    color: #28a745;
}

.error,
.success {
    position: fixed;
    z-index: 11111;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin: 30px 0;
    top: 0;
}

.error p,
.success p {
    background-color: #feb2b4;
    color: #000;
    width: 80%;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    z-index: 1000;
    font-weight: bold;
}

.error .fas,
.success .fas {
    border: solid 2px #000;
    border-radius: 100px;
    padding: 5px 10px;
    margin-left: 10px;
}

.success .fas {
    padding: 5px 5px;
}

.success p {
    background-color: #7cff79;
}

pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-wrap: break-word;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0;
    padding: .5rem;
    font-family: monospace;
}

/* ===== PROFESSIONAL AMAZON-STYLE ENHANCEMENTS ===== */

/* Google Fonts - Tajawal for Arabic */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');

body {
    font-family: 'Tajawal', 'Inter', sans-serif;
}

/* CSS Variables for consistent theming */
:root {
    --primary: #FF8C00;
    --primary-dark: #e67e00;
    --primary-light: #fff3e0;
    --secondary: #232f3e;
    --secondary-light: #37475a;
    --bg-main: #f0f2f2;
    --bg-card: #ffffff;
    --bg-subtle: #f7f8f8;
    --text-primary: #0f1111;
    --text-secondary: #565959;
    --text-light: #888c8c;
    --border: #ddd;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 2px 10px rgba(0,0,0,0.12);
    --shadow-lg: 0 4px 20px rgba(0,0,0,0.15);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 25px;
}

/* ===== NAVBAR UPGRADE ===== */
.navbar {
    background: linear-gradient(135deg, var(--secondary) 0%, #1a252f 100%) !important;
    box-shadow: var(--shadow-md);
    border-bottom: 3px solid var(--primary);
}

.navbar a { text-decoration: none; }

.logo {
    color: var(--primary) !important;
    font-family: 'Tajawal', sans-serif;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.logo i {
    font-size: 0.7em;
    margin-right: 4px;
    opacity: 0.8;
}

.search-bar input {
    background-color: #fff !important;
    border: 2px solid transparent !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-primary) !important;
    font-family: 'Tajawal', sans-serif;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 280px !important;
}

.search-bar input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(255,140,0,0.2) !important;
    outline: none !important;
}

.search-bar .fas.fa-search {
    color: var(--primary) !important;
}

.cart-icon {
    color: #fff !important;
    transition: color 0.2s;
}

.cart-icon:hover { color: var(--primary) !important; }

.menu-icon {
    color: #fff !important;
    transition: color 0.2s;
}

.menu-icon:hover { color: var(--primary) !important; }

/* ===== FILTER NAV UPGRADE ===== */
.filter-navbar {
    background: var(--secondary-light) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 8px 0 !important;
}

.filter-item {
    background-color: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.85em !important;
    padding: 6px 14px !important;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.filter-item:hover,
.filter-item.active {
    background-color: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary-dark) !important;
}

/* ===== HERO BANNER SECTION ===== */
/* ── Hero custom text animation ── */
@keyframes heroGlowPulse {
    0%   { text-shadow: 0 0 0px transparent; }
    50%  { text-shadow: 0 0 18px rgba(255,140,0,.55), 0 0 40px rgba(255,140,0,.2); }
    100% { text-shadow: 0 0 0px transparent; }
}
.hero-custom-anim {
    animation: heroGlowPulse 2.8s ease-in-out infinite;
}

/* ── Hero admin editor ── */
.hero-banner { position: relative; }

/* ── Hero Admin Trigger Button ── */
.hero-admin-wrap {
    position: absolute;
    top: 12px; left: 12px;
    z-index: 10;
}
.hero-edit-toggle {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,.15);
    border: 1.5px solid rgba(255,255,255,.25);
    color: #fff; font-size: .9em;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, border-color .2s;
    backdrop-filter: blur(4px);
}
.hero-edit-toggle:hover { background: rgba(255,140,0,.35); border-color: #FF8C00; }

/* ── Hero Editor Modal ── */
.hero-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(6px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: heroOverlayIn .2s ease;
}
.hero-modal-overlay.open { display: flex; }

@keyframes heroOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.hero-modal-box {
    background: #1a1f35;
    border: 1px solid rgba(255,140,0,.25);
    border-radius: 18px;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 24px 60px rgba(0,0,0,.6);
    animation: heroModalSlide .25s cubic-bezier(.34,1.56,.64,1);
    overflow: hidden;
    font-family: 'Tajawal', sans-serif;
    direction: rtl;
}
@keyframes heroModalSlide {
    from { transform: translateY(-24px) scale(.97); opacity: 0; }
    to   { transform: translateY(0) scale(1);       opacity: 1; }
}

.hero-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(255,140,0,.07);
}
.hero-modal-title {
    font-size: 1em; font-weight: 700; color: #fff;
    display: flex; align-items: center; gap: 8px;
}
.hero-modal-title i { color: #FF8C00; }
.hero-modal-close {
    width: 30px; height: 30px; border-radius: 8px;
    background: rgba(255,255,255,.1); border: none;
    color: rgba(255,255,255,.6); cursor: pointer; font-size: .9em;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, color .2s;
}
.hero-modal-close:hover { background: rgba(220,53,69,.3); color: #ff8888; }

.hero-modal-body { padding: 20px; }

.hero-edit-row { margin-bottom: 16px; }
.hero-edit-label {
    display: block;
    font-size: .78em; font-weight: 700;
    color: rgba(255,255,255,.5);
    margin-bottom: 6px;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.hero-edit-label i { margin-left: 5px; color: #FF8C00; }
.hero-edit-input {
    width: 100%; box-sizing: border-box;
    padding: 10px 14px;
    background: rgba(255,255,255,.07);
    border: 1.5px solid rgba(255,255,255,.15);
    border-radius: 10px;
    font-family: 'Tajawal', sans-serif;
    font-size: .95em; color: #fff;
    outline: none; direction: rtl;
    transition: border-color .2s, background .2s;
}
.hero-edit-textarea {
    resize: vertical; min-height: 80px;
    line-height: 1.6;
}
.hero-edit-input::placeholder { color: rgba(255,255,255,.28); }
.hero-edit-input:focus { border-color: #FF8C00; background: rgba(255,140,0,.06); }

/* Preview box inside modal */
.hero-edit-preview {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 4px;
}
.hero-preview-label {
    display: block;
    font-size: .72em; font-weight: 700;
    color: rgba(255,255,255,.35);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.hero-preview-label i { margin-left: 4px; color: #FF8C00; }
.hero-preview-title {
    font-size: 1.05em; font-weight: 700;
    color: #fff; margin-bottom: 4px;
    line-height: 1.4;
}
.hero-preview-sub {
    font-size: .84em; color: rgba(255,255,255,.6);
    line-height: 1.5;
}

.hero-modal-foot {
    padding: 14px 20px;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.2);
}
.hero-edit-status {
    font-size: .8em; text-align: center;
    min-height: 18px; margin-bottom: 10px;
    transition: color .2s;
}
.hero-edit-status.ok  { color: #5dde80; }
.hero-edit-status.err { color: #ff7777; }

.hero-modal-actions {
    display: flex; gap: 8px; align-items: center;
    flex-wrap: wrap;
}
.hero-save-btn, .hero-reset-btn, .hero-modal-cancel {
    padding: 9px 16px;
    border-radius: 10px;
    font-family: 'Tajawal', sans-serif;
    font-size: .88em; font-weight: 700;
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: opacity .2s, transform .15s, background .2s;
    white-space: nowrap;
}
.hero-save-btn {
    flex: 1;
    background: linear-gradient(135deg,#FF8C00,#e07000); color: #fff;
}
.hero-reset-btn {
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.7);
    border: 1px solid rgba(255,255,255,.15);
}
.hero-modal-cancel {
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.5);
    border: 1px solid rgba(255,255,255,.1);
}
.hero-save-btn:hover   { opacity: .88; transform: translateY(-1px); }
.hero-reset-btn:hover  { background: rgba(220,53,69,.22); color: #ff8888; border-color: rgba(220,53,69,.35); }
.hero-modal-cancel:hover { background: rgba(255,255,255,.12); color: rgba(255,255,255,.75); }
.hero-save-btn:disabled, .hero-reset-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.hero-banner {
    background: linear-gradient(135deg, var(--secondary) 0%, #1a3a5c 50%, #0d2137 100%);
    border-radius: var(--radius-lg);
    padding: 40px 30px;
    margin-bottom: 25px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-lg);
    width: 100%;
    box-sizing: border-box;
}

.hero-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,140,0,0.15) 0%, transparent 70%);
    border-radius: 50%;
}

.hero-banner::after {
    content: '';
    position: absolute;
    bottom: -30%;
    right: 10%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,140,0,0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.hero-content { position: relative; z-index: 1; }

.hero-content h2 {
    font-family: 'Tajawal', sans-serif;
    font-size: 2em;
    font-weight: 800;
    margin-bottom: 10px;
    color: #fff;
}

.hero-content p {
    font-family: 'Tajawal', sans-serif;
    color: rgba(255,255,255,0.8);
    font-size: 1.1em;
    margin-bottom: 20px;
}

.hero-btn {
    display: inline-block;
    background: var(--primary);
    color: #fff !important;
    padding: 12px 28px;
    border-radius: var(--radius-pill);
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
    font-size: 1em;
    text-decoration: none !important;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(255,140,0,0.4);
}

.hero-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,140,0,0.5);
}

.hero-icon {
    font-size: 5em;
    color: rgba(255,140,0,0.6);
    position: relative;
    z-index: 1;
}

/* ===== SECTION HEADERS UPGRADE ===== */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 25px 0 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary);
}

.section-header h2 {
    font-family: 'Tajawal', sans-serif;
    font-size: 1.4em;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-header h2 i { color: var(--primary); }

.section-badge {
    background: linear-gradient(135deg, #FF8C00, #e67e00);
    color: #fff;
    font-family: 'Tajawal', sans-serif;
    font-size: .75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 50px;
    letter-spacing: .5px;
}

.section-header a {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.9em;
    font-family: 'Tajawal', sans-serif;
}

.section-header a:hover { text-decoration: underline; }

/* ===== PRODUCT CARD UPGRADE ===== */
.product-card {
    background: var(--bg-card) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease !important;
    overflow: hidden;
    position: relative;
}

.product-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--primary);
}

.product-card img {
    border-radius: 0 !important;
    border-bottom: 1px solid #f0f0f0;
}

.product-info h3 {
    font-family: 'Tajawal', sans-serif;
    font-weight: 600;
    color: var(--text-primary) !important;
    font-size: 0.95em !important;
    line-height: 1.4;
    margin: 8px 0 4px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Product Badges */
.badge-new, .badge-sale, .badge-hot, .badge-out {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.72em;
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
    z-index: 2;
    letter-spacing: 0.3px;
}

.badge-new  { background: #00a651; color: #fff; }
.badge-sale { background: #dc3545; color: #fff; }
.badge-hot  { background: #ff6b35; color: #fff; }
.badge-out  { background: #888; color: #fff; }

/* Discount Badge */
.discountAmont {
    background: linear-gradient(135deg, #dc3545, #c0392b) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) var(--radius-sm) 0 var(--radius-sm) !important;
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
    font-size: 0.8em;
    padding: 4px 8px !important;
    box-shadow: 0 2px 5px rgba(220,53,69,0.4);
}

/* Price upgrade */
.price {
    font-family: 'Tajawal', sans-serif;
    font-weight: 800 !important;
    font-size: 1.1em !important;
    color: #b12704 !important;
}

/* ===== WISHLIST BUTTON ===== */
.wishlist-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 3;
    font-size: 0.9em;
    color: #888;
    box-shadow: var(--shadow-sm);
}

.wishlist-btn:hover, .wishlist-btn.active {
    color: #dc3545;
    border-color: #dc3545;
    transform: scale(1.1);
}

.wishlist-btn.active { background: #fff0f0; }

/* ===== ADD TO CART BUTTON UPGRADE ===== */
.add-to-cart-btn {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    padding: 10px 16px !important;
    font-family: 'Tajawal', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.88em !important;
    cursor: pointer;
    transition: all 0.2s !important;
    width: 100%;
    box-shadow: 0 2px 8px rgba(255,140,0,0.3);
    letter-spacing: 0.3px;
}

.add-to-cart-btn:hover {
    background: linear-gradient(135deg, var(--primary-dark), #cc6e00) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255,140,0,0.4) !important;
}

/* ===== STAR RATING UPGRADE ===== */
.rating .fas.fa-star.gold { color: #f0a500 !important; }
.rating .fas.fa-star { color: #d5d9d9 !important; }

.rating-count {
    font-size: 0.78em;
    color: #007185;
    margin-right: 4px;
    font-family: 'Tajawal', sans-serif;
}

/* ===== SIDEBAR DARK THEME OVERRIDE ===== */
.sidebar {
    background: linear-gradient(180deg, #1a1f35 0%, #141827 50%, #0f1120 100%) !important;
    box-shadow: -6px 0 30px rgba(0,0,0,0.35) !important;
    border-left: 1px solid rgba(255,255,255,0.06) !important;
}

.sidebar-header {
    background: rgba(255,140,0,0.06) !important;
    margin: 0 !important;
    padding: 18px 20px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.sidebar-header .logo { color: #fff !important; }

.sidebar-section-title {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 14px 20px 6px !important;
    margin-bottom: 0 !important;
    border-right: none !important;
    border-bottom: none !important;
    color: #FF8C00 !important;
    font-size: 0.75em !important;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    opacity: 0.9;
}

.sidebar-section-title h3 {
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
    font-size: 1em !important;
    color: #FF8C00 !important;
}

.sidebar-nav a {
    color: rgba(255,255,255,0.75) !important;
    font-family: 'Tajawal', sans-serif;
    padding: 9px 20px 9px 18px !important;
    border-radius: 0 !important;
    transition: all 0.2s !important;
}

.sidebar-nav a:hover {
    color: #FF8C00 !important;
    background: rgba(255,140,0,0.06) !important;
    padding-right: 20px !important;
}

/* ===== FOOTER UPGRADE ===== */
footer {
    background: linear-gradient(135deg, var(--secondary), #1a252f) !important;
    color: rgba(255,255,255,0.7) !important;
    padding: 30px 20px 20px !important;
    margin-top: 40px;
}

footer a, footer button {
    color: rgba(255,255,255,0.8) !important;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.95em !important;
    transition: color 0.2s;
}

footer a:hover, footer button:hover {
    color: var(--primary) !important;
}

footer hr {
    border-color: rgba(255,255,255,0.15) !important;
}

footer span, footer p {
    color: rgba(255,255,255,0.5) !important;
    font-size: 0.85em !important;
}

/* ===== TRUST BADGES ===== */
/* trust-bar kept for compatibility but hidden — replaced by trust-pills */
.trust-bar { display: none !important; }
.trust-item { display: none !important; }

/* ===== STATS BAR ===== */
.stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.stat-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 18px 15px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: all 0.2s;
}

.stat-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.stat-card .stat-number {
    font-family: 'Tajawal', sans-serif;
    font-size: 1.6em;
    font-weight: 800;
    color: var(--primary);
    display: block;
}

.stat-card .stat-label {
    font-family: 'Tajawal', sans-serif;
    font-size: 0.8em;
    color: var(--text-secondary);
    margin-top: 4px;
    display: block;
}

/* ===== DEAL COUNTDOWN TIMER ===== */
.deals-section {
    background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
    border-radius: var(--radius-lg);
    padding: 25px;
    margin-bottom: 25px;
    color: #fff;
    box-shadow: var(--shadow-lg);
}
/* Deal Tabs */
.deal-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.deal-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: 50px;
    background: transparent;
    color: rgba(255,255,255,0.6);
    font-family: 'Tajawal', sans-serif;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.deal-tab:hover { border-color: #FF8C00; color: #fff; }
.deal-tab.active {
    background: rgba(255,140,0,0.15);
    border-color: #FF8C00;
    color: #fff;
}
.deal-panel { display: none; }
.deal-panel.active { display: block; }
.manual-deals-section {
    background: linear-gradient(135deg, #1a0a2e, #1e1035, #150a25);
    border-radius: var(--radius-lg);
    padding: 25px;
    margin-bottom: 25px;
    color: #fff;
    box-shadow: var(--shadow-lg);
}
.manual-deals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
}
@media (max-width: 600px) {
    .manual-deals-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .deal-tabs { gap: 6px; }
    .deal-tab { padding: 6px 12px; font-size: .8rem; }
}

.deals-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.deals-title {
    font-family: 'Tajawal', sans-serif;
    font-size: 1.4em;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.deals-title i { color: var(--primary); }

.countdown-timer {
    display: flex;
    gap: 8px;
    align-items: center;
}

.countdown-unit {
    background: rgba(255,140,0,0.2);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    text-align: center;
    min-width: 44px;
}

.countdown-unit .count-num {
    display: block;
    font-family: 'Tajawal', sans-serif;
    font-size: 1.3em;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

.countdown-unit .count-label {
    display: block;
    font-size: 0.65em;
    color: rgba(255,255,255,0.7);
    margin-top: 2px;
    font-family: 'Tajawal', sans-serif;
}

.countdown-sep {
    font-size: 1.4em;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 12px;
}

/* ===== CATEGORIES GRID ===== */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
    margin-bottom: 25px;
}

.category-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 15px 10px;
    text-align: center;
    text-decoration: none !important;
    transition: all 0.2s;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

.category-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.category-card i {
    font-size: 1.8em;
    color: var(--primary);
    display: block;
    margin-bottom: 8px;
}

.category-card span {
    font-family: 'Tajawal', sans-serif;
    font-size: 0.82em;
    color: var(--text-primary);
    font-weight: 600;
    display: block;
}

/* ===== NOTIFICATION TOAST UPGRADE ===== */
.error, .success {
    animation: slideDown 0.4s ease !important;
}

@keyframes slideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.success p {
    background: linear-gradient(135deg, #28a745, #20c997) !important;
    color: #fff !important;
    border-radius: var(--radius-md) !important;
    font-family: 'Tajawal', sans-serif;
    box-shadow: 0 4px 15px rgba(40,167,69,0.4);
}

.error p {
    background: linear-gradient(135deg, #dc3545, #c82333) !important;
    color: #fff !important;
    border-radius: var(--radius-md) !important;
    font-family: 'Tajawal', sans-serif;
    box-shadow: 0 4px 15px rgba(220,53,69,0.4);
}

/* ===== AUTH PAGES UPGRADE ===== */
/* Only apply old auth-container style when NOT on the new login split layout */
.auth-container:not(.login-split) {
    background: linear-gradient(135deg, var(--secondary) 0%, #0f1923 100%) !important;
}

.auth-box {
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid rgba(255,140,0,0.2) !important;
}

/* ============================================================
   🔐 LOGIN PAGE — FULL REDESIGN (Split Layout)
   ============================================================ */

/* Reset for login page */
body.login-page {
    background: #f4f6fb;
    font-family: 'Tajawal', sans-serif;
    direction: rtl;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* Split wrapper */
.login-split {
    display: flex;
    min-height: 100vh;
    flex-direction: row-reverse; /* RTL: form right, brand left */
}

/* ---- Brand Panel (left) ---- */
.login-brand-panel {
    flex: 1;
    background: linear-gradient(140deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 40px;
    position: relative;
    overflow: hidden;
}

.login-brand-inner {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 400px;
}

/* Decorative circles */
.lbp-circles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lbpc {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(255,140,0,0.15);
}
.lbpc-1 { width: 320px; height: 320px; bottom: -80px; left: -80px; }
.lbpc-2 { width: 200px; height: 200px; top: 60px; left: 40px; border-color: rgba(255,140,0,0.1); }
.lbpc-3 { width: 120px; height: 120px; top: -30px; right: -30px; background: rgba(255,140,0,0.07); border: none; }

/* Brand logo */
.login-brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-bottom: 40px;
}

.lbp-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #FF8C00, #e67e00);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    color: #fff;
    box-shadow: 0 6px 20px rgba(255,140,0,0.4);
}

.lbp-name {
    font-size: 1.8em;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.5px;
}

.lbp-headline {
    font-size: 2.2em;
    font-weight: 900;
    line-height: 1.25;
    margin: 0 0 16px;
    color: #fff;
}

.lbp-headline br + * { color: #FF8C00; }

.lbp-sub {
    font-size: 0.95em;
    color: rgba(255,255,255,0.65);
    line-height: 1.7;
    margin-bottom: 36px;
}

.lbp-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.lbp-feat {
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.82em;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
}

.lbp-feat i {
    color: #FF8C00;
    font-size: 1em;
    flex-shrink: 0;
}

/* ---- Form Panel (right) ---- */
.login-form-panel {
    width: 480px;
    max-width: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    box-shadow: -8px 0 40px rgba(0,0,0,0.08);
}

.login-form-inner {
    width: 100%;
    max-width: 360px;
}

/* Mobile logo */
.login-mobile-logo {
    display: none;
    font-size: 1.6em;
    font-weight: 900;
    color: #FF8C00;
    text-decoration: none;
    margin-bottom: 28px;
    align-items: center;
    gap: 8px;
}

/* Header */
.lfp-header {
    margin-bottom: 28px;
}

.lfp-header h1 {
    font-size: 1.7em;
    font-weight: 900;
    color: #1a1a2e;
    margin: 0 0 6px;
    line-height: 1.2;
}

.lfp-header p {
    font-size: 0.9em;
    color: #888;
    margin: 0;
}

/* Google button wrapper */
.lfp-google-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 22px;
}

.lfp-google-wrap > div {
    width: 100% !important;
}

/* Divider */
.lfp-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.lfp-divider::before,
.lfp-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e8eaed;
}

.lfp-divider span {
    font-size: 0.8em;
    color: #aaa;
    font-weight: 600;
    white-space: nowrap;
    padding: 0 2px;
}

/* Form fields */
.lfp-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lfp-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lfp-field label {
    font-size: 0.85em;
    font-weight: 700;
    color: #444;
}

.lfp-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lfp-forgot {
    font-size: 0.78em;
    color: #FF8C00;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}
.lfp-forgot:hover { color: #e67e00; text-decoration: underline; }

.lfp-input-wrap {
    position: relative;
}

.lfp-input-wrap input {
    width: 100% !important;
    background: #f7f8fb !important;
    border: 1.5px solid #e4e6eb !important;
    border-radius: 12px !important;
    padding: 12px 14px 12px 44px !important;
    font-family: 'Tajawal', sans-serif !important;
    font-size: 0.95em !important;
    color: #1a1a2e !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    box-sizing: border-box !important;
    outline: none !important;
}

.lfp-input-wrap input:focus {
    border-color: #FF8C00 !important;
    box-shadow: 0 0 0 3px rgba(255,140,0,0.12) !important;
    background: #fff !important;
}

.lfp-input-wrap input::placeholder {
    color: #bbb !important;
    font-family: 'Tajawal', sans-serif !important;
}

.lfp-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 0.9em;
    transition: color 0.2s;
    pointer-events: none;
}

.lfp-eye-toggle {
    pointer-events: all !important;
    cursor: pointer;
}

.lfp-input-wrap:focus-within .lfp-icon {
    color: #FF8C00;
}

/* Custom checkbox */
.lfp-remember {
    margin-top: -4px;
}

.lfp-check-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85em;
    color: #555;
    cursor: pointer;
    user-select: none;
}

.lfp-check-label input[type="checkbox"] {
    display: none;
}

.lfp-checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid #d0d5dd;
    border-radius: 5px;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s;
    background: #fff;
}

.lfp-check-label input:checked + .lfp-checkmark {
    background: #FF8C00;
    border-color: #FF8C00;
}

.lfp-check-label input:checked + .lfp-checkmark::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-right: none; /* RTL: checkmark faces right */
    transform: rotate(-45deg);
}

/* Submit button */
.lfp-submit-btn {
    width: 100%;
    padding: 13px 20px;
    background: linear-gradient(135deg, #FF8C00, #e67e00);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-family: 'Tajawal', sans-serif;
    font-size: 1.05em;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 16px rgba(255,140,0,0.35);
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 4px;
    letter-spacing: 0.2px;
}

.lfp-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255,140,0,0.45);
}

.lfp-submit-btn:active {
    transform: translateY(0);
}

/* Footer link */
.lfp-footer-text {
    text-align: center;
    font-size: 0.88em;
    color: #888;
    margin-top: 24px;
}

.lfp-footer-text a {
    color: #FF8C00;
    font-weight: 800;
    text-decoration: none;
}

.lfp-footer-text a:hover { text-decoration: underline; }

/* ---- Responsive Login ---- */
@media (max-width: 900px) {
    .login-brand-panel { display: none; }
    .login-form-panel {
        width: 100%;
        box-shadow: none;
        padding: 30px 20px;
    }
    .login-mobile-logo { display: flex; }
    .lfp-header h1 { font-size: 1.5em; }
}

@media (max-width: 480px) {
    .login-form-panel { padding: 24px 16px; }
    .login-form-inner { max-width: 100%; }
    .lfp-header h1 { font-size: 1.3em; }
    .lfp-submit-btn { font-size: 0.98em; }
}

/* ===== BUTTONS GLOBAL UPGRADE ===== */
.auth-button, .save-button, .upgrade-button,
.submit-product-btn, .buy-all-button, .accept-btn {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    font-family: 'Tajawal', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
    box-shadow: 0 3px 10px rgba(255,140,0,0.3);
}

.auth-button:hover, .save-button:hover, .upgrade-button:hover,
.submit-product-btn:hover, .buy-all-button:hover, .accept-btn:hover {
    background: linear-gradient(135deg, var(--primary-dark), #cc6e00) !important;
    box-shadow: 0 5px 15px rgba(255,140,0,0.4) !important;
}

/* ===== PRODUCT PAGE UPGRADE ===== */
.product-detail-section {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid var(--border);
}

/* Product Detail Info Box */
.product-buy-box {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
}

.product-buy-box .price-main {
    font-size: 1.8em;
    font-weight: 800;
    color: #b12704;
    font-family: 'Tajawal', sans-serif;
}

.product-buy-box .price-original {
    font-size: 1em;
    color: var(--text-secondary);
    text-decoration: line-through;
    font-family: 'Tajawal', sans-serif;
}

.in-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #007600;
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
    font-size: 0.95em;
    padding: 4px 12px;
    background: #e8f5e9;
    border-radius: var(--radius-pill);
    border: 1px solid #c8e6c9;
}

.out-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #b12704;
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
    font-size: 0.95em;
    padding: 4px 12px;
    background: #ffeee6;
    border-radius: var(--radius-pill);
    border: 1px solid #ffccbc;
}

/* ===== HORIZONTAL SCROLL UPGRADE ===== */
.horizontal-scroll-container {
    gap: 12px !important;
    padding: 5px 2px 15px !important;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
}

.horizontal-scroll-container::-webkit-scrollbar {
    height: 4px;
}

.horizontal-scroll-container::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 10px;
}

/* ===== GROUP SECTION UPGRADE ===== */
.group {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm);
}

.group span {
    background: var(--bg-subtle) !important;
    font-family: 'Tajawal', sans-serif;
    transition: all 0.2s;
    border: 1px solid var(--border);
}

.group span:hover, .group .active {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary-dark) !important;
}

/* ===== SECTION TITLE UPGRADE ===== */
.section-title {
    font-family: 'Tajawal', sans-serif !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    border-bottom: 2px solid var(--primary) !important;
    padding-bottom: 12px !important;
    font-size: 1.5em !important;
}

.section-title i { color: var(--primary) !important; }

/* ===== BASKET / ORDERS UPGRADE ===== */
.basket-section, .records-section {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
}

.basket-item, .history-item, .record-item {
    background: var(--bg-subtle) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    transition: box-shadow 0.2s;
}

.basket-item:hover, .history-item:hover, .record-item:hover {
    box-shadow: var(--shadow-md) !important;
}

/* ===== SEARCH SUGGESTIONS (UX) ===== */
.search-suggestions {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    left: 0;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 500;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border);
    display: none;
}

.search-suggestions.show { display: block; }

.suggestion-item {
    padding: 10px 15px;
    cursor: pointer;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.9em;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s;
}

.suggestion-item:hover { background: var(--primary-light); }
.suggestion-item.active { background: #fff3e0; border-right: 3px solid #FF8C00; }
.suggestion-item i { color: var(--text-secondary); font-size: 0.85em; }

/* ===== INPUT UPGRADES ===== */
.input-group input,
.input-group textarea,
.input-group select {
    font-family: 'Tajawal', sans-serif !important;
    background-color: var(--bg-subtle) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(255,140,0,0.15) !important;
    background-color: #fff !important;
}

/* ===== CLOSE SIDEBAR OVERLAY UPGRADE ===== */
#closeSidebarBtn {
    background-color: rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(2px);
}

/* ===== PRODUCT PACKAGES UPGRADE ===== */
.packages {
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.2s !important;
}

.packages:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--primary) !important;
}

/* ===== SCROLL TO TOP BUTTON ===== */
.scroll-to-top {
    position: fixed;
    bottom: 25px;
    left: 25px;
    width: 44px;
    height: 44px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1.1em;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(255,140,0,0.4);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scroll-to-top.show {
    opacity: 1;
    visibility: visible;
}

.scroll-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255,140,0,0.5);
}

/* ===== EMPTY STATE UPGRADE ===== */
.no-products {
    padding: 60px 20px !important;
    color: var(--text-secondary) !important;
}

.no-products i {
    color: var(--border) !important;
    margin-bottom: 15px;
}

/* ===== COMPARE BUTTON ===== */
.compare-btn {
    position: absolute;
    bottom: 44px;
    left: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 3;
    font-size: 0.78em;
    color: #888;
    box-shadow: var(--shadow-sm);
}

.compare-btn:hover, .compare-btn.active {
    color: #007185;
    border-color: #007185;
    background: #e8f4f8;
}

.compare-btn:hover {
    transform: scale(1.1);
}

/* ===== COMPARE MODAL ===== */
#compareModal {
    font-family: 'Tajawal', sans-serif;
}

/* ===== COMPARE BAR ===== */
#compareBar {
    font-family: 'Tajawal', sans-serif;
}

/* ===== PRODUCT CARD STARS ===== */
.product-card .rating .gold { color: #f0a500 !important; }
.product-card .rating .fas { font-size: 10px !important; margin: 0 1px; }

/* ===== RESPONSIVE UPGRADES ===== */
@media (max-width: 768px) {
    .hero-banner { padding: 25px 20px; }
    .hero-content h2 { font-size: 1.4em; }
    .hero-icon { font-size: 3em; }
    .trust-bar { gap: 10px; padding: 12px; }
    .trust-item { font-size: 0.78em; }
    .stats-bar { grid-template-columns: repeat(2, 1fr); }
    .search-bar input { width: 160px !important; }
    .countdown-unit { min-width: 38px; padding: 5px 8px; }
}

@media (max-width: 480px) {
    .hero-icon { display: none; }
    .stats-bar { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .categories-grid { grid-template-columns: repeat(3, 1fr); }
    .deals-header { flex-direction: column; gap: 10px; align-items: flex-start; }
    .search-bar input { width: 120px !important; }
}

/* =========================================================
   ✅ FULL RESPONSIVE + DEALS CAROUSEL + DISCOUNT BADGE PRO
   ========================================================= */

/* ---- 1. GLOBAL BOX-SIZING & BASE ---- */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* ---- 2. IMPROVED DISCOUNT BADGE ---- */
.badge-sale {
    background: linear-gradient(135deg, #ff2d55, #c0392b) !important;
    color: #fff !important;
    font-family: 'Tajawal', sans-serif !important;
    font-size: 0.72em !important;
    font-weight: 800 !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 5 !important;
    box-shadow: 0 3px 10px rgba(220,53,69,0.5) !important;
    letter-spacing: 0.3px !important;
    animation: badgePulse 2s ease-in-out infinite !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    white-space: nowrap !important;
}

.badge-sale::before {
    content: '🔥';
    font-size: 0.9em;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 3px 10px rgba(220,53,69,0.5); }
    50%       { transform: scale(1.08); box-shadow: 0 5px 18px rgba(220,53,69,0.75); }
}

/* Old-price strikethrough improved */
.product-card .price-old,
p.price[style*="line-through"] {
    color: #999 !important;
    text-decoration: line-through !important;
    font-size: 0.82em !important;
    font-weight: 400 !important;
    margin: 0 !important;
    font-family: 'Tajawal', sans-serif !important;
}

/* New discounted price highlight */
.product-card .price-new,
p.price:not([style*="line-through"]) {
    color: #e63946 !important;
    font-size: 1.05em !important;
    font-weight: 800 !important;
    font-family: 'Tajawal', sans-serif !important;
}

/* ---- 3. DEALS MARQUEE CAROUSEL (RTL loop right→left) ---- */
.deals-section {
    overflow: hidden !important;
    position: relative;
}

/* Remove old horizontal scroll behaviour for deals */
.deals-section .horizontal-scroll-container {
    display: flex !important;
    overflow: visible !important;
    overflow-x: visible !important;
    padding-bottom: 0 !important;
    gap: 0 !important;
    scrollbar-width: none !important;
    /* The JS marquee takes over */
    flex-wrap: nowrap !important;
}

/* Marquee track wrapper */
.deals-marquee-wrapper {
    overflow: hidden;
    width: 100%;
    position: relative;
    padding: 5px 0 10px;
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.deals-marquee-track {
    display: flex;
    gap: 14px;
    will-change: transform;
    direction: ltr; /* Force LTR so flex starts from left — JS translateX(-pos) scrolls left correctly */
    flex-wrap: nowrap;
}

.deals-marquee-track:hover {
    animation-play-state: paused;
}

/* Fallback static keyframe (used only if JS hasn't loaded yet) */
@keyframes marqueeRTL {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
/* Dynamic keyframe injected by JS: @keyframes marqueeSeamless { ... } */

/* Each deal card inside marquee */
.deals-marquee-track .product-card {
    flex: 0 0 auto !important;
    width: 200px !important;
    min-height: 280px !important;
    position: relative !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: transform 0.3s, box-shadow 0.3s !important;
    cursor: pointer;
}

.deals-marquee-track .product-card:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
    border-color: var(--primary) !important;
    animation-play-state: paused !important;
}

.deals-marquee-track .product-card h3 {
    color: rgba(255,255,255,0.92) !important;
    font-family: 'Tajawal', sans-serif !important;
    font-size: 0.88em !important;
}

.deals-marquee-track .product-card .price {
    color: #FF8C00 !important;
    font-family: 'Tajawal', sans-serif !important;
    font-weight: 800 !important;
}

.deals-marquee-track .add-to-cart-btn {
    background: linear-gradient(135deg, #FF8C00, #e67e00) !important;
    border-radius: 8px !important;
    font-size: 0.8em !important;
}

.deals-marquee-track .out-stock-badge {
    justify-content: center !important;
    font-size: 0.8em !important;
}

/* ---- 4. FLOATING CART BUTTON (mobile) ---- */
.floating-cart {
    display: none;
    position: fixed;
    bottom: 80px;
    left: 16px;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #FF8C00, #e67e00);
    color: #fff;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    box-shadow: 0 6px 20px rgba(255,140,0,0.5);
    z-index: 999;
    text-decoration: none;
    transition: transform 0.2s;
    animation: floatBounce 3s ease-in-out infinite;
}

.floating-cart:hover { transform: scale(1.12); }

@keyframes floatBounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}

.floating-cart .fc-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #dc3545;
    color: #fff;
    font-size: 0.55em;
    font-weight: 800;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    font-family: 'Tajawal', sans-serif;
}

/* ---- 5. QUICK-VIEW MODAL ---- */
.quick-view-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(4px);
    animation: fadeInModal 0.25s ease;
}

.quick-view-modal.open { display: flex; }

@keyframes fadeInModal {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.quick-view-inner {
    background: #fff;
    border-radius: 16px;
    max-width: 560px;
    width: 100%;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    animation: slideUpModal 0.3s cubic-bezier(.34,1.56,.64,1);
}

@keyframes slideUpModal {
    from { transform: translateY(40px) scale(0.96); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

.quick-view-close {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0,0,0,0.08);
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 2;
}
.quick-view-close:hover { background: #dc3545; color: #fff; }

.quick-view-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.quick-view-body {
    padding: 18px 20px 20px;
    font-family: 'Tajawal', sans-serif;
    direction: rtl;
}

.quick-view-body h2 {
    font-size: 1.2em;
    font-weight: 800;
    margin: 0 0 8px;
    color: #1a1a2e;
}

.quick-view-body .qv-price {
    font-size: 1.4em;
    font-weight: 800;
    color: #e63946;
    margin-bottom: 10px;
}

.quick-view-body .qv-old {
    font-size: 0.9em;
    color: #999;
    text-decoration: line-through;
    margin-left: 8px;
}

.quick-view-body .qv-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #FF8C00, #e67e00);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-family: 'Tajawal', sans-serif;
    font-size: 1em;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 10px;
}
.quick-view-body .qv-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,140,0,0.4);
}

/* Quick-view trigger btn on cards */
.qv-trigger {
    position: absolute;
    bottom: 52px;
    left: 8px;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 0.72em;
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
    color: #1a1a2e;
    cursor: pointer;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s, transform 0.2s;
    z-index: 4;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.product-card:hover .qv-trigger {
    opacity: 1;
    transform: translateY(0);
}

/* ---- 6. STICKY DEALS HEADER ---- */
.deals-section .deals-header {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* ---- 7. SCROLL PROGRESS BAR ---- */
.scroll-progress {
    position: fixed;
    top: 0;
    right: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #FF8C00, #ff2d55);
    z-index: 99999;
    transition: width 0.1s linear;
}

/* ---- 8. PRODUCT CARD HOVER SHIMMER ---- */
.product-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 60%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    border-radius: inherit;
}
.product-card:hover::after { opacity: 1; }

/* ---- 9. CATEGORY FILTER PILLS (navbar) ---- */
.filter-navbar {
    scrollbar-width: none;
}
.filter-navbar::-webkit-scrollbar { display: none; }

.filter-item {
    white-space: nowrap;
    border-radius: 20px !important;
    padding: 5px 14px !important;
    transition: all 0.2s !important;
}

.filter-item.active,
.filter-item:hover {
    background: var(--primary) !important;
    color: #fff !important;
}

/* ---- 10. DEALS SECTION GLOW BORDER ---- */
.deals-section {
    border: 1px solid rgba(255,140,0,0.25);
    box-shadow: 0 0 40px rgba(255,140,0,0.08), var(--shadow-lg);
}

/* ============================================================
   📱 FULL RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Large Desktop ≥1200px */
@media (min-width: 1200px) {
    .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
    .product-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 16px !important; }
    .deals-marquee-track .product-card { width: 220px !important; }
}

/* Desktop 992–1199px */
@media (min-width: 992px) and (max-width: 1199px) {
    .product-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 14px !important; }
}

/* Tablet landscape 769–991px */
@media (min-width: 769px) and (max-width: 991px) {
    .product-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }
    .hero-content h2 { font-size: 1.5em; }
    .trust-bar { gap: 8px; }
    .trust-item { font-size: 0.8em; }
}

/* Tablet portrait 481–768px */
@media (min-width: 481px) and (max-width: 768px) {
    .hero-banner { flex-direction: column; text-align: center; padding: 28px 18px; }
    .hero-icon { display: none; }
    .hero-content { text-align: center; }
    .hero-btn { margin: 0 auto; }
    .trust-bar { flex-wrap: wrap; justify-content: center; gap: 8px; padding: 10px; }
    .trust-item { flex: 0 0 calc(50% - 8px); justify-content: center; font-size: 0.8em; }
    .deals-marquee-track .product-card { width: 175px !important; }
    .deals-title { font-size: 1.1em; }
    footer { padding: 20px 14px !important; }
    .search-bar input { width: 150px !important; }
    .floating-cart { display: flex !important; }
}

/* Mobile ≤480px */
@media (max-width: 480px) {
    /* Navbar */
    .navbar { padding: 8px 12px !important; }
    .logo { font-size: 1.3em !important; }
    .search-bar input { width: 110px !important; font-size: 0.85em; }

    /* Hero */
    .hero-banner { padding: 20px 14px; flex-direction: column; gap: 10px; }
    .hero-icon { display: none; }
    .hero-content h2 { font-size: 1.25em; }
    .hero-content p { font-size: 0.85em; }
    .hero-btn { font-size: 0.88em; padding: 10px 18px; }

    /* Trust bar */
    .trust-bar { flex-wrap: wrap; gap: 6px; padding: 10px 10px; }
    .trust-item { flex: 0 0 calc(50% - 6px); justify-content: flex-start; font-size: 0.75em; }

    /* Deals */
    .deals-section { padding: 14px 12px; border-radius: 12px; }
    .deals-header { flex-direction: column; gap: 8px; align-items: flex-start; }
    .deals-title { font-size: 1em; }
    .countdown-timer { gap: 5px; }
    .countdown-unit { min-width: 34px; padding: 4px 6px; }
    .countdown-unit .count-num { font-size: 1em; }
    .countdown-unit .count-label { font-size: 0.58em; }
    .deals-marquee-track .product-card { width: 155px !important; min-height: 250px !important; }

    /* Product grid */
    .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .product-card { border-radius: 10px; }
    .product-card h3 { font-size: 0.82em !important; }
    .product-card .price { font-size: 0.9em !important; }
    .add-to-cart-btn { font-size: 0.78em !important; padding: 8px 10px !important; }

    /* Section header */
    .section-header h2 { font-size: 1em !important; }

    /* Packages */
    .packages { width: 160px !important; }

    /* Sidebar */
    .sidebar { width: 88vw !important; }

    /* Footer */
    footer { padding: 20px 12px 12px !important; font-size: 0.88em; }
    footer div[style*="grid"] { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }

    /* Floating cart */
    .floating-cart { display: flex !important; }

    /* Scroll-to-top position */
    .scroll-to-top { bottom: 70px !important; left: 16px !important; }
}

/* Very small ≤360px */
@media (max-width: 360px) {
    .trust-item { flex: 0 0 100%; }
    .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .deals-marquee-track .product-card { width: 140px !important; min-height: 230px !important; }
    .search-bar input { width: 90px !important; }
    footer div[style*="grid"] { grid-template-columns: 1fr !important; }
    .countdown-unit { min-width: 28px; }
}

/* Fix horizontal overflow globally on mobile */
@media (max-width: 768px) {
    body { overflow-x: hidden; }
    .container { padding: 0 10px !important; }
    main.container { padding-top: 5px !important; }
}

/* ---- 11. ANIMATED SHIMMER SKELETON (while loading) ---- */
@keyframes shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}

.skeleton-card {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 37%, #f0f0f0 63%);
    background-size: 1200px 100%;
    animation: shimmer 1.4s infinite linear;
    border-radius: 12px;
    height: 280px;
    width: 100%;
}

/* ---- 12. DEAL FLASH BANNER (top of deals-section) ---- */
.deal-flash-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(90deg, #ff2d55, #FF8C00);
    color: #fff;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.7em;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
    margin-right: 8px;
    animation: flashLabel 1.5s ease-in-out infinite;
    letter-spacing: 0.5px;
}

@keyframes flashLabel {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
}

/* ---- 13. "NEW" BADGE ---- */
.badge-new {
    animation: badgePop 0.5s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes badgePop {
    from { transform: scale(0) rotate(-20deg); opacity: 0; }
    to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ---- 14. CARD IMAGE ZOOM on hover ---- */
.product-card .product-link img {
    transition: transform 0.45s cubic-bezier(.25,.46,.45,.94) !important;
}
.product-card:hover .product-link img {
    transform: scale(1.07) !important;
}

/* ============================================================
   🛠️ SERVICES SECTION
   ============================================================ */
.services-section {
    margin: 28px 0;
    font-family: 'Tajawal', sans-serif;
}

.services-header {
    text-align: center;
    margin-bottom: 22px;
}

.services-tag {
    display: inline-block;
    background: rgba(255,140,0,0.12);
    color: var(--primary);
    font-size: 0.78em;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,140,0,0.3);
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.services-header h2 {
    font-size: 1.45em;
    font-weight: 800;
    color: #1a1a2e;
    margin: 4px 0 6px;
}

.services-header p {
    font-size: 0.88em;
    color: #666;
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.6;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.service-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 14px;
    padding: 18px 16px;
    text-decoration: none !important;
    border: 1.5px solid #eef0f4;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,140,0,0.04), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
}

.service-card:hover::before { opacity: 1; }

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(255,140,0,0.15);
    border-color: rgba(255,140,0,0.4);
}

.service-card--highlight {
    border-color: rgba(255,140,0,0.35);
    background: linear-gradient(135deg, #fff9f0, #fff);
}

.service-card--highlight .service-icon-wrap {
    background: linear-gradient(135deg, #FF8C00, #e67e00) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(255,140,0,0.35);
}

.service-icon-wrap {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 13px;
    background: rgba(255,140,0,0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    transition: background 0.25s, transform 0.25s;
}

.service-card:hover .service-icon-wrap {
    background: linear-gradient(135deg, #FF8C00, #e67e00);
    color: #fff;
    transform: rotate(-6deg) scale(1.1);
}

.service-content {
    flex: 1;
    min-width: 0;
}

.service-content h3 {
    font-size: 0.95em;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.service-content p {
    font-size: 0.76em;
    color: #888;
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.service-arrow {
    flex-shrink: 0;
    color: #ccc;
    font-size: 0.85em;
    transition: color 0.2s, transform 0.2s;
}

.service-card:hover .service-arrow {
    color: var(--primary);
    transform: translateX(-4px);
}

/* Responsive Services Grid */
@media (max-width: 991px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .services-grid { grid-template-columns: 1fr; gap: 10px; }
    .service-card { padding: 14px 12px; }
    .service-icon-wrap { width: 44px; height: 44px; font-size: 1.15em; }
    .services-header h2 { font-size: 1.2em; }
    .services-header p { font-size: 0.82em; }
}

/* ============================================================
   🚀 PRO FEATURES v2 CSS
   ============================================================ */

/* ---- 1. ANNOUNCEMENT BANNER ---- */
#dilboxBanner {
    background: linear-gradient(90deg, #1a1a2e, #0f3460, #1a1a2e);
    background-size: 200% 100%;
    animation: bannerShimmer 4s linear infinite;
    color: #fff;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.88em;
    padding: 10px 16px;
    z-index: 99998;
    width: 100%;
    box-sizing: border-box;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

@keyframes bannerShimmer {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.dbb-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.dbb-icon { color: #FF8C00; font-size: 1em; }

.dbb-text { color: rgba(255,255,255,0.9); }

.dbb-code {
    background: rgba(255,140,0,0.2);
    border: 1px dashed #FF8C00;
    color: #FF8C00;
    padding: 1px 8px;
    border-radius: 5px;
    font-family: monospace;
    font-size: 1.05em;
    letter-spacing: 1px;
    cursor: pointer;
}

.dbb-copy {
    background: rgba(255,140,0,0.15);
    border: 1px solid rgba(255,140,0,0.4);
    color: #FF8C00;
    border-radius: 6px;
    padding: 3px 10px;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.82em;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}
.dbb-copy:hover { background: #FF8C00; color: #fff; }

.dbb-close {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    font-size: 0.9em;
    padding: 4px 6px;
    transition: color 0.2s;
}
.dbb-close:hover { color: #fff; }

@media (max-width: 480px) {
    #dilboxBanner { font-size: 0.78em; padding: 8px 36px 8px 10px; }
    .dbb-inner { justify-content: flex-start; gap: 6px; }
    .dbb-close { left: auto; right: 4px; }
}

/* ---- 2. DARK MODE TOGGLE BUTTON (floating — replaced by sidebar #darkModeBtn) ---- */
.dark-mode-btn,
html.dilbox-dark .dark-mode-btn,
.dark-mode-btn:hover,
html.dilbox-dark .dark-mode-btn:hover {
    display: none !important;
}

/* ---- 3. PAGE LOADER ---- */
#pageLoader {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}

#pageLoader.pl-active {
    opacity: 1;
}

#pageLoader .pl-bar {
    height: 100%;
    background: linear-gradient(90deg, #FF8C00, #ff2d55, #FF8C00);
    background-size: 200% 100%;
    animation: plAnim 1s linear infinite;
    width: 100%;
}

@keyframes plAnim {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- 4. RECENTLY VIEWED SECTION ---- */
.rv-section {
    margin: 20px 0;
}

.rv-track {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
}

.rv-card {
    flex: 0 0 auto;
    width: 130px;
    background: #fff;
    border-radius: 12px;
    border: 1.5px solid #eef0f4;
    overflow: hidden;
    text-decoration: none !important;
    transition: transform 0.25s, box-shadow 0.25s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.rv-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(255,140,0,0.15);
    border-color: rgba(255,140,0,0.35);
}

.rv-card img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    display: block;
}

.rv-info {
    padding: 6px 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rv-name {
    font-family: 'Tajawal', sans-serif;
    font-size: 0.75em;
    font-weight: 700;
    color: #1a1a2e;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.rv-price {
    font-family: 'Tajawal', sans-serif;
    font-size: 0.78em;
    font-weight: 800;
    color: #FF8C00;
}

/* ---- 5. SCROLL-TO-TOP PULSE RING ---- */
.stt-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(255,140,0,0.4);
    animation: sttPulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes sttPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50%       { transform: scale(1.35); opacity: 0; }
}

/* ---- 6. SEARCH CLEAR BUTTON ---- */
.search-clear-btn {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 0.85em;
    padding: 4px;
    line-height: 1;
    transition: color 0.2s;
}
.search-clear-btn:hover { color: #dc3545; }

.search-bar { position: relative; }

/* ---- 7. KEYBOARD SHORTCUT HINT on search ---- */
.search-bar input:focus + .search-shortcut-hint,
.search-shortcut-hint { display: none; }

/* ---- 8. MOBILE — Bottom Nav Bar ---- */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 58px;
    background: #fff;
    border-top: 1px solid #eef0f4;
    z-index: 997;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    font-family: 'Tajawal', sans-serif;
}

.mbn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    color: #888;
    font-size: 0.65em;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 10px;
    transition: color 0.2s;
    cursor: pointer;
    background: transparent;
    border: none;
}

.mbn-item i { font-size: 1.3em; line-height: 1; }
.mbn-item.active, .mbn-item:hover { color: #FF8C00; }

html.dilbox-dark .mobile-bottom-nav {
    background: #1a1d27;
    border-color: #2a2d3a;
}

html.dilbox-dark .mbn-item { color: #666; }
html.dilbox-dark .mbn-item.active { color: #FF8C00; }

@media (max-width: 768px) {
    .mobile-bottom-nav { display: flex !important; }
    /* Push content above bottom nav */
    body { padding-bottom: 58px; }
    /* Move floating buttons above bottom nav */
    .floating-cart { bottom: 70px !important; }
    /* .dark-mode-btn removed — replaced by sidebar toggle */
    .scroll-to-top  { bottom: 70px !important; }
}

/* ---- 9. IMAGE LAZY-LOAD FADE ---- */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.4s ease;
}
img[loading="lazy"].loaded,
img[loading="lazy"][src] {
    opacity: 1;
}

/* Trick: once loaded fire */
img { opacity: 1; }
img[loading="lazy"] { opacity: 0; }

/* ---- 10. PRODUCT CARD — Ripple effect on add-to-cart ---- */
@keyframes ripple {
    to { transform: scale(4); opacity: 0; }
}

.add-to-cart-btn {
    position: relative;
    overflow: hidden;
}

.add-to-cart-btn .ripple-wave {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    animation: ripple 0.55s linear;
    pointer-events: none;
}

/* ---- 11. TRUST BAR improved ---- */
@media (max-width: 600px) {
    .trust-bar {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .trust-item {
        flex-direction: row;
        justify-content: flex-start !important;
        background: rgba(255,255,255,0.6);
        border-radius: 8px;
        padding: 8px 10px !important;
    }
}

/* ============================================================
   🔧 TRUST PILLS + SIDEBAR SERVICES + MOBILE LAYOUT FIXES
   ============================================================ */

/* ---- Trust Pills (new compact bar) ---- */
.trust-pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 2px 12px;
    margin-bottom: 18px;
    scrollbar-width: none;
}
.trust-pills::-webkit-scrollbar { display: none; }

.trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1.5px solid #eef0f4;
    border-radius: 20px;
    padding: 6px 12px;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.8em;
    font-weight: 700;
    color: #444;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    flex-shrink: 0;
    transition: border-color 0.2s, color 0.2s;
}
.trust-pill i {
    color: #FF8C00;
    font-size: 0.9em;
}
.trust-pill:hover {
    border-color: rgba(255,140,0,0.4);
    color: #FF8C00;
}

/* ---- Sidebar User Card ---- */
.sidebar-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: rgba(255,140,0,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.suc-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF8C00, #e67e00);
    color: #fff;
    font-family: 'Tajawal', sans-serif;
    font-weight: 800;
    font-size: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(255,140,0,0.35);
}
.suc-info { min-width: 0; }
.suc-name {
    font-family: 'Tajawal', sans-serif;
    font-size: 0.9em;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
}
.suc-type {
    font-family: 'Tajawal', sans-serif;
    font-size: 0.72em;
    color: #FF8C00;
    font-weight: 600;
    margin-top: 2px;
}

/* ---- Sidebar Services Cards ---- */
.sidebar-services {
    padding: 16px 14px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 0;
}

.sb-svc-title {
    font-family: 'Tajawal', sans-serif;
    font-size: 0.8em;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sb-svc-title i { color: #FF8C00; }

.sb-svc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sb-svc-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 12px;
    padding: 13px 8px;
    text-decoration: none !important;
    transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}
.sb-svc-card:hover {
    background: rgba(255,140,0,0.14);
    border-color: rgba(255,140,0,0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(255,140,0,0.15);
}
.sb-svc-card i {
    font-size: 1.25em;
    color: rgba(255,255,255,0.7);
    transition: color 0.2s;
}
.sb-svc-card:hover i { color: #FF8C00; }

.sb-svc-card span {
    font-family: 'Tajawal', sans-serif;
    font-size: 0.75em;
    font-weight: 700;
    color: rgba(255,255,255,0.75);
    text-align: center;
    transition: color 0.2s;
}
.sb-svc-card:hover span { color: #fff; }

.sb-svc-card--hot {
    background: rgba(255,140,0,0.12) !important;
    border-color: rgba(255,140,0,0.3) !important;
}
.sb-svc-card--hot i { color: #FF8C00 !important; }

/* ---- MOBILE GENERAL LAYOUT FIXES ---- */
@media (max-width: 768px) {

    /* Hero banner - compact on mobile */
    .hero-banner {
        padding: 20px 16px !important;
        margin-top: 10px !important;
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
        min-height: unset !important;
        overflow: hidden !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .hero-content { text-align: center !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
    .hero-content h2 { font-size: 1.3em !important; word-break: break-word !important; }
    .hero-content p { font-size: 0.84em !important; line-height: 1.5; word-break: break-word !important; }
    .hero-btn { margin: 0 auto !important; font-size: 0.88em !important; display: inline-block !important; }
    .hero-icon { display: none !important; }

    /* Trust pills scroll on mobile */
    .trust-pills {
        padding: 8px 0 10px;
        margin-bottom: 14px;
    }

    /* Product grid 2 columns on mobile */
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Deals section compact */
    .deals-section { padding: 14px 12px !important; }
    .deals-header { flex-wrap: wrap; gap: 8px; }
    .deals-title { font-size: 1em !important; }

    /* Section headers smaller */
    .section-header h2 { font-size: 1em !important; }

    /* Packages horizontal scroll */
    .packages { min-width: 150px !important; }

    /* Container padding */
    .container { padding: 0 10px !important; }
    main.container { padding-top: 0 !important; }

    /* Sidebar full width on mobile */
    .sidebar { max-width: 85vw !important; }
}

@media (max-width: 480px) {
    /* Product cards compact */
    .product-card h3 { font-size: 0.8em !important; line-height: 1.3; }
    .product-card .price { font-size: 0.88em !important; }
    .product-card .product-info { padding: 6px 8px !important; }
    .add-to-cart-btn { font-size: 0.75em !important; padding: 7px 8px !important; }
    .out-stock-badge { font-size: 0.72em !important; }

    /* Countdown compact */
    .countdown-unit { min-width: 32px !important; padding: 3px 5px !important; }
    .countdown-unit .count-num { font-size: 0.95em !important; }
    .countdown-sep { font-size: 1.1em !important; }

    /* Deals marquee card smaller */
    .deals-marquee-track .product-card { width: 148px !important; }

    /* Footer grid 1 column */
    footer > div[style*="grid"] { grid-template-columns: 1fr !important; gap: 20px !important; }

    /* Scroll to top */
    .scroll-to-top { width: 38px !important; height: 38px !important; font-size: 0.9em !important; }
}

/* ============================================================
   Admin Coupon Manager Button + Modal
============================================================ */

/* Floating button */
.admin-coupon-btn {
    position: fixed;
    bottom: 88px;
    left: 20px;
    z-index: 9500;
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #6f42c1, #5a32a3);
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 10px 18px 10px 14px;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.88em;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(111, 66, 193, 0.45);
    transition: transform 0.2s, box-shadow 0.2s;
    direction: rtl;
}
.admin-coupon-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(111, 66, 193, 0.6);
}
.admin-coupon-btn i { font-size: 1.05em; }
.acb-label { white-space: nowrap; }

/* Modal Overlay */
.coupon-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10500;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    direction: rtl;
}
.coupon-modal-overlay.open {
    opacity: 1;
    pointer-events: all;
}

/* Modal Box */
.coupon-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 700px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    transform: translateY(20px) scale(0.97);
    transition: transform 0.25s ease;
}
.coupon-modal-overlay.open .coupon-modal {
    transform: translateY(0) scale(1);
}

.coupon-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #f0f0f4;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
    border-radius: 16px 16px 0 0;
}
.coupon-modal-header h3 {
    font-family: 'Tajawal', sans-serif;
    font-size: 1.05em;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.coupon-modal-header h3 i { color: #6f42c1; }
.coupon-modal-close {
    background: none;
    border: none;
    font-size: 1.2em;
    color: #888;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
}
.coupon-modal-close:hover { background: #f5f5f5; color: #333; }

.coupon-modal-body {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Create Form */
.coupon-create-form {
    background: linear-gradient(135deg, #f8f4ff, #f3f0ff);
    border: 1px solid #e0d7f5;
    border-radius: 12px;
    padding: 18px;
}
.coupon-create-form h4,
.coupon-list-section h4 {
    font-family: 'Tajawal', sans-serif;
    font-size: 0.95em;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.coupon-create-form h4 i { color: #6f42c1; }
.coupon-list-section h4 i { color: #FF8C00; }

.coupon-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.coupon-form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.coupon-form-group label {
    font-family: 'Tajawal', sans-serif;
    font-size: 0.78em;
    font-weight: 700;
    color: #555;
}
.coupon-form-group input,
.coupon-form-group select {
    border: 1.5px solid #d0c8ee;
    border-radius: 8px;
    padding: 8px 12px;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.9em;
    color: #1a1a2e;
    background: #fff;
    outline: none;
    transition: border-color 0.2s;
    direction: ltr;
    text-align: right;
}
.coupon-form-group input:focus,
.coupon-form-group select:focus {
    border-color: #6f42c1;
    box-shadow: 0 0 0 3px rgba(111,66,193,0.12);
}
.coupon-form-group input::placeholder { color: #aaa; }

.coupon-create-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, #6f42c1, #5a32a3);
    color: #fff;
    border: none;
    border-radius: 25px;
    padding: 10px 22px;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.9em;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}
.coupon-create-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.coupon-create-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.coupon-form-msg {
    margin-top: 10px;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.85em;
    font-weight: 600;
    min-height: 20px;
    transition: all 0.3s;
}
.coupon-form-msg.success { color: #28a745; }
.coupon-form-msg.error   { color: #dc3545; }

/* List Section */
.coupon-list-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}
.coupon-loading,
.coupon-empty {
    text-align: center;
    padding: 24px;
    color: #888;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.9em;
}
.coupon-empty i { font-size: 2em; display: block; margin-bottom: 8px; opacity: 0.4; }

.coupon-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 12px 14px;
    transition: opacity 0.3s, transform 0.3s;
    flex-wrap: wrap;
}
.coupon-item:hover { border-color: #ddd; background: #f5f5f5; }

.ci-code {
    font-family: 'Courier New', monospace;
    font-size: 0.95em;
    font-weight: 800;
    color: #1a1a2e;
    background: #f0ecff;
    border: 1px dashed #c0b0e8;
    border-radius: 6px;
    padding: 4px 10px;
    letter-spacing: 1px;
    min-width: 90px;
    text-align: center;
}

.ci-details {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}
.ci-type {
    font-family: 'Tajawal', sans-serif;
    font-size: 0.82em;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}
.ci-type.percentage {
    background: #e8f4f8;
    color: #007185;
}
.ci-type.fixed {
    background: #fff3cd;
    color: #856404;
}
.ci-uses {
    font-family: 'Tajawal', sans-serif;
    font-size: 0.82em;
    color: #666;
    display: flex;
    align-items: center;
    gap: 4px;
}
.ci-status {
    font-family: 'Tajawal', sans-serif;
    font-size: 0.78em;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}
.ci-status.active   { background: #d4edda; color: #155724; }
.ci-status.inactive { background: #f8d7da; color: #721c24; }

.ci-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ci-toggle-btn,
.ci-copy-btn,
.ci-delete-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    transition: all 0.2s;
}
.ci-toggle-btn { color: #6f42c1; }
.ci-toggle-btn:hover { background: #f0ecff; border-color: #c0b0e8; }
.ci-copy-btn { color: #007185; }
.ci-copy-btn:hover { background: #e8f4f8; border-color: #b0d8e0; }
.ci-delete-btn { color: #dc3545; }
.ci-delete-btn:hover { background: #fff0f0; border-color: #f5c2c7; }

/* Responsive coupon modal */
@media (max-width: 600px) {
    .admin-coupon-btn .acb-label { display: none; }
    .admin-coupon-btn { padding: 12px; border-radius: 50%; width: 46px; height: 46px; justify-content: center; }
    .coupon-form-row { grid-template-columns: 1fr 1fr; }
    .coupon-modal { max-height: 92vh; }
    .coupon-item { gap: 8px; }
}
@media (max-width: 768px) {
    .admin-coupon-btn { bottom: 72px; left: 14px; }
}

/* ---- Flash Deals Status Bar (in admin coupon modal) ---- */
.flash-status-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #fff8f0, #fff3e6);
    border: 1px solid #ffd9a8;
    border-radius: 12px;
    padding: 14px 16px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.fsd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 100px;
}
.fsd-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,140,0,0.15);
    color: #FF8C00;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    flex-shrink: 0;
}
.fsd-num {
    font-family: 'Tajawal', sans-serif;
    font-size: 1.1em;
    font-weight: 800;
    color: #1a1a2e;
    line-height: 1.2;
}
.fsd-label {
    font-family: 'Tajawal', sans-serif;
    font-size: 0.72em;
    color: #888;
    margin-top: 1px;
}
.fsd-reset-btn {
    background: linear-gradient(135deg, #FF8C00, #e67e00);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.82em;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s, transform 0.2s;
    white-space: nowrap;
}
.fsd-reset-btn:hover { opacity: 0.88; transform: scale(0.97); }
@media (max-width: 520px) {
    .flash-status-bar { gap: 8px; padding: 10px 12px; }
    .fsd-item { min-width: 80px; }
    .fsd-num { font-size: 0.95em; }
}
/* ===== ADMIN NOTIFICATION MODAL ===== */
.notif-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 9998;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.notif-overlay.open { display: flex; }

.notif-modal {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 560px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    overflow: hidden;
    animation: notifSlideIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
    max-height: 92vh;
    overflow-y: auto;
}
@keyframes notifSlideIn {
    from { transform: translateY(-30px) scale(0.95); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

.notif-modal-header {
    background: linear-gradient(135deg, #1a1f35 0%, #232f3e 100%);
    padding: 20px 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.notif-modal-title {
    display: flex;
    align-items: center;
    gap: 14px;
}
.notif-modal-icon {
    width: 46px;
    height: 46px;
    background: rgba(255,140,0,0.2);
    border: 1px solid rgba(255,140,0,0.35);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    color: #FF8C00;
    flex-shrink: 0;
}
.notif-modal-title h3 {
    font-family: 'Tajawal', sans-serif;
    color: #fff;
    font-size: 1.05em;
    font-weight: 700;
    margin: 0 0 3px;
}
.notif-modal-title p {
    font-family: 'Tajawal', sans-serif;
    color: rgba(255,255,255,0.55);
    font-size: 0.8em;
    margin: 0;
}
.notif-modal-close {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.notif-modal-close:hover { background: rgba(255,255,255,0.2); color: #fff; }

.notif-modal-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Type selector */
.notif-type-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.notif-type-btn {
    flex: 1;
    min-width: 90px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 2px solid #e8e8e8;
    background: #f8f8f8;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.82em;
    cursor: pointer;
    transition: all 0.2s;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.notif-type-btn:hover { border-color: #FF8C00; color: #FF8C00; background: #fff8ef; }
.notif-type-btn.active { border-color: #FF8C00; background: #fff3e0; color: #FF8C00; font-weight: 700; }
.notif-type-btn[data-type="info"].active    { border-color: #3b82f6; background: #eff6ff; color: #3b82f6; }
.notif-type-btn[data-type="success"].active { border-color: #22c55e; background: #f0fdf4; color: #16a34a; }
.notif-type-btn[data-type="warning"].active { border-color: #f59e0b; background: #fffbeb; color: #d97706; }
.notif-type-btn[data-type="promo"].active   { border-color: #FF8C00; background: #fff3e0; color: #FF8C00; }

/* Emoji bar */
.notif-emojis {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    background: #f8f9fa;
    border-radius: 10px;
    padding: 8px 12px;
}
.notif-emoji-label {
    font-family: 'Tajawal', sans-serif;
    font-size: 0.78em;
    color: #888;
    margin-left: 4px;
    white-space: nowrap;
}
.notif-emoji-btn {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    cursor: pointer;
    font-size: 1.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 0;
}
.notif-emoji-btn:hover { border-color: #FF8C00; transform: scale(1.15); background: #fff8ef; }

/* Textarea */
.notif-label {
    display: block;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.88em;
    font-weight: 700;
    color: #333;
    margin-bottom: 7px;
}
.notif-label span { color: #dc3545; }
.notif-textarea-wrap { position: relative; }
.notif-textarea {
    width: 100%;
    min-height: 90px;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    padding: 12px 14px 28px;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.95em;
    resize: vertical;
    box-sizing: border-box;
    direction: rtl;
    transition: border-color 0.2s;
    line-height: 1.6;
    color: #333;
    background: #fafafa;
}
.notif-textarea:focus { outline: none; border-color: #FF8C00; background: #fff; }
.notif-counter {
    position: absolute;
    bottom: 8px;
    left: 12px;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.74em;
    color: #aaa;
}

/* Preview */
.notif-preview-label {
    font-family: 'Tajawal', sans-serif;
    font-size: 0.82em;
    color: #888;
    margin-bottom: 8px;
}
.notif-preview {
    background: #f8f9fa;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color 0.3s;
}
.notif-preview-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.9em;
    color: #333;
}
.notif-preview-icon { font-size: 1.1em; color: #3b82f6; flex-shrink: 0; }

/* Footer */
.notif-modal-footer {
    display: flex;
    gap: 10px;
    padding: 16px 22px 20px;
    border-top: 1px solid #f0f0f0;
    flex-wrap: wrap;
}
.notif-cancel-btn {
    padding: 10px 18px;
    border-radius: 10px;
    border: 2px solid #e0e0e0;
    background: #fff;
    color: #555;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.2s;
}
.notif-cancel-btn:hover { border-color: #ccc; background: #f5f5f5; }

.notif-remove-btn {
    padding: 10px 18px;
    border-radius: 10px;
    border: 2px solid #fee2e2;
    background: #fff5f5;
    color: #dc3545;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.2s;
}
.notif-remove-btn:hover { background: #fee2e2; border-color: #dc3545; }

.notif-send-btn {
    flex: 1;
    min-width: 140px;
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #FF8C00, #e67e00);
    color: #fff;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.95em;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 14px rgba(255,140,0,0.35);
}
.notif-send-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255,140,0,0.45); }
.notif-send-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

.notif-status {
    font-family: 'Tajawal', sans-serif;
    font-size: 0.88em;
    text-align: center;
    padding: 0 22px 14px;
    min-height: 24px;
}
.notif-status.success { color: #16a34a; }
.notif-status.error   { color: #dc3545; }

@media (max-width: 480px) {
    .notif-modal-footer { flex-direction: column; }
    .notif-send-btn { min-width: unset; }
    .notif-type-btn { min-width: 70px; font-size: 0.78em; }
}

/* ===== GLOBAL UX IMPROVEMENTS ===== */

/* Page transition fade-in */
body {
    animation: pageFadeIn 0.25s ease-out;
}
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Smooth focus ring for all inputs */
input:focus, textarea:focus, select:focus {
    outline: none;
}

/* Better scrollbar globally */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f0f0f0; }
::-webkit-scrollbar-thumb { background: rgba(255,140,0,0.4); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,140,0,0.7); }

/* Notification banner (div#success from PHP) */
div#success, .success#success {
    background: linear-gradient(135deg, #1a1f35, #232f3e) !important;
    border: none !important;
    border-right: 4px solid #FF8C00 !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    animation: notifBanner 0.4s cubic-bezier(0.34,1.56,0.64,1) !important;
    position: relative !important;
    overflow: hidden !important;
}
div#success p, .success#success p {
    font-family: 'Tajawal', sans-serif !important;
    font-size: 0.95em !important;
    font-weight: 600 !important;
    color: #fff !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
div#success::before {
    content: '';
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 60px;
    background: linear-gradient(to left, rgba(255,140,0,0.08), transparent);
}
@keyframes notifBanner {
    from { opacity: 0; transform: translateY(-10px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Error banner */
div#error, .error#error {
    background: linear-gradient(135deg, #3d1a1a, #2d1010) !important;
    border: none !important;
    border-right: 4px solid #dc3545 !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 20px rgba(220,53,69,0.15) !important;
    animation: notifBanner 0.4s cubic-bezier(0.34,1.56,0.64,1) !important;
}
div#error p, .error#error p {
    font-family: 'Tajawal', sans-serif !important;
    font-size: 0.95em !important;
    font-weight: 600 !important;
    color: #ff6b6b !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Product card improvements */
.product-card {
    transition: transform 0.22s cubic-bezier(0.25,0.46,0.45,0.94),
                box-shadow 0.22s ease !important;
}
.product-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.14) !important;
}

/* Add-to-cart button pulse on hover */
.add-to-cart-btn {
    transition: all 0.2s !important;
}
.add-to-cart-btn:hover {
    transform: scale(1.04) !important;
}

/* Filter tabs active indicator */
.filter-item.active {
    position: relative;
}
.filter-item.active::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 50%; right: 50%;
    height: 2px;
    background: #FF8C00;
    transition: left 0.2s, right 0.2s;
}

/* Sidebar transition improvement */
.sidebar {
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Pro-footer link hover underline */
.pro-footer-col ul li a {
    position: relative;
    display: inline-block;
}
.pro-footer-col ul li a::after {
    content: '';
    position: absolute;
    bottom: -1px; right: 0;
    width: 0; height: 1px;
    background: #FF8C00;
    transition: width 0.2s;
}
.pro-footer-col ul li a:hover::after { width: 100%; }

/* Navbar logo hover effect */
.logo {
    transition: color 0.2s !important;
}
.logo:hover { color: #FF8C00 !important; }

/* Cart icon bounce on add */
@keyframes cartBounce {
    0% { transform: scale(1); }
    40% { transform: scale(1.25); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
}
.cart-count.bounce { animation: cartBounce 0.4s ease; }

/* Section header line animation */
.section-header {
    transition: border-color 0.3s;
}

/* Image loading skeleton */
img[loading="lazy"] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton 1.5s infinite;
}
img[loading="lazy"].loaded {
    background: none;
    animation: none;
}
@keyframes skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Mobile touch feedback */
@media (hover: none) {
    .product-card:active { transform: scale(0.97) !important; }
    .add-to-cart-btn:active { transform: scale(0.95) !important; }
    .filter-item:active { opacity: 0.7; }
}

/* =====================================================
   BUY MODAL REDESIGN 2026 — CSS Override
   (Modal HTML is generated by obfuscated script.js)
===================================================== */

/* Overlay backdrop */
.discount, .alertDiv {
    background: rgba(10, 12, 20, 0.88) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

/* Modal box */
.discount .discountDiv,
.discountDiv, .alert {
    background: #ffffff !important;
    border-radius: 20px !important;
    width: min(500px, 95vw) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45) !important;
    padding: 0 !important;
    text-align: right !important;
    position: relative !important;
    animation: buyModalIn 0.28s cubic-bezier(0.34, 1.3, 0.64, 1) both !important;
}

@keyframes buyModalIn {
    from { transform: translateY(28px) scale(0.97); opacity: 0; }
    to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* Modal scrollbar */
.discountDiv::-webkit-scrollbar, .alert::-webkit-scrollbar { width: 5px; }
.discountDiv::-webkit-scrollbar-track, .alert::-webkit-scrollbar-track { background: transparent; }
.discountDiv::-webkit-scrollbar-thumb, .alert::-webkit-scrollbar-thumb { background: #e0e3ea; border-radius: 10px; }

/* Modal title / header */
#discountTitle {
    background: linear-gradient(135deg, #1a1f35 0%, #232f3e 100%) !important;
    color: #fff !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 20px 24px 18px !important;
    margin: 0 !important;
    font-family: 'Tajawal', sans-serif !important;
    font-size: 1.08rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    position: relative !important;
}

/* Close button repositioned on header */
.discount .close, .alertDiv .close {
    position: absolute !important;
    top: 50% !important;
    left: 20px !important;
    transform: translateY(-50%) !important;
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 1.45rem !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: color 0.2s !important;
    line-height: 1 !important;
    padding: 0 !important;
}
.discount .close:hover, .alertDiv .close:hover {
    color: #FF8C00 !important;
}

/* Inner rows / sections padding */
.discount .discountDiv > div,
.discountDiv > div, .alert > div {
    padding: 6px 22px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
}
.discount .discountDiv > div:first-of-type,
.discountDiv > div:first-of-type, .alert > div:first-of-type {
    padding-top: 18px !important;
}
.discount .discountDiv > div:last-child,
.discountDiv > div:last-child, .alert > div:last-child {
    padding-bottom: 22px !important;
}

/* Input group wrapper */
.input-group {
    margin: 6px 0 !important;
}

/* All form fields inside modal */
.discount .discountDiv .input-group input,
.discount .discountDiv .input-group select,
.discount .discountDiv .input-group textarea,
.discountDiv .input-group input,
.discountDiv .input-group select,
.discountDiv .input-group textarea,
.alert .input-group input,
.alert .input-group select,
.alert .input-group textarea {
    background: #f8f9fb !important;
    border: 1.5px solid #e0e3ea !important;
    border-radius: 10px !important;
    padding: 11px 14px 11px 42px !important;
    font-family: 'Tajawal', sans-serif !important;
    font-size: 0.93rem !important;
    color: #1a1f35 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
    height: auto !important;
    outline: none !important;
}
.discount .discountDiv .input-group input:focus,
.discount .discountDiv .input-group select:focus,
.discount .discountDiv .input-group textarea:focus,
.discountDiv .input-group input:focus,
.discountDiv .input-group select:focus,
.discountDiv .input-group textarea:focus,
.alert .input-group input:focus,
.alert .input-group select:focus,
.alert .input-group textarea:focus {
    border-color: #FF8C00 !important;
    box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.12) !important;
    background: #fff !important;
}

/* Icon inside input-group */
.discountDiv .input-group i, .alert .input-group i {
    color: #FF8C00 !important;
    font-size: 14px !important;
}

/* Note textarea */
.discountDiv .input-group textarea, .alert .input-group textarea {
    min-height: 70px !important;
    resize: vertical !important;
    padding-top: 10px !important;
}

/* Submit / save button */
.discount .discountDiv .save-button,
.discountDiv .save-button, .alert .save-button,
.discount .discountDiv button[type="submit"],
.discountDiv button[type="submit"], .alert button[type="submit"] {
    width: 100% !important;
    background: linear-gradient(135deg, #FF8C00, #e07b00) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 11px !important;
    padding: 13px 20px !important;
    font-family: 'Tajawal', sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    margin-top: 10px !important;
    transition: all 0.2s !important;
    box-shadow: 0 4px 16px rgba(255, 140, 0, 0.32) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}
.discount .discountDiv .save-button:hover,
.discountDiv .save-button:hover, .alert .save-button:hover,
.discount .discountDiv button[type="submit"]:hover,
.discountDiv button[type="submit"]:hover, .alert button[type="submit"]:hover {
    background: linear-gradient(135deg, #e07b00, #c96e00) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(255, 140, 0, 0.4) !important;
}

/* Section divider inside modal */
.discountDiv hr, .alert hr {
    border: none !important;
    border-top: 1px solid #f0f2f5 !important;
    margin: 8px 0 !important;
}

/* Labels inside modal */
.discountDiv label, .alert label {
    font-family: 'Tajawal', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #444 !important;
    margin-bottom: 4px !important;
    display: block !important;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .discount .discountDiv,
    .discountDiv, .alert {
        border-radius: 16px 16px 0 0 !important;
        width: 100% !important;
        max-height: 92vh !important;
        position: fixed !important;
        bottom: 0 !important;
        margin: 0 !important;
    }
    .discount, .alertDiv {
        align-items: flex-end !important;
    }
    #discountTitle {
        border-radius: 16px 16px 0 0 !important;
    }
}

/* ============================================================
   WISHLIST DRAWER  (pro-features.js — initWishlistDrawer)
   ============================================================ */

/* Navbar heart icon button */
.wishlist-nav-btn {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25em;
    color: #e0e0e0;
    padding: 6px 9px;
    border-radius: 10px;
    transition: color .2s, background .2s;
    display: flex;
    align-items: center;
}
.wishlist-nav-btn:hover { color: #FF6B8A; background: rgba(255,107,138,.1); }
.wishlist-nav-btn .wl-count {
    position: absolute;
    top: 1px;
    left: 1px;
    min-width: 17px;
    height: 17px;
    background: #FF6B8A;
    color: #fff;
    border-radius: 10px;
    font-size: .64em;
    font-weight: 800;
    font-family: 'Tajawal', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    pointer-events: none;
    transition: transform .2s;
}
.wishlist-nav-btn .wl-count:empty { display: none; }

/* Overlay */
.wl-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0);
    z-index: 1099;
    pointer-events: none;
    transition: background .3s;
}
.wl-overlay.open {
    pointer-events: all;
    background: rgba(0,0,0,0.45);
}

/* Slide-in drawer from right (RTL) */
.wl-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 340px;
    max-width: 95vw;
    height: 100%;
    background: #fff;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    box-shadow: -8px 0 40px rgba(0,0,0,.18);
    direction: rtl;
}
.wl-drawer.open { transform: translateX(0); }

/* Drawer header */
.wl-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: linear-gradient(135deg, #1a1f35, #232f3e);
    color: #fff;
    flex-shrink: 0;
}
.wl-drawer-title {
    font-family: 'Tajawal', sans-serif;
    font-size: 1.05em;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}
.wl-drawer-title i { color: #FF6B8A; }
.wl-drawer-close {
    background: none;
    border: none;
    color: rgba(255,255,255,.7);
    font-size: 1.2em;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: color .2s, background .2s;
}
.wl-drawer-close:hover { color: #fff; background: rgba(255,255,255,.1); }

/* Drawer body */
.wl-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}
.wl-drawer-body::-webkit-scrollbar { width: 4px; }
.wl-drawer-body::-webkit-scrollbar-thumb { background: #e0e3ea; border-radius: 4px; }

/* Empty state */
.wl-empty {
    text-align: center;
    padding: 50px 20px;
    color: #aaa;
    font-family: 'Tajawal', sans-serif;
}
.wl-empty i { font-size: 3em; color: #f0d0d8; margin-bottom: 12px; }
.wl-empty p { font-size: .95em; }

/* Loading state */
.wl-loading {
    text-align: center;
    padding: 40px;
    color: #aaa;
    font-family: 'Tajawal', sans-serif;
    font-size: .9em;
}

/* Each wishlist item */
.wl-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: #f8f9fb;
    border: 1px solid #eef0f5;
    border-radius: 14px;
    margin-bottom: 8px;
    transition: box-shadow .2s;
}
.wl-item:hover { box-shadow: 0 3px 14px rgba(0,0,0,.08); }
.wl-item-img {
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
    background: #eee;
}
.wl-item-info {
    flex: 1;
    min-width: 0;
}
.wl-item-name {
    font-family: 'Tajawal', sans-serif;
    font-size: .88em;
    font-weight: 700;
    color: #1a1f35;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wl-item-price {
    font-family: 'Tajawal', sans-serif;
    font-size: .82em;
    font-weight: 700;
    color: #FF8C00;
}
.wl-item-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}
.wl-btn-view {
    background: #FF8C00;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 5px 11px;
    font-size: .76em;
    font-weight: 700;
    font-family: 'Tajawal', sans-serif;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background .2s;
}
.wl-btn-view:hover { background: #e07b00; }
.wl-btn-remove {
    background: rgba(255,107,138,.12);
    color: #e0304a;
    border: 1px solid rgba(255,107,138,.3);
    border-radius: 8px;
    padding: 5px 11px;
    font-size: .76em;
    font-weight: 700;
    font-family: 'Tajawal', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background .2s;
}
.wl-btn-remove:hover { background: rgba(255,107,138,.22); }

/* Dark mode */
html.dilbox-dark .wl-drawer { background: #1a1d27; }
html.dilbox-dark .wl-item { background: #1e2130; border-color: #2a2d3a; }
html.dilbox-dark .wl-item-name { color: #e0e2ec; }
html.dilbox-dark .wl-drawer-body::-webkit-scrollbar-thumb { background: #3a3d4a; }

@media (max-width: 400px) {
    .wl-drawer { width: 100vw; }
}

/* ============ Real Estate Styles (re- prefix) — Redesigned ============ */

/* ── City Chips (inside deals-section) ── */
.re-cities-scroll {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.re-cities-scroll::-webkit-scrollbar { display: none; }
.re-city-chip {
    white-space: nowrap;
    padding: 6px 14px;
    border-radius: 20px;
    background: #f8f9fa;
    color: #666;
    text-decoration: none;
    font-size: 0.82rem;
    border: 1.5px solid #eef0f4;
    transition: all 0.2s;
    flex-shrink: 0;
    font-family: 'Tajawal', sans-serif;
    font-weight: 500;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.re-city-chip:hover { border-color: var(--primary); color: var(--primary); }
.re-city-chip.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(255,140,0,0.25);
}
.re-city-chip i { margin-left: 4px; }

/* ── Property Cards Grid ── */
.re-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.re-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid #f0f0f0;
}
.re-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.re-card-img {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #f5f5f5;
}
.re-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}
.re-card:hover .re-card-img img { transform: scale(1.05); }
.re-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 50%, rgba(0,0,0,0.5));
    pointer-events: none;
}
.re-no-img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 3rem;
    color: #ddd;
    background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
}
.re-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 4px;
    backdrop-filter: blur(8px);
    z-index: 2;
}
.re-badge--rent { background: rgba(33,150,243,0.9); }
.re-badge--sale { background: rgba(76,175,80,0.9); }
.re-card-price-tag {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(0,0,0,0.7);
    color: #FF8C00;
    padding: 5px 12px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 1rem;
    backdrop-filter: blur(8px);
    z-index: 2;
}
.re-card-price-tag small { color: rgba(255,255,255,0.7); font-size: 0.7em; font-weight: 400; }
.re-card-body { padding: 14px 16px; }
.re-card-body h3 {
    font-size: 0.95rem;
    margin-bottom: 8px;
    color: #1a1f35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}
.re-card-location {
    color: #888;
    font-size: 0.82rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.re-card-location i { color: #e74c3c; font-size: 0.75rem; }
.re-card-features {
    display: flex;
    gap: 12px;
    color: #999;
    font-size: 0.78rem;
    flex-wrap: wrap;
}
.re-card-features span { display: flex; align-items: center; gap: 4px; }
.re-card-features i { color: #FF8C00; font-size: 0.7rem; }

/* ── Empty State ── */
.re-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 16px;
    border: 2px dashed #e8e8e8;
}
.re-empty-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.8rem;
    color: #ccc;
}
.re-empty-state h3 { color: #333; margin-bottom: 8px; font-size: 1.1rem; }
.re-empty-state p { color: #999; font-size: 0.9rem; margin-bottom: 15px; }
.re-empty-btn {
    display: inline-block;
    background: #FF8C00;
    color: #fff;
    padding: 8px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ── Breadcrumb ── */
.re-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    font-size: 0.85rem;
    color: #999;
}
.re-breadcrumb a {
    color: #FF8C00;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}
.re-breadcrumb a:hover { text-decoration: underline; }
.re-breadcrumb i.fa-chevron-left { font-size: 0.65rem; color: #ccc; }

/* ═══════════════ Detail Page ═══════════════ */
.re-detail-wrapper {
    margin-bottom: 20px;
}

/* Gallery */
.re-detail-gallery {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.re-gallery-main {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    background: #1a1f35;
    overflow: hidden;
}
.re-gallery-main > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.3s;
}
.re-gallery-counter {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    backdrop-filter: blur(6px);
}
.re-gallery-thumbs {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    overflow-x: auto;
    background: #f8f9fa;
    scrollbar-width: none;
}
.re-gallery-thumbs::-webkit-scrollbar { display: none; }
.re-thumb {
    flex-shrink: 0;
    width: 65px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: all 0.2s;
}
.re-thumb:hover { opacity: 0.8; }
.re-thumb.active { border-color: #FF8C00; opacity: 1; }
.re-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Video Section */
.re-detail-video {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.re-detail-video h3 {
    font-size: 0.95rem;
    color: #333;
    margin-bottom: 12px;
}
.re-detail-video h3 i { color: #FF8C00; margin-left: 6px; }
.re-detail-video video {
    width: 100%;
    max-height: 400px;
    border-radius: 12px;
    background: #000;
}

/* Detail Card */
.re-detail-card {
    background: #fff;
    border-radius: 16px;
    padding: 22px 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.re-detail-title-row h1 {
    font-size: 1.3rem;
    color: #1a1f35;
    margin-bottom: 12px;
    line-height: 1.5;
    font-weight: 800;
}
.re-detail-price-box {
    background: linear-gradient(135deg, #fff8f0, #fff3e0);
    border: 1px solid #ffe0b2;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 18px;
}
.re-detail-price-val {
    font-size: 1.6rem;
    font-weight: 800;
    color: #FF8C00;
}
.re-detail-price-val small { font-size: 0.6em; color: #999; }
.re-detail-price-period { font-size: 0.5em; color: #999; font-weight: 400; }

/* Specs Grid */
.re-detail-specs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}
.re-detail-spec-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #f0f0f0;
}
.re-detail-spec-item i {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF8C00, #e07800);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.re-detail-spec-item small { display: block; font-size: 0.72rem; color: #999; }
.re-detail-spec-item strong { display: block; font-size: 0.88rem; color: #333; }

/* Detail Sections */
.re-detail-section {
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f0f0f0;
}
.re-detail-section h3 {
    color: #1a1f35;
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}
.re-detail-section h3 i { color: #FF8C00; }
.re-detail-desc {
    white-space: pre-wrap;
    font-family: 'Tajawal', sans-serif;
    color: #555;
    line-height: 1.7;
    font-size: 0.9rem;
}
.re-detail-map { border-radius: 12px; overflow: hidden; }
.re-detail-map iframe { width: 100%; height: 280px; border: none; }
.re-map-external {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: #4285f4;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.85rem;
}

/* Contact Section */
.re-detail-contact {
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f0f0f0;
}
.re-detail-contact h3 {
    color: #1a1f35;
    margin-bottom: 12px;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}
.re-detail-contact h3 i { color: #FF8C00; }
.re-detail-notice {
    display: flex;
    gap: 10px;
    align-items: center;
    background: linear-gradient(135deg, #fff8f0, #fff3e0);
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 14px;
    border-right: 3px solid #FF8C00;
}
.re-detail-notice i { color: #FF8C00; font-size: 1.1rem; }
.re-detail-notice p { color: #777; font-size: 0.85rem; line-height: 1.5; }
.re-detail-phone { margin-top: 10px; }
.re-phone-hidden,
.re-phone-shown {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: #f8f9fa;
    border-radius: 10px;
}
.re-phone-number {
    font-size: 1.05rem;
    letter-spacing: 1px;
    color: #333;
    font-weight: 600;
}
.re-phone-number i { margin-left: 6px; color: #FF8C00; }
.re-phone-show-btn {
    padding: 7px 16px;
    background: linear-gradient(135deg, #FF8C00, #e07800);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: 'Tajawal', sans-serif;
    font-weight: 600;
    transition: all 0.2s;
}
.re-phone-show-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(255,140,0,0.3); }
.re-phone-call-btn {
    padding: 7px 16px;
    background: linear-gradient(135deg, #4CAF50, #388E3C);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}
.re-phone-call-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(76,175,80,0.3); }

/* Owner Badge & Admin */
.re-detail-owner-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    border-radius: 10px;
    color: #2e7d32;
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 12px;
}
.re-detail-admin { margin-bottom: 12px; }
.re-admin-delete-btn {
    padding: 9px 20px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.88rem;
    font-family: 'Tajawal', sans-serif;
    font-weight: 600;
    transition: all 0.2s;
}
.re-admin-delete-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(231,76,60,0.3); }
.re-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 10px 20px;
    background: #f5f5f5;
    color: #666;
    border-radius: 10px;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    transition: all 0.2s;
}
.re-detail-back:hover { background: #eee; transform: translateX(3px); }

/* ═══════════════ Add Property Form ═══════════════ */
.re-form-wrapper {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    margin-bottom: 20px;
}
.re-form-header {
    background: linear-gradient(135deg, #1a1f35, #232f3e);
    padding: 30px 20px;
    text-align: center;
    color: #fff;
}
.re-form-header-icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF8C00, #e07800);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 1.3rem;
}
.re-form-header h2 {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 6px;
}
.re-form-header p { color: rgba(255,255,255,0.6); font-size: 0.85rem; }

.re-form-section {
    padding: 18px 20px;
    border-bottom: 1px solid #f0f0f0;
}
.re-form-section:last-of-type { border-bottom: none; }
.re-form-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}
.re-form-step {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF8C00, #e07800);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    flex-shrink: 0;
}
.re-form-section-title h3 {
    font-size: 1rem;
    color: #1a1f35;
    font-weight: 700;
}
.re-form-hint {
    font-size: 0.82rem;
    color: #999;
    margin-bottom: 12px;
}
.re-form-group {
    margin-bottom: 14px;
    flex: 1;
}
.re-form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 6px;
}
.re-required { color: #e74c3c; }
.re-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8f9fa;
    border: 1.5px solid #e8e8e8;
    border-radius: 10px;
    padding: 0 12px;
    transition: border-color 0.2s;
}
.re-input-wrap:focus-within { border-color: #FF8C00; background: #fff; }
.re-input-wrap i { color: #bbb; font-size: 0.9rem; flex-shrink: 0; }
.re-input-wrap input,
.re-input-wrap select,
.re-input-wrap textarea {
    flex: 1;
    border: none;
    background: transparent;
    padding: 11px 0;
    font-size: 0.9rem;
    font-family: 'Tajawal', sans-serif;
    outline: none;
    color: #333;
}
.re-input-wrap select { cursor: pointer; }
.re-input-wrap--textarea {
    align-items: flex-start;
    padding-top: 10px;
}
.re-input-wrap--textarea textarea { resize: vertical; min-height: 80px; }
.re-form-row {
    display: flex;
    gap: 12px;
}
.re-form-id-notice {
    display: flex;
    gap: 10px;
    align-items: center;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 14px;
    border-right: 3px solid #2196F3;
}
.re-form-id-notice i { color: #2196F3; font-size: 1.2rem; }
.re-form-id-notice p { color: #555; font-size: 0.83rem; line-height: 1.5; }

/* Images Grid */
.re-images-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}
.re-img-upload {
    position: relative;
    border: 2px dashed #ddd;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 1;
    cursor: pointer;
    transition: all 0.2s;
    background: #fafafa;
}
.re-img-upload:hover { border-color: #FF8C00; background: #fff8f0; }
.re-img-upload label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    cursor: pointer;
    color: #bbb;
    font-size: 0.72rem;
    gap: 4px;
}
.re-img-upload label i { font-size: 1.2rem; color: #ccc; }
.re-img-upload label img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ID Upload Grid */
.re-id-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}
.re-id-upload {
    position: relative;
    border: 2px dashed #ddd;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 3/4;
    cursor: pointer;
    transition: all 0.2s;
    background: #fafafa;
}
.re-id-upload:hover { border-color: #2196F3; background: #f0f7ff; }
.re-id-upload label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    cursor: pointer;
    color: #bbb;
    font-size: 0.75rem;
    gap: 6px;
    text-align: center;
    padding: 5px;
}
.re-id-upload label i { font-size: 1.5rem; color: #90caf9; }
.re-id-upload label img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Video Upload */
.re-video-upload {
    border: 2px dashed #ddd;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #fafafa;
    margin-bottom: 15px;
}
.re-video-upload:hover { border-color: #FF8C00; background: #fff8f0; }
.re-video-upload label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #bbb;
}
.re-video-upload label i { font-size: 2rem; color: #ccc; }
.re-video-upload label small { font-size: 0.75rem; color: #ccc; }
.re-video-upload video {
    max-width: 100%;
    max-height: 200px;
    border-radius: 10px;
    margin-top: 10px;
}

/* Form Messages */
.re-form-msg {
    padding: 12px 16px;
    border-radius: 10px;
    margin: 12px 20px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.re-form-msg--success { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
.re-form-msg--error { background: #ffebee; color: #c62828; border: 1px solid #ffcdd2; }
.re-form-msg--warning { background: #fff8e1; color: #f57f17; border: 1px solid #fff9c4; }

/* Submit Area */
.re-form-submit-area {
    padding: 18px 20px;
    text-align: center;
}
.re-form-submit-note {
    font-size: 0.82rem;
    color: #999;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.re-form-submit-note i { color: #FF8C00; }
.re-form-submit-btn {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, #FF8C00, #e07800);
    color: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Tajawal', sans-serif;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(255,140,0,0.25);
}
.re-form-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,140,0,0.35);
}
.re-form-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* ═══════════════ Admin Requests Page (rer- prefix) ═══════════════ */
.rer-hero {
    background: linear-gradient(135deg, #1a1f35, #232f3e);
    color: #fff;
    padding: 30px 22px;
    border-radius: 16px;
    margin-bottom: 18px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.rer-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M20 20h20v20H20zM0 0h20v20H0z'/%3E%3C/g%3E%3C/svg%3E");
}
.rer-hero-icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF8C00, #e07800);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 1.3rem;
    position: relative;
}
.rer-hero h2 {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 6px;
    position: relative;
}
.rer-hero p {
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
    margin-bottom: 18px;
    position: relative;
}
.rer-stats {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}
.rer-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 10px 18px;
    border-radius: 12px;
    backdrop-filter: blur(8px);
}
.rer-stat i { font-size: 1.1rem; color: #FF8C00; }
.rer-stat--green i { color: #4CAF50; }
.rer-stat strong { display: block; font-size: 1.2rem; color: #FF8C00; }
.rer-stat--green strong { color: #4CAF50; }
.rer-stat span { font-size: 0.75rem; color: rgba(255,255,255,0.6); }

.rer-empty {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 16px;
    border: 2px dashed #e8e8e8;
}
.rer-empty-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #f0fdf0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 2rem;
    color: #4CAF50;
}
.rer-empty h3 { color: #333; margin-bottom: 6px; }
.rer-empty p { color: #999; font-size: 0.9rem; }

.rer-list { display: flex; flex-direction: column; gap: 14px; }

.rer-card {
    background: #fff;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border: 1px solid #f0f0f0;
    transition: all 0.4s;
}
.rer-card-top {
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
}
.rer-card-img {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #f5f5f5;
}
.rer-card-img img { width: 100%; height: 100%; object-fit: cover; }
.rer-card-no-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #ddd;
}
.rer-card-info { flex: 1; min-width: 0; }
.rer-card-info h3 {
    font-size: 0.95rem;
    color: #1a1f35;
    margin-bottom: 6px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rer-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 0.8rem;
    color: #888;
}
.rer-card-meta i { color: #e74c3c; }
.rer-type-badge {
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
}
.rer-type-badge--rent { background: #2196F3; }
.rer-type-badge--sale { background: #4CAF50; }
.rer-card-price {
    font-weight: 800;
    color: #FF8C00;
    font-size: 1rem;
    margin-bottom: 4px;
}
.rer-card-user {
    font-size: 0.8rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.rer-card-user i { color: #999; }
.rer-card-phone { margin-right: 8px; }
.rer-card-desc {
    padding: 10px 12px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 12px;
}
.rer-card-desc p { font-size: 0.83rem; color: #666; line-height: 1.5; }

.rer-id-section {
    margin-bottom: 12px;
}
.rer-id-section h4 {
    font-size: 0.85rem;
    color: #444;
    margin-bottom: 8px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rer-id-section h4 i { color: #FF8C00; }
.rer-id-photos {
    display: flex;
    gap: 8px;
    overflow-x: auto;
}
.rer-id-item {
    flex-shrink: 0;
    text-align: center;
}
.rer-id-item img {
    width: 90px;
    height: 115px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #eee;
    cursor: pointer;
    transition: transform 0.2s;
}
.rer-id-item img:hover { transform: scale(1.05); }
.rer-id-item span {
    display: block;
    font-size: 0.7rem;
    color: #999;
    margin-top: 4px;
}
.rer-video-section { margin-bottom: 12px; }
.rer-video-section h4 {
    font-size: 0.85rem;
    color: #444;
    margin-bottom: 8px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rer-video-section h4 i { color: #FF8C00; }
.rer-video-section video {
    max-width: 100%;
    max-height: 200px;
    border-radius: 10px;
}

.rer-actions {
    display: flex;
    gap: 10px;
}
.rer-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: 'Tajawal', sans-serif;
    color: #fff;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.rer-btn--accept {
    background: linear-gradient(135deg, #4CAF50, #388E3C);
    box-shadow: 0 3px 10px rgba(76,175,80,0.25);
}
.rer-btn--refuse {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    box-shadow: 0 3px 10px rgba(231,76,60,0.25);
}
.rer-btn:hover { transform: translateY(-2px); }
.rer-btn--accept:hover { box-shadow: 0 5px 15px rgba(76,175,80,0.35); }
.rer-btn--refuse:hover { box-shadow: 0 5px 15px rgba(231,76,60,0.35); }
.rer-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ═══════════════ Responsive ═══════════════ */
@media (max-width: 600px) {
    .re-grid { grid-template-columns: 1fr; }
    .re-images-grid { grid-template-columns: repeat(3, 1fr); }
    .re-form-row { flex-direction: column; gap: 0; }
    .re-type-tabs { flex-wrap: wrap; }
    .re-detail-specs-grid { grid-template-columns: 1fr; }
    .re-hero { padding: 25px 18px; }
    .re-hero h1 { font-size: 1.25rem; }
    .re-detail-title-row h1 { font-size: 1.1rem; }
}
@media (max-width: 500px) {
    .re-id-grid { grid-template-columns: 1fr 1fr; }
    .rer-card-top { flex-direction: column; }
    .rer-card-img { width: 100%; height: 160px; }
}

/* ============ Homepage Two-Section Tabs ============ */
.db-sections-nav {
    display: flex;
    gap: 12px;
    width: 100%;
    padding: 0 16px;
}
.db-section-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 0;
    text-decoration: none;
    color: rgba(255,255,255,0.6);
    font-family: 'Tajawal', sans-serif;
    font-size: 0.95em;
    font-weight: 600;
    transition: all 0.2s;
    border-bottom: 3px solid transparent;
}
.db-section-tab:hover { color: #fff; }
.db-section-tab.active {
    color: #FF8C00;
    border-bottom-color: #FF8C00;
}
.db-section-tab i { font-size: 1.1em; }