/* =========================================
   TOUR PACKAGE - VIEW MORE
========================================= */

.js-tour-loadmore .tour-card-hidden {
    display: none !important;
}


/* Button wrapper */
.tour-loadmore-control {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: 20px;
    padding-top: 2px;
}


/* Main button */
.tour-loadmore-btn {
    appearance: none;
    -webkit-appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 11px;

    min-width: 205px;
    min-height: 50px;

    padding: 12px 26px;

    background: #ffffff;
    color: #10283a;

    border: 1px solid #cfd9e0;
    border-radius: 50px;

    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 4px 14px rgba(20, 43, 61, 0.07);

    transition:
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


/* Hover */
.tour-loadmore-btn:hover {
    background: #f8fafb;
    border-color: #9db0bd;

    box-shadow:
        0 7px 20px rgba(20, 43, 61, 0.11);

    transform: translateY(-1px);
}


/* Keyboard focus */
.tour-loadmore-btn:focus-visible {
    outline: 3px solid rgba(7, 111, 137, .16);
    outline-offset: 3px;
}


/* Remove old text arrow */
.tour-loadmore-arrow {
    font-size: 0;
    width: 18px;
    height: 18px;

    position: relative;
    flex: 0 0 18px;
}


/* CSS chevron */
.tour-loadmore-arrow::before {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    left: 4px;
    top: 3px;

    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;

    transform: rotate(45deg);

    transition: transform .2s ease;
}


/* Show Less arrow */
.tour-loadmore-btn[aria-expanded="true"]
.tour-loadmore-arrow::before {

    top: 7px;

    transform: rotate(225deg);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .tour-loadmore-control {
        margin-top: 14px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .tour-loadmore-btn {
        min-width: 178px;
        min-height: 46px;

        padding: 11px 22px;

        gap: 9px;

        font-size: 14px;

        box-shadow:
            0 4px 13px rgba(20, 43, 61, 0.08);
    }

}


/* Very small phones */
@media (max-width: 380px) {

    .tour-loadmore-btn {
        min-width: 170px;
        font-size: 13.5px;
    }

}


/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    .tour-loadmore-btn,
    .tour-loadmore-arrow::before {
        transition: none;
    }

}