/* ============================================================
       BOOKING STEP 1
       --b unit system (same as about.blade.php / top.blade.php)
       PC design: 1366px → --b = calc(100vw / 136.6)  [1unit ≈ 10px]
       SP design: 393px  → --b = calc(100vw / 39.3)   [1unit ≈ 10px]
       PC is default; SP overrides --b in @media (max-width: 1024px)
    ============================================================ */

    .bk-page {
        min-height: 100vh;
        padding-top: calc(5.8 * var(--b));
        --b: calc(100vw / 136.6);
    }

    .bk-page * {
        box-sizing: border-box;
    }

    .bk-page img {
        display: block;
        max-width: 100%;
    }

    /* ── MV ── */
    .bk-mv {
        background: #E5E4D5;
        padding: calc(3.3 * var(--b)) calc(12 * var(--b)) calc(6 * var(--b));
    }

    .bk-mv__inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: calc(3 * var(--b));
    }

    .bk-mv__heading {
        display: flex;
        flex-direction: column;
        gap: calc(1.2 * var(--b));
        flex: 1;
    }

    .bk-mv__h1 {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        gap: calc(1.2 * var(--b));
    }

    .bk-mv__title {
        font-family: new-spirit, serif;
        font-weight: 500;
        font-size: calc(4.8 * var(--b));
        line-height: 100%;
        color: #212227;
    }

    .bk-mv__label {
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 400;
        font-size: calc(1.4 * var(--b));
        line-height: 170%;
        letter-spacing: 0.03em;
        color: #212227;
    }

    .bk-mv__subtitle {
        font-family: new-spirit, serif;
        font-weight: 500;
        font-size: calc(3.2 * var(--b));
        line-height: 100%;
        color: #212227;
    }

    /* ── Step indicator ── */
    .bk-steps {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: calc(8 * var(--b));
        flex-shrink: 0;
    }

    .bk-steps__line {
        position: absolute;
        top: calc(1.375 * var(--b));
        left: 50%;
        transform: translateX(-50%);
        width: calc(43.8 * var(--b));
        height: 0;
        border-top: 1px solid #D1D0C1;
        pointer-events: none;
        z-index: 0;
    }

    .bk-step {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(0.4 * var(--b));
    }

    .bk-step__circle {
        width: calc(2.8 * var(--b));
        height: calc(2.8 * var(--b));
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .bk-step__circle--active {
        background: #FFFFFF;
        border: 1px solid #212227;
        box-sizing: border-box;
    }

    .bk-step__circle--inactive {
        background: #D1D0C1;
    }

    .bk-step__num {
        font-family: 'Shippori Mincho', serif;
        font-weight: 500;
        font-size: calc(1.4 * var(--b));
        line-height: 100%;
        text-align: center;
        letter-spacing: 0.03em;
        transform: translateY(calc(-0.1 * var(--b)));
    }

    .bk-step__circle--active .bk-step__num {
        color: #212227;
    }

    .bk-step__circle--inactive .bk-step__num {
        color: #FFFFFF;
    }

    .bk-step__label {
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 400;
        font-size: calc(1.2 * var(--b));
        line-height: 130%;
        text-align: center;
        white-space: nowrap;
    }

    .bk-step--active .bk-step__label {
        color: #212227;
    }

    .bk-step--inactive .bk-step__label {
        color: #8E8E8E;
    }

    /* ── Content ── */
    .bk-content {
        background: #EDECE2;
        padding: calc(6 * var(--b)) calc(12 * var(--b)) calc(10 * var(--b));
        display: flex;
        flex-direction: column;
        gap: calc(4 * var(--b));
    }

    .bk-container {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: calc(6 * var(--b));
    }

    /* ── Sub-heading ── */
    .bk-subhead {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: calc(0.4 * var(--b));
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 500;
        font-size: calc(2.2 * var(--b));
        line-height: 170%;
        letter-spacing: 0.03em;
        color: #212227;
        margin-bottom: calc(2 * var(--b));
        justify-content: center;
    }

    .bk-subhead svg {
        flex-shrink: 0;
        width: calc(2.6 * var(--b));
        height: calc(2.6 * var(--b));
    }

    /* ── Calendar column ── */
    .bk-calendar-col {
        width: calc(72 * var(--b));
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
    }

    .bk-calendars {
        display: flex;
        flex-direction: row;
        gap: calc(2 * var(--b));
    }

    /* ── Month ── */
    .bk-month {
        width: calc(35 * var(--b));
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: calc(1 * var(--b));
    }

    .bk-month__header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: calc(3.4 * var(--b));
        position: relative;
    }

    .bk-month__title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 400;
        font-size: calc(1.4 * var(--b));
        line-height: 170%;
        letter-spacing: 0.03em;
        color: #212227;
        pointer-events: none;
    }

    .bk-month__nav {
        width: calc(3.4 * var(--b));
        height: calc(3.4 * var(--b));
        border: none;
        background: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: background 0.15s;
        flex-shrink: 0;
    }

    .bk-month__nav svg {
        width: calc(1.6 * var(--b));
        height: calc(1.6 * var(--b));
    }

    .bk-month__nav:hover {
        background: rgba(33, 34, 39, 0.07);
    }

    .bk-month__nav--hidden {
        visibility: hidden;
        pointer-events: none;
    }

    /* Weekday headers */
    .bk-weekdays {
        display: flex;
        flex-direction: row;
        padding-bottom: 0;
    }

    .bk-weekday {
        width: calc(5 * var(--b));
        text-align: center;
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 500;
        font-size: calc(1.1 * var(--b));
        line-height: calc(1.3 * var(--b));
        color: #8E8E8E;
    }

    /* Calendar grid */
    .bk-grid {
        display: flex;
        flex-direction: column;
        margin-top: calc(-0.6 * var(--b));
    }

    .bk-row {
        display: flex;
        flex-direction: row;
        border-bottom: 1px solid #E5E4D5;
    }

    .bk-cell {
        width: calc(5 * var(--b));
        height: calc(6 * var(--b));
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: calc(0.8 * var(--b)) 0 calc(1 * var(--b));
        box-sizing: border-box;
        border-right: 1px solid #D1D0C1;
        background: #FAF9F2;
        flex-shrink: 0;
        position: relative;
    }

    .bk-cell:last-child {
        border-right: none;
    }

    .bk-cell--available {
        background: #FFFFFF;
        cursor: pointer;
    }

    .bk-cell--available:hover {
        background: #F5F4EC;
    }

    .bk-cell--in-range {
        background: rgba(33, 34, 39, 0.06) !important;
    }

    .bk-cell--selected {
        background: #FFFFFF !important;
    }

    .bk-cell__date {
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 500;
        font-size: calc(1.1 * var(--b));
        line-height: 100%;
        color: #8E8E8E;
        width: calc(1.8 * var(--b));
        height: calc(1.8 * var(--b));
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        position: relative;
        z-index: 1;
    }

    .bk-cell--selected .bk-cell__date {
        background: #212227;
        border-radius: 50%;
        color: #FFFFFF;
    }

    .bk-cell--available .bk-cell__date {
        color: #8E8E8E;
    }

    .bk-cell--in-range .bk-cell__date {
        color: #444444;
    }

    .bk-cell__price {
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 400;
        font-size: calc(1 * var(--b));
        line-height: 170%;
        text-align: center;
        color: #8E8E8E;
        margin-top: calc(0.2 * var(--b));
        width: calc(4.2 * var(--b));
    }

    .bk-cell--selected .bk-cell__price {
        color: #212227;
    }

    .bk-cell__unavail {
        margin-top: calc(0.8 * var(--b));
        width: calc(1.5 * var(--b));
        height: calc(1.5 * var(--b));
        position: relative;
        flex-shrink: 0;
    }

    .bk-cell__unavail::before,
    .bk-cell__unavail::after {
        content: '';
        position: absolute;
        width: 1px;
        height: calc(1.5 * var(--b));
        background: #D1D0C1;
        top: 0;
        left: calc(0.7 * var(--b));
        transform-origin: center;
    }

    .bk-cell__unavail::before {
        transform: rotate(45deg);
    }

    .bk-cell__unavail::after {
        transform: rotate(-45deg);
    }

    /* ── Guest count column ── */
    .bk-people-col {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: calc(5 * var(--b));
    }

    .bk-people-section {
        display: flex;
        flex-direction: column;
    }

    .bk-guest-list {
        display: flex;
        flex-direction: column;
        gap: calc(1 * var(--b));
    }

    .bk-guest-row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        min-height: calc(4 * var(--b));
    }

    .bk-guest-label {
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 400;
        font-size: calc(1.4 * var(--b));
        line-height: 150%;
        color: #212227;
        flex: 1;
        padding-right: calc(2 * var(--b));
    }

    .bk-divider {
        width: 100%;
        height: 0;
        border-top: 1px dashed #D1D0C1;
    }

    .bk-annotation {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: calc(0.2 * var(--b));
        margin-top: calc(2.5 * var(--b));
    }

    .bk-annotation__mark {
        font-family: 'Noto Sans JP', sans-serif;
        font-size: calc(1.2 * var(--b));
        line-height: 170%;
        letter-spacing: 0.03em;
        color: #212227;
        flex-shrink: 0;
    }

    .bk-annotation__text {
        font-family: 'Noto Sans JP', sans-serif;
        font-size: calc(1.2 * var(--b));
        line-height: 170%;
        letter-spacing: 0.03em;
        color: #212227;
    }

    .bk-annotation__text a {
        color: #212227;
        text-decoration: underline;
    }

    /* ── Stepper ── */
    .bk-stepper {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: calc(0.8 * var(--b));
        flex-shrink: 0;
    }

    .bk-stepper__btn {
        width: calc(2 * var(--b));
        height: calc(2 * var(--b));
        border-radius: 50%;
        background: #212227;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.2s;
        flex-shrink: 0;
        padding: 0;
        touch-action: manipulation;
    }

    .bk-stepper__btn svg {
        width: calc(1.1 * var(--b));
        height: calc(1.1 * var(--b));
    }

    .bk-stepper__btn:hover {
        opacity: 0.75;
    }

    .bk-stepper__btn:disabled {
        opacity: 0.3;
        cursor: default;
    }

    .bk-stepper__val {
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 400;
        font-size: calc(2.6 * var(--b));
        line-height: 150%;
        text-align: center;
        letter-spacing: 0.03em;
        color: #212227;
        min-width: calc(5.4 * var(--b));
    }

    /* ── Action buttons ── */
    .bk-actions {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: calc(2 * var(--b));
    }

    .bk-btn {
        height: calc(4.6 * var(--b));
        padding: 0 calc(2.8 * var(--b));
        border-radius: 9999px;
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 400;
        font-size: calc(1.4 * var(--b));
        line-height: 100%;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: calc(9.6 * var(--b));
        text-decoration: none;
        box-sizing: border-box;
    }

    @media (hover: hover) and (pointer: fine) {
        .bk-btn--outline:hover { background: #212227; color: #FFFFFF; }
        .bk-btn--fill:not(:disabled):hover { background: transparent; color: #212227; border: 1px solid #212227; }
    }

    .bk-btn--outline {
        border: 1px solid #212227;
        background: transparent;
        color: #212227;
    }

    .bk-btn--fill {
        border: none;
        background: #212227;
        color: #FFFFFF;
    }

    .bk-btn--fill:disabled {
        background: #D1D0C1;
        color: #8E8E8E;
        cursor: not-allowed;
        opacity: 1;
    }

    /* ── Responsive ── */
    @media (max-width: 1024px) {
        .bk-page {
            --b: calc(100vw / 39.3);
        }

        .bk-mv {
            padding: calc(3.3 * var(--b)) calc(2 * var(--b)) calc(4 * var(--b));
        }

        .bk-mv__inner {
            flex-direction: column;
            align-items: flex-start;
            gap: calc(2.4 * var(--b));
        }

        .bk-steps {
            gap: 0;
            width: calc(100% + 4 * var(--b));
            margin-left: calc(-2 * var(--b));
        }

        .bk-step {
            flex: 1;
        }

        .bk-steps__line {
            left: 12.5%;
            right: 12.5%;
            width: auto;
            transform: none;
            top: calc(1.8 * var(--b));
        }

        .bk-step__circle { width: calc(3.6 * var(--b)); height: calc(3.6 * var(--b)); }
        .bk-step__num { font-size: calc(1.8 * var(--b)); }
        .bk-step__label { font-size: calc(1.4 * var(--b)); }

        .bk-content {
            padding: calc(4 * var(--b)) calc(2 * var(--b)) calc(6 * var(--b));
        }

        .bk-container {
            flex-direction: column;
        }

        .bk-calendar-col {
            width: 100%;
        }

        .bk-calendars {
            flex-direction: column;
            gap: calc(3 * var(--b));
        }

        .bk-month {
            width: 100%;
        }

        .bk-weekday {
            width: calc(100% / 7);
        }

        .bk-cell {
            width: calc(100% / 7);
        }

        .bk-btn {
            min-width: calc(16 * var(--b));
        }

        .bk-people-col:has(.bk-pet-section.is-open) {
            gap: 0;
        }
    }

    /* ── Calendar subhead: centered + discount ── */
    .bk-calendar-col .bk-subhead {
        flex-direction: column;
        align-items: center;
        gap: calc(0.6 * var(--b));
    }

    .bk-subhead__main {
        display: flex;
        align-items: center;
        gap: calc(0.4 * var(--b));
    }

    .bk-subhead__discount {
        font-family: 'Noto Sans JP', sans-serif;
        font-size: calc(1.4 * var(--b));
        font-weight: 400;
        line-height: 170%;
        letter-spacing: 0.03em;
        color: #212227;
    }

    /* ── Calendar months: PC only ── */
    @media (min-width: 1025px) {
        .bk-calendars {
            gap: calc(2 * var(--b));
        }

        .bk-month:first-child .bk-month__nav:last-child {
            visibility: hidden;
            pointer-events: none;
        }
    }

    /* ── Range selection border-box ── */
    .bk-cell--in-range,
    .bk-cell--range-start,
    .bk-cell--range-end {
        background: #FFFFFF !important;
    }

    .bk-cell--range-end {
        border-right: none !important;
    }

    .bk-cell--range-start::before,
    .bk-cell--in-range::before,
    .bk-cell--range-end::before {
        content: '';
        position: absolute;
        top: -1px;
        bottom: -1px;
        left: 0;
        right: 0;
        border-top: 1px solid #212227;
        border-bottom: 1px solid #212227;
        z-index: 2;
        pointer-events: none;
    }

    .bk-cell--range-start::before {
        border-left: 1px solid #212227;
        border-radius: 4px 0 0 4px;
    }

    .bk-cell--range-end::before {
        right: -1px;
        border-right: 1px solid #212227;
        border-radius: 0 4px 4px 0;
    }

    .bk-cell--range-start .bk-cell__date,
    .bk-cell--range-end .bk-cell__date {
        color: #444444;
    }

    .bk-cell--range-start .bk-cell__price,
    .bk-cell--range-end .bk-cell__price {
        color: #212227;
    }

    .bk-cell--in-range .bk-cell__date {
        color: #444444;
    }

    .bk-cell--in-range .bk-cell__price {
        color: #212227;
    }

    .bk-cell--hover-range {
        background: rgba(33, 34, 39, 0.04) !important;
    }

    /* ── Pet toggle button ── */
    .bk-pet-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: calc(0.8 * var(--b));
        width: 100%;
        padding: calc(1.2 * var(--b)) calc(2 * var(--b));
        border-radius: 9999px;
        background: #FFFFFF;
        font-family: 'Noto Sans JP', sans-serif;
        font-size: calc(1.4 * var(--b));
        font-weight: 400;
        color: #212227;
        cursor: pointer;
        transition: background 0.2s, color 0.2s, opacity 0.2s;
        box-sizing: border-box;
    }

    .bk-pet-toggle-btn svg {
        width: calc(1.6 * var(--b));
        height: calc(1.6 * var(--b));
    }

    .bk-pet-toggle-btn:hover {
        opacity: 0.75;
    }

    .bk-pet-toggle-btn--open {
        display: none;
    }

    .bk-pet-section {
        display: none;
        flex-direction: column;
        margin-top: calc(2 * var(--b));
    }

    .bk-pet-section.is-open {
        display: flex;
    }

    /* ── SP: one month at a time ── */
    @media (max-width: 768px) {
        .bk-month:last-child {
            display: none;
        }
    }

    /* ── Filler cells ── */
    .bk-cell--filler {
        background: #FAF9F2;
        cursor: default;
    }

    .bk-cell--filler .bk-cell__date {
        color: #D1D0C1;
    }

    .bk-cell--available.bk-cell--limited {
        background-color: rgba(255, 0, 0, 0.1) !important;
    }

    .bk-cell--available.bk-cell--limited:hover {
        background-color: rgba(255, 0, 0, 0.15) !important;
    }

    /* ── Calendar footer (note + legend) ── */
    .bk-cal-footer {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: calc(1.2 * var(--b));
    }

    .bk-cal-note {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: calc(0.2 * var(--b));
    }

    .bk-cal-legend {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: calc(0.8 * var(--b));
    }

    .bk-cal-legend__swatch {
        width: calc(1.6 * var(--b));
        height: calc(1.6 * var(--b));
        background: rgba(255, 0, 0, 0.1);
        flex-shrink: 0;
    }

    .bk-cal-legend__text {
        font-family: 'Noto Sans JP', sans-serif;
        font-size: calc(1.1 * var(--b));
        color: #444;
    }