/* Octave Booking: brand styles (Octave Brand Guide palette) */
.ob {
  --ob-navy: #2f4156;
  --ob-cream: #fdf8f2;
  --ob-raised: #f4ede3;
  --ob-ink: #2f2f2f;
  --ob-muted: #5e6470;
  --ob-line: #d9cfc1;
  --ob-red: #c42a41;
  --ob-serif: "Libre Baskerville", Baskerville, Georgia, serif;
  --ob-sans: Poppins, "Helvetica Neue", Arial, sans-serif;
  --ob-radius: 14px;
  max-width: 880px;
  margin: 0 auto;
  font-family: var(--ob-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ob-ink);
}
.ob *, .ob *::before, .ob *::after { box-sizing: border-box; }
.ob button { font-family: inherit; }
.ob :is(button, a, input, textarea):focus-visible { outline: 2px solid var(--ob-navy); outline-offset: 2px; }

.ob-loading { color: var(--ob-muted); }

/* Steps */
.ob-steps { display: flex; gap: 0.5rem; list-style: none; margin: 0 0 1.75rem; padding: 0; }
.ob-steps li { flex: 1; display: flex; align-items: center; gap: 0.5rem; padding-top: 0.6rem; border-top: 3px solid var(--ob-line); color: var(--ob-muted); font-size: 0.82rem; }
.ob-steps li.is-done { border-color: var(--ob-navy); }
.ob-steps li.is-current { border-color: var(--ob-red); color: var(--ob-ink); font-weight: 600; }
.ob-step-num { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--ob-raised); font-size: 0.75rem; font-weight: 600; }
.ob-steps li.is-current .ob-step-num { background: var(--ob-red); color: var(--ob-cream); }
.ob-steps li.is-done .ob-step-num { background: var(--ob-navy); color: var(--ob-cream); }

/* Headings */
.ob-head { margin-bottom: 1.25rem; }
.ob-eyebrow { margin: 0 0 0.4rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ob-red); }
.ob-title { margin: 0; font-family: var(--ob-serif); font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 700; line-height: 1.2; color: var(--ob-ink); }
.ob-sub { margin: 0.6rem 0 0; color: var(--ob-muted); max-width: 40rem; }
.ob-h3 { margin: 2rem 0 0.75rem; font-family: var(--ob-serif); font-size: 1.25rem; }

.ob-back { margin: 0 0 1rem; padding: 0.25rem 0; border: 0; background: none; color: var(--ob-navy); font-size: 0.92rem; font-weight: 500; cursor: pointer; }
.ob-back:hover { text-decoration: underline; }

/* Choice cards */
.ob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ob-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ob-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem;
  padding: 1.4rem; text-align: left; cursor: pointer;
  border: 0; border-top: 3px solid var(--ob-navy); border-radius: 0 0 var(--ob-radius) var(--ob-radius);
  background: var(--ob-raised); color: var(--ob-ink);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.ob-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(47, 47, 47, 0.45); }
.ob-card.is-selected { background: var(--ob-navy); color: var(--ob-cream); }
.ob-card-tag { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ob-red); }
.ob-card.is-selected .ob-card-tag { color: var(--ob-cream); }
.ob-card-title { font-family: var(--ob-serif); font-size: 1.35rem; font-weight: 700; line-height: 1.25; }
.ob-card-price { font-family: var(--ob-serif); font-size: 1.6rem; font-weight: 700; color: var(--ob-navy); }
.ob-card.is-selected .ob-card-price { color: var(--ob-cream); }
.ob-card-meta { font-size: 0.9rem; color: var(--ob-muted); }
.ob-card.is-selected .ob-card-meta { color: var(--ob-cream); opacity: 0.85; }

/* Dates and times */
.ob-dates { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.25rem 0.1rem 0.75rem; scrollbar-width: thin; }
.ob-date {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; min-width: 4.25rem;
  padding: 0.6rem 0.5rem; border: 1.5px solid var(--ob-line); border-radius: 10px; background: #fff; color: var(--ob-ink); cursor: pointer;
}
.ob-date:hover { border-color: var(--ob-navy); }
.ob-date.is-selected { border-color: var(--ob-navy); background: var(--ob-navy); color: var(--ob-cream); }
.ob-date-wd, .ob-date-mo { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.ob-date-day { font-family: var(--ob-serif); font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.ob-date-label { margin: 0.75rem 0 0.6rem; font-weight: 600; }
.ob-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.6rem; }
.ob-time {
  padding: 0.85rem 0.75rem; border: 1.5px solid var(--ob-navy); border-radius: 2px;
  background: transparent; color: var(--ob-navy); font-size: 1rem; font-weight: 600; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.ob-time:hover, .ob-time.is-selected { background: var(--ob-red); border-color: var(--ob-red); color: var(--ob-cream); }

/* Form */
.ob-summary { margin: 0 0 1.5rem; padding: 1rem 1.25rem; border-left: 3px solid var(--ob-navy); background: var(--ob-raised); }
.ob-summary p { margin: 0.15rem 0; }
.ob-summary-title { font-weight: 600; }
.ob-summary-price { font-family: var(--ob-serif); font-size: 1.3rem; font-weight: 700; color: var(--ob-navy); }
.ob-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.ob-field { display: flex; flex-direction: column; gap: 0.35rem; }
.ob-field:has(textarea) { grid-column: 1 / -1; }
.ob-field label { font-size: 0.9rem; font-weight: 500; }
.ob-req { color: var(--ob-red); }
.ob-field input, .ob-field textarea {
  width: 100%; padding: 0.75rem 0.85rem; border: 1.5px solid var(--ob-line); border-radius: 2px;
  background: #fff; color: var(--ob-ink); font: inherit;
}
.ob-field input:focus, .ob-field textarea:focus { border-color: var(--ob-navy); outline: none; }
.ob-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.ob-methods { margin: 1.5rem 0 0; padding: 0; border: 0; }
.ob-methods legend { margin-bottom: 0.6rem; font-weight: 600; }
.ob-method { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 0.6rem; padding: 0.9rem 1rem; border: 1.5px solid var(--ob-line); border-radius: 2px; background: #fff; cursor: pointer; }
.ob-method:has(input:checked) { border-color: var(--ob-navy); box-shadow: inset 0 0 0 1px var(--ob-navy); }
.ob-method input { margin-top: 0.3rem; accent-color: var(--ob-navy); }
.ob-method strong { display: block; }
.ob-method span span { display: block; font-size: 0.88rem; color: var(--ob-muted); }
.ob-terms { display: flex; gap: 0.6rem; align-items: center; margin-top: 1rem; font-size: 0.92rem; }
.ob-terms a, .ob-link { color: var(--ob-red); text-decoration: underline; text-underline-offset: 3px; }
.ob-submit {
  margin-top: 1.5rem; padding: 0.9rem 1.6rem; border: 0; border-radius: 2px;
  background: var(--ob-red); color: var(--ob-cream); font-size: 1rem; font-weight: 600; cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ob-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(47, 47, 47, 0.45); }
.ob-submit[disabled] { opacity: 0.6; cursor: wait; transform: none; }
.ob-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.ob-actions .ob-back { margin: 1.5rem 0 0; }

.ob-error { margin: 1rem 0; padding: 0.8rem 1rem; border-left: 3px solid var(--ob-red); background: #fbeaec; color: #7a1a28; }
.ob-success { margin: 0 0 1.25rem; padding: 0.8rem 1rem; border-left: 3px solid var(--ob-navy); background: var(--ob-raised); font-weight: 500; }
.ob-empty { padding: 1.25rem; background: var(--ob-raised); }

/* Package view */
.ob-meter { display: flex; align-items: baseline; gap: 0.75rem; margin-top: 1.25rem; padding: 1rem 1.25rem; background: var(--ob-navy); color: var(--ob-cream); border-radius: var(--ob-radius); }
.ob-meter-num { font-family: var(--ob-serif); font-size: 2.4rem; font-weight: 700; line-height: 1; }
.ob-meter-label { font-size: 0.95rem; }
.ob-lessons { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.ob-lessons li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--ob-line); }
.ob-lesson-when strong { display: block; }
.ob-lesson-when span { font-size: 0.92rem; color: var(--ob-muted); }
.ob-badge { flex: 0 0 auto; padding: 0.2rem 0.55rem; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; background: var(--ob-raised); color: var(--ob-muted); }
.ob-badge-confirmed { background: var(--ob-navy); color: var(--ob-cream); }
.ob-rebook { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--ob-line); }
.ob-done .ob-summary { margin-top: 1.25rem; }

/* Scheduling a whole plan */
.ob-progress { margin: 0 0 1rem; }
.ob-progress-label { margin: 0 0 0.45rem; font-size: 0.95rem; }
.ob-progress-by { color: var(--ob-muted); }
.ob-progress-bar { height: 6px; background: var(--ob-raised); border-radius: 3px; overflow: hidden; }
.ob-progress-bar span { display: block; height: 100%; background: var(--ob-navy); transition: width 0.3s ease; }
.ob-picks { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.5rem; }
.ob-picks li { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.5rem 0.55rem 0.75rem; background: var(--ob-raised); border-left: 3px solid var(--ob-navy); font-size: 0.92rem; }
.ob-pick-num { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--ob-navy); color: var(--ob-cream); font-size: 0.72rem; font-weight: 600; }
.ob-pick-when { flex: 1; }
.ob-pick-remove { flex: 0 0 auto; width: 2rem; height: 2rem; border: 0; background: transparent; color: var(--ob-muted); font-size: 1.25rem; line-height: 1; cursor: pointer; border-radius: 2px; }
.ob-pick-remove:hover { color: var(--ob-red); background: #fff; }
.ob-repeat { margin: 0 0 1rem; padding: 0.6rem 1rem; border: 1.5px solid var(--ob-navy); border-radius: 2px; background: #fff; color: var(--ob-navy); font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.ob-repeat:hover { background: var(--ob-navy); color: var(--ob-cream); }
.ob-note { margin: 0 0 1rem; padding: 0.7rem 1rem; border-left: 3px solid var(--ob-line); background: #fff; color: var(--ob-ink); font-size: 0.92rem; }
.ob-date.has-pick { border-color: var(--ob-navy); box-shadow: inset 0 -3px 0 var(--ob-red); }
.ob-date.is-selected.has-pick { box-shadow: inset 0 -3px 0 var(--ob-red); }
.ob-dates-wrap { flex-wrap: wrap; overflow: visible; }
.ob-time[disabled] { opacity: 0.35; cursor: not-allowed; }
.ob-time[disabled]:hover { background: transparent; color: var(--ob-navy); border-color: var(--ob-navy); }
.ob-submit[disabled]:not([aria-busy]) { cursor: not-allowed; }
a.ob-submit, a.ob-repeat { display: inline-block; text-decoration: none; }
.ob-summary-list { margin: 0.4rem 0 0.6rem; padding-left: 1.1rem; }
.ob-summary-list li { margin: 0.1rem 0; }

/* Add-on sessions */
.ob-addon { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem; margin: 1.5rem 0 0; padding: 1rem 1.25rem; border: 1.5px dashed var(--ob-line); background: #fff; }
.ob-addon > div { flex: 1 1 16rem; }
.ob-addon .ob-repeat { margin: 0; }
.ob-addon-quiet { border-style: solid; justify-content: flex-start; padding: 0.7rem 1rem; }
.ob-addon p { margin: 0; }
.ob-addon-title { font-weight: 600; }
.ob-addon-text { font-size: 0.92rem; color: var(--ob-muted); }
.ob-link-btn { padding: 0; border: 0; background: none; color: var(--ob-red); font-size: 0.92rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ob-summary .ob-link-btn { margin-top: 0.6rem; }

/* Policy */
.ob-policy { margin: 1.5rem 0 0; padding: 1.1rem 1.25rem; border: 1.5px solid var(--ob-line); background: #fff; }
.ob-policy-title { margin: 0 0 0.5rem; font-weight: 600; }
.ob-policy ul { margin: 0; padding-left: 1.1rem; font-size: 0.92rem; color: var(--ob-ink); }
.ob-policy li { margin: 0.25rem 0; }
.ob-terms { align-items: flex-start; }
.ob-terms input { margin-top: 0.3rem; accent-color: var(--ob-navy); }
.ob-fine { margin: 0.75rem 0 0; font-size: 0.88rem; color: var(--ob-muted); }

/* Managing lessons */
.ob-move { flex: 0 0 auto; padding: 0.35rem 0.9rem; border: 1.5px solid var(--ob-navy); border-radius: 2px; background: transparent; color: var(--ob-navy); font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.ob-move:hover { background: var(--ob-red); border-color: var(--ob-red); color: var(--ob-cream); }
.ob-lessons li.is-moving { background: var(--ob-raised); padding-left: 0.75rem; padding-right: 0.75rem; }
.ob-badge-no_show { background: #fbeaec; color: #7a1a28; }

/* Own the Room */
.ob-seat { margin-top: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--ob-navy); }
.ob-seat.is-low { color: var(--ob-red); }
.ob-card.is-selected .ob-seat { color: var(--ob-cream); }
.ob-card.is-full { cursor: not-allowed; opacity: 0.6; }
.ob-card.is-full:hover { transform: none; box-shadow: none; }
.ob-seat.is-full { color: var(--ob-muted); }
.ob-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem; margin: 1.25rem 0 1.5rem; padding: 1.1rem 1.25rem; background: var(--ob-raised); border-radius: var(--ob-radius); }
.ob-facts dt { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ob-muted); padding-top: 0.2rem; }
.ob-facts dd { margin: 0; font-weight: 500; }
.ob-renew { margin-top: 1.5rem; padding-top: 0.5rem; border-top: 1px solid var(--ob-line); }

@media (max-width: 700px) {
  .ob-grid { grid-template-columns: 1fr; }
  .ob-fields { grid-template-columns: 1fr; }
  .ob-step-name { display: none; }
  .ob-steps li { justify-content: center; }
  .ob-submit { width: 100%; text-align: center; }
  .ob-picks { grid-template-columns: 1fr; }
  .ob-facts { grid-template-columns: 1fr; gap: 0.15rem; }
  .ob-facts dd { margin-bottom: 0.6rem; }
  .ob-actions .ob-back { margin-top: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ob * { transition: none !important; }
  .ob-card:hover, .ob-submit:hover { transform: none; }
  .ob-progress-bar span { transition: none; }
}