/**
 * Face Dr Consultation Flow Styles
 *
 * Custom styles for the Alpine.js-based consultation booking flow
 * These styles extend Tailwind CSS with brand-specific components
 *
 * @version 2.0
 * @requires Tailwind CSS (via Shopify theme)
 */

/* Alpine.js cloak utility - hides content until Alpine initializes */
[x-cloak] {
    display: none !important;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Brand Color Variables
   ============================================ */
:root {
    --brand-primary: #11293b;      /* Dark navy - main brand color */
    --brand-secondary: #3c6788;    /* Blue-grey - secondary actions */
    --brand-tertiary: #E6F0F2;      /* Light teal - for light button hovers */
    --brand-light: #f5f1ee;        /* Warm off-white - backgrounds */
    --brand-offwhite: #fcfbfb;     /* Pure off-white */
    --brand-border: #c7c5c5;       /* Light grey - borders */
    --brand-blue: #d0e7ff;         /* Light blue - primary buttons */
}

.main-container:has(.consultation-flow) {
  background-color: #F6F1EF;
}

/* ============================================
   Utility Classes
   ============================================ */
.bg-primary {
    background-color: var(--brand-primary);
}

.bg-primary-dark {
    background-color: var(--brand-secondary);
}

.border-primary {
    border-color: var(--brand-primary);
}

.text-primary {
    color: var(--brand-secondary);
}

.ring-primary {
    --tw-ring-color: var(--brand-primary);
}

/* ============================================
   Consultation Flow Container
   ============================================ */
.consultation-flow, p, input, select, textarea, button {
    font-family: 'Karla', sans-serif;
    color: var(--brand-primary);
}

.consultation-flow h1 {
    font-size: 1.9375rem;
    color: var(--brand-primary);
    font-family: 'TTRamillasTrl', serif;
    font-weight: 300;
}

.consultation-flow h2 {
    font-size: 31px;
    color: var(--brand-primary);
    font-family: 'TTRamillasTrl', serif;
    font-weight: 300;
}

.consultation-flow h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: var(--brand-primary);
    font-family: 'TTRamillasTrl', serif;
    font-weight: 300;
  }
 .consultation-flow h3.consultant-label {
     font-family: 'TTRamillasTrlIt', serif;
     font-weight: 600;
 }
.consultation-flow input {
    font-size: 1rem;
    line-height: 1.5rem;
}
/* ============================================
   Step Progress Indicator
   ============================================ */
.steps {
    font-family: 'Karla', sans-serif;
}

.steps .step-circle {
    background: var(--brand-light);
    border: 1px solid var(--brand-primary);
    border-radius: 100%;
    color: var(--brand-primary);
    font-size: 0.9em;
    height: 38px;
    width: 38px;
    transition: all 0.2s ease;
    font-family: 'Karla', sans-serif;
    line-height: 27px;
}

.steps .step-circle.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.steps .step-connector {
    border-top: 2px solid var(--brand-border);
    transition: border-color 0.2s ease;
}

.steps .step-connector.active {
    border-color: var(--brand-primary);
}

/* ============================================
   Buttons
   ============================================ */

/* Primary button - used for main CTAs */
.btn-primary {
    background: var(--brand-blue);
    border: 1px solid var(--brand-primary);
    border-radius: 100px;
    color: var(--brand-primary);
    padding: 13px 24px;
    text-transform: uppercase;
    font-weight: 500;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
}

.btn-primary:hover {
    background: var(--brand-primary);
    color: #fff;
}

/* Secondary button - used for back/cancel actions */
.btn-secondary {
    background: var(--brand-offwhite);
    border: 1px solid var(--brand-border);
    border-radius: 100px;
    color: var(--brand-primary);
    padding: 13px 24px;
    text-transform: uppercase;
    font-weight: 500;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
}

.btn-secondary:hover {
    background: rgba(0, 105, 128, 0.1);
    border-color: var(--brand-border);
    color: var(--brand-secondary);
}

/* ============================================
   Checkbox Selection Boxes
   Used for appointment type selection
   ============================================ */
.checkbox-more {
    border: 2px solid var(--brand-primary);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.checkbox-more:hover {
    box-shadow: 0 2px 8px rgba(17, 41, 59, 0.1);
}

.checkbox-more .checkbox {
    border-radius: 0 8px 8px 0;
    color: var(--brand-primary);
    transition: all 0.2s ease;
}

.checkbox-more .checkbox.checked {
    background: var(--brand-primary);
    color: #fff;
}

.checkbox-more .checkbox.checked.rounded-br-none {
    border-radius: 0 8px 0 0;
}

.checkbox-more .more-info {
    border-top: 2px solid var(--brand-primary);
}

/* ============================================
   Form Inputs
   ============================================ */
.consultation-flow input[type="text"],
.consultation-flow input[type="email"],
.consultation-flow input[type="tel"],
.consultation-flow input[type="date"],
.consultation-flow select,
.consultation-flow textarea {
    border: 1px solid var(--brand-border);
    color: var(--brand-primary);
    font-family: Helvetica, sans-serif;
}

.consultation-flow input:focus,
.consultation-flow select:focus,
.consultation-flow textarea:focus {
    border-color: var(--brand-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(17, 41, 59, 0.1);
}

.consultation-flow textarea {
    padding: 1rem;
}

/* ============================================
   Time Slot Buttons
   ============================================ */
.time-slot {
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
    color: var(--brand-primary);
    font-family: 'Karla';
    margin-bottom: 0;
}

.time-slot:hover {
    border-color: var(--brand-border);
    background: var(--brand-tertiary);
    color: var(--brand-secondary);
}

.time-slot.selected {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    font-weight: 500;
    color: #fff;
}

/* ============================================
   Flatpickr Calendar Overrides
   ============================================ */
.datepicker-container {

}

.flatpickr-calendar {
    background: #fff;
    border: 0.5px solid #c7c5c5;
    border-radius: 8px;
    padding: 0;
    box-shadow: none;
    margin: 0 auto;
    padding: 1rem;
    font-family: 'Karla', sans-serif;
    min-width: 338.875px;
}

@media (min-width: 640px) {
    .flatpickr-calendar, .flatpickr-next-month {
        top: 1rem!important;
        right: 0.8rem!important;
    }
}
.flatpickr-day {
    transition: all 0.1s ease-in-out;
}
.flatpickr-day:hover {
    background: #fff;
    border: 1px solid var(--brand-primary);
}

.flatpickr-day.selected {
    background-color: var(--brand-primary) !important;
    border: 1px solid var(--brand-primary) !important;
    color: #fff;
    font-weight: 700;
}

.flatpickr-day.selected:hover {
    background-color: var(--brand-secondary) !important;
    border-color: var(--brand-secondary) !important;
}

.flatpickr-months {
    margin-bottom: 0.7rem;
}

.flatpickr-months .flatpickr-prev-month {
    width: fit-content;
    left: 0.8rem!important;
    top: 1rem;
}

.flatpickr-current-month {
    font-size: 120%;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .numInputWrapper {
    color: var(--brand-primary);
    border-radius: 4px;
}
.flatpickr-monthDropdown-months {
    margin-right: 0.5rem;
}
.flatpickr-current-month input.cur-year {
    margin-left: 0.5rem;
}

/* ============================================
   Summary & Info Boxes
   ============================================ */

/* Booking summary on confirmation page */
.booking-summary {
    background: var(--brand-light);
    border: 2px solid var(--brand-primary);
    border-radius: 10px;
}

/* Success messages */
.success-box {
    border: 2px solid var(--brand-primary);
    background: var(--brand-blue);
    border-radius: 10px;
}

/* Loading spinner */
.loading-spinner {
    border-color: var(--brand-primary);
}

/* Loading indicator - Face Dr branded spinner */
.loader__container {
    height: 200px;
    width: 200px;
    margin-left: -100px;
    margin-top: -100px;
    content: "";
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='538.223' height='538.223'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath data-name='Path 136' d='M0 538.223h538.223V0H0z' fill='none'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath data-name='Rectangle 23' fill='none' stroke='rgba(0,0,0,0)' stroke-width='2' d='M0 0h552.311v569.92H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg data-name='Group 143'%3E%3Cg data-name='Group 142' transform='matrix(0 -1 1 0 0 538.223)' clip-path='url(%23a)'%3E%3Cg data-name='Group 139'%3E%3Cg data-name='Group 138'%3E%3Cg data-name='Group 137' clip-path='url(%23b)' transform='translate(-1.761 -15.848)'%3E%3Cg data-name='Group 136'%3E%3Cpath data-name='Path 133' d='M2.522 284.96c0 148.205 120.145 268.349 268.351 268.349S539.222 433.165 539.222 284.96 419.078 16.609 270.873 16.609 2.522 136.754 2.522 284.96z' fill='none' stroke='%23315470' stroke-width='2'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg data-name='Group 140'%3E%3Cpath data-name='Path 134' d='M414.864 47.684a6.373 6.373 0 106.373-6.373 6.372 6.372 0 00-6.373 6.373' fill='%23315470'/%3E%3C/g%3E%3Cg data-name='Group 141'%3E%3Cpath data-name='Path 135' d='M414.864 47.684a6.373 6.373 0 106.373-6.373 6.372 6.372 0 00-6.373 6.373z' fill='none' stroke='%23315470' stroke-width='.864'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    object-fit: cover;
    left: 50%;
    top: 50%;
    background-size: cover;
    position: absolute;
    z-index: 10;
    pointer-events: none;
    animation: infiniteRotate 3s linear infinite;
}

@keyframes infiniteRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Survey form section */
.survey-form {
    background: var(--brand-light);
    border: 2px solid var(--brand-primary);
    border-radius: 10px;
}

.atomic-checkbox label {
    font-size: 0.775rem;
}

.confirm-card-text > p:last-child {
    border-top: 0.5px solid white;
    margin-top: 1.1rem;
    padding-top: 1rem;
}