/* =========================================

   HOLLOW ELEVEN HAIR STUDIO

   WAITLIST PAGE

   Matches Google Apps Script booking page

========================================= */

:root {

  --slate: #758a9f;

  --slate-dark: #34495c;

  --ink: #202020;

  --cream: #f3eee6;

  --paper: #fbf9f5;

  --white: #ffffff;

  --line: #d8cec1;

  --muted: #6f6b66;

  --success-bg: #edf2ec;

  --success-text: #3f5944;

  --error-bg: #f7e8e5;

  --error-text: #7d3832;

  --shadow: 0 20px 55px rgba(37, 37, 37, 0.08);

}

* {

  box-sizing: border-box;

}

/* BACKGROUND */

.booking-section {

  min-height: 80vh;

  background:

    radial-gradient(

      circle at 15% 10%,

      rgba(255, 255, 255, 0.85),

      transparent 34%

    ),

    radial-gradient(

      circle at 85% 70%,

      rgba(117, 138, 159, 0.08),

      transparent 36%

    ),

    var(--cream);

  color: var(--ink);

  font-family: Arial, Helvetica, sans-serif;

}

.booking-container {

  width: 100%;

  max-width: 1040px;

  margin: 0 auto;

  padding: 42px 20px;

}

/* MAIN CARD */

.booking-card {

  width: 100%;

  max-width: 980px;

  margin: 0 auto;

  padding: clamp(30px, 5vw, 64px);

  background: rgba(251, 249, 245, 0.98);

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

  box-shadow: var(--shadow);

}

/* HEADER */

.booking-header {

  max-width: 720px;

  margin: 0 auto 44px;

  text-align: center;

}

.booking-header h1 {

  margin: 0;

  color: var(--ink);

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(34px, 5vw, 55px);

  font-weight: 400;

  letter-spacing: 0.075em;

  line-height: 1.12;

  text-transform: uppercase;

}

.title-line {

  width: 46px;

  height: 1px;

  margin: 20px auto;

  background: var(--ink);

}

.booking-header .studio-name {

  margin: 0 0 24px;

  color: var(--muted);

  font-size: 12px;

  font-weight: 400;

  letter-spacing: 0.34em;

  line-height: 1.6;

  text-transform: uppercase;

}

.booking-header .intro {

  margin: 0;

  color: var(--muted);

  font-size: 15px;

  line-height: 1.75;

}

/* FORM SECTIONS */

.form-section {

  padding: 38px 0;

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

}

.step-heading {

  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 20px;

  color: var(--ink);

  font-family: Arial, Helvetica, sans-serif;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.24em;

  line-height: 1.4;

  text-transform: uppercase;

}

.step-number {

  display: inline-flex;

  flex: 0 0 auto;

  align-items: center;

  justify-content: center;

  width: 30px;

  height: 30px;

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

  border-radius: 50%;

  color: var(--ink);

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 0;

}

/* LABELS AND FIELDS */

#waitlistForm .field {

  margin-bottom: 22px;

}

#waitlistForm label:not(.choice):not(.policy-consent-label):not(.sms-consent-label) {

  display: block;

  margin-bottom: 9px;

  color: var(--ink);

  font-size: 14px;

  font-weight: 600;

}

#waitlistForm .optional {

  color: var(--muted);

  font-weight: 400;

}

#waitlistForm input[type="text"],

#waitlistForm input[type="email"],

#waitlistForm input[type="tel"],

#waitlistForm input[type="date"],

#waitlistForm select,

#waitlistForm textarea {

  display: block;

  width: 100%;

  min-height: 54px;

  padding: 14px 16px;

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

  border-radius: 0;

  outline: none;

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

  color: var(--ink);

  font: inherit;

  font-size: 14px;

  transition:

    border-color 160ms ease,

    box-shadow 160ms ease,

background 160ms ease;

}

#waitlistForm textarea {

  min-height: 132px;

  resize: vertical;

}

#waitlistForm select {

  cursor: pointer;

}

#waitlistForm input:focus,

#waitlistForm select:focus,

#waitlistForm textarea:focus {

  border-color: var(--slate);

  background: var(--white);

  box-shadow: 0 0 0 2px rgba(117, 138, 159, 0.13);

}

#waitlistForm input::placeholder,

#waitlistForm textarea::placeholder {

  color: #96918b;

}

/* TWO-COLUMN LAYOUTS */

.information-grid,

.date-range-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 18px;

}

/* DATE INFORMATION */

.field-help,

.form-help {

  margin: 8px 0 18px;

  color: var(--muted);

  font-size: 12px;

  line-height: 1.6;

}

/* INFORMATION NOTICE */

.waitlist-notice {

  margin: 24px 0;

  padding: 22px 24px;

  border: 1px solid rgba(117, 138, 159, 0.28);

  background: rgba(117, 138, 159, 0.07);

  color: #4f4c48;

  font-size: 14px;

  line-height: 1.7;

}

/* SUBMIT BUTTON */

.submit-button {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 15px;

  width: min(100%, 700px);

  min-height: 60px;

  margin: 20px auto 0;

  padding: 14px 24px;

  border: 0;

  border-radius: 0;

  background: var(--slate-dark);

  color: var(--white);

  cursor: pointer;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 0.20em;

  text-transform: uppercase;

  transition:

background 160ms ease,

    transform 160ms ease;

}

.submit-button:hover:not(:disabled) {

  background: var(--slate);

  transform: translateY(-1px);

}

.submit-button:disabled {

  cursor: not-allowed;

  opacity: 0.62;

}

.button-arrow {

  font-size: 22px;

  font-weight: 400;

  letter-spacing: 0;

}

/* FORM MESSAGES */

.message {

  display: none;

  width: min(100%, 700px);

  margin: 24px auto 0;

  padding: 18px;

  border: 1px solid transparent;

  font-size: 14px;

  line-height: 1.6;

  text-align: center;

}

.message.success {

  display: block;

  border-color: #c8d6c7;

  background: var(--success-bg);

  color: var(--success-text);

}

.message.error {

  display: block;

  border-color: #e2c4bf;

  background: var(--error-bg);

  color: var(--error-text);

}

/* MOBILE */

@media (max-width: 760px) {

  .booking-container {

    padding: 14px;

  }

  .booking-card {

    padding: 30px 20px;

  }

  .booking-header h1 {

    font-size: clamp(31px, 9vw, 40px);

    letter-spacing: 0.04em;

  }

  .booking-header .studio-name {

    letter-spacing: 0.23em;

  }

  .form-section {

    padding: 30px 0;

  }

  .information-grid,

  .date-range-grid {

    grid-template-columns: 1fr;

    gap: 0;

  }

}

@media (max-width: 500px) {
  .waitlist-notice {

    padding: 18px 16px;

  }

}

@media (prefers-reduced-motion: reduce) {

  .submit-button,

  #waitlistForm .checkbox-option {

    transition: none;

  }

}

/* Hide spam protection field */

.honeypot {

  position: absolute !important;

  width: 1px !important;

  height: 1px !important;

  padding: 0 !important;

  margin: 0 !important;

  overflow: hidden !important;

  clip-path: inset(50%) !important;

  white-space: nowrap !important;

  border: 0 !important;

}

/* =========================================

   POLICY & SMS CONSENT

   Matches Hollow Eleven booking page

========================================= */

#waitlistForm .policy-consent,

#waitlistForm .sms-consent {

  width: min(100%, 700px);

  margin: 36px auto 28px;

  padding: 24px;

  border: 1px solid rgba(117, 138, 159, 0.28);

  background: rgba(117, 138, 159, 0.07);

}

#waitlistForm .policy-consent-label,

#waitlistForm .sms-consent-label {

  display: grid !important;

  grid-template-columns: 20px minmax(0, 1fr);

  align-items: start;

  gap: 22px;

  margin: 0 !important;

  cursor: pointer;

  font-weight: 400 !important;

}

#waitlistForm .policy-consent-label input,

#waitlistForm .sms-consent-label input {

  appearance: none;

  -webkit-appearance: none;

  position: relative;

  width: 20px;

  min-width: 20px;

  max-width: 20px;

  height: 20px;

  min-height: 20px;

  max-height: 20px;

  margin: 3px 0 0;

  padding: 0;

  border: 2px solid #8f9295;

  border-radius: 7px;

  background: #fff;

  cursor: pointer;

}

#waitlistForm .policy-consent-label input:checked,

#waitlistForm .sms-consent-label input:checked {

  border-color: var(--slate-dark);

  background: var(--slate-dark);

}

#waitlistForm .policy-consent-label input:checked::after,

#waitlistForm .sms-consent-label input:checked::after {

  content: "";

  position: absolute;

  left: 5px;

  top: 2px;

  width: 5px;

  height: 10px;

  border: solid #fff;

  border-width: 0 3px 3px 0;

  transform: rotate(45deg);

}

#waitlistForm .policy-consent-label span,

#waitlistForm .sms-consent-label span {

  min-width: 0;

  color: #4f4c48;

  font-size: 0.86rem;

  font-weight: 400;

  line-height: 1.65;

}

#waitlistForm .policy-consent-label a,

#waitlistForm .sms-consent-label a {

  color: var(--slate-dark);

  font-weight: 600;

  text-underline-offset: 3px;

}

#waitlistForm .policy-consent-note {

  margin: 18px 0 0 42px;

  padding-top: 16px;

  border-top: 1px solid rgba(117, 138, 159, 0.18);

  color: var(--muted);

  font-size: 0.8rem;

  line-height: 1.6;

}

/* Mobile — matches booking page */

@media (max-width: 600px) {

  #waitlistForm .policy-consent,

  #waitlistForm .sms-consent {

    padding: 18px 16px;

  }

  #waitlistForm .policy-consent-label,

  #waitlistForm .sms-consent-label {

    gap: 16px;

  }

  #waitlistForm .policy-consent-note {

    margin-left: 36px;

  }

}

/* WAITLIST DAY & TIME CHOICES */

#waitlistForm .choice-grid {

  display: grid;

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

  gap: 12px;

  margin: 14px 0 24px;

}

#waitlistForm .choice {

  display: flex;

  align-items: center;

  gap: 12px;

  min-height: 54px;

  margin: 0;

  padding: 14px 16px;

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

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

  color: var(--ink);

  cursor: pointer;

  font-size: 14px;

  font-weight: 400;

  line-height: 1.5;

}

#waitlistForm .choice:hover {

  border-color: var(--slate);

}

#waitlistForm .choice:has(input:checked) {

  border-color: var(--slate-dark);

  background: rgba(117, 138, 159, 0.12);

}

#waitlistForm .choice input[type="checkbox"] {

  flex: 0 0 auto;

  width: 18px;

  height: 18px;

  min-height: 18px;

  margin: 0;

  padding: 0;

  accent-color: var(--slate-dark);

}

@media (max-width: 500px) {

  #waitlistForm .choice-grid {

    grid-template-columns: 1fr;

  }

}