/* ========================================
     Central Lakes Physio & Pilates
     GenSolve Custom Booking Styles
     ======================================== */

  /* ========================================
     Fonts - Matching Website
     Syne: Headings/Display
     Manrope: Body text
     ======================================== */
  @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Syne:wght@600;700;800&display=swap');

  /* ========================================
     CSS Variables (Brand Colours)
     ======================================== */
  :root {
    /* Brand Colours */
    --clp-primary: #2E74B5;
    --clp-primary-dark: #1a4d7a;
    --clp-primary-light: #5a9fd4;
    --clp-accent: #ff9900;
    --clp-accent-dark: #cc7a00;

    /* Neutrals */
    --clp-white: #ffffff;
    --clp-cream: #fef9f3;
    --clp-sand: #f5ede3;
    --clp-grey: #7a7a7a;
    --clp-charcoal: #1a1a1a;
    --clp-ink: #0d0d0d;

    /* Typography */
    --clp-font-display: 'Syne', sans-serif;
    --clp-font-body: 'Manrope', sans-serif;

    /* Radius */
    --clp-radius-sm: 8px;
    --clp-radius-md: 16px;
    --clp-radius-lg: 24px;
    --clp-radius-full: 50px;
  }

  /* ========================================
     Base Styles
     ======================================== */
  body {
    font-family: var(--clp-font-body) !important;
    background-color: var(--clp-cream) !important;
    color: var(--clp-charcoal) !important;
    line-height: 1.7 !important;
    -webkit-font-smoothing: antialiased !important;
  }

  /* ========================================
     Hide GenSolve Header & Footer
     (We're embedding in an iframe)
     ======================================== */
  .wrapper.head,
  .footer-wrap,
  footer,
  .wrapper.foot {
    display: none !important;
  }

  /* ========================================
     Top Links
     ======================================== */
  .wrapper.top,
  .wrapper.top *,
  .toplinks,
  .toplinks * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
  }

  .wrapper.top {
    padding: 0.5rem 1rem 0.25rem 1rem !important;
    text-align: right !important;
  }

  .wrapper.top a,
  .toplinks a {
    font-family: var(--clp-font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: var(--clp-charcoal) !important;
    text-decoration: none !important;
    margin-left: 1rem !important;
  }

  .wrapper.top a:hover,
  .toplinks a:hover {
    color: var(--clp-accent) !important;
  }

  /* ========================================
     Typography
     ======================================== */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--clp-font-display) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    color: var(--clp-charcoal) !important;
  }

  h1 {
    font-size: 2rem !important;
  }

  h2 {
    font-size: 1.5rem !important;
  }

  h3 {
    font-size: 1.25rem !important;
  }

  p, span, label, li {
    font-family: var(--clp-font-body) !important;
  }

  /* ========================================
     Main Booking Form Section
     ======================================== */
  .wrapper.head-two,
  .wrapper.head-two.find-doctor {
    background: var(--clp-primary) !important;
    padding: 1rem 1rem 0.4rem 1rem !important;
  }


  /* ========================================
     Links
     ======================================== */
  a {
    color: var(--clp-primary) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
  }

  a:hover {
    color: var(--clp-accent) !important;
  }

  /* ========================================
     Results/Content Area
     ======================================== */
  .wrapper.mid {
    background: var(--clp-cream) !important;
    padding: 0 1rem 2rem 1rem !important;
  }

  .wrapper.mid .container {
    max-width: 1000px !important;
    margin: 0 auto !important;
  }

  /* Info message styling */
  .wrapper.mid > .container > h1,
  .alert,
  .alert-info {
    font-family: var(--clp-font-body) !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    color: var(--clp-charcoal) !important;
    background: var(--clp-white) !important;
    padding: 1rem 1.5rem !important;
    border-radius: var(--clp-radius-sm) !important;
    border-left: 4px solid var(--clp-accent) !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
  }

  /* Results section */
  section.results,
  #results,
  .results-container {
    background: var(--clp-white) !important;
    border-radius: var(--clp-radius-md) !important;
    padding: 1.5rem !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
  }

  /* ========================================
     Accordion (Clinician List)
     ======================================== */
  .accordion {
    background: var(--clp-white) !important;
    border-radius: var(--clp-radius-md) !important;
    overflow: hidden !important;
  }

  .abutton,
  .accordion-header,
  .accordion-button {
    font-family: var(--clp-font-display) !important;
    font-weight: 600 !important;
    font-size: 1.125rem !important;
    color: var(--clp-charcoal) !important;
    background: var(--clp-white) !important;
    padding: 1.25rem 1.5rem !important;
    border: none !important;
    border-bottom: 1px solid var(--clp-sand) !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    width: 100% !important;
    text-align: left !important;
  }

  .abutton:hover,
  .accordion-header:hover {
    background: var(--clp-cream) !important;
  }

  .abutton.active,
  .accordion-header.active {
    color: var(--clp-primary) !important;
    border-left: 4px solid var(--clp-accent) !important;
  }

  /* View Practitioners link */
  .abutton a,
  .abutton a.trigger {
    font-family: var(--clp-font-display) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    color: var(--clp-primary) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  .abutton a:hover,
  .abutton a.trigger:hover {
    color: var(--clp-accent) !important;
  }

  /* Replace X icon with chevron */
  .abutton a.trigger:before {
    content: '▼' !important;
    background-image: none !important;
    background: none !important;
    text-indent: 0 !important;
    width: auto !important;
    height: auto !important;
    font-size: 0.75rem !important;
    color: var(--clp-accent) !important;
    margin: 0 !important;
    transition: transform 0.3s ease !important;
  }

  /* Rotate chevron when open */
  .abutton a.open:before {
    transform: rotate(180deg) !important;
  }

  /* ========================================
     Clinician/Practitioner Cards
     ======================================== */

  /* Container for practitioner cards */
  [id^="site-prov-template"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    overflow-x: hidden !important;
  }

  .widget.bg.profile,
  .widget.profile {
    background: var(--clp-white) !important;
    border-radius: var(--clp-radius-md) !important;
    padding: 1.5rem !important;
    margin-bottom: 0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid var(--clp-sand) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    text-align: center !important;
    flex: 1 1 280px !important;
    max-width: 320px !important;
    min-width: 280px !important;
    max-height: none !important;
    height: auto !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  .widget.bg.profile:hover,
  .widget.profile:hover {
    transform: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  }

  /* Profile photo container - square crop */
  .widget.profile .image-hold,
  .profile .image-hold {
    display: inline-block !important;
    margin-bottom: 1rem !important;
    float: none !important;
    padding: 0 !important;
    width: 90px !important;
    height: 90px !important;
    overflow: hidden !important;
    border-radius: var(--clp-radius-sm) !important;
    border: 3px solid var(--clp-primary) !important;
    transition: border-color 0.3s ease !important;
  }

  .widget.profile:hover .image-hold,
  .profile:hover .image-hold {
    border-color: var(--clp-accent) !important;
  }

  /* Profile photo */
  .widget.profile .profile-pic,
  .widget.profile img,
  .profile .profile-pic {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center top !important;
    border: none !important;
    border-radius: 0 !important;
    float: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .widget.profile:hover .profile-pic,
  .widget.profile:hover img {
    transform: scale(1.05) !important;
  }

  /* Clinician name */
  .widget.profile h3,
  .widget.profile .no-change-colour h3 {
    font-family: var(--clp-font-display) !important;
    font-weight: 700 !important;
    font-size: 1.125rem !important;
    color: var(--clp-charcoal) !important;
    margin: 0.5rem 0 0.25rem 0 !important;
    line-height: 1.3 !important;
  }

  .widget.profile .no-change-colour:hover h3 {
    color: var(--clp-primary) !important;
  }

  /* Role/Title */
  .widget.profile h4 {
    font-family: var(--clp-font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--clp-accent) !important;
    margin-bottom: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
  }

  /* Bio text - clamped to 3 lines */
  .widget.profile > span {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-family: var(--clp-font-body) !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    color: var(--clp-grey) !important;
    margin-bottom: 1rem !important;
    text-align: left !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    clear: both !important;
  }

  /* View details link */
  .widget.profile .see-more {
    display: inline-block !important;
    font-family: var(--clp-font-body) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--clp-primary) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
  }

  .widget.profile .see-more:hover {
    color: var(--clp-accent) !important;
  }

  /* Remove empty paragraphs spacing */
  .widget.profile > p:empty {
    display: none !important;
  }

  /* ========================================
     Location/Site Info
     ======================================== */
  /* Site address and map container */
  .site-address,
  .location-info,
  .clinic-info {
    background: var(--clp-white) !important;
    border-radius: var(--clp-radius-sm) !important;
    padding: 1rem 1.25rem !important;
    margin-bottom: 1rem !important;
    border: none !important;
  }


  .site-address h2,
  .location-info h2,
  .clinic-info h3 {
    font-family: var(--clp-font-display) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--clp-primary) !important;
    margin: 0 0 0.25rem 0 !important;
  }

  .site-address h4,
  .site-address p,
  .location-info p {
    font-size: 0.9375rem !important;
    color: var(--clp-grey) !important;
    margin: 0 !important;
  }

  /* ========================================
     Calendar / Schedule View (scoped to content area)
     ======================================== */
  .wrapper.mid .calendar,
  .wrapper.mid .week-view,
  .wrapper.mid .schedule-grid,
  .wrapper.mid .booking-calendar {
    background: var(--clp-white) !important;
    border-radius: var(--clp-radius-md) !important;
    padding: 1.5rem !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  }

  /* Week navigation */
  .wrapper.mid .week-nav,
  .wrapper.mid .calendar-nav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid var(--clp-sand) !important;
  }

  /* Navigation arrows */
  .wrapper.mid .week-nav a,
  .wrapper.mid .calendar-nav a,
  .wrapper.mid .prev-week,
  .wrapper.mid .next-week,
  .wrapper.mid .nav-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: var(--clp-sand) !important;
    color: var(--clp-charcoal) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .wrapper.mid .week-nav a:hover,
  .wrapper.mid .calendar-nav a:hover,
  .wrapper.mid .nav-arrow:hover {
    background: var(--clp-primary) !important;
    color: var(--clp-white) !important;
    transform: scale(1.05) !important;
  }

  /* Day headers (scoped to content area) */
  .wrapper.mid .day-header,
  .wrapper.mid .schedule-day-header,
  .wrapper.mid th {
    font-family: var(--clp-font-body) !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    color: var(--clp-grey) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 0.75rem !important;
    text-align: center !important;
  }

  /* ========================================
     Time Slots
     ======================================== */
  .time-slot,
  .slot,
  .available-slot,
  a.slot {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--clp-white) !important;
    border: 2px solid var(--clp-sand) !important;
    border-radius: var(--clp-radius-sm) !important;
    padding: 0.625rem 1rem !important;
    margin: 0.25rem !important;
    font-family: var(--clp-font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--clp-charcoal) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    min-width: 80px !important;
  }

  .time-slot:hover,
  .slot:hover,
  .available-slot:hover,
  a.slot:hover {
    border-color: var(--clp-primary) !important;
    background: var(--clp-primary) !important;
    color: var(--clp-white) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(46, 116, 181, 0.25) !important;
  }

  .time-slot.selected,
  .slot.selected,
  .slot.active {
    background: var(--clp-primary) !important;
    border-color: var(--clp-primary) !important;
    color: var(--clp-white) !important;
  }

  /* Unavailable slots */
  .time-slot.unavailable,
  .slot.unavailable,
  .slot-unavailable,
  .slot.disabled {
    background: #f5f5f5 !important;
    border-color: #e8e8e8 !important;
    color: #bbb !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
  }

  /* ========================================
     Tables (scoped to content area)
     ======================================== */
  .wrapper.mid table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-family: var(--clp-font-body) !important;
  }

  .wrapper.mid td {
    padding: 0.75rem !important;
    border-bottom: 1px solid var(--clp-sand) !important;
    font-size: 0.9375rem !important;
  }

  .wrapper.mid tr:hover td {
    background: var(--clp-cream) !important;
  }

  /* ========================================
     Checkboxes & Radio Buttons
     ======================================== */
  input[type="checkbox"],
  input[type="radio"] {
    accent-color: var(--clp-primary) !important;
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
  }

  /* Custom checkbox styling (iCheck override) */
  .icheckbox,
  .iradio {
    border: 2px solid var(--clp-sand) !important;
    border-radius: 4px !important;
    background: var(--clp-white) !important;
  }

  .icheckbox.checked,
  .iradio.checked {
    background: var(--clp-primary) !important;
    border-color: var(--clp-primary) !important;
  }

  /* ========================================
     Clinician Details Page
     ======================================== */

  /* Main content area on details page */
  .clinician-details,
  .provider-details {
    background: var(--clp-white) !important;
    border-radius: var(--clp-radius-md) !important;
    padding: 2rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
  }

  /* ========================================
     Profile Section - Email Signature Style
     ======================================== */
  section.profile {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    background: var(--clp-white) !important;
    border-radius: var(--clp-radius-sm) !important;
    padding: 0 !important;
    margin: 0 0 1rem 0 !important;
    box-shadow: none !important;
    border: none !important;
    max-width: none !important;
    width: 100% !important;
  }

  /* Remove any inner div/widget borders/padding inside profile */
  section.profile > div,
  section.profile > .widget {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* Widget profile - email signature card style */
  section.profile .widget.profile.lg,
  section.profile .col-2-12.widget.profile.lg {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 1.25rem !important;
    background: var(--clp-white) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    padding: 1.25rem !important;
    margin: 0 !important;
    border-radius: var(--clp-radius-sm) !important;
    border: none !important;
    border-top: 4px solid transparent !important;
    border-image: linear-gradient(90deg, var(--clp-primary) 0%, var(--clp-accent) 100%) 1 !important;
    max-width: none !important;
    min-width: 0 !important;
    text-align: left !important;
    width: 100% !important;
    float: none !important;
    flex: 1 !important;
  }

  /* Profile photo - square with blue border */
  section.profile .image-hold,
  section.profile .widget.profile.lg .image-hold,
  section.profile .widget.profile.lg > a:first-child,
  section.profile > a:first-child {
    flex-shrink: 0 !important;
    width: 100px !important;
    height: 100px !important;
    min-width: 100px !important;
    overflow: hidden !important;
    border-radius: var(--clp-radius-sm) !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    background: var(--clp-white) !important;
    box-sizing: border-box !important;
    border: 3px solid var(--clp-primary) !important;
  }

  section.profile img,
  section.profile .widget.profile.lg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: calc(var(--clp-radius-sm) - 3px) !important;
    border: none !important;
    background: var(--clp-sand) !important;
    display: block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Info container - text content */
  section.profile > div:last-child,
  section.profile .widget.profile.lg > div,
  section.profile .widget.profile.lg > div[class*="col-"],
  section.profile .profile-info {
    flex: 1 !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
  }

  /* Override all column classes inside profile */
  section.profile [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Clinician name */
  section.profile h2,
  section.profile h1 {
    font-family: var(--clp-font-display) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--clp-charcoal) !important;
    margin: 0 0 0.125rem 0 !important;
    line-height: 1.2 !important;
  }

  /* Title/role */
  section.profile h3,
  section.profile h4 {
    font-family: var(--clp-font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--clp-accent) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin: 0 0 0.5rem 0 !important;
    line-height: 1.2 !important;
  }

  /* Bio/description */
  section.profile p,
  section.profile > span,
  section.profile .bio {
    font-family: var(--clp-font-body) !important;
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
    color: var(--clp-grey) !important;
    margin: 0 !important;
  }

  /* Links within profile */
  section.profile a {
    color: var(--clp-primary) !important;
  }

  section.profile a:hover {
    color: var(--clp-accent) !important;
  }

  /* Mobile: stack vertically */
  @media (max-width: 480px) {
    section.profile {
      flex-direction: column !important;
      text-align: center !important;
      gap: 0.75rem !important;
    }

    section.profile > div:last-child,
    section.profile .profile-info {
      border-left: none !important;
      border-top: 2px solid var(--clp-primary) !important;
      padding-left: 0 !important;
      padding-top: 0.75rem !important;
      min-height: auto !important;
    }
  }

  /* ========================================
     Legacy Profile Widget Styles
     (for practitioner cards on listing page)
     ======================================== */
  .widget.bg.profile.lg,
  .widget.profile.lg,
  .profile-header {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2rem !important;
    align-items: flex-start !important;
    background: var(--clp-white) !important;
    border-radius: var(--clp-radius-md) !important;
    padding: 2rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
    text-align: left !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* Large profile photo on details page */
  .widget.profile.lg .image-hold,
  .profile-header .image-hold,
  .provider-photo {
    width: 140px !important;
    height: 140px !important;
    flex-shrink: 0 !important;
    border-radius: var(--clp-radius-md) !important;
    border: 4px solid var(--clp-primary) !important;
    overflow: hidden !important;
    margin: 0 !important;
    float: none !important;
  }

  .widget.profile.lg img,
  .profile-header img,
  .provider-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* Profile info container */
  .widget.profile.lg .profile-info,
  .profile-header .info,
  .provider-info {
    flex: 1 !important;
    min-width: 250px !important;
  }

  /* Clinician name on details page */
  .widget.profile.lg h2,
  .widget.profile.lg h1,
  .profile-header h1,
  .provider-name {
    font-family: var(--clp-font-display) !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: var(--clp-charcoal) !important;
    margin: 0 0 0.5rem 0 !important;
    line-height: 1.2 !important;
  }

  /* Title/credentials on details page */
  .widget.profile.lg h3,
  .widget.profile.lg h4,
  .profile-header h4,
  .provider-title {
    font-family: var(--clp-font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--clp-accent) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 1rem !important;
  }

  /* Bio/description on details page */
  .widget.profile.lg p,
  .widget.profile.lg > span,
  .profile-header p,
  .provider-bio {
    font-family: var(--clp-font-body) !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: var(--clp-grey) !important;
    margin: 0 !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
  }

  /* ========================================
     Book Session / Site Section - Card Style
     ======================================== */
  section.book-session,
  section.site,
  .book-session.site {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 1.5rem !important;
    background: var(--clp-white) !important;
    border-radius: var(--clp-radius-sm) !important;
    padding: 1.25rem !important;
    margin: 0 0 1rem 0 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    border: none !important;
  }

  section.book-session h2,
  section.site h2,
  .book-session.site h2 {
    font-family: var(--clp-font-display) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--clp-charcoal) !important;
    margin: 0 0 0.75rem 0 !important;
  }

  /* Smaller h3 text in book-session */
  section.book-session h3,
  section.site h3,
  .book-session.site h3 {
    font-family: var(--clp-font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--clp-grey) !important;
    margin: 0 0 0.5rem 0 !important;
  }

  /* Hide h2 inside calendar section (Central Lakes Physio duplicate) */
  section.book-session > div:last-child h2,
  section.site > div:last-child h2,
  .book-session.site > div:last-child h2,
  section.book-session .calendar h2,
  section.book-session .week-view h2,
  section.site .calendar h2,
  section.site .week-view h2,
  h2.appointment-heading {
    display: none !important;
  }

  /* Schedule not available message - smaller default styling */
  p[id^="schedule-not-available"] {
    font-family: var(--clp-font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: var(--clp-grey) !important;
  }

  /* Calendar dropdown select - wider */
  section.book-session .btn-group.bootstrap-select,
  section.site .btn-group.bootstrap-select,
  .wrapper.mid .btn-group.bootstrap-select {
    min-width: 300px !important;
  }

  /* Left side - site info */
  section.book-session > div:first-child,
  section.site > div:first-child,
  .book-session.site > div:first-child,
  section.book-session .site-address,
  section.site .site-address {
    flex: 0 0 200px !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Right side - calendar */
  section.book-session > div:last-child,
  section.site > div:last-child,
  .book-session.site > div:last-child,
  section.book-session .calendar,
  section.book-session .week-view {
    flex: 1 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Override column classes inside book-session */
  section.book-session [class*="col-"],
  section.site [class*="col-"],
  .book-session.site [class*="col-"] {
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ========================================
     Clinician Details Page - Consistent Typography
     ======================================== */

  /* All labels */
  .wrapper.mid label {
    font-family: var(--clp-font-body) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--clp-charcoal) !important;
  }

  /* All paragraphs in content area */
  .wrapper.mid p {
    font-family: var(--clp-font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: var(--clp-grey) !important;
    line-height: 1.6 !important;
  }

  /* Warning/info messages */
  .wrapper.mid .alert,
  .wrapper.mid .alert-warning,
  .wrapper.mid .alert-info,
  .wrapper.mid .message,
  .wrapper.mid .notice {
    font-family: var(--clp-font-body) !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    color: var(--clp-grey) !important;
    line-height: 1.5 !important;
  }

  /* Select/dropdown button text */
  .wrapper.mid .btn-group .btn,
  .wrapper.mid .bootstrap-select .btn,
  .wrapper.mid select,
  .wrapper.mid .dropdown-toggle {
    font-family: var(--clp-font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--clp-charcoal) !important;
  }

  /* Dropdown menu items */
  .wrapper.mid .dropdown-menu li a,
  .wrapper.mid .bootstrap-select .dropdown-menu li a {
    font-family: var(--clp-font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: var(--clp-charcoal) !important;
  }

  /* Radio/checkbox labels (appointment types) */
  .wrapper.mid input[type="radio"] + label,
  .wrapper.mid input[type="checkbox"] + label,
  .wrapper.mid .radio label,
  .wrapper.mid .checkbox label {
    font-family: var(--clp-font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: var(--clp-charcoal) !important;
  }

  /* Small/helper text */
  .wrapper.mid small,
  .wrapper.mid .help-block,
  .wrapper.mid .hint {
    font-family: var(--clp-font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    color: var(--clp-grey) !important;
  }

  /* Sessions header */
  .sessions .head {
    padding: 0.5rem 0.25rem !important;
    overflow: visible !important;
    min-height: 2.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .sessions .head,
  .sessions .head * {
    font-family: var(--clp-font-body) !important;
    font-size: 0.7rem !important;
    font-weight: 400 !important;
    color: var(--clp-white) !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  .sessions .cell {
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* Hide duplicate navigation text in sessions (keep background image arrows) */
  .sessions .cell.next .head,
  .sessions .cell.prev .head {
    font-size: 0 !important;
    color: transparent !important;
  }

  /* ========================================
     Practitioner Aside (Site Details Page)
     ======================================== */
  .widget.profile.aside {
    text-align: left !important;
  }

  .widget.profile.aside .widget.profile {
    text-align: left !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
    margin-bottom: 1rem !important;
  }

  /* Consistent photo size with border - square */
  .widget.profile.aside .image-hold,
  .widget.profile.aside .widget.profile .image-hold,
  .widget.profile.aside a:has(img) {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    border: 3px solid var(--clp-primary) !important;
    border-radius: var(--clp-radius-sm) !important;
    overflow: hidden !important;
    display: block !important;
    float: left !important;
    margin-right: 1rem !important;
    margin-bottom: 0.5rem !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    aspect-ratio: 1 / 1 !important;
  }

  .widget.profile.aside img,
  .widget.profile.aside .widget.profile img,
  .widget.profile.aside .image-hold img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    border: none !important;
    border-radius: calc(var(--clp-radius-sm) - 3px) !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Clamp bio text to 3 lines */
  .widget.profile.aside > span,
  .widget.profile.aside .widget.profile > span,
  .widget.profile.aside span,
  .widget.profile.aside p,
  .widget.profile.aside .widget.profile span,
  .widget.profile.aside .widget.profile p {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-family: var(--clp-font-body) !important;
    font-size: 0.8125rem !important;
    line-height: 1.5 !important;
    color: var(--clp-grey) !important;
    text-align: left !important;
    max-height: 4.5em !important;
  }

  /* Practitioner name in aside */
  .widget.profile.aside h3,
  .widget.profile.aside .widget.profile h3 {
    font-family: var(--clp-font-display) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--clp-charcoal) !important;
    margin: 0 0 0.25rem 0 !important;
    text-align: left !important;
  }

  /* Title in aside */
  .widget.profile.aside h4,
  .widget.profile.aside .widget.profile h4 {
    font-family: var(--clp-font-body) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: var(--clp-accent) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin: 0 0 0.5rem 0 !important;
    text-align: left !important;
  }

  /* Select container label */
  .select-container label,
  label[for*="select"],
  .wrapper.head-two label,
  .sessions .select-container label {
    color: var(--clp-white) !important;
  }

  /* Form legend */
  legend {
    font-family: var(--clp-font-body) !important;
    font-style: normal !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
  }

  /* ========================================
     Appointment Type Selector
     ======================================== */
  .appointment-selector,
  .service-selector,
  .booking-type {
    background: var(--clp-white) !important;
    border-radius: var(--clp-radius-md) !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
  }

  .appointment-selector label,
  .service-selector label,
  .booking-type label {
    font-family: var(--clp-font-body) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    color: var(--clp-charcoal) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0.75rem !important;
    display: block !important;
  }

  /* ========================================
     Week Calendar View
     ======================================== */
  .week-calendar,
  .availability-calendar,
  #week-view,
  .schedule-container {
    background: var(--clp-white) !important;
    border-radius: var(--clp-radius-md) !important;
    padding: 1.5rem !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
  }

  /* Week header with navigation */
  .week-header,
  .calendar-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 2px solid var(--clp-sand) !important;
  }

  /* Current week/date display */
  .week-header h3,
  .week-header h4,
  .calendar-header h3,
  .current-week {
    font-family: var(--clp-font-display) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--clp-charcoal) !important;
    margin: 0 !important;
  }

  /* Prev/Next week buttons */
  .week-nav-btn,
  .calendar-nav-btn,
  a[onclick*="displayWeek"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: var(--clp-sand) !important;
    color: var(--clp-charcoal) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .week-nav-btn:hover,
  .calendar-nav-btn:hover,
  a[onclick*="displayWeek"]:hover {
    background: var(--clp-primary) !important;
    color: var(--clp-white) !important;
    transform: scale(1.1) !important;
  }

  /* Day columns */
  .day-column,
  .schedule-day {
    text-align: center !important;
    padding: 0.5rem !important;
    border-right: 1px solid var(--clp-sand) !important;
  }

  .day-column:last-child,
  .schedule-day:last-child {
    border-right: none !important;
  }

  /* Day name header */
  .day-column .day-name,
  .schedule-day .day-name {
    font-family: var(--clp-font-body) !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    color: var(--clp-grey) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 0.25rem !important;
  }

  /* Day date */
  .day-column .day-date,
  .schedule-day .day-date {
    font-family: var(--clp-font-display) !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    color: var(--clp-charcoal) !important;
    margin-bottom: 1rem !important;
  }

  /* Today highlight */
  .day-column.today,
  .schedule-day.today {
    background: var(--clp-cream) !important;
    border-radius: var(--clp-radius-sm) !important;
  }

  .day-column.today .day-date,
  .schedule-day.today .day-date {
    color: var(--clp-primary) !important;
  }

  /* No availability message */
  .no-availability,
  .no-slots,
  .unavailable-message {
    font-family: var(--clp-font-body) !important;
    font-size: 0.875rem !important;
    color: var(--clp-grey) !important;
    text-align: center !important;
    padding: 2rem !important;
    background: var(--clp-cream) !important;
    border-radius: var(--clp-radius-sm) !important;
  }

  /* ========================================
     Booking Buttons (exclude register/login pages)
     ======================================== */
  .book-btn,
  .booking-button,
  .wrapper.mid:not(:has(.register-login)) input[type="submit"],
  .wrapper.mid:not(:has(.register-login)) button[type="submit"] {
    font-family: var(--clp-font-body) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    padding: 1rem 2rem !important;
    border-radius: var(--clp-radius-full) !important;
    background: var(--clp-accent) !important;
    color: var(--clp-charcoal) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
  }

  .book-btn:hover,
  .booking-button:hover,
  .wrapper.mid:not(:has(.register-login)) input[type="submit"]:hover,
  .wrapper.mid:not(:has(.register-login)) button[type="submit"]:hover {
    background: var(--clp-accent-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(255, 153, 0, 0.35) !important;
    color: var(--clp-charcoal) !important;
  }

  /* Secondary/back button */
  .back-btn,
  .secondary-btn {
    background: var(--clp-white) !important;
    border: 2px solid var(--clp-sand) !important;
    color: var(--clp-charcoal) !important;
  }

  .back-btn:hover,
  .secondary-btn:hover {
    border-color: var(--clp-primary) !important;
    color: var(--clp-primary) !important;
    background: var(--clp-white) !important;
    box-shadow: none !important;
  }

  /* ========================================
     My Account / Profile Page
     ======================================== */

  /* Main profile container - exclude register/login pages */
  body div.widget.bg:not(:has(.register-login)) {
    background-color: #fef9f3 !important;
    /*padding: 2rem !important;*/
  }

  body div.widget.bg:not(:has(.register-login)) .col-percent75.widget,
  body div.widget.bg:not(:has(.register-login)) div.col-percent75.widget {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    padding: 2rem !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
  }

  body div.widget.bg:not(:has(.register-login)) h1,
  body div.widget.bg:not(:has(.register-login)) .col-percent75 h1 {
    font-family: 'Syne', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 1.5rem 0 !important;
    border-bottom: 3px solid #2E74B5 !important;
    padding-bottom: 0.75rem !important;
  }

  body div.widget.bg:not(:has(.register-login)) h2,
  body div.widget.bg:not(:has(.register-login)) .col-percent75 h2 {
    font-family: 'Syne', sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 1.5rem 0 1rem 0 !important;
  }

  body div.widget.bg:not(:has(.register-login)) h3,
  body div.widget.bg:not(:has(.register-login)) .col-percent75 h3 {
    font-family: 'Syne', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 0.75rem 0 !important;
  }

  body div.widget.bg:not(:has(.register-login)) label,
  body div.widget.bg:not(:has(.register-login)) .col-percent75 label {
    font-family: 'Manrope', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    /*color: #1a1a1a !important;*/
    /*display: block !important;*/
    margin-bottom: 0.5rem !important;
  }

  body div.widget.bg:not(:has(.register-login)) input[type="text"],
  body div.widget.bg:not(:has(.register-login)) input[type="email"],
  body div.widget.bg:not(:has(.register-login)) input[type="password"],
  body div.widget.bg:not(:has(.register-login)) input[type="tel"],
  body div.widget.bg:not(:has(.register-login)) input[type="number"],
  body div.widget.bg:not(:has(.register-login)) textarea,
  body div.widget.bg:not(:has(.register-login)) select,
  body div.widget.bg:not(:has(.register-login)) .form-control {
    font-family: 'Manrope', sans-serif !important;
    font-size: 0.875rem !important;
    color: #1a1a1a !important;
    background-color: #ffffff !important;
    border: 2px solid #f5ede3 !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease !important;
  }

  body div.widget.bg:not(:has(.register-login)) input:focus,
  body div.widget.bg:not(:has(.register-login)) textarea:focus,
  body div.widget.bg:not(:has(.register-login)) select:focus,
  body div.widget.bg:not(:has(.register-login)) .form-control:focus {
    border-color: #2E74B5 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(46, 116, 181, 0.15) !important;
  }

  body div.widget.bg:not(:has(.register-login)) p,
  body div.widget.bg:not(:has(.register-login)) span {
    font-family: 'Manrope', sans-serif !important;
    /*font-size: 0.875rem !important;*/
    /*color: #7a7a7a !important;*/
    line-height: 1.6 !important;
  }

  body div.widget.bg:not(:has(.register-login)) a {
    color: #2E74B5 !important;
    text-decoration: none !important;
  }

  body div.widget.bg:not(:has(.register-login)) a:hover {
    color: #ff9900 !important;
  }

  /* Buttons in profile area - only target submit buttons, not all .btn */
  body div.widget.bg input[type="submit"],
  body div.widget.bg button[type="submit"] {
    font-family: 'Manrope', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    background-color: #ff9900 !important;
    color: #1a1a1a !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 0.75rem 1.5rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
  }

  body div.widget.bg input[type="submit"]:hover,
  body div.widget.bg button[type="submit"]:hover {
    background-color: #cc7a00 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.3) !important;
  }

  /* Form groups spacing */
  body div.widget.bg:not(:has(.register-login)) .form-group,
  body div.widget.bg:not(:has(.register-login)) fieldset {
    margin-bottom: 1.25rem !important;
  }

  /* Table styling in profile */
  body div.widget.bg:not(:has(.register-login)) table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 1rem 0 !important;
  }

  body div.widget.bg:not(:has(.register-login)) table th,
  body div.widget.bg:not(:has(.register-login)) table td {
    font-family: 'Manrope', sans-serif !important;
    font-size: 0.875rem !important;
    padding: 0.75rem !important;
    text-align: left !important;
    border-bottom: 1px solid #f5ede3 !important;
  }

  body div.widget.bg:not(:has(.register-login)) table th {
    font-weight: 600 !important;
    color: #1a1a1a !important;
    background-color: #fef9f3 !important;
  }

  body div.widget.bg:not(:has(.register-login)) table td {
    color: #7a7a7a !important;
  }

  /* Form inputs */
  .wrapper.mid input[type="text"],
  .wrapper.mid input[type="email"],
  .wrapper.mid input[type="password"],
  .wrapper.mid input[type="tel"],
  .wrapper.mid textarea {
    font-family: var(--clp-font-body) !important;
    font-size: 0.875rem !important;
    color: var(--clp-charcoal) !important;
    background: var(--clp-white) !important;
    border: 1px solid var(--clp-sand) !important;
    border-radius: var(--clp-radius-sm) !important;
    padding: 0.75rem 1rem !important;
    transition: border-color 0.2s ease !important;
  }

  .wrapper.mid input[type="text"]:focus,
  .wrapper.mid input[type="email"]:focus,
  .wrapper.mid input[type="password"]:focus,
  .wrapper.mid input[type="tel"]:focus,
  .wrapper.mid textarea:focus {
    border-color: var(--clp-primary) !important;
    outline: none !important;
  }

  /* Input groups */
  .wrapper.mid .input-group {
    margin-bottom: 1rem !important;
  }

  .wrapper.mid .input-group-addon {
    background: var(--clp-sand) !important;
    border: 1px solid var(--clp-sand) !important;
    border-radius: var(--clp-radius-sm) 0 0 var(--clp-radius-sm) !important;
    color: var(--clp-grey) !important;
  }

  /* Form headings */
  .wrapper.mid h3 {
    font-family: var(--clp-font-display) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--clp-charcoal) !important;
    margin-bottom: 1rem !important;
  }

  /* Form links */
  .wrapper.mid a.forgot-password,
  .wrapper.mid a[href*="forgot"],
  .wrapper.mid a[href*="register"] {
    font-family: var(--clp-font-body) !important;
    font-size: 0.8125rem !important;
    color: var(--clp-primary) !important;
  }

  .wrapper.mid a.forgot-password:hover,
  .wrapper.mid a[href*="forgot"]:hover,
  .wrapper.mid a[href*="register"]:hover {
    color: var(--clp-accent) !important;
  }

  /* Form containers/panels */
  .wrapper.mid .panel,
  .wrapper.mid .form-container,
  .wrapper.mid .login-form,
  .wrapper.mid .register-form {
    background: var(--clp-white) !important;
    border-radius: var(--clp-radius-md) !important;
    padding: 1.5rem !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    margin-bottom: 1rem !important;
  }

  /* Form field labels */
  .wrapper.mid .form-group label,
  .wrapper.mid .control-label {
    font-family: var(--clp-font-body) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--clp-charcoal) !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
  }

  /* ========================================
     Mobile Responsive Adjustments
     ======================================== */
  @media (max-width: 768px) {
    .wrapper.head-two {
      padding: 1.5rem 1rem !important;
    }

    #search-form-v_1_0_0 {
      padding: 1rem !important;
    }

    .widget.profile,
    .widget.bg.profile {
      padding: 1rem !important;
    }

    .time-slot,
    .slot,
    a.slot {
      padding: 0.5rem 0.75rem !important;
      font-size: 0.8125rem !important;
      min-width: 70px !important;
    }

    .wrapper.mid input[type="submit"],
    .wrapper.mid button[type="submit"] {
      width: 100% !important;
      padding: 1rem !important;
    }
  }

  /* ========================================
     Register/Login Page - MUST BE LAST
     ======================================== */

  /* Date of birth dropdowns - display inline, equal width */
  #dob-fields {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    align-items: center !important;
  }

  #dob-fields > label {
    width: 100% !important;
    flex-basis: 100% !important;
  }

  #dob-fields > .btn-group.bootstrap-select {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  /* ========================================
     Register Page - Text inputs to match Bootstrap Select
     ======================================== */

  /* Constrain the form container */
  .login-register-form.widget.bg,
  .widget.bg.login-register-form {
    box-sizing: border-box !important;
    max-width: 350px !important;
  }

  .login-register-form .form-group,
  .register-login .form-group {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  /* Reset any inherited width on inputs in register form */
  .login-register-form input,
  .login-register-form .form-control,
  .register-login input,
  .register-login .form-control {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* Match text inputs to bootstrap-select button styling */
  .login-register-form .form-control,
  .login-register-form input[type="text"],
  .login-register-form input[type="email"],
  .login-register-form input[type="password"],
  .login-register-form input[type="tel"],
  .register-login .form-control,
  .register-login input[type="text"],
  .register-login input[type="email"],
  .register-login input[type="password"],
  .register-login input[type="tel"] {
    height: 34px !important;
    padding: 6px 12px !important;
    font-family: var(--clp-font-body) !important;
    font-size: 14px !important;
    line-height: 1.42857143 !important;
    color: #333333 !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #cccccc !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s !important;
  }

  .login-register-form .form-control:focus,
  .login-register-form input[type="text"]:focus,
  .login-register-form input[type="email"]:focus,
  .login-register-form input[type="password"]:focus,
  .login-register-form input[type="tel"]:focus,
  .register-login .form-control:focus,
  .register-login input[type="text"]:focus,
  .register-login input[type="email"]:focus,
  .register-login input[type="password"]:focus,
  .register-login input[type="tel"]:focus {
    border-color: var(--clp-primary) !important;
    outline: 0 !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(46, 116, 181, 0.3) !important;
  }

  /* ========================================
     Booking Summary / Confirmation Page
     ======================================== */

  /* Main confirmation section */
  section.book-class.confirmation {
    background: var(--clp-white) !important;
    border-radius: var(--clp-radius-md) !important;
    padding: 2rem !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
    margin-bottom: 1.5rem !important;
  }

  section.book-class.confirmation .widget.bg {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  /* Calendar date icon */
  section.book-class.confirmation .col-percent10 {
    flex: 0 0 auto !important;
    width: auto !important;
    float: none !important;
    padding: 0 !important;
  }

  section.book-class.confirmation .cal-icon {
    background: linear-gradient(135deg, var(--clp-primary) 0%, var(--clp-primary-dark) 100%) !important;
    border-radius: var(--clp-radius-sm) !important;
    padding: 0 !important;
    width: 80px !important;
    height: 90px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 16px rgba(46, 116, 181, 0.3) !important;
    overflow: hidden !important;
    position: relative !important;
  }

  section.book-class.confirmation .cal-icon::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 8px !important;
    background: var(--clp-accent) !important;
  }

  section.book-class.confirmation .cal-icon .mth {
    font-family: var(--clp-font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-top: 12px !important;
    margin-bottom: 0.25rem !important;
    display: block !important;
  }

  section.book-class.confirmation .cal-icon .day {
    font-family: var(--clp-font-display) !important;
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: var(--clp-white) !important;
    line-height: 1 !important;
    display: block !important;
  }

  /* Content area */
  section.book-class.confirmation .col-percent90 {
    flex: 1 !important;
    min-width: 0 !important;
    float: none !important;
    padding: 0 !important;
    width: auto !important;
  }

  section.book-class.confirmation .col-percent90.widget {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
  }

  /* Main heading */
  section.book-class.confirmation h1 {
    font-family: var(--clp-font-display) !important;
    font-size: 1.375rem !important;
    font-weight: 700 !important;
    color: var(--clp-charcoal) !important;
    margin: 0 0 1.5rem 0 !important;
    line-height: 1.3 !important;
    border-bottom: 2px solid var(--clp-sand) !important;
    padding-bottom: 1rem !important;
  }

  /* Form content row */
  section.book-class.confirmation .row.content {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  /* Notes textarea section */
  section.book-class.confirmation .row.content > label {
    font-family: var(--clp-font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--clp-charcoal) !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
  }

  section.book-class.confirmation textarea[name="apptNotes"] {
    width: 100% !important;
    min-height: 100px !important;
    padding: 1rem !important;
    font-family: var(--clp-font-body) !important;
    font-size: 0.9375rem !important;
    color: var(--clp-charcoal) !important;
    background: var(--clp-cream) !important;
    border: 2px solid var(--clp-sand) !important;
    border-radius: var(--clp-radius-sm) !important;
    resize: vertical !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  }

  section.book-class.confirmation textarea[name="apptNotes"]:focus {
    border-color: var(--clp-primary) !important;
    background: var(--clp-white) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(46, 116, 181, 0.1) !important;
  }

  /* Booking details article */
  section.book-class.confirmation .article.booking-details {
    background: var(--clp-cream) !important;
    border-radius: var(--clp-radius-sm) !important;
    padding: 1.5rem !important;
    border-left: 4px solid var(--clp-accent) !important;
  }

  /* Booking summary list */
  section.book-class.confirmation .booking-summary {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 1.5rem 0 !important;
  }

  section.book-class.confirmation .booking-summary li {
    font-family: var(--clp-font-body) !important;
    font-size: 0.9375rem !important;
    color: var(--clp-charcoal) !important;
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
  }

  section.book-class.confirmation .booking-summary li:last-child {
    border-bottom: none !important;
  }

  /* First item (appointment type) - bold */
  section.book-class.confirmation .booking-summary li:first-child {
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: var(--clp-primary) !important;
  }

  /* Add icons to list items */
  section.book-class.confirmation .booking-summary li:nth-child(2)::before {
    content: '📅' !important;
    font-size: 1rem !important;
  }

  section.book-class.confirmation .booking-summary li:nth-child(3)::before {
    content: '🕐' !important;
    font-size: 1rem !important;
  }

  section.book-class.confirmation .booking-summary li:nth-child(4)::before {
    content: '👤' !important;
    font-size: 1rem !important;
  }

  section.book-class.confirmation .booking-summary li:nth-child(5)::before {
    content: '📍' !important;
    font-size: 1rem !important;
  }

  /* Confirm booking button */
  section.book-class.confirmation input[type="submit"],
  section.book-class.confirmation .mobile-number {
    font-family: var(--clp-font-body) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, var(--clp-accent) 0%, var(--clp-accent-dark) 100%) !important;
    color: var(--clp-charcoal) !important;
    border: none !important;
    border-radius: var(--clp-radius-full) !important;
    padding: 1rem 2.5rem !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 16px rgba(255, 153, 0, 0.3) !important;
    display: inline-block !important;
    text-align: center !important;
    margin-bottom: 1rem !important;
  }

  section.book-class.confirmation input[type="submit"]:hover,
  section.book-class.confirmation .mobile-number:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(255, 153, 0, 0.4) !important;
  }

  section.book-class.confirmation input[type="submit"]:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
  }

  /* Cancel link */
  section.book-class.confirmation .article p {
    font-family: var(--clp-font-body) !important;
    font-size: 0.875rem !important;
    color: var(--clp-grey) !important;
    margin: 0 !important;
  }

  section.book-class.confirmation .article p a {
    color: var(--clp-primary) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
  }

  section.book-class.confirmation .article p a:hover {
    color: var(--clp-accent) !important;
  }

  /* Clinic info section */
  section.book-class.confirmation .article:not(.booking-details) {
    margin-top: 1.5rem !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid var(--clp-sand) !important;
  }

  section.book-class.confirmation .article h3 {
    font-family: var(--clp-font-display) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--clp-charcoal) !important;
    margin: 0 0 0.25rem 0 !important;
  }

  section.book-class.confirmation .article h4 {
    font-family: var(--clp-font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--clp-grey) !important;
    margin: 0 0 1rem 0 !important;
  }

  /* Map container */
  section.book-class.confirmation .widget.site.lg,
  section.book-class.confirmation .widget.bg.map {
    background: var(--clp-sand) !important;
    border-radius: var(--clp-radius-sm) !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
  }

  section.book-class.confirmation .widget.bg.map {
    padding: 0 !important;
  }

  section.book-class.confirmation iframe {
    border-radius: var(--clp-radius-sm) !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 200px !important;
  }

  /* Bottom confirm button section */
  section.book-class.confirmation .article:last-child {
    background: var(--clp-cream) !important;
    border-radius: var(--clp-radius-sm) !important;
    padding: 1.5rem !important;
    text-align: center !important;
    margin-top: 1.5rem !important;
    border-top: none !important;
  }

  /* Mobile responsive for confirmation page */
  @media (max-width: 600px) {
    section.book-class.confirmation {
      padding: 1.25rem !important;
    }

    section.book-class.confirmation .widget.bg {
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
    }

    section.book-class.confirmation .cal-icon {
      width: 70px !important;
      height: 80px !important;
    }

    section.book-class.confirmation .cal-icon .day {
      font-size: 1.75rem !important;
    }

    section.book-class.confirmation h1 {
      font-size: 1.125rem !important;
      text-align: center !important;
    }

    section.book-class.confirmation .booking-summary li {
      font-size: 0.875rem !important;
    }

    section.book-class.confirmation input[type="submit"] {
      width: 100% !important;
      padding: 1rem 1.5rem !important;
    }
  }