/**
 * AC Appointments — Booking Widget Styles
 *
 * Multi-step frontend booking form. Self-contained, minimal theme conflicts.
 * Uses CSS custom properties for theming via primary_color setting.
 */

/* ── Variables ───────────────────────────────────────────── */

.ac-booking-widget {
    --ac-bw-primary: #0073aa;
    --ac-bw-primary-hover: #005a87;
    --ac-bw-primary-light: #e8f4fc;
    --ac-bw-danger: #d63638;
    --ac-bw-success: #00a32a;
    --ac-bw-success-bg: #d4edda;
    --ac-bw-bg: #f9fafb;
    --ac-bw-card: #fff;
    --ac-bw-border: #dcdde1;
    --ac-bw-text: #1d2327;
    --ac-bw-text-muted: #646970;
    --ac-bw-radius: 10px;
    --ac-bw-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 16px;
    color: var(--ac-bw-text);
    line-height: 1.5;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    box-sizing: border-box;
}

.ac-booking-widget *, .ac-booking-widget *::before, .ac-booking-widget *::after {
    box-sizing: border-box;
}

/* Ensure the Elementor shortcode wrapper stretches to full column width */
.elementor-widget-shortcode:has(.ac-booking-widget) {
    width: 100%;
    flex-grow: 1;
}

/* ── Loading State ───────────────────────────────────────── */

.ac-bw-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 72px 24px;
    color: var(--ac-bw-text-muted);
    font-size: 16px;
}

.ac-bw-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--ac-bw-border);
    border-top-color: var(--ac-bw-primary);
    border-radius: 50%;
    animation: ac-bw-spin 0.7s linear infinite;
}

@keyframes ac-bw-spin {
    to { transform: rotate(360deg); }
}

.ac-bw-spinner--small {
    width: 22px;
    height: 22px;
    border-width: 2px;
}

.ac-bw-inline-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 0;
    color: var(--ac-bw-text-muted);
    font-size: 15px;
    animation: ac-bw-fadeIn 0.2s ease;
}

/* ── Step Container ──────────────────────────────────────── */

.ac-bw-step {
    display: none;
    animation: ac-bw-fadeIn 0.25s ease;
    width: 100%;
}

.ac-bw-step.ac-bw-step--active {
    display: block;
}

@keyframes ac-bw-fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Progress Bar ────────────────────────────────────────── */

.ac-bw-progress {
    display: flex;
    gap: 5px;
    margin-bottom: 28px;
}

.ac-bw-progress-step {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: var(--ac-bw-border);
    transition: background 0.3s;
}

.ac-bw-progress-step.ac-bw-progress-step--done,
.ac-bw-progress-step.ac-bw-progress-step--active {
    background: var(--ac-bw-primary);
}

/* ── Step Header ─────────────────────────────────────────── */

.ac-bw-step-header {
    margin-bottom: 24px;
}

.ac-bw-step-header h3 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 600;
    color: var(--ac-bw-text);
}

.ac-bw-step-subtitle {
    color: var(--ac-bw-text-muted);
    font-size: 15px;
    margin: 0;
}

/* ── Option Cards (Location / Service / Provider) ────────── */

.ac-bw-options {
    display: grid;
    gap: 12px;
    width: 100%;
}

.ac-bw-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid var(--ac-bw-border);
    border-radius: var(--ac-bw-radius);
    background: var(--ac-bw-card);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-width: 0;
    overflow: hidden;
}

.ac-bw-option:hover {
    border-color: var(--ac-bw-primary);
    box-shadow: var(--ac-bw-shadow);
}

.ac-bw-option.ac-bw-option--selected {
    border-color: var(--ac-bw-primary);
    background: var(--ac-bw-primary-light);
}

.ac-bw-option-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ac-bw-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
    color: var(--ac-bw-primary);
    overflow: hidden;
}

.ac-bw-option-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.ac-bw-option-info {
    flex: 1;
    min-width: 0;
}

.ac-bw-option-name {
    font-weight: 600;
    font-size: 16px;
    margin: 0;
}

.ac-bw-option-desc {
    font-size: 14px;
    color: var(--ac-bw-text-muted);
    margin: 3px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ac-bw-option-meta {
    font-size: 13px;
    font-weight: 600;
    color: var(--ac-bw-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Neutralize host-theme content spacing (e.g. .entry-content p { margin-bottom: 1.6em })
   that leaks into the widget when it is embedded inside post content. The theme's
   `.entry-content p` rule has higher specificity than the widget's own margin rules,
   so it wins and adds unwanted spacing to option names. Scoped to the widget root and
   flagged !important so it overrides the theme regardless of specificity or CSS load order.
   The widget defines all its own spacing via container gaps and explicit margins, so it
   never relies on a default paragraph bottom margin. */
.ac-booking-widget p {
    margin-bottom: 0 !important;
}

/* ── Calendar ────────────────────────────────────────────── */

.ac-bw-calendar {
    background: var(--ac-bw-card);
    border: 1px solid var(--ac-bw-border);
    border-radius: var(--ac-bw-radius);
    padding: 28px;
    box-shadow: var(--ac-bw-shadow);
}

.ac-bw-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.ac-bw-calendar-title {
    font-weight: 600;
    font-size: 20px;
}

.ac-bw-calendar-nav {
    display: flex;
    gap: 6px;
}

.ac-bw-calendar-nav button {
    background: none;
    border: 1px solid var(--ac-bw-border);
    border-radius: 6px;
    width: 42px;
    height: 42px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    color: var(--ac-bw-text);
    transition: background 0.15s;
}

.ac-bw-calendar-nav button svg {
    display: block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.ac-bw-calendar-nav button:hover {
    background: var(--ac-bw-bg);
}

.ac-bw-calendar-nav button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.ac-bw-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    text-align: center;
}

.ac-bw-calendar-day-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ac-bw-text-muted);
    padding: 8px 0;
    text-transform: uppercase;
}

.ac-bw-calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 16px;
    cursor: default;
    color: var(--ac-bw-text-muted);
    transition: background 0.15s, color 0.15s;
}

.ac-bw-calendar-day--available {
    color: var(--ac-bw-text);
    font-weight: 600;
    cursor: pointer;
}

.ac-bw-calendar-day--available:hover {
    background: var(--ac-bw-primary-light);
}

.ac-bw-calendar-day--selected {
    background: var(--ac-bw-primary) !important;
    color: #fff !important;
}

.ac-bw-calendar-day--today {
    border: 2px solid var(--ac-bw-primary);
}

.ac-bw-calendar-day--other-month {
    color: #ccc;
}

.ac-bw-calendar-day--unavailable {
    color: #d0d0d0;
    text-decoration: line-through;
}

.ac-bw-calendar-loading {
    display: flex;
    justify-content: center;
    padding: 48px;
}

/* ── Time Slots ──────────────────────────────────────────── */

.ac-bw-slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.ac-bw-slot {
    padding: 16px 12px;
    text-align: center;
    border: 2px solid var(--ac-bw-border);
    border-radius: var(--ac-bw-radius);
    background: var(--ac-bw-card);
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: border-color 0.15s, background 0.15s;
}

.ac-bw-slot:hover {
    border-color: var(--ac-bw-primary);
    background: var(--ac-bw-primary-light);
}

.ac-bw-slot.ac-bw-slot--selected {
    border-color: var(--ac-bw-primary);
    background: var(--ac-bw-primary);
    color: #fff;
}

.ac-bw-slot-seats {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--ac-bw-text-muted);
    margin-top: 3px;
}

.ac-bw-slot--selected .ac-bw-slot-seats {
    color: rgba(255, 255, 255, 0.8);
}

/* ── Form Fields ─────────────────────────────────────────── */

.ac-bw-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Legacy .ac-bw-field (kept for backward compat) */
.ac-bw-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ac-bw-field label {
    font-size: 15px;
    font-weight: 600;
    color: var(--ac-bw-text);
}

.ac-bw-field label .ac-bw-required {
    color: var(--ac-bw-danger);
    margin-left: 2px;
}

.ac-bw-field input[type="text"],
.ac-bw-field input[type="email"],
.ac-bw-field input[type="tel"],
.ac-bw-field input[type="number"],
.ac-bw-field textarea,
.ac-bw-field select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--ac-bw-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    background: #fff;
    color: var(--ac-bw-text);
    transition: border-color 0.15s;
}

.ac-bw-field input:focus,
.ac-bw-field textarea:focus,
.ac-bw-field select:focus {
    border-color: var(--ac-bw-primary);
    outline: 2px solid rgba(0, 115, 170, 0.15);
    outline-offset: 0;
}

.ac-bw-field textarea {
    resize: vertical;
    min-height: 90px;
}

/* ── Floating Label Fields ─────────────────────────────── */

.ac-bw-float-field {
    position: relative;
    margin-bottom: 0;
}

.ac-bw-float-field input,
.ac-bw-float-field textarea,
.ac-bw-float-field select {
    width: 100%;
    padding: 20px 14px 8px;
    border: none;
    border-bottom: 2px solid var(--ac-bw-border);
    border-radius: 0;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    background: transparent;
    color: var(--ac-bw-text);
    transition: border-color 0.2s ease;
    outline: none;
}

.ac-bw-float-field label {
    position: absolute;
    left: 14px;
    top: 14px;
    font-size: 16px;
    font-weight: 400;
    color: var(--ac-bw-text-muted);
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: left top;
}

.ac-bw-float-field label .ac-bw-required {
    color: var(--ac-bw-danger);
    margin-left: 1px;
}

/* Float the label up on focus or when filled */
.ac-bw-float-field input:focus ~ label,
.ac-bw-float-field input:not(:placeholder-shown) ~ label,
.ac-bw-float-field textarea:focus ~ label,
.ac-bw-float-field textarea:not(:placeholder-shown) ~ label,
.ac-bw-float-field select ~ label {
    top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ac-bw-primary);
    letter-spacing: 0.3px;
}

/* Bottom border on focus */
.ac-bw-float-field input:focus,
.ac-bw-float-field textarea:focus,
.ac-bw-float-field select:focus {
    border-bottom-color: var(--ac-bw-primary);
    box-shadow: none;
    outline: none;
}

/* Textarea variant */
.ac-bw-float-field--textarea textarea {
    resize: vertical;
    min-height: 80px;
}

/* ── Error states (both legacy + floating) ─────────────── */

.ac-bw-field-error {
    font-size: 13px;
    color: var(--ac-bw-danger);
    display: none;
}

.ac-bw-field--invalid input,
.ac-bw-field--invalid textarea {
    border-color: var(--ac-bw-danger) !important;
    border-bottom-color: var(--ac-bw-danger) !important;
}

.ac-bw-field--invalid .ac-bw-field-error {
    display: block;
}

.ac-bw-field--invalid label {
    color: var(--ac-bw-danger) !important;
}

.ac-bw-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ac-bw-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    cursor: pointer;
}

.ac-bw-checkbox label {
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
}

/* Select elements — ensure native dropdown arrow */
.ac-bw-float-field select {
    appearance: auto;
    -webkit-appearance: auto;
    cursor: pointer;
}

/* ── Two-column Row ─────────────────────────────────────── */

.ac-bw-row {
    display: flex;
    gap: 12px;
}

.ac-bw-col-half {
    flex: 1;
    min-width: 0;
}

/* ── Billing Type Toggle ────────────────────────────────── */

.ac-bw-billing-type {
    display: flex;
    gap: 16px;
    margin: 8px 0 4px;
    padding: 8px 0;
}

.ac-bw-radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    color: var(--ac-bw-text);
}

.ac-bw-radio-label input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--ac-bw-primary);
    cursor: pointer;
}

/* ── Gift Booking ───────────────────────────────────────── */

.ac-bw-gift-toggle {
    margin: 8px 0 0;
}

.ac-bw-gift-fields {
    background: #fffbeb;
    border: 1px dashed #f59e0b;
    border-radius: 10px;
    padding: 14px 14px 4px;
    margin: 4px 0 8px;
}

.ac-bw-gift-note {
    font-size: 13px;
    color: #92400e;
    margin: 0 0 10px;
}

/* ── CUI Lookup Status ──────────────────────────────────── */

.ac-bw-cui-status {
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 6px;
    margin: -4px 0 8px;
}

.ac-bw-cui-loading {
    color: #666;
    font-style: italic;
}

.ac-bw-cui-ok {
    color: #16a34a;
    background: #f0fdf4;
}

.ac-bw-cui-error {
    color: #dc2626;
    background: #fef2f2;
}

/* ── Seats Selector ──────────────────────────────────────── */

.ac-bw-seats {
    margin-top: 14px;
}

.ac-bw-seats label {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}

.ac-bw-seats select {
    width: auto;
    min-width: 90px;
    padding: 8px 12px;
    border: 1px solid var(--ac-bw-border);
    border-radius: 6px;
    font-size: 16px;
}

/* ── Action Buttons ──────────────────────────────────────── */

.ac-bw-actions {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 28px;
}

.ac-bw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    min-width: 140px;
    text-decoration: none;
}

.ac-bw-btn--primary {
    background: var(--ac-bw-primary);
    color: #fff;
}

.ac-bw-btn--primary:hover {
    background: var(--ac-bw-primary-hover);
}

.ac-bw-btn--secondary {
    background: var(--ac-bw-bg);
    color: var(--ac-bw-text);
    border: 1px solid var(--ac-bw-border);
}

.ac-bw-btn--secondary:hover {
    background: #e9e9ea;
}

.ac-bw-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Confirmation ────────────────────────────────────────── */

.ac-bw-confirmation {
    text-align: center;
    padding: 36px 0;
}

.ac-bw-confirmation-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--ac-bw-success-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 36px;
    color: var(--ac-bw-success);
    box-shadow: 0 4px 12px rgba(0, 184, 148, 0.2);
}

.ac-bw-confirmation h3 {
    margin: 0 0 10px;
    font-size: 26px;
    color: var(--ac-bw-text);
    font-weight: 700;
}

.ac-bw-confirmation-greeting {
    color: var(--ac-bw-text);
    font-size: 17px;
    margin: 0 0 8px;
    line-height: 1.5;
}

.ac-bw-confirmation-greeting strong {
    color: var(--ac-bw-primary);
}

.ac-bw-confirmation-message {
    color: var(--ac-bw-text-muted);
    font-size: 15px;
    margin: 0 0 28px;
}

.ac-bw-confirmation-details {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--ac-bw-bg);
    border: 1px solid var(--ac-bw-border);
    border-radius: var(--ac-bw-radius);
    padding: 0;
    text-align: left;
    font-size: 15px;
    max-width: 440px;
    margin: 0 auto;
    overflow: hidden;
}

.ac-bw-confirmation-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-bottom: 1px solid var(--ac-bw-border);
}

.ac-bw-confirmation-row:last-child {
    border-bottom: none;
}

.ac-bw-confirmation-label {
    font-size: 14px;
    color: var(--ac-bw-text-muted);
    font-weight: 500;
}

.ac-bw-confirmation-value {
    font-size: 15px;
    color: var(--ac-bw-text);
    font-weight: 600;
    text-align: right;
}

.ac-bw-confirmation-ref {
    color: var(--ac-bw-primary);
    font-family: monospace;
    letter-spacing: 0.5px;
}

.ac-bw-confirmation-details strong {
    color: var(--ac-bw-text);
}

/* ── Error Banner ────────────────────────────────────────── */

.ac-bw-error {
    padding: 14px 18px;
    border-radius: var(--ac-bw-radius);
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: var(--ac-bw-danger);
    font-size: 15px;
    margin-bottom: 20px;
    display: none;
}

.ac-bw-error.ac-bw-error--visible {
    display: block;
}

/* ── Summary Bar ─────────────────────────────────────────── */

.ac-bw-summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
    padding: 14px 20px;
    background: var(--ac-bw-bg);
    border-radius: var(--ac-bw-radius);
    border: 1px solid var(--ac-bw-border);
    font-size: 15px;
}

.ac-bw-summary-item {
    display: flex;
    gap: 6px;
}

.ac-bw-summary-label {
    color: var(--ac-bw-text-muted);
}

.ac-bw-summary-value {
    font-weight: 600;
    color: var(--ac-bw-text);
}

/* ── Responsive ──────────────────────────────────────────── */

@media screen and (max-width: 480px) {
    .ac-booking-widget {
        padding: 0;
        font-size: 15px;
    }

    .ac-bw-step-header h3 {
        font-size: 19px;
    }

    .ac-bw-option {
        padding: 14px;
        gap: 12px;
    }

    .ac-bw-option-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .ac-bw-option-name {
        font-size: 15px;
    }

    .ac-bw-slots {
        grid-template-columns: repeat(3, 1fr);
    }

    .ac-bw-slot {
        padding: 12px 8px;
        font-size: 15px;
    }

    .ac-bw-actions {
        flex-direction: column-reverse;
    }

    .ac-bw-btn {
        width: 100%;
    }

    .ac-bw-calendar {
        padding: 14px;
    }

    .ac-bw-calendar-nav button {
        width: 34px;
        height: 34px;
    }

    .ac-bw-confirmation h3 {
        font-size: 22px;
    }
}