/* ==========================================
   GLOBAL
   ========================================== */

:root {
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --background: #ffffff;
  --background-alt: #f9fafb;
  --primary: #111827;
  --primary-hover: #374151;

  --available: #166534;
  --available-bg: #dcfce7;

  --limited: #92400e;
  --limited-bg: #fef3c7;

  --full: #991b1b;
  --full-bg: #fee2e2;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Inter", sans-serif;
  color: var(--text);
  background: var(--background);
  line-height: 1.6;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: min(
    1120px,
    calc(100% - 40px)
  );

  margin: 0 auto;
}


/* ==========================================
   HEADER
   ========================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;

  background:
    rgba(255, 255, 255, 0.95);

  backdrop-filter: blur(12px);

  border-bottom:
    1px solid var(--border);
}

.nav-wrap {
  min-height: 70px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;

  gap: 10px;

  font-weight: 800;
  font-size: 1.05rem;
}

.brand-mark {
  font-size: 1.35rem;
}


/* ==========================================
   BUTTONS
   ========================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 46px;

  padding:
    0.7rem 1.1rem;

  border:
    1px solid var(--primary);

  border-radius: 10px;

  background:
    var(--primary);

  color: white;

  font-weight: 700;

  transition:
    background 0.2s ease,
    transform 0.15s ease;
}

.button:hover {
  background:
    var(--primary-hover);

  transform:
    translateY(-1px);
}

.button-secondary {
  background: white;
  color: var(--text);
  border-color: var(--border);
}

.button-secondary:hover {
  background:
    var(--background-alt);
}

.button-small {
  min-height: 38px;

  padding:
    0.5rem 0.85rem;

  font-size: 0.85rem;
}

.button-full {
  width: 100%;
}


/* ==========================================
   HERO
   ========================================== */

.hero {
  padding:
    90px 0 70px;

  background:
    radial-gradient(
      circle at top right,
      #f3f4f6,
      transparent 35%
    );
}

.hero-grid {
  display: grid;

  grid-template-columns:
    1.4fr 0.8fr;

  gap: 60px;

  align-items: center;
}

.eyebrow {
  display: inline-block;

  margin-bottom:
    0.6rem;

  font-size:
    0.78rem;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    0.08em;

  color:
    var(--muted);
}

h1,
h2 {
  margin: 0;

  line-height: 1.1;

  letter-spacing:
    -0.035em;
}

h1 {
  max-width: 700px;

  font-size:
    clamp(2.5rem, 6vw, 4.5rem);
}

h2 {
  font-size:
    clamp(2rem, 4vw, 3rem);
}

.hero-copy {
  max-width: 650px;

  margin:
    1.5rem 0;

  color:
    var(--muted);

  font-size:
    1.08rem;
}

.hero-actions {
  display: flex;

  gap:
    0.75rem;

  flex-wrap:
    wrap;
}

.trust-row {
  display: flex;

  gap:
    1.25rem;

  flex-wrap:
    wrap;

  margin-top:
    1.5rem;

  color:
    var(--muted);

  font-size:
    0.9rem;
}


/* ==========================================
   HERO CARD
   ========================================== */

.hero-card {
  padding:
    1.5rem;

  border:
    1px solid var(--border);

  border-radius:
    18px;

  background:
    white;

  box-shadow:
    0 15px 40px
    rgba(17, 24, 39, 0.07);
}

.hero-card-top {
  display: flex;

  justify-content:
    space-between;

  gap:
    1rem;

  align-items:
    flex-start;

  padding-bottom:
    1.2rem;

  border-bottom:
    1px solid var(--border);
}

.hero-card-top strong {
  display: block;

  margin-top:
    0.25rem;

  font-size:
    1.35rem;
}

.summary-list {
  display: grid;

  gap:
    0.9rem;

  margin-top:
    1.2rem;
}

.summary-list div {
  display: flex;

  justify-content:
    space-between;

  gap:
    1rem;
}

.summary-list span {
  color:
    var(--muted);
}

.summary-list strong {
  text-align:
    right;

  font-size:
    0.9rem;
}


/* ==========================================
   SECTIONS
   ========================================== */

.section {
  padding:
    80px 0;
}

.section-alt {
  background:
    var(--background-alt);
}

.section-heading {
  display: flex;

  justify-content:
    space-between;

  align-items:
    flex-end;

  gap:
    2rem;

  margin-bottom:
    2rem;
}


/* ==========================================
   LEGEND
   ========================================== */

.legend {
  display: flex;

  gap:
    1rem;

  flex-wrap:
    wrap;

  color:
    var(--muted);

  font-size:
    0.85rem;
}

.legend span {
  display: inline-flex;

  align-items:
    center;

  gap:
    0.4rem;
}

.legend-dot {
  width: 9px;
  height: 9px;

  border-radius:
    50%;

  display:
    inline-block;
}

.available-dot {
  background:
    #22c55e;
}

.limited-dot {
  background:
    #f59e0b;
}

.full-dot {
  background:
    #ef4444;
}


/* ==========================================
   FILTERS
   ========================================== */

.filters {
  display: flex;

  gap:
    0.5rem;

  flex-wrap:
    wrap;

  margin-bottom:
    1.25rem;
}

.filter {
  appearance: none;

  border:
    1px solid var(--border);

  background:
    white;

  border-radius:
    999px;

  padding:
    0.55rem 0.9rem;

  color:
    var(--muted);

  font-weight:
    600;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.filter:hover {
  background:
    var(--background-alt);
}

.filter.active {
  background:
    var(--primary);

  border-color:
    var(--primary);

  color:
    white;
}


/* ==========================================
   MAIN AVAILABILITY CALENDAR
   ========================================== */

.calendar-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    1rem;
}


/* ==========================================
   CALENDAR NAVIGATION
   ========================================== */

.calendar-navigation {
  grid-column:
    1 / -1;

  display: flex;

  align-items:
    center;

  justify-content:
    space-between;

  width:
    100%;

  min-height:
    58px;

  margin-bottom:
    0.25rem;

  padding:
    0.55rem 0.65rem;

  border:
    1px solid var(--border);

  border-radius:
    14px;

  background:
    white;

  box-shadow:
    0 4px 14px
    rgba(17, 24, 39, 0.04);
}

.calendar-navigation-center {
  display: flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    0.65rem;

  min-width:
    0;

  text-align:
    center;
}

.calendar-navigation-label {
  font-size:
    0.82rem;

  font-weight:
    600;

  color:
    var(--muted);
}

.calendar-navigation-position {
  display: inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    30px;

  padding:
    0.3rem 0.65rem;

  border:
    1px solid var(--border);

  border-radius:
    999px;

  background:
    var(--background-alt);

  color:
    var(--text);

  font-size:
    0.72rem;

  font-weight:
    700;

  text-transform:
    uppercase;

  letter-spacing:
    0.04em;

  white-space:
    nowrap;
}

.calendar-month-nav {
  appearance: none;

  flex:
    0 0 auto;

  display: flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    40px;

  height:
    40px;

  padding:
    0;

  border:
    1px solid var(--border);

  border-radius:
    10px;

  background:
    white;

  color:
    var(--text);

  font-size:
    1.7rem;

  line-height:
    1;

  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.calendar-month-nav:hover:not(:disabled) {
  background:
    var(--background-alt);

  border-color:
    #d1d5db;
}

.calendar-month-nav:disabled {
  opacity:
    0.35;

  cursor:
    not-allowed;
}


/* ==========================================
   MONTH HEADING
   ========================================== */

.calendar-month-heading {
  grid-column:
    1 / -1;

  display: flex;

  align-items:
    center;

  justify-content:
    space-between;

  width:
    100%;

  min-height:
    76px;

  margin-top:
    0.5rem;

  margin-bottom:
    0.25rem;

  padding:
    1rem 1.25rem;

  border:
    1px solid var(--border);

  border-radius:
    16px;

  background:
    var(--background-alt);

  box-shadow:
    0 4px 14px
    rgba(17, 24, 39, 0.035);
}

.calendar-month-title {
  display: flex;

  align-items:
    baseline;

  gap:
    0.6rem;

  min-width:
    0;
}

.calendar-month-name {
  font-size:
    1.65rem;

  font-weight:
    800;

  line-height:
    1.1;

  letter-spacing:
    -0.03em;

  color:
    var(--text);
}

.calendar-month-year {
  font-size:
    1.05rem;

  font-weight:
    600;

  color:
    var(--muted);
}

.calendar-month-count {
  flex:
    0 0 auto;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    32px;

  padding:
    0.35rem 0.7rem;

  border:
    1px solid var(--border);

  border-radius:
    999px;

  background:
    white;

  color:
    var(--muted);

  font-size:
    0.7rem;

  font-weight:
    700;

  text-transform:
    uppercase;

  letter-spacing:
    0.05em;

  white-space:
    nowrap;
}


/* ==========================================
   DAY CARDS
   ========================================== */

.day-card {
  min-height:
    190px;

  padding:
    1rem;

  border:
    1px solid var(--border);

  border-radius:
    14px;

  background:
    white;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.day-card:hover {
  transform:
    translateY(-1px);

  box-shadow:
    0 5px 15px
    rgba(17, 24, 39, 0.05);
}

.day-heading {
  display: flex;

  justify-content:
    space-between;

  margin-bottom:
    1rem;
}

.day-name {
  font-size:
    0.8rem;

  color:
    var(--muted);
}

.day-number {
  font-size:
    1.7rem;

  font-weight:
    800;

  line-height:
    1;
}

.muted-label {
  color:
    var(--muted);

  font-size:
    0.78rem;
}

.service-status {
  display: flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    0.5rem;

  margin-top:
    0.7rem;

  font-size:
    0.82rem;
}


/* ==========================================
   STATUS PILLS
   ========================================== */

.status-pill {
  display: inline-flex;

  align-items:
    center;

  padding:
    0.25rem 0.55rem;

  border-radius:
    999px;

  font-size:
    0.72rem;

  font-weight:
    700;

  white-space:
    nowrap;
}

.status-pill.available {
  background:
    var(--available-bg);

  color:
    var(--available);
}

.status-pill.limited {
  background:
    var(--limited-bg);

  color:
    var(--limited);
}

.status-pill.full {
  background:
    var(--full-bg);

  color:
    var(--full);
}


/* ==========================================
   PRIVACY
   ========================================== */

.privacy-note {
  margin-top:
    1.5rem;

  color:
    var(--muted);

  font-size:
    0.82rem;
}


/* ==========================================
   REQUEST SECTION
   ========================================== */

.request-grid {
  display: grid;

  grid-template-columns:
    0.85fr 1.15fr;

  gap:
    60px;

  align-items:
    start;
}

.request-grid > div > p {
  color:
    var(--muted);
}

.info-card {
  margin-top:
    1.5rem;

  padding:
    1.25rem;

  border:
    1px solid var(--border);

  border-radius:
    14px;

  background:
    white;
}

.info-card ul {
  margin-bottom:
    0;

  padding-left:
    1.2rem;

  color:
    var(--muted);
}


/* ==========================================
   FORM
   ========================================== */

.booking-form {
  display: grid;

  gap:
    1rem;

  padding:
    1.5rem;

  border:
    1px solid var(--border);

  border-radius:
    18px;

  background:
    white;

  box-shadow:
    0 12px 30px
    rgba(17, 24, 39, 0.05);
}

.form-row {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    1rem;
}

.booking-form label {
  display: grid;

  gap:
    0.45rem;

  font-size:
    0.85rem;

  font-weight:
    700;
}

.booking-form input,
.booking-form select,
.booking-form textarea {
  width:
    100%;

  padding:
    0.75rem 0.8rem;

  border:
    1px solid var(--border);

  border-radius:
    9px;

  background:
    white;

  color:
    var(--text);

  outline:
    none;
}

.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
  border-color:
    #9ca3af;

  box-shadow:
    0 0 0 3px
    rgba(156, 163, 175, 0.15);
}

.booking-form textarea {
  resize:
    vertical;
}


/* ==========================================
   CUSTOM DATE PICKER
   ========================================== */

.date-picker-section {
  display: flex;

  flex-direction:
    column;

  gap:
    0.75rem;
}

.selected-dates {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    0.75rem;
}

.selected-dates > div {
  padding:
    0.85rem 1rem;

  border:
    1px solid var(--border);

  border-radius:
    10px;

  background:
    var(--background-alt);
}

.date-label {
  display: block;

  font-size:
    0.72rem;

  color:
    var(--muted);

  margin-bottom:
    0.25rem;

  text-transform:
    uppercase;

  letter-spacing:
    0.04em;
}

.selected-dates strong {
  font-size:
    0.95rem;
}

.date-picker {
  border:
    1px solid var(--border);

  border-radius:
    14px;

  padding:
    1rem;

  background:
    white;
}

.date-picker-header {
  display: flex;

  align-items:
    center;

  justify-content:
    space-between;

  margin-bottom:
    1rem;
}

.calendar-nav {
  width:
    36px;

  height:
    36px;

  border:
    0;

  border-radius:
    8px;

  background:
    #f3f4f6;

  cursor:
    pointer;

  font-size:
    1.5rem;

  line-height:
    1;
}

.calendar-nav:hover {
  background:
    #e5e7eb;
}

.calendar-weekdays,
.calendar-days {
  display: grid;

  grid-template-columns:
    repeat(7, 1fr);

  gap:
    4px;
}

.calendar-weekdays {
  margin-bottom:
    0.5rem;
}

.calendar-weekdays span {
  text-align:
    center;

  font-size:
    0.72rem;

  font-weight:
    600;

  color:
    var(--muted);
}

.calendar-day {
  aspect-ratio:
    1;

  border:
    0;

  border-radius:
    8px;

  background:
    transparent;

  cursor:
    pointer;

  font-size:
    0.9rem;

  color:
    var(--text);
}

.calendar-day:hover:not(:disabled) {
  background:
    #f3f4f6;
}

.calendar-day.empty {
  cursor:
    default;
}

.calendar-day.today {
  font-weight:
    700;

  box-shadow:
    inset 0 0 0 1px
    #9ca3af;
}

.calendar-day.unavailable {
  background:
    #f3f4f6;

  color:
    #9ca3af;

  text-decoration:
    line-through;

  cursor:
    not-allowed;
}

.calendar-day.past {
  color:
    #d1d5db;

  cursor:
    not-allowed;
}

.calendar-day.selected {
  background:
    var(--primary);

  color:
    white;

  font-weight:
    700;
}

.calendar-day.in-range {
  background:
    #e5e7eb;

  border-radius:
    0;
}

.calendar-day.selected.in-range {
  background:
    var(--primary);

  border-radius:
    8px;
}

.calendar-help {
  margin-top:
    1rem;

  text-align:
    center;

  font-size:
    0.8rem;

  color:
    var(--muted);
}


/* ==========================================
   FORM MESSAGE
   ========================================== */

.form-message {
  min-height:
    1.5rem;

  margin:
    0;

  color:
    var(--muted);

  font-size:
    0.85rem;
}

.form-message.error {
  color:
    #b42318;

  margin-top:
    12px;
}

.form-message.success {
  color:
    #067647;

  margin-top:
    12px;
}


/* ==========================================
   FOOTER
   ========================================== */

footer {
  border-top:
    1px solid var(--border);

  padding:
    1.5rem 0;

  color:
    var(--muted);

  font-size:
    0.8rem;
}

.footer-wrap {
  display: flex;

  justify-content:
    space-between;

  gap:
    1rem;
}


/* ==========================================
   CLICKABLE AVAILABILITY DATES
   ========================================== */

.clickable-date {
  cursor:
    pointer;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.clickable-date:hover {
  transform:
    translateY(-2px);
}


/* ==========================================
   SELECTED BOOKING DATES
   ========================================== */

.selected-date {
  outline:
    3px solid currentColor;

  outline-offset:
    -3px;
}


/* ==========================================
   LOADING
   ========================================== */

.loading {
  width:
    100%;

  padding:
    30px;

  text-align:
    center;

  color:
    #666;
}


/* ==========================================
   TABLET
   ========================================== */

@media (max-width: 900px) {

  .hero-grid,
  .request-grid {
    grid-template-columns:
      1fr;
  }


  .calendar-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .calendar-month-heading,
  .calendar-navigation {
    grid-column:
      1 / -1;
  }

}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 600px) {

  .container {
    width:
      min(
        calc(100% - 28px),
        1120px
      );
  }


  .hero {
    padding:
      60px 0 50px;
  }


  .section {
    padding:
      60px 0;
  }


  .section-heading {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .calendar-grid {
    grid-template-columns:
      1fr;

    gap:
      0.75rem;
  }


  .form-row {
    grid-template-columns:
      1fr;
  }


  .selected-dates {
    grid-template-columns:
      1fr;
  }


  .date-picker {
    padding:
      0.75rem;
  }


  .calendar-day {
    font-size:
      0.8rem;
  }


  .footer-wrap {
    flex-direction:
      column;
  }


  .nav-wrap {
    min-height:
      60px;
  }


  /* -------------------------------------------
     MOBILE CALENDAR NAVIGATION
     ------------------------------------------- */

  .calendar-navigation {
    min-height:
      54px;

    padding:
      0.4rem;
  }


  .calendar-month-nav {
    width:
      36px;

    height:
      36px;

    font-size:
      1.5rem;
  }


  .calendar-navigation-center {
    flex-direction:
      column;

    gap:
      0.15rem;
  }


  .calendar-navigation-label {
    font-size:
      0.72rem;
  }


  .calendar-navigation-position {
    min-height:
      auto;

    padding:
      0.15rem 0.45rem;

    font-size:
      0.62rem;
  }


  /* -------------------------------------------
     MOBILE MONTH HEADING
     ------------------------------------------- */

  .calendar-month-heading {
    min-height:
      68px;

    margin-top:
      0.25rem;

    padding:
      0.85rem 1rem;

    border-radius:
      14px;
  }


  .calendar-month-title {
    gap:
      0.35rem;
  }


  .calendar-month-name {
    font-size:
      1.35rem;
  }


  .calendar-month-year {
    font-size:
      0.9rem;
  }


  .calendar-month-count {
    min-height:
      28px;

    padding:
      0.25rem 0.5rem;

    font-size:
      0.6rem;
  }


  /* -------------------------------------------
     MOBILE DAY CARDS
     ------------------------------------------- */

  .day-card {
    min-height:
      160px;
  }

}