:root {
    --snkal-brown: #6e4f3a;
    --snkal-brown-dark: #513928;
    --snkal-beige: #f3efe8;
    --snkal-beige-deep: #e5dbcf;
    --snkal-orange: #d9783d;
    --snkal-orange-dark: #b95d29;
    --snkal-ink: #332b26;
    --snkal-muted: #6f6862;
    --snkal-locked: #aaa39a;
    --snkal-white: #fff;
}

.snkal-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(18px, 3vw, 34px);
    color: var(--snkal-ink);
    background: var(--snkal-beige);
    border: 1px solid var(--snkal-beige-deep);
    border-radius: 22px;
    box-shadow: 0 12px 36px rgba(81, 57, 40, 0.1);
}

.snkal-intro {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.snkal-eyebrow {
    margin: 0 0 3px;
    color: var(--snkal-orange-dark);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.snkal-intro h2 {
    margin: 0;
    color: var(--snkal-brown-dark);
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    line-height: 1.05;
}

.snkal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 18px;
    color: var(--snkal-muted);
    font-size: 0.88rem;
}

.snkal-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.snkal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.snkal-dot--open {
    background: var(--snkal-orange);
}

.snkal-dot--locked {
    background: var(--snkal-locked);
}

.snkal-status {
    margin: 0 0 16px;
    padding: 11px 14px;
    color: var(--snkal-brown-dark);
    background: var(--snkal-white);
    border-left: 4px solid var(--snkal-orange);
    border-radius: 8px;
}

.snkal-status--error {
    color: #6b2727;
    border-left-color: #a93b3b;
}

.snkal-calendar {
    --fc-border-color: #ded4c8;
    --fc-button-bg-color: var(--snkal-brown);
    --fc-button-border-color: var(--snkal-brown);
    --fc-button-hover-bg-color: var(--snkal-brown-dark);
    --fc-button-hover-border-color: var(--snkal-brown-dark);
    --fc-button-active-bg-color: var(--snkal-orange-dark);
    --fc-button-active-border-color: var(--snkal-orange-dark);
    --fc-today-bg-color: rgba(217, 120, 61, 0.12);
    --fc-page-bg-color: var(--snkal-white);
    --fc-neutral-bg-color: #ece5dc;
    --fc-list-event-hover-bg-color: #f8f4ef;
}

.snkal-calendar .fc {
    font-family: inherit;
}

.snkal-calendar .fc-toolbar-title {
    color: var(--snkal-brown-dark);
    font-size: clamp(1.05rem, 2.5vw, 1.45rem);
}

.snkal-calendar .fc-button {
    border-radius: 9px;
    box-shadow: none;
    font-weight: 650;
}

.snkal-calendar .fc-col-header-cell-cushion,
.snkal-calendar .fc-daygrid-day-number,
.snkal-calendar .fc-timegrid-axis-cushion {
    color: var(--snkal-brown-dark);
    text-decoration: none;
}

.snkal-calendar .fc-event {
    padding: 2px 4px;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 650;
}

.snkal-calendar .snkal-event--open {
    color: var(--snkal-white);
    background: var(--snkal-orange);
}

.snkal-calendar .snkal-event--open:hover,
.snkal-calendar .snkal-event--open:focus {
    background: var(--snkal-orange-dark);
}

.snkal-calendar .snkal-event--locked {
    color: #3f3a35;
    background: #c5c0ba;
}

.snkal-calendar .snkal-event--locked:hover,
.snkal-calendar .snkal-event--locked:focus {
    background: #b2aca5;
}

.snkal-dialog {
    width: min(620px, calc(100vw - 32px));
    padding: clamp(24px, 5vw, 40px);
    color: var(--snkal-ink);
    background: var(--snkal-beige);
    border: 2px solid var(--snkal-brown);
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(46, 32, 23, 0.35);
}

.snkal-dialog::backdrop {
    background: rgba(42, 31, 24, 0.55);
    backdrop-filter: blur(3px);
}

.snkal-dialog-close {
    position: absolute;
    top: 10px;
    right: 14px;
    width: 42px;
    height: 42px;
    padding: 0;
    color: var(--snkal-brown);
    background: transparent;
    border: 0;
    border-radius: 50%;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.snkal-dialog-close:hover,
.snkal-dialog-close:focus {
    background: rgba(110, 79, 58, 0.1);
}

.snkal-dialog-date {
    margin: 0 42px 5px 0;
    color: var(--snkal-orange-dark);
    font-weight: 750;
}

.snkal-dialog-title {
    margin: 0 42px 18px 0;
    color: var(--snkal-brown-dark);
    font-size: clamp(1.45rem, 4vw, 2rem);
}

.snkal-dialog-meta {
    margin: 0 0 14px;
}

.snkal-dialog-meta div {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 12px;
}

.snkal-dialog-meta dt {
    font-weight: 750;
}

.snkal-dialog-meta dd {
    margin: 0;
}

.snkal-dialog-description {
    margin: 14px 0;
    white-space: pre-line;
}

.snkal-dialog-description p {
    margin: 0 0 10px;
}

.snkal-dialog-description p:last-child {
    margin-bottom: 0;
}

.snkal-description-booking-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 15px;
    color: var(--snkal-white) !important;
    background: var(--snkal-orange);
    border: 2px solid var(--snkal-orange);
    border-radius: 9px;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
}

.snkal-description-booking-link:hover,
.snkal-description-booking-link:focus {
    color: var(--snkal-white) !important;
    background: var(--snkal-orange-dark);
    border-color: var(--snkal-orange-dark);
}

.snkal-description-booking-link--locked {
    color: #514b46 !important;
    background: #e2ddd7;
    border-color: #c5c0ba;
    cursor: not-allowed;
}

.snkal-dialog-notice {
    margin: 18px 0 0;
    padding: 12px 14px;
    border-radius: 9px;
}

.snkal-dialog-notice:empty {
    display: none;
}

.snkal-dialog-notice--locked {
    background: #e2ddd7;
    border-left: 4px solid var(--snkal-locked);
}

.snkal-dialog-notice--info {
    background: #fff8ed;
    border-left: 4px solid var(--snkal-orange);
}

.snkal-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.snkal-dialog-actions form {
    margin: 0;
}

.snkal-book-button,
.snkal-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 10px;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.snkal-book-button[hidden] {
    display: none;
}

.snkal-book-button {
    color: var(--snkal-white) !important;
    background: var(--snkal-orange);
    border: 2px solid var(--snkal-orange);
}

.snkal-book-button:hover,
.snkal-book-button:focus {
    color: var(--snkal-white) !important;
    background: var(--snkal-orange-dark);
    border-color: var(--snkal-orange-dark);
}

.snkal-secondary-button {
    color: var(--snkal-brown-dark);
    background: transparent;
    border: 2px solid var(--snkal-brown);
}

@media (max-width: 767px) {
    .snkal-shell {
        padding: 16px 10px;
        border-radius: 14px;
    }

    .snkal-intro {
        display: block;
    }

    .snkal-legend {
        margin-top: 13px;
    }

    .snkal-calendar .fc-header-toolbar {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
    }

    .snkal-calendar .fc-toolbar-chunk:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 1;
        text-align: center;
    }

    .snkal-calendar .fc-toolbar-chunk:nth-child(1) {
        grid-column: 1;
        grid-row: 2;
    }

    .snkal-calendar .fc-toolbar-chunk:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }

    .snkal-calendar .fc-button {
        padding: 0.38em 0.55em;
        font-size: 0.78rem;
    }

    .snkal-calendar .fc-timegrid-slot-label {
        font-size: 0.72rem;
    }

    .snkal-dialog {
        padding: 26px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .snkal-shell *,
    .snkal-dialog * {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}