:root { --glass: rgba(8,12,16,.72); --radius:18px; }
.card { border-radius: var(--radius); background: var(--glass); border:1px solid rgba(255,255,255,.08); box-shadow:0 30px 80px rgba(0,0,0,.55); }
.navchip { padding: .25rem .75rem; border-radius: .75rem; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); font-weight:600; font-size:.9rem; }
.navchip:hover { border-color: #22d3ee; }
.navchip.special { background: rgba(16,185,129,.18); border-color: rgba(52,211,153,.5); }
.prose p, .prose li { color:#d9e6ee; }

/* TripCalc Header — hard override so it stays big on all pages */
.site-header { min-height: 120px; }
.site-header .brand { display:flex; align-items:center; gap:1.25rem; }
.site-header .brand img { height: 64px !important; width: auto !important; }
.site-header .brand .title { font-size: 1.875rem !important; font-weight: 800; line-height: 1.2; }



header {
  min-height: 100px; /* or whatever size */
}

/* === Visibility fixes (destination & date inputs) === */
#q {
  background: #ffffff !important;
  color: #000000 !important;
  caret-color: #000000 !important;
  border-color: rgba(0,0,0,.5) !important;
}
#q::placeholder { color: #555 !important; }

/* Make date inputs readable and their icons visible */
input[type="date"] {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: rgba(0,0,0,.5) !important;
  color-scheme: light; /* helps native pickers/icons render for light bg */
}
/* Chrome/Safari calendar icon */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.1) contrast(1.2);
  opacity: 1;
}

/* === Force calendar icons visible for date inputs === */
input[type="date"] {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: rgba(0,0,0,.5) !important;
  color-scheme: light;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0) brightness(0) contrast(2) sepia(1) hue-rotate(180deg) saturate(4);
  opacity: 1 !important;
}

/* === TripCalc background image (from CashCalc) === */
:root{
  --hero-bg: url("https://drive.google.com/uc?export=view&id=1g5o2J6LFQLc6bz8uH5QV9jdybUsnq8Mr");
}
.fxbg{ position:fixed; inset:0; z-index:-3; overflow:hidden; background:#030507; }
.fxbg .photo{
  position:absolute; inset:0;
  background-image:var(--hero-bg);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  filter:contrast(1.05) saturate(110%);
  opacity:.18;
}
.fxbg .aurora{ position:absolute; inset:-40%; filter:blur(70px) saturate(120%); opacity:.55;
  background:
    radial-gradient(600px 400px at 20% 30%, #00f0ff20 10%, transparent 60%),
    radial-gradient(700px 520px at 80% 40%, #00ffc840 10%, transparent 60%),
    radial-gradient(500px 380px at 35% 75%, #2b6fff2a 10%, transparent 70%);
  animation:auroraShift 22s linear infinite alternate;
}
@keyframes auroraShift{from{transform:translate3d(-2%,0,0) rotate(.2deg)}to{transform:translate3d(2%,1%,0) rotate(-.1deg)}}

/* === TripCalc-style clocks WITH flags === */
.clocks{
  margin-top:10px;
  display:flex;
  gap:10px;
  overflow:auto;
  padding-bottom:6px;
}
.clock{
  flex:0 0 auto;
  min-width:180px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  padding:10px;
  position:relative;
  box-shadow:none;
}
.clock .city{ font-weight:800; }
.clock .tz{ color:#d9e6ee; font-size:12px; }
.clock .time{ font-size:20px; font-weight:900; margin-top:6px; }
.clock .flag{ width:24px; height:18px; border-radius:2px; border:1px solid rgba(255,255,255,.15); }