/* ============================================================
   Booking Page — Coastal Luxe Design System
   ============================================================ */

/* ── Page Hero Header ── */
.booking-page-hero {
  background: var(--ab-primary, #1B2A4A);
  padding: var(--ab-space-8) 0 var(--ab-space-10);
  margin-bottom: var(--ab-space-8);
}
.booking-page-hero h1 {
  font-family: var(--ab-font-display);
  color: var(--ab-text-inverse, #fff) !important;
  font-size: var(--ab-text-4xl);
  margin: 0 0 var(--ab-space-2);
}
.booking-page-hero p {
  margin: 0;
}
.booking-page-hero .breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: var(--ab-space-4) !important;
}
.booking-page-hero .breadcrumb-item a {
  color: rgba(255,255,255,0.7) !important;
}
.booking-page-hero .breadcrumb-item a:hover {
  color: #fff !important;
}
.booking-page-hero .breadcrumb-item.active {
  color: rgba(255,255,255,0.5) !important;
}
.booking-page-hero .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255,255,255,0.4) !important;
}
@media (max-width: 767.98px) {
  .booking-page-hero {
    padding: var(--ab-space-6) 0 var(--ab-space-8);
  }
  .booking-page-hero h1 {
    font-size: var(--ab-text-2xl);
  }
}

/* ── Page Content ── */
.section-box {
  background: var(--ab-surface, #FAFAF7) !important;
  padding: var(--ab-space-8) 0 var(--ab-space-16);
  margin-top: 0 !important;
}
.section-box:before {
  display: none !important;
}

/* ── Section Headings ── */
.heading-block {
  background: transparent;
  padding: var(--ab-space-4) 0;
  margin-bottom: var(--ab-space-4);
  border-bottom: 2px solid var(--ab-border-light, #F0EDE8);
  display: flex;
  align-items: center;
  gap: var(--ab-space-3);
}
#bookingForm .heading-block .holder {
  display: block !important;
  white-space: normal !important;
}
#bookingForm .heading-block .holder > * {
  display: block !important;
}
#step-login-header .area-holder {
  gap: var(--ab-space-3) !important;
}
#bookingForm .icon-frame,
.heading-block .icon-frame {
  flex-shrink: 0;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--ab-accent-light, #E8D5B7);
  border-radius: var(--ab-radius-md, 10px);
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  position: static !important;
}
#bookingForm .icon-frame i,
.section-area .heading-block .icon-frame i,
.heading-block .icon-frame i {
  color: var(--ab-accent, #C17F59) !important;
  font-size: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
}
.heading-block h1 {
  font-family: var(--ab-font-display);
  font-size: var(--ab-text-3xl);
  color: var(--ab-primary, #1B2A4A);
  margin: 0;
}
.heading-block h2 {
  font-family: var(--ab-font-display);
  font-size: var(--ab-text-xl);
  color: var(--ab-primary, #1B2A4A);
  margin: 0;
  font-weight: normal;
}

/* ── Booking Form ── */
.booking-form {
  background: var(--ab-surface-card, #fff);
  border-radius: var(--ab-radius-lg, 16px);
  padding: var(--ab-space-6);
  box-shadow: var(--ab-shadow-card);
  border: 1px solid var(--ab-border-light);
}
.booking-form .form-control,
.booking-form select,
.booking-form textarea {
  border: 1px solid var(--ab-border, #E2DDD5);
  border-radius: var(--ab-radius-sm, 6px);
  padding: 10px 14px;
  font-size: var(--ab-text-sm);
  color: var(--ab-text);
  transition: border-color var(--ab-transition-fast), box-shadow var(--ab-transition-fast);
}
.booking-form .form-control:focus,
.booking-form select:focus,
.booking-form textarea:focus {
  border-color: var(--ab-primary-light, #3D5A80);
  box-shadow: 0 0 0 3px rgba(61, 90, 128, 0.15);
  outline: none;
}
.booking-form label {
  font-size: var(--ab-text-sm);
  font-weight: var(--ab-weight-medium, 500);
  color: var(--ab-text);
  margin-bottom: var(--ab-space-1);
}
.booking-form .control-label {
  font-size: var(--ab-text-sm);
  font-weight: var(--ab-weight-semibold, 600);
  color: var(--ab-text-secondary, #6B6B6B);
}

/* ── Block Areas ── */
.block-area {
  margin-bottom: var(--ab-space-6);
}
.block-holder {
  padding: var(--ab-space-4) 0;
}

/* ── Sidebar Summary ── */
.cb-sidebar {
  background: var(--ab-surface-card, #fff);
  border: 1px solid var(--ab-border-light);
  border-radius: var(--ab-radius-lg, 16px);
  box-shadow: var(--ab-shadow-md);
  padding: var(--ab-space-5);
  min-height: 160px;
}
.cb-sidebar .price {
  font-family: var(--ab-font-display);
  color: var(--ab-primary);
  font-size: var(--ab-text-2xl);
}
.cb-sidebar .price span {
  font-family: var(--ab-font-body);
  font-size: var(--ab-text-sm);
  color: var(--ab-text-secondary);
}

/* ── Step Indicators / Boxes ── */
.box {
  border: 2px solid var(--ab-border, #E2DDD5);
  border-radius: var(--ab-radius-md, 10px);
  line-height: 1.5;
  padding: var(--ab-space-5);
  display: block;
  text-align: center;
  font-weight: var(--ab-weight-semibold, 600);
  color: var(--ab-text);
  transition: all var(--ab-transition-base);
  text-decoration: none;
}
.box.active,
.box:hover {
  color: var(--ab-text-inverse, #fff);
  font-weight: var(--ab-weight-bold, 700);
  background-color: var(--ab-primary, #1B2A4A);
  border-color: var(--ab-primary, #1B2A4A);
  text-decoration: none;
  cursor: pointer;
}

/* ── Breadcrumb ── */
.breadcrumb {
  background: transparent;
  padding: var(--ab-space-3) 0;
  font-size: var(--ab-text-sm);
}
.breadcrumb li a {
  color: var(--ab-text-secondary);
}
.breadcrumb li a:hover {
  color: var(--ab-primary);
}
.breadcrumb li.active {
  color: var(--ab-text);
}

/* ── Alerts ── */
.booking-form .alert {
  border-radius: var(--ab-radius-md);
  border: none;
  font-size: var(--ab-text-sm);
}
.booking-form .alert-danger {
  background: var(--ab-danger-light, #FBEAE9);
  color: var(--ab-danger, #D4574E);
}
.booking-form .alert-success {
  background: var(--ab-success-light, #E8F3ED);
  color: var(--ab-success, #5B8A72);
}
.booking-form .alert-info {
  background: var(--ab-info-light, #E7F1F8);
  color: var(--ab-info, #4A90B8);
}

/* ── Tables (pricing breakdown) ── */
.booking-form .table {
  font-size: var(--ab-text-sm);
  border-color: var(--ab-border-light);
}
.booking-form .table thead th {
  background: var(--ab-surface-alt, #F0EDE8);
  font-weight: var(--ab-weight-semibold);
  font-size: var(--ab-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ab-text-secondary);
  border-bottom: 2px solid var(--ab-border);
  padding: var(--ab-space-2) var(--ab-space-3);
}
.booking-form .table td {
  padding: var(--ab-space-2) var(--ab-space-3);
  vertical-align: middle;
  border-color: var(--ab-border-light);
}

/* ── Textarea ── */
textarea {
  padding: 14px;
  border-radius: var(--ab-radius-sm, 6px);
}
.full {
  height: 200px;
  width: 100%;
  background: var(--ab-surface-card, #fff);
  border: 1px solid var(--ab-border, #E2DDD5);
  border-radius: var(--ab-radius-sm, 6px);
}

/* ── Submit / CTA Buttons ── */
.booking-form .btn-accent,
.booking-form .btn-primary {
  width: 100%;
  padding: var(--ab-space-3) var(--ab-space-6);
  font-size: var(--ab-text-base);
  font-weight: var(--ab-weight-semibold, 600);
  border-radius: var(--ab-radius-md, 10px);
  margin-top: var(--ab-space-4);
}

/* ── Optional Features ── */
.row-wrapper-optional-feature {
  margin-top: 2px;
  padding: var(--ab-space-2) 0;
}
.label-optional-feature {
  color: var(--ab-text);
  font-size: var(--ab-text-sm);
}

/* ── Cancellation Policy ── */
.booking-form .cps-section {
  background: var(--ab-surface-alt, #F0EDE8);
  border-radius: var(--ab-radius-md);
  padding: var(--ab-space-4);
  margin: var(--ab-space-3) 0;
}

/* ── Terms & Conditions ── */
.tc-border {
  border-color: var(--ab-border);
  border-radius: var(--ab-radius-sm);
  padding: var(--ab-space-4);
}
.text-color-grey {
  color: var(--ab-text-secondary);
  font-size: var(--ab-text-sm);
}

/* ── Popover ── */
.popover {
  z-index: 1000000000;
  border-radius: var(--ab-radius-md);
  box-shadow: var(--ab-shadow-lg);
}

/* ── Progress Modal ── */
#progressModal1 .modal-content {
  border-radius: var(--ab-radius-lg, 16px);
  border: none;
  box-shadow: var(--ab-shadow-xl);
  text-align: center;
  padding: var(--ab-space-8);
}
.spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid var(--ab-border-light);
  border-top-color: var(--ab-accent);
  animation: spinner-rotate 0.8s linear infinite;
  margin: 0 auto;
}
@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}
.spinner-wrapper {
  width: 100%;
}
.spinner-wrapper .spinner {
  margin-left: auto;
  margin-right: auto;
}

/* ── Message Box ── */
.section-area div.message-box {
  margin: var(--ab-space-6) 0;
  background: var(--ab-surface-alt);
  border-radius: var(--ab-radius-md);
  padding: var(--ab-space-5);
}

/* ── Select styling ── */
.booking-form select.select-left {
  padding-left: 10px;
}
input[type="text"].no-padding {
  padding: 14px;
}

/* ── Lock icon ── */
.icon-lock-position {
  margin-left: 10px;
  color: var(--ab-success, #5B8A72);
}

/* ── Discount badge ── */
.ared {
  color: var(--ab-accent);
  font-weight: var(--ab-weight-semibold);
}

/* ── Price breakdown popover ── */
.api_breakdown_prices {
  cursor: pointer;
  color: var(--ab-text-link);
  text-decoration: underline;
}
.api_breakdown_prices:hover {
  color: var(--ab-primary);
}

/* ── Login modal ── */
.modal .modal-content {
  border-radius: var(--ab-radius-lg);
  border: none;
  box-shadow: var(--ab-shadow-xl);
}
.modal .modal-header {
  border-bottom: 1px solid var(--ab-border-light);
  padding: var(--ab-space-4) var(--ab-space-5);
}
.modal .modal-header .modal-title {
  font-family: var(--ab-font-display);
  color: var(--ab-primary);
}
.modal .modal-body {
  padding: var(--ab-space-5);
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
  .booking-form {
    padding: var(--ab-space-4);
    border-radius: var(--ab-radius-md);
  }
  .heading-block h1 {
    font-size: var(--ab-text-2xl);
  }
  .cb-sidebar {
    margin-top: var(--ab-space-4);
  }
}

/* ── Datepicker / Calendar Styling ── */
.datepicker-dropdown {
  border-radius: var(--ab-radius-lg, 16px) !important;
  box-shadow: var(--ab-shadow-lg) !important;
  border: 1px solid var(--ab-border, #E2DDD5) !important;
  padding: var(--ab-space-3) !important;
}
.datepicker table {
  width: 100%;
}
.datepicker table thead tr th {
  color: var(--ab-primary, #1B2A4A);
  font-weight: var(--ab-weight-semibold, 600);
  font-size: var(--ab-text-sm);
  padding: 8px;
}
.datepicker table thead tr th.prev,
.datepicker table thead tr th.next {
  color: var(--ab-accent, #C17F59);
  cursor: pointer;
  font-size: var(--ab-text-lg);
}
.datepicker table thead tr th.prev:hover,
.datepicker table thead tr th.next:hover {
  background: var(--ab-surface-alt, #F0EDE8) !important;
  border-radius: var(--ab-radius-sm);
}
.datepicker table thead tr th.dow {
  color: var(--ab-text-secondary, #6B6B6B);
  font-size: var(--ab-text-xs);
  font-weight: var(--ab-weight-medium, 500);
  text-transform: uppercase;
  padding: 8px 4px;
}
.datepicker table tbody tr td {
  padding: 6px;
  font-size: var(--ab-text-sm);
  border-radius: var(--ab-radius-sm, 6px);
  transition: all var(--ab-transition-fast);
}
.datepicker table tbody tr td:hover {
  background: var(--ab-surface-alt, #F0EDE8) !important;
}
.datepicker table tbody tr td.active,
.datepicker table tbody tr td.active:hover,
.datepicker table tbody tr td.active.active {
  background: var(--ab-primary, #1B2A4A) !important;
  color: #fff !important;
  border-radius: var(--ab-radius-sm, 6px);
}
.datepicker table tbody tr td.range {
  background: rgba(27, 42, 74, 0.08) !important;
  color: var(--ab-primary) !important;
}
.datepicker table tbody tr td.today {
  background: var(--ab-accent-light, #E8D5B7) !important;
  color: var(--ab-primary) !important;
}
.datepicker table tbody tr td.disabled,
.datepicker table tbody tr td.disabled:hover {
  color: var(--ab-text-muted, #9A9A9A) !important;
  background: transparent !important;
  opacity: 0.4;
}
.datepicker table tbody tr td.old,
.datepicker table tbody tr td.new {
  color: var(--ab-text-muted, #9A9A9A);
}
.datepicker .datepicker-switch {
  font-family: var(--ab-font-display);
  font-size: var(--ab-text-base);
  color: var(--ab-primary);
  cursor: pointer;
}
.datepicker .datepicker-switch:hover {
  background: var(--ab-surface-alt) !important;
  border-radius: var(--ab-radius-sm);
}

/* Calendar input fields on booking page */
.booking-form .datepicker.form-control,
.booking-form input.datepicker {
  background: var(--ab-surface-card, #fff);
  cursor: pointer;
}
.booking-form .datepicker.form-control:hover {
  border-color: var(--ab-primary-light, #3D5A80);
}

/* ── Hide utility ── */
.hide-this {
  display: none;
}
.top-225 {
  margin-top: var(--ab-space-8);
}
.text-lg {
  font-size: var(--ab-text-xl);
}