/* خطوط وتنسيقات التراث اليمني لمتجر باب المدينة */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800;900&family=Amiri:ital,wght@0,400;0,700;1,400&display=swap');

:root {
    --color-burgundy-primary: #652121;
    --color-burgundy-dark: #350e0e;
    --color-burgundy-light: #932727;
    --color-gold-primary: #eab308;
    --color-gold-dark: #ca8a04;
    --color-gold-light: #facc15;
}

body {
    font-family: 'Cairo', sans-serif;
    background-color: #fdfbfb;
    color: #2b2b2b;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.font-serif-arabic {
    font-family: 'Amiri', serif;
}

/* نمط المسند والعمارة اليمنية التراثية */
.bg-yemeni-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23eab308' fill-opacity='0.05'%3E%3Cpath d='M30 0h2v20h-2zM0 30h20v2H0zM40 30h20v2H40zM30 40h2v20h-2zM15 15h2v2h-2zM45 15h2v2h-2zM15 45h2v2h-2zM45 45h2v2h-2zM20 20l2-2 16 16-2 2zM38 20l2 2-16 16-2-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* شريط التمرير المخصص */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #fcf4f4;
}
::-webkit-scrollbar-thumb {
    background: #932727;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #652121;
}

/* فواصل الزخرفة اليمنية */
.yemeni-separator {
    width: 100%;
    height: 36px;
    background-image: url("data:image/svg+xml;utf8,<svg width='60' height='36' viewBox='0 0 60 36' xmlns='http://www.w3.org/2000/svg'><path d='M30 0 L60 36 L0 36 Z' fill='%23652121'/><path d='M30 10 L50 36 L10 36 Z' fill='%23eab308'/><path d='M30 20 L40 36 L20 36 Z' fill='%23fdfbfb'/></svg>");
    background-repeat: repeat-x;
    background-size: 60px 36px;
}

.yemeni-separator-down {
    width: 100%;
    height: 36px;
    background-image: url("data:image/svg+xml;utf8,<svg width='60' height='36' viewBox='0 0 60 36' xmlns='http://www.w3.org/2000/svg'><path d='M30 36 L60 0 L0 0 Z' fill='%23fdfbfb'/><path d='M30 26 L50 0 L10 0 Z' fill='%23eab308'/><path d='M30 16 L40 0 L20 0 Z' fill='%23652121'/></svg>");
    background-repeat: repeat-x;
    background-size: 60px 36px;
}

/* بطاقات المنتجات وتأثيرات التحويم */
.product-card {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(101, 33, 33, 0.25);
}
.product-img-wrapper {
    overflow: hidden;
    position: relative;
}
.product-img-wrapper img {
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.product-card:hover .product-img-wrapper img {
    transform: scale(1.08);
}

/* تأثير التدرج الذهبي للنصوص */
.text-gradient-gold {
    background: linear-gradient(135deg, #facc15 0%, #eab308 50%, #ca8a04 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* لمعان الأزرار والعروض */
@keyframes shimmer {
    0% { transform: translateX(200%) skewX(-20deg); }
    100% { transform: translateX(-200%) skewX(-20deg); }
}
.glass-shimmer {
    position: relative;
    overflow: hidden;
}
.glass-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    right: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: shimmer 3s infinite;
    pointer-events: none;
}

/* بطاقات الدفع المختارة */
.payment-card {
    transition: all 0.3s ease;
    cursor: pointer;
}
.payment-card.selected {
    border-color: #eab308 !important;
    background-color: #fefce8 !important;
    box-shadow: 0 10px 20px -5px rgba(234, 179, 8, 0.25);
    transform: translateY(-2px);
}

/* إشعار التوست */
.toast-notice {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 1000;
}
.toast-notice.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* انسيابية القوائم المنزلقة */
#cart-drawer, #mobile-drawer {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#overlay-backdrop {
    transition: opacity 0.3s ease;
}