html {
    overflow-y: auto;
}

html:has(#search .f-modal.is-active) [data-anchor-nav] {
    display: none;
}

#search {
    --search-font-size-base: 14px;

    .JTB-un_searchPanels * {
        font-size: var(--search-font-size-base);
    }

    .JTB-un_searchPanels {
        padding-top: 0;
        background: transparent;
    }

    .search-tab {
        box-sizing: border-box;
        width: 100%;
        position: relative;
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 5px;
        font-size: var(--search-font-size-base);
    }

    .search-tab-bt {
        font-size: 12px;
        text-align: start;

        em {
            display: block;
            font-style: normal;
            font-weight: 700;
            font-size: var(--search-font-size-base);

            @media (max-width: 768px) {
                font-size: 12px;
            }
        }

        span {
            display: block;
            margin-top: 2px;
            font-size: 12px;
        }
    }

    .search-tab__list,
    .JTB-el_tab__wrapper {
        display: flex;
        align-items: center;
    }

    .JTB-el_tab__trigger {
        position: relative;
        flex: 1;
        background: #ececec;

        &.is-focused {
            background: var(--white);

            .search-tab-bt,
            .search-tab-bt em,
            .search-tab-bt span {
                color: var(--primary-blue);
            }
        }

        &::after {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: 2px;
            transform: scaleX(0);
            transform-origin: left;
            background: linear-gradient(112deg, var(--primary-blue), #52c8ff);
            content: "";
        }

        &.is-focused::after {
            transform: scaleX(1);
        }

        a {
            display: flex;
            min-width: 115px;
            align-items: center;
            justify-content: center;
            padding: 10px 20px;
            border-top: 0;
            color: var(--primary-black);
            background: transparent;
            cursor: pointer;
            text-align: center;
            white-space: nowrap;

            &:hover {
                background: var(--white);
                text-decoration: none;
            }
        }
    }

    .JTB-el_tab__body {
        position: relative;
        overflow: visible;
        margin: 0;
    }

    .search-tab__box {
        position: relative;
        padding: 24px 0 16px;
        background: var(--white);

        &:not([hidden]) {
            display: block;
        }
    }

    label[for="traintop_check2"],
    label[for="airtop_check2"],
    .hotel-tabbox .f-top-reserve {
        margin-left: 0;
    }

    .search-gadget-disabled {
        margin: 0;
        padding: 24px;
        color: var(--dark-gray);
        text-align: center;
        background: var(--white);
    }

    .kkrs-search-label,
    legend.f-form-label-on-input {
        font-size: var(--search-font-size-base);
        font-weight: 700 !important;
    }

    .kkrs-search-label {
        background: var(--white);

        &::after {
            font-size: .9em;
        }
    }

    .kkrs-error-message {
        font-size: 12px;
    }

    .kkrs-search-panel .kkrs-select-area-tab__list li,
    .hotel-tabbox .f-modal-checkin__title {
        font-size: var(--search-font-size-base);
    }

    .hotel-tabbox .f-icon {
        font-size: 18px;
    }

    .hotel-tabbox .f-form-checkfield__checkbox,
    .hotel-tabbox .f-form-checkfield__checkbox::before,
    .hotel-tabbox .f-form-checkbox {
        width: 24px !important;
        height: 24px !important;
    }

    .hotel-tabbox .f-form-checkfield__icon {
        left: 50%;
        margin-left: 0;
        transform: translate(-50%, -50%);
        font-size: 20px !important;
        line-height: 1;
    }

    .search-tab__box .kkrs-top-search-section .kkrs-search-item--check .kkrs-form-checkbox label::after {
        left: 12px;
        margin-left: 0;
        transform: translate(-50%, -50%);
        font-size: 20px;
        line-height: 1;
    }

    .hotel-tabbox .f-top-condition__button span {
        font-weight: 700;
    }

    .hotel-tabbox .f-modal .f-icon {
        font-size: 24px;
    }

    .hotel-tabbox .f-top-room {
        display: flex;
        flex-direction: column;
        max-height: min(800px, 48dvh);
    }

    .hotel-tabbox .f-top-room .f-room {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto !important;
    }

    .hotel-tabbox .f-top-room .f-modal-footer {
        position: static;
        flex: 0 0 auto;
    }

    [data-onsen-kodawari] .f-form-button-group {
        justify-content: flex-start;
        gap: 8px 12px;
    }

    [data-onsen-kodawari] .f-form-flexlist__item {
        padding-right: 0;
    }

    @media (max-width: 768px) {
        .f-form-button-group {
            justify-content: space-between;
        }

        [data-onsen-kodawari] .f-form-button-group {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px 12px;
        }

        [data-onsen-kodawari] .f-form-flexlist__item {
            min-width: 0;
        }

        .hotel-tabbox .f-top-reserve {
            margin-top: 16px;
        }

        .hotel-tabbox li.f-form-button-group__item {
            display: flex;
            flex-basis: calc(50% - 6px);
            flex-direction: column;
            max-width: calc(50% - 6px);
            margin-bottom: 8px;
        }

        .hotel-tabbox .f-top-search .f-form-flexlist .f-form-checkfield {
            align-items: center;
            gap: 4px;
            border: none;
            background: #f4f5f5;
        }

        .hotel-tabbox .f-modal-title {
            font-size: var(--search-font-size-base);
        }

        .search-tab {
            padding: 0;
            box-shadow: none;
        }

        .JTB-el_tab__trigger {
            height: 50px;

            a {
                min-width: 0;
                min-height: 46px;
                padding: 8px 4px;
                white-space: normal;
            }
        }

        .search-tab-bt {
            line-height: 1.4;

            span {
                display: none;
            }
        }

        .kkrs-search-item:has(.kkrs-error-message) + .kkrs-search-item {
            margin-top: 24px;
        }
    }

    .f-top-condition__text {
        display: none;
    }

    .kkrs-top-search-submit-btn {
        font-size: 16px;

        span {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            gap: 4px;
            font-weight: 700;

            &::before {
                font-size: 1.5em;
                margin: 0;
            }
        }
    }
}

#search .kkrs-search-big-panel,
#search .kkrs-modal,
#search .f-modal.is-active,
.MuiModal-root.kkrs-modal {
    z-index: 1350;
}