/*
Theme Name: Online Car Battery Change Dubai
Theme URI: https://onlinecarbatterychange.com
Author: Online Car Battery Change Dubai Team
Author URI: https://onlinecarbatterychange.com
Description: Production-ready, ultra-fast, high-conversion standalone WordPress theme for Online Car Battery Change Dubai. Includes native Tailwind CSS utilities, Google Fonts (Plus Jakarta Sans & Space Grotesk), FontAwesome 6, 24/7 Rapid Dispatch emergency ticker, sticky navbar, 4-column footer, floating mobile CTA bar, and dedicated pixel-perfect templates for all 19 service, car brand, and battery brand pages.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: online-car-battery
Tags: auto, automotive, car-battery, emergency-service, full-width, one-column, custom-menu, translation-ready
*/

:root {
  --brand-navy: #0B132B;
  --brand-navy-light: #1C2541;
  --brand-navy-muted: #243256;
  --brand-yellow: #FFC400;
  --brand-yellow-hover: #E5B000;
  --brand-yellow-light: #FFF8E1;
  --brand-white: #FFFFFF;
  --brand-off-white: #F7F8FA;
  --brand-slate: #64748B;
  --brand-border: #E2E8F0;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background-color: #F7F8FA;
  color: #0B132B;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

/* Guard against WordPress core Gutenberg and classic styles */
p, ul, ol, figure {
  margin-top: 0;
  margin-bottom: 0;
}
a {
  text-decoration: none;
  color: inherit;
}
a:hover {
  text-decoration: none;
}

/* ==========================================================================
   PRECISE BRAND COLOR & LAYOUT SYSTEM
   Exact class targeting that locks colors without interfering with
   hover states, table striping, pseudo-elements, or opacity glows.
   ========================================================================== */

/* Primary Deep Navy (#0B132B) */
.bg-brand-navy,
.bg-\[\#0B132B\] {
  background-color: #0B132B !important;
}

/* Secondary Navy Blue (#1C2541) */
.bg-brand-navy-light,
.bg-\[\#1C2541\] {
  background-color: #1C2541 !important;
}

/* Muted Navy Blue (#243256) */
.bg-brand-navy-muted,
.bg-\[\#243256\] {
  background-color: #243256 !important;
}

/* Deepest Dark Navy for Footer (#070D1E) */
.bg-\[\#070D1E\],
footer {
  background-color: #070D1E !important;
}

/* Gradient Accent (#121E3E) */
.bg-\[\#121E3E\] {
  background-color: #121E3E !important;
}

/* Navy Opacity Variants */
.bg-brand-navy\/95 { background-color: rgba(11, 19, 43, 0.95) !important; }
.bg-brand-navy\/90 { background-color: rgba(11, 19, 43, 0.90) !important; }
.bg-brand-navy\/80 { background-color: rgba(11, 19, 43, 0.80) !important; }
.bg-brand-navy\/50 { background-color: rgba(11, 19, 43, 0.50) !important; }
.bg-brand-navy-light\/95 { background-color: rgba(28, 37, 65, 0.95) !important; }
.bg-brand-navy-light\/90 { background-color: rgba(28, 37, 65, 0.90) !important; }
.bg-brand-navy-light\/80 { background-color: rgba(28, 37, 65, 0.80) !important; }
.bg-brand-navy-light\/70 { background-color: rgba(28, 37, 65, 0.70) !important; }
.bg-brand-navy-light\/60 { background-color: rgba(28, 37, 65, 0.60) !important; }
.bg-brand-navy-light\/50 { background-color: rgba(28, 37, 65, 0.50) !important; }
.bg-brand-navy-muted\/60 { background-color: rgba(36, 50, 86, 0.60) !important; }

/* Yellow Brand Accents (#FFC400) */
.bg-brand-yellow,
.bg-\[\#FFC400\] {
  background-color: #FFC400 !important;
}

.bg-brand-yellow-hover:hover,
.hover\:bg-brand-yellow-hover:hover {
  background-color: #E5B000 !important;
}

.bg-brand-yellow-light {
  background-color: #FFF8E1 !important;
}

/* Translucent Ambient Glows - NEVER solid */
.bg-brand-yellow\/10 { background-color: rgba(255, 196, 0, 0.10) !important; }
.bg-brand-yellow\/15 { background-color: rgba(255, 196, 0, 0.15) !important; }
.bg-brand-yellow\/20 { background-color: rgba(255, 196, 0, 0.20) !important; }
.bg-blue-600\/10 { background-color: rgba(37, 99, 235, 0.10) !important; }

/* Off-White & Background Colors */
.bg-brand-off-white,
.bg-\[\#F7F8FA\] {
  background-color: #F7F8FA !important;
}

.bg-\[\#FAFAFC\] { background-color: #FAFAFC !important; }
.bg-\[\#F8FBFA\] { background-color: #F8FBFA !important; }
.bg-\[\#F0FDF8\] { background-color: #F0FDF8 !important; }

/* Text Color Locks */
.text-brand-navy,
.text-\[\#0B132B\] {
  color: #0B132B !important;
}

.text-brand-yellow,
.text-\[\#FFC400\] {
  color: #FFC400 !important;
}

.text-brand-slate,
.text-\[\#64748B\] {
  color: #64748B !important;
}

/* Border Color Locks */
.border-brand-navy {
  border-color: #0B132B !important;
}

.border-brand-navy-light {
  border-color: #1C2541 !important;
}

.border-brand-yellow {
  border-color: #FFC400 !important;
}

.border-brand-border {
  border-color: #E2E8F0 !important;
}

.border-white\/10 { border-color: rgba(255, 255, 255, 0.10) !important; }
.border-white\/20 { border-color: rgba(255, 255, 255, 0.20) !important; }
.border-brand-yellow\/20 { border-color: rgba(255, 196, 0, 0.20) !important; }
.border-brand-yellow\/30 { border-color: rgba(255, 196, 0, 0.30) !important; }
.border-brand-yellow\/40 { border-color: rgba(255, 196, 0, 0.40) !important; }
.border-brand-yellow\/50 { border-color: rgba(255, 196, 0, 0.50) !important; }
.border-brand-yellow\/60 { border-color: rgba(255, 196, 0, 0.60) !important; }

/* Pricing Table Alternating Row Colors exactly matching Live Preview */
.pricing-table tr:nth-child(even) td {
  background-color: #F7F8FA !important;
}
.pricing-table tr:nth-child(odd) td {
  background-color: #FFFFFF !important;
}
.pricing-table tr:hover td {
  background-color: rgba(255, 248, 225, 0.5) !important;
}
.pricing-table thead tr th {
  background-color: #0B132B !important;
  color: #FFFFFF !important;
}

/* Active Nav Underline Bar (ensures Home link shows as thin line, NEVER solid box) */
.after\:bg-brand-yellow::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #FFC400 !important;
}

/* Header & Section Gap Guards to prevent white separation lines */
header#main-header {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.admin-bar header#main-header {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  .admin-bar header#main-header {
    top: 46px !important;
  }
}
section#hero,
section {
  margin-top: 0 !important;
}
footer#contact-footer {
  margin-top: 0 !important;
}

/* Gradient Fallbacks */
.from-brand-navy {
  --tw-gradient-from: #0B132B var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(11 19 43 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-brand-navy {
  --tw-gradient-to: #0B132B var(--tw-gradient-to-position) !important;
}

.to-brand-navy-light {
  --tw-gradient-to: #1C2541 var(--tw-gradient-to-position) !important;
}

.via-\[\#121E3E\] {
  --tw-gradient-to: rgb(18 30 62 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), #121E3E var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

/* Elementor Hard Overrides */
.elementor-section.bg-brand-navy,
.elementor-section.bg-brand-navy > .elementor-container,
.elementor-top-section.bg-brand-navy {
  background-color: #0B132B !important;
}

.elementor-section.bg-brand-navy-light,
.elementor-section.bg-brand-navy-light > .elementor-container,
.elementor-top-section.bg-brand-navy-light {
  background-color: #1C2541 !important;
}

.elementor-section.bg-\[\#070D1E\],
.elementor-top-section.bg-\[\#070D1E\] {
  background-color: #070D1E !important;
}


/* Eyebrow Label Standard Pattern */
.eyebrow-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFC400;
  background-color: rgba(255, 196, 0, 0.12);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  margin-bottom: 0.75rem;
}

.eyebrow-label.on-light {
  color: #0B132B;
  background-color: #E2E8F0;
}

.eyebrow-label.yellow-solid {
  color: #0B132B;
  background-color: #FFC400;
}

/* Pulsing Live Dot */
.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #10B981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulse-dot-anim 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes pulse-dot-anim {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Image Tag Overlays */
.image-tag-overlay {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(11, 19, 43, 0.88);
  backdrop-filter: blur(6px);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Accordion styles */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out, padding 0.35s ease-out, opacity 0.3s ease-out;
  opacity: 0;
}
.accordion-item.active .accordion-content {
  max-height: 800px;
  opacity: 1;
}
.accordion-item.active .accordion-icon {
  transform: rotate(45deg);
}
.accordion-item.active svg.accordion-icon,
.accordion-item.active .accordion-icon svg {
  transform: rotate(180deg);
}

/* Hero Grid Pattern */
.hero-grid-pattern {
  background-size: 36px 36px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

/* Font Display */
.font-display {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
}

/* Interactive Symptom Diagnostic Cards */
.symptom-card.selected {
  border-color: #FFC400 !important;
  background-color: #FFFDF0 !important;
  box-shadow: 0 4px 15px rgba(255, 196, 0, 0.25) !important;
}
.symptom-card.selected .check-circle {
  background-color: #FFC400 !important;
  border-color: #FFC400 !important;
  color: #0B132B !important;
}

@keyframes pulseGreen {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Striped Table Row */
.pricing-table tr:nth-child(even) {
  background-color: #F7F8FA;
}
.pricing-table tr:nth-child(odd) {
  background-color: #FFFFFF;
}

/* Form Inputs */
.form-input-custom {
  width: 100%;
  border: 1.5px solid #E2E8F0;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #0B132B;
  background-color: #FFFFFF;
  transition: all 0.2s ease;
}
.form-input-custom:focus {
  outline: none;
  border-color: #0B132B;
  box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.35);
}

/* WordPress Editable Image Wrapper */
.wp-editable-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.wp-editable-img:hover {
  transform: scale(1.02);
}

.shadow-glow-yellow {
  box-shadow: 0 0 25px rgba(255, 196, 0, 0.45);
}