.h-60px {
    height: 60px;
}

.h-80px {
    height: 80px;
}

.h-100px {
    height: 100px;
}

.h-400px {
    height: 400px;
}

.header-icon {
    position: relative;
}

.cart-counter {
    position: absolute;
    top: -9px;
    right: -15px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
}

.label-input-field input,
.label-input-field textarea,
.label-input-field select {
    width: 100%;
    padding: 16px 24px;
    border-radius: 4px;
    border: 1px solid #e4e4e4;
    outline: 0;
}

.label-input-field label {
    z-index: 1;
}

/* select 2 css */
.select2-container {
    width: auto;
    display: block;
    padding: 14px 24px;
    border-radius: 4px;
    border: 1px solid #e4e4e4;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 60px;
    right: 10px;
}

.select2-dropdown {
    top: -4px;
    border-color: #e4e4e4;
}

.select2-container--open .select2-dropdown {
    left: -1px;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0;
}

.select2-container--default .select2-selection--single {
    border: none;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: #e4e4e4;
}

/* toastr */

#toast-container {
    z-index: 999999;
}

#toast-container>div {
    padding: 15px 25px 15px 50px !important;
    opacity: 1;
    margin-bottom: 1.25rem;
    border-color: transparent;
    -webkit-box-shadow: 0 0.25rem 0.5625rem -0.0625rem rgba(0, 0, 0, 0.2),
        0 0.275rem 1.25rem -0.0625rem rgba(249, 250, 251, 0.05) !important;
    box-shadow: 0 0.25rem 0.5625rem -0.0625rem rgba(0, 0, 0, 0.2),
        0 0.275rem 1.25rem -0.0625rem rgba(249, 250, 251, 0.05) !important;
    border-radius: 0.3125rem;
}

[dir="rtl"] #toast-container>div {
    direction: rtl;
    background-position: center right 0.9375rem;
    padding: 15px 50px 15px 25px !important;
}

[dir="rtl"] #toast-container.toast-top-left {
    right: 12px;
    left: auto;
}

[dir="rtl"] #toast-container.toast-top-right {
    left: 12px;
    right: auto;
}

[dir="rtl"] #toast-container.toast-bottom-left {
    right: 12px;
    left: auto;
}

[dir="rtl"] #toast-container.toast-bottom-right {
    left: 12px;
    right: auto;
}

[dir="rtl"] #toast-container.toast-top-full-width#toast-container>div,
[dir="rtl"] #toast-container.toast-bottom-full-width#toast-container>div {
    left: 0;
    right: 0;
}

#toast-container>.toast {
    max-width: 100%;
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: 15px 16px;
    overflow: visible;
}

#toast-container.toast-bottom-full-width>div,
#toast-container.toast-top-full-width>div {
    padding: 15px 50px 15px 50px !important;
    width: 100%;
    margin-bottom: 0;
    border-radius: 0 !important;
}

#toast-container.toast-bottom-full-width>div .toast-close-button,
#toast-container.toast-top-full-width>div .toast-close-button {
    top: 12px !important;
}

html:not([dir="rtl"]) #toast-container.toast-bottom-full-width>div .toast-close-button,
html:not([dir="rtl"]) #toast-container.toast-top-full-width>div .toast-close-button {
    right: 12px !important;
}

[dir="rtl"] #toast-container.toast-bottom-full-width>div .toast-close-button,
[dir="rtl"] #toast-container.toast-top-full-width>div .toast-close-button {
    left: 12px !important;
}

#toast-container>.toast-info {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='512' height='512'%3E%3Cpath fill='%2303c3ec' d='M256 90c44.3 0 86 17.3 117.4 48.6C404.7 170 422 211.7 422 256s-17.3 86-48.6 117.4C342 404.7 300.3 422 256 422s-86-17.3-117.4-48.6C107.3 342 90 300.3 90 256s17.3-86 48.6-117.4C170 107.3 211.7 90 256 90m0-42C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z'/%3E%3Cpath fill='%2303c3ec' d='M277 360h-42V235h42v125zm0-166h-42v-42h42v42z'/%3E%3C/svg%3E") !important;
}

#toast-container>.toast-info .toast-close-button {
    background-color: #0d5abf !important;
    -webkit-box-shadow: 0 0.125rem 0.3rem -0.0625rem rgba(0, 0, 0, 0.1),
        0 0.275rem 0.75rem -0.0625rem rgba(249, 250, 251, 0.06) !important;
    box-shadow: 0 0.125rem 0.3rem -0.0625rem rgba(0, 0, 0, 0.1),
        0 0.275rem 0.75rem -0.0625rem rgba(249, 250, 251, 0.06) !important;
}

#toast-container>.toast-error {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='512' height='512'%3E%3Cpath fill='%23ff3e1d' d='M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z'/%3E%3C/svg%3E") !important;
}

#toast-container>.toast-error .toast-close-button {
    background-color: #e03a1d !important;
    -webkit-box-shadow: 0 0.125rem 0.3rem -0.0625rem rgba(0, 0, 0, 0.1),
        0 0.275rem 0.75rem -0.0625rem rgba(249, 250, 251, 0.06) !important;
    box-shadow: 0 0.125rem 0.3rem -0.0625rem rgba(0, 0, 0, 0.1),
        0 0.275rem 0.75rem -0.0625rem rgba(249, 250, 251, 0.06) !important;
}

#toast-container>.toast-success {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='512' height='512'%3E%3Cpath fill='%2371dd37' d='M186.301 339.893L96 249.461l-32 30.507L186.301 402 448 140.506 416 110z'/%3E%3C/svg%3E") !important;
}

#toast-container>.toast-success .toast-close-button {
    background-color: #20b250 !important;
    -webkit-box-shadow: 0 0.125rem 0.3rem -0.0625rem rgba(0, 0, 0, 0.1),
        0 0.275rem 0.75rem -0.0625rem rgba(249, 250, 251, 0.06) !important;
    box-shadow: 0 0.125rem 0.3rem -0.0625rem rgba(0, 0, 0, 0.1),
        0 0.275rem 0.75rem -0.0625rem rgba(249, 250, 251, 0.06) !important;
}

#toast-container [dir="rtl"]>.toast-success {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='512' height='512'%3E%3Cpath fill='%2371dd37' d='M96 110l-32 30.5L325.7 402L448 280l-32-30.5l-90.3 90.4L96 110z'/%3E%3C/svg%3E") !important;
}

#toast-container>.toast-warning {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='512' height='512'%3E%3Cpath fill='%23ffab00' d='M32 464h448L256 48 32 464zm248-64h-48v-48h48v48zm0-80h-48v-96h48v96z'/%3E%3C/svg%3E") !important;
    background-size: 24px;
}

#toast-container>.toast-warning .toast-close-button {
    background-color: #fcac00 !important;
    -webkit-box-shadow: 0 0.125rem 0.3rem -0.0625rem rgba(0, 0, 0, 0.1),
        0 0.275rem 0.75rem -0.0625rem rgba(249, 250, 251, 0.06) !important;
    box-shadow: 0 0.125rem 0.3rem -0.0625rem rgba(0, 0, 0, 0.1),
        0 0.275rem 0.75rem -0.0625rem rgba(249, 250, 251, 0.06) !important;
}

#toast-container:not(.toast-bottom-full-width, .toast-top-full-width)>div {
    width: 25rem !important;
}

.toast-progress {
    position: absolute;
    bottom: 0;
    top: auto;
    opacity: 0.2;
    height: 0.1875rem;
    background-color: #212b36;
    border-bottom-right-radius: 0.3125rem;
    border-bottom-left-radius: 0.3125rem;
}

[dir="rtl"] .toast-progress {
    left: auto;
    right: 0;
}

.toast-close-button {
    position: absolute;
    top: 0;
    text-shadow: none;
    border-top-right-radius: 0.25rem;
    padding: 0.2rem 0.45rem !important;
    -webkit-transition: all 0.23s ease 0.1s;
    transition: all 0.23s ease 0.1s;
    opacity: 1 !important;
    line-height: 0.98;
}

html:not([dir="rtl"]) .toast-close-button {
    right: 0 !important;
}

[dir="rtl"] .toast-close-button {
    left: -7px !important;
    right: auto !important;
}

@media (max-width: 419.98px) {
    .toast {
        width: 300px !important;
    }
}

#toast-container .toast-close-button {
    font-weight: 300;
    color: #f4f6f8 !important;
    background-color: #ffffff;
    -webkit-box-shadow: 0 0.125rem 0.3rem -0.0625rem rgba(0, 0, 0, 0.1),
        0 0.275rem 0.75rem -0.0625rem rgba(249, 250, 251, 0.06);
    box-shadow: 0 0.125rem 0.3rem -0.0625rem rgba(0, 0, 0, 0.1),
        0 0.275rem 0.75rem -0.0625rem rgba(249, 250, 251, 0.06);
}

#toast-container>.toast-success,
#toast-container>.toast-success .toast-message a,
#toast-container>.toast-success .toast-message label {
    background-color: #ffffff !important;
    color: #20b250;
}

#toast-container>.toast-error,
#toast-container>.toast-error .toast-message a,
#toast-container>.toast-error .toast-message label {
    background-color: #ffffff !important;
    color: #e03a1d;
}

#toast-container>.toast-info,
#toast-container>.toast-info .toast-message a,
#toast-container>.toast-info .toast-message label {
    background-color: #ffffff !important;
    color: #0d5abf;
}

#toast-container>.toast-warning,
#toast-container>.toast-warning .toast-message a,
#toast-container>.toast-warning .toast-message label {
    background-color: #ffffff !important;
    color: #fcac00;
}

#toast-container>.toast-success .toast-close-button,
#toast-container>.toast-error .toast-close-button,
#toast-container>.toast-info .toast-close-button,
#toast-container>.toast-warning .toast-close-button {
    color: #ffffff !important;
}

/* toastr */

.address-delete-modal {
    max-width: 700px !important;
}

.min-h-400 {
    min-height: 400px !important;
}

.avatar-icon {
    width: 1.75rem;
    height: 1.75rem;
    line-height: 1.75rem;
}

.vertical-product-card .card-btn {
    z-index: 1;
}

@media (min-width: 1199px) and (max-width: 1399.98px) {
    .d-none-1399 {
        display: none !important;
    }
}

.checkout-sidebar {
    position: sticky;
    top: 100px;
}

.grecaptcha-badge {
    z-index: 99999;
    bottom: 140px !important;
}

.scroll-top-btn.active {
    bottom: 80px;
}

.object-fit-cover {
    object-fit: cover;
}

[data-bs-theme=light] .clr-scheme .topbar-info-right li a:not(.dropdown-menu a) {
    color: #fff !important
}

.topbar-info-right {
    gap: 30px;
}

.topbar-info-right li::before {
    left: -16px !important;
}

.pagination li .page-link {
    min-width: auto;
    height: auto;
    padding: 4px 12px !important;
}

.tt-custom-pagination {
    flex-wrap: nowrap;
    overflow-x: auto;
}

/* WhatsApp Floating Button - Professional Style */
.whatsapp-floating-btn {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
    z-index: 10000;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    animation: whatsapp-float 3s ease-in-out infinite;
    cursor: pointer;
    border: 3px solid rgba(255, 255, 255, 0.2);
}

.whatsapp-floating-btn:hover {
    background: linear-gradient(135deg, #128C7E 0%, #075E54 100%);
    transform: scale(1.15) rotate(5deg);
    box-shadow: 0 15px 35px rgba(37, 211, 102, 0.5);
    text-decoration: none;
    border-color: rgba(255, 255, 255, 0.4);
}

.whatsapp-floating-btn:active {
    transform: scale(1.05);
    transition: transform 0.1s ease;
}

/* أنيميشن الطفو الاحترافي */
@keyframes whatsapp-float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
        box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
    }

    25% {
        transform: translateY(-8px) rotate(1deg);
        box-shadow: 0 12px 30px rgba(37, 211, 102, 0.4);
    }

    50% {
        transform: translateY(-5px) rotate(0deg);
        box-shadow: 0 15px 35px rgba(37, 211, 102, 0.5);
    }

    75% {
        transform: translateY(-10px) rotate(-1deg);
        box-shadow: 0 12px 30px rgba(37, 211, 102, 0.4);
    }
}

/* أنيميشن النبضة للإشعار */
.whatsapp-floating-btn::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.3);
    animation: whatsapp-ripple 2s infinite;
    z-index: -1;
}

@keyframes whatsapp-ripple {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

/* تأثير الضوء المتحرك */
.whatsapp-floating-btn::after {
    content: '';
    position: absolute;
    top: 15%;
    left: 15%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: whatsapp-shine 2s ease-in-out infinite;
}

@keyframes whatsapp-shine {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.2);
    }
}

/* إعادة تعيين موضع زر السكرول للوضع الطبيعي */
.scroll-top-btn {
    bottom: 30px !important;
    right: 30px !important;
}

.scroll-top-btn.active {
    bottom: 30px !important;
}

/* للشاشات المتوسطة */
@media (max-width: 992px) {
    .whatsapp-floating-btn {
        width: 60px;
        height: 60px;
        bottom: 25px;
        left: 25px;
    }

    .scroll-top-btn {
        bottom: 25px !important;
        right: 25px !important;
    }

    .scroll-top-btn.active {
        bottom: 25px !important;
    }
}

/* للشاشات الصغيرة */
@media (max-width: 768px) {
    .whatsapp-floating-btn {
        width: 55px;
        height: 55px;
        bottom: 20px;
        left: 20px;
    }

    .whatsapp-floating-btn::after {
        width: 15px;
        height: 15px;
    }

    .scroll-top-btn {
        bottom: 20px !important;
        right: 20px !important;
        width: 45px !important;
        height: 45px !important;
    }

    .scroll-top-btn.active {
        bottom: 20px !important;
    }
}

/* للشاشات الصغيرة جداً */
@media (max-width: 480px) {
    .whatsapp-floating-btn {
        width: 50px;
        height: 50px;
        bottom: 100px;
        left: 15px;
    }

    .scroll-top-btn {
        bottom: 15px !important;
        right: 15px !important;
        width: 40px !important;
        height: 40px !important;
    }

    .scroll-top-btn.active {
        bottom: 100px !important;
        right: 40px !important;
    }
}

/* تصميم الهيدر الموبايل الاحترافي مع دعم الثيم */
.mobile-header {
    background: #fefce5; 
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* الثيم الداكن للهيدر */
[data-bs-theme="dark"] .mobile-header {
    background: linear-gradient(135deg, #191d28 0%, #2d2d2d 100%);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-topbar {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    color: white;
    padding: 8px 0;
}

/* الثيم الداكن للتوب بار */
[data-bs-theme="dark"] .mobile-topbar {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: #ecf0f1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* أيقونة القائمة الجانبية */
.mobile-menu-toggle {
    transition: all 0.3s ease;
    padding:0px;
    color: var(--primary-color);
    font-size:22px;
    text-align: start;
    
}

.mobile-menu-toggle:hover {
    background: transparent !important;
}

/* الثيم الداكن لأيقونة القائمة */
[data-bs-theme="dark"] .mobile-menu-toggle {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .mobile-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #007bff !important;
}

/* أيقونات الهيدر الموبايل */
.mobile-header-icons .btn {
    color: #333 !important;
    transition: all 0.3s ease;
    padding: 8px !important;
    border-radius: 8px;
    position: relative;
    background:transparent;
    border: none;
    margin-left: 5px;
}

.mobile-header-icons .btn:hover {
    background: rgba(0, 0, 0, 0.1) !important;
    transform: scale(1.1);
    color: #007bff !important;
}

.mobile-header-icons .btn:active {
    transform: scale(0.95);
}

/* الثيم الداكن لأيقونات الهيدر */
[data-bs-theme="dark"] .mobile-header-icons .btn {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .mobile-header-icons .btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #007bff !important;
}

/* أيقونة تبديل الثيم */
.mobile-theme-toggle svg {
    transition: all 0.3s ease;
}

.mobile-theme-toggle:hover svg {
    transform: rotate(180deg);
}

/* إخفاء/إظهار أيقونات الثيم في الهيدر */
[data-bs-theme="light"] .mobile-theme-toggle .tt-theme-dark {
    display: none !important;
}

[data-bs-theme="dark"] .mobile-theme-toggle .tt-theme-light {
    display: none !important;
}

/* الشعار في الهيدر */
.mobile-logo {
    transition: all 0.3s ease;
}

.mobile-logo img {
    transition: all 0.3s ease;
    filter: brightness(1);
    width: 50px;
}
.fa-shopping-basket.color{
    font-size: 22px;
}

.mobile-logo:hover img {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* نص الشعار */
.mobile-logo .text-white {
    color: #333 !important;
    font-weight: 600;
    text-shadow: none;
    transition: all 0.3s ease;
}

.mobile-logo:hover .text-white {
    color: #007bff !important;
}

/* الثيم الداكن للشعار */
[data-bs-theme="dark"] .mobile-logo .text-white {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .mobile-logo:hover .text-white {
    color: #007bff !important;
}

/* تحسين شارة السلة */
.cart-counter {
    animation: pulse 2s infinite;
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%) !important;
    color: #ffffff !important;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* الثيم الداكن لشارة السلة */
[data-bs-theme="dark"] .cart-counter {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
    border-color: #191d28;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* تحسين القائمة الجانبية مع دعم الثيم */
.offcanvas-left-menu {
    width: 320px !important;
    /* background: var(--tt-bg-white); */
    box-shadow: 5px 0 25px rgba(0, 0, 0, 0.15);
    z-index: 10001;
    padding: 10px;
    color: var(--tt-text-color);
}

.mobile-menu-header {
    border-bottom: 1px solid var(--tt-border-color);
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
}

.mobile-menu-content {
    padding: 0;
    height: calc(100vh - 100px);
    overflow-y: auto;
    background: var(--tt-bg-light);
}

/* شريط البحث مع دعم الثيم */
.search-section {
    background: var(--tt-bg-white) !important;
    border-bottom: 1px solid var(--tt-border-color) !important;
}
section {
    background-color: #fff !important;
}
.search-section .input-group {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.search-section .form-control {
    border: none;
    padding: 12px 15px;
    font-size: 14px;
    background: var(--tt-bg-light);
    color: var(--tt-text-color);
}

.search-section .form-control:focus {
    box-shadow: none;
    background: var(--tt-bg-light);
}

.search-section .btn {
    border: none;
    padding: 12px 15px;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
}

/* قسم المستخدم مع دعم الثيم */
.user-section {
    background: var(--tt-bg-white);
    padding: 20px;
    border-bottom: 1px solid var(--tt-border-color);
}

.user-section .user-info {
    border: 1px solid var(--tt-border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.user-avatar {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
}

.guest-actions .btn {
    border-radius: 8px;
    font-weight: 500;
    padding: 10px 16px;
}

/* القائمة الرئيسية مع دعم الثيم */
.mobile-menu-wrapper {
    background: var(--tt-bg-white);
    padding: 0 !important;
}

.main-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--tt-bg-white);
}

.main-menu>li {
    margin-bottom: 0;
    border-bottom: 1px solid var(--tt-border-color);
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 18px 20px;
    color: var(--tt-text-color);
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
    position: relative;
    background: var(--tt-bg-white);
    border: none;
    border-radius: 0;
}

.menu-item:hover {
    background: var(--tt-bg-light);
    color: #007bff;
    text-decoration: none;
    padding-right: 25px;
}

.menu-item i {
    font-size: 16px;
    width: 20px;
    text-align: center;
    color: var(--tt-text-muted);
}

.menu-item:hover i {
    color: #007bff;
}

/* القوائم الفرعية مع دعم الثيم */
.has-submenu>.menu-item {
    position: relative;
}

.has-submenu>.menu-item .fa-chevron-right {
    transition: transform 0.3s ease;
    font-size: 12px;
    color: var(--tt-text-muted);
}

.has-submenu.active>.menu-item .fa-chevron-right {
    transform: rotate(90deg);
}

.submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    background: var(--tt-bg-light);
    border-top: 1px solid var(--tt-border-color);
}

.has-submenu.active .submenu {
    max-height: 500px;
}

.submenu-item {
    display: flex;
    align-items: center;
    padding: 15px 20px 15px 50px;
    color: var(--tt-text-muted);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    background: var(--tt-bg-light);
    border-bottom: 1px solid var(--tt-border-color);
}

.submenu-item:hover {
    background: var(--tt-bg-white);
    color: #007bff;
    text-decoration: none;
    padding-right: 25px;
}

.submenu-item i {
    font-size: 12px;
    width: 16px;
    color: var(--tt-text-muted);
}

/* أيقونات الفئات */
.category-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: cover;
}

/* قسم تسجيل الدخول/الخروج مع دعم الثيم */
.auth-section {
    background: var(--tt-bg-white);
    border-top: 1px solid var(--tt-border-color);
}

.auth-section .menu-item {
    padding: 18px 20px;
    border-bottom: 1px solid var(--tt-border-color);
}

.auth-section .menu-item.text-danger:hover {
    background: #fff5f5;
    color: #dc3545;
}

.login-register-section {
    background: var(--tt-bg-light);
    border-top: 1px solid var(--tt-border-color);
}

.login-register-section .btn {
    border-radius: 8px;
    font-weight: 500;
    padding: 10px 16px;
    font-size: 14px;
}

.login-register-section .btn-primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    border: none;
}

.login-register-section .btn-outline-primary {
    border: 2px solid #007bff;
    color: #007bff;
}

.login-register-section .btn-outline-primary:hover {
    background: #007bff;
    color: #fff;
}

/* قسم الإعدادات مع دعم الثيم */
.settings-section {
    background: var(--tt-bg-white);
    border-top: 1px solid var(--tt-border-color);
    padding: 0;
}

.settings-section h6 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--tt-bg-light);
    margin: 0;
    padding: 15px 20px;
    border-bottom: 1px solid var(--tt-border-color);
    color: var(--tt-text-muted);
}

.setting-item {
    margin-bottom: 0;
    border-bottom: 1px solid var(--tt-border-color);
}

.setting-item .menu-item {
    padding: 18px 20px;
    background: var(--tt-bg-white);
}

/* تحسينات إضافية للقائمة */
.mobile-menu-content::-webkit-scrollbar {
    width: 4px;
}

.mobile-menu-content::-webkit-scrollbar-track {
    background: transparent;
}

.mobile-menu-content::-webkit-scrollbar-thumb {
    background: rgba(0, 123, 255, 0.3);
    border-radius: 2px;
}

.mobile-menu-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 123, 255, 0.5);
}

/* تأثيرات الأيقونات */
.menu-item i {
    transition: all 0.3s ease;
}

.menu-item:hover i {
    color: #007bff;
}

/* تحسين الأزرار */
.guest-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

/* تحسين overlay */
/* .offcanvas-left-menu.active::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: -1;
    animation: fadeIn 0.3s ease;
} */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* تحسين الانتقالات */
.offcanvas-left-menu {
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.offcanvas-left-menu.active {
    transform: translateX(0);
}

/* تأثيرات خاصة للقائمة */
.menu-item {
    position: relative;
    overflow: hidden;
}

.menu-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #007bff, transparent);
    transition: width 0.3s ease;
    z-index: 0;
}

.menu-item:hover::before {
    width: 4px;
}

.menu-item span,
.menu-item i {
    position: relative;
    z-index: 1;
}

/* تحسين للشاشات الصغيرة */
@media (max-width: 480px) {
    .offcanvas-left-menu {
        width: 300px !important;
    }

    .mobile-menu-content {
        padding: 15px;
    }

    .menu-item {
        padding: 12px 14px;
    }

    .submenu-item {
        padding: 8px 16px 8px 40px;
    }
}

/* تحسين شريط البحث المنسدل مع دعم الثيم */
#mobileSearch {
    background: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#mobileSearch .form-control {
    border: 1px solid #e9ecef;
    background: #f8f9fa;
    color: #333;
    border-radius: 8px;
    transition: all 0.3s ease;
    padding: 12px 15px;
}

#mobileSearch .form-control::placeholder {
    color: #6c757d;
}

#mobileSearch .form-control:focus {
    background: #ffffff;
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    color: #333;
}

#mobileSearch .btn-warning {
    border-radius: 8px;
    padding: 12px 15px;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    border: none;
}

#mobileSearch .btn-warning:hover {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
    transform: translateY(-1px);
}

/* الثيم الداكن لشريط البحث المنسدل */
[data-bs-theme="dark"] #mobileSearch {
    background: #191d28;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] #mobileSearch .form-control {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

[data-bs-theme="dark"] #mobileSearch .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

[data-bs-theme="dark"] #mobileSearch .form-control:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: #007bff;
    color: #ffffff;
}

/* إصلاح أيقونة الثيم - الويب والموبايل منفصلين */

/* أيقونة الثيم في الهيدر الرئيسي (الويب) */
[data-bs-theme="light"] .navbar .tt-theme-dark {
    display: none !important;
}

[data-bs-theme="dark"] .navbar .tt-theme-light {
    display: none !important;
}

[data-bs-theme="light"] .navbar .tt-theme-light {
    display: inline !important;
}

[data-bs-theme="dark"] .navbar .tt-theme-dark {
    display: inline !important;
}

/* أيقونة الثيم في الهيدر الموبايل */
[data-bs-theme="light"] .mobile-theme-toggle .tt-theme-dark {
    display: none !important;
}

[data-bs-theme="dark"] .mobile-theme-toggle .tt-theme-light {
    display: none !important;
}

[data-bs-theme="light"] .mobile-theme-toggle .tt-theme-light {
    display: block !important;
}

[data-bs-theme="dark"] .mobile-theme-toggle .tt-theme-dark {
    display: block !important;
}

/* تأكيد عمل الثيم في جميع الحالات */
html[data-bs-theme="light"] .navbar .tt-theme-dark,
html[data-bs-theme="light"] .mobile-theme-toggle .tt-theme-dark {
    display: none !important;
}

html[data-bs-theme="dark"] .navbar .tt-theme-light,
html[data-bs-theme="dark"] .mobile-theme-toggle .tt-theme-light {
    display: none !important;
}

html[data-bs-theme="light"] .navbar .tt-theme-light {
    display: inline !important;
}

html[data-bs-theme="dark"] .navbar .tt-theme-dark {
    display: inline !important;
}

html[data-bs-theme="light"] .mobile-theme-toggle .tt-theme-light {
    display: block !important;
}

html[data-bs-theme="dark"] .mobile-theme-toggle .tt-theme-dark {
    display: block !important;
}

/* تحسين قائمة Categories المنسدلة */
.has-submenu {
    position: relative;
}
.has-submenu a span {
    transform: translate(0px, 2px);
}
.has-submenu>ul {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    min-width: 250px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.has-submenu:hover>ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.has-submenu ul {
    padding: 3px 0px;
    border-radius: 0px;
}
.has-submenu ul li {
    padding: 0;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 0px !important;
}

.has-submenu ul li:last-child {
    border-bottom: none;
}

.has-submenu ul li a {
    display: block;
    padding: 5px 10px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 14px;
}

.has-submenu ul li a:hover {
    color: var(--primary-color);
    padding-left: 15px;
}

.has-submenu ul li a.text-primary {
    color: #007bff !important;
    font-weight: bold;
    border-top: 1px solid #e9ecef;
    margin-top: 5px;
    padding-top: 15px;
}

/* الثيم الداكن للقائمة المنسدلة */
[data-bs-theme="dark"] .has-submenu>ul {
    background: #2d2d2d;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .has-submenu ul li {
    border-bottom: 1px solid #404040;
}

[data-bs-theme="dark"] .has-submenu ul li a {
    color: #ffffff;
}

[data-bs-theme="dark"] .has-submenu ul li a:hover {
    background: #404040;
    color: #007bff;
}

[data-bs-theme="dark"] .has-submenu ul li a.text-primary {
    border-top: 1px solid #404040;
}

[data-bs-theme="dark"] #mobileSearch .form-control:focus {
    background: rgba(255, 255, 255, 0.25);
    border-color: #f39c12;
}

/* إخفاء الهيدر القديم في الموبايل */
@media (max-width: 991.98px) {
    .container[style*="max-width: 100%"] {
        display: none !important;
    }

    .ghead-topbar .topbar-info.d-none.d-xl-block {
        display: none !important;
    }
}

/* تحسين الأيقونات */
.mobile-header-icons svg {
    transition: all 0.3s ease;
}

.mobile-header-icons .btn:hover svg {
    transform: scale(1.1);
}

/* تأثير النقر */
.mobile-header-icons .btn:active {
    transform: scale(0.95);
}

.mobile-menu-toggle:active {
    transform: scale(0.95);
}

/* دعم الثيم الداكن للقائمة الجانبية */
[data-bs-theme="dark"] .offcanvas-left-menu {
    background: #191d28 !important;
    color: #ffffff !important;
    box-shadow: 5px 0 25px rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .mobile-menu-content {
    background: #191d28 !important;
}

[data-bs-theme="dark"] .search-section {
    background: #191d28 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .search-section .form-control {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

[data-bs-theme="dark"] .search-section .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

[data-bs-theme="dark"] .user-section {
    background: #191d28;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .mobile-menu-wrapper {
    background: #191d28;
}

[data-bs-theme="dark"] .main-menu {
    background: #191d28;
}

[data-bs-theme="dark"] .main-menu>li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .menu-item {
    background: #191d28;
    color: #ffffff;
}

[data-bs-theme="dark"] .menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #007bff;
}

[data-bs-theme="dark"] .menu-item i {
    color: rgba(255, 255, 255, 0.7);
}

[data-bs-theme="dark"] .submenu {
    background: rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .submenu-item {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .submenu-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #007bff;
}

[data-bs-theme="dark"] .auth-section {
    background: #191d28;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .auth-section .menu-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .login-register-section {
    background: rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .settings-section {
    background: #191d28;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .settings-section h6 {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .setting-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .setting-item .menu-item {
    background: #191d28;
}

/* إخفاء/إظهار عناصر الثيم */
[data-bs-theme="light"] .tt-theme-dark {
    display: none !important;
}

[data-bs-theme="dark"] .tt-theme-light {
    display: none !important;
}

/* تحسين انتقال الثيم */
.offcanvas-left-menu,
.mobile-menu-content,
.search-section,
.user-section,
.mobile-menu-wrapper,
.main-menu,
.menu-item,
.submenu,
.submenu-item,
.auth-section,
.login-register-section,
.settings-section {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* تأكيد أن الثيم الافتراضي هو Light */
:root:not([data-bs-theme]) {
    --bs-dark: #212529;
    --bs-light: #f8f9fa;
}

/* تحسين الكاردات للموبايل - اثنين جنب بعض */
@media (max-width: 576px) {

    /* تقليل المسافات بين الكاردات */
    .row.g-4 {
        gap: 10px !important;
    }

    /* تحسين الكارد العمودي للموبايل */
    .vertical-product-card {
        padding: 10px !important;
        margin-bottom: 15px;

    }

    .vertical-product-card .card-content {
        padding: 10px 15px 15px 15px;
    }

    /* تصغير النصوص للموبايل */
    .vertical-product-card .card-title {
        font-size: 13px !important;
        line-height: 1.3;
        margin-bottom: 8px !important;
    }

    .vertical-product-card .price {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    .vertical-product-card .tt-category {
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }

    /* تصغير الأزرار للموبايل */
    .vertical-product-card .btn {
        font-size: 12px !important;
        padding: 8px 12px !important;
        margin-top: 10px !important;
    }

    /* تحسين الصور للموبايل */


    /* تحسين أزرار المنتج */
    .vertical-product-card .product-btns {
        right: 8px;
        top: 8px;
    }

    .vertical-product-card .product-btns .rounded-btn {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    /* تحسين شارة الخصم */
    .vertical-product-card .offer-badge {
        font-size: 10px !important;
        padding: 4px 8px;
        border-radius: 0 0 8px 0;
    }
}

/* تحسين إضافي للشاشات الصغيرة جداً */
@media (max-width: 480px) {

    .vertical-product-card .card-title {
        font-size: 12px !important;
    }

    .vertical-product-card .price {
        font-size: 13px !important;
    }

    .vertical-product-card .btn {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
}

/* تحسين الشريط السفلي للموبايل */
.mobile-toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--tt-bg-white);
    border-top: 1px solid var(--tt-border-color);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1050;
    padding: 8px 0;
}

.mobile-toolbar-item {
    text-align: center;
    padding: 8px 5px;
    color: var(--tt-text-color);
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 0 2px;
}

.mobile-toolbar-item:hover {
    background: rgba(0, 123, 255, 0.1);
    color: #007bff;
    transform: translateY(-2px);
}

.mobile-toolbar-icon {
    display: block;
    font-size: 20px;
    margin-bottom: 4px;
}

.mobile-toolbar-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
}

/* تحسين أيقونة السلة */
.mobile-toolbar .cart-counter {
    position: absolute;
    top: -2px;
    right: 8px;
    background: #dc3545;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* الثيم الداكن للشريط السفلي */
[data-bs-theme="dark"] .mobile-toolbar {
    background: var(--tt-bg-dark);
    border-top: 1px solid #404040;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .mobile-toolbar-item {
    color: #ffffff;
}

[data-bs-theme="dark"] .mobile-toolbar-item:hover {
    background: rgba(0, 123, 255, 0.2);
    color: #007bff;
}

/* إضافة مساحة في الأسفل للمحتوى */
@media (max-width: 991.98px) {
    body {
        padding-bottom: 70px;
    }
}

/* تحسين dropdown البحث في الشريط السفلي */
.mobile-toolbar .dropdown-menu {
    bottom: 100%;
    top: auto;
    margin-bottom: 5px;
    border-radius: 12px;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.15);
}

[data-bs-theme="dark"] .mobile-toolbar .dropdown-menu {
    background: #2d2d2d;
    border: 1px solid #404040;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3);
}

/* ضبط طبقات الأيقونات العائمة */
.whatsapp-float {
    z-index: 1100 !important;
    bottom: 90px !important;
    /* فوق الشريط السفلي */
}

.scroll-to-top {
    z-index: 1090 !important;
    bottom: 150px !important;
    /* فوق الواتساب */
}

/* ضبط الأيقونات للموبايل */
@media (max-width: 991.98px) {
    .whatsapp-float {
        right: 15px !important;
        bottom: 90px !important;
        width: 50px !important;
        height: 50px !important;
        z-index: 1100 !important;
    }

    .scroll-to-top {
        right: 15px !important;
        bottom: 150px !important;
        width: 45px !important;
        height: 45px !important;
        z-index: 1090 !important;
    }

    /* تأكيد عدم التداخل */
    .mobile-toolbar {
        z-index: 1050 !important;
    }

    /* ضبط المسافة من الأسفل للمحتوى */
    body {
        padding-bottom: 80px !important;
    }
}

:root[data-bs-theme="light"] {
    --bs-dark: #212529;
    --bs-light: #f8f9fa;
}

:root[data-bs-theme="dark"] {
    --bs-dark: #212529;
    --bs-light: #f8f9fa;
}

[data-bs-theme="dark"] .mobile-header {
    background: #191d28 !important;
}

[data-bs-theme="right"] .mobile-header {
    background: #f8f9fa !important;
}

.ghead-topbar {
    display: none !important;
}

.gshop-navmenu>ul>.has-submenu>ul {
    z-index: 99999;
}
.modal-backdrop.fade.show {
    display: none !important;
}

[data-bs-theme=light] .topbar-info-right li a:not(.dropdown-menu a) {
    color: #000;
}

.fa-magnifying-glass:before,
.fa-search:before {
    content: "\f002";
    position: relative;
    top: 0px;
}

 .toggle-mobile-menu {
    display: block;
    height: 30px;
    width: 24px;
    position: relative;
    transition: all 0.5s ease-out 0s;
    -webkit-transition: all 0.5s ease-out 0s;
}
 .toggle-mobile-menu::before {
    -webkit-transform: translate3d(0, -8px, 0);
    transform: translate3d(0, -8px, 0);
}
 .toggle-mobile-menu::before,  .toggle-mobile-menu::after {
    content: '';
    position: absolute;
    top: 0;
    height: 2px;
    width: 100%;
    left: 0;
    top: 50%;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}


 .toggle-mobile-menu span {
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0;
    top: 50%;
}
@media (max-width: 767px) {
     .toggle-mobile-menu span,  .toggle-mobile-menu:after,  .toggle-mobile-menu:before {
        background: #b2d235;
    }
}
 .toggle-mobile-menu::after {
    -webkit-transform: translate3d(0, 8px, 0);
    transform: translate3d(0, 8px, 0);
}

 .toggle-mobile-menu::before,  .toggle-mobile-menu::after {
    content: '';
    position: absolute;
    top: 0;
    height: 2px;
    width: 100%;
    left: 0;
    top: 50%;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.gshop-hero {
    position: sticky !important;
    top: 0px;
    overflow-x:hidden;
}
.gshop-hero #heroCarousel {
    /* z-index: 1;
    position: fixed;
    top: 205px;
    border: 2px solid red;
    left: 0px;
    width: 100%; */
}
.scroll-layer-section {
    position: relative;
    z-index: 2;
    background-color: #fff;
    top: 10px !important;
}
#heroCarousel .carousel-item {
}
#heroCarousel .carousel-item img {
    height: 100% !important;
    width: 100% !important;
    margin: auto;
}
.main-wrapper {
    background-color: #fff;
}