/* ---- Base ---- */
:root{
  --bg-main:#050811;
  --bg-hero:#020617;
  --bg-card:#050816;
  --bg-card-em:#020826;
  --border-sub:rgba(148,163,184,0.2);
  --text-main:#e5eefc;
  --text-muted:#9ca3af;
  --accent:#0ea5e9;
  --accent-soft:#3b82f6;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  background:var(--bg-main);
  color:var(--text-main);
}

/* ---- Layout ---- */
.page{min-height:100vh;display:flex;flex-direction:column}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* ---- Topbar ---- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:#020617;
  border-bottom:1px solid #020617;
}
.topbar-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;
}
.logo{
  font-weight:700;
  color:var(--accent);
  letter-spacing:0.08em;
}
.nav-link{
  margin-left:20px;
  font-size:14px;
  color:rgba(248,250,252,0.8);
  text-decoration:none;
}
.nav-link:hover{color:#fff}

/* ---- Hero ---- */
.hero{
  position:relative;
  background:#020617;
  color:#f9fafb;
  min-height:200px;
  display:flex;
  align-items:center;
}
.hero::before{
  /* hero background image – replace URL with your own */
  content:"";
  position:absolute;inset:0;
  background:url('https://images.pexels.com/photos/4068294/pexels-photo-4068294.jpeg?auto=compress&cs=tinysrgb&w=1600')
             center/cover no-repeat;
  opacity:0.25;
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,23,42,0.85),rgba(15,23,42,0.92));
}
.hero-inner{
  position:relative;
  padding:40px 0 36px;
  text-align:center;
}
.hero-title{
  font-size:30px;
  line-height:1.2;
  margin:0;
}
.hero-date{
  color:var(--accent);
  font-weight:700;
}
.hero-sub{
  margin-top:10px;
  color:var(--text-muted);
}

/* ---- Main ---- */
.main{
  padding:30px 0 40px;
  flex:1;
}
.card{
  background:var(--bg-card);
  border-radius:18px;
  border:1px solid rgba(15,23,42,0.75);
  padding:20px 22px 22px;
  margin:0 auto 18px;
  box-shadow:0 18px 40px rgba(15,23,42,0.75);
}
.card-narrow{max-width:560px}
.card-wide{max-width:840px}
.card-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.card-header.center-text{
  justify-content:center;
}
.card-icon{font-size:18px}
.card-title{
  font-weight:600;
  font-size:16px;
}

/* ---- Form ---- */
.field-label{
  font-size:14px;
  color:var(--text-muted);
  margin-bottom:4px;
  display:block;
}
.input{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--border-sub);
  background:#020617;
  color:var(--text-main);
  font-size:14px;
}
.input.small{width:90px}
.input:focus{
  outline:none;
  border-color:var(--accent);
}

/* booking window pills */
.booking-options{margin-top:14px}
.booking-label{font-size:14px;color:var(--text-muted);margin-bottom:6px}
.pill-row{display:flex;flex-wrap:wrap;gap:8px}
.pill{
  display:inline-flex;align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  background:#020617;
  color:var(--text-main);
  border:1px solid rgba(148,163,184,0.25);
  cursor:pointer;
  font-size:12px;
}
.pill input{display:none}
.pill.active{
  background:linear-gradient(90deg,rgba(37,99,235,0.18),rgba(14,165,233,0.18));
  border-color:var(--accent);
}

/* custom days line */
.custom-days{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
}
.muted{color:var(--text-muted)}
.small{font-size:13px}

/* buttons */
.btn{
  border-radius:8px;
  border:1px solid var(--border-sub);
  background:#020617;
  color:var(--text-main);
  padding:10px 16px;
  font-size:14px;
  cursor:pointer;
}
.btn.primary{
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));
  border:none;
  box-shadow:0 10px 35px rgba(14,165,233,0.5);
}
.btn.full{width:100%;margin-top:16px}
.btn:hover{filter:brightness(1.05)}

/* ---- Booking Opens Card ---- */
.booking-result{
  margin-top:8px;
  text-align:center;
}
.booking-date{
  font-size:22px;
  font-weight:700;
}
.booking-time{
  font-size:14px;
  margin-top:4px;
}
.booking-desc{margin:10px 0 4px}
.strong{font-weight:600;color:var(--accent)}
.center-text{text-align:center}
.meta-row{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-top:8px;
}
.meta-item{font-size:12px;color:var(--text-muted)}

/* ---- Calendar Card ---- */
.calendar-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
@media(min-width:640px){
  .calendar-grid{grid-template-columns:repeat(3,1fr);}
}
.cal-btn{
  border-radius:10px;
  border:1px solid rgba(148,163,184,0.35);
  padding:10px;
  text-align:center;
  background:#020617;
  color:var(--text-main);
  text-decoration:none;
  font-size:13px;
  cursor:pointer;
}
.cal-btn:hover{
  border-color:var(--accent);
}

/* ---- Tools ---- */
.tools-card{margin-top:8px}
.tools-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
  justify-content:center;
}
.tool-pill{
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.32);
  background:#020617;
  color:var(--text-main);
  font-size:13px;
  cursor:pointer;
}
.tool-pill:hover{border-color:var(--accent)}

/* ---- Footer ---- */
.footer{
  border-top:1px solid #020617;
  padding:16px 0;
  background:#020617;
}
.footer-inner{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
  font-size:12px;
  color:var(--text-muted);
}
.footer-links{
  display:flex;
  gap:12px;
}
.footer-link{
  color:var(--text-muted);
  text-decoration:none;
}
.footer-link:hover{color:#e5e7eb}

/* ---- Small Screens ---- */
@media(max-width:640px){
  .hero-title{font-size:22px}
  .card{padding:16px}
}

/* Make the date input's calendar icon visible on dark background */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);          /* turns the dark icon light */
  cursor: pointer;
}

/* Optional: keep date picker consistent in dark mode */
input[type="date"] {
  color-scheme: dark;
}