/* Add custom CSS styles below */ 
/* ═══════════════════════════════════════════════
   RUSH PERFORMANCE — Global Theme CSS
   For Theme Raed via تخصيص متقدم
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Tajawal:wght@400;500;700;800;900&family=Cairo:wght@800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --rush-blue: #052DD5;
  --rush-gold: #F5D10F;
  --rush-gold-bright: #FFE040;
  --void: #07080C;
  --void-2: #0E1018;
  --void-3: #181C2A;
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.16);
  --paper: #F4EFE6;
  --paper-dim: rgba(244, 239, 230, 0.65);
  --paper-faint: rgba(244, 239, 230, 0.4);
}

/* === GLOBAL — dark canvas everywhere === */
html, body {
  background: var(--void) !important;
  color: var(--paper) !important;
  font-family: 'Tajawal', sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

main, .main, section, .container, .salla-page,
[class*="bg-white"], [class*="bg-gray-"], [class*="bg-slate-"] {
  background-color: transparent !important;
  color: var(--paper);
}

.home-page, .home, [class*="page-home"] {
  background: var(--void) !important;
}

/* === TYPOGRAPHY === */
h1, h2, h3, h4, [class*="title"], [class*="heading"] {
  font-family: 'Cairo', 'Tajawal', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.015em;
  color: var(--paper);
  line-height: 1.1;
}

p, span, li, label, input, textarea, button {
  font-family: 'Tajawal', sans-serif;
}

[lang="en"], [dir="ltr"] {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.05em;
}

/* === LINKS === */
a {
  color: var(--paper);
  transition: color 0.2s ease;
}
a:hover { color: var(--rush-gold); }

/* === HEADER === */
header,
.salla-header,
.s-header,
[class*="header-wrap"],
[class*="site-header"] {
  background: rgba(7, 8, 12, 0.85) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--hairline);
  transition: background 0.4s ease;
}

header.scrolled {
  background: rgba(7, 8, 12, 0.95) !important;
}

header a, header nav a,
.salla-menu a, .s-menu a,
[class*="nav-link"], [class*="menu-item"] a {
  color: var(--paper) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

header a:hover, header nav a:hover,
.salla-menu a:hover,
[class*="nav-link"]:hover,
[class*="menu-item"]:hover a {
  color: var(--rush-gold) !important;
}

header svg, header [class*="icon"] {
  color: var(--paper) !important;
  fill: var(--paper) !important;
}
header svg:hover, header [class*="icon"]:hover {
  color: var(--rush-gold) !important;
  fill: var(--rush-gold) !important;
}

[class*="cart-count"], [class*="cart-badge"],
.s-cart-summary-counter {
  background: var(--rush-gold) !important;
  color: var(--void) !important;
  font-weight: 800 !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* === BUTTONS — all gold CTA buttons === */
.btn, .button,
button[type="submit"],
.salla-button, .s-button-btn,
[class*="btn-primary"], [class*="button-primary"],
.add-to-cart, .checkout-btn, .btn-default,
input[type="submit"] {
  background: var(--rush-gold) !important;
  color: var(--void) !important;
  border: none !important;
  padding: 16px 32px !important;
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em;
  border-radius: 4px !important;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  box-shadow: 0 8px 28px rgba(245, 209, 15, 0.25);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.btn:hover, .button:hover,
button[type="submit"]:hover,
[class*="btn-primary"]:hover,
.add-to-cart:hover {
  background: var(--rush-gold-bright) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(245, 209, 15, 0.4);
}

.btn-outline, .btn-secondary,
[class*="btn-outline"] {
  background: transparent !important;
  color: var(--paper) !important;
  border: 1px solid var(--hairline-strong) !important;
  box-shadow: none !important;
}
.btn-outline:hover, .btn-secondary:hover {
  border-color: var(--rush-gold) !important;
  color: var(--rush-gold) !important;
  background: rgba(245, 209, 15, 0.05) !important;
}

/* === PRODUCT CARDS (catalog/category pages) === */
.product-entry, .product-card,
.s-product-card-entry, .salla-product-card,
[class*="product-item"], [class*="product-box"] {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

.product-entry .product-image,
.product-card .product-image,
.s-product-card-image,
[class*="product-image"], [class*="product-thumbnail"] {
  aspect-ratio: 1 !important;
  background: linear-gradient(180deg, #181C2A 0%, #0E1018 100%) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 4px !important;
  position: relative;
  overflow: hidden;
  margin-bottom: 18px !important;
  transition: border-color 0.4s ease;
}

.product-entry:hover .product-image,
.product-card:hover .product-image,
.s-product-card-entry:hover .s-product-card-image {
  border-color: var(--rush-gold) !important;
}

.product-image img,
.s-product-card-image img,
[class*="product-image"] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 12% !important;
  mix-blend-mode: screen;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.product-entry:hover .product-image img,
.product-card:hover .product-image img {
  transform: scale(1.05);
}

.product-image::before,
.s-product-card-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(245, 209, 15, 0.05) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.product-title, .product-name,
.s-product-card-content-name,
[class*="product-title"], [class*="product-name"] {
  font-family: 'Tajawal', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--paper) !important;
  margin-bottom: 12px !important;
  line-height: 1.4;
}

.product-price, .price,
.s-product-card-content-price,
[class*="product-price"] {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  color: var(--paper) !important;
  letter-spacing: 0.02em;
  direction: ltr;
}

.product-price-before, .product-old-price,
[class*="price-before"], [class*="old-price"] {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  color: var(--paper-faint) !important;
  text-decoration: line-through;
}

.product-badge, .s-product-card-sale-badge,
[class*="badge-sale"], [class*="product-label"] {
  background: var(--rush-gold) !important;
  color: var(--void) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em;
  padding: 4px 10px !important;
  border-radius: 2px !important;
  text-transform: uppercase;
}

/* === FORMS / INPUTS === */
input[type="text"], input[type="email"],
input[type="tel"], input[type="password"],
input[type="search"], input[type="number"],
textarea, select, .form-control {
  background: var(--void-2) !important;
  border: 1px solid var(--hairline) !important;
  color: var(--paper) !important;
  border-radius: 4px !important;
  padding: 14px 18px !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: 15px !important;
  transition: border-color 0.2s ease;
}

input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--rush-gold) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--paper-faint) !important;
}

/* === FOOTER === */
footer, .salla-footer, .s-footer,
[class*="site-footer"] {
  background: var(--void-2) !important;
  color: var(--paper-dim) !important;
  border-top: 1px solid var(--hairline);
  position: relative;
  overflow: hidden;
  padding: 80px 0 32px !important;
}

footer::before {
  content: 'RUSH';
  position: absolute;
  bottom: -8vw;
  left: 0;
  right: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32vw;
  line-height: 0.8;
  color: var(--paper);
  opacity: 0.025;
  letter-spacing: -0.02em;
  pointer-events: none;
  text-align: center;
  direction: ltr;
  z-index: 0;
}

footer * { position: relative; z-index: 1; }

footer h4, footer .footer-title {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em;
  color: var(--paper-faint) !important;
  text-transform: uppercase;
  margin-bottom: 24px !important;
  direction: ltr;
}

footer a {
  color: var(--paper) !important;
  font-size: 14px;
  transition: color 0.2s;
}
footer a:hover { color: var(--rush-gold) !important; }

/* === CART / CHECKOUT === */
.cart-page, .checkout-page,
.s-cart-page, .s-checkout-page,
[class*="cart-page"], [class*="checkout"] {
  background: var(--void) !important;
}

.cart-item, .checkout-item, [class*="cart-item"] {
  background: var(--void-2) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 6px !important;
  margin-bottom: 12px;
}

.cart-summary, .order-summary,
[class*="cart-summary"], [class*="order-summary"] {
  background: var(--void-3) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 6px !important;
  padding: 24px !important;
}

/* === PRODUCT DETAIL PAGE === */
.product-page, .salla-product-page,
[class*="product-single"] {
  background: var(--void) !important;
  color: var(--paper) !important;
}

.product-page h1, .salla-product-page h1 {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(28px, 3vw, 44px) !important;
  color: var(--paper) !important;
}

.product-page .price {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 40px !important;
  color: var(--rush-gold) !important;
  direction: ltr;
}

/* === BREADCRUMBS === */
.breadcrumb, [class*="breadcrumb"] {
  background: transparent !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-faint) !important;
  padding: 16px 0 !important;
}

.breadcrumb a {
  color: var(--paper-faint) !important;
}
.breadcrumb a:hover {
  color: var(--rush-gold) !important;
}

/* === MODALS / TOASTS === */
.swal2-popup, [class*="modal"], [class*="dialog"] {
  background: var(--void-2) !important;
  color: var(--paper) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 6px !important;
}

.swal2-title, [class*="modal"] h2 {
  color: var(--paper) !important;
  font-family: 'Cairo', sans-serif !important;
}

/* === TAILWIND UTILITY OVERRIDES === */
.bg-white, [class*="bg-white"] { background-color: var(--void-2) !important; }
.bg-gray-50, .bg-gray-100, .bg-slate-50, .bg-slate-100 { background-color: var(--void-2) !important; }
.bg-gray-200, .bg-slate-200 { background-color: var(--void-3) !important; }
.text-black, [class*="text-black"] { color: var(--paper) !important; }
.text-gray-900, .text-gray-800, .text-slate-900, .text-slate-800 { color: var(--paper) !important; }
.text-gray-700, .text-gray-600, .text-slate-700, .text-slate-600 { color: var(--paper-dim) !important; }
.text-gray-500, .text-gray-400, .text-slate-500, .text-slate-400 { color: var(--paper-faint) !important; }
.border, [class*="border-"] { border-color: var(--hairline) !important; }

/* === DIVIDERS === */
hr, .divider, [class*="divider"] {
  border-color: var(--hairline) !important;
  border-top: 1px solid var(--hairline) !important;
}

/* === FADE-UP ANIMATION (triggered by JS) === */
@keyframes rush-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.rush-fade-up {
  animation: rush-fade-up 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

/* === SCROLLBAR === */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--void);
}
::-webkit-scrollbar-thumb {
  background: var(--void-3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--rush-gold);
}

/* === SELECTION === */
::selection {
  background: var(--rush-gold);
  color: var(--void);
}

.rush-drop-tile.muffler img {
  transform: scale(1.45);
  padding: 2%;
}

/* ═══════════════════════════════════════════════
   RUSH CLEAN HEADER + FOOTER FIX
   ═══════════════════════════════════════════════ */

/* HEADER */
header,
.salla-header,
.s-header,
.site-header {
  background: rgba(7,8,12,0.94) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Restore logo */
header img,
.salla-header img {
  display: block !important;
  max-height: 54px !important;
  width: auto !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Header text */
header a,
header span,
header button {
  color: #F4EFE6 !important;
}

header a:hover {
  color: #F5D10F !important;
}

/* Remove icon boxes */
header [class*="cart"],
header [class*="account"],
header [class*="user"],
header [class*="icon-wrap"],
header [class*="rounded"],
header [class*="border"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Cart badge */
header [class*="badge"],
header [class*="counter"] {
  background: #F5D10F !important;
  color: #07080C !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}

/* Search */
header input {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #F4EFE6 !important;
}

/* FOOTER */
footer,
.salla-footer,
.s-footer {
  background: #0E1018 !important;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: #F4EFE6 !important;
}

footer * {
  color: rgba(244,239,230,0.85) !important;
}

footer a:hover {
  color: #F5D10F !important;
}

/* Dropdown fixes */
select,
option,
.dropdown-menu,
[class*="dropdown"] {
  background: #0E1018 !important;
  color: #F4EFE6 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* Remove white cards */
.bg-white,
[class*="bg-white"],
[class*="bg-gray"] {
  background-color: #0E1018 !important;
}

/* chat GPT searchbox */




/* Search results dropdown dark fix */
[class*="search-results"],
[class*="autocomplete"],
[class*="suggestions"],
[class*="search-dropdown"],
[class*="search-result"],
.s-search-results,
.s-search-container ul,
.s-search-container li {
  background: #0E1018 !important;
  color: #F4EFE6 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

[class*="search-results"] *,
[class*="autocomplete"] *,
[class*="suggestions"] *,
.s-search-container li * {
  color: #F4EFE6 !important;
}

[class*="search-results"] li:hover,
[class*="autocomplete"] li:hover,
[class*="suggestions"] li:hover {
  background: rgba(245,209,15,0.08) !important;
}

/* Kill white hover on search results */
[class*="search-results"] li:hover,
[class*="autocomplete"] li:hover,
[class*="suggestions"] li:hover,
.s-search-container li:hover,
.s-search-results li:hover,
[class*="search-result"]:hover {
  background: rgba(245,209,15,0.08) !important;
  color: #F4EFE6 !important;
}

[class*="search-results"] li:hover *,
[class*="autocomplete"] li:hover *,
[class*="suggestions"] li:hover *,
.s-search-container li:hover * {
  color: #F4EFE6 !important;
}