/* ================================================================
   PACKZEN — DG AIR FREIGHT PREMIUM THEME OVERRIDE
  Deep Command Navy  +  PackZen Trust Green
   Drop this AFTER your style.css  <link rel="stylesheet" href="theme-dg.css">
   ================================================================ */

/* ────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS  — overrides every color variable in style.css
   ──────────────────────────────────────────────────────────────── */
:root {
  --gold: #16A34A;
  --gold-bright: #22C55E;
  --gold-gradient: linear-gradient(135deg, #15803D 0%, #16A34A 55%, #22C55E 100%);
  --gold-glow: 0 8px 32px rgba(34, 197, 94, 0.44);
  --gold-tint: #F0FDF4;

  --accent: #16A34A;
  --accent-hover: #15803D;
  --accent-light: #DCFCE7;
  --accent-gradient: linear-gradient(135deg, #15803D 0%, #16A34A 55%, #22C55E 100%);

  --shadow-gold: 0 8px 32px rgba(34, 197, 94, 0.42);
  --shadow-blue: 0 8px 32px rgba(6, 14, 36, 0.38);

  --navy-deep: #060e24;
  --navy-mid: #0c1b3a;

  --bg-primary: #ffffff;
  --bg-secondary: #f4f7fb;
  --bg-tertiary: #e8eef8;
}
/* ────────────────────────────────────────────────────────────────
   2. GLOBAL RESET HELPERS
   ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ────────────────────────────────────────────────────────────────
   3. NAVBAR
   ──────────────────────────────────────────────────────────────── */
.navbar {
  background: #060e24 !important;
  border-bottom: 2px solid rgba(34, 197, 94, 0.50) !important;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.50) !important;
}

.nav-links a::after { background: #22C55E !important; }
.nav-links a:hover  { color: #fff !important; }

/* Nav avatar */
.nav-avatar {
  background: #16a34a !important;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.40) !important;
}

/* Login / CTA button in nav — DG Air Freight rectangular style */
.nav-auth-btn {
  background: #16a34a !important;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.44) !important;
  border-radius: 6px !important;
  padding: 0.5rem 1.4rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  border: none !important;
  transition: all 0.22s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
.nav-auth-btn:hover {
  box-shadow: 0 8px 26px rgba(34, 197, 94, 0.58) !important;
  transform: translateY(-1px) !important;
}

/* User dropdown accent */
.user-dropdown          { border-top-color: #16A34A !important; }
.user-dropdown a:hover  { color: #16A34A !important; padding-left: 1.4rem; }

/* ────────────────────────────────────────────────────────────────
   4. HERO SECTION
   ──────────────────────────────────────────────────────────────── */
.hero-badge {
  background: rgba(34, 197, 94, 0.20) !important;
  border-color: rgba(34, 197, 94, 0.50) !important;
}

/* ────────────────────────────────────────────────────────────────
   5. PREMIUM BUTTONS  — the DG Air Freight look
      Rectangular · Bold · Deep green · Crisp shadows
   ──────────────────────────────────────────────────────────────── */

/* ── Primary CTA ── */
.btn-primary {
  background: #16a34a !important;
  box-shadow: 0 6px 22px rgba(34, 197, 94, 0.42) !important;
  border-radius: 8px !important;
  border: none !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  padding: 0.9rem 1.9rem !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.22s, box-shadow 0.22s !important;
}
.btn-primary::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -75% !important;
  width: 50% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent) !important;
  transform: skewX(-20deg) !important;
  transition: left 0.5s !important;
  pointer-events: none !important;
}
.btn-primary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 36px rgba(34, 197, 94, 0.56) !important;
}
.btn-primary:hover::after { left: 130% !important; }

/* ── Form NEXT button ── */
.btn-next {
  background: #16a34a !important;
  box-shadow: 0 5px 18px rgba(34, 197, 94, 0.38) !important;
  border-radius: 8px !important;
  border: none !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  transition: transform 0.22s, box-shadow 0.22s !important;
  position: relative !important;
  overflow: hidden !important;
}
.btn-next:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(34, 197, 94, 0.54) !important;
}

/* ── Pay / Confirm booking ── */
.btn-pay {
  background: #16a34a !important;
  box-shadow: 0 6px 22px rgba(34, 197, 94, 0.42) !important;
  border-radius: 8px !important;
  border: none !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  transition: transform 0.22s, box-shadow 0.22s !important;
  position: relative !important;
  overflow: hidden !important;
}
.btn-pay:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 34px rgba(34, 197, 94, 0.56) !important;
}

/* ── Leave Review button ── */
.leave-review-btn {
  background: #16a34a !important;
  box-shadow: 0 6px 22px rgba(34, 197, 94, 0.42) !important;
  border-radius: 8px !important;
  border: none !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.leave-review-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 34px rgba(34, 197, 94, 0.56) !important;
}

/* ── Auth / OTP button ── */
.btn-auth {
  background: #16a34a !important;
  box-shadow: 0 5px 18px rgba(34, 197, 94, 0.38) !important;
  border-radius: 8px !important;
  border: none !important;
  font-weight: 700 !important;
  transition: transform 0.22s, box-shadow 0.22s !important;
}
.btn-auth:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(34, 197, 94, 0.50) !important;
}

/* ── Send OTP ── */
.btn-send-otp {
  background: #16a34a !important;
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.40) !important;
  border-radius: 8px !important;
}

/* ── Promo ── */
.btn-promo {
  background: #16a34a !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.btn-promo:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.40) !important;
}

/* ── Copy / small action buttons ── */
.btn-copy, .tob-btn-track {
  background: #16a34a !important;
  border-radius: 6px !important;
}

/* ── Track / chat ── */
.bs-track-btn, .btn-open-chat {
  background: #16a34a !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}

/* ── Final CTA call button ── */
.fcta-call {
  background: #16a34a !important;
  box-shadow: 0 6px 22px rgba(34, 197, 94, 0.42) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.fcta-call:hover { box-shadow: 0 14px 36px rgba(34, 197, 94, 0.58) !important; }

/* ── Date "pick another date" button ── */
.date-more-btn {
  color: #16A34A !important;
  background: #F0FDF4 !important;
  border-color: rgba(34, 197, 94, 0.28) !important;
  border-radius: 6px !important;
}
.date-more-btn:hover { background: #16A34A !important; color: #fff !important; }

/* ── Modal action buttons (confirm/primary) ── */
.am-btn-primary, .am-btn-confirm {
  background: #16a34a !important;
  box-shadow: 0 5px 18px rgba(34, 197, 94, 0.38) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  border: none !important;
  position: relative !important;
  overflow: hidden !important;
}
.am-btn-primary:hover, .am-btn-confirm:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 28px rgba(34, 197, 94, 0.50) !important;
}

/* ── Confirmation card copy / invoice ── */
.cc-copy-btn {
  background: #16a34a !important;
  border-radius: 6px !important;
}
.cc-copy-btn:hover { box-shadow: 0 4px 12px rgba(34, 197, 94, 0.36) !important; }
.cc-btn-invoice {
  background: #16a34a !important;
  border: none !important;
}

/* ── Chat send button ── */
.btn-send {
  background: #16a34a !important;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.36) !important;
}

/* ── Pricing CTA link ── */
.pricing-section .btn-primary { display: inline-flex !important; }

/* ────────────────────────────────────────────────────────────────
   6. STATS BAR
   ──────────────────────────────────────────────────────────────── */
.stats-bar   { border-top: 4px solid #22C55E !important; }
.stat-suffix { color: #22C55E !important; }
.stat-number { color: #060e24 !important; }

/* ────────────────────────────────────────────────────────────────
   7. MARQUEE TICKER
   ──────────────────────────────────────────────────────────────── */
.marquee-wrap { border-bottom-color: rgba(34, 197, 94, 0.28) !important; }
.marquee-track .dot { color: #22C55E !important; }

/* ────────────────────────────────────────────────────────────────
   8. SECTION TAGS  (the little pill labels above headings)
   ──────────────────────────────────────────────────────────────── */
.section-tag:not(.light) {
  background: #F0FDF4 !important;
  color: #16A34A !important;
  border-color: rgba(34, 197, 94, 0.30) !important;
}
.section-tag.light {
  background: rgba(34, 197, 94, 0.18) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(34, 197, 94, 0.40) !important;
}
/* Override inline-style color on the quote-section tag */
.quote-section .section-tag {
  background: #F0FDF4 !important;
  color: #16A34A !important;
  border-color: rgba(34, 197, 94, 0.30) !important;
}

/* ────────────────────────────────────────────────────────────────
   9. BOOKING FORM — step header, progress, indicators
   ──────────────────────────────────────────────────────────────── */
.step-header::before {
  background: #16a34a !important;
}
.step-progress-fill {
  background: #16a34a !important;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.60) !important;
}
.step-dot.active .dot-icon {
  background: #16A34A !important;
  border-color: #4ADE80 !important;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.28) !important;
}
.step-dot.done .dot-icon { border-color: #4ADE80 !important; }

/* ── Field inputs ── */
.field-input:focus {
  border-color: #16A34A !important;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.10) !important;
}
.field-input.error { border-color: #ef4444 !important; }

/* ── Toggle switch ── */
.toggle input:checked + .slider { background: #16A34A !important; }

/* ── OTP boxes ── */
.otp-box:focus {
  border-color: #16A34A !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16) !important;
}

/* ── Move Type Cards ── */
.move-type-card:hover { border-color: #16A34A !important; }
.move-type-card.selected {
  border-color: #16A34A !important;
  background: #F0FDF4 !important;
  box-shadow: 0 8px 28px rgba(34, 197, 94, 0.18) !important;
}
.move-type-card.selected::after {
  background: #16a34a !important;
}

/* ── Date strip cards ── */
.date-card:hover { border-color: #16A34A !important; background: #F0FDF4 !important; }
.date-card.selected {
  background: #16a34a !important;
  border-color: #16A34A !important;
  box-shadow: 0 4px 18px rgba(34, 197, 94, 0.34) !important;
}
.date-card.today-card .dc-day { color: #16A34A !important; }
.dc-tag { background: #16A34A !important; }

/* ── Time slot buttons ── */
.time-slot-btn:hover  { border-color: #16A34A !important; background: #F0FDF4 !important; }
.time-slot-btn.selected {
  background: #16a34a !important;
  border-color: #16A34A !important;
  box-shadow: 0 4px 18px rgba(34, 197, 94, 0.34) !important;
}

/* ── House / size select cards ── */
.select-card:hover  { border-color: #16A34A !important; background: #F0FDF4 !important; }
.select-card.selected {
  border-color: #16A34A !important;
  background: #F0FDF4 !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14) !important;
}
.select-card.selected::after { color: #16A34A !important; }

/* ── Vehicle cards ── */
.vehicle-card:hover  { border-color: #16A34A !important; background: #F0FDF4 !important; }
.vehicle-card.selected {
  border-color: #16A34A !important;
  background: #F0FDF4 !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14) !important;
}
.vehicle-card.selected::after { color: #16A34A !important; }
.vc-rate { color: #16A34A !important; background: #F0FDF4 !important; }

/* ── Payment option cards ── */
.payment-opt:hover {
  border-color: rgba(34, 197, 94, 0.45) !important;
  transform: translateY(-2px) !important;
}
.payment-opt.selected {
  border-color: #16A34A !important;
  background: #F0FDF4 !important;
  box-shadow: 0 4px 18px rgba(34, 197, 94, 0.18) !important;
}
.po-badge:not(.save) { background: #16A34A !important; }
.po-amount { color: #16A34A !important; }

/* ── Furniture / item cards ── */
.furniture-card:has(input:checked),
.furniture-card.checked {
  border-color: #16A34A !important;
  background: #F0FDF4 !important;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.14) !important;
}
.furniture-card:has(input:checked) .fc-check,
.furniture-card.checked .fc-check { background: #16A34A !important; color: #fff !important; }
.qty-btn        { border-color: #16A34A !important; color: #16A34A !important; }
.qty-btn:hover  { background: #16A34A !important; color: #fff !important; }

/* ── Photo upload area ── */
.photo-upload-area:hover { border-color: #16A34A !important; background: #F0FDF4 !important; }
.upload-link    { color: #16A34A !important; }
.photo-thumb    { border-color: #16A34A !important; }

/* ── Price summary box ── */
.price-box {
    background: #16a34a !important;
  border-color: rgba(34, 197, 94, 0.22) !important;
}
.price-amount,
#livePrice { color: #16A34A !important; }
.advance-info   { border-top-color: rgba(34, 197, 94, 0.20) !important; }
.discount-row   { color: #16A34A !important; }

/* ── Promo input ── */
.promo-input:focus { border-color: #16A34A !important; }

/* ── T&C checkbox ── */
.tnc-row input[type="checkbox"] { accent-color: #16A34A !important; }
.tnc-row a { color: #16A34A !important; }

/* ── Quote perks checkmarks ── */
.perk-check {
  background: #16a34a !important;
}

/* ── Distance / intercity badges ── */
.distance-badge  { background: #F0FDF4 !important; color: #060e24 !important; }
.intercity-badge { border-left-color: #16A34A !important; }

/* ────────────────────────────────────────────────────────────────
   10. SERVICE CARDS
   ──────────────────────────────────────────────────────────────── */
.service-card::before {
  background: #16a34a !important;
}
.service-card:hover { border-color: rgba(34, 197, 94, 0.22) !important; }
.sc-badge {
  background: #16a34a !important;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.32) !important;
}
/* Home service banner tint */
.sc-banner-home { background: #16a34a !important; }

/* ────────────────────────────────────────────────────────────────
   11. HOW IT WORKS
   ──────────────────────────────────────────────────────────────── */
.hiw-step { border-top-color: #16A34A !important; }
.hiw-num {
  background: #16a34a !important;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.48) !important;
}
.hiw-connector { color: #16A34A !important; }

/* ────────────────────────────────────────────────────────────────
   12. WHY CHOOSE US CARDS
   ──────────────────────────────────────────────────────────────── */
.why-card:hover { border-bottom-color: #16A34A !important; }

/* ────────────────────────────────────────────────────────────────
   13. REVIEWS
   ──────────────────────────────────────────────────────────────── */
.review-card   { border-top-color: #16A34A !important; }
.review-stars  { color: #16A34A !important; }
.review-avatar {
  background: #16a34a !important;
}
.overall-rating { border-left-color: #16A34A !important; }
.or-stars  { color: #16A34A !important; }

/* ────────────────────────────────────────────────────────────────
   14. FAQ
   ──────────────────────────────────────────────────────────────── */
.faq-arrow            { color: #16A34A !important; }
.faq-item.open .faq-q {
  background: #F0FDF4 !important;
  color: #16A34A !important;
  border-left: 3px solid #16A34A !important;
}

/* ────────────────────────────────────────────────────────────────
   15. LOCAL SEO BLOCK
   ──────────────────────────────────────────────────────────────── */
.local-seo           { border-left-color: #16A34A !important; }
.local-seo h3        { color: #16A34A !important; }

/* ────────────────────────────────────────────────────────────────
   16. FOOTER
   ──────────────────────────────────────────────────────────────── */
.footer::before {
  background: #16a34a !important;
}
.footer-logo span { color: #22C55E !important; }

/* ────────────────────────────────────────────────────────────────
   17. TRACK ORDER BANNER (TOB)
   ──────────────────────────────────────────────────────────────── */
.tob-inner            { border-left-color: #16A34A !important; }
.tob-progress-fill    { background: #16A34A !important; }
.tob-step.active .tob-step-dot {
  background: #16A34A !important;
 animation: greenPulse 2s infinite !important;
}
@keyframes greenPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
  50%       { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

/* ────────────────────────────────────────────────────────────────
   18. MODALS
   ──────────────────────────────────────────────────────────────── */
.modal-box     { border-top-color: #16A34A !important; }
.bottom-sheet  { border-top-color: #16A34A !important; }
.auth-link     { color: #16A34A !important; }

.dash-tab.active {
  color: #16A34A !important;
  border-bottom-color: #16A34A !important;
}

/* Referral */
.referral-code-row { border-color: #16A34A !important; }
.referral-code-text { color: #16A34A !important; }

/* Bottom-sheet options */
.bs-option:hover {
  border-color: #16A34A !important;
  background: #F0FDF4 !important;
}
.bs-option.selected {
  border-color: #16A34A !important;
  background: #F0FDF4 !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14) !important;
}
.bs-option.selected .bs-opt-check { background: #16A34A !important; }
.bs-opt-price  { color: #16A34A !important; }
.bs-id strong  { color: #16A34A !important; }

/* Confirmation card */
.cc-amount-inline { color: #16A34A !important; }
.cc-loc-dot.pickup { background: #16A34A !important; }

/* ────────────────────────────────────────────────────────────────
   19. PRICING TABLE
   ──────────────────────────────────────────────────────────────── */
.pricing-table thead tr {
  background: #16a34a !important;
}
.pricing-table thead th:last-child { color: #4ADE80 !important; }
.pricing-table tbody tr:hover { background: #F0FDF4 !important; }
.pricing-table td:last-child { color: #16A34A !important; }
.pricing-note { border-left-color: #16A34A !important; }

/* ────────────────────────────────────────────────────────────────
   20. CHAT MODAL
   ──────────────────────────────────────────────────────────────── */
.chat-header { border-bottom-color: #16A34A !important; }
.chat-bubble.mine {
  background: #16a34a !important;
}

/* ────────────────────────────────────────────────────────────────
   21. FOCUS RING  — accessibility consistent with green theme
   ──────────────────────────────────────────────────────────────── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline-color: #22C55E !important;
}

/* ────────────────────────────────────────────────────────────────
   22. FLOATING CALL BUTTON  — already red-ish, make it match exactly
   ──────────────────────────────────────────────────────────────── */
.float-call {
  background: #16a34a !important;
  box-shadow: 0 6px 26px rgba(34, 197, 94, 0.50) !important;
}

/* ────────────────────────────────────────────────────────────────
   23. TOAST NOTIFICATION
   ──────────────────────────────────────────────────────────────── */
.toast-msg {
  background: #16a34a !important;
  box-shadow: 0 8px 28px rgba(34, 197, 94, 0.44) !important;
}

/* ────────────────────────────────────────────────────────────────
   24. INLINE `<style>` TAG OVERRIDES
       The HTML head contains a <style> block with some blue colors.
       !important on external CSS overrides them cleanly.
   ──────────────────────────────────────────────────────────────── */

/* Step numbers in "How it works" section (originally blue #3b82f6) */
.hiw-num { background: #16a34a !important; }

/* FAQ arrow (originally blue) */
.faq-arrow { color: #16A34A !important; }
.faq-item.open .faq-q { background: rgba(34, 197, 94, 0.07) !important; }

/* Pricing table (originally blue header) */
.pricing-table thead tr {
  background: #16a34a !important;
}
.pricing-table td:last-child { color: #16A34A !important; }
.pricing-note { border-left-color: #16A34A !important; }

/* Final CTA call button (was blue in inline style) */
.fcta-call {
  background: #16a34a !important;
}

/* ────────────────────────────────────────────────────────────────
   25. PREMIUM POLISH — subtle enhancements
   ──────────────────────────────────────────────────────────────── */

/* Add a faint green glow to active form card */
.form-card {
  box-shadow:
    0 24px 72px rgba(12, 27, 58, 0.18),
    0 0 0 1px rgba(34, 197, 94, 0.06) !important;
}

/* Review card hover — slightly richer shadow */
.review-card:hover {
  box-shadow:
    0 20px 52px rgba(12, 27, 58, 0.16),
    0 0 0 1px rgba(34, 197, 94, 0.08) !important;
}

/* Service card hover enriched */
.service-card:hover {
  box-shadow:
    0 24px 56px rgba(12, 27, 58, 0.18),
    0 0 0 1px rgba(34, 197, 94, 0.10) !important;
}

/* Overall rating badge — keep navy depth */
.overall-rating {
  box-shadow:
    0 8px 32px rgba(6, 14, 36, 0.40),
    0 0 0 1px rgba(34, 197, 94, 0.12) !important;
}

/* Smooth button active / pressed state */
.btn-primary:active,
.btn-next:active,
.btn-pay:active,
.btn-auth:active,
.nav-auth-btn:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 3px 10px rgba(34, 197, 94, 0.30) !important;
}