/* =============================================================================
   JoomBook Booking Wizard Styles
   CSS custom properties allow color scheme overrides via inline style on
   .joombook-wizard (set by the module template from admin settings).
   ============================================================================= */

.joombook-wizard {
    /* Fallback values – overridden by inline style from WizardHelper::getColorSchemeVars() */
    --jb-sidebar-bg:        #102f43;
    --jb-sidebar-text:      #ffffff;
    --jb-sidebar-muted:     rgba(255, 255, 255, 0.55);
    --jb-accent:            #0d6efd;
    --jb-done-bg:             #198754;
    --jb-done-text:           #ffffff;
    --jb-current-bullet-bg:   #0d6efd;
    --jb-current-bullet-text: #ffffff;
    --jb-bullet-bg:           rgba(255, 255, 255, 0.14);
    --jb-current-item-bg:     rgba(255, 255, 255, 0.12);
    --jb-content-bg:        #ffffff;
    --jb-border-color:      #dee2e6;
    --jb-label-color:       #1a202c;

    font-family: inherit;
    text-align: left;
    max-width: 1200px;
    margin: 0 auto;
}

.joombook-wizard * {
    font-family: inherit;
}

/* Hard shield against template color overrides (YOOtheme, Cassiopeia etc.)
   Targets only card-style selection buttons; does NOT touch calendar/slot buttons. */
.joombook-content {
    color: #212529 !important;
}

/* Headings inside the white content card must stay dark too. The rule above
   only sets the container colour, which is inherited - but a theme that colours
   h1-h6 directly (dark-background sites set light headings) overrides an
   inherited value regardless of !important, so the step titles (STANDORT etc.)
   turn light and unreadable on the white card. Pin the headings to the inherited
   content colour so they can never be recoloured by the surrounding template. */
.joombook-content h1,
.joombook-content h2,
.joombook-content h3,
.joombook-content h4,
.joombook-content h5,
.joombook-content h6 {
    color: inherit !important;
}

.joombook-sidebar {
    color: var(--jb-sidebar-text) !important;
}

/* Only card-selection buttons (location / category / service) inherit the dark base color */
.joombook-content button.card,
.joombook-content button.card * {
    color: inherit !important;
}

/* Restore scheme text color on dark-background buttons (non-selected state) */
.joombook-cal-day.has-slots,
.joombook-wizard .jb-slot-btn {
    color: var(--jb-sidebar-text) !important;
}

/* Hover and selected states always use done-text (white in all schemes) */
.joombook-cal-day.is-selected,
.joombook-cal-day.has-slots:hover,
.joombook-wizard .jb-slot-btn.is-selected,
.joombook-wizard .jb-slot-btn:hover,
.joombook-wizard .jb-slot-btn:focus {
    color: var(--jb-done-text) !important;
}

.joombook-sidebar .joombook-step-label,
.joombook-sidebar .joombook-step-value,
.joombook-sidebar .joombook-step-info,
.joombook-sidebar .joombook-step-info * {
    color: inherit !important;
}

/* =============================================================================
   Two-column layout
   ============================================================================= */

.joombook-layout {
    display: flex;
    min-height: 440px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
    border: 1px solid var(--jb-border-color);
}

/* =============================================================================
   Sidebar
   ============================================================================= */

.joombook-sidebar {
    width: 260px;
    min-width: 260px;
    background: var(--jb-sidebar-bg);
    color: var(--jb-sidebar-text);
    padding: 1.75rem 1rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.joombook-steps-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.joombook-step-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.55rem 0.6rem;
    border-radius: 7px;
    transition: background 0.2s;
}

.joombook-step-item.is-current {
    background: var(--jb-current-item-bg);
}

.joombook-step-item.is-upcoming .joombook-step-label,
.joombook-step-item.is-upcoming .joombook-step-value,
.joombook-step-item.is-upcoming .joombook-step-bullet {
    color: var(--jb-sidebar-muted);
}

.joombook-step-bullet {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: var(--jb-bullet-bg, rgba(255, 255, 255, 0.14));
    color: var(--jb-sidebar-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    transition: background 0.2s, color 0.2s;
}

.joombook-step-item.is-current .joombook-step-bullet {
    background: var(--jb-current-bullet-bg);
    color: var(--jb-current-bullet-text, #ffffff);
}

.joombook-step-item.is-done .joombook-step-bullet {
    background: var(--jb-done-bg);
    color: var(--jb-done-text);
}

.joombook-step-info {
    min-width: 0;
    padding-top: 3px;
}

.joombook-step-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--jb-sidebar-text);
    line-height: 1.3;
}

.joombook-step-value {
    font-size: 0.78rem;
    color: var(--jb-sidebar-muted);
    margin-top: 2px;
    line-height: 1.3;
    word-break: break-word;
}

/* =============================================================================
   Main content area
   ============================================================================= */

.joombook-content {
    flex: 1;
    min-width: 0;
    background: var(--jb-content-bg);
    padding: 1.75rem 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--jb-border-color);
}

.joombook-content-steps {
    flex: 1;
}

/* A single long word has no break opportunity of its own: a category called
   "Fussreflexzonenmassage" stays on one line and pushes the card past the edge
   of a phone screen. Set on the card rather than on each heading, because both
   properties inherit - so names, descriptions and anything added later are
   covered without a selector per element. Escaping the name would be the wrong
   fix: it is written out through Alpine's x-text as plain text, so a soft
   hyphen typed into the name would show up literally. */
.joombook-wizard .card {
    overflow-wrap: break-word;
}

/* Hyphenation only on the headings, where a hard mid-word break looks worst.
   Needs the document language, which Joomla sets on <html>. */
.joombook-wizard .jb-name {
    hyphens: auto;
}

/* =============================================================================
   Unified navigation bar (always at the bottom of .joombook-content)
   ============================================================================= */

.joombook-nav-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--jb-border-color);
}

/* =============================================================================
   Service color swatch
   ============================================================================= */

.joombook-svc-color {
    width: 10px;
    min-width: 10px;
    height: 100%;
    min-height: 40px;
    border-radius: 4px;
}

/* =============================================================================
   Mini calendar
   ============================================================================= */

.joombook-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.joombook-cal-header {
    text-align: center;
    font-size: .75rem;
    font-weight: 600;
    color: var(--jb-label-color, #6c757d);
    padding-bottom: 4px;
    max-height: 36px;
    overflow: hidden;
}

.joombook-cal-empty {
}

.joombook-cal-grid > div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.joombook-cal-day {
    border: 1px solid transparent;
    border-radius: 0.375rem;
    background: transparent;
    font-size: .85rem;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.6rem 0;
    margin: 0.3rem;
}

.joombook-cal-day.has-slots {
    background: var(--jb-sidebar-bg);
    color: var(--jb-sidebar-text);
    font-weight: 600;
    border-color: var(--jb-accent);
}

.joombook-cal-day.has-slots:hover {
    background: var(--jb-done-bg);
    border-color: var(--jb-done-bg);
    color: var(--jb-done-text);
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

.joombook-cal-day.is-selected {
    background: var(--jb-done-bg);
    border-color: var(--jb-done-bg);
    color: var(--jb-done-text);
}

.joombook-cal-day.is-past,
.joombook-cal-day.no-slots {
    background: #f0f1f3;
    border-color: #dee2e6;
    color: #868e96;
    cursor: default;
}

/* Slot button grid container – CSS Grid ensures all buttons are identical width */
.jb-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
    gap: 0.5rem;
}

/* Time slot buttons – custom class avoids template CSS interference */
.joombook-wizard .jb-slot-btn {
    border: 1px solid var(--jb-accent);
    background: var(--jb-sidebar-bg);
    color: var(--jb-sidebar-text);
    border-radius: 0.375rem;
    padding: 0.375rem 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    width: 100%;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.joombook-wizard .jb-slot-btn:hover {
    background: var(--jb-done-bg);
    border-color: var(--jb-done-bg);
    color: var(--jb-done-text);
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

/*
 * Keyboard focus has to look different from "chosen", and it used to look
 * exactly the same - plus outline:none on top. Someone tabbing through the
 * times could not tell where they were, and could not tell which time they had
 * actually picked either. The ring is drawn dark so it stays visible on the
 * highlighted background as well; :focus-visible keeps it off mouse clicks.
 */
.joombook-wizard .jb-slot-btn:focus-visible {
    outline: 3px solid #1b3a57;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(255,255,255,0.85);
}

.joombook-wizard .jb-slot-btn.is-selected {
    background: var(--jb-done-bg);
    border-color: var(--jb-done-bg);
    color: var(--jb-done-text);
    /* Chosen is marked by more than colour: a colour-blind visitor sees the
       inset edge even where the two backgrounds look alike. */
    box-shadow: inset 0 0 0 2px var(--jb-done-text);
    font-weight: 600;
}

/* =============================================================================
   Loading spinner
   ============================================================================= */

.joombook-loading {
    min-height: 80px;
}

/* =============================================================================
   Responsive – sidebar becomes a horizontal strip above content
   on phone and tablet portrait; two-column only on landscape tablet+
   ============================================================================= */

/* Stacked layout: phone + tablet portrait (< 1024px) */
@media (max-width: 1023px) {
    .joombook-layout {
        flex-direction: column;
        min-height: 0;
    }

    .joombook-sidebar {
        width: 100%;
        min-width: 0;
        padding: 0.75rem 1rem 0.6rem;
    }

    .joombook-steps-nav {
        flex-direction: row;
        justify-content: space-between;
        gap: 0.25rem;
    }

    .joombook-step-item {
        flex-direction: column;
        align-items: center;
        gap: 0.2rem;
        padding: 0.4rem 0.3rem;
        flex: 1;
    }

    .joombook-step-bullet {
        width: 26px;
        height: 26px;
        min-width: 26px;
        font-size: 0.75rem;
    }

    .joombook-step-label {
        font-size: 0.7rem;
        text-align: center;
        white-space: normal;
    }

    .joombook-step-value {
        display: none;
    }

    .joombook-content {
        border-left: 1px solid var(--jb-border-color);
        border-top: none;
        padding: 1.25rem 1rem 1rem;
    }
}

/* Extra-compact on small phones */
@media (max-width: 480px) {
    .joombook-sidebar {
        padding: 0.6rem 0.5rem 0.4rem;
    }

    .joombook-step-item {
        padding: 0.25rem 0.15rem;
    }

    .joombook-step-bullet {
        width: 22px;
        height: 22px;
        min-width: 22px;
        font-size: 0.65rem;
    }

    .joombook-step-label {
        font-size: 0.58rem;
    }

    /* Compact gap and padding for slot buttons on small phones; columns auto-fill */
    .jb-slots-grid {
        gap: 0.375rem;
    }

    .jb-slots-grid .jb-slot-btn {
        padding: 0.25rem 0;
    }
}

/* iOS auto-detection override: prevents iOS from turning any text blue inside the wizard */
.joombook-wizard a[x-apple-data-detectors],
.joombook-wizard a[x-apple-data-detectors]:link,
.joombook-wizard a[x-apple-data-detectors]:visited,
.joombook-sidebar a,
.joombook-sidebar a:link,
.joombook-sidebar a:visited,
.joombook-content a:not([class]),
.joombook-content a:not([class]):link,
.joombook-content a:not([class]):visited {
    color: inherit !important;
    text-decoration: none !important;
    -webkit-text-decoration-color: inherit !important;
}

/* =============================================================================
   Booking summary card (step: confirm)
   ============================================================================= */

.jb-summary-card {
    border: 1px solid var(--jb-border-color, #dee2e6);
    border-radius: 8px;
    overflow: hidden;
}

.jb-summary-row {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.7rem 1.25rem;
    border-bottom: 1px solid var(--jb-border-color, #dee2e6);
}

.jb-summary-label {
    flex: 0 0 36%;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--jb-label-color, #1e2a3b);
}

.jb-summary-value {
    flex: 1;
    font-weight: 600;
    color: #212529;
    font-size: 0.92rem;
}

.jb-payment-list {
    list-style: disc;
    margin: 0;
    padding-left: 1.1rem;
}

.jb-payment-list li {
    padding: 0;
    line-height: 1.6;
}

.jb-summary-sub {
    font-weight: 400;
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 2px;
}

.jb-summary-total {
    background: #f8f9fa;
}

.jb-summary-total .jb-summary-label {
    color: #212529;
    font-weight: 700;
}

.jb-summary-total .jb-summary-value {
    font-size: 1rem;
}

/* =============================================================================
   Form fields – scoped styles that override any template (YOOtheme/UIkit etc.)
   ============================================================================= */
.joombook-content .jb-field-label {
    display: block !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #555555 !important;
    margin-bottom: 0.3rem !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
}

.joombook-content .jb-input {
    display: block !important;
    width: 100% !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9375rem !important;
    font-family: inherit !important;
    line-height: 1.5 !important;
    color: #212529 !important;
    background-color: #ffffff !important;
    border: 1px solid #ced4da !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box !important;
}

/* A number custom field must not carry the browser's up/down spinner arrows -
   the operator asked for a plain numeric entry (voucher number, member number). */
.joombook-content input[type="number"].jb-input {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}
.joombook-content input[type="number"].jb-input::-webkit-outer-spin-button,
.joombook-content input[type="number"].jb-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.joombook-content select.jb-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23555' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.25rem !important;
    cursor: pointer !important;
}

/*
 * The old ring was #64b5f6 on white - about 2.2:1, where WCAG 2.4.11 asks for
 * 3:1. It looked tidy and was close to invisible for anyone who needs it. The
 * darker border carries the contrast; the soft glow stays for the look.
 */
.joombook-content .jb-input:focus {
    border-color: #1b3a57 !important;
    box-shadow: 0 0 0 3px rgba(27,58,87,0.25) !important;
    outline: none !important;
}

/* Keyboard users get a ring that cannot be missed, mouse users do not. */
.joombook-content .jb-input:focus-visible {
    outline: 3px solid #1b3a57 !important;
    outline-offset: 1px;
}

.joombook-content textarea.jb-input {
    resize: vertical;
    min-height: 80px;
}

/* Privacy / consent block – large, clickable, welcoming */
.joombook-content .jb-privacy-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.85rem !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
    color: #444444 !important;
    padding: 0.9rem 1rem !important;
    background: #f8f9fa !important;
    border-radius: 8px !important;
    border: 1px solid #dee2e6 !important;
    transition: background 0.15s, border-color 0.15s;
    text-transform: none !important;
    letter-spacing: normal !important;
    user-select: none;
}

.joombook-content .jb-privacy-label:hover {
    background: #eef2f7 !important;
    border-color: var(--jb-accent, #64b5f6) !important;
}

/* The withdrawal NOTICE (appointment outside the 14-day period) is a plain <p>
   with no checkbox - there is nothing to click, so the box itself must not react
   to the pointer. It keeps its resting look on hover; only the link inside stays
   interactive. The waiver <label> (with a checkbox) keeps its hover. */
.joombook-content p.jb-privacy-label,
.joombook-content p.jb-privacy-label:hover {
    background: #f8f9fa !important;
    border-color: #dee2e6 !important;
    cursor: default !important;
}

.joombook-content .jb-waitlist-section .jb-privacy-label {
    background: #fefefd !important;
    border: 1px solid rgba(0,0,0,.125) !important;
    border-color: #102f43 !important;
    border-radius: .25rem !important;
}

.joombook-content .jb-waitlist-section .jb-privacy-label:hover {
    background: #fefefd !important;
    border-color: #102f43 !important;
}

.joombook-content .jb-waitlist-section .jb-privacy-label .btn-outline-dark {
    background-color: #f6f6f5 !important;
}

.joombook-content .jb-waitlist-section .jb-privacy-label .btn-outline-dark:hover,
.joombook-content .jb-waitlist-section .jb-privacy-label .btn-outline-dark.active {
    background-color: #343a40 !important;
    color: #ffffff !important;
}

.joombook-content .jb-privacy-checkbox {
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin: 0 !important;
    margin-top: 0.1rem !important;
    accent-color: var(--jb-accent, #64b5f6);
    cursor: pointer !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Booking disabled notice */
.jb-booking-disabled-notice {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 6px;
    color: #5d4037;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Loading spinner – use scheme color instead of Bootstrap's text-primary */
.joombook-wizard .spinner-border {
    color: var(--jb-done-bg, #1a202c) !important;
}

/* General btn-outline-dark baseline – covers all buttons not scoped below (waitlist, step 8, etc.) */
.joombook-wizard .btn-outline-dark {
    border-color: var(--jb-label-color, #1a202c) !important;
    color: var(--jb-label-color, #1a202c) !important;
}
.joombook-wizard .btn-outline-dark:hover,
.joombook-wizard .btn-outline-dark:focus {
    background-color: var(--jb-label-color, #1a202c) !important;
    border-color: var(--jb-label-color, #1a202c) !important;
    color: #ffffff !important;
}

/* Navigation bar buttons – hover/focus uses the scheme's label color (always dark, readable) */
.joombook-nav-bar .btn-outline-dark:hover,
.joombook-nav-bar .btn-outline-dark:focus {
    background-color: var(--jb-label-color, #1a202c) !important;
    border-color: var(--jb-label-color, #1a202c) !important;
    color: #ffffff !important;
}

/* Calendar month-navigation buttons – fixed size, SVG icon perfectly centered */
.jb-cal-nav-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    padding: 0 !important;
    flex-shrink: 0;
}

/* Calendar month-navigation buttons – use scheme accent for border, done-bg on hover */
.joombook-calendar .btn-outline-dark {
    border-color: var(--jb-done-bg, #1a202c) !important;
    color: var(--jb-done-bg, #1a202c) !important;
}
.joombook-calendar .btn-outline-dark:hover,
.joombook-calendar .btn-outline-dark:focus {
    background-color: var(--jb-done-bg, #1a202c) !important;
    border-color: var(--jb-done-bg, #1a202c) !important;
    color: #ffffff !important;
}

/* Powered-by branding strip */
.joombook-branding {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-size: 0.7rem;
    color: #6b7280;
    background: #ffffff;
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    width: auto;
}
.joombook-branding img {
    opacity: 0.7;
    vertical-align: middle;
    filter: grayscale(20%);
}
.joombook-branding a {
    color: #0082bf;
    text-decoration: none;
}
.joombook-branding a:hover {
    text-decoration: underline;
}