/* Prisliste – fælles søgebjælke og enhedskort */

.esp-prisliste {
    --esp-groen: var(--wp--preset--color--custom-knap-farve, #009942);
    --esp-groen-hover: var(--wp--preset--color--custom-hover, #07bf54);
    --esp-tekst: var(--wp--preset--color--contrast, #181818);
    --esp-daempet: #5f6368;
    --esp-kant: #e3e3e3;
    --esp-radius: 8px;
    position: relative;
    display: flex;
    flex-direction: column;
    font-size: var(--wp--preset--font-size--medium, 1rem);
}

/* Samme luft om stregen som mellem hovedindhold og galleri */
.wp-block-separator:has(+ .esp-prisliste),
.wp-block-separator:has(+ style + .esp-prisliste) {
    margin-block-start: 50px;
}

.wp-block-separator + .esp-prisliste,
.wp-block-separator + style + .esp-prisliste {
    margin-block-start: 50px;
}

/* ─── Søgebjælke: én samlet pille, så dato og gæster læses som én gruppe ─── */
.esp-prisliste__bar {
    position: sticky;
    top: calc(var(--esp-sticky-top, 0px) + 12px);
    z-index: 60;
    display: flex;
    align-items: stretch;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 24px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--esp-kant);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
    transition: box-shadow 0.2s ease;
}

.esp-prisliste.is-stuck .esp-prisliste__bar {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.esp-felt {
    position: relative;
    min-width: 0;
    padding: 8px 22px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.esp-felt--dato {
    min-width: 200px;
}

.esp-felt--gaester {
    min-width: 170px;
}

/* Skillelinje mellem felterne – skjules når et af dem er aktivt */
.esp-felt + .esp-felt::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: var(--esp-kant);
}

.esp-felt:hover {
    background: #f3f4f3;
}

.esp-felt:focus-within,
.esp-felt.is-open,
.esp-felt:has(.season-date-wrapper.open) {
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--esp-groen);
}

.esp-felt:hover::before,
.esp-felt:focus-within::before,
.esp-felt.is-open::before,
.esp-felt:hover + .esp-felt::before,
.esp-felt:focus-within + .esp-felt::before,
.esp-felt.is-open + .esp-felt::before {
    opacity: 0;
}

.esp-felt__label {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--esp-daempet);
    line-height: 1.3;
}

/* Værdierne må aldrig bryde over flere linjer */
.esp-prisliste .date-display,
.esp-gaester__tekst {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.esp-felt--dato {
    flex: 0 0 auto;
}

.esp-felt--gaester {
    flex: 0 1 auto;
    max-width: 400px;
}

.esp-kort {
    display: none;
}

@media (max-width: 900px) {
    .esp-gaester__tekst .esp-lang {
        display: none;
    }

    .esp-gaester__tekst .esp-kort {
        display: inline;
    }
}

@media (max-width: 480px) {
    .esp-prisliste .date-display .esp-lang {
        display: none;
    }

    .esp-prisliste .date-display .esp-kort {
        display: inline;
    }
}

.esp-felt__vaerdi {
    font-weight: 600;
}

/* Datovælgeren genbruger kalenderen fra prisberegneren */
.esp-prisliste .season-date-wrapper {
    display: block;
    position: static;
}

.esp-prisliste .season-date-trigger {
    min-width: 0;
    width: 100%;
    padding: 0;
    border: 0 !important;
    background: transparent;
    font-size: 1rem;
    font-weight: 600;
    color: var(--esp-tekst);
}

.esp-prisliste .season-date-trigger:focus-visible {
    outline: none;
}

/* Gæster */
.esp-gaester__knap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--esp-tekst);
    text-align: left;
    cursor: pointer;
}

.esp-gaester__knap:focus-visible {
    outline: none;
}

.esp-gaester__tekst {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.esp-ikon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: #666;
}

.esp-gaester__panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 1000;
    width: 320px;
    max-width: calc(100vw - 2rem);
    padding: 16px;
    cursor: default;
    background: #fff;
    border: 2px solid var(--esp-groen);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
}

.esp-gaester__panel[hidden] {
    display: none;
}

.esp-gaester__raekke {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.esp-gaester__navn {
    display: block;
    font-weight: 600;
}

.esp-gaester__sub {
    display: block;
    font-size: 0.8rem;
    color: var(--esp-daempet);
}

.esp-stepper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.esp-stepper__knap {
    width: 34px;
    height: 34px;
    border: 2px solid var(--esp-kant);
    border-radius: 50%;
    background: #fff;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--esp-tekst);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.esp-stepper__knap:hover:not(:disabled),
.esp-stepper__knap:focus-visible {
    border-color: var(--esp-groen);
    color: var(--esp-groen);
    outline: none;
}

.esp-stepper__knap:disabled {
    opacity: 0.35;
    cursor: default;
}

.esp-stepper__vaerdi {
    min-width: 1.5em;
    text-align: center;
    font-weight: 600;
}

.esp-gaester__panel .esp-gaester__faerdig {
    width: 100%;
    height: auto !important;
    margin-top: 14px;
    padding: 0.7rem 1rem;
    border: 0;
    border-radius: 9999px;
    background: var(--esp-groen);
    color: #fff;
    cursor: pointer;
}

.esp-gaester__panel .esp-gaester__faerdig:hover {
    background: var(--esp-groen-hover);
    color: #fff;
}

/* ─── Liste og kort ─── */
.esp-prisliste__liste {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.esp-enhed {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr) minmax(240px, 300px);
    margin: 0;
    background: #fff;
    border: 1px solid var(--esp-kant);
    border-radius: var(--esp-radius);
    overflow: hidden;
    scroll-margin-top: calc(var(--esp-sticky-top, 0px) + 100px);
    transition: box-shadow 0.2s ease;
}

.esp-enhed:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.esp-enhed__billede {
    position: relative;
    min-height: 240px;
    background: #e0e0e0;
}

.esp-enhed__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

.esp-enhed__img--tom {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e0e0e0;
}

.esp-enhed__info {
    padding: 22px 24px;
    min-width: 0;
}

.esp-enhed__navn {
    margin: 0 0 8px;
    font-size: var(--wp--preset--font-size--x-large, 1.75rem);
}

/* ─── Link til enhedssiden (billede + overskrift) ─── */
.esp-enhed__billede-link {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

.esp-enhed__billede-link .esp-enhed__img {
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.esp-enhed__billede-link::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.28), transparent 45%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.esp-enhed__se-mere {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 28px);
    padding: 7px 5px 7px 14px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--wp--preset--color--contrast, #181818);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

.esp-pil {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--wp--preset--color--custom-knap-farve, #009942);
    color: #fff;
    transition: margin-left 0.25s ease;
}

.esp-pil svg {
    display: block;
    width: 13px;
    height: 13px;
}

.esp-enhed__navn a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease;
}

.esp-enhed__navn a:focus-visible {
    outline: 2px solid var(--wp--preset--color--custom-knap-farve, #009942);
    outline-offset: 4px;
    border-radius: 4px;
}

@media (hover: hover) and (pointer: fine) {
    .esp-enhed:has(.esp-enhed__billede-link:hover, .esp-enhed__navn a:hover) .esp-enhed__billede-link .esp-enhed__img {
        transform: scale(1.04);
    }

    .esp-enhed:has(.esp-enhed__billede-link:hover, .esp-enhed__navn a:hover) .esp-enhed__billede-link::after {
        opacity: 1;
    }

    .esp-enhed:has(.esp-enhed__billede-link:hover, .esp-enhed__navn a:hover) .esp-enhed__navn a {
        background-size: 100% 1px;
    }

    /* Pillen vokser med pilen, så cirklen bliver inde i pillen */
    .esp-enhed:has(.esp-enhed__billede-link:hover, .esp-enhed__navn a:hover) .esp-pil {
        margin-left: 10px;
    }
}

.esp-enhed__billede-link:active .esp-enhed__img {
    transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
    .esp-enhed__billede-link .esp-enhed__img,
    .esp-enhed__billede-link::after,
    .esp-enhed__navn a,
    .esp-pil {
        transition: none;
    }
}

.esp-enhed__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.esp-enhed__meta li {
    padding: 3px 10px;
    border-radius: 999px;
    background: #f1f5f1;
    font-size: 0.8rem;
    font-weight: 600;
    color: #2c5530;
}

.esp-enhed__tekst {
    font-size: 0.95rem;
    line-height: 1.55;
}

.esp-enhed__tekst > * {
    margin-top: 0;
    margin-bottom: 0.6em;
}

.esp-enhed__tekst > *:last-child {
    margin-bottom: 0;
}

.esp-enhed__tekst h3,
.esp-enhed__tekst h4 {
    font-size: 1.05rem;
    font-weight: 600;
}

.esp-enhed__fra {
    margin: 14px 0 0;
    font-size: 0.9rem;
    color: var(--esp-daempet);
}

.esp-enhed__fra strong {
    font-size: 1.15rem;
    color: var(--esp-tekst);
}

.esp-enhed__pris {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 24px;
    background: #fafafa;
    border-left: 1px solid var(--esp-kant);
}

.esp-enhed__resultat {
    position: relative;
    flex: 0 1 auto;
    transition: opacity 0.2s ease;
}

.esp-enhed__resultat.is-loading {
    opacity: 0.45;
    pointer-events: none;
}

.esp-enhed__strom {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    cursor: pointer;
}

.esp-enhed__strom input {
    width: 18px;
    height: 18px;
    accent-color: var(--esp-groen);
}

.esp-prisliste .esp-enhed__book {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: auto !important;
    margin-top: auto;
    padding: 0.8rem 1rem;
    text-align: center;
    background: var(--esp-groen);
    color: #fff;
    box-sizing: border-box;
}

.esp-prisliste .esp-enhed__book:hover {
    background: var(--esp-groen-hover);
    color: #fff;
}

/* ─── Prisresultat ─── */
.esp-resultat p {
    margin: 0;
}

.esp-resultat__label {
    font-size: 0.8rem;
    color: var(--esp-daempet);
}

.esp-resultat__total {
    margin: 2px 0 0 !important;
    font-size: 1.6rem;
    line-height: 1.2;
}

.esp-resultat__total s {
    font-size: 1rem;
    color: #999;
    margin-right: 4px;
}

.esp-resultat__total strong {
    font-weight: 700;
}

.esp-resultat__pr-nat {
    font-size: 0.85rem;
    color: var(--esp-daempet);
}

.esp-resultat__badge {
    display: inline-block;
    margin-top: 8px !important;
    padding: 3px 10px;
    border-radius: 999px;
    background: #fff3cd;
    color: #856404;
    font-size: 0.8rem;
    font-weight: 600;
}

.esp-resultat__linjer {
    margin: 12px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--esp-kant);
    list-style: none;
    font-size: 0.85rem;
}

.esp-resultat__linjer li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
}

.esp-resultat__linjer li span:last-child {
    white-space: nowrap;
}

.esp-resultat__linjer li.is-rabat {
    color: #c0392b;
    font-weight: 600;
}

.esp-resultat__moms {
    margin-top: 8px !important;
    font-size: 0.75rem;
    color: #888;
}

.esp-resultat__note {
    font-size: 0.9rem;
    color: var(--esp-daempet);
}

.esp-resultat__note--info {
    margin-bottom: 10px !important;
    padding: 8px 10px;
    border-left: 3px solid var(--esp-groen);
    border-radius: 4px;
    background: #f1f5f1;
    font-size: 0.8rem;
    color: #2c5530;
}

.esp-resultat__titel {
    font-weight: 700;
    color: #922b21;
}

.esp-resultat--lukket .esp-resultat__note:not(.esp-resultat__note--info) {
    margin-top: 4px;
}

/* ─── Editor ─── */
.esp-prisliste--editor .esp-prisliste__bar {
    position: relative;
    top: 0;
    order: 0;
}

.esp-prisliste--editor .esp-enhed__billede-knapper {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: flex;
    gap: 6px;
    background: rgba(255, 255, 255, 0.92);
    padding: 4px;
    border-radius: 6px;
}

.esp-prisliste--editor .esp-enhed__img--tom {
    width: 100%;
    height: 100%;
    justify-content: center;
}

/* ─── Tablet ─── */
@media (max-width: 1100px) {
    .esp-enhed {
        grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    }

    .esp-enhed__billede {
        grid-row: span 2;
    }

    .esp-enhed__pris {
        border-left: 0;
        border-top: 1px solid var(--esp-kant);
    }
}

/* ─── Mobil ─── */
@media (max-width: 700px) {
    /* I bunden af skærmen, inden for tommelfingerens rækkevidde */
    .esp-prisliste__bar,
    .esp-prisliste.is-stuck .esp-prisliste__bar {
        order: 2;
        top: auto;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        width: 100%;
        margin: 16px 0 0;
        /* Skyggen kastes opad, så browserens adresselinje ikke skærer den af */
        box-shadow: 0 -6px 20px -6px rgba(0, 0, 0, 0.22), 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .esp-prisliste__liste {
        order: 1;
    }

    /* Cookie-knappen ligger ellers oven på bjælken */
    body:has(.esp-prisliste) pressidium-floating-button {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Felterne er static, så popups placeres ud fra hele bjælken */
    .esp-felt {
        position: static;
        flex: 1 1 0;
        min-width: 0;
        padding: 6px 16px;
    }

    .esp-felt--dato {
        flex-grow: 1.3;
        border-radius: 999px 0 0 999px;
    }

    .esp-felt--gaester {
        max-width: none;
        border-left: 1px solid var(--esp-kant);
        border-radius: 0 999px 999px 0;
    }

    .esp-felt + .esp-felt::before {
        display: none;
    }

    .esp-felt__label {
        font-size: 0.65rem;
    }

    .esp-prisliste .season-date-trigger,
    .esp-gaester__knap {
        font-size: 0.9rem;
    }

    .esp-prisliste .season-date-trigger .calendar-icon,
    .esp-gaester__knap .esp-ikon {
        display: none;
    }

    /* Kalender og gæstepanel åbner opad i fuld bredde */
    .esp-kal:not(.esp-kal--modal),
    .esp-gaester__panel:not(.esp-gaester__panel--modal) {
        top: auto !important;
        bottom: calc(100% + 10px);
        left: 0 !important;
        right: 0;
        width: auto !important;
        min-width: 0 !important;
        max-width: none;
        transform: none !important;
    }

    .esp-enhed {
        grid-template-columns: 1fr;
    }

    .esp-enhed__billede {
        grid-row: auto;
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .esp-enhed__info,
    .esp-enhed__pris {
        padding: 16px 18px;
    }

    .esp-enhed__navn {
        font-size: var(--wp--preset--font-size--large, 1.38rem);
    }
}

/* ─── Små mobiler (fx iPhone SE og mindre Android) ─── */
@media (max-width: 380px) {
    .esp-felt {
        padding: 6px 12px;
    }

    .esp-felt__label {
        font-size: 0.6rem;
        letter-spacing: 0.02em;
    }

    .esp-prisliste .season-date-trigger,
    .esp-gaester__knap {
        font-size: 0.85rem;
    }
}

/* ═══ Datovælger (prisliste-kalender.js) ═══ */
.esp-kal {
    --kal-groen: var(--wp--preset--color--custom-knap-farve, #009942);
    --kal-groen-hover: var(--wp--preset--color--custom-hover, #07bf54);
    --kal-tekst: var(--wp--preset--color--contrast, #181818);
    --kal-daempet: #5f6368;
    --kal-celle: 38px;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 1000;
    width: 340px;
    max-width: calc(100vw - 24px);
    padding: 14px;
    background: #fff;
    border: 2px solid var(--kal-groen);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
    box-sizing: border-box;
    font-family: var(--wp--preset--font-family--manrope, inherit);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    color: var(--kal-tekst);
    cursor: default;
    text-align: left;
}

.esp-kal[hidden] {
    display: none;
}

.esp-kal *,
.esp-kal *::before,
.esp-kal *::after {
    box-sizing: border-box;
}

.esp-kal button {
    margin: 0;
    font: inherit;
    color: inherit;
    letter-spacing: normal;
    text-transform: none;
    -webkit-tap-highlight-color: transparent;
}

.esp-kal__top {
    display: none;
}

.esp-kal__head {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.esp-kal__nav {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--kal-groen) !important;
    font-size: 1.1rem !important;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, opacity 0.15s;
}

.esp-kal__nav:hover:not(:disabled),
.esp-kal__nav:focus-visible {
    background: var(--kal-groen);
    color: #fff !important;
    outline: none;
}

.esp-kal__nav:disabled {
    opacity: 0.25;
    cursor: default;
}

.esp-kal__titel {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    background: none;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s;
}

.esp-kal__titel:hover:not(:disabled),
.esp-kal__titel:focus-visible {
    background: #f1f5f1;
    outline: none;
}

.esp-kal__titel:disabled {
    cursor: default;
}

.esp-kal__titel-pil {
    font-size: 0.7rem;
    color: var(--kal-groen);
}

.esp-kal__niveau {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 10px;
    padding: 3px;
    border-radius: 999px;
    background: #f1f2f1;
}

.esp-kal__niveau button {
    padding: 5px 0;
    border: 0;
    border-radius: 999px;
    background: none;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: var(--kal-daempet) !important;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.esp-kal__niveau button[aria-pressed="true"] {
    background: #fff;
    color: var(--kal-tekst) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.esp-kal__niveau button:focus-visible {
    outline: 2px solid var(--kal-groen);
    outline-offset: -2px;
}

/* Fast højde på alle niveauer, så pile og knapper aldrig flytter sig */
.esp-kal__vindue {
    position: relative;
    height: calc(30px + 6 * var(--kal-celle) + 10px);
    overflow: hidden;
}

.esp-kal__view {
    position: absolute;
    inset: 0;
}

.esp-kal__view.anim-ud { animation: espKalZoomUd 0.22s ease-out; }
.esp-kal__view.anim-ind { animation: espKalZoomInd 0.22s ease-out; }
.esp-kal__view.anim-frem { animation: espKalFrem 0.2s ease-out; }
.esp-kal__view.anim-tilbage { animation: espKalTilbage 0.2s ease-out; }

@keyframes espKalZoomUd { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: none; } }
@keyframes espKalZoomInd { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: none; } }
@keyframes espKalFrem { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes espKalTilbage { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

.esp-kal__ugedage,
.esp-kal__dage {
    display: grid;
    grid-template-columns: 26px repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.esp-kal__ugedage {
    height: 24px;
    margin-bottom: 6px;
    align-items: center;
}

.esp-kal__ugedage span {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--kal-daempet);
}

.esp-kal__ugedage span:first-child {
    font-size: 0.62rem;
    color: #999;
}

.esp-kal__dage {
    grid-auto-rows: var(--kal-celle);
}

.esp-kal__uge,
.esp-kal__dag {
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.esp-kal__uge {
    border-radius: 6px;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: #888 !important;
}

.esp-kal__uge:hover:not(:disabled),
.esp-kal__uge:focus-visible {
    background: #f0f0f0;
    outline: none;
}

.esp-kal__uge:disabled {
    color: #ccc !important;
    cursor: default;
}

.esp-kal__dag {
    position: relative;
    border-radius: 8px;
    font-size: 0.85rem !important;
    transition: background-color 0.12s;
}

.esp-kal__dag:hover:not(:disabled):not(.is-start):not(.is-slut) {
    background: #f0f0f0;
}

.esp-kal__dag:focus-visible {
    outline: 2px solid var(--kal-groen);
    outline-offset: -2px;
}

.esp-kal__dag.is-anden {
    color: #b5b5b5 !important;
}

.esp-kal__dag:disabled {
    color: #d0d0d0 !important;
    cursor: default;
}

.esp-kal__dag.is-idag {
    font-weight: 800 !important;
    color: var(--kal-groen) !important;
    box-shadow: inset 0 0 0 1px var(--kal-groen);
}

.esp-kal__dag.is-interval {
    border-radius: 0;
    background: color-mix(in srgb, var(--kal-groen) 18%, transparent);
}

.esp-kal__dag.is-forslag {
    border-radius: 0;
    background: color-mix(in srgb, var(--kal-groen) 10%, transparent);
}

.esp-kal__dag.is-start,
.esp-kal__dag.is-slut {
    background: var(--kal-groen);
    color: #fff !important;
}

.esp-kal__dag.is-start { border-radius: 8px 0 0 8px; }
.esp-kal__dag.is-slut { border-radius: 0 8px 8px 0; }
.esp-kal__dag.is-start.is-slut { border-radius: 8px; }

.esp-kal__dag.is-idag.is-start,
.esp-kal__dag.is-idag.is-slut {
    box-shadow: inset 0 0 0 2px #fff;
}

.esp-kal__gitter {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 8px;
    height: 100%;
    padding: 4px 0;
}

.esp-kal__gitter button {
    position: relative;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #f6f7f6;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.esp-kal__gitter button:hover:not(:disabled) {
    background: #e9f3ec;
}

.esp-kal__gitter button:focus-visible {
    outline: 2px solid var(--kal-groen);
    outline-offset: 1px;
}

.esp-kal__gitter button:disabled {
    background: #fafafa;
    color: #cfcfcf !important;
    cursor: default;
}

.esp-kal__gitter button.is-nu {
    box-shadow: inset 0 0 0 1.5px var(--kal-groen);
    color: var(--kal-groen) !important;
}

.esp-kal__gitter button.is-valgt {
    background: var(--kal-groen);
    color: #fff !important;
}

.esp-kal__gitter button.har-ophold::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: var(--kal-groen);
}

.esp-kal__gitter button.is-valgt.har-ophold::after {
    background: #fff;
}

.esp-kal__fod {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.esp-kal__info {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.85rem;
    color: var(--kal-daempet);
}

.esp-kal__info strong {
    color: var(--kal-tekst);
}

.esp-kal__nulstil,
.esp-kal .esp-kal__faerdig {
    flex: 0 0 auto;
    height: auto !important;
    padding: 8px 14px !important;
    border: 0;
    border-radius: 999px;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    cursor: pointer;
}

.esp-kal__nulstil {
    background: none;
}

.esp-kal__nulstil:hover {
    background: #f0f0f0;
}

.esp-kal .esp-kal__faerdig {
    background: var(--kal-groen);
    color: #fff !important;
}

.esp-kal .esp-kal__faerdig:hover {
    background: var(--kal-groen-hover);
}

.esp-kal__nulstil:focus-visible,
.esp-kal__faerdig:focus-visible {
    outline: 2px solid var(--kal-groen);
    outline-offset: 2px;
}

@media (max-width: 380px) {
    .esp-kal {
        --kal-celle: 34px;
        padding: 10px;
    }

    .esp-kal__ugedage,
    .esp-kal__dage {
        grid-template-columns: 20px repeat(7, minmax(0, 1fr));
    }
}

/* Kun en animation når kalenderen åbnes – aldrig når den skifter tilstand ved resize */
.esp-kal.esp-kal--aabner { animation: espKalPop 0.16s ease-out; }
.esp-kal.esp-kal--modal.esp-kal--aabner { animation: espKalModal 0.22s ease-out; }
.esp-kal.esp-kal--skift { animation: espKalSkift 0.18s ease-out; }

@keyframes espKalPop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes espKalModal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes espKalSkift { from { opacity: 0.4; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .esp-kal,
    .esp-kal__view {
        animation: none !important;
    }
}

/* ─── Fuldskærm, når popoveren ikke kan være i den synlige plads ─── */
html.esp-pop-modal {
    overflow: hidden;
}

.esp-kal.esp-kal--modal {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    flex-direction: column;
    width: auto;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

.esp-kal--modal .esp-kal__top {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px 10px 20px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid #eee;
}

.esp-kal__top-titel {
    font-weight: 700;
}

.esp-kal__luk {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f1f2f1;
    font-size: 1.3rem !important;
    line-height: 1 !important;
    cursor: pointer;
}

.esp-kal__luk:hover,
.esp-kal__luk:focus-visible {
    background: var(--kal-groen);
    color: #fff !important;
    outline: none;
}

.esp-kal--modal .esp-kal__indhold {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: safe center;
    width: min(520px, 100%);
    min-height: 0;
    margin: 0 auto;
    padding: 12px 16px 0;
    overflow-y: auto;
}

/* Gitteret fylder den ledige højde, så dagene er nemme at ramme med fingeren */
.esp-kal--modal .esp-kal__vindue {
    flex: 1 1 auto;
    height: auto;
    min-height: 210px;
    max-height: 420px;
}

.esp-kal--modal .esp-kal__dage {
    height: calc(100% - 30px);
    grid-auto-rows: minmax(28px, 1fr);
}

.esp-kal--modal .esp-kal__dag {
    font-size: 0.95rem !important;
}

.esp-kal--modal .esp-kal__fod {
    flex: 0 0 auto;
    width: min(520px, 100%);
    margin: 0 auto;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
}

/* Lave skærme (fx telefon på tværs): drop topbjælke og niveau-vælger – Færdig/Escape lukker */
@media (max-height: 460px) {
    .esp-kal--modal .esp-kal__top,
    .esp-kal--modal .esp-kal__niveau {
        display: none;
    }

    .esp-kal--modal .esp-kal__indhold {
        padding-top: 8px;
    }

    .esp-kal--modal .esp-kal__head {
        margin-bottom: 4px;
    }

    .esp-kal--modal .esp-kal__vindue {
        min-height: 190px;
    }

    .esp-kal--modal .esp-kal__fod {
        margin-top: 6px;
        padding-top: 8px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }
}

/* ═══ Gæstemenu: fuldskærm og animationer (samme logik som datovælgeren) ═══ */
.esp-gaester__panel {
    --esp-groen: var(--wp--preset--color--custom-knap-farve, #009942);
    --esp-groen-hover: var(--wp--preset--color--custom-hover, #07bf54);
    --esp-tekst: var(--wp--preset--color--contrast, #181818);
    --esp-daempet: #5f6368;
    --esp-kant: #e3e3e3;
    font-family: var(--wp--preset--font-family--manrope, inherit);
    font-size: 1rem;
    line-height: 1.3;
    color: var(--esp-tekst);
    text-align: left;
}

.esp-gaester__panel *,
.esp-gaester__panel *::before,
.esp-gaester__panel *::after {
    box-sizing: border-box;
}

.esp-gaester__top {
    display: none;
}

.esp-gaester__raekke:last-child {
    border-bottom: 0;
}

.esp-gaester__panel.esp-gaester__panel--aabner { animation: espKalPop 0.16s ease-out; }
.esp-gaester__panel.esp-gaester__panel--modal.esp-gaester__panel--aabner { animation: espKalModal 0.22s ease-out; }
.esp-gaester__panel.esp-gaester__panel--skift { animation: espKalSkift 0.18s ease-out; }

@media (prefers-reduced-motion: reduce) {
    .esp-gaester__panel {
        animation: none !important;
    }
}

.esp-gaester__panel.esp-gaester__panel--modal {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    flex-direction: column;
    width: auto;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

.esp-gaester__panel--modal[hidden] {
    display: none;
}

.esp-gaester__panel--modal .esp-gaester__top {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px 10px 20px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid #eee;
}

.esp-gaester__top-titel {
    font-weight: 700;
}

.esp-gaester__luk {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f1f2f1;
    font: inherit;
    font-size: 1.3rem;
    line-height: 1;
    color: inherit;
    cursor: pointer;
}

.esp-gaester__luk:hover,
.esp-gaester__luk:focus-visible {
    background: var(--esp-groen);
    color: #fff;
    outline: none;
}

.esp-gaester__panel--modal .esp-gaester__indhold {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: safe center;
    width: min(520px, 100%);
    min-height: 0;
    margin: 0 auto;
    padding: 8px 20px;
    overflow-y: auto;
}

.esp-gaester__panel--modal .esp-gaester__raekke {
    padding: 16px 0;
}

.esp-gaester__panel--modal .esp-gaester__navn {
    font-size: 1.05rem;
}

.esp-gaester__panel--modal .esp-stepper__knap {
    width: 42px;
    height: 42px;
}

.esp-gaester__panel--modal .esp-gaester__fod {
    flex: 0 0 auto;
    width: min(520px, 100%);
    margin: 0 auto;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #eee;
}

.esp-gaester__panel--modal .esp-gaester__faerdig {
    margin-top: 0;
}

@media (max-height: 460px) {
    .esp-gaester__panel--modal .esp-gaester__top {
        display: none;
    }

    .esp-gaester__panel--modal .esp-gaester__raekke {
        padding: 8px 0;
    }

    .esp-gaester__panel--modal .esp-gaester__fod {
        padding-top: 8px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }
}

/* Cookie-knappen må ikke ligge oven på en åben kalender eller gæsteliste */
html.esp-pop-aaben pressidium-floating-button {
    display: none !important;
}
