/* ============================================================================
   NUDG Booking — Custom Theme Override
   Dual-theme: dark (default) + light, synced with nudg.au via postMessage
   Applied AFTER darkly Bootstrap theme + booking_layout.css + company_color_style
   ============================================================================ */

/* --- Fonts ---------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

/* --- Shared constants (same in both themes) ------------------------------- */
:root {
  --nudg-coral:       #E05C3A;
  --nudg-coral-hover: #C8502F;
  --nudg-coral-deep:  #B84828;
  --nudg-coral-light: #F0917A;
  --nudg-radius-sm:   6px;
  --nudg-radius-md:   8px;
  --nudg-radius-lg:   12px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DARK THEME (default)
   ══════════════════════════════════════════════════════════════════════════════ */
:root,
html:not([data-theme="light"]) {
  --nudg-bg-page:     #0D1B2E;
  --nudg-bg-card:     #122240;
  --nudg-bg-lift:     #1A2E4A;
  --nudg-bg-footer:   #080E18;
  --nudg-border:      #1E3456;
  --nudg-border-rule: #243D62;
  --nudg-text-head:   #EDF2F8;
  --nudg-text-body:   #7E96B8;
  --nudg-text-dim:    #3D5575;
  --nudg-coral-pale:  #1E1108;
  --nudg-focus-ring:  rgba(224, 92, 58, 0.2);
  --nudg-shadow:      0 4px 24px rgba(0, 0, 0, 0.4);
  --nudg-shadow-cal:  0 4px 12px rgba(0, 0, 0, 0.3);
  --nudg-select-arrow: %237E96B8;
}

/* ══════════════════════════════════════════════════════════════════════════════
   LIGHT THEME
   ══════════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  --nudg-bg-page:     #FFFFFF;
  --nudg-bg-card:     #F5F5F5;
  --nudg-bg-lift:     #EBEDF0;
  --nudg-bg-footer:   #F0F0F0;
  --nudg-border:      #E5E7EB;
  --nudg-border-rule: #D1D5DB;
  --nudg-text-head:   #0D1B2E;
  --nudg-text-body:   #3D4F66;
  --nudg-text-dim:    #8494A7;
  --nudg-coral-pale:  #FFF5F2;
  --nudg-focus-ring:  rgba(224, 92, 58, 0.15);
  --nudg-shadow:      0 4px 24px rgba(0, 0, 0, 0.08);
  --nudg-shadow-cal:  0 4px 12px rgba(0, 0, 0, 0.06);
  --nudg-select-arrow: %233D4F66;
}

/* --- Bootstrap variable overrides ----------------------------------------- */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
  --bs-body-bg:       var(--nudg-bg-page);
  --bs-body-color:    var(--nudg-text-body);
  --bs-primary:       var(--nudg-coral);
  --bs-primary-rgb:   224, 92, 58;
  --bs-link-color:    var(--nudg-coral);
  --bs-link-hover-color: var(--nudg-coral-hover);
  --bs-border-color:  var(--nudg-border);
  --bs-secondary-bg:  var(--nudg-bg-card);
  --bs-tertiary-bg:   var(--nudg-bg-lift);
}

/* --- Base ----------------------------------------------------------------- */
html, body {
  background: var(--nudg-bg-page) !important;
  color: var(--nudg-text-body) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
}

a {
  color: var(--nudg-coral) !important;
}

a:hover {
  color: var(--nudg-coral-hover) !important;
}

/* --- Main Container / Wizard --------------------------------------------- */
#main {
  background: var(--nudg-bg-page) !important;
  transition: background-color 0.3s ease;
}

.wrapper {
  background: var(--nudg-bg-page) !important;
  transition: background-color 0.3s ease;
}

@media (min-width: 768px) {
  #book-appointment-wizard {
    border-radius: var(--nudg-radius-lg) !important;
    overflow: hidden;
    box-shadow: var(--nudg-shadow) !important;
    transition: box-shadow 0.3s ease;
  }
}

/* --- Header -------------------------------------------------------------- */
#book-appointment-wizard #header {
  background: var(--nudg-bg-card) !important;
  border-bottom: 1px solid var(--nudg-border);
  padding: 20px 20px !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

#book-appointment-wizard #company-name {
  color: var(--nudg-text-head) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 500 !important;
  transition: color 0.3s ease;
}

#book-appointment-wizard #company-name .display-booking-selection {
  color: var(--nudg-text-body) !important;
  border-right-color: var(--nudg-border) !important;
  filter: none !important;
}

#book-appointment-wizard #company-name .display-selected-service,
#book-appointment-wizard #company-name .display-selected-provider {
  color: var(--nudg-coral-light) !important;
  border-right-color: var(--nudg-border) !important;
  filter: none !important;
}

/* --- Step Indicators ----------------------------------------------------- */
#book-appointment-wizard .book-step {
  background: var(--nudg-bg-lift) !important;
  border-radius: var(--nudg-radius-sm) !important;
  filter: none !important;
  transition: background-color 0.2s ease;
}

#book-appointment-wizard .book-step strong {
  color: var(--nudg-text-dim) !important;
  font-family: 'Fraunces', serif !important;
  filter: none !important;
  transition: color 0.2s ease;
}

#book-appointment-wizard .active-step {
  background: var(--nudg-coral) !important;
}

#book-appointment-wizard .active-step strong {
  color: #fff !important;
  font-family: 'Fraunces', serif !important;
}

/* --- Wizard Frames / Content --------------------------------------------- */
#book-appointment-wizard .wizard-frame {
  background: var(--nudg-bg-page) !important;
  transition: background-color 0.3s ease;
}

#book-appointment-wizard .wizard-frame .frame-container {
  background: var(--nudg-bg-page) !important;
  transition: background-color 0.3s ease;
}

#book-appointment-wizard .frame-container .frame-title {
  color: var(--nudg-text-head) !important;
  font-family: 'Fraunces', serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}

/* --- Form Controls ------------------------------------------------------- */
.form-control,
.form-select {
  background-color: var(--nudg-bg-card) !important;
  border: 1px solid var(--nudg-border) !important;
  border-radius: var(--nudg-radius-md) !important;
  color: var(--nudg-text-head) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  padding: 0.75rem 1rem !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease, color 0.3s ease !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--nudg-coral) !important;
  box-shadow: 0 0 0 3px var(--nudg-focus-ring) !important;
  background-color: var(--nudg-bg-card) !important;
  color: var(--nudg-text-head) !important;
  filter: none !important;
}

.form-control::placeholder {
  color: var(--nudg-text-dim) !important;
}

.form-check-input:checked {
  background-color: var(--nudg-coral) !important;
  border-color: var(--nudg-coral) !important;
}

/* Labels */
.form-label,
label {
  color: var(--nudg-text-head) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  transition: color 0.3s ease;
}

#book-appointment-wizard #wizard-frame-1 label {
  font-size: 0.95rem !important;
  color: var(--nudg-text-head) !important;
}

.text-danger {
  color: var(--nudg-coral) !important;
}

/* Select dropdown arrow */
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='var(--nudg-select-arrow)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* Dark mode select arrow */
html:not([data-theme="light"]) .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237E96B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* Light mode select arrow */
html[data-theme="light"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%233D4F66' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* --- Buttons ------------------------------------------------------------- */
.btn-primary,
.btn-primary:active,
.btn-primary:visited {
  background-color: var(--nudg-coral) !important;
  border-color: var(--nudg-coral) !important;
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  border-radius: 5px !important;
  padding: 0.65rem 1.5rem !important;
  transition: all 0.2s ease !important;
  filter: none !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--nudg-coral-hover) !important;
  border-color: var(--nudg-coral-hover) !important;
  filter: none !important;
  box-shadow: none !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--nudg-coral-deep) !important;
  border-color: var(--nudg-coral-deep) !important;
  opacity: 0.5 !important;
  filter: none !important;
}

.btn-dark,
.button-next {
  background-color: var(--nudg-coral) !important;
  border-color: var(--nudg-coral) !important;
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  border-radius: 5px !important;
  transition: all 0.2s ease !important;
}

.btn-dark:hover,
.button-next:hover {
  background-color: var(--nudg-coral-hover) !important;
  border-color: var(--nudg-coral-hover) !important;
}

.btn-outline-secondary,
.button-back {
  background: transparent !important;
  border-color: var(--nudg-border-rule) !important;
  color: var(--nudg-text-body) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  border-radius: 5px !important;
  transition: all 0.2s ease !important;
}

.btn-outline-secondary:hover,
.button-back:hover {
  background: var(--nudg-bg-lift) !important;
  border-color: var(--nudg-border-rule) !important;
  color: var(--nudg-text-head) !important;
}

/* --- Available Hours ----------------------------------------------------- */
#book-appointment-wizard #available-hours .available-hour {
  background-color: var(--nudg-bg-card) !important;
  border: 1px solid var(--nudg-border) !important;
  color: var(--nudg-text-body) !important;
  border-radius: var(--nudg-radius-sm) !important;
  transition: all 0.2s ease !important;
}

#book-appointment-wizard #available-hours .available-hour:hover {
  border-color: var(--nudg-coral) !important;
  color: var(--nudg-text-head) !important;
}

#book-appointment-wizard #available-hours .selected-hour {
  background-color: var(--nudg-coral) !important;
  border-color: var(--nudg-coral) !important;
  color: #fff !important;
}

/* --- Flatpickr Date Picker ----------------------------------------------- */
.flatpickr-calendar {
  background: var(--nudg-bg-card) !important;
  border: 1px solid var(--nudg-border) !important;
  border-radius: var(--nudg-radius-md) !important;
  box-shadow: var(--nudg-shadow-cal) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.flatpickr-calendar .flatpickr-months,
.flatpickr-calendar .flatpickr-months .flatpickr-month,
.flatpickr-calendar .flatpickr-weekdays,
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar span.flatpickr-weekday {
  background: var(--nudg-bg-lift) !important;
  color: var(--nudg-text-head) !important;
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month {
  color: var(--nudg-text-body) !important;
  fill: var(--nudg-text-body) !important;
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover {
  color: var(--nudg-coral) !important;
  fill: var(--nudg-coral) !important;
}

.flatpickr-calendar .flatpickr-current-month .cur-month,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper {
  color: var(--nudg-text-head) !important;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: var(--nudg-bg-lift) !important;
  color: var(--nudg-text-head) !important;
}

.flatpickr-day {
  color: var(--nudg-text-body) !important;
  border-radius: var(--nudg-radius-sm) !important;
}

.flatpickr-day:hover {
  background: var(--nudg-bg-lift) !important;
  border-color: var(--nudg-bg-lift) !important;
  color: var(--nudg-text-head) !important;
}

.flatpickr-day.today {
  border-color: var(--nudg-coral-light) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus {
  background: var(--nudg-coral) !important;
  border-color: var(--nudg-coral) !important;
  color: #fff !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--nudg-text-dim) !important;
  opacity: 0.4;
}

/* --- jQuery UI Datepicker (fallback) ------------------------------------- */
body .ui-widget.ui-widget-content {
  border-color: var(--nudg-border) !important;
  background: var(--nudg-bg-card) !important;
  border-radius: var(--nudg-radius-md) !important;
}

body .ui-datepicker .ui-widget-header {
  background-color: var(--nudg-bg-lift) !important;
  border: none !important;
  color: var(--nudg-text-head) !important;
}

body .ui-datepicker th {
  background-color: var(--nudg-bg-lift) !important;
  color: var(--nudg-text-body) !important;
}

body .ui-datepicker td a,
body .ui-datepicker td span {
  color: var(--nudg-text-body) !important;
}

html body .ui-datepicker td a.ui-state-active {
  background: var(--nudg-coral) !important;
  color: #fff !important;
}

body .ui-datepicker td a.ui-state-highlight {
  background: var(--nudg-coral-light) !important;
  color: #fff !important;
  filter: none !important;
}

body .ui-datepicker .ui-datepicker-next-hover,
body .ui-datepicker .ui-datepicker-prev-hover {
  background: var(--nudg-bg-lift) !important;
  border-color: var(--nudg-border) !important;
  filter: none !important;
}

/* --- Service Description ------------------------------------------------- */
#book-appointment-wizard #service-description {
  color: var(--nudg-text-body) !important;
  font-size: 0.875rem !important;
  line-height: 1.7 !important;
}

/* --- Appointment & Customer Details (Step 4) ----------------------------- */
#book-appointment-wizard #appointment-details,
#book-appointment-wizard #customer-details {
  color: var(--nudg-text-body) !important;
}

#book-appointment-wizard #appointment-details p,
#book-appointment-wizard #customer-details p {
  color: var(--nudg-text-body) !important;
}

#book-appointment-wizard #appointment-details strong,
#book-appointment-wizard #customer-details strong {
  color: var(--nudg-text-head) !important;
}

/* --- Footer -------------------------------------------------------------- */
#book-appointment-wizard #frame-footer {
  background: var(--nudg-bg-footer) !important;
  border-top: 1px solid var(--nudg-border) !important;
  padding: 12px 15px !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

#book-appointment-wizard #frame-footer small {
  color: var(--nudg-text-dim) !important;
  font-size: 0.75rem !important;
}

#book-appointment-wizard #frame-footer a {
  color: var(--nudg-coral) !important;
}

#frame-footer .backend-link {
  background-color: var(--nudg-coral) !important;
  border-color: var(--nudg-coral) !important;
}

#frame-footer .backend-link:hover {
  background-color: var(--nudg-coral-hover) !important;
  color: #fff !important;
}

/* Language badge */
#book-appointment-wizard #select-language {
  background-color: var(--nudg-bg-lift) !important;
  color: var(--nudg-text-body) !important;
}

/* --- Modal Dialogs ------------------------------------------------------- */
body .modal-header {
  background: var(--nudg-coral) !important;
  color: #fff !important;
}

body .modal-content {
  background: var(--nudg-bg-card) !important;
  border: 1px solid var(--nudg-border) !important;
  border-radius: var(--nudg-radius-lg) !important;
  color: var(--nudg-text-body) !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

body .modal-footer {
  border-top-color: var(--nudg-border) !important;
}

body .ui-draggable .ui-dialog-titlebar {
  background: var(--nudg-coral) !important;
}

/* --- Nav Pills ----------------------------------------------------------- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--nudg-coral) !important;
  color: #fff !important;
}

.nav .nav-link:not(.active) {
  color: var(--nudg-coral) !important;
}

/* --- Alerts -------------------------------------------------------------- */
.alert-info {
  background-color: var(--nudg-bg-lift) !important;
  border-color: var(--nudg-border) !important;
  color: var(--nudg-text-body) !important;
}

.alert-success {
  background-color: rgba(74, 222, 128, 0.1) !important;
  border-color: rgba(74, 222, 128, 0.2) !important;
  color: #4ADE80 !important;
}

.alert-danger {
  background-color: rgba(224, 92, 58, 0.1) !important;
  border-color: rgba(224, 92, 58, 0.2) !important;
  color: var(--nudg-coral-light) !important;
}

/* --- Success / Message Frames -------------------------------------------- */
#message-frame,
#success-frame {
  background: var(--nudg-bg-page) !important;
  color: var(--nudg-text-body) !important;
}

#success-frame .btn {
  border-radius: 5px !important;
}

/* --- Badges -------------------------------------------------------------- */
.badge.bg-secondary {
  background-color: var(--nudg-bg-lift) !important;
  color: var(--nudg-text-body) !important;
}

.badge.bg-primary {
  background-color: var(--nudg-coral) !important;
}

/* --- Dropdown ------------------------------------------------------------ */
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--nudg-coral) !important;
}

.dropdown-menu {
  background-color: var(--nudg-bg-card) !important;
  border-color: var(--nudg-border) !important;
}

.dropdown-item {
  color: var(--nudg-text-body) !important;
}

.dropdown-item:hover {
  background-color: var(--nudg-bg-lift) !important;
  color: var(--nudg-text-head) !important;
}

/* --- Scrollbar (Webkit) -------------------------------------------------- */
#book-appointment-wizard ::-webkit-scrollbar {
  width: 6px;
}

#book-appointment-wizard ::-webkit-scrollbar-track {
  background: var(--nudg-bg-page);
}

#book-appointment-wizard ::-webkit-scrollbar-thumb {
  background: var(--nudg-border);
  border-radius: 3px;
}

#book-appointment-wizard ::-webkit-scrollbar-thumb:hover {
  background: var(--nudg-text-dim);
}

/* --- Tooltip ------------------------------------------------------------- */
.tippy-box {
  background-color: var(--nudg-bg-card) !important;
  color: var(--nudg-text-head) !important;
  border: 1px solid var(--nudg-border) !important;
  border-radius: var(--nudg-radius-sm) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.8rem !important;
}

.tippy-arrow {
  color: var(--nudg-bg-card) !important;
}

/* --- Cancel / Booking Header Bar ----------------------------------------- */
.booking-header-bar {
  background: var(--nudg-bg-card) !important;
  border-bottom-color: var(--nudg-border) !important;
  color: var(--nudg-text-head) !important;
}

/* --- Form Message -------------------------------------------------------- */
#book-appointment-wizard #form-message {
  color: var(--nudg-text-body) !important;
}

/* --- Timezone Select ----------------------------------------------------- */
#book-appointment-wizard #select-timezone select {
  background-color: var(--nudg-bg-card) !important;
  border-color: var(--nudg-border) !important;
  color: var(--nudg-text-body) !important;
}

/* --- Card-like containers ------------------------------------------------ */
.frame-content .card,
.frame-content .border {
  background-color: var(--nudg-bg-card) !important;
  border-color: var(--nudg-border) !important;
}