/* =========================================
   1. HEADER CSS
========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'DM Sans', sans-serif; background: #1A1108; color: #333; overflow-x: hidden; }
.header { position: fixed; top: 0; left: 0; width: 100%; background: #012c60; z-index: 9999; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); font-family: Arial, sans-serif; }
.header-container { max-width: 1280px; margin: auto; padding: 0 20px; height: 60px; display: flex; align-items: center; justify-content: space-between; }
.logo img { height: 45px; }
.desktop-nav { display: flex; gap: 25px; justify-content: center; flex: 1; }
.desktop-nav a { color: white; text-decoration: none; font-size: 14px; font-weight: 600; position: relative; }
.desktop-nav a:hover { color: #cce5ff; }
.badge-trending { background: red; color: white; font-size: 10px; padding: 2px 6px; border-radius: 20px; margin-left: 6px; }
.right-buttons { display: flex; align-items: center; gap: 10px; }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); display: flex; justify-content: center; align-items: center; cursor: pointer; }
.icon { width: 20px; height: 20px; }
.profile-btn { display: flex; align-items: center; gap: 6px; background: white; color: #012c60; padding: 8px 14px; border-radius: 25px; font-weight: bold; border: 0; cursor: pointer; }
.search-box { position: absolute; top: 75px; right: 20px; background: white; padding: 8px 14px; border-radius: 30px; display: flex; gap: 10px; width: 300px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); }
.search-box input { flex: 1; outline: none; border: none; color: #012c60; }
.search-box button { background: #014f8c; border: none; color: white; padding: 6px 14px; border-radius: 20px; cursor: pointer; }
.mobile-menu { background: #012c60; padding: 12px 20px; display: flex; flex-direction: column; }
.mobile-menu a { color: white; padding: 8px 0; text-decoration: none; }
.second-row { background: #012c60; text-align: center; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.second-row::-webkit-scrollbar { display: none; }
.scroll-x { display: flex; gap: 20px; padding: 6px; justify-content: center; }

/* FIXED: Home button base styles */
.scroll-x a { color: white; font-size: 14px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }

.flip-banner { background: linear-gradient(to right, #e2ae3f, #f4c36f); height: 24px; display: flex; justify-content: center; align-items: center; width: 100%; }
#flipText { font-size: 13px; font-weight: bold; color: #012c60; padding: 0 10px; }
.location-row { background: linear-gradient(to right, #e2ae3f, #f4c36f); padding: 5px 10px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; justify-content: center; flex-wrap: wrap; }
.location-row::-webkit-scrollbar { display: none; }
.loc-btn { background: #fff7dc; color: #012c70; font-size: 12px; padding: 2px 8px; border-radius: 4px; cursor: pointer; border: none; }
.mobile-only { display: none; }
.hidden { display: none !important; }
@media (max-width: 768px) {
    .desktop-nav, .lbl { display: none; }
    .mobile-only { display: flex; }
    .scroll-x { justify-content: flex-start; }
    .location-row { justify-content: flex-start; flex-wrap: nowrap; }
}

/* =========================================
   2. REACT APP CUSTOM CSS
========================================= */
.filter-strip { display: flex; gap: 8px; margin-bottom: 30px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; justify-content: center; flex-wrap: wrap; }
.filter-strip::-webkit-scrollbar { display: none; }
.filter-btn { flex-shrink: 0; padding: 8px 18px; border-radius: 99px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid #EDE8E0; background: #fff; color: #6B5F52; transition: all 0.3s ease; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.02);}
.filter-btn:hover { border-color: #D4A017; color: #1A1108; transform: translateY(-1px); box-shadow: 0 4px 6px rgba(0,0,0,0.05);}
.filter-btn.active { background: #D4A017; color: #000; border-color: #D4A017; }

.modal-scroll::-webkit-scrollbar { width: 6px; }
.modal-scroll::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 8px; }
.modal-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
.modal-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* =========================================
   3. FOOTER CSS
========================================= */
.footer {
  background-color: #012c60; /* Fallback LessTaxi Blue */
  background-image: url('https://dxk1acp76n912.cloudfront.net/images/homepage/waterma.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  color: #ffffff;
  text-align: center;
  margin-top: 0px;
  width: 100%;
}

.footer-logo {
  position: relative;
  padding: 10px;
  width: 240px; 
  height: auto;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.footer-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.footer-social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  font-size: 1.4rem;
  text-align: center;
}

.footer-social a { color: white; transition: color 0.2s; }
.footer-social a:hover { color: #D4A017; }

.footer a { color: #ffffff; text-decoration: none; }
.footer a:hover { text-decoration: underline; color: #D4A017; }

/* FIXED: Replaced buggy 100vw trick with standard 100% width */
.payment-box {
  background-color: white;
  width: 100%;
  padding: 10px 0;
  text-align: center;
  box-sizing: border-box;
}

.inline-payment-icons {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  align-items: center;
  opacity: 1;
}

.inline-payment-icons img {
  height: 58px;
  width: auto;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
  transition: transform 0.3s ease, filter 0.3s ease;
}

.inline-payment-icons img:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.2));
}

@media (max-width: 768px) {
  .footer-logo {
    width: 200px;
    margin-top: 20px;
  }
}