/* ==========================================================================
   Rayu Logistic — Dark Neon Theme
   Loaded AFTER style.css + responsive.css so it overrides the base look.
   Palette: deep navy/black surfaces, neon cyan + magenta accents.
   ========================================================================== */
:root {
    /* Dark theme: tells the browser to render native UI (autofill dropdowns,
       scrollbars, date pickers, select popups) dark instead of light. */
    color-scheme: dark;
    --red:       #ff2bd6;   /* primary accent → neon magenta (keeps btn-red etc. working) */
    --red-2:     #29e1ff;   /* secondary accent → neon cyan */
    --red-dark:  #d81fb8;
    --neon-cyan: #29e1ff;
    --neon-pink: #ff2bd6;
    --neon-purple:#a24bff;
    --black:     #0a0a16;   /* dark surface */
    --black-2:   #10101f;
    --ink:       #05050d;   /* page background */
    --panel:     #10101f;
    --panel-2:   #14142a;
    --line:      rgba(130,150,240,.16);
    --text:      #e9ecf8;
    --text-dim:  #9aa3c8;
    --gray:      #9aa3c8;
    --gray-light:#0d0d1c;
    --gray-border: rgba(130,150,240,.16);
    --white:     #05050d;
    --grad: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink));
    --grad-135: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink));
    --glow-cyan: 0 0 22px rgba(41,225,255,.45);
    --glow-pink: 0 0 22px rgba(255,43,214,.45);
    --shadow-sm: 0 6px 22px rgba(0,0,0,.5);
    --shadow-md: 0 14px 40px rgba(0,0,0,.55);
    --shadow-lg: 0 26px 70px rgba(0,0,0,.6);
}

/* ---------- Base ---------- */
body { background: var(--ink); color: var(--text); }
h1,h2,h3,h4,h5,.heading,.section-title { color: var(--text); }
p { color: inherit; }
.text-muted { color: var(--text-dim) !important; }
a { color: var(--neon-cyan); }
a:hover { color: var(--neon-pink); }

.bg-light-gray { background: #0a0a18; }
.section-intro { color: var(--text-dim); }
.section-label { color: var(--neon-cyan); text-shadow: 0 0 14px rgba(41,225,255,.5); }
.accent-line { background: var(--grad); box-shadow: var(--glow-cyan); }

/* Neon dotted page ambience */
body::before {
    content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(circle at 15% 12%, rgba(41,225,255,.10), transparent 32%),
      radial-gradient(circle at 85% 85%, rgba(255,43,214,.10), transparent 34%),
      radial-gradient(circle at 60% 30%, rgba(162,75,255,.07), transparent 40%);
}

/* ---------- Buttons ---------- */
.btn-red, .btn-quote {
    background: var(--grad); border: none; color: #05050d !important; font-weight: 700;
    box-shadow: 0 8px 26px rgba(255,43,214,.35);
}
.btn-red:hover, .btn-quote:hover { filter: brightness(1.08); box-shadow: 0 12px 34px rgba(41,225,255,.5); color:#05050d !important; }
.btn-outline-red {
    background: transparent; color: var(--neon-cyan) !important; border: 2px solid var(--neon-cyan);
    box-shadow: inset 0 0 12px rgba(41,225,255,.12), 0 0 14px rgba(41,225,255,.18);
}
.btn-outline-red:hover { background: var(--neon-cyan); color: #05050d !important; box-shadow: var(--glow-cyan); }
.btn-outline-white { border-color: rgba(255,255,255,.5); color:#fff !important; }
/* Light CTA button.
   Bootstrap's `.btn:hover { background-color: var(--bs-btn-hover-bg) }` (transparent)
   out-specifies a single-class background rule, which wiped the white fill on hover
   and left dark text sitting on the dark CTA band. Pin the fill for every state. */
.btn-light-cta,
.btn-light-cta:link,
.btn-light-cta:visited {
    background: #fff;
    border: 2px solid #fff;
    color: #0a0a16 !important;
    font-weight: 700;
}
.btn-light-cta:hover,
.btn-light-cta:focus,
.btn-light-cta:focus-visible,
.btn-light-cta:active {
    background-color: transparent;
    background-image: var(--grad);
    border-color: transparent;
    color: #05050d !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 34px rgba(41, 225, 255, .45), var(--glow-pink);
}
.read-more { color: var(--neon-cyan); }
.read-more:hover { color: var(--neon-pink); }

/* ---------- Topbar ---------- */
.topbar { background: linear-gradient(90deg, #12002a, #001a2e); border-bottom: 1px solid rgba(41,225,255,.2); }
/* Call Now pill.
   style.css has light-theme leftovers that out-specify the plain `.topbar-call`
   rules: `.topbar-call:hover { background:#fff }` (0-2-0) beats
   `.topbar-call { background: var(--grad) }` (0-1-0), and
   `.topbar a:hover { color:#ffe3e3 }` (0-2-1) beats `.topbar-call:hover` (0-2-0).
   Together they produced near-white text on a white pill. Adding the ancestor
   lifts these to 0-3-0 / 0-3-1 so the gradient and dark label hold on hover. */
.topbar .topbar-call {
    background: var(--grad);
    color: #05050d;
}
.topbar .topbar-call:hover,
.topbar .topbar-call:focus {
    background: var(--grad);
    color: #05050d;
    filter: brightness(1.12);
    box-shadow: var(--glow-cyan);
}
.topbar a.topbar-call:hover,
.topbar a.topbar-call:focus { color: #05050d; }

/* ---------- Header / Nav ---------- */
.site-header { background: rgba(8,8,20,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); box-shadow: 0 2px 24px rgba(0,0,0,.5); }
.site-header.scrolled { box-shadow: 0 6px 30px rgba(41,225,255,.10); }
.navbar-nav .nav-link { color: var(--text); }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--neon-cyan); }
.navbar-nav .nav-link::after { background: var(--grad); box-shadow: var(--glow-cyan); }
.brand-primary { color: var(--neon-cyan); text-shadow: 0 0 16px rgba(41,225,255,.55); }
.brand-secondary { color: var(--neon-pink); text-shadow: 0 0 14px rgba(255,43,214,.5); }
.navbar-toggler { color: var(--neon-cyan); }
.navbar-toggler-icon { filter: invert(1) hue-rotate(150deg); }
@media (max-width: 991.98px){ .navbar-collapse { background: var(--panel); border: 1px solid var(--line); } .navbar-nav .nav-item { border-color: var(--line); } }

/* ---------- Hero ---------- */
.hero {
    background:
      radial-gradient(circle at 78% 40%, rgba(255,43,214,.16), transparent 46%),
      radial-gradient(circle at 20% 30%, rgba(41,225,255,.14), transparent 44%),
      linear-gradient(135deg, #060616 0%, #08081a 55%, #0a0420 100%);
    background-color: #07071a;
}
.hero h1 { color: #fff; text-shadow: 0 0 30px rgba(41,225,255,.25); }
.hero h1 .red { color: var(--neon-cyan); text-shadow: 0 0 24px rgba(41,225,255,.5); background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-desc { color: var(--text-dim); }
.hero-visual img { filter: drop-shadow(0 20px 50px rgba(255,43,214,.35)); }
.hero::before { background: radial-gradient(circle at 30% 30%, rgba(41,225,255,.18), transparent 70%); }
.hero::after  { background: radial-gradient(circle at 50% 50%, rgba(255,43,214,.14), transparent 70%); }

/* ---------- Trust bar ---------- */
.trust-bar { background: rgba(10,10,26,.85); border: 1px solid rgba(41,225,255,.18); box-shadow: 0 0 40px rgba(41,225,255,.08), var(--shadow-lg); }
.trust-item { border-color: rgba(130,150,240,.12); }
.trust-icon { color: var(--neon-cyan); text-shadow: var(--glow-cyan); }
.trust-item h4 { color:#fff; }

/* ---------- Panels (service / fleet / blog / why / form / side) ---------- */
.service-card, .fleet-card, .blog-card, .form-card, .side-card, .contact-info-card, .quote-form-card {
    background: var(--panel); border: 1px solid var(--line); color: var(--text);
}
.service-card { box-shadow: var(--shadow-sm); }
.service-card:hover, .fleet-card:hover, .blog-card:hover {
    border-color: rgba(41,225,255,.5);
    box-shadow: 0 0 0 1px rgba(41,225,255,.3), 0 18px 50px rgba(41,225,255,.12);
}
.service-card h4, .fleet-body h4, .why-card h4, .side-card h4 { color: var(--text); }
.service-card p, .fleet-body p, .why-card p, .blog-body p { color: var(--text-dim); }
.service-icon { background: rgba(41,225,255,.10); color: var(--neon-cyan); box-shadow: inset 0 0 14px rgba(41,225,255,.18); }
.service-card:hover .service-icon { background: var(--grad); color:#05050d; }

/* Why choose icons */
.why-icon { background: var(--grad-135); box-shadow: 0 10px 28px rgba(255,43,214,.35); }

/* Fleet: keep photo strip light so white-cutout trucks read; neon banner shots override inline */
.fleet-img { background: #0c0c1c; border-bottom: 1px solid var(--line); }
.fleet-cap-tag { background: var(--grad); color:#05050d; font-weight:700; }

/* Blog */
.blog-body h4 a { color: var(--text); }
.blog-body h4 a:hover { color: var(--neon-cyan); }
.blog-cat { background: var(--grad); color:#05050d; font-weight:700; }
.blog-date { color: var(--text-dim); }
.blog-img { background: linear-gradient(135deg, #12122a, #05050d); color: rgba(41,225,255,.4); }

/* ---------- Tracking ---------- */
.track-section { background: linear-gradient(135deg, #0a0420, #06101f); }
.track-form { background: var(--panel-2); border: 1px solid rgba(41,225,255,.25); }
.track-form input { background: transparent; color: var(--text); }
.track-form input::placeholder { color: var(--text-dim); }
.track-result { background: var(--panel); color: var(--text); border: 1px solid var(--line); }
.track-result h3 { color:#fff; }
.track-grid .item { border-color: var(--line); }
.track-grid .item span { color: var(--text-dim); }
.track-grid .item strong { color: var(--text); }
.track-progress { background: rgba(255,255,255,.08); }
.track-progress-bar { background: var(--grad); box-shadow: var(--glow-cyan); }
.track-error { background: var(--panel); color: var(--text); border-left-color: var(--neon-pink); }

/* ---------- About ---------- */
.exp-badge { background: var(--grad-135); box-shadow: 0 16px 40px rgba(255,43,214,.4); }
.check-list li { color: var(--text); }
.check-list li i { color: var(--neon-cyan); }

/* ---------- Stats ---------- */
.stats-section { background: linear-gradient(120deg, #0a0420 0%, #0a0a1e 50%, #06101f 100%); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat-num { color:#fff; text-shadow: 0 0 26px rgba(41,225,255,.3); }
.stat-num .plus { color: var(--neon-pink); }
.stat-num .pct { color: var(--neon-cyan); }
.stat-label { color: var(--text-dim); }

/* ---------- CTA banner ---------- */
.cta-banner { background: linear-gradient(100deg, #12002e, #001a2e); border-top:1px solid rgba(41,225,255,.25); border-bottom:1px solid rgba(255,43,214,.25); }
.cta-icon { background: var(--grad); color:#05050d; }
.cta-text h2 { color:#fff; }

/* ---------- Capabilities photo tiles ---------- */
.feature-photo { border: 1px solid var(--line); box-shadow: 0 0 0 1px rgba(41,225,255,.0); }
.feature-photo:hover { box-shadow: 0 0 0 1px rgba(41,225,255,.4), 0 16px 44px rgba(41,225,255,.14); }
.feature-photo .fp-caption .fp-bar { background: var(--grad); }

/* ---------- Forms ---------- */
.form-control, .form-select { background: var(--panel-2); border: 1.5px solid var(--line); color: var(--text); }
.form-control::placeholder { color: var(--text-dim); }
.form-control:focus, .form-select:focus { background: var(--panel-2); border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgba(41,225,255,.18); color:#fff; }
.form-label { color: var(--text); }

/* Chrome/Safari paint autofilled fields with their own opaque light background,
   which no `background` declaration can override. Repaint them with a huge inset
   shadow and force the text colour so filled inputs stay on-theme. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active,
.form-select:-webkit-autofill,
.form-select:-webkit-autofill:hover,
.form-select:-webkit-autofill:focus,
.track-form input:-webkit-autofill,
.track-form input:-webkit-autofill:hover,
.track-form input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px var(--panel-2) inset;
            box-shadow: 0 0 0 1000px var(--panel-2) inset;
    caret-color: var(--text);
    border-color: var(--line);
    /* Chrome only repaints autofill styling after a transition; stall it forever. */
    transition: background-color 100000s ease-in-out 0s, color 100000s ease-in-out 0s;
}
.form-control:-webkit-autofill:focus,
.form-select:-webkit-autofill:focus,
textarea:-webkit-autofill:focus {
    border-color: var(--neon-cyan);
    -webkit-box-shadow: 0 0 0 1000px var(--panel-2) inset, 0 0 0 3px rgba(41, 225, 255, .18);
            box-shadow: 0 0 0 1000px var(--panel-2) inset, 0 0 0 3px rgba(41, 225, 255, .18);
}
.track-form input:-webkit-autofill,
.track-form input:-webkit-autofill:hover,
.track-form input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--panel-2) inset;
            box-shadow: 0 0 0 1000px var(--panel-2) inset;
}
.contact-info-card { background: linear-gradient(160deg,#0c0c20,#0a0418); }
.contact-info-item .ci-icon { background: var(--grad); color:#05050d; }
.contact-info-item span { color: var(--text-dim); }
.contact-info-item a, .contact-info-item strong { color: var(--text); }
.alert-success-custom { background: rgba(41,225,255,.10); color:#8ff0ff; border-left-color: var(--neon-cyan); }
.alert-error-custom { background: rgba(255,43,214,.10); color:#ffb3ee; border-left-color: var(--neon-pink); }

/* ---------- Quote section ---------- */
.quote-section { background: radial-gradient(circle at 12% 20%, rgba(41,225,255,.08), transparent 42%), radial-gradient(circle at 88% 80%, rgba(255,43,214,.08), transparent 44%), #08081a; }
.quote-section::before { background: radial-gradient(circle, rgba(41,225,255,.14), transparent 70%); }
.quote-form-card { box-shadow: 0 0 0 1px rgba(41,225,255,.2), var(--shadow-lg); }
.quote-form-body .form-control,
.quote-form-body .form-select { background: var(--panel-2); }

/* style.css carries a light-theme leftover, `.quote-form-body .form-control:focus
   { background: #fff }`, at specificity 0-3-0 — higher than this theme's plain
   `.form-control:focus` (0-2-0). It won on focus, turning the field white while
   the dark theme's `color:#fff` still applied, so anything typed was invisible
   white-on-white. Match its specificity to take the field back. */
.quote-form-body .form-control:focus,
.quote-form-body .form-select:focus {
    background: var(--panel-2);
    color: #fff;
    border-color: var(--neon-cyan);
    box-shadow: 0 0 0 3px rgba(41, 225, 255, .18);
}

.quote-form-head { background: var(--grad-135); color:#05050d; }
.quote-form-head h3, .quote-form-head p { color:#05050d; }
.quote-form-head .qh-icon { background: rgba(5,5,13,.15); }
.quote-info .quote-points .qp-icon { background: var(--grad); color:#05050d; box-shadow: var(--glow-pink); }
.quote-info .quote-points h5 { color: var(--text); }
.quote-info .quote-points p { color: var(--text-dim); }

/* ---------- City / content pages ---------- */
.content-block { color: var(--text-dim); }
.content-block h2, .content-block h3 { color: var(--text); }
.content-block ul li { color: var(--text); }
.content-block ul li::before { color: var(--neon-cyan); }
.route-tag { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); }
.route-tag i { color: var(--neon-pink); }
.side-list a { color: var(--text-dim); }
.side-list a:hover { color: var(--neon-cyan); }
.article-body { color: var(--text-dim); }
.article-body h3 { color: var(--text); }
.article-meta { color: var(--text-dim); }
.accordion-button { background: var(--panel-2) !important; color: var(--text) !important; box-shadow:none !important; }
.accordion-button:not(.collapsed) { color: var(--neon-cyan) !important; }
.accordion-body { background: var(--panel); color: var(--text-dim); }
.accordion-item { background: var(--panel) !important; border-color: var(--line) !important; }

/* ---------- Page hero (inner) ---------- */
.page-hero { background: radial-gradient(circle at 80% 40%, rgba(255,43,214,.16), transparent 46%), linear-gradient(135deg, #0a0420, #06101f); }
.breadcrumb-nav { color: var(--text-dim); }
.breadcrumb-nav a { color:#fff; }
.breadcrumb-nav span { color: var(--neon-cyan); }

/* ---------- City chips ---------- */
.city-chip { background: var(--panel); border: 1px solid var(--line); color: var(--text); }
.city-chip i { color: var(--neon-cyan); }
.city-chip:hover { background: var(--grad); border-color: transparent; color:#05050d; box-shadow: var(--glow-pink); }
.city-chip:hover i { color:#05050d; }

/* ---------- Footer ---------- */
.site-footer { background: #06060f; border-top: 1px solid var(--line); }
.footer-title::after { background: var(--grad); }
.footer-social a { background: rgba(41,225,255,.08); }
.footer-social a:hover { background: var(--grad); box-shadow: var(--glow-cyan); }
.footer-links a:hover { color: var(--neon-cyan); }
.footer-contact i { color: var(--neon-cyan); }

/* ---------- Back to top + FABs ---------- */
.back-to-top { background: var(--grad); box-shadow: 0 8px 22px rgba(255,43,214,.45); }
.fab-call { background: var(--grad); }

/* ---------- Service photo cards (services page) ---------- */
.service-photo-card .sp-body h4 { color: var(--text); }
.service-photo-card .sp-body p { color: var(--text-dim); }

/* Service detail hero image */
.service-hero-img { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 0 0 1px rgba(41,225,255,.2), var(--shadow-md); aspect-ratio: 16/7; }
.service-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-hero-img .service-hero-badge {
    position: absolute; left: 16px; bottom: 16px; z-index: 2;
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--grad); color: #05050d; font-weight: 700;
    padding: 9px 18px; border-radius: 30px; box-shadow: var(--glow-pink); font-size: .95rem;
}
.article-body.content-block h2 { font-size: 1.55rem; margin: 32px 0 12px; }
.article-body.content-block ol { margin: 0 0 20px; padding-left: 22px; color: var(--text-dim); }
.article-body.content-block ol li { margin-bottom: 8px; }

/* Divider lines */
hr { border-color: var(--line); }
.text-white, .section-title.text-white { color:#fff !important; }