/* -------------------------------------------------------------
   GLOBAL VARIABLES & THEME SWITCH
   ------------------------------------------------------------- */
/*
   Define all brand colors and default (light) theme colors in :root.
   Then override or add new theme values in [data-theme="dark"].
*/
:root {
  /* Base Colors */
  --bg-color: #ffffff;
  --text-color: #535b61;
  --header-bg: #ffffff;
  --link-color: #252b33;
  --heading-color: #000;
  --bs-btn-close-color: #000; 
  --fm-border-color: #dee2e6;
    --fm-body-bg: #fff;

  /* Brand Colors */
  --brand-hertz: #FFD700;   /* Standard Hertz Yellow (was #FFD100 in some places) */
  --brand-dollar: #EF0731;
  --brand-thrifty: #007BC3;
  --brand-lyft: #FF00BF;
  --brand-black: #000000;

  /* Info / Alert Colors */
  --info-color: #0AB284;  /* Used in alerts, backgrounds, etc. */
  --info-bg: #EBF9F5;     /* Light greenish background */
  --info-border: #08906C; /* Complementary border color */

  /* Card Colors */
  --card-bg: #ffffff;
  --card-text-color: #535b61;
  --card-border-color: #e6e6e6;
  /* New list-group item variables for LIGHT mode */
  --list-group-bg: #fff;
  --list-group-text: #535b61; /* or any color you prefer */
  --list-group-border-color: #ddd;
}

/* Dark Theme Overrides */
[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #e0e0e0;
  --header-bg: #1e1e1e;
  --link-color: #a0a0a0;
  --heading-color: #fff;
  --bs-btn-close-color: #fff;
--fm-border-color: #495057;
  --fm-body-bg: #212529;
  /* Cards in dark mode */
  --card-bg: #1e1e1e;
  --card-text-color: #e0e0e0;
  --card-border-color: #333333;
  /* New list-group item variables for DARK mode */
  --list-group-bg: #1e1e1e; 
  --list-group-text: #e0e0e0; 
  --list-group-border-color: #333; 
}

/* -------------------------------------------------------------
   GLOBAL STYLES
   ------------------------------------------------------------- */
   html, body {
    height: 100%;
  }
  #main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }
  
  #content {
    flex: 1;
  }
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  line-height: 22px;
  transition: background-color 0.3s, color 0.3s;
}

/* Headings inherit main font family but color from variable. */
h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
  font-family: inherit; /* or your preferred heading font */
}

#main-wrapper,
.main-wrapper,
#footer {
  background-color: var(--bg-color);
}

/* Headers / Nav / Footer backgrounds */
#header {
  background-color: var(--header-bg);
  transition: background-color 0.3s;
}

/* Basic link styling */
a {
  text-decoration: none;
  color: var(--link-color);
  transition: color 0.2s ease;
}
a:hover, a:focus {
  text-decoration: none;
}

/* -------------------------------------------------------------
   PRELOADERS
   ------------------------------------------------------------- */
.preloader {
  position: fixed;
  z-index: 999999999 !important;
  background-color: var(--bg-color);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

/* Dual-Ring Spinner (centered) */
[data-loader="dual-ring"] {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  content: " ";
  display: block;
  border-radius: 50%;
  animation: dual-ring 0.8s linear infinite;
}

/* Individual Brand Preloader Colors */
#hertz-preloader [data-loader="dual-ring"] {
  border: 5px solid var(--brand-hertz);
  border-color: var(--brand-hertz) #f1f5f6 var(--brand-hertz) #f1f5f6;
}
#dollar-preloader [data-loader="dual-ring"] {
  border: 5px solid var(--brand-dollar);
  border-color: var(--brand-dollar) #f1f5f6 var(--brand-dollar) #f1f5f6;
}
#thrifty-preloader [data-loader="dual-ring"] {
  border: 5px solid var(--brand-thrifty);
  border-color: var(--brand-thrifty) #f1f5f6 var(--brand-thrifty) #f1f5f6;
}

@keyframes dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* -------------------------------------------------------------
   BACK TO TOP BUTTONS
   ------------------------------------------------------------- */
.back-to-top {
  display: none;
  position: fixed;
  z-index: 1030;
  bottom: 8px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.2);
  text-align: center;
  color: #fff;
  font-size: 16px;
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 100%;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.back-to-top:hover {
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
}
/* RTL fix if needed */
html[dir="rtl"] .back-to-top {
  left: 10px;
  right: auto;
}

/* Hover Colors */
#hertz-back-to-top:hover {
  background-color: var(--brand-hertz);
  color: #ffffff !important; 
}
#dollar-back-to-top:hover {
  background-color: var(--brand-dollar);
  color: #ffffff !important; 
}
#thrifty-back-to-top:hover {
  background-color: var(--brand-thrifty);
  color: #ffffff !important; 
}
[data-theme="dark"] .back-to-top {
    background-color: rgba(255, 255, 255, 0.2); /* Lighter background for visibility in dark mode */
}

[data-theme="dark"] .back-to-top:hover {
    background-color: rgba(255, 255, 255, 0.4); /* Even lighter on hover for clear interaction */
}


/* -------------------------------------------------------------
   CUSTOM UNDERLINES & CARD TRANSITIONS
   ------------------------------------------------------------- */
.brand-custom-underline {
  position: relative;
  display: inline-block;
}
.brand-custom-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  transition: background-color 0.3s ease;
}

/* Self underline (smaller) inside a container */
.brand-self-custom-underline {
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 30px;
  height: 4px;
  transition: background-color 0.3s ease;
}
.brand-self-transition-card {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.brand-self-transition-card:hover {
  background-color: #000000;
  border-color: #000000;
  color: #ffffff !important;
}
.brand-self-transition-card:hover .brand-self-card-title,
.brand-self-transition-card:hover .brand-self-card-text {
  color: #ffffff !important;
}
.brand-self-transition-card:hover .brand-self-custom-underline {
  background-color: #ffffff !important;
}

/* Brand-Specific Underlines */
.hertz-custom-underline::after {
  background-color: var(--brand-hertz);
}
.hertz-self-custom-underline {
  background-color: var(--brand-hertz);
}

/* Dollar */
.dollar-custom-underline::after {
  background-color: var(--brand-dollar);
}
.dollar-self-custom-underline {
  background-color: var(--brand-dollar);
}

/* Thrifty */
.thrifty-custom-underline::after {
  background-color: var(--brand-thrifty);
}
.thrifty-self-custom-underline {
  background-color: var(--brand-thrifty);
}
/* Shared Underline Defaults */
.hertz-custom-underline,
.dollar-custom-underline,
.thrifty-custom-underline,
.lyft-custom-underline {
  position: relative;
  display: inline-block; /* ensures the pseudo-element is the same width as text */
}
/* Hertz */
.hertz-custom-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0; /* or -2px if you need it lower */
  width: 100%;
  height: 4px;
  background-color: var(--brand-hertz);/* Hertz Yellow */
}

/* Dollar */
.dollar-custom-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0; /* or -2px if you need it lower */
  width: 100%;
  height: 4px;
  background-color: var(--brand-dollar); /* Dollar Red */
}

/* Thrifty */
.thrifty-custom-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0; /* or -2px if you need it lower */
  width: 100%;
  height: 4px;
  background-color: var(--brand-thrifty); /* Thrifty Blue */
}

/* Lyft */
.lyft-custom-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0; /* or -2px if you need it lower */
  width: 100%;
  height: 4px;
  background-color: #FF00BF; /* Lyft Pink */
}

/* -------------------------------------------------------------
   NAV LINKS & FOOTER LINKS
   ------------------------------------------------------------- */
#footer .nav .nav-item {
  display: inline-block;
  line-height: 20px;
  margin: 0;
  padding: 0 10px;
}
#footer .nav .nav-item .hertz-nav-link,
#footer .nav .nav-item .dollar-nav-link,
#footer .nav .nav-item .thrifty-nav-link {
  padding-left: 0;
  padding-right: 0;
  color: var(--link-color);
  transition: color 0.2s ease;
}

/* Hover/focus brand colors */
#footer .nav .nav-item .hertz-nav-link:hover,
#footer .nav .nav-item .hertz-nav-link:focus {
  color: var(--brand-hertz);
}
#footer .nav .nav-item .dollar-nav-link:hover,
#footer .nav .item .dollar-nav-link:focus {
  color: var(--brand-dollar);
}
#footer .nav .nav-item .thrifty-nav-link:hover,
#footer .nav .nav-item .thrifty-nav-link:focus {
  color: var(--brand-thrifty);
}

/* Rental Location Links */
.rental-loc-links,
.dollar-rental-loc-links,
.thrifty-rental-loc-links {
  padding-left: 0;
  padding-right: 0;
  color: var(--link-color);
  transition: color 0.2s ease;
}
.rental-loc-links:hover,
.rental-loc-links:focus {
  color: var(--brand-hertz);
}
.dollar-rental-loc-links:hover,
.dollar-rental-loc-links:focus {
  color: var(--brand-dollar);
}
.thrifty-rental-loc-links:hover,
.thrifty-rental-loc-links:focus {
  color: var(--brand-thrifty);
}

/* -------------------------------------------------------------
   BRAND BUTTONS
   ------------------------------------------------------------- */
/* Hertz Outline Button */
.btn-outline-hertz {
  color: var(--brand-black);
  border-color: var(--brand-black);
}
.btn-outline-hertz:hover {
  background-color: var(--brand-black);
  border-color: var(--brand-black);
  color: #fff;
  text-decoration: none;
}

/* Example "btn-outline-all" for universal black outline? */
.btn-outline-all {
  color: var(--brand-black);
  border-color: var(--brand-black);
}
.btn-outline-all:hover {
  background-color: var(--brand-black);
  border-color: var(--brand-black);
  color: #fff;
  text-decoration: none;
}
/* Dark Mode Override for .btn-outline-all */
[data-theme="dark"] .btn-outline-all {
  color: #ffffff;
  border-color: #ffffff;
}
[data-theme="dark"] .btn-outline-all:hover {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--brand-black);
  text-decoration: none;
}

/* Dollar Outline */
.btn-outline-dollar {
  color: var(--brand-dollar);
  border-color: var(--brand-dollar);
}
.btn-outline-dollar:hover {
  background-color: var(--brand-black);
  border-color: var(--brand-black);
  color: #fff;
  text-decoration: none;
}

/* Thrifty Outline */
.btn-outline-thrifty {
  color: var(--brand-thrifty);
  border-color: var(--brand-thrifty);
}
.btn-outline-thrifty:hover {
  background-color: var(--brand-black);
  border-color: var(--brand-black);
  color: #fff;
  text-decoration: none;
}

/* Lyft Outline */
.btn-outline-lyft {
  color: var(--brand-lyft);
  border-color: var(--brand-lyft);
}
.btn-outline-lyft:hover {
  background-color: var(--brand-lyft);
  color: #fff;
  border-color: var(--brand-lyft);
  text-decoration: none;
}
.btn-outline-lyft:focus,
.btn-outline-lyft:active,
.btn-outline-lyft:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(255, 0, 191, 0.5);
}

/* Black Button (common usage) */
.btn-black {
  color: #ffffff;
  background-color: var(--brand-black);
  border-color: var(--brand-black);
  min-width: 150px;
}
.btn-black:hover {
  color: var(--brand-black);
  background-color: #ffffff;
  border-color: var(--brand-black);
  text-decoration: none;
}
.btn-outline-black {
  color: var(--brand-black);
  border-color: var(--brand-black);
}
.btn-outline-black:hover {
  background-color: var(--brand-black);
  color: #fff;
  text-decoration: none;
}
/* Dark Mode - black button inverted */
[data-theme="dark"] .btn-black {
  color: var(--brand-black);
  background-color: #ffffff;
  border-color: #ffffff;
}
[data-theme="dark"] .btn-black:hover {
  color: #ffffff;
  background-color: var(--brand-black);
  border-color: var(--brand-black);
  text-decoration: none;
}
/* Dark Mode - outline black inverted */
[data-theme="dark"] .btn-outline-black {
  color: #ffffff;
  border-color: #ffffff;
  background-color: transparent;
}
[data-theme="dark"] .btn-outline-black:hover {
  color: var(--brand-black);
  background-color: #ffffff;
  border-color: #ffffff;
  text-decoration: none;
}

/* Minimum widths for brand fill buttons */
.btn-hertz,
.btn-dollar,
.btn-thrifty {
  min-width: 150px;
}

/* LIGHT MODE (Default) */

/* HERTZ fill button */
.btn-hertz {
  color: #fff;
  background-color: var(--brand-black);
  border-color: var(--brand-black);
}
.btn-hertz:hover {
  color: var(--brand-black);
  background-color: #fff;
  border-color: var(--brand-black);
  text-decoration: none;
}

/* DOLLAR fill */
.btn-dollar {
  color: #fff;
  background-color: var(--brand-dollar);
  border-color: var(--brand-dollar);
}
.btn-dollar:hover {
  color: #fff;
  background-color: var(--brand-black);
  border-color: var(--brand-black);
  text-decoration: none;
}

/* THRIFTY fill */
.btn-thrifty {
  color: #fff;
  background-color: var(--brand-thrifty);
  border-color: var(--brand-thrifty);
}
.btn-thrifty:hover {
  color: #fff;
  background-color: var(--brand-black);
  border-color: var(--brand-black);
  text-decoration: none;
}

/* DARK MODE OVERRIDES - brand fill buttons */
/* HERTZ fill in dark mode => white background, black text by default */
[data-theme="dark"] .btn-hertz {
  color: var(--brand-black);
  background-color: #fff;
  border-color: #fff;
}
[data-theme="dark"] .btn-hertz:hover {
  color: #fff;
  background-color: var(--brand-black);
  border-color: var(--brand-black);
  text-decoration: none;
}

/* DOLLAR fill in dark mode => white background, brand-dollar text by default */
[data-theme="dark"] .btn-dollar {
  color: var(--brand-dollar);
  background-color: #fff;
  border-color: #fff;
}
[data-theme="dark"] .btn-dollar:hover {
  color: #fff;
  background-color: var(--brand-dollar);
  border-color: var(--brand-dollar);
  text-decoration: none;
}

/* THRIFTY fill in dark mode => white background, brand-thrifty text by default */
[data-theme="dark"] .btn-thrifty {
  color: var(--brand-thrifty);
  background-color: #fff;
  border-color: #fff;
}
[data-theme="dark"] .btn-thrifty:hover {
  color: #fff;
  background-color: var(--brand-thrifty);
  border-color: var(--brand-thrifty);
  text-decoration: none;
}

/* -------------------------------------------------------------
   ICON COLORS
   ------------------------------------------------------------- */
.icon-yellow {
  color: var(--brand-hertz);
}
.icon-red {
  color: var(--brand-dollar);
}
.icon-blue {
  color: var(--brand-thrifty);
}

/* -------------------------------------------------------------
   ALERT & INFO STYLES
   ------------------------------------------------------------- */
.hertz-alert-info,
.dollar-alert-info,
.thrifty-alert-info {
  color: var(--info-color);
  background-color: var(--info-bg);
  border-color: var(--info-border);
}
.hertz-alert-info .alert-link,
.dollar-alert-info .alert-link,
.thrifty-alert-info .alert-link {
  color: #04414d;
}
/* Alternative background usage */
.hertz-bg-info,
.dollar-bg-info,
.thrifty-bg-info {
  color: var(--info-bg);
  background-color: var(--info-color);
  border-color: var(--info-border);
}

/* -------------------------------------------------------------
   LINK CLASSES FOR SPECIFIC BRANDS
   ------------------------------------------------------------- */
.hertz-link {
  color: var(--brand-hertz);
}
.hertz-link:hover {
  color: #fdd208; /* Slight tweak if desired */
  text-decoration: underline;
}
.dollar-link {
  color: var(--brand-dollar);
}
.dollar-link:hover {
  color: #d30a2a;
  text-decoration: underline;
}
.thrifty-link {
  color: var(--brand-thrifty);
}
.thrifty-link:hover {
  color: #005f99;
  text-decoration: underline;
}

/* -------------------------------------------------------------
   VEHICLE IMAGE - Circular Thumbnails
   ------------------------------------------------------------- */
.vehicle-image {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 5px;
}

/* -------------------------------------------------------------
   POST (BLOG) STYLES
   ------------------------------------------------------------- */
.hertz-post .title-blog {
  margin-bottom: 1rem;
}
.hertz-post .title-blog a {
  color: #0c2f54;
}
.hertz-post .title-blog a:hover {
  color: var(--brand-hertz);
}

/* Meta blog items inline */
.hertz-post .meta-blog {
  padding-left: 0;
}
.hertz-post .meta-blog li {
  list-style-type: none !important;
  display: inline-block;
  margin-right: 12px;
  align-items: center;
}
.hertz-post .meta-blog li i {
  font-size: 16px;
  color: var(--brand-hertz);
  margin-right: 5px;
}
.hertz-post .meta-blog li a {
  color: var(--text-color);
}
.hertz-post .meta-blog li a:hover {
  color: #0071cc;
}
/* RTL adjustments */
html[dir="rtl"] .hertz-post .meta-blog {
  padding-right: 0;
}
html[dir="rtl"] .hertz-post .meta-blog li {
  margin-right: 0;
  margin-left: 12px;
}
html[dir="rtl"] .hertz-post .meta-blog li i {
  margin-right: 0;
  margin-left: 5px;
}

/* -------------------------------------------------------------
   HEADER BRAND LOGOS (Light vs Dark Mode)
   ------------------------------------------------------------- */
.header-brand-hertz .logo-img {
  content: url("https://imagedelivery.net/PjNwx8gF5856PThnwoCmRw/97761a55-fa33-4f0f-bdaa-d6a21a0fcd00/public");
  max-width: 180px;
  width: 180px;
  height: auto;
}
[data-theme="dark"] .header-brand-hertz .logo-img {
  content: url("https://imagedelivery.net/PjNwx8gF5856PThnwoCmRw/309aacac-284c-455d-06ae-5433c932e400/public");
}

.header-brand-dollar .logo-img {
  content: url("https://imagedelivery.net/PjNwx8gF5856PThnwoCmRw/d8625749-67ee-4e8d-57d4-c2f811369400/public");
  max-width: 180px;
  width: 180px;
  height: auto;
}
[data-theme="dark"] .header-brand-dollar .logo-img {
  content: url("https://imagedelivery.net/PjNwx8gF5856PThnwoCmRw/fb4bb75c-2f61-4828-b16b-b136a93ae100/public");
}

.header-brand-thrifty .logo-img {
  content: url("https://imagedelivery.net/PjNwx8gF5856PThnwoCmRw/8ad6013f-f73a-4689-42b0-c54a45d24300/public");
  max-width: 180px;
  width: 180px;
  height: auto;
}
[data-theme="dark"] .header-brand-thrifty .logo-img {
  /* If you have a different Thrifty dark mode logo, swap here */
  content: url("https://imagedelivery.net/PjNwx8gF5856PThnwoCmRw/8ad6013f-f73a-4689-42b0-c54a45d24300/public");
}
.header-brand-all .logo-img {
  content: url("https://imagedelivery.net/PjNwx8gF5856PThnwoCmRw/a079277e-216e-4d7b-d51e-d29a208c3000/public");
  width: 600px;
  max-width: 600px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Dark mode */
[data-theme="dark"] .header-brand-all .logo-img {
  content: url("https://imagedelivery.net/PjNwx8gF5856PThnwoCmRw/ba403cce-16d1-4455-c344-8765387c1c00/public");
}
@media (max-width: 576px) {
  .header-brand-all .logo-img {
    max-width: 100%; /* Allow image to fully adapt to small screens */
    padding: 0 10px; /* Avoid touching edges */
  }
}

/* -------------------------------------------------------------
   CARD BACKGROUNDS (Use variables for .card & .bg-white)
   ------------------------------------------------------------- */
.card {
  background-color: var(--card-bg) !important;
  color: var(--card-text-color) !important;
  border: 1px solid var(--card-border-color) !important;
}
[data-theme="dark"] .bg-white {
  background-color: var(--card-bg) !important;
  color: var(--card-text-color) !important;
}
/* Smaller self-underline inside headings or cards. 
   e.g., .hertz-self-custom-underline inside an H5. */
   .hertz-self-custom-underline,
   .dollar-self-custom-underline,
   .thrifty-self-custom-underline,
   .lyft-self-custom-underline {
     position: absolute;
     left: 50%;
     bottom: -10px; /* tweak as needed */
     transform: translateX(-50%);
     width: 30px;
     height: 4px;
     transition: background-color 0.3s ease;
   }
   /* If you need a heading wrapper to be position: relative: */
.hertz-self-card-title,
.dollar-self-card-title,
.thrifty-self-card-title,
.lyft-self-card-title {
  position: relative;
  display: inline-block; 
}
   

/* -------------------------------------------------------------
   TRANSITIONS FOR BRAND CARDS
   (Hover black/white in Light Mode, reversed in Dark Mode)
   ------------------------------------------------------------- */

/* HERTZ: Light Mode => black on hover, Dark => white on hover */
.hertz-self-transition-card {
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.hertz-self-transition-card:hover {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}
.hertz-self-transition-card:hover .hertz-self-card-title,
.hertz-self-transition-card:hover .hertz-self-card-text {
  color: #ffffff !important;
}
.hertz-self-transition-card:hover .hertz-self-custom-underline {
  background-color: #ffffff !important;
}
/* Dark mode = reverse */
[data-theme="dark"] .hertz-self-transition-card:hover {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #000000 !important;
}
[data-theme="dark"] .hertz-self-transition-card:hover .hertz-self-card-title,
[data-theme="dark"] .hertz-self-transition-card:hover .hertz-self-card-text {
  color: #000000 !important;
}
[data-theme="dark"] .hertz-self-transition-card:hover .hertz-self-custom-underline {
  background-color: #000000 !important;
}

/* DOLLAR */
.dollar-self-transition-card {
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.dollar-self-transition-card:hover {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}
.dollar-self-transition-card:hover .dollar-self-card-title,
.dollar-self-transition-card:hover .dollar-self-card-text {
  color: #ffffff !important;
}
.dollar-self-transition-card:hover .dollar-self-custom-underline {
  background-color: #ffffff !important;
}
/* Dark mode = reverse */
[data-theme="dark"] .dollar-self-transition-card:hover {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #000000 !important;
}
[data-theme="dark"] .dollar-self-transition-card:hover .dollar-self-card-title,
[data-theme="dark"] .dollar-self-transition-card:hover .dollar-self-card-text {
  color: #000000 !important;
}
[data-theme="dark"] .dollar-self-transition-card:hover .dollar-self-custom-underline {
  background-color: #000000 !important;
}

/* THRIFTY */
.thrifty-self-transition-card {
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.thrifty-self-transition-card:hover {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}
.thrifty-self-transition-card:hover .thrifty-self-card-title,
.thrifty-self-transition-card:hover .thrifty-self-card-text {
  color: #ffffff !important;
}
.thrifty-self-transition-card:hover .thrifty-self-custom-underline {
  background-color: #ffffff !important;
}
/* Dark mode = reverse */
[data-theme="dark"] .thrifty-self-transition-card:hover {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #000000 !important;
}
[data-theme="dark"] .thrifty-self-transition-card:hover .thrifty-self-card-title,
[data-theme="dark"] .thrifty-self-transition-card:hover .thrifty-self-card-text {
  color: #000000 !important;
}
[data-theme="dark"] .thrifty-self-transition-card:hover .thrifty-self-custom-underline {
  background-color: #000000 !important;
}

/* -------------------------------------------------------------
   SLIDE-OUT PREFERENCES PANEL
   ------------------------------------------------------------- */
   #preferences-panel {
    position: fixed;
    top: 50%;
    left: -220px; /* slides out from the left */
    transform: translateY(-50%);
    width: 220px;
    padding: 1rem;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    box-shadow: 0 0 5px rgba(0,0,0,0.15);
    transition: left 0.3s ease-in-out;
    z-index: 9999;
    overflow: visible !important;    /* allow children (the dropdown) to spill out */
  }
  /* allow the dropdown to escape the panel and sit on top */
#preferences-panel .dropdown-menu {
  z-index: 10000 !important;
}

  
  #preferences-panel.open {
    left: 0;
  }
  
  #preferences-panel .panel-toggle {
    position: absolute;
    top: 0;
    right: -40px; /* slightly less negative so entire button is visible */
    width: 40px;
    height: 40px;
    padding: 0;
    background: #343a40;
    color: #fff;
    font-size: 1.25rem;
    border-radius: 0px 4px 4px 0;;
    cursor: pointer;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    overflow: visible; /* ensures the button isn't clipped inside */
  }
  
  #preferences-panel .panel-toggle:hover {
    background: #495057;
  }
  
  #preferences-panel .panel-toggle i {
    pointer-events: none;
  }
  
  @media (max-width: 576px) {
    /* Hide the label on mobile; note that we already use Bootstrap’s d-none d-sm-inline on the label */
    
    /* Make the dropdown button smaller on mobile */
    .color-mode-container .dropdown-toggle {
      padding: 0.25rem 0.5rem;
      font-size: 0.875rem;
      min-width: auto;
    }
  }
  @media (max-width: 576px) {
    /* Make the dropdown button smaller on extra-small devices */
    #preferences-panel .color-mode-container .dropdown-toggle {
      padding: 0.25rem 0.5rem;
      font-size: 0.875rem; /* or smaller if desired */
    }
  }
  
  /* Ensure the preferences-panel uses your theme variables */
#preferences-panel.preferences-panel {
  background-color: var(--card-bg) !important;     /* or var(--bg-color) */
  color: var(--card-text-color) !important;        /* or var(--text-color) */
  border: 1px solid var(--card-border-color) !important; /* optional border */
  transition: background-color 0.3s, color 0.3s;   /* smooth transitions */
}

/* If needed, also style .panel-content inside */
#preferences-panel .panel-content {
  background-color: inherit;
  color: inherit;
}
.smaller-img {
  max-width: 150px;
}
.trip-planner-img {
  /* Default (light mode) image */
  content: url("../images/locations/tx-san-antonio-200.svg");
  max-width: 150px; /* or your preferred size */
  display: block;
  margin: 0 auto;   /* center horizontally */
}

/* When [data-theme="dark"] is set, swap to dark image */
[data-theme="dark"] .trip-planner-img {
  content: url("../images/locations/tx-san-antonio-200-drk.svg");
}
.timeline-img {
  /* Default (light mode) image */
  content: url("../images/tnc/timeline.svg");
  max-width: 150px; /* or your preferred size */
  display: block;
  margin: 0 auto;   /* center horizontally */
}

/* When [data-theme="dark"] is set, swap to dark image */
[data-theme="dark"] .timeline-img {
  content: url("../images/tnc/timeline-dark.svg");
}
.trip-orlando-img {
  /* Default (light mode) image */
  content: url("../images/locations/orlando-lt.png");
  max-width: 150px; /* or your preferred size */
  display: block;
  margin: 0 auto;   /* center horizontally */
}

/* When [data-theme="dark"] is set, swap to dark image */
[data-theme="dark"] .trip-orlando-img {
  content: url("../images/locations/orlando-drk.png");
}
.left-sig-img {
  /* Default (light mode) image */
  content: url("../images/coi/sig-left-light.png");
  max-width: 200px; /* or your preferred size */
  display: block;
  margin: 0 auto;   /* center horizontally */
}

/* When [data-theme="dark"] is set, swap to dark image */
[data-theme="dark"] .left-sig-img {
  content: url("../images/coi/sig-left-dark.png");
}
.right-sig-img {
  /* Default (light mode) image */
  content: url("../images/coi/sig-right-light.png");
  max-width: 200px; /* or your preferred size */
  display: block;
  margin: 0 auto;   /* center horizontally */
}

/* When [data-theme="dark"] is set, swap to dark image */
[data-theme="dark"] .right-sig-img {
  content: url("../images/coi/sig-right-dark.png");
}
.hotels-amenities span, .car-features span {
  margin-right: 0.7rem;
  color: rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .hotels-amenities span,
[data-theme="dark"] .car-features span {
  color: rgba(255, 255, 255, 0.7) !important;
}

html[dir="rtl"] .hotels-amenities span,
html[dir="rtl"] .car-features span {
  margin-left: 0.7rem;
  margin-right: 0;
}

[data-theme="dark"] html[dir="rtl"] .hotels-amenities span,
[data-theme="dark"] html[dir="rtl"] .car-features span {
  color: rgba(255, 255, 255, 0.7) !important;
}
[data-theme="dark"] .form-control-plaintext {
  color: var(--text-color) !important;
}
[data-theme="dark"] h6.card-subtitle {
  color: #e0e0e0 !important;
}
.license-plate-container {
  gap: 0.25rem; /* Default gap for non-mobile */
}

@media (max-width: 576px) {
  .license-plate-container {
    gap: 0; /* No gap on mobile */
  }
}
[data-theme="dark"] .modal-content {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); /* Added shadow for contrast */
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}

/* Optional: adjust modal backdrop if you want it darker/lighter in dark mode */
[data-theme="dark"] .modal-backdrop.show {
  background-color: rgba(0, 0, 0, 0.8);
}

.highlight {
  background-color: yellow;
}
.list-group-item {
  background-color: var(--list-group-bg) !important;
  color: var(--list-group-text) !important;
  border-color: var(--list-group-border-color) !important;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
[data-theme="dark"] .bg-light-2 {
  background-color: #2c2c34 !important;
}
[data-theme="dark"] .btn-close {
  /* Invert the close icon, so black becomes white, etc. */
  filter: invert(1);
}
[data-theme="dark"] .form-control {
  background-color: #2e2e2e;
  color: #e0e0e0;
  border-color: #444;
}
[data-theme="dark"] .form-control::placeholder {
  color: #aaa;
}
[data-theme="dark"] label.form-label,
[data-theme="dark"] .form-text {
  color: #ccc;
}
/* Default (Light) mode styles */
#cb-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  display: none;
  border: 0;

  /* Example light mode colors */
  background-color: #ffffff; 
  color: #000000;    
  padding: 1rem; 
  font-size: 1rem;
}
/* Dark mode override */
[data-theme="dark"] #cb-cookie-banner {
  background-color: #1e1e1e; /* or your brand's dark bg */
  color: #e0e0e0;           /* lighter text color */
 
}

[data-theme="dark"] .table {
    --bs-table-bg: #212529;
    --bs-table-striped-bg: #2c3034;
    --bs-table-border-color: #373b3e;
    color: #ffffff !important;
}

[data-theme="dark"] .table thead th,
[data-theme="dark"] .table tbody td,
[data-theme="dark"] .table tbody tr {
    border-color: var(--bs-table-border-color);
}

[data-theme="dark"] .table tbody tr:hover {
    background-color: rgba(255,255,255,0.05);
}
[data-theme="dark"] .table,
[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    color: #ffffff !important;
}
/* Light mode (default) */
.table-light {
  background-color: #f8f9fa; /* default Bootstrap light color */
  color: #212529;
}

/* Dark mode adjustments */
[data-theme="dark"] .table-light {
  background-color: #343a40; /* Darker header background */
  color: #fff; /* White text for visibility */
}
input[type="radio"]:checked.form-check-input[id="brand_hertz"] {
    background-color: #FFC107; /* yellow */
    border-color: #FFC107;
  }

  input[type="radio"]:checked.form-check-input[id="brand_dollar"] {
    background-color: #DC3545; /* red */
    border-color: #DC3545;
  }

  input[type="radio"]:checked.form-check-input[id="brand_thrifty"] {
    background-color: #0D6EFD; /* blue */
    border-color: #0D6EFD;
  }

  input[type="radio"]:checked + .form-check-label[for="brand_hertz"] {
    color: #FFC107;
  }

  input[type="radio"]:checked + .form-check-label[for="brand_dollar"] {
    color: #DC3545;
  }

  input[type="radio"]:checked + .form-check-label[for="brand_thrifty"] {
    color: #0D6EFD;
  }
  .input-group-text {
    background-color: var(--fm-body-bg);
    border-color: var(--fm-border-color);
  }

  .form-select {
    background-color: transparent;
    color: inherit;
  }
  .bg-grey { 
  background-color: #6c757d !important; 
}

.bg-grey:hover {
  background-color: #5a6268 !important; /* Darker gray for hover */
}


.tracking-detail {
 padding:3rem 0
}
#tracking {
 margin-bottom:1rem
}
[class*=tracking-status-] p {
 margin:0;
 font-size:1.1rem;
 color:#fff;
 text-transform:uppercase;
 text-align:center
}
[class*=tracking-status-] {
 padding:1.6rem 0
}
.tracking-status-intransit {
 background-color:#FFD700
}
.tracking-status-outfordelivery {
 background-color:#f5a551
}
.tracking-status-deliveryoffice {
 background-color:#f7dc6f
}
.tracking-status-delivered {
 background-color:#4cbb87
}
.tracking-status-attemptfail {
 background-color:#b789c7
}
.tracking-status-error,.tracking-status-exception {
 background-color:#d26759
}
.tracking-status-expired {
 background-color:#616e7d
}
.tracking-status-pending {
 background-color:#ccc
}
.tracking-status-inforeceived {
 background-color:#214977
}
.tracking-list {
 border:1px solid #e5e5e5
}
.tracking-item {
 border-left:1px solid #e5e5e5;
 position:relative;
 padding:2rem 1.5rem .5rem 2.5rem;
 font-size:.9rem;
 margin-left:3rem;
 min-height:5rem
}
.tracking-item:last-child {
 padding-bottom:4rem
}
.tracking-item .tracking-date {
 margin-bottom:.5rem
}
.tracking-item .tracking-date span {
 color:#888;
 font-size:85%;
 padding-left:.4rem
}
.tracking-item .tracking-content {
 padding:.5rem .8rem;
 background-color:#f4f4f4;
 border-radius:.5rem
}
.tracking-item .tracking-content span {
 display:block;
 color:#888;
 font-size:85%
}
.tracking-item .tracking-icon {
 line-height:2.6rem;
 position:absolute;
 left:-1.3rem;
 width:2.6rem;
 height:2.6rem;
 text-align:center;
 border-radius:50%;
 font-size:1.1rem;
 background-color:#fff;
 color:#fff
}
.tracking-item .tracking-icon.status-sponsored {
 background-color:#f68
}
.tracking-item .tracking-icon.status-delivered {
 background-color:#4cbb87
}
.tracking-item .tracking-icon.status-outfordelivery {
 background-color:#f5a551
}
.tracking-item .tracking-icon.status-deliveryoffice {
 background-color:#f7dc6f
}
.tracking-item .tracking-icon.status-attemptfail {
 background-color:#b789c7
}
.tracking-item .tracking-icon.status-exception {
 background-color:#d26759
}
.tracking-item .tracking-icon.status-inforeceived {
 background-color:#214977
}
.tracking-item .tracking-icon.status-intransit {
 color:#e5e5e5;
 border:1px solid #e5e5e5;
 font-size:.6rem
}
@media(min-width:992px) {
 .tracking-item {
  margin-left:10rem
 }
 .tracking-item .tracking-date {
  position:absolute;
  left:-10rem;
  width:7.5rem;
  text-align:right
 }
 .tracking-item .tracking-date span {
  display:block
 }
 .tracking-item .tracking-content {
  padding:0;
  background-color:transparent
 }
}