.fm-booking-app {
  --fm-blue: #2563eb;
  --fm-magenta: #ec168c;
  --fm-navy: #0b163f;
  --fm-ice: #f7faff;
  --fm-white: #fff;
  --fm-slate: #475569;
  --fm-border: #dce6f3;
  --fm-green: #15803d;
}

.fm-booking-app,
.fm-booking-app * {
  box-sizing: border-box;
}

.fm-booking-content[hidden],
.fm-access-gate[hidden] {
  display: none !important;
}

.fm-booking-app {
  width: min(940px, calc(100% - 28px));
  margin: 32px auto 72px;
  color: var(--fm-navy);
  font: 16px/1.55 Inter, Poppins, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.fm-event-hero,
.fm-form-card,
.fm-success,
.fm-access-gate {
  border: 1px solid var(--fm-border);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 50px rgba(11, 22, 63, 0.08);
}

.fm-form-card,
.fm-success,
.fm-access-gate { scroll-margin-top: 110px; }

.fm-access-gate {
  width: min(620px, 100%);
  margin: 8vh auto;
  padding: clamp(28px, 6vw, 52px);
  text-align: left;
}

.fm-access-gate h1 {
  margin: 6px 0 12px;
  color: var(--fm-navy);
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.fm-access-gate > p:not(.fm-eyebrow) {
  color: var(--fm-slate);
}

.fm-access-form {
  display: grid;
  gap: 15px;
  margin-top: 26px;
}

.fm-access-form label {
  display: grid;
  gap: 8px;
  color: var(--fm-navy);
  font-weight: 800;
}

.fm-access-form input {
  width: 100%;
  min-height: 56px;
  padding: 13px 15px;
  border: 1.5px solid #cbd5e1;
  border-radius: 14px;
  color: var(--fm-navy);
  background: #fff;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fm-access-form input:focus {
  border-color: var(--fm-blue);
  outline: 0;
  box-shadow: 0 0 0 4px rgba(37,99,235,.13);
}

.fm-unlock {
  min-height: 56px;
  padding: 13px 20px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--fm-blue), #7c3aed 58%, var(--fm-magenta));
  box-shadow: 0 12px 28px rgba(37,99,235,.25);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
}

.fm-unlock:disabled { cursor: wait; opacity: .65; }
.fm-gate-status { min-height: 24px; color: #b91c1c; font-weight: 750; }

.fm-event-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 6vw, 58px);
  color: #fff;
  background: linear-gradient(135deg, #0b163f 0%, #162f77 68%, #2563eb 100%);
}

.fm-event-hero::after {
  position: absolute;
  inset: auto -90px -130px auto;
  width: 320px;
  height: 320px;
  border: 54px solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  content: "";
}

.fm-event-hero h1,
.fm-form-card h2,
.fm-success h2 {
  margin: 4px 0 10px;
  color: inherit;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.fm-event-hero h1 { font-size: clamp(2.2rem, 7vw, 4.7rem); }
.fm-form-card h2,
.fm-success h2 { font-size: clamp(1.55rem, 4vw, 2.25rem); }

.fm-eyebrow,
.fm-step-number {
  margin: 0;
  color: #ff55b1;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fm-event-name { max-width: 680px; font-size: 1.1rem; opacity: 0.85; }
.fm-event-facts { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.fm-event-facts span,
.fm-event-facts a { padding: 9px 13px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }

.fm-booking-form { display: grid; gap: 22px; margin-top: 22px; }
.fm-form-card,
.fm-success { padding: clamp(24px, 5vw, 42px); }
.fm-form-card > p { color: var(--fm-slate); }
.fm-form-card label { display: grid; gap: 8px; color: var(--fm-navy); font-weight: 700; }
.fm-form-card label span { color: #64748b; font-size: 0.9em; font-weight: 500; }

.fm-form-card input:not([type="radio"]):not([type="checkbox"]),
.fm-form-card select,
.fm-form-card textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1.5px solid #cbd5e1;
  border-radius: 13px;
  outline: 0;
  background: #fff;
  color: var(--fm-navy);
  font: inherit;
  font-weight: 500;
}

.fm-form-card textarea { min-height: 118px; resize: vertical; }
.fm-form-card input:focus,
.fm-form-card select:focus,
.fm-form-card textarea:focus { border-color: var(--fm-blue); box-shadow: 0 0 0 4px rgba(37,99,235,.13); }

.fm-field-grid { display: grid; gap: 18px; margin-top: 22px; }
.fm-field-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fm-field-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fm-field-wide { grid-column: 1 / -1; }
.fm-choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0; }

.fm-choice-card { position: relative; cursor: pointer; }
.fm-choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.fm-choice-card > span { display: grid; min-height: 86px; place-content: center; gap: 3px; padding: 14px; border: 1.5px solid var(--fm-border); border-radius: 14px; color: var(--fm-navy); background: var(--fm-ice); text-align: center; font-weight: 800; }
.fm-choice-card > span b { font-size: 1rem; }
.fm-choice-card > span small { color: #64748b; font-size: .76rem; font-weight: 650; }
.fm-choice-card input:checked + span { border-color: var(--fm-blue); color: var(--fm-blue); background: #edf4ff; box-shadow: inset 0 0 0 1px var(--fm-blue); }

.fm-vehicle-instruction { margin-bottom: 0; }
.fm-vehicle-lookup { margin-top: 22px; padding: 18px; border: 1px solid var(--fm-border); border-radius: 18px; background: linear-gradient(145deg, #fff, #f7faff); }
.fm-vehicle-lookup .fm-field-grid { margin-top: 0; }
.fm-vehicle-selects[hidden],
.fm-vehicle-manual[hidden] { display: none !important; }
.fm-combobox { position: relative; display: block; }
.fm-combobox::after { position: absolute; top: 50%; right: 18px; width: 10px; height: 10px; border: 2px solid var(--fm-blue); border-top: 0; border-left: 0; content: ""; pointer-events: none; transform: translateY(-65%) rotate(45deg); }
.fm-combobox:focus-within::after { transform: translateY(-30%) rotate(225deg); }
.fm-combobox input[type="search"] { width: 100%; padding-right: 48px !important; }
.fm-combobox input[type="search"]::-webkit-search-cancel-button { margin-right: 24px; }
.fm-combobox-list { position: absolute; z-index: 40; top: calc(100% + 7px); left: 0; width: 100%; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; padding: 7px; border: 1.5px solid #b9cff4; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px rgba(11,22,63,.18); -webkit-overflow-scrolling: touch; }
.fm-combobox-list[hidden] { display: none !important; }
.fm-combobox-option { display: block; width: 100%; min-height: 46px; padding: 10px 12px; border: 0; border-radius: 9px; color: var(--fm-navy); background: transparent; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.fm-combobox-option:hover,
.fm-combobox-option[aria-selected="true"] { color: var(--fm-blue); background: #edf4ff; }
.fm-combobox-empty { display: block; padding: 12px; color: #64748b; font-size: .86rem; font-weight: 650; line-height: 1.4; }
.fm-search-hint { display: block; margin-top: 6px; color: #64748b; font-size: .76rem; font-weight: 650; }
.fm-manual-toggle { margin-top: 14px; padding: 5px 0; border: 0; color: var(--fm-blue); background: transparent; font: inherit; font-weight: 800; text-align: left; cursor: pointer; }
.fm-manual-toggle:hover,
.fm-manual-toggle:focus-visible { text-decoration: underline; }
.fm-vehicle-status { min-height: 22px; margin-top: 8px; color: #64748b; font-size: .88rem; font-weight: 650; }

.fm-service-list { display: grid; gap: 12px; margin-top: 22px; }
.fm-service-card[hidden] { display: none !important; }
.fm-service-card { grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 18px; border: 1.5px solid var(--fm-border); border-radius: 16px; cursor: pointer; background: #fff; }
.fm-service-card:not([hidden]) { display: grid; }
.fm-service-card.is-selected { border-color: var(--fm-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.fm-service-card input { width: 20px; height: 20px; accent-color: var(--fm-blue); }
.fm-service-copy,
.fm-service-price { display: grid; gap: 3px; }
.fm-service-copy small,
.fm-service-price small { color: #64748b; font-weight: 600; }
.fm-service-copy .fm-service-description { color: var(--fm-slate); font-size: .88rem; font-weight: 500; line-height: 1.45; }
.fm-service-copy .fm-service-class-badge { width: max-content; padding: 3px 8px; border-radius: 999px; color: var(--fm-blue); background: #edf4ff; font-size: .72rem; font-weight: 850; letter-spacing: .03em; text-transform: uppercase; }
.fm-service-price { text-align: right; }

.fm-times-status { margin-top: 18px; color: var(--fm-slate); font-weight: 700; }
.fm-time-picker { position: relative; margin-top: 18px; padding: 18px; border: 1px solid #bed3f7; border-radius: 16px; background: linear-gradient(135deg, #f5f9ff, #fff); }
.fm-time-picker[hidden] { display: none !important; }
.fm-time-picker::after { position: absolute; right: 35px; bottom: 34px; width: 10px; height: 10px; border-right: 3px solid var(--fm-blue); border-bottom: 3px solid var(--fm-blue); content: ""; pointer-events: none; transform: rotate(45deg); }
.fm-time-select { min-height: 58px !important; padding-right: 54px !important; border: 2px solid #bed3f7 !important; color: var(--fm-blue) !important; background: #fff !important; font-size: 1.08rem !important; font-weight: 850 !important; appearance: none; cursor: pointer; }
.fm-time-select:focus { border-color: var(--fm-blue) !important; }
.fm-time-select:disabled { cursor: wait; opacity: .65; }

.fm-booking-summary { display: grid; gap: 4px; margin: 20px 0; padding: 18px; border-radius: 14px; background: #f1f6ff; }
.fm-terms { grid-template-columns: auto 1fr !important; align-items: start; margin: 20px 0; }
.fm-terms input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--fm-blue); }
.fm-submit { width: 100%; min-height: 56px; padding: 13px 20px; border: 0; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--fm-blue), #7c3aed 58%, var(--fm-magenta)); box-shadow: 0 12px 28px rgba(37,99,235,.25); font: inherit; font-size: 1.08rem; font-weight: 900; cursor: pointer; }
.fm-submit:disabled { cursor: not-allowed; opacity: 0.5; }
.fm-secure-note { margin-bottom: 0; text-align: center; font-size: 0.9rem; }

.fm-form-error,
.fm-booking-notice { margin: 18px 0; padding: 16px 18px; border-radius: 13px; font-weight: 750; }
.fm-form-error,
.fm-booking-app .fm-error,
.fm-booking-notice.fm-error { border: 1px solid #fecaca; color: #b91c1c; background: #fff1f2; }
.fm-booking-app .fm-warning { border: 1px solid #fde68a; color: #854d0e; background: #fffbeb; }
.fm-success { margin-top: 22px; border-color: #bbf7d0; background: #f0fdf4; }
.fm-success .fm-eyebrow { color: var(--fm-green); }
.fm-success-message { white-space: pre-line; }
.fm-success-details { display: grid; gap: 4px; margin-top: 20px; padding: 18px; border: 1px solid #bbf7d0; border-radius: 14px; background: #fff; }
.fm-success-details span { color: var(--fm-slate); }
.fm-confirmation-reference { margin-top: 20px; color: var(--fm-green); font-weight: 900; }
.fm-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

@media (max-width: 700px) {
  .fm-booking-app { width: min(100% - 20px, 940px); margin-top: 18px; }
  .fm-event-hero,
  .fm-form-card,
  .fm-success { border-radius: 18px; }
  .fm-field-grid-two,
  .fm-field-grid-three { grid-template-columns: 1fr; }
  .fm-field-wide { grid-column: auto; }
  .fm-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fm-vehicle-lookup { padding: 15px; }
  .fm-combobox-list { max-height: min(42vh, 320px); }
  .fm-combobox-option { min-height: 50px; }
  .fm-time-select { font-size: 16px !important; }
}

@media (max-width: 430px) {
  .fm-service-card { grid-template-columns: auto 1fr; }
  .fm-service-price { grid-column: 2; text-align: left; }
  .fm-choice-grid { gap: 9px; }
  .fm-choice-card > span { min-height: 90px; padding: 10px 8px; }
}
