:root {
  --navy: #071827;
  --navy-soft: #0d2133;
  --line: #294257;
  --cyan: #3cc7ee;
  --gold: #d8961c;
  --text: #eaf1f6;
  --muted: #8fa4b1;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background: var(--navy);
  font-family: Arial, Helvetica, sans-serif;
}

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

.booking-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(360px, .85fr) minmax(580px, 1.15fr);
}

.booking-brand {
  display: flex;
  padding: clamp(35px, 5vw, 75px);
  justify-content: space-between;
  flex-direction: column;
  background:
    linear-gradient(90deg, rgba(7, 24, 39, .96), rgba(7, 24, 39, .78)),
    radial-gradient(circle at 80% 15%, rgba(60, 199, 238, .14), transparent 30%),
    repeating-linear-gradient(0deg, transparent 0 79px, rgba(60, 199, 238, .045) 80px),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(60, 199, 238, .045) 80px);
  border-right: 1px solid rgba(216, 150, 28, .55);
}

.booking-lockup {
  display: flex;
  align-items: center;
  gap: 16px;
}

.booking-lockup > span {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  color: #fff;
  border: 2px solid var(--gold);
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: 38px;
}

.booking-lockup strong,
.booking-lockup small { display: block; }
.booking-lockup strong { letter-spacing: .18em; }
.booking-lockup small { margin-top: 5px; color: var(--cyan); font-size: 9px; letter-spacing: .12em; }

.booking-brand-copy p,
.booking-card header p {
  margin: 0 0 12px;
  color: var(--cyan);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}

.booking-brand-copy h1 {
  margin: 0 0 24px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(48px, 5vw, 76px);
  font-weight: 500;
  line-height: 1.03;
}

.booking-brand-copy h1 em { color: var(--cyan); font-style: normal; }
.booking-brand-copy > span { display: block; max-width: 600px; color: #a2b4bf; line-height: 1.7; }

.booking-brand ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.booking-brand li { display: flex; align-items: center; gap: 12px; color: #b8c7d0; font-size: 13px; }
.booking-brand li b { display: grid; width: 30px; height: 30px; place-items: center; color: var(--navy); border-radius: 50%; background: var(--gold); }

.booking-card {
  display: flex;
  padding: clamp(35px, 6vw, 90px);
  justify-content: center;
  flex-direction: column;
  background: #0a1928;
}

.booking-card > header { margin-bottom: 30px; }
.booking-card h2 { margin: 0 0 10px; font-family: Georgia, serif; font-size: 36px; font-weight: 500; }
.booking-card header > span { color: var(--muted); font-size: 13px; }

#booking-form { display: grid; gap: 24px; }
.booking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.booking-card label { display: grid; gap: 7px; }
.booking-card label > span,
.slots-section > div:first-child > span {
  color: #aebdc6;
  font-size: 11px;
  font-weight: 700;
}

.booking-card input,
.booking-card select,
.booking-card textarea {
  width: 100%;
  min-height: 45px;
  padding: 11px 13px;
  color: #f0f5f8;
  border: 1px solid #345066;
  border-radius: 2px;
  outline: 0;
  background: #10283c;
}

.booking-card input:focus,
.booking-card select:focus,
.booking-card textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(60,199,238,.11); }

.slots-section {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  background: #081b2c;
}

.slots-section > div:first-child { display: flex; justify-content: space-between; gap: 20px; }
.slots-section small { color: var(--muted); }
.booking-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.booking-slots button {
  min-height: 40px;
  color: #b8c9d2;
  border: 1px solid #36546a;
  background: #10283c;
  cursor: pointer;
}
.booking-slots button:hover,
.booking-slots button.active { color: #062033; border-color: var(--cyan); background: var(--cyan); }

.booking-details { display: grid; gap: 16px; }
.booking-consent { grid-template-columns: 18px 1fr; align-items: start; }
.booking-consent input { width: 16px; min-height: 16px; margin: 1px 0 0; accent-color: var(--cyan); }
.booking-consent span { color: var(--muted) !important; font-weight: 400 !important; line-height: 1.5; }
.booking-honeypot { position: absolute; left: -10000px; }

#booking-submit {
  min-height: 48px;
  color: #071827;
  border: 0;
  background: var(--gold);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  cursor: pointer;
}
#booking-submit:disabled { cursor: not-allowed; opacity: .45; }

.booking-message { margin-bottom: 20px; padding: 14px; color: #b8e6ef; border: 1px solid #2b6070; background: #0c2b3a; line-height: 1.5; }
.booking-message.error { color: #efc2b7; border-color: #66453f; background: #291d1d; }
.booking-card footer { margin-top: 20px; color: #6f8795; font-size: 11px; }
.booking-unavailable { padding: 30px; border: 1px solid var(--line); background: var(--navy-soft); }
.booking-unavailable > p { color: var(--muted); line-height: 1.65; }
.booking-unavailable > p:first-child { color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.public-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.public-actions a,
.public-actions button { padding: 13px 16px; color: #071827; border: 0; background: var(--cyan); font-size: 11px; font-weight: 800; text-decoration: none; text-transform: uppercase; cursor: pointer; }
.public-actions a.danger,
.public-actions button.danger { color: #f1c0b5; border: 1px solid #6d423b; background: #301f1d; }

@media (max-width: 900px) {
  .booking-shell { grid-template-columns: 1fr; }
  .booking-brand { min-height: 520px; }
}

@media (max-width: 620px) {
  .booking-brand,
  .booking-card { padding: 28px 20px; }
  .booking-brand { min-height: 480px; }
  .booking-grid { grid-template-columns: 1fr; }
  .booking-slots { grid-template-columns: repeat(2, 1fr); }
  .booking-brand-copy h1 { font-size: 46px; }
}