/* ==========================================================
   DailyDriveSourcing — Modern UI Enhancement Layer
   Adds: glassmorphism header, smooth hovers, animations,
   modern cards, gradient buttons, and transitions.
   Does NOT override core layout — purely additive.
   ========================================================== */

/* ── Google Font: Inter (clean, modern, readable) ─────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --color-primary:   #E63946;
  --color-navy:      #1D3557;
  --color-steel:     #457B9D;
  --color-light:     #F8FAFC;
  --color-dark:      #0F172A;
  --shadow-sm:       0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:       0 4px 16px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  --shadow-lg:       0 12px 40px rgba(0,0,0,.14), 0 4px 16px rgba(0,0,0,.08);
  --shadow-hover:    0 20px 50px rgba(0,0,0,.16), 0 8px 24px rgba(0,0,0,.10);
  --radius:          12px;
  --radius-lg:       20px;
  --transition:      all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Base ─────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif !important; -webkit-font-smoothing: antialiased; }

/* ── Glassmorphism Sticky Header ──────────────────────── */
.header-stikcy {
  transition: var(--transition) !important;
}
.header-stikcy.scrolled,
.header-stikcy.is-sticky {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.10) !important;
  border-bottom: 1px solid rgba(255,255,255,0.5) !important;
}

/* ── Top Info Bar ─────────────────────────────────────── */
.info-bar {
  background: linear-gradient(90deg, var(--color-navy) 0%, #2d4a6e 100%) !important;
}

/* ── Navigation Links ─────────────────────────────────── */
.nav-menus > li > a {
  position: relative;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  transition: color 0.2s ease !important;
}
.nav-menus > li > a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  transition: width 0.25s ease;
}
.nav-menus > li:hover > a::after,
.nav-menus > li.active > a::after { width: 100%; }

/* ── Mega Menu ────────────────────────────────────────── */
.megamenu {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.megamenu .single-menu h5 a {
  font-weight: 600 !important;
  transition: color 0.2s !important;
}
.megamenu .single-menu h5 a:hover { color: var(--color-primary) !important; }
.megamenu .single-menu ul li a {
  transition: var(--transition) !important;
  padding: 2px 0 !important;
}
.megamenu .single-menu ul li a:hover {
  color: var(--color-primary) !important;
  padding-left: 6px !important;
}

/* ── Icon Circles (search, wishlist, cart) ────────────── */
.icon-circle {
  position: relative;
  transition: var(--transition) !important;
  border-radius: 50% !important;
}
.icon-circle:hover {
  background: rgba(230, 57, 70, 0.08) !important;
  transform: translateY(-1px) !important;
}
.icon-circle svg { transition: transform 0.2s ease !important; }
.icon-circle:hover svg { transform: scale(1.1) !important; }

.cart-count {
  background: linear-gradient(135deg, var(--color-primary) 0%, #c0392b 100%) !important;
  box-shadow: 0 2px 8px rgba(230,57,70,.4) !important;
  font-weight: 600 !important;
}

/* ── Product/Listing Cards ────────────────────────────── */
.product-card,
.product-item,
.single-product,
.item-card,
[class*=product-card],
[class*=listing-card],
.gs-product-area .product-wrapper {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: var(--transition) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  overflow: hidden !important;
  background: #fff !important;
}
.product-card:hover,
.product-item:hover,
.single-product:hover,
.item-card:hover,
[class*=product-card]:hover,
.gs-product-area .product-wrapper:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-6px) !important;
  border-color: rgba(230,57,70,.15) !important;
}

/* Product image zoom on hover */
.product-card .product-img img,
.product-item .product-img img,
.gs-product-area .product-wrapper img:first-child,
.single-product .product-img img {
  transition: transform 0.5s ease !important;
  overflow: hidden !important;
}
.product-card:hover img,
.product-item:hover img,
.gs-product-area .product-wrapper:hover img:first-child {
  transform: scale(1.06) !important;
}

/* ── Buttons — Modern Gradient Style ─────────────────── */
.btn-primary,
.primary-btn,
.theme-btn,
[class*=btn-main],
[class*=btn-theme],
.add-to-cart-btn,
button[type=submit]:not(.newsletter-btn):not(.dropdown-toggle) {
  background: linear-gradient(135deg, var(--color-primary) 0%, #c0392b 100%) !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 4px 15px rgba(230,57,70,.35) !important;
  transition: var(--transition) !important;
  padding: 10px 24px !important;
  color: #fff !important;
}
.btn-primary:hover,
.primary-btn:hover,
.theme-btn:hover,
[class*=btn-main]:hover,
[class*=btn-theme]:hover,
.add-to-cart-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(230,57,70,.45) !important;
  background: linear-gradient(135deg, #c0392b 0%, var(--color-primary) 100%) !important;
}

/* Outline variant */
.btn-outline,
.btn-outline-primary {
  border: 2px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
  background: transparent !important;
  transition: var(--transition) !important;
}
.btn-outline:hover,
.btn-outline-primary:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(230,57,70,.3) !important;
}

/* Newsletter button */
.newsletter-btn {
  border-radius: 50px !important;
  font-weight: 600 !important;
  transition: var(--transition) !important;
}
.newsletter-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.2) !important;
}

/* ── Search Bar ───────────────────────────────────────── */
.search-form,
.search-box,
.search-wrapper {
  border-radius: 50px !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden !important;
  transition: box-shadow 0.25s ease !important;
}
.search-form:focus-within,
.search-box:focus-within,
.search-wrapper:focus-within {
  box-shadow: var(--shadow-lg) !important;
}
input[type=search],
input[type=text].search-input,
.search-input {
  border-radius: 50px !important;
  border: 2px solid transparent !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
input[type=search]:focus,
input[type=text].search-input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 4px rgba(230,57,70,.12) !important;
  outline: none !important;
}

/* ── Form Inputs ──────────────────────────────────────── */
input:not([type=submit]):not([type=checkbox]):not([type=radio]),
select,
textarea {
  border-radius: var(--radius) !important;
  border: 1.5px solid #e2e8f0 !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
input:focus:not([type=submit]):not([type=checkbox]),
select:focus,
textarea:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 4px rgba(230,57,70,.1) !important;
  outline: none !important;
}

/* ── Section Headers ──────────────────────────────────── */
.section-title h2,
.gs-section-title h2,
[class*=section] h2,
.gs-heading h2 {
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  background: linear-gradient(135deg, var(--color-dark) 0%, #334155 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Hero / Banner Section ───────────────────────────── */
.hero-section,
.banner-section,
.vm-hero-section,
[class*=hero],
[class*=banner-area] {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}

/* ── Vehicle Ad Cards (VmAds on homepage) ────────────── */
.vm-ad-card,
[class*=vm-ad],
.ad-card {
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-md) !important;
  transition: var(--transition) !important;
}
.vm-ad-card:hover,
[class*=vm-ad]:hover,
.ad-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: var(--shadow-hover) !important;
}
.vm-ad-card img,
.ad-card img {
  transition: transform 0.5s ease !important;
}
.vm-ad-card:hover img,
.ad-card:hover img { transform: scale(1.06) !important; }

/* ── Footer ──────────────────────────────────────────── */
.gs-footer-section {
  background: linear-gradient(180deg, #0F172A 0%, #1e293b 100%) !important;
}

/* ── Newsletter Section ──────────────────────────────── */
.newslatter {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-steel) 100%) !important;
  border-radius: var(--radius-lg) !important;
  margin: 0 16px !important;
}
.news-latter-input {
  border-radius: 50px !important;
  border: none !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ── Breadcrumb ──────────────────────────────────────── */
.breadcrumb-item a {
  color: var(--color-steel) !important;
  transition: color 0.2s !important;
}
.breadcrumb-item a:hover { color: var(--color-primary) !important; }

/* ── Pagination ──────────────────────────────────────── */
.pagination .page-link {
  border-radius: var(--radius) !important;
  margin: 0 3px !important;
  border: none !important;
  font-weight: 500 !important;
  transition: var(--transition) !important;
  box-shadow: var(--shadow-sm) !important;
}
.pagination .page-link:hover,
.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, var(--color-primary) 0%, #c0392b 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(230,57,70,.35) !important;
  transform: translateY(-1px) !important;
}

/* ── Scroll-to-top Button ────────────────────────────── */
#scroll-top-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, #c0392b 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(230,57,70,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 9999;
  font-size: 20px;
}
#scroll-top-btn.visible {
  opacity: 1;
  transform: translateY(0);
}
#scroll-top-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(230,57,70,.6) !important;
}

/* ── Skeleton Loader (for async content) ─────────────── */
@keyframes shimmer {
  0%   { background-position: -800px 0; }
  100% { background-position: 800px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius) !important;
}

/* ── Fade-in Animation (applied via JS) ──────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.55s cubic-bezier(0.4, 0, 0.2, 1) both; }
.fade-in-up-d1 { animation-delay: 0.1s; }
.fade-in-up-d2 { animation-delay: 0.2s; }
.fade-in-up-d3 { animation-delay: 0.3s; }

/* ── Dropdown Menus ──────────────────────────────────── */
.dropdown-menu {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  overflow: hidden !important;
  backdrop-filter: blur(8px) !important;
}
.dropdown-item { transition: background-color 0.15s ease !important; }
.dropdown-item:hover { background: rgba(230,57,70,.06) !important; }
.dropdown-item.active { background: var(--color-primary) !important; color: #fff !important; }

/* ── Responsive tweaks ───────────────────────────────── */
@media (max-width: 768px) {
  .product-card:hover,
  .product-item:hover,
  .single-product:hover { transform: none !important; }
  .newslatter { margin: 0 !important; border-radius: 0 !important; }
}