/* ============================================================
   CarRent.club - Premium Upgrade CSS
   Reversible: remove <link> tag from all pages to revert
   ============================================================ */

/* ---------- VARIABLES ---------- */
:root {
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-glow: rgba(37, 99, 235, 0.18);
  --blue-glow-strong: rgba(37, 99, 235, 0.32);
  --shadow-card: 0 2px 8px rgba(37, 99, 235, 0.07), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 12px 32px rgba(37, 99, 235, 0.15), 0 4px 12px rgba(0,0,0,0.08);
  --radius-card: 1rem;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- RESET / SMOOTH SCROLL ---------- */
html { scroll-behavior: smooth; }

/* ---------- SCROLL PROGRESS BAR ---------- */
#premium-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--blue-600), #60a5fa);
  z-index: 9999;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}

/* ---------- GLASSMORPHISM NAVBAR ---------- */
header.sticky,
header[class*="sticky"] {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(37, 99, 235, 0.1);
  box-shadow: 0 2px 20px rgba(37, 99, 235, 0.07);
  transition: var(--transition);
}

/* Navbar scrolled state */
header.nav-scrolled {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  box-shadow: 0 4px 24px rgba(37, 99, 235, 0.1) !important;
}

/* ---------- SKIP TO CONTENT (Accessibility) ---------- */
#skip-to-content {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--blue-600);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 0.5rem 0.5rem;
  font-weight: 600;
  z-index: 10000;
  transition: top 0.2s;
  text-decoration: none;
}
#skip-to-content:focus { top: 0; }

/* ---------- HERO SECTION - Rich Gradient ---------- */
section[class*="from-blue-50"],
div[class*="from-blue-50"] {
  background: linear-gradient(135deg,
    #eff6ff 0%,
    #dbeafe 30%,
    #f0f9ff 60%,
    #ffffff 100%) !important;
  position: relative;
}

/* Hero gradient overlay for depth */
section[class*="from-blue-50"]::before,
div[class*="from-blue-50"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(96, 165, 250, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 10% 80%, rgba(37, 99, 235, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

/* ---------- SECTION DIVIDERS ---------- */
.premium-divider {
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.premium-divider svg { display: block; }

/* ---------- CARDS - Premium Shadows & Hover ---------- */
.rounded-xl.bg-white.border,
.rounded-xl.bg-white.shadow-sm,
[class*="rounded-xl"][class*="bg-white"][class*="border-gray"] {
  box-shadow: var(--shadow-card) !important;
  border-color: rgba(37, 99, 235, 0.08) !important;
  transition: var(--transition) !important;
  position: relative;
  overflow: hidden;
}

.rounded-xl.bg-white.border:hover,
.rounded-xl.bg-white.shadow-sm:hover,
[class*="rounded-xl"][class*="bg-white"][class*="border-gray"]:hover {
  box-shadow: var(--shadow-card-hover) !important;
  border-color: rgba(37, 99, 235, 0.2) !important;
  transform: translateY(-4px) !important;
}

/* Card shimmer on hover */
.rounded-xl.bg-white.border::after,
.rounded-xl.bg-white.shadow-sm::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0) 40%, rgba(37,99,235,0.04) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.rounded-xl.bg-white.border:hover::after,
.rounded-xl.bg-white.shadow-sm:hover::after { opacity: 1; }

/* ---------- ICON CONTAINERS - Gradient bg ---------- */
[class*="rounded-full"][class*="bg-blue-100"],
[class*="rounded-lg"][class*="bg-blue-100"],
.w-14.h-14.rounded-lg,
.w-16.h-16.rounded-full {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}

/* ---------- BUTTONS - Modern pill + gradient ---------- */
a[class*="bg-blue-600"],
button[class*="bg-blue-600"] {
  background: linear-gradient(135deg, var(--blue-600) 0%, #1e40af 100%) !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
  transition: var(--transition) !important;
  letter-spacing: 0.01em;
}

a[class*="bg-blue-600"]:hover,
button[class*="bg-blue-600"]:hover {
  background: linear-gradient(135deg, var(--blue-700) 0%, #1e3a8a 100%) !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45) !important;
  transform: translateY(-1px) !important;
}

/* Secondary buttons */
a[class*="border-blue-600"][class*="text-blue-600"],
button[class*="border-blue-600"][class*="text-blue-600"] {
  border-radius: 9999px !important;
  transition: var(--transition) !important;
}

/* White buttons on colored bg */
a[class*="bg-white"][class*="text-blue-600"],
button[class*="bg-white"][class*="text-blue-600"] {
  border-radius: 9999px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15) !important;
  transition: var(--transition) !important;
}

/* ---------- TESTIMONIALS - Quote decoration ---------- */
[class*="rounded-xl"][class*="bg-white"] .fa-star,
[class*="rounded-xl"][class*="bg-white"] [class*="fa-star"] {
  filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.4));
}

/* Decorative quote mark */
[class*="rounded-xl"][class*="bg-white"][class*="border-gray-100"] > div:first-child::before,
[class*="rounded-xl"][class*="bg-white"][class*="shadow-sm"] > div:first-child::before {
  content: none; /* Only applied via JS to testimonial cards */
}

/* ---------- CTA SECTIONS - Enhanced gradient ---------- */
section[class*="bg-blue-600"],
div[class*="bg-blue-600"][class*="py-"] {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #3b82f6 100%) !important;
  position: relative;
  overflow: hidden;
}

section[class*="bg-blue-600"]::before,
div[class*="bg-blue-600"][class*="py-"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.07) 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.05) 0%, transparent 40%);
  pointer-events: none;
}

/* ---------- FOOTER - Dark gradient ---------- */
footer[class*="bg-gray-900"],
[class*="bg-gray-900"][class*="py-"] {
  background: linear-gradient(180deg, #111827 0%, #0f172a 100%) !important;
  position: relative;
}

footer[class*="bg-gray-900"] [class*="border-gray-800"],
[class*="bg-gray-900"] [class*="border-gray-800"] {
  border-color: rgba(37, 99, 235, 0.15) !important;
}

/* ---------- FORM INPUTS - Premium focus ---------- */
input[class*="border-gray-300"],
textarea[class*="border-gray-300"],
select[class*="border-gray-300"] {
  transition: var(--transition) !important;
  border-radius: 0.625rem !important;
}

input[class*="border-gray-300"]:focus,
textarea[class*="border-gray-300"]:focus,
select[class*="border-gray-300"]:focus {
  border-color: var(--blue-600) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
  outline: none !important;
}

/* ---------- FOCUS VISIBLE (Accessibility) ---------- */
*:focus-visible {
  outline: 2px solid var(--blue-600) !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
}

/* ---------- SCROLL ANIMATIONS ---------- */
/* Subtle hover lift handled by card rules above — no entrance animation needed */

/* ---------- FLOATING WHATSAPP BUTTON ---------- */
#premium-whatsapp {
  position: fixed;
  bottom: 5rem;
  right: 1.5rem;
  width: 3.5rem;
  height: 3.5rem;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.4), 0 2px 6px rgba(0,0,0,0.12);
  z-index: 1000;
  text-decoration: none;
  transition: var(--transition);
  animation: premium-pulse 2.5s ease-in-out infinite;
}
#premium-whatsapp:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.5);
  animation: none;
}

/* ---------- BACK TO TOP BUTTON ---------- */
#premium-back-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 3rem;
  height: 3rem;
  background: linear-gradient(135deg, var(--blue-600), var(--blue-700));
  color: white;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  cursor: pointer;
  z-index: 1000;
  opacity: 0;
  transform: translateY(12px);
  transition: var(--transition);
  pointer-events: none;
}
#premium-back-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
#premium-back-top:hover {
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.45);
  transform: translateY(-2px);
}

/* ---------- PULSE ANIMATION ---------- */
@keyframes premium-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(34, 197, 94, 0.4), 0 0 0 0 rgba(34,197,94,0.3); }
  50% { box-shadow: 0 4px 16px rgba(34, 197, 94, 0.4), 0 0 0 10px rgba(34,197,94,0); }
}

/* ---------- STAT NUMBERS - Gradient text ---------- */
[class*="text-3xl"][class*="font-bold"][class*="text-blue-600"],
[class*="text-4xl"][class*="font-bold"][class*="text-blue-600"] {
  background: linear-gradient(135deg, var(--blue-600), #60a5fa) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ---------- SECTION LABEL BADGES ---------- */
[class*="uppercase"][class*="tracking-widest"][class*="text-blue-600"] {
  display: inline-block;
  background: rgba(37, 99, 235, 0.08);
  padding: 0.25rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

/* ---------- BREADCRUMBS ---------- */
#premium-breadcrumbs {
  background: rgba(249, 250, 251, 0.9);
  border-bottom: 1px solid rgba(37, 99, 235, 0.08);
  padding: 0.5rem 0;
  font-size: 0.8rem;
}
#premium-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  list-style: none;
}
#premium-breadcrumbs li { display: flex; align-items: center; gap: 0.35rem; color: #6b7280; }
#premium-breadcrumbs li:last-child { color: #1f2937; font-weight: 500; }
#premium-breadcrumbs a { color: var(--blue-600); text-decoration: none; transition: color 0.2s; }
#premium-breadcrumbs a:hover { color: var(--blue-700); text-decoration: underline; }
#premium-breadcrumbs .sep { color: #d1d5db; font-size: 0.75rem; }

/* ---------- MOBILE MENU OVERLAY ---------- */
#premium-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#premium-menu-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

/* ---------- BLOG ARTICLE - Enhanced Prose ---------- */
.prose h2 {
  border-left: 3px solid var(--blue-600) !important;
  padding-left: 0.875rem !important;
  margin-top: 2.5rem !important;
}

/* ---------- IMAGE HOVER EFFECT ---------- */
img[class*="rounded-2xl"],
img[class*="rounded-xl"] {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
}
img[class*="rounded-2xl"]:hover,
img[class*="rounded-xl"]:hover {
  transform: scale(1.01);
  box-shadow: 0 20px 48px rgba(37, 99, 235, 0.18) !important;
}

/* ---------- LINK HOVER UNDERLINE ---------- */
nav a, footer a {
  position: relative;
}

/* ---------- LOADING STATE (contact form) ---------- */
.premium-btn-loading {
  position: relative;
  overflow: hidden;
}
.premium-btn-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: premium-shimmer 1.2s ease infinite;
}
@keyframes premium-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ---------- STICKY MOBILE CALL CTA ---------- */
#premium-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(37, 99, 235, 0.12);
  box-shadow: 0 -4px 24px rgba(37, 99, 235, 0.1);
  display: none; /* JS shows this on mobile */
}
#premium-sticky-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
  border-radius: 9999px;
  padding: 0.875rem 1.5rem;
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  transition: all 0.2s ease;
  letter-spacing: 0.01em;
}
#premium-sticky-cta a:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}
#premium-sticky-cta a i { font-size: 1rem; }

/* Body padding on mobile to avoid content hidden behind sticky bar */
@media (max-width: 1023px) {
  #premium-sticky-cta { display: block; }
  body { padding-bottom: 5rem !important; }
  /* Lift WhatsApp and back-to-top above the sticky bar */
  #premium-whatsapp { bottom: 5.5rem !important; right: 1rem; width: 3rem; height: 3rem; font-size: 1.25rem; }
  #premium-back-top { bottom: 4.5rem !important; right: 1rem; }
}

/* ---------- RESPONSIVE ADJUSTMENTS ---------- */
@media (max-width: 768px) {
  [class*="text-5xl"] { font-size: 2.5rem !important; }
  [class*="text-6xl"] { font-size: 3rem !important; }
}

/* ---------- PRINT - Hide floating elements ---------- */
@media print {
  #premium-progress, #premium-whatsapp, #premium-back-top, #premium-breadcrumbs { display: none !important; }
}