/* custom.css — Frisør Langeland */

:root {
    /* Farvepalet */
    --color-dark-slate: #2B3A42;
    --color-warm-sand: #E8DCC8;
    --color-sage-green: #7C9885;
    --color-cream-white: #FAF7F2;
    /* Bootstrap tema */
    --bs-primary-rgb: 124, 152, 133;
    --bs-secondary: #E8DCC8;
    --bs-secondary-rgb: 232, 220, 200;
    --bs-dark: #2B3A42;
    --bs-dark-rgb: 43, 58, 66;
    --bs-light: #FAF7F2;
    --bs-light-rgb: 250, 247, 242;
    --bs-body-bg: #E8DCC8;
    --bs-body-color: #2B3A42;
    --bs-border-color: #d9cfbe;
    --booking-surface: var(--color-cream-white);
    --booking-surface-muted: rgba(250, 247, 242, 0.72);
    --booking-divider: rgba(43, 58, 66, 0.2);
    --booking-radius-sm: 8px;
    --booking-radius-md: 16px;
    --booking-radius-pill: 999px;
    --booking-space-1: 0.5rem;
    --booking-space-2: 0.75rem;
    --booking-space-3: 1rem;
    --booking-space-4: 1.5rem;
    --booking-space-5: 2rem;
    --booking-space-6: 3rem;

    /* Booking-wizard kort (Saint Studio-inspireret) */
    --booking-page-bg: #F2EDE4;
    --booking-card: #FFFFFF;
    --booking-card-border: rgba(43, 58, 66, 0.1);
    --booking-card-border-strong: rgba(43, 58, 66, 0.18);
    --booking-card-radius: 14px;
    --booking-card-shadow: 0 1px 2px rgba(43, 58, 66, 0.05), 0 8px 24px rgba(43, 58, 66, 0.06);
    --booking-card-shadow-hover: 0 2px 4px rgba(43, 58, 66, 0.07), 0 14px 32px rgba(43, 58, 66, 0.1);
    --booking-step-gap: 14px;
    --booking-step-accent: var(--color-sage-green);
    --booking-step-accent-soft: rgba(124, 152, 133, 0.12);
    --booking-step-complete: var(--color-sage-green);
    --booking-step-locked: rgba(43, 58, 66, 0.42);
    --booking-muted: rgba(43, 58, 66, 0.58);
    --booking-option-selected-border: var(--color-sage-green);
    --booking-option-selected-bg: rgba(124, 152, 133, 0.08);
    --booking-divider-soft: rgba(43, 58, 66, 0.08);
    --booking-slots-bg: rgba(250, 247, 242, 0.72);
    --color-sage-green-hover: #6B8775;
    --color-sage-green-deep: #5F7D6B;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 80px;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    width: 100%;
}

main {
    flex: 1;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-dark-slate);
    font-weight: 700;
}

p {
    color: var(--color-dark-slate);
}

/* Buttons */
.btn-blue,
.btn-primary {
    background-color: var(--color-sage-green);
    border-color: var(--color-sage-green);
    color: var(--color-cream-white);
    font-weight: 600;
    transition: all 0.3s ease;
}

    .btn-blue:hover,
    .btn-primary:hover {
        background-color: #6B8775;
        border-color: #6B8775;
        color: var(--color-cream-white);
    }

.btn-book {
    background-color: var(--color-sage-green);
    border-color: var(--color-sage-green);
    color: var(--color-cream-white);
    border-radius: 999px;
    font-weight: 600;
    transition: all 0.3s ease;
    padding: 10px 20px;
    text-decoration: none;
}

    .btn-book:hover {
        background-color: #6B8775;
        border-color: #6B8775;
        color: var(--color-cream-white);
        text-decoration: none;
    }

/* Focus states */
.btn:focus,
.btn:active:focus,
.form-control:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(124, 152, 133, 0.5);
}

/* Navbar */
.navbar {
    background-color: var(--color-warm-sand) !important;
    border-bottom: 2px solid var(--bs-border-color);
    box-shadow: 0 2px 8px rgba(43, 58, 66, 0.1);
    height: 90px;
    position: relative;
}

.navbar-brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* LOGO */
    .navbar-brand img {
        width: 60px;
        height: 60px;
        object-fit: contain;
        display: block;
    }

/* Navigation */
.navbar .nav-link {
    color: var(--color-dark-slate) !important;
    transition: color .3s ease;
}

    .navbar .nav-link:hover {
        color: var(--color-sage-green) !important;
    }

    /* Keep every nav item on one baseline regardless of whether it is an <a> or a
       form-wrapped <button> (the "Log ud" logout form). Centering the item's own
       content in a stretched flex row makes both share the same vertical box, so
       an admin's extra "Administration" item does not shift the others. */
    .navbar .nav-item {
        align-items: center;
        display: flex;
    }

/* Cards & sections */
.card,
.bg-light {
    background-color: var(--color-cream-white) !important;
    border-color: var(--bs-border-color);
}

/* Links */
a {
    color: var(--color-sage-green);
    text-decoration: none;
    transition: color 0.3s ease;
}

    a:hover {
        color: #6B8775;
    }

/* Footer */
footer {
    background-color: var(--color-dark-slate);
    color: var(--color-cream-white);
    padding: 2rem 0;
    text-align: left;
}

    footer p {
        color: var(--color-cream-white);
        margin: 0;
    }

    footer a {
        color: var(--color-cream-white);
        text-decoration: underline;
    }

        footer a:hover {
            color: var(--color-sage-green);
        }

/* Sections */
section {
    background-color: var(--color-warm-sand);
    padding: 60px 20px;
}

.page-section {
    min-height: calc(100vh - 80px);
}

.price-value {
    color: var(--color-sage-green);
    font-size: 1.75rem;
    font-weight: 700;
}

/* Hero Video Section */
.hero-video {
    position: relative;
    width: 100%;
    height: 75vh;
    overflow: hidden;
    padding: 0;
    background-color: #000;
}

    .hero-video video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(43, 58, 66, 0.7) 0%, rgba(43, 58, 66, 0.5) 50%, rgba(43, 58, 66, 0) 100%);
    display: flex;
    align-items: center;
    z-index: 10;
}

.hero-content {
    color: var(--color-cream-white);
    padding: 0 60px;
    max-width: 600px;
}

.hero-subtitle {
    font-size: 0.95rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-sage-green);
    margin-bottom: 10px;
    font-weight: 600;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--color-cream-white);
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-description {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-cream-white);
    margin-bottom: 30px;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

    .hero-buttons .btn {
        padding: 12px 28px;
        font-size: 0.95rem;
        font-weight: 600;
        text-transform: uppercase;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-block;
    }

    .hero-buttons .btn-book {
        background-color: var(--color-sage-green);
        color: var(--color-cream-white);
    }

        .hero-buttons .btn-book:hover {
            background-color: #6B8775;
            color: var(--color-cream-white);
        }

    .hero-buttons .btn-outline-book {
        background-color: transparent;
        color: var(--color-cream-white);
        border: 2px solid var(--color-cream-white);
    }

        .hero-buttons .btn-outline-book:hover {
            background-color: var(--color-cream-white);
            color: var(--color-dark-slate);
        }

/* Images */
img {
    max-width: 100%;
    height: auto;
}

.img-thumbnail {
    border: 2px solid var(--bs-primary-rgb);
    border-radius: 8px;
    padding: 4px;
}

/* Booking experience — kortbaseret wizard */
.booking-body {
    background-color: var(--booking-page-bg);
    color: var(--color-dark-slate);
    padding-top: 0;
}

.booking-header {
    background-color: var(--booking-card);
    border-bottom: 1px solid var(--booking-card-border);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.booking-header__inner {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: var(--booking-space-3) clamp(1rem, 4vw, 4rem);
}

.booking-brand {
    align-items: center;
    color: var(--color-dark-slate);
    display: flex;
    font-weight: 700;
    gap: var(--booking-space-2);
    text-decoration: none;
}

.booking-brand:hover {
    color: var(--color-sage-green);
}

.booking-brand img {
    height: 40px;
    width: 40px;
}

.booking-login {
    background-color: var(--color-sage-green);
    border-radius: var(--booking-radius-pill);
    color: var(--color-cream-white);
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    text-decoration: none;
}

.booking-login:hover {
    background-color: #6B8775;
    color: var(--color-cream-white);
}

/* Shell */
.booking-page {
    padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 4vw, 4rem);
}

.booking-shell {
    align-items: start;
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    grid-template-columns: minmax(0, 7fr) minmax(260px, 3fr);
    margin: 0 auto;
    max-width: 1320px;
}

.booking-main {
    display: flex;
    flex-direction: column;
    gap: var(--booking-step-gap);
    min-width: 0;
}

/* Steps */
.booking-step {
    background-color: var(--booking-card);
    border: 1px solid var(--booking-card-border);
    border-radius: var(--booking-card-radius);
    box-shadow: var(--booking-card-shadow);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.booking-step.is-active {
    border-color: var(--booking-card-border-strong);
    box-shadow: var(--booking-card-shadow-hover);
}

.booking-step__header {
    align-items: center;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: var(--booking-space-3);
    padding: var(--booking-space-4);
    text-align: left;
    width: 100%;
}

.booking-step__header:focus-visible {
    outline: 2px solid var(--color-sage-green);
    outline-offset: -3px;
}

.booking-step__marker {
    align-items: center;
    background-color: var(--booking-step-accent-soft);
    border-radius: 50%;
    color: var(--color-dark-slate);
    display: flex;
    flex: 0 0 auto;
    font-size: 0.8rem;
    font-weight: 700;
    height: 36px;
    justify-content: center;
    letter-spacing: 0.02em;
    transition: background-color 0.2s ease, color 0.2s ease;
    width: 36px;
}

.booking-step__check {
    display: none;
    font-size: 1rem;
    line-height: 1;
}

.booking-step.is-complete .booking-step__marker {
    background-color: var(--booking-step-complete);
    color: var(--color-cream-white);
}

.booking-step.is-complete .booking-step__number {
    display: none;
}

.booking-step.is-complete .booking-step__check {
    display: inline;
}

.booking-step__titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.booking-step__title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}

.booking-step__subtitle {
    color: var(--booking-muted);
    font-size: 0.85rem;
}

.booking-step__status {
    color: var(--booking-step-complete);
    font-size: 0.9rem;
    font-weight: 600;
    margin-left: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booking-step.is-active .booking-step__status {
    color: var(--booking-muted);
    font-weight: 500;
}

.booking-step__chevron {
    border-right: 2px solid var(--booking-muted);
    border-bottom: 2px solid var(--booking-muted);
    flex: 0 0 auto;
    height: 8px;
    margin-right: 4px;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    width: 8px;
}

.booking-step.is-active .booking-step__chevron {
    transform: rotate(-135deg);
}

.booking-step__body {
    display: none;
}

.booking-step.is-active .booking-step__body {
    display: block;
}

.booking-step__content {
    padding: 0 var(--booking-space-4) var(--booking-space-4);
}

.booking-step.is-locked .booking-step__header {
    cursor: not-allowed;
    opacity: 0.55;
}

.booking-step.is-locked .booking-step__status {
    color: var(--booking-step-locked);
}

/* Option cards (barber + service) */
.booking-option-grid {
    display: grid;
    gap: var(--booking-space-2);
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.booking-option {
    cursor: pointer;
    display: block;
    margin: 0;
}

.booking-option__input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.booking-option__card {
    align-items: flex-start;
    background-color: var(--booking-card);
    border: 1px solid var(--booking-card-border-strong);
    border-radius: var(--booking-card-radius);
    display: flex;
    gap: var(--booking-space-3);
    height: 100%;
    padding: var(--booking-space-3);
    position: relative;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.booking-option:hover .booking-option__card {
    border-color: var(--booking-step-accent);
    box-shadow: var(--booking-card-shadow);
}

.booking-option__input:focus-visible + .booking-option__card {
    outline: 2px solid var(--color-sage-green);
    outline-offset: 2px;
}

.booking-option__input:checked + .booking-option__card {
    background-color: var(--booking-option-selected-bg);
    border-color: var(--booking-option-selected-border);
}

.booking-option__input:disabled + .booking-option__card {
    cursor: not-allowed;
    opacity: 0.5;
}

.booking-option__input:disabled ~ * {
    pointer-events: none;
}

.booking-option__media {
    flex: 0 0 auto;
}

.booking-option__media img {
    border-radius: 10px;
    display: block;
    height: 56px;
    object-fit: cover;
    width: 56px;
}

.booking-option__check {
    align-items: center;
    border: 2px solid var(--booking-card-border-strong);
    border-radius: 6px;
    display: flex;
    flex: 0 0 auto;
    height: 22px;
    justify-content: center;
    margin-top: 2px;
    transition: background-color 0.18s ease, border-color 0.18s ease;
    width: 22px;
}

.booking-option__input:checked + .booking-option__card .booking-option__check {
    background-color: var(--booking-step-accent);
    border-color: var(--booking-step-accent);
}

.booking-option__input:checked + .booking-option__card .booking-option__check::after {
    border: solid var(--color-cream-white);
    border-width: 0 2px 2px 0;
    content: "";
    display: block;
    height: 9px;
    transform: rotate(45deg) translate(-1px, -1px);
    width: 5px;
}

.booking-option__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.booking-option__title {
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.3;
}

.booking-option__meta {
    color: var(--booking-muted);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.booking-option__description {
    color: var(--booking-muted);
    font-size: 0.85rem;
    line-height: 1.45;
}

/* Date & time — month calendar + slot panel.
   The grid lives on __panels because that is the element the client appends the
   calendar and the slot panel into as its two direct children. The outer
   .booking-date-time is only a wrapper so the hidden BookingDate/BookingTime
   inputs can live outside the grid without occupying a cell. */
.booking-date-time__panels {
    align-items: start;
    display: grid;
    gap: var(--booking-space-4);
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
}

.booking-date-card,
.booking-calendar {
    background-color: var(--booking-card);
    border: 1px solid var(--booking-card-border);
    border-radius: var(--booking-card-radius);
    box-shadow: var(--booking-card-shadow);
    overflow: hidden;
    padding: var(--booking-space-4);
}

.booking-calendar__header {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-bottom: var(--booking-space-3);
    position: relative;
}

.booking-calendar__title {
    color: var(--color-dark-slate);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: capitalize;
}

.booking-calendar__nav {
    background: none;
    border: 0;
    color: var(--color-dark-slate);
    cursor: pointer;
    font: inherit;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.1rem 0.45rem;
    transition: color 0.18s ease;
}

.booking-calendar__nav:hover {
    color: var(--color-sage-green);
}

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

.booking-calendar__weekday {
    color: var(--color-dark-slate);
    font-size: 0.8rem;
    font-weight: 700;
    padding-bottom: var(--booking-space-2);
    text-align: center;
}

.booking-calendar__day {
    aspect-ratio: 1 / 1;
    background: none;
    border: 0;
    border-radius: 10px;
    color: var(--color-dark-slate);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-size: 0.9rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.booking-calendar__day.is-available {
    background-color: var(--color-sage-green);
    color: var(--color-cream-white);
    font-weight: 600;
}

.booking-calendar__day.is-available:hover {
    background-color: var(--color-sage-green-hover);
}

.booking-calendar__day.is-selected,
.booking-calendar__day.is-selected:hover {
    background-color: var(--color-sage-green-deep);
    color: var(--color-cream-white);
}

.booking-calendar__day.is-full {
    color: var(--color-dark-slate);
    opacity: 0.45;
}

.booking-calendar__day.is-muted {
    color: var(--booking-muted);
    cursor: default;
    opacity: 0.35;
}

.booking-slots {
    background-color: var(--booking-slots-bg);
    border: 1px solid var(--booking-card-border);
    border-radius: var(--booking-card-radius);
    box-shadow: var(--booking-card-shadow);
    display: flex;
    flex-direction: column;
    padding: var(--booking-space-4);
}

.booking-slots__heading {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: var(--booking-space-3);
}

.booking-slots__label {
    color: var(--booking-muted);
    font-size: 0.9rem;
}

.booking-slots__date {
    color: var(--color-dark-slate);
    font-size: 0.9rem;
}

.booking-slot-grid {
    display: grid;
    gap: var(--booking-space-2);
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
}

/* Below the large breakpoint the calendar and the slot panel stack, so the month
   grid keeps a workable cell size instead of being crushed into a narrow column. */
@media (max-width: 991.98px) {
    .booking-date-time__panels {
        grid-template-columns: 1fr;
    }
}

.booking-pill,
.booking-time-pill {
    background-color: var(--booking-card);
    border: 1px solid var(--booking-card-border-strong);
    border-radius: var(--booking-radius-pill);
    color: var(--color-dark-slate);
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.5rem 0.9rem;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.booking-pill:hover,
.booking-time-pill:hover {
    border-color: var(--color-sage-green);
    color: var(--color-sage-green);
}

.booking-pill.is-selected,
.booking-time-pill.is-selected {
    background-color: var(--color-sage-green);
    border-color: var(--color-sage-green);
    color: var(--color-cream-white);
}

/* Contact fields */
.booking-label {
    color: var(--booking-muted);
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-bottom: var(--booking-space-1);
    text-transform: uppercase;
}

.booking-input {
    background-color: var(--booking-card);
    border: 1px solid var(--booking-card-border-strong);
    border-radius: var(--booking-radius-sm);
    color: var(--color-dark-slate);
    display: block;
    padding: 0.65rem 0.85rem;
    width: 100%;
}

.booking-input:focus {
    border-color: var(--color-sage-green);
    box-shadow: 0 0 0 3px var(--booking-step-accent-soft);
    outline: none;
}

.booking-input:disabled {
    background-color: rgba(232, 220, 200, 0.35);
    cursor: not-allowed;
    opacity: 0.6;
}

.booking-date-time[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}

.booking-help,
.booking-empty-state {
    color: var(--booking-muted);
    font-size: 0.88rem;
    margin: var(--booking-space-2) 0 0;
}

/* Contact */
.booking-contact-grid {
    border: 0;
    display: grid;
    gap: var(--booking-space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
}

.booking-contact-grid:disabled {
    opacity: 0.55;
}

.booking-button {
    border: 1px solid transparent;
    border-radius: var(--booking-radius-pill);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.85rem 2rem;
    text-transform: uppercase;
    transition: background-color 0.18s ease, opacity 0.18s ease;
}

.booking-button--primary {
    background-color: var(--color-sage-green);
    color: var(--color-cream-white);
    margin-top: var(--booking-space-4);
    width: 100%;
}

/* "Næste" is the secondary step action and "Bekræft booking" the primary one. They carry
   the same box in the flow, so they must measure the same: the primary is width-constrained
   and the secondary previously inherited the base padding only, which made the two steps
   look like different buttons as the user moved down the wizard. */
.booking-button--secondary {
    background-color: transparent;
    border-color: var(--color-sage-green);
    color: var(--color-sage-green);
    margin-top: var(--booking-space-4);
    width: 100%;
}

.booking-button--secondary:hover {
    background-color: var(--color-sage-green);
    color: var(--color-cream-white);
}

.booking-button--primary:hover {
    background-color: #6B8775;
    color: var(--color-cream-white);
}

.booking-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

/* Sidebar */
.booking-sidebar {
    position: sticky;
    top: 96px;
}

.booking-sidebar__card {
    background-color: var(--booking-card);
    border: 1px solid var(--booking-card-border);
    border-radius: var(--booking-card-radius);
    box-shadow: var(--booking-card-shadow);
    overflow: hidden;
    padding: var(--booking-space-4);
}

.booking-sidebar__brand {
    align-items: center;
    display: flex;
    gap: var(--booking-space-3);
    padding-bottom: var(--booking-space-4);
}

.booking-sidebar__logo {
    height: 48px;
    width: 48px;
}

.booking-sidebar__name {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.booking-sidebar__tagline {
    color: var(--booking-muted);
    font-size: 0.82rem;
    margin: 0;
}

.booking-sidebar__section {
    border-top: 1px solid var(--booking-divider-soft);
    padding: var(--booking-space-4) 0;
}

.booking-sidebar__heading {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin: 0 0 var(--booking-space-2);
    text-transform: uppercase;
}

.booking-sidebar__phone {
    background-color: var(--color-sage-green);
    border-radius: var(--booking-radius-pill);
    color: var(--color-cream-white);
    display: inline-block;
    font-weight: 700;
    margin-bottom: var(--booking-space-2);
    padding: 0.4rem 1.1rem;
    text-decoration: none;
}

.booking-sidebar__phone:hover {
    background-color: #6B8775;
    color: var(--color-cream-white);
}

.booking-sidebar__link {
    color: var(--color-sage-green);
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.booking-sidebar__link:hover {
    text-decoration: underline;
}

.booking-sidebar__hours {
    border-collapse: collapse;
    font-size: 0.9rem;
    width: 100%;
}

.booking-sidebar__hours th,
.booking-sidebar__hours td {
    font-weight: 500;
    padding: 0.35rem 0;
    text-align: left;
}

.booking-sidebar__hours th {
    color: var(--booking-muted);
    font-weight: 500;
}

.booking-sidebar__hours td {
    text-align: right;
}

.booking-sidebar__hours tr.is-closed td {
    color: var(--booking-step-locked);
}

.booking-sidebar__address {
    font-style: normal;
    line-height: 1.5;
    margin-bottom: var(--booking-space-2);
}

.booking-sidebar__social {
    border-top: 1px solid var(--booking-divider-soft);
    padding-top: var(--booking-space-4);
}

.booking-sidebar__social-link {
    align-items: center;
    color: var(--color-dark-slate);
    display: inline-flex;
    font-weight: 600;
    gap: var(--booking-space-2);
    text-decoration: none;
}

.booking-sidebar__social-link:hover {
    color: var(--color-sage-green);
}

.booking-sidebar__social-handle {
    font-size: 0.9rem;
}

/* Alerts & validation */
.booking-alert {
    border-radius: var(--booking-radius-sm);
    margin-bottom: var(--booking-space-3);
    padding: var(--booking-space-3) var(--booking-space-4);
}

.booking-alert:empty {
    display: none;
}

.booking-alert--success {
    background-color: var(--booking-step-accent-soft);
    border: 1px solid var(--booking-step-complete);
    color: var(--color-dark-slate);
}

.booking-alert--error {
    background-color: #f8e3e0;
    border: 1px solid #c9746a;
    color: #7d2f26;
}

.booking-validation {
    color: #a33b30;
    display: block;
    font-size: 0.82rem;
    margin-top: var(--booking-space-1);
}

.booking-validation:empty {
    display: none;
}

/* An inline error in a grid step normally adds a row and shoves the action buttons down,
   which reads as a broken step rather than a validation message. These slots always occupy
   one line, so the buttons keep their position whether or not a message is showing.
   1.55em matches the rendered height of a single-line message (0.82rem font, 1.35
   line-height), which is what stops the row growing when text actually appears. */
.booking-validation--reserved {
    grid-column: 1 / -1;
    min-height: 1.55em;
}

.booking-validation--reserved:empty {
    display: block;
}

/* These slots are never marked [hidden] — Bootstrap's [hidden] rule is !important and
   would win over the reservation, collapsing the row to zero. Visibility is driven by
   emptiness instead, so the reservation always applies. */

/* Country + number are one control. The group owns the border, radius and focus ring;
   both inner controls are borderless, so the flag reads as part of the field rather than
   an icon inside a box parked next to the number.

   The flag is drawn with gradients rather than an image or a data-URI SVG. The previous
   20x14 SVG put a 2px cross into a box only 14px tall, so its bars landed on sub-pixel
   positions and aliased into a smudge at 1x. Gradients let the bar edges sit on the real
   Danish proportions — 1/5 and 2/5 of the height horizontally, 1/2 vertically — and the
   element size is chosen so those edges fall on whole pixels at 1x. There is no bitmap and
   no network request, and it stays crisp because it is resolution-independent. */
.booking-phone-group {
    align-items: center;
    background-color: var(--booking-card);
    border: 1px solid var(--booking-card-border-strong);
    border-radius: var(--booking-radius-sm);
    display: flex;
    overflow: hidden;
    position: relative;
}

.booking-phone-group .booking-input {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    /* Room for the flag (1.15rem) plus its left padding, so the text never sits on top
       of the cross. */
    padding-left: 2.05rem;
    padding-right: 0.85rem;
}

.booking-phone-group .booking-input:focus {
    box-shadow: none;
}

.booking-phone-group:focus-within {
    border-color: var(--color-sage-green);
    box-shadow: 0 0 0 3px var(--booking-step-accent-soft);
}

/* The flag itself, as a ::before on the select so it cannot be selected or read out.
   Layout, top to bottom: the horizontal bar occupies 1/5..2/5 of the height, and the
   vertical bar is a full-height slice centred at 1/2 of the width. */
.booking-phone-group__country::before {
    background-color: #C8102E;
    background-image:
        /* horizontal bar, 1/5 to 2/5 of the height */
        linear-gradient(
            to bottom,
            transparent 0 20%,
            #FFFFFF 20% 40%,
            transparent 40% 100%),
        /* vertical bar, full height, centred on 1/2 of the width */
        linear-gradient(
            to right,
            transparent 0 45%,
            #FFFFFF 45% 55%,
            transparent 55% 100%);
    border-radius: 1px;
    box-shadow: 0 0 0 1px rgba(43, 58, 66, 0.12);
    content: "";
    height: 0.8rem;
    left: 0.8rem;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1.15rem;
    z-index: 1;
}

.booking-phone-group__country {
    -webkit-appearance: none;
    appearance: none;
    /* Keep the caret: the flag is absolutely positioned, so the padding that made room
       for it cannot also hold the caret. */
    background-image:
        linear-gradient(45deg, transparent 50%, var(--color-sage-green) 50%),
        linear-gradient(135deg, var(--color-sage-green) 50%, transparent 50%);
    background-position: right 0.75rem top 55%, right 0.45rem top 55%;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
    cursor: pointer;
    flex: 0 0 auto;
    font-weight: 600;
    padding-right: 1.75rem;
    /* The flag is positioned against the group, so the select must be transparent to it
       and stretch over the flag's area. */
    position: relative;
    width: 5.4rem;
    z-index: 2;
}

/* The divider has to out-specify `.booking-phone-group .booking-input { border: 0 }`
   above (0,2,0 vs 0,1,0), otherwise the reset silently wins and the two halves of the
   group blur together with no separation. */
.booking-phone-group .booking-phone-group__number {
    border-left: 1px solid var(--booking-card-border-strong);
}

.booking-phone-group__number {
    flex: 1 1 auto;
    min-width: 0;
    /* The select already carries the flag and caret, so the number has no extra inset. */
    padding-left: 0.85rem;
}

.booking-phone-group:hover {
    border-color: var(--color-sage-green);
}

/* Step 4 is phone-first: the number sits next to a small country selector and the
   name/email/password block is revealed underneath once the lookup returns. */
.booking-phone-row {
    align-items: end;
    display: grid;
    gap: var(--booking-space-2);
    grid-column: 1 / -1;
}

.booking-phone-group {
    min-width: 0;
}

.booking-account-reveal {
    border-top: 1px solid var(--bs-border-color);
    display: grid;
    gap: var(--booking-space-3);
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--booking-space-2);
    padding-top: var(--booking-space-3);
}

.booking-account-reveal__hint {
    color: var(--color-dark-slate);
    font-size: 0.9rem;
    grid-column: 1 / -1;
    margin: 0;
}

.booking-account-reveal[hidden] {
    display: none;
}

.booking-account-reveal .is-hidden {
    display: none;
}

@media (max-width: 991.98px) {
    .booking-account-reveal {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    /* The country select has a fixed width, so on the narrowest screens the number needs
       its share back rather than being squeezed to a couple of characters. */
    .booking-phone-group__country {
        width: 4.6rem;
    }

    .booking-phone-group .booking-input {
        padding-left: 1.95rem;
    }
}

/* Mine bookinger + administration. These are page-specific, not booking-flow tokens,
   so they stay at the end of the file and only style their own class names. */
/* Sage accent bar on the leading edge keeps the date/time block visually anchored, so the
   three zones (when / what / status) separate without needing heavy borders. */
.account-booking-card {
    align-items: center;
    background: var(--color-cream-white);
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--color-sage-green);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(43, 58, 66, 0.06);
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    margin-bottom: 0.85rem;
    padding: 1.15rem 1.4rem;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.account-booking-card:hover {
    box-shadow: 0 4px 12px rgba(43, 58, 66, 0.1);
    transform: translateY(-1px);
}

.account-booking-card__when {
    display: flex;
    flex-direction: column;
    min-width: 12rem;
    padding-right: 1.5rem;
}

/* The time is the scanning target, so it gets the size and weight and the weekday drops
   back to a muted line above it. */
.account-booking-card__when strong {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.account-booking-card__when span {
    color: var(--color-sage-green);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
}

.account-booking-card__what {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.15rem;
}

.account-booking-card__service {
    font-size: 1.05rem;
    font-weight: 600;
}

.account-booking-card__meta {
    color: var(--color-dark-slate);
    font-size: 0.85rem;
    opacity: 0.75;
}

.account-booking-card__status {
    flex-shrink: 0;
}

.admin-schedule__date {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    max-width: 32rem;
}

.admin-schedule__note {
    color: var(--color-dark-slate);
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}

.admin-schedule__barber {
    margin-bottom: 2rem;
}

.admin-schedule__barber-name {
    align-items: center;
    display: flex;
    font-size: 1.25rem;
    gap: 0.5rem;
}

.admin-schedule__count {
    background: var(--color-sage-green);
    border-radius: 999px;
    color: var(--color-cream-white);
    font-size: 0.75rem;
    padding: 0.1rem 0.6rem;
}

.admin-schedule__table {
    background: var(--color-cream-white);
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
}

.admin-schedule__table th,
.admin-schedule__table td {
    padding: 0.7rem 0.9rem;
    vertical-align: middle;
}

.admin-schedule__table tr.is-cancelled td {
    opacity: 0.55;
    text-decoration: line-through;
}

.admin-schedule__phone {
    display: block;
    font-size: 0.8rem;
    opacity: 0.75;
}

.admin-schedule__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* Admin month calendar. Proportions deliberately mirror .booking-calendar so the two read
   as one system, but these selectors are .admin-* only and never touch the booking wizard. */
.admin-schedule__layout {
    align-items: start;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    margin-bottom: 1.5rem;
}

.admin-calendar {
    background: var(--color-cream-white);
    border: 1px solid var(--booking-card-border-strong);
    border-radius: 16px;
    padding: 1rem;
}

.admin-calendar__header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.admin-calendar__title {
    color: var(--color-dark-slate);
    font-size: 1.05rem;
    font-weight: 600;
    text-transform: capitalize;
}

.admin-calendar__nav {
    align-items: center;
    border: 1px solid var(--booking-card-border-strong);
    border-radius: 999px;
    color: var(--color-dark-slate);
    display: inline-flex;
    font-size: 1.35rem;
    height: 2.1rem;
    justify-content: center;
    line-height: 1;
    text-decoration: none;
    width: 2.1rem;
}

.admin-calendar__nav:hover,
.admin-calendar__nav:focus-visible {
    background: var(--color-sage-green);
    border-color: var(--color-sage-green);
    color: var(--color-cream-white);
}

.admin-calendar__grid {
    border-collapse: separate;
    table-layout: fixed;
    width: 100%;
}

.admin-calendar__grid th,
.admin-calendar__grid td {
    padding: 0.15rem;
    text-align: center;
}

.admin-calendar__weekday {
    color: var(--color-dark-slate);
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.65;
    padding-bottom: 0.4rem;
    text-transform: uppercase;
}

.admin-calendar__day a,
.admin-calendar__day > .admin-calendar__day-number {
    align-items: center;
    border-radius: 10px;
    color: var(--color-dark-slate);
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    gap: 0.1rem;
    justify-content: center;
    min-height: 2.6rem;
    padding: 0.2rem;
    text-decoration: none;
}

.admin-calendar__day a:hover,
.admin-calendar__day a:focus-visible {
    background: var(--booking-step-accent-soft);
    outline-offset: 1px;
}

/* Adjacent-month days: present for orientation only, and not links in the markup. */
.admin-calendar__day.is-outside .admin-calendar__day-number,
.admin-calendar__day.is-outside a {
    color: var(--color-dark-slate);
    opacity: 0.3;
}

.admin-calendar__day.has-bookings a {
    background: var(--booking-step-accent-soft);
    font-weight: 600;
}

/* Every booking on the day cancelled: the day still holds slots, so it is marked but
   visually recessed rather than presented as active load. */
.admin-calendar__day.is-all-cancelled a {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--bs-border-color);
    font-weight: 400;
}

.admin-calendar__day.is-all-cancelled .admin-calendar__count {
    background: var(--bs-border-color);
    color: var(--color-dark-slate);
}

.admin-calendar__day.is-today a {
    box-shadow: inset 0 0 0 2px var(--color-sage-green);
}

.admin-calendar__day.is-selected a {
    background: var(--color-sage-green);
    color: var(--color-cream-white);
}

.admin-calendar__count {
    background: var(--color-sage-green);
    border-radius: 999px;
    color: var(--color-cream-white);
    font-size: 0.65rem;
    line-height: 1.4;
    min-width: 1.1rem;
    padding: 0 0.3rem;
}

.admin-calendar__day.is-selected .admin-calendar__count {
    background: var(--color-dark-slate);
}

.admin-schedule__day {
    min-width: 0;
}

.admin-schedule__selected-day {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.admin-schedule__month-list {
    border-top: 1px solid var(--bs-border-color);
    margin-top: 0.5rem;
    padding-top: 1rem;
}

.admin-schedule__month-list > summary {
    align-items: center;
    color: var(--color-dark-slate);
    cursor: pointer;
    display: flex;
    font-size: 1.1rem;
    font-weight: 600;
    gap: 0.5rem;
}

.admin-schedule__month-day {
    margin-top: 1.5rem;
}

.admin-schedule__month-day-title {
    align-items: center;
    display: flex;
    font-size: 1rem;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.admin-schedule__month-day-title a {
    color: var(--color-dark-slate);
    text-decoration: none;
}

.admin-schedule__month-day-title a:hover {
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    .account-booking-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.5rem;
    }

    .admin-schedule__date {
        flex-wrap: wrap;
    }
}

@media (max-width: 991.98px) {
    .booking-shell {
        grid-template-columns: 1fr;
    }

    .booking-sidebar {
        position: static;
    }

    .booking-date-time {
        grid-template-columns: 1fr;
    }

    /* Calendar above the day list, matching the customer wizard's stacking order. */
    .admin-schedule__layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .booking-option-grid,
    .booking-contact-grid {
        grid-template-columns: 1fr;
    }

    .booking-step__header {
        gap: var(--booking-space-2);
        padding: var(--booking-space-3);
    }

    .booking-step__content {
        padding: 0 var(--booking-space-3) var(--booking-space-3);
    }

    .booking-step__status {
        font-size: 0.8rem;
    }
}

/* Sticky navbar */
.site-navbar {
    z-index: 1030;
}

@media (max-width: 768px) {
    section {
        padding: 40px 20px;
    }

    .navbar .d-flex {
        flex-direction: column;
    }

    .navbar-brand img {
        width: 45px;
        height: 45px;
    }

    .navbar {
        height: 75px;
    }
}

/* ---- Booking: confirmation screen ---- */

.booking-shell--confirmed {
    grid-template-columns: minmax(0, 1fr);
    margin: 0 auto;
    max-width: 640px;
}

.booking-confirm {
    background: var(--booking-card);
    border: 1px solid var(--booking-card-border);
    border-radius: var(--booking-card-radius);
    box-shadow: var(--booking-card-shadow);
    padding: var(--booking-space-6);
    text-align: center;
}

.booking-confirm__badge {
    align-items: center;
    background: var(--color-sage-green);
    border-radius: 50%;
    color: var(--color-cream-white);
    display: flex;
    font-size: 1.75rem;
    height: 64px;
    justify-content: center;
    margin: 0 auto var(--booking-space-4);
    width: 64px;
}

.booking-confirm__title {
    color: var(--color-dark-slate);
    font-size: 1.75rem;
    margin-bottom: var(--booking-space-2);
}

.booking-confirm__subtitle {
    color: var(--booking-muted);
    margin-bottom: var(--booking-space-5);
}

.booking-confirm__summary {
    border-top: 1px solid var(--bs-border-color);
    margin: 0 0 var(--booking-space-5);
    text-align: left;
}

.booking-confirm__row {
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    gap: var(--booking-space-4);
    justify-content: space-between;
    padding: var(--booking-space-3) 0;
}

.booking-confirm__row dt {
    color: var(--booking-muted);
    font-weight: 600;
}

.booking-confirm__row dd {
    color: var(--color-dark-slate);
    font-weight: 600;
    margin: 0;
    text-align: right;
}

.booking-confirm__home {
    background: var(--color-sage-green);
    border-radius: var(--booking-radius-pill);
    color: var(--color-cream-white);
    display: inline-block;
    font-weight: 600;
    padding: 0.7rem 2.2rem;
    transition: background-color 0.18s ease;
}

.booking-confirm__home:hover {
    background: var(--color-sage-green-hover);
    color: var(--color-cream-white);
}

/* ---- Account: login ---- */

.account-page {
    background: var(--color-warm-sand);
    min-height: 60vh;
}

.account-login-card {
    background: var(--color-cream-white);
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    padding: 40px 32px;
    box-shadow: 0 2px 12px rgba(43, 58, 66, 0.06);
}

.account-login-card__title {
    color: var(--color-dark-slate);
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.account-login-card__lead {
    color: var(--color-dark-slate);
    opacity: 0.75;
    margin-bottom: 1.75rem;
}

.account-login-card__note {
    color: var(--color-dark-slate);
    opacity: 0.7;
    font-size: 0.9rem;
    margin: 1.5rem 0 0;
    text-align: center;
}

.account-login-card .form-control {
    border-radius: 0.5rem;
    border-color: var(--bs-border-color);
}

.account-login-card .form-control:focus {
    border-color: var(--color-sage-green);
    box-shadow: 0 0 0 0.2rem rgba(124, 152, 133, 0.25);
}

/* ---- Admin: barber CRUD ---- */

.admin-barbers__header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.75rem;
}

.admin-barbers__header .section-title {
    margin-bottom: 0;
}

.admin-barbers__grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.admin-barbers__card {
    background: var(--color-cream-white);
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(43, 58, 66, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.admin-barbers__photo {
    align-items: center;
    aspect-ratio: 4 / 3;
    background: var(--color-warm-sand);
    display: flex;
    justify-content: center;
    overflow: hidden;
    width: 100%;
}

.admin-barbers__photo img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.admin-barbers__initials {
    color: var(--color-sage-green);
    font-size: 3rem;
    font-weight: 700;
}

.admin-barbers__body {
    flex: 1;
    padding: 1rem 1.15rem 0.5rem;
}

.admin-barbers__name {
    color: var(--color-dark-slate);
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.admin-barbers__title {
    color: var(--color-dark-slate);
    font-size: 0.85rem;
    margin-bottom: 0;
    opacity: 0.75;
}

.admin-barbers__actions {
    border-top: 1px solid var(--bs-border-color);
    display: flex;
    gap: 0.5rem;
    padding: 0.85rem 1.15rem;
}

.admin-barbers__actions .btn {
    flex: 1;
}

.admin-barbers__card--confirm {
    padding: 1.5rem;
}

.admin-barbers__confirm-text {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

.admin-barbers__confirm-hint {
    color: var(--color-dark-slate);
    font-size: 0.85rem;
    margin-bottom: 0;
    opacity: 0.75;
}

.admin-barbers__form {
    background: var(--color-cream-white);
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(43, 58, 66, 0.06);
    max-width: 520px;
    padding: 1.75rem;
}

.admin-barbers__form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.admin-barbers__form-actions .btn-book {
    border: 0;
}

/* The delete form is inline, so it must not stretch its button across the action row. */
.admin-barbers__form-actions form {
    display: inline-flex;
}

/* ---- Admin: schedule edit modal ---- */

.admin-schedule__error {
    margin-top: 1.25rem;
}

@media (max-width: 768px) {
    .admin-barbers__grid {
        grid-template-columns: 1fr;
    }

    .admin-barbers__form {
        padding: 1.25rem;
    }
}