/*
  Adrift Floating Sauna — SimplyBook.me Custom CSS
  Paste this into: SimplyBook Admin → Custom Features → Custom CSS → "Booking pages CSS" tab
  ─────────────────────────────────────────────────────────────────────────────
  Brand tokens:
    Background dark   #0a1628   --ocean-deep
    Background mid    #0d2240   --ocean-mid
    Background light  #112d52   --ocean-surface
    Gold accent       #c9a96e   --gold
    Gold light        #e8d4a8   --gold-light
    Body text         #e8ede4   --salt
    Muted text        #8fa8c0   --fog
    Light text        #c8d8e8   --mist
    White             #f4f0eb   --white
*/

/* ── FONTS ─────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Barlow:wght@300;400;500;600&family=Barlow+Condensed:wght@300;400;500;600&display=swap');

/* ── GLOBAL ─────────────────────────────────────────────────────────────────── */
html, body {
  background: #0a1628 !important;
  color: #e8ede4 !important;
  font-family: 'Barlow', sans-serif !important;
  font-weight: 300 !important;
}

*, *::before, *::after {
  box-sizing: border-box;
}

a { color: #c9a96e !important; }
a:hover { color: #e8d4a8 !important; }

/* ── MAIN CONTAINERS ────────────────────────────────────────────────────────── */
#sb-main-container,
.sb-main-container,
#app,
.app-container {
  background: #0a1628 !important;
  color: #e8ede4 !important;
}

#main,
.main-content,
.sb-content {
  background: #0a1628 !important;
}

#sb-timeline,
.sb-timeline {
  background: #0a1628 !important;
}

/* ── HEADER / COMPANY INFO ──────────────────────────────────────────────────── */
.company-info,
.company-info-block,
.header-block,
.sb-header,
.top-bar,
.booking-header {
  background: #0d2240 !important;
  border-bottom: 1px solid rgba(201, 169, 110, 0.15) !important;
  box-shadow: 0 1px 24px rgba(0,0,0,0.3) !important;
}

.company-name,
.company-info .name,
.sb-company-name,
h1.company-name {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
  color: #f4f0eb !important;
  font-size: 1.5rem !important;
  letter-spacing: 0.02em !important;
}

.company-address,
.company-description,
.company-info .address {
  color: #8fa8c0 !important;
  font-size: 0.85rem !important;
  font-weight: 300 !important;
}

/* ── STEP NAVIGATION ────────────────────────────────────────────────────────── */
#steps,
.steps,
.booking-steps,
.timeline-steps,
.sb-steps {
  background: #0d2240 !important;
  border-bottom: 1px solid rgba(200, 216, 232, 0.08) !important;
}

.step,
.timeline-step,
.booking-step,
.sb-step {
  color: #8fa8c0 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

.step.active,
.step.current,
.timeline-step.active,
.booking-step.active,
.sb-step--active {
  color: #c9a96e !important;
}

.step.done,
.step.completed,
.timeline-step.done,
.sb-step--done {
  color: #8fa8c0 !important;
  opacity: 0.6 !important;
}

/* Step number circles */
.step-number,
.step-circle,
.step .number,
.timeline-step__number,
.sb-step__number {
  background: transparent !important;
  border: 1px solid rgba(200, 216, 232, 0.2) !important;
  color: #8fa8c0 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 400 !important;
}

.step.active .step-number,
.step.active .step-circle,
.step.current .step-number,
.timeline-step.active .step-number,
.sb-step--active .sb-step__number {
  background: #c9a96e !important;
  border-color: #c9a96e !important;
  color: #0a1628 !important;
}

.step.done .step-number,
.step.done .step-circle,
.timeline-step.done .step-number {
  background: rgba(201, 169, 110, 0.2) !important;
  border-color: rgba(201, 169, 110, 0.3) !important;
  color: #c9a96e !important;
}

/* Step connector lines */
.step-connector,
.step-line,
.timeline-connector {
  background: rgba(200, 216, 232, 0.1) !important;
}

.step-connector.done,
.timeline-connector.done {
  background: rgba(201, 169, 110, 0.3) !important;
}

/* ── SECTION / PANEL HEADINGS ───────────────────────────────────────────────── */
.section-title,
.panel-heading,
.step-title,
.block-title,
h2, h3, h4 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  color: #f4f0eb !important;
}

.section-label,
.category-title,
.group-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.35em !important;
  text-transform: uppercase !important;
  color: #c9a96e !important;
  font-weight: 500 !important;
}

/* ── SERVICE / CATEGORY CARDS ───────────────────────────────────────────────── */
.service-item,
.service-card,
.category-item,
.sb-service,
.service-wrap {
  background: #0d2240 !important;
  border: 1px solid rgba(200, 216, 232, 0.1) !important;
  border-radius: 6px !important;
  color: #e8ede4 !important;
  transition: border-color 0.2s, background 0.2s !important;
}

.service-item:hover,
.service-card:hover,
.sb-service:hover {
  border-color: rgba(201, 169, 110, 0.35) !important;
  background: #112d52 !important;
}

.service-item.selected,
.service-card.selected,
.service-item.active {
  border-color: #c9a96e !important;
  background: rgba(201, 169, 110, 0.06) !important;
}

.service-name,
.service-title,
.sb-service__name {
  color: #f4f0eb !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 1.1rem !important;
}

.service-price,
.service-duration,
.service-meta,
.sb-service__price,
.sb-service__duration {
  color: #8fa8c0 !important;
  font-size: 0.85rem !important;
}

.service-price .price,
.price-amount {
  color: #c9a96e !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 500 !important;
}

.service-description,
.sb-service__description {
  color: #8fa8c0 !important;
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
}

/* Category pills/filters */
.category-tab,
.filter-tab,
.categories-list .category {
  background: transparent !important;
  border: 1px solid rgba(200, 216, 232, 0.15) !important;
  color: #8fa8c0 !important;
  border-radius: 4px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
}

.category-tab.active,
.filter-tab.active,
.categories-list .category.active {
  background: rgba(201, 169, 110, 0.12) !important;
  border-color: #c9a96e !important;
  color: #c9a96e !important;
}

/* ── CALENDAR ───────────────────────────────────────────────────────────────── */
.datepicker,
.datepicker-inline,
.calendar-wrap,
.calendar-table,
.flatpickr-calendar {
  background: #0d2240 !important;
  border: 1px solid rgba(200, 216, 232, 0.1) !important;
  border-radius: 6px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4) !important;
}

/* Month/year header */
.datepicker .datepicker-switch,
.datepicker th.datepicker-switch,
.calendar-nav,
.flatpickr-month {
  color: #f4f0eb !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 1.05rem !important;
  background: #0d2240 !important;
}

/* Nav arrows */
.datepicker .prev,
.datepicker .next,
.calendar-prev,
.calendar-next,
.flatpickr-prev-month,
.flatpickr-next-month {
  color: #8fa8c0 !important;
}
.datepicker .prev:hover,
.datepicker .next:hover {
  color: #c9a96e !important;
  background: transparent !important;
}

/* Day-of-week labels */
.datepicker table tr th,
.datepicker .dow,
.flatpickr-weekday {
  color: #8fa8c0 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

/* Day cells */
.datepicker table tr td.day,
.flatpickr-day {
  color: #c8d8e8 !important;
  border-radius: 4px !important;
}

.datepicker table tr td.day:hover,
.flatpickr-day:hover {
  background: rgba(201, 169, 110, 0.12) !important;
  color: #e8d4a8 !important;
}

/* Available days */
.datepicker table tr td.day.available {
  color: #e8ede4 !important;
}

/* Selected / active day */
.datepicker table tr td.active,
.datepicker table tr td.selected,
.datepicker table tr td.day.active,
.flatpickr-day.selected {
  background: #c9a96e !important;
  border-color: #c9a96e !important;
  color: #0a1628 !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
}

/* Disabled / unavailable days */
.datepicker table tr td.disabled,
.datepicker table tr td.day.disabled,
.flatpickr-day.disabled {
  color: rgba(143, 168, 192, 0.25) !important;
  text-decoration: none !important;
}

/* Today indicator */
.datepicker table tr td.today:not(.active),
.flatpickr-day.today {
  border-bottom: 2px solid rgba(201, 169, 110, 0.4) !important;
  border-radius: 0 !important;
}

/* ── TIME SLOTS ─────────────────────────────────────────────────────────────── */
.time-item,
.timeslot-item,
.time-slot,
.slot-item,
.sb-time-item {
  background: #0d2240 !important;
  border: 1px solid rgba(200, 216, 232, 0.1) !important;
  color: #8fa8c0 !important;
  border-radius: 6px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  letter-spacing: 0.1em !important;
  transition: border-color 0.2s, background 0.2s, color 0.2s !important;
}

.time-item:hover,
.timeslot-item:hover,
.slot-item:hover {
  border-color: rgba(201, 169, 110, 0.4) !important;
  color: #c9a96e !important;
  background: rgba(201, 169, 110, 0.06) !important;
}

.time-item.selected,
.time-item.active,
.timeslot-item.selected,
.timeslot-item.active,
.slot-item.selected {
  background: #c9a96e !important;
  border-color: #c9a96e !important;
  color: #0a1628 !important;
  font-weight: 600 !important;
}

.time-item.disabled,
.timeslot-item.disabled {
  opacity: 0.25 !important;
  pointer-events: none !important;
}

/* ── PROVIDER / STAFF ───────────────────────────────────────────────────────── */
.provider-item,
.performer-item,
.staff-item,
.sb-provider {
  background: #0d2240 !important;
  border: 1px solid rgba(200, 216, 232, 0.1) !important;
  border-radius: 6px !important;
}

.provider-item:hover,
.performer-item:hover {
  border-color: rgba(201, 169, 110, 0.3) !important;
}

.provider-item.selected,
.performer-item.selected {
  border-color: #c9a96e !important;
  background: rgba(201, 169, 110, 0.06) !important;
}

.provider-name,
.performer-name,
.staff-name {
  color: #f4f0eb !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
}

/* ── FORM FIELDS ────────────────────────────────────────────────────────────── */
.form-group label,
.control-label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: #c9a96e !important;
  margin-bottom: 0.4rem !important;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(200, 216, 232, 0.15) !important;
  border-radius: 6px !important;
  color: #e8ede4 !important;
  font-family: 'Barlow', sans-serif !important;
  font-weight: 300 !important;
  font-size: 0.95rem !important;
  transition: border-color 0.25s, box-shadow 0.25s !important;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: rgba(201, 169, 110, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.08) !important;
  background: rgba(255,255,255,0.07) !important;
  outline: none !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: rgba(143, 168, 192, 0.45) !important;
}

select option {
  background: #0d2240 !important;
  color: #e8ede4 !important;
}

/* Checkbox / radio */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #c9a96e !important;
}

/* ── BUTTONS ────────────────────────────────────────────────────────────────── */
.btn {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  font-size: 0.78rem !important;
  transition: background 0.25s, border-color 0.25s, color 0.25s !important;
}

/* Primary / confirm */
.btn-primary,
.btn-success,
.btn-book,
.book-button,
.confirm-button,
.btn-next,
.btn-submit {
  background: #c9a96e !important;
  border-color: #c9a96e !important;
  color: #0a1628 !important;
}

.btn-primary:hover,
.btn-success:hover,
.book-button:hover,
.btn-next:hover {
  background: #e8d4a8 !important;
  border-color: #e8d4a8 !important;
  color: #0a1628 !important;
}

/* Secondary / back */
.btn-default,
.btn-secondary,
.btn-back,
.btn-outline {
  background: transparent !important;
  border: 1px solid rgba(200, 216, 232, 0.2) !important;
  color: #8fa8c0 !important;
}

.btn-default:hover,
.btn-secondary:hover,
.btn-back:hover {
  border-color: rgba(201, 169, 110, 0.4) !important;
  color: #c9a96e !important;
  background: transparent !important;
}

/* Danger */
.btn-danger {
  background: transparent !important;
  border-color: rgba(196, 98, 45, 0.5) !important;
  color: #c4622d !important;
}

/* ── PANELS / CARDS ─────────────────────────────────────────────────────────── */
.panel,
.card,
.box,
.block,
.well {
  background: #0d2240 !important;
  border: 1px solid rgba(200, 216, 232, 0.08) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: #e8ede4 !important;
}

.panel-heading,
.card-header {
  background: rgba(255,255,255,0.03) !important;
  border-bottom: 1px solid rgba(200, 216, 232, 0.08) !important;
  color: #f4f0eb !important;
}

/* ── BOOKING SUMMARY / CONFIRMATION ─────────────────────────────────────────── */
#details,
.detail-step-wrap,
.detail-step,
.order-summary,
.booking-summary,
.confirmation-wrap {
  background: #0d2240 !important;
  border-radius: 6px !important;
}

.summary-label,
.booking-info-label,
.order-label {
  color: #8fa8c0 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

.summary-value,
.booking-info-value,
.order-value {
  color: #f4f0eb !important;
  font-weight: 400 !important;
}

/* Confirmation success icon / heading */
.confirmation-icon,
.success-icon {
  color: #c9a96e !important;
}

.confirmation-title,
.success-title,
.booking-confirmed-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
  color: #f4f0eb !important;
}

/* ── ALERTS / NOTICES ───────────────────────────────────────────────────────── */
.alert {
  border-radius: 6px !important;
  font-size: 0.9rem !important;
  font-weight: 300 !important;
}

.alert-info {
  background: rgba(201, 169, 110, 0.08) !important;
  border-color: rgba(201, 169, 110, 0.2) !important;
  color: #e8d4a8 !important;
}

.alert-success {
  background: rgba(201, 169, 110, 0.1) !important;
  border-color: rgba(201, 169, 110, 0.3) !important;
  color: #c9a96e !important;
}

.alert-danger,
.alert-error {
  background: rgba(196, 98, 45, 0.08) !important;
  border-color: rgba(196, 98, 45, 0.25) !important;
  color: #e07a4a !important;
}

/* ── DIVIDERS / SEPARATORS ──────────────────────────────────────────────────── */
hr,
.divider,
.separator {
  border-color: rgba(200, 216, 232, 0.08) !important;
}

/* ── MODALS (SimplyBook internal) ───────────────────────────────────────────── */
.modal-content {
  background: #0d2240 !important;
  border: 1px solid rgba(201, 169, 110, 0.2) !important;
  border-radius: 8px !important;
  color: #e8ede4 !important;
}

.modal-header {
  background: #0a1628 !important;
  border-bottom: 1px solid rgba(200, 216, 232, 0.08) !important;
}

.modal-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  color: #f4f0eb !important;
}

.modal-backdrop {
  background: #06101a !important;
}

/* ── SCROLLBAR ──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0a1628; }
::-webkit-scrollbar-thumb { background: rgba(201, 169, 110, 0.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(201, 169, 110, 0.45); }

/* ── FOOTER ─────────────────────────────────────────────────────────────────── */
.powered-by,
.simplybook-footer,
.sb-footer {
  border-top: 1px solid rgba(200, 216, 232, 0.06) !important;
  color: rgba(143, 168, 192, 0.4) !important;
  font-size: 0.7rem !important;
}

/* ── REMOVE TIMEZONE DISPLAY ────────────────────────────────────────────────── */
#sb_booking_company_time {
  display: none !important;
}

/* Small section actually written by a human (very rare and usual) */

.current-booking-info .cap,
#sb_back_to_bookings .back-to-services,
.sb-widget-form .buttons .open-booking-widget-button, .sb-widget-form .title,
#sb-timeline #steps-nav li a,
#sb-timeline #steps #sb_back_button a,
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_dateview_container .top-date-select .header,
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_dateview_container .top-date-select .calendar .weeks-name .name,
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step .container-caption,
#booking-result-view #booking-result-tabs .tabs-container .tab-link a,
.filter--header_hint,
#header .nav-wrapper #sb_menu .nav li a:hover,
#header .nav-wrapper #sb_menu .nav li a:focus,
#header .nav-wrapper #sb_menu .nav li a,
#main #main-buttons .wrapper .inner .company-name,
#membership-plugin .title-section,
#main #main-content #sb_content .map-view .main-title, #main #main-content #sb_content .map-view .title,
.membership-item .cap,
.title-main,
#main #main-content #sb_content #content-view section .overview tr td {
	font-family: 'Barlow', sans-serif !important;
}

body .see-more .btn a,
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_timeview_container .slots-view.as-table .timeline-wrapper #sb_time_slots_container .slot a,
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_dateview_container .top-date-select .calendar .weeks-date .date.selected .day-on,
#booking-result-view #booking-result-tabs .tabs-container .tab-link.active a,
#header .nav-wrapper #sb_menu .nav li.active a,
#membership-plugin .see-more .btn:after {
	color: #0a1628 !important;
}

#membership-view .mb.btn-bar .active-container a.wrapper,
#membership-view .mb.btn-bar .info-container a.wrapper
.see-more .btn,
.book-btn,
.payment-modal #sb_pay_btn,
#membership-plugin .mb.btn-bar .active-container .wrapper,
#main #main-buttons .btn.custom a {
  background-color: #c9a96e !important;
  color: #0a1628 !important;
}

#membership-view .mb.btn-bar .active-container a.wrapper:hover,
#membership-view .mb.btn-bar .info-container a.wrapper:hover,
#membership-view .mb.btn-bar .active-container a.wrapper:focus,
#membership-view .mb.btn-bar .info-container a.wrapper:focus,
.see-more .btn:hover,
.book-btn:hover,
.see-more .btn:focus,
.book-btn:focus,
.payment-modal #sb_pay_btn:hover,
.payment-modal #sb_pay_btn:focus,
#membership-plugin .mb.btn-bar .active-container .wrapper:hover,
#membership-plugin .mb.btn-bar .active-container .wrapper:focus,
#main #main-buttons .btn.custom a:hover,
#main #main-buttons .btn.custom a:focus {
  background-color: #e8d4a8 !important;
  color: #0a1628 !important;
}

#sb-timeline #steps #sb_back_button a,
#header .nav-wrapper #sb_menu .nav li a,
.btn,
.btn > a,
.btn.custom a {
	border-radius: 6px !important;
}

#sb-timeline #steps #steps-content #sb_booking_content #details .detail-step .left-side .additional-info #sb_sign_out_btn {
  padding-top: 10px;
  padding-bottom: 10px;
}

#sb-timeline #steps #steps-content #sb_booking_content #details .detail-step .buttons-container #sb_book_btn,
#sb-timeline #steps #steps-content #sb_booking_content #details .detail-step .buttons-container #sb_multiple_booking_btn span {
  padding: 15px 20px !important;
}

#sb-timeline #steps #steps-content #sb_booking_content #details .detail-step .right-side {
    padding-top: 1rem;
}

#sb_dialog > .subscribe-component--popup {
  background: #0a1628 !important;
}

/* Make the main CTAs incredibly small, narrow, and hard to read, like the rest of the site */
#main #main-buttons .btn.custom a {
  font-size: 0.78rem !important;
}