:root, html, body, *, *::before, *::after {
font-variant-numeric: normal !important;
-webkit-font-feature-settings: "lnum" 1, "tnum" 1, "locl" 0, "numr" 0 !important;
-moz-font-feature-settings: "lnum" 1, "tnum" 1, "locl" 0, "numr" 0 !important;
font-feature-settings: "lnum" 1, "tnum" 1, "locl" 0, "numr" 0 !important;
}
/* ---- */
@keyframes pulseRed {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
@keyframes pulseGreen {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
@keyframes pulseOrange {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}
@keyframes pulseBlue {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}
/* ---- */
.req-badge:hover { background: rgba(139, 92, 246, 0.25) !important; transform: translateY(-2px); border-color: rgba(139, 92, 246, 0.5) !important; }
@media (max-width: 768px) {
.product-requirements-compact {
padding: 10px 12px !important;
border-radius: 12px !important;
}
.requirements-wrapper {
flex-direction: column !important;
align-items: flex-start !important;
gap: 10px !important;
}
.requirements-title {
width: 100%;
justify-content: center;
padding-left: 0 !important;
border-left: none !important;
padding-bottom: 8px;
border-bottom: 1px solid rgba(139, 92, 246, 0.25);
}
.requirements-inline {
width: 100%;
justify-content: center;
gap: 6px !important;
}
.req-badge {
padding: 6px 10px !important;
border-radius: 8px !important;
}
}
/* ---- */
/* Coupon Box Styles */
.product-coupon-box {
position: relative;
margin-bottom: 22px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(124, 58, 237, 0.12) 0%, rgba(0, 212, 255, 0.12) 100%);
border: 1.5px dashed rgba(0, 212, 255, 0.45);
padding: 16px 20px;
box-shadow: 0 8px 25px rgba(0, 212, 255, 0.08);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.product-coupon-box::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100%;
background: radial-gradient(circle at top right, rgba(0, 212, 255, 0.15), transparent 70%);
pointer-events: none;
}
.product-coupon-box:hover {
border-color: var(--primary);
box-shadow: 0 10px 30px rgba(0, 212, 255, 0.2);
transform: translateY(-2px);
}
.coupon-card-inner {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.coupon-card-top {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
width: 100%;
}
.coupon-title-wrap {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
}
.coupon-gift-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: linear-gradient(135deg, #00d4ff, #7c3aed);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.1rem;
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
flex-shrink: 0;
}
.coupon-heading {
font-weight: 700;
font-size: 0.98rem;
color: #fff;
line-height: 1.3;
}
.coupon-discount-badge-wrap {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: 2px 0;
}
.coupon-discount-badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(135deg, #ff416c, #ff4b2b);
color: #fff;
padding: 8px 30px;
min-width: 200px;
border-radius: 25px;
font-size: 0.95rem;
font-weight: 800;
box-shadow: 0 4px 15px rgba(255, 75, 43, 0.4);
letter-spacing: 0.5px;
}
.coupon-subheading {
font-size: 0.82rem;
color: var(--text-secondary);
text-align: center;
display: block;
width: 100%;
line-height: 1.5;
margin: 0;
}
.coupon-card-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: rgba(0, 0, 0, 0.25);
border-radius: 12px;
padding: 6px 8px 6px 14px;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.coupon-code-display {
display: flex;
align-items: center;
gap: 10px;
font-family: Cairo, sans-serif;
font-size: 1.15rem;
font-weight: 800;
color: #00d4ff;
letter-spacing: 1.5px;
direction: ltr;
}
.coupon-code-display i {
color: rgba(0, 212, 255, 0.7);
font-size: 0.95rem;
}
.btn-copy-coupon {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #00d4ff, #0099ff);
color: #000;
font-weight: 800;
font-size: 0.88rem;
padding: 8px 18px;
border-radius: 8px;
border: none;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 4px 14px rgba(0, 212, 255, 0.35);
user-select: none;
}
.btn-copy-coupon:hover {
transform: scale(1.04);
box-shadow: 0 6px 20px rgba(0, 212, 255, 0.5);
background: linear-gradient(135deg, #2ae0ff, #00b4ff);
}
.btn-copy-coupon.copied {
background: linear-gradient(135deg, #10b981, #059669) !important;
color: #fff !important;
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4) !important;
transform: scale(1.02);
}
/* Coupon Applied Popup Under Box */
.coupon-applied-popup {
margin-top: 12px;
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(16, 185, 129, 0.35);
border-radius: 12px;
padding: 11px 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 15px rgba(16, 185, 129, 0.15);
direction: rtl;
animation: couponPopupSlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
backdrop-filter: blur(10px);
}
@keyframes couponPopupSlideDown {
0% {
opacity: 0;
transform: translateY(-8px) scale(0.98);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.coupon-applied-popup-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
}
.coupon-popup-check {
color: #10b981;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.coupon-popup-text {
color: #f8fafc;
font-size: 0.92rem;
font-weight: 700;
line-height: 1.45;
flex-grow: 1;
text-align: right;
}
.coupon-popup-text strong {
color: #00d4ff;
}
.coupon-popup-gift {
font-size: 1.2rem;
flex-shrink: 0;
display: flex;
align-items: center;
}
@media (max-width: 768px) {
.product-coupon-box {
padding: 14px 12px !important;
border-radius: 14px !important;
margin-top: 14px !important;
margin-bottom: 16px !important;
}
.coupon-card-inner {
gap: 10px !important;
}
.coupon-card-top {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
}
.coupon-title-wrap {
display: flex !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
}
.coupon-gift-icon {
width: 32px !important;
height: 32px !important;
font-size: 0.95rem !important;
border-radius: 8px !important;
flex-shrink: 0 !important;
}
.coupon-heading {
font-size: clamp(0.85rem, 3.4vw, 0.95rem) !important;
font-weight: 700 !important;
line-height: 1.25 !important;
white-space: nowrap !important;
}
.coupon-discount-badge-wrap {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
margin: 3px 0 !important;
}
.coupon-discount-badge {
width: 75% !important;
max-width: 270px !important;
min-width: 180px !important;
padding: 7px 18px !important;
font-size: 0.88rem !important;
border-radius: 20px !important;
font-weight: 800 !important;
white-space: nowrap !important;
justify-content: center !important;
}
.coupon-subheading {
font-size: 0.76rem !important;
line-height: 1.45 !important;
text-align: center !important;
color: var(--text-secondary) !important;
}
.coupon-card-bottom {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
padding: 6px 8px !important;
border-radius: 10px !important;
background: rgba(0, 0, 0, 0.35) !important;
}
.coupon-code-display {
font-size: clamp(0.95rem, 3.6vw, 1.1rem) !important;
gap: 6px !important;
letter-spacing: 1px !important;
font-weight: 800 !important;
}
.coupon-code-display i {
font-size: 0.85rem !important;
}
.btn-copy-coupon {
padding: 7px 14px !important;
font-size: 0.8rem !important;
border-radius: 8px !important;
white-space: nowrap !important;
gap: 5px !important;
}
.coupon-applied-popup {
padding: 9px 12px !important;
margin-top: 8px !important;
}
.coupon-popup-text {
font-size: 0.8rem !important;
line-height: 1.4 !important;
}
.coupon-popup-check i {
font-size: 1rem !important;
}
.coupon-popup-gift {
font-size: 1rem !important;
}
}
@media (max-width: 480px) {
.product-coupon-box {
padding: 12px 10px !important;
border-radius: 12px !important;
}
.coupon-discount-badge {
width: 80% !important;
max-width: 250px !important;
padding: 7px 16px !important;
font-size: 0.86rem !important;
border-radius: 20px !important;
justify-content: center !important;
}
.coupon-subheading {
font-size: 0.74rem !important;
}
.coupon-card-bottom {
padding: 5px 6px !important;
}
.btn-copy-coupon {
padding: 6px 10px !important;
font-size: 0.76rem !important;
}
}
/* Activation Email Box Styles */
@keyframes fieldShake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-7px); }
40%, 80% { transform: translateX(7px); }
}
.field-shake {
animation: fieldShake 0.45s ease-in-out;
}
.activation-email-box {
margin-bottom: 22px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
direction: rtl;
scroll-margin-top: 120px;
}
.activation-box-header {
margin-bottom: 12px;
padding: 0 4px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.activation-box-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
width: 100%;
box-sizing: border-box;
}
.activation-box-subtext {
margin-top: 6px;
font-size: 0.88rem;
font-weight: 600;
color: #f59e0b;
display: flex;
align-items: flex-start;
gap: 8px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
line-height: 1.5;
word-break: break-word;
overflow-wrap: break-word;
}
.activation-box-subtext i {
margin-top: 3px;
font-size: 0.92rem;
color: #f59e0b;
flex-shrink: 0;
}
.activation-box-subtext span {
flex: 1;
min-width: 0;
}
.activation-email-card {
width: 100%;
max-width: 100%;
box-sizing: border-box;
background: var(--bg-tertiary);
border: 1.5px solid rgba(0, 212, 255, 0.4);
border-radius: 14px;
padding: 18px 20px;
box-shadow: 0 8px 24px rgba(0, 212, 255, 0.08);
transition: all 0.3s ease;
}
.activation-email-card:focus-within {
border-color: var(--primary);
box-shadow: 0 8px 30px rgba(0, 212, 255, 0.22);
}
.activation-email-label {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
font-weight: 700;
color: var(--text-primary);
font-size: 1rem;
text-align: right;
}
.activation-email-input {
width: 100%;
padding: 13px 16px;
border-radius: 10px;
border: 1.5px solid var(--border-color);
background: var(--bg-secondary);
color: var(--text-primary);
font-size: 1rem;
direction: ltr;
text-align: left;
transition: all 0.25s ease;
box-sizing: border-box;
}
.activation-email-input:focus {
border-color: var(--primary) !important;
box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2) !important;
outline: none;
background: rgba(0, 0, 0, 0.3);
}
.activation-email-hint {
color: var(--text-secondary);
font-size: 0.85rem;
margin-top: 8px;
display: flex;
align-items: center;
gap: 6px;
text-align: right;
}
/* Price Summary Card above Quantity */
.product-price-summary-card {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
border: 1.5px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
padding: 14px 20px;
margin-bottom: 20px;
direction: rtl;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.product-price-summary-card:hover {
border-color: rgba(0, 212, 255, 0.4);
box-shadow: 0 6px 22px rgba(0, 212, 255, 0.12);
}
.product-price-summary-card .price-summary-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 1.05rem;
font-weight: 700;
color: var(--text-secondary);
}
.product-price-summary-card .price-summary-values {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.product-price-summary-card .bottom-current-price {
font-size: 1.4rem;
font-weight: 800;
color: var(--text-primary);
transition: all 0.3s ease;
}
.product-price-summary-card .bottom-old-price {
font-size: 1rem;
color: var(--text-muted);
text-decoration: line-through;
opacity: 0.65;
}
/* ===== LIGHT THEME OVERRIDES FOR COUPON & PRODUCT CARDS ===== */
[data-theme="light"] .product-coupon-box,
body.light .product-coupon-box,
body.light-theme .product-coupon-box {
background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(79, 70, 229, 0.04) 100%) !important;
border: 1.5px dashed rgba(124, 58, 237, 0.45) !important;
box-shadow: 0 4px 20px rgba(124, 58, 237, 0.07) !important;
}
[data-theme="light"] .coupon-heading,
body.light .coupon-heading,
body.light-theme .coupon-heading {
color: #0f172a !important;
}
[data-theme="light"] .coupon-subheading,
body.light .coupon-subheading,
body.light-theme .coupon-subheading {
color: #64748b !important;
}
[data-theme="light"] .coupon-card-bottom,
body.light .coupon-card-bottom,
body.light-theme .coupon-card-bottom {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .coupon-code-display,
body.light .coupon-code-display,
body.light-theme .coupon-code-display {
color: #7c3aed !important;
}
[data-theme="light"] .coupon-code-display i,
body.light .coupon-code-display i,
body.light-theme .coupon-code-display i {
color: #7c3aed !important;
}
[data-theme="light"] .btn-copy-coupon,
body.light .btn-copy-coupon,
body.light-theme .btn-copy-coupon {
background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
color: #ffffff !important;
box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35) !important;
}
[data-theme="light"] .btn-copy-coupon:hover,
body.light .btn-copy-coupon:hover,
body.light-theme .btn-copy-coupon:hover {
background: linear-gradient(135deg, #6d28d9, #4338ca) !important;
box-shadow: 0 6px 18px rgba(124, 58, 237, 0.45) !important;
}
[data-theme="light"] .coupon-applied-popup,
body.light .coupon-applied-popup,
body.light-theme .coupon-applied-popup {
background: #ffffff !important;
border: 1px solid rgba(16, 185, 129, 0.45) !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .coupon-popup-text,
body.light .coupon-popup-text,
body.light-theme .coupon-popup-text {
color: #0f172a !important;
}
[data-theme="light"] .coupon-popup-text strong,
body.light .coupon-popup-text strong,
body.light-theme .coupon-popup-text strong {
color: #7c3aed !important;
}
[data-theme="light"] .activation-email-card,
body.light .activation-email-card,
body.light-theme .activation-email-card {
background: #ffffff !important;
border: 1.5px solid #e2e8f0 !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .activation-email-card:focus-within,
body.light .activation-email-card:focus-within,
body.light-theme .activation-email-card:focus-within {
border-color: #7c3aed !important;
box-shadow: 0 4px 20px rgba(124, 58, 237, 0.15) !important;
}
[data-theme="light"] .activation-email-input,
body.light .activation-email-input,
body.light-theme .activation-email-input {
background: #f8fafc !important;
border: 1.5px solid #cbd5e1 !important;
color: #0f172a !important;
}
[data-theme="light"] .activation-email-input:focus,
body.light .activation-email-input:focus,
body.light-theme .activation-email-input:focus {
background: #ffffff !important;
border-color: #7c3aed !important;
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2) !important;
}
[data-theme="light"] .product-price-summary-card,
body.light .product-price-summary-card,
body.light-theme .product-price-summary-card {
background: #f8fafc !important;
border: 1.5px solid #e2e8f0 !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .product-price-summary-card .bottom-current-price,
body.light .product-price-summary-card .bottom-current-price,
body.light-theme .product-price-summary-card .bottom-current-price {
color: #0f172a !important;
}
/* ---- */
/* على الموبايل: تأثيرات التوهج/التدرج المتكررة بتثبت بدل ما تنبض — كانت بتخلّي الموبايل يرسم الصفحة كل frame (بطء في PageSpeed).
الشكل نفسه (اللون والتوهج) فاضل، والكمبيوتر زي ما هو. لازم تفضل آخر الصفحة عشان تعلى على تعريفات الـ keyframes */
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
@keyframes crown-shine { from {} to {} }
@keyframes flame-pulse { from {} to {} }
@keyframes flashBarGlow { from {} to {} }
@keyframes glowGradient { from {} to {} }
@keyframes gradientShift { from {} to {} }
@keyframes iconPulse { from {} to {} }
@keyframes lineGlow { from {} to {} }
@keyframes livePulse { from {} to {} }
@keyframes neonFlow { from {} to {} }
@keyframes pulse-glow { from {} to {} }
@keyframes pulseBlue { from {} to {} }
@keyframes pulseGreen { from {} to {} }
@keyframes pulseOrange { from {} to {} }
@keyframes pulseRed { from {} to {} }
@keyframes searchGlow { from {} to {} }
}
/* ---- */
/* Toast Notification */
.toast-notification {
position: fixed;
bottom: 100px;
left: 50%;
transform: translateX(-50%) translateY(100px);
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 15px 25px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
z-index: 3000;
opacity: 0;
transition: all 0.3s ease;
}
.toast-notification.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-success i { color: #10b981; }
.toast-error i { color: #ef4444; }
.toast-info i { color: #00d4ff; }
/* Cart Success Modal */
.cart-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
z-index: 5000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.cart-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.cart-modal {
background: linear-gradient(145deg, var(--bg-card), var(--bg-secondary));
border-radius: 24px;
padding: 35px 25px;
max-width: 450px;
width: 95%;
text-align: center;
transform: scale(0.8) translateY(50px);
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
border: 1px solid rgba(0, 212, 255, 0.3);
box-shadow: 0 25px 80px rgba(0, 212, 255, 0.2);
}
.cart-modal-overlay.active .cart-modal {
transform: scale(1) translateY(0);
}
.cart-modal-icon {
width: 100px;
height: 100px;
margin: 0 auto 25px;
background: linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: #fff;
animation: cartBounce 0.8s ease-in-out;
box-shadow: 0 10px 40px rgba(0, 212, 255, 0.4);
}
@keyframes cartBounce {
0% { transform: scale(0); }
50% { transform: scale(1.2); }
70% { transform: scale(0.9); }
100% { transform: scale(1); }
}
.cart-modal h3 {
font-size: 1.6rem;
margin-bottom: 10px;
color: var(--text-primary);
}
.cart-modal p {
color: var(--text-secondary);
margin-bottom: 30px;
font-size: 1rem;
}
.cart-modal-product {
display: flex;
align-items: center;
gap: 15px;
background: var(--bg-tertiary);
padding: 15px;
border-radius: 16px;
margin-bottom: 25px;
text-align: center;
justify-content: center;
}
.cart-modal-product img {
width: 70px;
height: 70px;
border-radius: 12px;
object-fit: cover;
}
.cart-modal-product-info {
text-align: center;
}
.cart-modal-product-info h4 {
font-size: 1rem;
margin-bottom: 5px;
color: var(--text-primary);
}
.cart-modal-product-info span {
color: var(--primary);
font-weight: 600;
}
.cart-modal-product-info .cart-qty {
color: var(--text-secondary);
font-size: 0.9rem;
font-weight: normal;
margin-right: 10px;
}
.cart-modal-actions {
display: flex;
gap: 12px;
}
.cart-modal-btn {
flex: 1;
padding: 12px 18px;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
border: none;
font-family: inherit;
white-space: nowrap;
}
.cart-modal-btn.primary {
background: linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%);
color: #fff;
}
.cart-modal-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 212, 255, 0.35);
}
.cart-modal-btn.secondary {
background: rgba(255, 255, 255, 0.04);
color: var(--text-primary);
border: 1px solid var(--border-color);
}
.cart-modal-btn.secondary:hover {
background: rgba(255, 255, 255, 0.08);
border-color: var(--primary);
color: var(--primary);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 212, 255, 0.15);
}
@media (max-width: 576px) {
.cart-modal { padding: 25px 20px; }
.cart-modal-actions { flex-direction: column; gap: 10px; }
.cart-modal-icon { width: 75px; height: 75px; font-size: 2.2rem; }
.cart-modal-btn { width: 100%; padding: 12px 20px; }
}
/* Wishlist Success Modal */
.wishlist-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
z-index: 5000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.wishlist-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.wishlist-modal {
background: linear-gradient(145deg, var(--bg-card), var(--bg-secondary));
border-radius: 24px;
padding: 35px 25px;
max-width: 450px;
width: 95%;
text-align: center;
transform: scale(0.8) translateY(50px);
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
border: 1px solid rgba(239, 68, 68, 0.3);
box-shadow: 0 25px 80px rgba(239, 68, 68, 0.2);
}
.wishlist-modal-overlay.active .wishlist-modal {
transform: scale(1) translateY(0);
}
.wishlist-modal-icon {
width: 100px;
height: 100px;
margin: 0 auto 25px;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: #fff;
animation: heartBeat 1s ease-in-out;
box-shadow: 0 10px 40px rgba(239, 68, 68, 0.4);
}
@keyframes heartBeat {
0% { transform: scale(0); }
50% { transform: scale(1.2); }
70% { transform: scale(0.9); }
100% { transform: scale(1); }
}
.wishlist-modal h3 {
font-size: 1.6rem;
margin-bottom: 10px;
color: var(--text-primary);
}
.wishlist-modal p {
color: var(--text-secondary);
margin-bottom: 30px;
font-size: 1rem;
}
.wishlist-modal-product {
display: flex;
align-items: center;
gap: 15px;
background: var(--bg-tertiary);
padding: 15px;
border-radius: 16px;
margin-bottom: 25px;
text-align: right;
}
.wishlist-modal-product img {
width: 70px;
height: 70px;
border-radius: 12px;
object-fit: cover;
}
.wishlist-modal-product-info h4 {
font-size: 1rem;
margin-bottom: 5px;
color: var(--text-primary);
}
.wishlist-modal-product-info span {
color: var(--primary);
font-weight: 600;
}
/* SAR Symbol in wishlist modal */
.wishlist-modal-product-info .sar-symbol {
display: inline-block;
width: 1em;
height: 1.1em;
vertical-align: -0.15em;
margin-right: 2px;
background-color: var(--primary);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1124.14 1256.39'%3E%3Cpath d='M699.62,1113.02h0c-20.06,44.48-33.32,92.75-38.4,143.37l424.51-90.24c20.06-44.47,33.31-92.75,38.4-143.37l-424.51,90.24Z'/%3E%3Cpath d='M1085.73,895.8c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.33v-135.2l292.27-62.11c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.27V66.13c-50.67,28.45-95.67,66.32-132.25,110.99v403.35l-132.25,28.11V0c-50.67,28.44-95.67,66.32-132.25,110.99v525.69l-295.91,62.88c-20.06,44.47-33.33,92.75-38.42,143.37l334.33-71.05v170.26l-358.3,76.14c-20.06,44.47-33.32,92.75-38.4,143.37l375.04-79.7c30.53-6.35,56.77-24.4,73.83-49.24l68.78-101.97v-.02c7.14-10.55,11.3-23.27,11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1124.14 1256.39'%3E%3Cpath d='M699.62,1113.02h0c-20.06,44.48-33.32,92.75-38.4,143.37l424.51-90.24c20.06-44.47,33.31-92.75,38.4-143.37l-424.51,90.24Z'/%3E%3Cpath d='M1085.73,895.8c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.33v-135.2l292.27-62.11c20.06-44.47,33.32-92.75,38.4-143.37l-330.68,70.27V66.13c-50.67,28.45-95.67,66.32-132.25,110.99v403.35l-132.25,28.11V0c-50.67,28.44-95.67,66.32-132.25,110.99v525.69l-295.91,62.88c-20.06,44.47-33.33,92.75-38.42,143.37l334.33-71.05v170.26l-358.3,76.14c-20.06,44.47-33.32,92.75-38.4,143.37l375.04-79.7c30.53-6.35,56.77-24.4,73.83-49.24l68.78-101.97v-.02c7.14-10.55,11.3-23.27,11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.wishlist-modal-actions {
display: flex;
gap: 12px;
}
.wishlist-modal-btn {
flex: 1;
padding: 12px 18px;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
border: none;
font-family: inherit;
white-space: nowrap;
}
.wishlist-modal-btn.primary {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: #fff;
}
.wishlist-modal-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(239, 68, 68, 0.35);
}
.wishlist-modal-btn.secondary {
background: rgba(255, 255, 255, 0.04);
color: var(--text-primary);
border: 1px solid var(--border-color);
}
.wishlist-modal-btn.secondary:hover {
background: rgba(255, 255, 255, 0.08);
border-color: var(--primary);
color: var(--primary);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 212, 255, 0.15);
}
@media (max-width: 576px) {
.wishlist-modal { padding: 25px 20px; }
.wishlist-modal-actions { flex-direction: column; gap: 10px; }
.wishlist-modal-icon { width: 75px; height: 75px; font-size: 2.2rem; }
.wishlist-modal-btn { width: 100%; padding: 12px 20px; }
}
/* ===== نافذة المفضلة — نفس ستايل نافذة السلة بلون وردي/أحمر ===== */
.wishlist-modal-overlay { background: rgba(3, 6, 15, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 16px; }
.wishlist-modal {
--w: #f43f5e; --w-rgb: 244, 63, 94;
position: relative; max-width: 420px; width: 100%; padding: 30px 26px 22px; border-radius: 26px; text-align: center;
background: radial-gradient(120% 60% at 50% 0%, rgba(var(--w-rgb), .16), transparent 60%), linear-gradient(160deg, #161b2e 0%, #0f1322 100%);
border: 1px solid rgba(255, 255, 255, .08);
box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(var(--w-rgb), .14), inset 0 1px 0 rgba(255, 255, 255, .06);
transform: translateY(24px) scale(.96); transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.wishlist-modal-overlay.is-remove .wishlist-modal, .wishlist-modal-overlay.is-remove { }
#wishlist-modal.is-remove .wishlist-modal { --w: #94a3b8; --w-rgb: 148, 163, 184; }
.wishlist-modal-overlay.active .wishlist-modal { transform: translateY(0) scale(1); }
.wishlist-modal-close {
position: absolute; top: 14px; left: 14px; width: 34px; height: 34px; border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: #94a3b8;
display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: .9rem; transition: all .25s ease;
}
.wishlist-modal-close:hover { color: #fff; background: rgba(255, 255, 255, .1); transform: rotate(90deg); }
.wishlist-modal-icon {
width: 76px; height: 76px; margin: 2px auto 16px; border-radius: 50%; font-size: 2rem; color: var(--w) !important;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(circle, rgba(var(--w-rgb), .2) 0%, rgba(var(--w-rgb), .05) 70%) !important;
border: 1px solid rgba(var(--w-rgb), .35);
box-shadow: 0 0 0 8px rgba(var(--w-rgb), .06), 0 12px 34px rgba(var(--w-rgb), .28);
animation: none;
}
.wishlist-modal-icon i { filter: drop-shadow(0 0 10px rgba(var(--w-rgb), .6)); }
.wishlist-modal-overlay.active .wishlist-modal-icon i { animation: wlHeartPop .7s cubic-bezier(.22, 1.4, .36, 1) both; }
@keyframes wlHeartPop { 0% { transform: scale(0); } 55% { transform: scale(1.3); } 75% { transform: scale(.92); } 100% { transform: scale(1); } }
.wishlist-modal h3 { font-size: 1.35rem; font-weight: 900; margin: 0 0 6px; color: #fff; }
.wishlist-modal > p { font-size: .9rem; margin: 0 0 18px; color: #94a3b8; }
.wishlist-modal-product {
gap: 14px; padding: 12px; margin-bottom: 18px; border-radius: 18px; text-align: start; justify-content: flex-start; align-items: center;
background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .07);
}
.wishlist-modal-product img { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; flex-shrink: 0; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.wishlist-modal-product-info { text-align: start; min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.wishlist-modal-product-info h4 { font-size: .95rem; font-weight: 800; line-height: 1.45; margin: 0; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#wishlist-product-price { font-size: 1rem; font-weight: 900; color: #00d4ff; }
#wishlist-product-price:empty { display: none; }
.wishlist-modal-actions { display: flex; flex-direction: column; gap: 10px; }
.wishlist-modal-btn { width: 100%; padding: 13px 18px; font-size: .95rem; border-radius: 14px; }
.wishlist-modal-btn.primary { background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%) !important; color: #fff; box-shadow: 0 10px 24px rgba(244, 63, 94, .3); }
#wishlist-modal.is-remove .wishlist-modal-btn.primary { background: linear-gradient(135deg, #64748b 0%, #334155 100%) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, .3); }
.wishlist-modal-btn.secondary { background: transparent; border: 1px solid rgba(255, 255, 255, .12); color: #e2e8f0; }
.wishlist-modal-btn.secondary:hover { border-color: rgba(0, 212, 255, .5); color: #00d4ff; background: rgba(0, 212, 255, .06); }
[data-theme="light"] .wishlist-modal { background: radial-gradient(120% 60% at 50% 0%, rgba(var(--w-rgb), .1), transparent 60%), #fff; border-color: rgba(15, 23, 42, .08); box-shadow: 0 30px 70px rgba(15, 23, 42, .2); }
[data-theme="light"] .wishlist-modal h3, [data-theme="light"] .wishlist-modal-product-info h4 { color: #0f172a; }
[data-theme="light"] .wishlist-modal-product { background: #f8fafc; border-color: rgba(15, 23, 42, .06); }
[data-theme="light"] .wishlist-modal-btn.secondary { color: #334155; border-color: rgba(15, 23, 42, .15); }
@media (max-width: 576px) {
.wishlist-modal { padding: 26px 18px 18px; border-radius: 22px; }
.wishlist-modal-icon { width: 64px; height: 64px; font-size: 1.7rem; }
.wishlist-modal h3 { font-size: 1.2rem; }
.wishlist-modal-product img { width: 60px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) { .wishlist-modal-overlay.active .wishlist-modal-icon i { animation: none; } }
/* ===== نافذة "تمت الإضافة للسلة" — تصميم احترافي ===== */
.cart-modal-overlay { background: rgba(3, 6, 15, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 16px; }
.cart-modal {
position: relative;
max-width: 440px;
width: 100%;
padding: 30px 26px 22px;
border-radius: 26px;
background:
radial-gradient(120% 60% at 50% 0%, rgba(16, 185, 129, .14), transparent 60%),
linear-gradient(160deg, #161b2e 0%, #0f1322 100%);
border: 1px solid rgba(255, 255, 255, .08);
box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(16, 185, 129, .12), inset 0 1px 0 rgba(255, 255, 255, .06);
transform: translateY(24px) scale(.96);
transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
.cart-modal-overlay.active .cart-modal { transform: translateY(0) scale(1); }
.cart-modal-close {
position: absolute; top: 14px; left: 14px;
width: 34px; height: 34px; border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04);
color: var(--text-secondary, #94a3b8); cursor: pointer; font-size: .9rem;
display: flex; align-items: center; justify-content: center; transition: all .25s ease;
}
.cart-modal-close:hover { background: rgba(239, 68, 68, .15); border-color: rgba(239, 68, 68, .5); color: #f87171; transform: rotate(90deg); }
.cart-modal-icon {
width: 76px; height: 76px; margin: 2px auto 16px;
background: radial-gradient(circle, rgba(16, 185, 129, .18) 0%, rgba(16, 185, 129, .04) 70%);
border-radius: 50%; box-shadow: 0 0 0 8px rgba(16, 185, 129, .06), 0 12px 34px rgba(16, 185, 129, .25);
animation: none; font-size: 0;
}
.cart-modal-icon svg { width: 76px; height: 76px; }
.cart-modal-icon .cm-circle { fill: none; stroke: #10b981; stroke-width: 2.5; stroke-dasharray: 145; stroke-dashoffset: 0; }
.cart-modal-icon .cm-check { fill: none; stroke: #34d399; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 0; }
.cart-modal-icon.play .cm-circle { animation: cmCircle .6s ease-out both; }
.cart-modal-icon.play .cm-check { animation: cmCheck .4s .45s ease-out both; }
@keyframes cmCircle { from { stroke-dashoffset: 145; } to { stroke-dashoffset: 0; } }
@keyframes cmCheck { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
.cart-modal h3 { font-size: 1.35rem; font-weight: 900; margin: 0 0 6px; color: #fff; }
.cart-modal p { font-size: .9rem; margin: 0 0 18px; color: var(--text-secondary, #94a3b8); }
.cart-modal-product {
gap: 14px; padding: 12px; margin-bottom: 14px; border-radius: 18px; text-align: start; justify-content: flex-start;
background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .07);
}
.cart-modal-product img { width: 76px; height: 76px; border-radius: 14px; object-fit: cover; flex-shrink: 0; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.cart-modal-product-info { text-align: start; min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.cart-modal-product-info h4 { font-size: .95rem; font-weight: 800; line-height: 1.45; margin: 0; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cart-modal-product-info #cart-product-price { font-size: 1.05rem; font-weight: 900; color: #00d4ff; }
.cart-modal-product-info .cart-qty:empty { display: none; }
.cart-modal-product-info .cart-qty { align-self: flex-start; margin: 0; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; color: #cbd5e1; background: rgba(255, 255, 255, .06); }
.cart-modal-summary {
display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 16px; padding: 6px 14px; border-radius: 999px;
font-size: .82rem; font-weight: 700; color: #a7f3d0; background: rgba(16, 185, 129, .1); border: 1px solid rgba(16, 185, 129, .25);
}
.cart-modal-summary b { color: #fff; }
.cart-modal-actions { flex-direction: column; gap: 10px; }
.cart-modal-btn { width: 100%; padding: 13px 18px; font-size: .95rem; border-radius: 14px; }
.cart-modal-btn.primary { background: linear-gradient(135deg, #10b981 0%, #059669 100%); box-shadow: 0 10px 24px rgba(16, 185, 129, .28); }
.cart-modal-btn.primary:hover { box-shadow: 0 14px 30px rgba(16, 185, 129, .4); }
.cart-modal-btn.secondary { background: transparent; border: 1px solid rgba(255, 255, 255, .12); color: #e2e8f0; }
.cart-modal-btn.secondary:hover { border-color: rgba(0, 212, 255, .5); color: #00d4ff; background: rgba(0, 212, 255, .06); }
.cart-modal-trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .06); font-size: .76rem; font-weight: 600; color: #94a3b8; }
.cart-modal-trust i { color: #10b981; margin-left: 4px; }
[data-theme="light"] .cart-modal { background: radial-gradient(120% 60% at 50% 0%, rgba(16, 185, 129, .1), transparent 60%), #fff; border-color: rgba(15, 23, 42, .08); box-shadow: 0 30px 70px rgba(15, 23, 42, .2); }
[data-theme="light"] .cart-modal h3, [data-theme="light"] .cart-modal-product-info h4 { color: #0f172a; }
[data-theme="light"] .cart-modal-product { background: #f8fafc; border-color: rgba(15, 23, 42, .06); }
[data-theme="light"] .cart-modal-btn.secondary { color: #334155; border-color: rgba(15, 23, 42, .15); }
[data-theme="light"] .cart-modal-summary { color: #047857; }
[data-theme="light"] .cart-modal-summary b { color: #065f46; }
@media (max-width: 576px) {
.cart-modal { padding: 26px 18px 18px; border-radius: 22px; }
.cart-modal-icon, .cart-modal-icon svg { width: 64px; height: 64px; }
.cart-modal h3 { font-size: 1.2rem; }
.cart-modal-product img { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
.cart-modal-icon.play .cm-circle, .cart-modal-icon.play .cm-check { animation: none; }
}
/* ---- */
/* Remove animation - Crying sad effect */
.wishlist-modal-icon span {
animation: sadBounce 0.6s ease-in-out;
}
@keyframes sadBounce {
0%, 100% { transform: scale(1) rotate(0deg); }
25% { transform: scale(0.9) rotate(-5deg); }
50% { transform: scale(1.1) rotate(5deg); }
75% { transform: scale(0.95) rotate(-3deg); }
}
/* ---- */
@keyframes searchGlow {
0% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.7), 0 0 0 0 rgba(0, 212, 255, 0.4); transform: scale(1); }
20% { box-shadow: 0 0 20px 5px rgba(0, 212, 255, 0.6), 0 0 60px 15px rgba(0, 212, 255, 0.2); transform: scale(1.03); }
40% { box-shadow: 0 0 10px 2px rgba(0, 212, 255, 0.4), 0 0 40px 10px rgba(0, 212, 255, 0.1); transform: scale(1); }
60% { box-shadow: 0 0 20px 5px rgba(0, 212, 255, 0.5), 0 0 60px 15px rgba(0, 212, 255, 0.15); transform: scale(1.02); }
80% { box-shadow: 0 0 10px 2px rgba(0, 212, 255, 0.3), 0 0 40px 10px rgba(0, 212, 255, 0.1); transform: scale(1); }
100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0), 0 0 0 0 rgba(0, 212, 255, 0); transform: scale(1); }
}
.product-card.search-highlight {
animation: searchGlow 2.5s ease-in-out;
border-color: rgba(0, 212, 255, 0.8) !important;
z-index: 10;
position: relative;
}
.product-card.search-highlight::after {
content: '';
position: absolute;
inset: -2px;
border-radius: 22px;
background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(124, 58, 237, 0.15));
pointer-events: none;
z-index: -1;
animation: searchGlow 2.5s ease-in-out;
}
.search-result-count {
text-align: center;
padding: 12px 20px;
margin-bottom: 20px;
background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(124, 58, 237, 0.1));
border: 1px solid rgba(0, 212, 255, 0.2);
border-radius: 50px;
color: var(--text-secondary);
font-size: 0.9rem;
display: inline-flex;
align-items: center;
gap: 8px;
}
.search-result-count strong {
color: var(--primary);
font-weight: 700;
}
.search-result-count i {
color: #00d4ff;
}