/* VARIABLES */
:root {
	--color--base: #fff;
	--color--contrast: #44413f;
	--color--primary: #baa387;
	--color--gray-dk: #595552;
	--color--gray-md: #736e6b;
	--color--gray-lt: #8e8884;
	--color--wood-dk: #baa387;
	--color--wood-md: #cdb495;
	--color--wood-lt: #dbc1a1;
	--color--cream-dk: #d4cbb9;
	--color--cream-md: #e7ddca;
	--color--cream-lt: #f7f2df;
	--font-size--small: clamp(0.6rem, 0.6rem +((1vw - 0.2rem) * 0.197), 0.75rem);
	--font-size--medium: clamp(0.8rem, 0.8rem +((1vw - 0.2rem) * 0.263), 1rem);
	--font-size--large: clamp(1rem, 1rem +((1vw - 0.2rem) * 0.329), 1.25rem);
	--font-size--x-large: clamp(1.2rem, 1.2rem +((1vw - 0.2rem) * 0.395), 1.5rem);
	--font-size--xx-large: clamp(2rem, 2rem +((1vw - 0.2rem) * 0.658), 2.5rem);
	--font-family--figtree: Figtree, sans-serif;
	--spacing--20: clamp(.25rem, .5vw, .5rem);
	--spacing--30: clamp(.5rem, 1vw, 1rem);
	--spacing--40: clamp(1rem, 2vw, 2rem);
	--spacing--50: clamp(1.5rem, 3vw, 3rem);
	--spacing--60: clamp(2rem, 4vw, 4rem);
	--spacing--70: clamp(2.5rem, 5vw, 5rem);
	--spacing--80: clamp(3rem, 6vw, 6rem);
	--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
	--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
	--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
	--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
	--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);
}
.text-base {
	color: var(--color--base)
}
.text-contrast {
	color: var(--color--contrast)
}
.text-primary {
	color: var(--color--primary)
}
.text-gray-dk {
	color: var(--color--gray-dk)
}
.text-gray-md {
	color: var(--color--gray-md)
}
.text-gray-lt {
	color: var(--color--gray-lt)
}
.text-wood-dk {
	color: var(--color--wood-dk)
}
.text-wood-md {
	color: var(--color--wood-md)
}
.text-wood-lt {
	color: var(--color--wood-lt)
}
.text-cream-dk {
	color: var(--color--cream-dk)
}
.text-cream-md {
	color: var(--color--cream-md)
}
.text-cream-lt {
	color: var(--color--cream-lt)
}
.bg-base {
	background-color: var(--color--base)
}
.bg-contrast {
	background-color: var(--color--contrast)
}
.bg-primary {
	background-color: var(--color--primary)
}
.bg-gray-dk {
	background-color: var(--color--gray-dk)
}
.bg-gray-md {
	background-color: var(--color--gray-md)
}
.bg-gray-lt {
	background-color: var(--color--gray-lt)
}
.bg-wood-dk {
	background-color: var(--color--wood-dk)
}
.bg-wood-md {
	background-color: var(--color--wood-md)
}
.bg-wood-lt {
	background-color: var(--color--wood-lt)
}
.bg-cream-dk {
	background-color: var(--color--cream-dk)
}
.bg-cream-md {
	background-color: var(--color--cream-md)
}
.bg-cream-lt {
	background-color: var(--color--cream-lt)
}

@font-face{font-family:Figtree;font-style:normal;font-weight:300;font-display:swap;src:url(/assets/Figtree-Light-1c3ff8b1f81a3429db553e0d16601c86926651c2d26954d9269ffdc97107f3dd.woff) format('woff');}
@font-face{font-family:Figtree;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/Figtree-Regular-96c445d9badf8653d2f3a056f23582cb0034858b919931ccfd3ea551027878af.woff) format('woff');}
@font-face{font-family:Figtree;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/Figtree-Medium-e6b9e7b7772b766ca54318302b264164358bcdf5a5eb964b85767aba3236ee93.woff) format('woff');}
@font-face{font-family:Figtree;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/Figtree-Bold-968bac189852c957bb75a79afda414e3326d02a81b2c847056bba46fdb2a3a3e.woff) format('woff');}

/* SECTIONS */
body {
	background-color: var(--color--base);
	color: var(--color--contrast);
	font-family: var(--font-family--figtree);
	font-size: var(--font-size--medium);
	font-weight: 300;
	letter-spacing: -0.1px;
	line-height: 1.4;
}
header {
	background: var(--color--wood-md);
	background-image: url(/assets/slats-header-9d5e5de80b9a78e4130306ab439088a1905abc28bd7f64114768da2ee33839a0.jpg);
	background-size: 315px;
	background-position: center top;
	background-attachment: fixed;
	color: #fff;
	font-weight: 400;
}
main {
	background: #fff;
	margin-block-start: 0;
}
footer {
	background: var(--color--gray-dk);
	color: #fff;
	margin-top: 0;
}

/* SITE TITLE */
header .site-title {
	display: block;
	width: 250px;
	width: clamp(250px, 20vw, 500px);
}
footer .site-title {
	display: block;
	width: 250px;
}
.site-title a {
	display: block;
	background: #fff;
	background-image: url(/assets/Therapy-Center-logo-gray-3eaf6a8538a739d531289b4cc0ceadd3dca2429d9c30b4246528b2696178b997.png);
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 0;
	padding-top: 22%;
	overflow: hidden;
}
footer .site-title a {
	background-color: transparent;
	background-image: url(/assets/Therapy-Center-logo-white-0852c0de32da55e194317e78655dc10c7ae76649634d7e78e6d7811f53eee924.png);
}
.btn-login {
	background: var(--color--gray-dk);
	padding: 2px 8px;
	border-radius: 10px;
}

/* BUTTON fix wrap */
.bookings-jumbotron .btn-primary,
.bookings-jumbotron .button_to {
	margin-left: auto;
}

/* MOBILE */
@media (max-width: 768px) {
	#header_title .site-title {
		margin: auto;
	}
	.main-nav {
		justify-content: center;
	}
	.footer-content {
		flex-direction: column;
	}
	.booking-list {
		gap: 0;
		margin-left: calc(var(--spacing) * -4);
		margin-right: calc(var(--spacing) * -4);
	}
	.booking-card {
		border: 0;
		border-radius: 0;
		border-bottom: 1px solid var(--color--gray-md);
	}
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.bookings-jumbotron {
  margin-top: 0;
}

.booking-form-shell {
  max-width: 56rem;
}

.booking-form-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
}

.booking-action-pill {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #334155;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
}

.booking-action-icon {
  height: 16px;
  width: 16px;
}

.booking-action-pill:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.booking-card-actions {
  position: absolute;
  right: 16px;
  top: 50%;
  margin-top: -15px;
  display: flex;
  gap: 8px;
  z-index: 1;
}

.modal-open .booking-action-trigger {
  visibility: hidden;
}

.booking-card {
  position: relative;
}

.booking-card-title {
  padding-right: 150px;
}

.booking-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-card {
  margin: 0 auto;
  max-width: 32rem;
  width: 50%;
}

@media (max-width: 768px) {
  .auth-card {
    width: 100%;
  }
}

.google-oauth-button {
  align-items: center;
  background: #ffffff;
  border: 1px solid #dadce0;
  border-radius: 4px;
  color: #3c4043;
  display: inline-flex;
  font-size: 14px;
  font-weight: 500;
  gap: 12px;
  justify-content: center;
  padding: 10px 16px;
}

.google-oauth-button:hover {
  background: #f7f8f8;
}

.google-oauth-icon {
  display: inline-flex;
  height: 18px;
  width: 18px;
}

.google-oauth-icon svg {
  display: block;
  height: 100%;
  width: 100%;
}

.modal-open {
  overflow: hidden;
}

.modal-overlay {
  align-items: center;
  background: rgba(15, 23, 42, 0.45);
  display: none;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 50;
}

.modal-overlay.is-active {
  display: flex;
}

.modal-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  max-width: 480px;
  padding: 20px;
  width: 100%;
}

.modal-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.modal-close {
  background: transparent;
  border: none;
  color: #64748b;
  cursor: pointer;
  font-size: 28px;
  font-family: Arial, sans-serif;
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex-shrink: 0;
}

.modal-close:hover {
  color: #0f172a;
}

.modal-body p + p {
  margin-top: 12px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}


.booking-form-header {
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 20px;
  padding-bottom: 12px;
}

.settings-divider {
  border: 0;
  border-top: 1px solid #64748b;
  margin: 2rem 0;
}

.form-section {
  border-top: 1px solid #e2e8f0;
  margin-top: 20px;
  padding-top: 16px;
}

.form-section:first-of-type {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.form-section-title {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.form-label {
  color: #475569;
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.form-input {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.04);
  padding: 10px 12px;
  width: 100%;
}

.readonly-input {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.04);
  color: #334155;
  padding: 10px 12px;
  width: 100%;
}

.form-input::placeholder {
  color: #94a3b8;
}

.form-input:focus {
  border-color: #64748b;
  box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.18);
  outline: none;
}

.form-actions {
  border-top: 1px solid #e2e8f0;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
}

.select2-container--default .select2-selection--single {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  height: 42px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #0f172a;
  line-height: 42px;
  padding-left: 6px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #94a3b8;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px;
  right: 8px;
}

.select2-dropdown {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #0f172a;
  color: #ffffff;
}

.flatpickr-calendar {
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: #0f172a;
  border-color: #0f172a;
}

/* Booking Wizard Modal Styles */
.booking-wizard-modal {
  max-width: 480px;
  min-height: 420px;
}

.booking-wizard-modal .modal-header {
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 12px;
}

.booking-wizard-modal .modal-body {
  padding: 20px 0;
}

.booking-wizard-modal .modal-footer {
  border-top: 1px solid #e2e8f0;
  padding-top: 16px;
}

.booking-wizard-modal .modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Calendar inline mode */
.booking-calendar {
  display: flex;
  justify-content: center;
  width: 100%;
}

.booking-calendar .flatpickr-calendar {
  border: none;
  box-shadow: none;
  font-size: 15px;
  margin: 0 auto;
}

.booking-calendar .flatpickr-calendar .flatpickr-months {
  padding: 8px 0;
}

.booking-calendar .flatpickr-calendar .flatpickr-month {
  height: 36px;
}

.booking-calendar .flatpickr-calendar .flatpickr-current-month {
  font-size: 1.1em;
}

.booking-calendar .flatpickr-calendar .flatpickr-innerContainer {
  justify-content: center;
}

.booking-calendar .flatpickr-calendar .dayContainer {
  width: 100%;
  min-width: 350px;
  max-width: 380px;
}

.booking-calendar .flatpickr-calendar .flatpickr-days {
  width: 100%;
}

.booking-calendar .flatpickr-calendar .flatpickr-day {
  height: 44px;
  line-height: 44px;
  max-width: 50px;
  font-size: 14px;
}

.booking-calendar .flatpickr-calendar .flatpickr-weekday {
  font-size: 13px;
}

.booking-date-input {
  cursor: pointer;
  max-width: 190px;
  text-align: center;
}

/* Time Slot List */
.time-slot-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.time-slot-option {
  background: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #475569;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 12px 16px;
  text-align: center;
  transition: all 0.15s ease;
}

.time-slot-option:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.time-slot-option.selected {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
}

.time-slot-option:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Room List */
.room-list,
.location-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.room-option {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 12px;
  padding: 8px 4px;
}

.room-option.unavailable {
  cursor: not-allowed;
  opacity: 0.5;
}

.room-radio {
  height: 0;
  opacity: 0;
  position: absolute;
  width: 0;
}

.room-indicator {
  align-items: center;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  display: flex;
  flex-shrink: 0;
  height: 20px;
  justify-content: center;
  transition: all 0.15s ease;
  width: 20px;
}

.room-radio:checked + .room-indicator {
  background: #0f172a;
  border-color: #0f172a;
}

.room-indicator.unavailable {
  background: #e2e8f0;
  border-color: #e2e8f0;
}

.room-name {
  color: #0f172a;
  font-size: 1rem;
  font-weight: 500;
}

.room-name.unavailable {
  color: #94a3b8;
}

/* Buttons */
.btn-primary {
  background: #0f172a;
  border: none;
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 10px 20px;
  transition: background 0.15s ease;
}

.btn-primary:hover {
  background: #1e293b;
}

.btn-secondary {
  background: transparent;
  border: none;
  color: #64748b;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 10px 12px;
  transition: color 0.15s ease;
}

.btn-secondary:hover {
  color: #0f172a;
}

.modal-footer.justify-between {
  justify-content: space-between;
}

/* Toggle Switch */
.toggle-switch {
  background-color: #cbd5e1;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  height: 1.5rem;
  position: relative;
  transition: background-color 0.2s;
  width: 2.75rem;
}

.toggle-switch.is-active {
  background-color: #22c55e;
}

.toggle-knob {
  background: #ffffff;
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  height: 1.25rem;
  left: 2px;
  position: absolute;
  top: 2px;
  transition: transform 0.2s;
  width: 1.25rem;
}

.toggle-switch.is-active .toggle-knob {
  transform: translateX(1.25rem);
}