/**
 * ملف الأنماط المخصص
 * Custom Stylesheet
 */

/* تحسينات عامة */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Cairo', sans-serif;
    line-height: 1.6;
    background-color: #f9fafb;
    min-height: 100vh;
}

.cf-turnstile,
.cf-turnstile iframe {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
}

.cf-turnstile {
    overflow: hidden !important;
    min-height: 65px;
}

.cf-turnstile iframe {
    height: auto !important;
}

/* Stronger overrides for Cloudflare challenge iframe elements (id-based and generic) */
#cf-chl-widget-isr5m,
#cf-chl-widget-isr5m iframe,
.cf-turnstile iframe[id^="cf-chl-widget"],
.cf-turnstile iframe[title^="Widget containing a Cloudflare"],
.cf-turnstile > iframe {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: 220px; /* limit so it doesn't overflow modal */
    /* make width smaller on small viewports */
    max-width: 260px !important;
    border: 0 !important;
    display: block !important;
}

/* Ensure container keeps iframe inside modal and centers it */
.cf-turnstile {
    box-sizing: border-box;
    padding: 0.25rem 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.store-topbar {
    background: #ffffff;
    border-bottom: 1px solid #f2e7cb;
    box-shadow: 0 10px 28px -22px rgba(39, 25, 7, 0.55);
}

.store-topbar-row {
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.store-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    flex: 1 1 auto;
    text-decoration: none;
    color: #1f2937;
}

.store-brand-logo,
[data-site-logo-wrapper] {
    width: 112px !important;
    height: 68px !important;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    flex-shrink: 0;
    background: transparent !important;
}

.store-brand-logo i {
    color: #fff;
    font-size: 1.55rem;
}

.store-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (min-width: 1024px) {
    .store-brand-logo,
    [data-site-logo-wrapper] {
        width: 150px !important;
        height: 88px !important;
    }
}

.store-brand-text {
    min-width: 0;
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
}

footer [data-site-name-text] {
    font-size: 1.15rem;
}

.store-brand-main {
    color: #111827;
    font-size: clamp(1.25rem, 3.1vw, 2.1rem);
    font-weight: 900;
    letter-spacing: -0.02em;
}

.store-brand-sub {
    margin-top: 0.08rem;
    color: #b28831;
    font-size: clamp(0.55rem, 1.6vw, 0.83rem);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(60vw, 620px);
}

.store-topbar-mobile-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

#homepage-products-search-btn {
    order: -1;
}

.store-mobile-cart-icon-btn {
    position: relative;
    color: #7d560f;
    background: #fff7e6;
    border: 1px solid #e8c57d;
    text-decoration: none;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 8px 18px -16px rgba(138, 95, 13, 0.9);
}

.store-mobile-cart-icon-btn:hover {
    color: #a26f0f;
    background: #fbe8bf;
    border-color: #d9b15e;
}

.store-mobile-quick-item {
    background: transparent;
    border: 0;
    padding: 0.15rem 0.3rem;
    color: #374151;
    text-decoration: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    position: relative;
}

.store-mobile-quick-icon {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid #efdfbc;
    background: #fff;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.store-mobile-quick-label {
    font-size: 0.64rem;
    line-height: 1;
    font-weight: 700;
}

.store-mobile-count-badge {
    position: absolute;
    top: -5px;
    left: -6px;
    min-width: 21px;
    height: 21px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #c59a3a;
    color: #fff;
    border: 1px solid #fff;
    font-size: 0.69rem;
    font-weight: 900;
    padding: 0 5px;
}

.store-topbar-menu-btn {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    border: 1px solid #ecd7aa;
    color: #1f2937;
    background: #fff;
    flex: 0 0 auto;
    margin-left: 25px;
}

.store-topbar-desktop-actions {
    align-items: center;
    gap: 0.5rem;
}

.store-topbar-link,
.store-topbar-button,
.store-topbar-logout {
    height: 42px;
    border-radius: 999px;
    padding: 0 0.95rem;
    font-size: 0.85rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    text-decoration: none;
    transition: all 0.18s ease;
    position: relative;
}

.store-topbar-link {
    color: #3f3f46;
    background: #fff;
    border: 1px solid #e8d6b0;
}

.store-topbar-link:hover {
    color: #9a7425;
    border-color: #d8b56d;
}

.store-topbar-button {
    color: #fff;
    background: linear-gradient(135deg, #d9a93f 0%, #bb8b2c 100%);
    border: 1px solid #b5852a;
    box-shadow: 0 8px 22px -15px rgba(128, 87, 16, 0.95);
}

.store-topbar-button:hover {
    background: linear-gradient(135deg, #c89a37 0%, #9f741f 100%);
}

.store-topbar-cart {
    background: #fff7e6;
    border: 1px solid #e8c57d;
    color: #8a5f0d;
    box-shadow: 0 8px 18px -16px rgba(138, 95, 13, 0.9);
}

.store-topbar-cart i {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #f6deac;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7d560f;
    font-size: 0.78rem;
}

.store-topbar-cart:hover {
    background: #fbe8bf;
    border-color: #d9b15e;
}

/* Cart drawer theming to match site gold theme */
#cart-drawer {
    border-right-color: rgba(183,139,46,0.15);
    background: linear-gradient(180deg, #fffdf8 0%, #fffaf2 100%);
}

#cart-drawer .sticky {
    background: linear-gradient(90deg, #fffdf8 0%, #fffaf2 100%);
    border-bottom-color: rgba(200,150,50,0.12);
}

#cart-drawer .rounded-2xl.border {
    border-color: rgba(196,148,46,0.12);
}

#cart-drawer .shadow-sm {
    box-shadow: 0 6px 20px -12px rgba(166,118,28,0.18);
}

#cart-drawer .h-16.w-16.overflow-hidden.rounded-xl {
    background: #fff8e9;
}

/* Quantity buttons inside cart */
#cart-drawer button[data-cart-action],
#cart-drawer input[data-cart-quantity-input] + button {
    border: 1px solid rgba(181,128,36,0.12);
}

/* Remove blue accents for prices, use gold accent */
#cart-drawer .text-blue-600,
#cart-drawer .text-blue-600 * {
    color: #c8922d !important;
}

/* Summary box */
#cart-drawer > div.mt-5.rounded-2xl.border.bg-slate-50.p-4 {
    background: linear-gradient(180deg, #fffaf0 0%, #fff6e6 100%);
    border-color: rgba(200,150,50,0.09);
}

/* Checkout button - gold gradient */
#cart-drawer a[href$="/cart.php"],
#cart-drawer .cart-checkout-btn,
#cart-drawer a.mt-5.inline-flex.w-full.items-center.justify-center {
    background: linear-gradient(135deg, #d9a93f 0%, #bb8b2c 100%);
    border: 1px solid #b5852a;
    color: #fff;
    box-shadow: 0 10px 28px -20px rgba(128, 87, 16, 0.9);
}

#cart-drawer a.mt-5.inline-flex.w-full.items-center.justify-center:hover {
    background: linear-gradient(135deg, #c89a37 0%, #9f741f 100%);
}

/* Close button gold tint */
#cart-drawer-close {
    border-color: rgba(196,148,46,0.15);
    background: #fff6e6;
    color: #7d560f;
}

#cart-drawer-close:hover {
    background: #fff0d6;
}

.store-topbar-logout {
    color: #9f1239;
    background: #fff1f2;
    border: 1px solid #fecdd3;
}

.store-topbar-logout:hover {
    background: #ffe4e6;
}

.store-hello-name {
    font-size: 0.8rem;
    font-weight: 800;
    color: #51525c;
    padding: 11px;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.store-desktop-count-badge {
    position: absolute;
    top: -6px;
    left: -7px;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #f59e0b;
    color: #ffffff;
    border: 1px solid #fff7e6;
    font-size: 0.67rem;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

/* تحسينات النماذج */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200 outline-none;
}

.form-input:focus {
    @apply shadow-lg;
}

.form-label {
    @apply block text-gray-700 font-semibold mb-2;
}

.form-error {
    @apply text-red-500 text-sm mt-1;
}

/* تحسينات الأزرار */
.btn {
    @apply px-6 py-3 rounded-lg font-semibold transition-all duration-200 inline-flex items-center justify-center;
}

.btn-primary {
    @apply bg-primary-500 hover:bg-primary-600 text-white shadow-md hover:shadow-lg;
}

.btn-secondary {
    @apply bg-gray-200 hover:bg-gray-300 text-gray-800;
}

.btn-danger {
    @apply bg-red-500 hover:bg-red-600 text-white;
}

.btn-success {
    @apply bg-green-500 hover:bg-green-600 text-white;
}

/* تحسينات البطاقات */
.card {
    @apply bg-white rounded-xl shadow-md overflow-hidden transition-all duration-200;
}

.card:hover {
    @apply shadow-lg;
}

.card-header {
    @apply bg-gradient-to-r from-primary-500 to-primary-600 text-white p-6;
}

.card-body {
    @apply p-6;
}

/* تحسينات الرسائل */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    pointer-events: none;
}

.toast-container-in-dialog {
    position: absolute;
    top: 1rem;
    right: 1rem;
    left: auto;
    z-index: 2147483647;
}

.alert {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: fit-content;
    max-width: min(92vw, 420px);
    padding: 0.85rem 1rem;
    border-radius: 14px;
    border: 2px solid transparent;
    box-shadow: 0 18px 38px -26px rgba(15, 23, 42, 0.85);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.5;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.alert .alert-icon {
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.alert .alert-message {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.alert .alert-close {
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    opacity: 0.75;
    cursor: pointer;
}

.alert .alert-close:hover {
    opacity: 1;
    background: rgba(15, 23, 42, 0.08);
}

.alert-success {
    background: #f5efdf;
    color: #5f4a1d;
    border-color: #d9be7a;
}

.alert-success .alert-icon {
    background: #b7923d;
    color: #fffaf0;
}

.alert-error {
    background: #fff1ee;
    color: #8f2d1b;
    border-color: #e89f90;
}

.alert-error .alert-icon {
    background: #c85e49;
    color: #ffffff;
}

.alert-warning {
    background: #fff6e5;
    color: #7a5817;
    border-color: #e3bd6e;
}

.alert-warning .alert-icon {
    background: #c79a3b;
    color: #ffffff;
}

.alert-info {
    background: #f7f1e2;
    color: #5f4a1d;
    border-color: #d9be7a;
}

.alert-info .alert-icon {
    background: #a88234;
    color: #fffaf0;
}

/* تحسينات الجدول */
.table {
    @apply w-full bg-white rounded-lg overflow-hidden shadow-md;
}

.table thead {
    @apply bg-gray-100;
}

.table th {
    @apply px-6 py-4 text-right font-semibold text-gray-700;
}

.table td {
    @apply px-6 py-4 border-b border-gray-100;
}

.table tbody tr:hover {
    @apply bg-gray-50;
}

/* تحسينات القائمة الجانبية */
.sidebar {
    @apply bg-white shadow-lg h-full;
}

.sidebar-link {
    @apply flex items-center space-x-3 space-x-reverse px-4 py-3 text-gray-700 hover:bg-primary-50 hover:text-primary-600 transition-all duration-200;
}

.sidebar-link.active {
    @apply bg-primary-100 text-primary-700 border-r-4 border-primary-500;
}

/* تحسينات الإحصائيات */
.stat-card {
    @apply bg-white rounded-xl p-6 shadow-md transition-all duration-200 hover:shadow-lg;
}

.stat-icon {
    @apply w-14 h-14 rounded-full flex items-center justify-center text-2xl;
}

.stat-value {
    @apply text-3xl font-bold text-gray-800;
}

.stat-label {
    @apply text-gray-500 text-sm;
}

/* تحسينات التحميل */
.loading {
    @apply animate-pulse;
}

.spinner {
    @apply animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500;
}

/* تحسينات الصور */
.img-cover {
    @apply w-full h-full object-cover;
}

.img-contain {
    @apply w-full h-full object-contain;
}

/* تحسينات النصوص */
.text-gradient {
    @apply bg-gradient-to-r from-primary-500 to-primary-700 bg-clip-text text-transparent;
}

/* تحسينات المسافات */
.section {
    @apply py-12;
}

.section-sm {
    @apply py-6;
}

.section-lg {
    @apply py-20;
}

/* تحسينات الحاويات */
.container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* تحسينات التدرجات */
.gradient-primary {
    @apply bg-gradient-to-br from-primary-500 to-primary-700;
}

.gradient-secondary {
    @apply bg-gradient-to-br from-gray-100 to-gray-200;
}

/* تحسينات الظلال */
.shadow-custom {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.shadow-custom-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.skeleton-shimmer {
    position: relative;
    overflow: hidden;
}

.skeleton-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, rgba(245, 224, 177, 0) 0%, rgba(234, 198, 121, 0.5) 50%, rgba(245, 224, 177, 0) 100%);
    animation: skeleton-shimmer 1.3s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
    100% {
        transform: translateX(100%);
    }
}

.product-card-skeleton {
    pointer-events: none;
}

#featured-products-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 576px) {
    #featured-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 950px) {
    #featured-products-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* تحسينات الحركات */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-fadeIn {
    animation: fadeIn 0.5s ease-out;
}

.animate-slideIn {
    animation: slideIn 0.5s ease-out;
}

/* تحسينات responsive */
@media (max-width: 1024px) {
    .homepage-root #featured-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .homepage-root #homepage-category-filters {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }
}

@media (max-width: 768px) {
    .homepage-root .homepage-sticky-search-fixed,
    .homepage-root .homepage-sticky-search-spacer {
        display: none !important;
    }

    .store-topbar-menu-btn {
        margin-left: -6px;
    }

    .store-mobile-cart-icon-btn {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    .store-mobile-count-badge {
        min-width: 19px;
        height: 19px;
        font-size: 0.62rem;
        top: -4px;
        left: -5px;
    }

    .store-topbar .max-w-7xl {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }

    .store-topbar-row {
        min-height: 80px;
        gap: 0.35rem;
        justify-content: flex-start;
    }

    .store-topbar-menu-btn {
        width: 35px;
        flex: 0 0 35px;
    }

    .store-topbar-mobile-actions {
        width: auto;
        flex: 0 0 auto;
        justify-content: flex-end;
    }

    .store-brand-main {
        font-size: clamp(1.18rem, 5vw, 1.85rem);
    }

    .store-brand-sub {
        max-width: 50vw;
    }

    .store-brand-logo {
        width: 54px;
        height: 54px;
    }

    .store-brand {
        justify-content: flex-start;
    }

    #homepage-categories-modal,
    #homepage-product-quick-modal,
    #user-orders-list-modal,
    #order-details-modal,
    #nested-order-modal,
    #confirm-modal {
        padding: 0 !important;
    }

    #homepage-categories-modal > div,
    #homepage-product-quick-modal > div,
    #user-orders-list-modal > div,
    #order-details-modal > div,
    #nested-order-modal > div,
    #confirm-modal > div {
        min-height: 100dvh;
        border-radius: 0;
        margin-top: 0;
    }

    @media (min-width: 768px) {
        #homepage-categories-modal > div {
            min-height: auto;
            max-height: calc(100vh - 3rem);
            overflow-y: auto;
        }
    }

    #homepage-categories-modal [id$='-close'],
    #homepage-product-quick-modal [id$='-close'],
    #user-orders-list-modal [id$='-close'],
    #order-details-modal [id$='-close'],
    #nested-order-modal [id$='-close'],
    #confirm-modal [id$='-close'] {
        width: 2.2rem;
        height: 2.2rem;
    }

    .container-custom {
        padding-left: 14px;
        padding-right: 14px;
    }
}

@media (min-width: 768px) {
    .md\:hidden {
        display: none !important;
    }
}

    .section {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .card-body {
        padding: 1rem;
    }

.auth-page {
    margin: 0 !important;
    padding-bottom: 0 !important;
}

/* Auth pages card base (login/register/forgot) */
.auth-page-login .login-gold-card,
.auth-page-register .register-gold-card,
.auth-page-forgot .auth-dynamic-text {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.auth-page-login .login-gold-input,
.auth-page-register .register-gold-input,
.auth-page-forgot input,
.auth-page-forgot select,
.auth-page-forgot textarea {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.auth-page-login .login-gold-input:focus,
.auth-page-register .register-gold-input:focus,
.auth-page-forgot input:focus,
.auth-page-forgot select:focus,
.auth-page-forgot textarea:focus {
    border-color: rgba(200, 146, 45, 0.55) !important;
    box-shadow: 0 0 0 4px rgba(200, 146, 45, 0.16) !important;
}

    .auth-page .max-w-md,
    .auth-page .max-w-lg {
        max-width: 100%;
    }

    .auth-page h2.text-3xl {
        font-size: 1.7rem;
    }

    .auth-page .p-8 {
        padding: 1rem;
    }

    .auth-page input,
    .auth-page select,
    .auth-page textarea,
    .auth-page button {
        font-size: 15px;
    }

    .homepage-root #featured-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        margin-top: 1.5rem;
    }

    @media (min-width: 768px) {
        .homepage-root #featured-products-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 1024px) {
        .homepage-root #featured-products-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }

    /* Mobile spacing for homepage search input */
    @media (max-width: 767px) {
        .homepage-root .homepage-categories-head {
            padding-top: 0.75rem;
        }

        .homepage-root #featured-products-grid,
        .homepage-root .homepage-products-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 0.75rem !important;
        }

        .homepage-root #best-offers-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 0.75rem !important;
            align-items: stretch;
        }

        .homepage-root [data-offer-card] {
            display: flex;
            flex-direction: column;
            height: 100%;
            padding: 0.75rem;
        }

        .homepage-root [data-offer-card].hidden {
            display: none !important;
        }

        .homepage-root [data-offer-card] > a {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .homepage-root [data-offer-card] img {
            height: 8.5rem;
            padding: 0.65rem;
        }

        .homepage-root [data-offer-card] h3 {
            min-height: 0;
            font-size: 0.88rem;
            line-height: 1.3;
        }

        .homepage-root [data-offer-card] p.line-clamp-3 {
            margin-top: 0.4rem;
            line-height: 1.35;
            font-size: 0.78rem;
        }

        .homepage-root .product-card-title,
        .homepage-root [data-offer-card] h3 {
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }

        .homepage-root #homepage-products-search-input {
            margin-top: 15px;
        }

        /* Stack form inputs vertically on mobile for featured products */
        .homepage-root #featured-products-grid [data-cart-form] {
            flex-direction: column !important;
            align-items: stretch !important;
        }

        .homepage-root #featured-products-grid [data-cart-form] input[type="number"],
        .homepage-root #featured-products-grid [data-cart-form] button {
            width: 100% !important;
        }
    }

    /* Keep offer card add-to-cart inline and prevent overflow */
    .homepage-root [data-offer-card] form[data-cart-form] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: nowrap; /* keep input and button on same line */
    }

    .homepage-root [data-offer-card] form[data-cart-form] input[type="number"] {
        min-width: 0;
        flex: 1 1 auto;
    }

    .homepage-root [data-offer-card] form[data-cart-form] button {
        flex: 0 0 auto;
    }

    /* On very small screens stack vertically for better touch targets */
    @media (max-width: 420px) {
        .homepage-root [data-offer-card] form[data-cart-form] {
            flex-direction: column;
            align-items: stretch;
        }

        .homepage-root [data-offer-card] form[data-cart-form] button {
            width: 100%;
        }
    }

.homepage-root #homepage-products-search-wrap,
.homepage-root #homepage-products-search-input {
    min-width: 0;
}

.homepage-root .product-card-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 0.92rem;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .homepage-root .product-card-title,
    .homepage-root [data-offer-card] h3 {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

.homepage-root .homepage-sticky-search-row {
    top: var(--homepage-topbar-offset, 84px);
}

.homepage-root .homepage-sticky-search-fixed {
    position: fixed;
    left: 50%;
    transform: translate(-50%, -10px);
    width: min(calc(100vw - 1.25rem), 56rem);
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.homepage-root .homepage-sticky-search-fixed.is-open {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.homepage-root .homepage-sticky-search-spacer {
    height: var(--homepage-search-row-height, 0px);
}

    .homepage-root #homepage-product-quick-modal .max-w-5xl {
        max-width: 100%;
    }

    .user-dashboard-root h1.text-3xl,
    .cart-page-root h1.text-3xl {
        font-size: 1.65rem;
        line-height: 1.35;
    }

    .user-dashboard-root [data-order-filter-links] {
        gap: 0.45rem;
    }

    .user-dashboard-root [data-order-filter-links] a {
        font-size: 12px;
        padding: 0.45rem 0.75rem;
        color: #1f2937; /* default dark text for non-active filters */
    }

    /* Ensure filter buttons show white text/icons when active (or bg-amber-600 applied) */
    .user-dashboard-root [data-order-filter-links] a.active,
    .user-dashboard-root [data-order-filter-links] a.bg-amber-600,
    .user-dashboard-root [data-order-filter-links] a[data-order-active="true"] {
        color: #ffffff !important;
    }
    .user-dashboard-root [data-order-filter-links] a.active i,
    .user-dashboard-root [data-order-filter-links] a.bg-amber-600 i,
    .user-dashboard-root [data-order-filter-links] a[data-order-active="true"] i {
        color: #ffffff !important;
    }

    /* Ensure non-active filter links are dark even if utility classes linger */
    .user-dashboard-root [data-order-filter-links] a:not(.bg-amber-600):not(.active) {
        color: #1f2937 !important;
    }
    .user-dashboard-root [data-order-filter-links] a:not(.bg-amber-600):not(.active) i {
        color: #1f2937 !important;
    }

    .cart-page-root table {
        min-width: 700px;
    }

    .cart-page-root [data-cart-page-grid] {
        gap: 1rem;
    }

    .toast-container {
        right: 0.5rem;
        left: auto;
        align-items: flex-end;
        width: auto;
        max-width: min(92vw, 420px);
    }

    .alert {
        width: auto;
        max-width: min(92vw, 420px);
    }
}

@media (max-width: 480px) {
    .store-topbar-mobile-actions {
        gap: 0.1rem;
    }

    .store-mobile-quick-item {
        padding: 0.1rem 0.15rem;
    }

    .store-mobile-quick-label {
        font-size: 0.6rem;
    }

    .store-brand-sub {
        max-width: 54vw;
    }

    .store-brand-logo {
        width: 48px;
        height: 48px;
    }

    .auth-page .w-20.h-20 {
        width: 4rem;
        height: 4rem;
    }

    .auth-page .text-4xl {
        font-size: 1.5rem;
    }

    .homepage-root .container-custom,
    .user-dashboard-root .container-custom,
    .cart-page-root .container-custom {
        padding-left: 0;
        padding-right: 0;
    }

    .homepage-root [data-toggle-products],
    .cart-page-root button[type='submit'] {
        width: 100%;
    }
}

/* تحسينات scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* تحسينات selection */
::selection {
    background: #3b82f6;
    color: white;
}

/* تحسينات focus */
*:focus {
    outline: none;
}

*:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* تحسينات links */
a {
    @apply transition-colors duration-200;
}

/* تحسينات buttons disabled */
button:disabled,
.btn:disabled {
    @apply opacity-50 cursor-not-allowed;
}

/* تحسينات inputs disabled */
input:disabled,
select:disabled,
textarea:disabled {
    @apply bg-gray-100 cursor-not-allowed;
}

/* تحسينات password toggle */
.password-toggle {
    @apply absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700 cursor-pointer;
}

/* تحسينات form group */
.form-group {
    @apply mb-6;
}

/* تحسينات required field */
.required::after {
    content: ' *';
    @apply text-red-500;
}

/* تحسينات divider */
.divider {
    @apply border-t border-gray-200 my-6;
}

/* تحسينات badge */
.badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold;
}

.homepage-search-highlight {
    background-color: #f8f2e3;
    color: #7d6733;
    border-radius: 0.5rem;
    padding: 0 0.25rem;
}

.badge-primary {
    @apply bg-primary-100 text-primary-800;
}

.badge-success {
    @apply bg-green-100 text-green-800;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-danger {
    @apply bg-red-100 text-red-800;
}

/* تحسينات modal */
.modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
}

.modal-content {
    @apply bg-white rounded-xl shadow-2xl max-w-md w-full mx-4 animate-fadeIn;
}

.modal-header {
    @apply p-6 border-b border-gray-200;
}

.modal-body {
    @apply p-6;
}

.modal-footer {
    @apply p-6 border-t border-gray-200 flex justify-end space-x-3 space-x-reverse;
}

/* Admin golden theme */
.admin-dashboard-root {
    --admin-gold-50: #fffaf0;
    --admin-gold-100: #fdf1d8;
    --admin-gold-200: #f5dfb1;
    --admin-gold-300: #e8c980;
    --admin-gold-500: #c59a3a;
    --admin-gold-600: #b5852e;
    --admin-gold-700: #7d6733;
    --admin-ink: #4f432b;
}

.admin-dashboard-root [data-admin-dashboard-content] .bg-white,
.admin-dashboard-root aside.bg-white\/90,
.admin-dashboard-root aside.bg-white\/80 {
    background-color: #fffefb !important;
}

.admin-dashboard-root [data-admin-dashboard-content] .border-slate-200,
.admin-dashboard-root [data-admin-dashboard-content] .border-slate-100,
.admin-dashboard-root [data-admin-dashboard-content] .border-slate-300 {
    border-color: rgba(197, 154, 58, 0.24) !important;
}

.admin-dashboard-root [data-admin-dashboard-content] .text-slate-900,
.admin-dashboard-root [data-admin-dashboard-content] .text-slate-800,
.admin-dashboard-root [data-admin-dashboard-content] .text-slate-700,
.admin-dashboard-root [data-admin-dashboard-content] .text-gray-800,
.admin-dashboard-root [data-admin-dashboard-content] .text-gray-700 {
    color: var(--admin-ink) !important;
}

.admin-dashboard-root [data-admin-dashboard-content] .text-slate-600,
.admin-dashboard-root [data-admin-dashboard-content] .text-slate-500,
.admin-dashboard-root [data-admin-dashboard-content] .text-gray-500 {
    color: #7b6a45 !important;
}

.admin-dashboard-root [data-admin-dashboard-content] .text-primary-600,
.admin-dashboard-root [data-admin-dashboard-content] .text-blue-700,
.admin-dashboard-root [data-admin-dashboard-content] .text-indigo-700 {
    color: var(--admin-gold-600) !important;
}

.admin-dashboard-root [data-admin-dashboard-content] .bg-slate-50,
.admin-dashboard-root [data-admin-dashboard-content] .bg-slate-100 {
    background-color: var(--admin-gold-50) !important;
}

.admin-dashboard-root [data-admin-dashboard-content] .bg-blue-50,
.admin-dashboard-root [data-admin-dashboard-content] .bg-indigo-50,
.admin-dashboard-root [data-admin-dashboard-content] .bg-cyan-50\/70 {
    background-color: #fff7e8 !important;
}

.admin-dashboard-root [data-admin-dashboard-content] .border-blue-100,
.admin-dashboard-root [data-admin-dashboard-content] .border-indigo-100,
.admin-dashboard-root [data-admin-dashboard-content] .border-cyan-200 {
    border-color: rgba(197, 154, 58, 0.28) !important;
}

.admin-dashboard-root [data-admin-dashboard-content] .bg-primary-600,
.admin-dashboard-root [data-admin-dashboard-content] .bg-primary-700,
.admin-dashboard-root [data-admin-dashboard-content] .bg-slate-900,
.admin-dashboard-root [data-admin-dashboard-content] button.bg-slate-900,
.admin-dashboard-root [data-admin-dashboard-content] a.bg-slate-900 {
    background-color: var(--admin-gold-500) !important;
    color: #fff !important;
}

.admin-dashboard-root [data-admin-dashboard-content] .hover\:bg-primary-700:hover,
.admin-dashboard-root [data-admin-dashboard-content] .hover\:bg-slate-800:hover,
.admin-dashboard-root [data-admin-dashboard-content] .hover\:bg-primary-600:hover {
    background-color: var(--admin-gold-600) !important;
    color: #fff !important;
}

.admin-dashboard-root [data-admin-dashboard-content] input,
.admin-dashboard-root [data-admin-dashboard-content] select,
.admin-dashboard-root [data-admin-dashboard-content] textarea {
    border-color: rgba(197, 154, 58, 0.3) !important;
    background: #fff9ef !important;
    color: var(--admin-ink) !important;
}

.admin-dashboard-root [data-admin-dashboard-content] input:focus,
.admin-dashboard-root [data-admin-dashboard-content] select:focus,
.admin-dashboard-root [data-admin-dashboard-content] textarea:focus {
    border-color: var(--admin-gold-500) !important;
    box-shadow: 0 0 0 4px rgba(197, 154, 58, 0.16) !important;
}

.admin-dashboard-root [data-admin-dashboard-content] select {
    border-color: rgba(197, 154, 58, 0.38) !important;
    background-color: #fdf1d8 !important;
    color: #5b4822 !important;
}

.admin-dashboard-root [data-admin-dashboard-content] select option {
    background: #fff7e8 !important;
    color: #5a4826 !important;
}

.admin-dashboard-root [data-admin-dashboard-content] .focus\:ring-primary-100:focus,
.admin-dashboard-root [data-admin-dashboard-content] .focus\:ring-primary-500:focus {
    --tw-ring-color: rgba(197, 154, 58, 0.18) !important;
}

.admin-dashboard-root [data-admin-dashboard-content] .focus\:border-primary-500:focus {
    border-color: var(--admin-gold-500) !important;
}

.admin-dashboard-root [data-admin-dashboard-content] *:focus {
    outline-color: rgba(197, 154, 58, 0.55) !important;
}

.admin-dashboard-root [data-admin-dashboard-content] .focus\:ring-blue-100:focus,
.admin-dashboard-root [data-admin-dashboard-content] .focus\:ring-blue-200:focus,
.admin-dashboard-root [data-admin-dashboard-content] .focus\:ring-blue-500:focus,
.admin-dashboard-root [data-admin-dashboard-content] .focus\:ring-indigo-100:focus,
.admin-dashboard-root [data-admin-dashboard-content] .focus\:ring-indigo-500:focus {
    --tw-ring-color: rgba(197, 154, 58, 0.18) !important;
}

.admin-dashboard-root [data-admin-dashboard-content] .focus\:border-blue-500:focus,
.admin-dashboard-root [data-admin-dashboard-content] .focus\:border-indigo-500:focus {
    border-color: var(--admin-gold-500) !important;
}

.admin-dashboard-root [data-admin-dashboard-content] .bg-emerald-50,
.admin-dashboard-root [data-admin-dashboard-content] .bg-emerald-100 {
    background-color: #eef8ef !important;
}

.admin-dashboard-root [data-admin-dashboard-content] .bg-rose-50,
.admin-dashboard-root [data-admin-dashboard-content] .bg-rose-100 {
    background-color: #fff2f1 !important;
}

.admin-dashboard-root [data-admin-dashboard-content] .shadow-xl,
.admin-dashboard-root [data-admin-dashboard-content] .shadow-lg {
    box-shadow: 0 14px 32px -24px rgba(92, 68, 20, 0.45) !important;
}

.admin-dashboard-root [data-admin-dashboard-content] button,
.admin-dashboard-root [data-admin-dashboard-content] .inline-flex.rounded-xl,
.admin-dashboard-root [data-admin-dashboard-content] .inline-flex.rounded-2xl,
.admin-dashboard-root [data-admin-dashboard-content] a.rounded-xl,
.admin-dashboard-root [data-admin-dashboard-content] a.rounded-2xl {
    border-color: rgba(197, 154, 58, 0.28);
}

.admin-dashboard-root [data-admin-dashboard-content] .bg-white:not(.text-white),
.admin-dashboard-root [data-admin-dashboard-content] .bg-white\/80:not(.text-white) {
    background-color: #fffdf8 !important;
}

.admin-dashboard-root [data-admin-dashboard-content] [class*="bg-blue-"],
.admin-dashboard-root [data-admin-dashboard-content] [class*="bg-indigo-"] {
    background-color: #fff5e2 !important;
    border-color: rgba(197, 154, 58, 0.3) !important;
}

.admin-dashboard-root [data-admin-dashboard-content] [class*="text-blue-"],
.admin-dashboard-root [data-admin-dashboard-content] [class*="text-indigo-"] {
    color: #9b7120 !important;
}

.admin-dashboard-root [data-admin-dashboard-nav] a[data-admin-section-link] {
    color: #5d4a23;
}

.admin-dashboard-root [data-admin-dashboard-nav] a[data-admin-section-link]:hover {
    background: #f8f2e3;
}

.admin-dashboard-root [data-admin-dashboard-nav] a[data-admin-section-link].bg-slate-900,
.admin-dashboard-root [data-admin-dashboard-nav] a[data-admin-section-link].bg-\[\#c59a3a\] {
    background: var(--admin-gold-500) !important;
    color: #fff !important;
}

.admin-dashboard-root aside .text-gray-800,
.admin-dashboard-root aside .text-gray-700,
.admin-dashboard-root aside .text-slate-700 {
    color: #5d4a23 !important;
}

.admin-dashboard-root aside .text-gray-500,
.admin-dashboard-root aside .text-slate-400 {
    color: #8b7650 !important;
}

.admin-dashboard-root aside .border-slate-200,
.admin-dashboard-root aside .border-white\/20 {
    border-color: rgba(197, 154, 58, 0.24) !important;
}

.admin-dashboard-root [data-admin-dashboard-content] [class*="fixed inset-0"] {
    backdrop-filter: blur(2px);
}

.admin-dashboard-root [data-admin-dashboard-content] [class*="fixed inset-0"] > div,
.admin-dashboard-root [data-admin-dashboard-content] [class*="modal-content"],
.admin-dashboard-root [data-admin-dashboard-content] [data-wipe-confirm-modal] > div,
.admin-dashboard-root [data-admin-dashboard-content] [data-backups-modal] > div {
    background: #fffdf8 !important;
    border: 1px solid rgba(197, 154, 58, 0.24) !important;
}

/* Stronger admin-wide controls and order-details modal tuning */
.admin-page #order-details-modal-overlay {
    background-color: rgba(36, 25, 7, 0.62) !important;
}

.admin-page #order-details-modal [data-order-details-modal-panel] {
    background: #f7ecda !important;
    border-color: rgba(170, 126, 39, 0.45) !important;
}

.admin-page #order-details-modal-content .bg-white,
.admin-page #order-details-modal-content .bg-slate-50,
.admin-page #order-details-modal-content .bg-slate-100 {
    background-color: #fff7ea !important;
}

.admin-page #order-details-modal-content .border-slate-200,
.admin-page #order-details-modal-content .border-slate-100 {
    border-color: rgba(197, 154, 58, 0.28) !important;
}

.admin-page #order-details-modal-content .text-slate-900,
.admin-page #order-details-modal-content .text-slate-800,
.admin-page #order-details-modal-content .text-slate-700,
.admin-page #order-details-modal-content .text-slate-600,
.admin-page #order-details-modal-content .text-slate-500,
.admin-page #order-details-modal-content .text-slate-400 {
    color: #5a4927 !important;
}

.admin-page #order-details-modal-content .text-blue-600,
.admin-page #order-details-modal-content .text-blue-700,
.admin-page #order-details-modal-content .text-primary-700 {
    color: #a4761c !important;
}

.admin-page #order-details-modal-content select,
.admin-page #order-details-modal-content input,
.admin-page #order-details-modal-content textarea {
    background: #fff4e0 !important;
    border-color: rgba(197, 154, 58, 0.36) !important;
    color: #4f432b !important;
}

.admin-page #order-details-modal-content select:focus,
.admin-page #order-details-modal-content input:focus,
.admin-page #order-details-modal-content textarea:focus {
    border-color: #c59a3a !important;
    box-shadow: 0 0 0 4px rgba(197, 154, 58, 0.18) !important;
}

.admin-page .admin-dashboard-root button[class*="bg-slate-900"],
.admin-page .admin-dashboard-root button[class*="bg-primary-600"],
.admin-page .admin-dashboard-root button[class*="from-primary-600"],
.admin-page .admin-dashboard-root a[class*="bg-slate-900"],
.admin-page .admin-dashboard-root a[class*="bg-primary-600"] {
    background: linear-gradient(135deg, #c59a3a 0%, #a9781e 100%) !important;
    color: #fff !important;
    border-color: #aa7e27 !important;
}

.admin-page .admin-dashboard-root button[class*="hover:bg-slate-800"]:hover,
.admin-page .admin-dashboard-root button[class*="hover:bg-primary-700"]:hover,
.admin-page .admin-dashboard-root a[class*="hover:bg-slate-800"]:hover,
.admin-page .admin-dashboard-root a[class*="hover:bg-primary-700"]:hover {
    background: linear-gradient(135deg, #b5852e 0%, #946712 100%) !important;
    color: #fff !important;
}

.admin-page .admin-dashboard-root button[class*="bg-slate-100"],
.admin-page .admin-dashboard-root a[class*="bg-slate-100"],
.admin-page .admin-dashboard-root button[class*="bg-white"],
.admin-page .admin-dashboard-root a[class*="bg-white"] {
    background-color: #fff7e8 !important;
    color: #614f2c !important;
    border-color: rgba(197, 154, 58, 0.3) !important;
}

.admin-page .admin-dashboard-root button[class*="hover:bg-slate-200"]:hover,
.admin-page .admin-dashboard-root a[class*="hover:bg-slate-200"]:hover,
.admin-page .admin-dashboard-root button[class*="hover:bg-slate-50"]:hover,
.admin-page .admin-dashboard-root a[class*="hover:bg-slate-50"]:hover {
    background-color: #f7ebd4 !important;
}

/* Absolute admin-wide fallback pass: catch any leftover non-golden tokens */
.admin-page button[class*="bg-primary-"],
.admin-page a[class*="bg-primary-"],
.admin-page button[class*="bg-blue-"],
.admin-page a[class*="bg-blue-"],
.admin-page button[class*="bg-indigo-"],
.admin-page a[class*="bg-indigo-"],
.admin-page #order-details-modal-content button[class*="bg-primary-600"],
.admin-page #order-details-modal-content button[class*="bg-primary-700"] {
    background: linear-gradient(135deg, #c59a3a 0%, #a9781e 100%) !important;
    color: #fff !important;
    border-color: #aa7e27 !important;
}

.admin-page button[class*="hover:bg-primary-"]:hover,
.admin-page a[class*="hover:bg-primary-"]:hover,
.admin-page button[class*="hover:bg-blue-"]:hover,
.admin-page a[class*="hover:bg-blue-"]:hover,
.admin-page button[class*="hover:bg-indigo-"]:hover,
.admin-page a[class*="hover:bg-indigo-"]:hover {
    background: linear-gradient(135deg, #b5852e 0%, #946712 100%) !important;
    color: #fff !important;
}

.admin-page [class*="text-blue-"],
.admin-page [class*="text-indigo-"],
.admin-page [class*="text-cyan-"],
.admin-page [class*="text-primary-"] {
    color: #9b7120 !important;
}

.admin-page [class*="bg-blue-"],
.admin-page [class*="bg-indigo-"],
.admin-page [class*="bg-cyan-"] {
    background-color: #fff5e2 !important;
    border-color: rgba(197, 154, 58, 0.3) !important;
}

.admin-page input[type="checkbox"],
.admin-page input[type="radio"] {
    accent-color: #b5852e;
    border-color: rgba(197, 154, 58, 0.48) !important;
}

.admin-page input,
.admin-page select,
.admin-page textarea {
    background-color: #fff9ef;
}

.admin-page select {
    background-color: #fdf1d8 !important;
    color: #5b4822 !important;
    border-color: rgba(197, 154, 58, 0.38) !important;
}

.admin-page select option {
    background-color: #fff8eb !important;
    color: #5a4826 !important;
}

.admin-page .user-orders-btn {
    background: linear-gradient(135deg, #c59a3a 0%, #a9781e 100%) !important;
    color: #fff !important;
    border-color: #aa7e27 !important;
}

.admin-page .user-orders-btn:hover {
    background: linear-gradient(135deg, #b5852e 0%, #946712 100%) !important;
    color: #fff !important;
}

.admin-page input:focus,
.admin-page select:focus,
.admin-page textarea:focus {
    border-color: #c59a3a !important;
    box-shadow: 0 0 0 4px rgba(197, 154, 58, 0.16) !important;
}

/* تحسينات dropdown */
.dropdown {
    @apply relative;
}

.dropdown-menu {
    @apply absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-50;
}

.dropdown-item {
    @apply block px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors duration-200;
}

/* تحسينات tooltip */
.tooltip {
    @apply relative;
}

.tooltip-text {
    @apply absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-sm rounded-lg opacity-0 invisible transition-all duration-200;
}

.tooltip:hover .tooltip-text {
    @apply opacity-100 visible;
}

/* تحسينات progress */
.progress {
    @apply h-2 bg-gray-200 rounded-full overflow-hidden;
}

.progress-bar {
    @apply h-full bg-primary-500 transition-all duration-300;
}

/* تحسينات avatar */
.avatar {
    @apply w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center overflow-hidden;
}

.avatar-sm {
    @apply w-8 h-8;
}

.avatar-lg {
    @apply w-16 h-16;
}

.avatar-xl {
    @apply w-24 h-24;
}

/* تحسينات skeleton */
.skeleton {
    @apply bg-amber-100 rounded animate-pulse;
}

.skeleton-text {
    @apply h-4 bg-amber-100 rounded animate-pulse;
}

.skeleton-title {
    @apply h-6 bg-amber-100 rounded animate-pulse;
}

.skeleton-avatar {
    @apply w-12 h-12 bg-amber-100 rounded-full animate-pulse;
}

/* تحسينات إضافية للخلفية المتحركة */
@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 3s ease infinite;
}

/* تحسينات البطاقات الزجاجية */
.glass-card {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* تحسينات النصوص المتدرجة */
.text-gradient-animated {
    background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #f5576c);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 3s ease infinite;
}

/* تحسينات الأزرار المتحركة */
.btn-animated {
    position: relative;
    overflow: hidden;
}

.btn-animated::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-animated:hover::before {
    left: 100%;
}

/* تحسينات الحقول */
.input-animated {
    transition: all 0.3s ease;
}

.input-animated:focus {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* تحسينات القوائم المنسدلة */
.select-animated {
    transition: all 0.3s ease;
}

.select-animated:focus {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* تحسينات الرسائل */
.alert-animated {
    animation: slideIn 0.5s ease-out;
}

/* تحسينات الأيقونات */
.icon-animated {
    transition: all 0.3s ease;
}

.icon-animated:hover {
    transform: scale(1.2) rotate(10deg);
}

/* تحسينات الروابط */
.link-animated {
    position: relative;
}

.link-animated::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 50%;
    background-color: currentColor;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.link-animated:hover::after {
    width: 100%;
}

/* تحسينات التحميل */
.loading-dots {
    display: inline-flex;
    align-items: center;
}

.loading-dots span {
    animation: loading-dots 1.4s infinite ease-in-out both;
}

.loading-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

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

@keyframes loading-dots {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

/* تحسينات الظلال المتقدمة */
.shadow-glow {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
}

.shadow-glow-lg {
    box-shadow: 0 0 40px rgba(102, 126, 234, 0.4);
}

/* تحسينات التدرجات المتقدمة */
.gradient-mesh {
    background: 
        radial-gradient(at 40% 20%, hsla(28, 100%, 74%, 1) 0px, transparent 50%),
        radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 50%, hsla(355, 100%, 93%, 1) 0px, transparent 50%),
        radial-gradient(at 80% 50%, hsla(340, 100%, 76%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 100%, hsla(22, 100%, 77%, 1) 0px, transparent 50%),
        radial-gradient(at 80% 100%, hsla(242, 100%, 70%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 0%, hsla(343, 100%, 76%, 1) 0px, transparent 50%);
}

/* تحسينات الحركات المتقدمة */
@keyframes morph {
    0%, 100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
}

.animate-morph {
    animation: morph 8s ease-in-out infinite;
}

/* تحسينات التفاعل */
.hover-lift {
    transition: all 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.hover-glow {
    transition: all 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 30px rgba(102, 126, 234, 0.5);
}

/* تحسينات الاستجابة */
@media (max-width: 640px) {
    .animate-float {
        animation-duration: 4s;
    }
    
    .animate-morph {
        animation-duration: 6s;
    }
}