/*
 * Waterford theme
 * Palette pulled from waterford.org's live theme stylesheet
 * (wp-content/themes/waterfordtheme/style.css) and homepage inline styles.
 *
 * Load order (see Components/App.razor): bootstrap.min.css, Telerik Bootstrap
 * swatch, app.css, THEN this file last, so these overrides win the cascade.
 */

:root {
    /* ---- Waterford brand palette ---- */
    --wf-primary: #0F5E91;
    --wf-primary-dark: #0B4A73;
    --wf-primary-tint: #E5EEF4;
    --wf-secondary: #1A9BC2;
    --wf-secondary-dark: #116783;
    --wf-secondary-tint: #E4F3F7;
    --wf-accent: #FECB37;
    --wf-accent-dark: #FFC221;
    --wf-dark: #27343F;
    --wf-slate: #3B4C5B;
    --wf-muted: #8795A1;
    --wf-border: #D2D6D9;
    --wf-bg: #FFFFFF;
    --wf-bg-alt: #F8F8F8;
    --wf-danger: #CC0000;

    /* ---- Map onto Bootstrap 5 variables used by the default Blazor template ---- */
    --bs-primary: var(--wf-primary);
    --bs-primary-rgb: 15, 94, 145;
    --bs-secondary: var(--wf-secondary);
    --bs-secondary-rgb: 26, 155, 194;
    --bs-body-color: var(--wf-slate);
    --bs-body-bg: var(--wf-bg);
    --bs-border-color: var(--wf-border);
    --bs-link-color: var(--wf-primary);
    --bs-link-hover-color: var(--wf-primary-dark);
    --bs-danger: var(--wf-danger);

    /*
     * ---- Telerik Kendo theme variables ----
     * Telerik's newer themes (built on the Kendo Design System) expose these
     * custom properties for reskinning without recompiling Sass. Names may
     * shift slightly between Telerik releases - check the installed
     * version's ThemeBuilder docs if a component doesn't pick these up.
     */
    --kendo-color-primary: var(--wf-primary);
    --kendo-color-primary-hover: var(--wf-primary-dark);
    --kendo-color-secondary: var(--wf-secondary);
    --kendo-color-secondary-hover: var(--wf-secondary-dark);
    --kendo-color-success: var(--wf-secondary);
    --kendo-color-base-bg: var(--wf-bg);
    --kendo-color-base-text: var(--wf-slate);
    --kendo-color-border: var(--wf-border);
    --kendo-font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
}

html, body {
    color: var(--wf-slate);
    background-color: var(--wf-bg);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--wf-dark);
}

a, .btn-link {
    color: var(--wf-primary);
}

a:hover, .btn-link:hover {
    color: var(--wf-primary-dark);
}

/* ---- Booking page layout ---- */
.wf-picker {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 1.5rem;
    align-items: start;
    margin-top: 1.5rem;
}

@media (max-width: 720px) {
    .wf-picker {
        grid-template-columns: 1fr;
    }
}

.wf-panel {
    background: var(--wf-bg);
    border: 1px solid var(--wf-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(28, 34, 38, 0.06);
}

.wf-panel-head {
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--wf-border);
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--wf-dark);
}

.wf-panel-body {
    padding: 1rem 1.1rem 1.2rem;
}

/* Calendar availability dot */
.wf-cal-dot, .wf-legend-dot {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--wf-secondary);
    margin: 2px auto 0;
}

.wf-legend {
    display: flex;
    gap: 1rem;
    margin-top: 0.9rem;
    font-size: 0.72rem;
    color: var(--wf-muted);
    align-items: center;
}

.wf-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.wf-legend .wf-legend-dot {
    margin: 0;
}

/* Time slot groups */
.wf-slot-group {
    margin-bottom: 1.1rem;
}

.wf-slot-group:last-child {
    margin-bottom: 0;
}

.wf-slot-group-label {
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--wf-muted);
    margin: 0 0 0.55rem;
}

.wf-slot-btn {
    font-variant-numeric: tabular-nums;
}

/*
 * Telerik's ButtonGroup is a non-wrapping segmented control by design
 * (display: inline-flex, shared borders, rounded corners only on the first/
 * last button). Forcing flex-wrap on it breaks that border styling at each
 * wrap point, so on narrow screens we scroll the row horizontally instead
 * of wrapping it.
 */
.wf-slot-scroll {
    overflow-x: auto;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
}

.wf-slot-scroll .k-button-group {
    flex-wrap: nowrap;
}

.wf-slot-scroll .k-button-group > * {
    flex-shrink: 0;
}

/* Summary + confirm bar */
.wf-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.4rem;
    padding: 0.9rem 1.1rem;
    background: var(--wf-primary-tint);
    border: 1px solid var(--wf-border);
    border-radius: 10px;
}

.wf-summary-text {
    font-size: 0.92rem;
    color: var(--wf-dark);
    margin: 0;
}

.wf-btn-accent {
    background: var(--wf-accent);
    color: var(--wf-dark);
    font-weight: 700;
    border: 1px solid var(--wf-accent-dark);
    border-radius: 7px;
    padding: 0.55rem 1.3rem;
    font-size: 0.85rem;
}

.wf-btn-accent:hover {
    background: var(--wf-accent-dark);
    color: var(--wf-dark);
}

/* Confirmed state */
.wf-confirmed {
    max-width: 420px;
    margin-top: 1.4rem;
    padding: 1.5rem 1.4rem;
    text-align: center;
    background: var(--wf-bg);
    border: 1px solid var(--wf-border);
    border-radius: 12px;
}

.wf-confirmed-check {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--wf-secondary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin: 0 auto 0.8rem;
}

.wf-confirmed-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wf-dark);
    margin: 0 0 0.25rem;
}

.wf-confirmed-detail {
    font-size: 0.88rem;
    color: var(--wf-muted);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* ---- Blazor error UI ---- */
.blazor-error-boundary {
    background: var(--wf-danger);
}