/* Explain: Styles for modals, the reviews carousel, language switcher, and admin gear button. */
/* Booking modal: allow labels to wrap when Google Translate expands them
   into longer languages (e.g. Greek) instead of overflowing / overlapping */
.modal .label {
    white-space: normal;
    align-items: flex-start;
    line-height: 1.35;
    height: auto;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.modal .label > span {
    display: block;
    overflow-wrap: anywhere;
}

/* Keep the two date/time columns from being pushed wider than their cell */
.modal fieldset {
    min-width: 0;
}

/* Reviews auto-rotating carousel */
.reviews-swiper .swiper-slide {
    height: auto;
}

.reviews-swiper .swiper-pagination-bullet-active {
    background: var(--primary-color);
}

.reviews-swiper .swiper-button-next,
.reviews-swiper .swiper-button-prev {
    color: var(--primary-color);
}

/* Smoother glide between review slides */
.reviews-swiper .swiper-wrapper {
    transition-timing-function: cubic-bezier(0.45, 0.05, 0.25, 1);
}

/* Language switcher: hide the native <details> marker */
.lang-switch > summary {
    list-style: none;
}
.lang-switch > summary::-webkit-details-marker {
    display: none;
}

/* Booking modal: solid white surfaces so the page behind never shows through */
.modal .modal-box,
dialog.modal .modal-box {
    background-color: #ffffff !important;
    opacity: 1 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.modal .input,
.modal .select,
.modal .textarea {
    background-color: #ffffff !important;
}

/* Solid white option panels: dropdown menus and select inputs must never
   show the page background through them */
.dropdown-content,
.menu.dropdown-content {
    background-color: #ffffff !important;
}

.select {
    background-color: #ffffff !important;
}

/* Footer admin gear: everyone can SEE it, but it is clickable ONLY for the
   store owner (after the 6-digit code has been entered once in this browser).
   For every visitor pointer-events is off, so it never reacts to click or tap
   and any tap simply passes through to the footer text behind it. */
#adminGearBtn {
    pointer-events: none !important;
    cursor: default;
}

/* Added by JS only in the owner's browser, after a successful unlock. */
#adminGearBtn.admin-gear-active {
    pointer-events: auto !important;
    cursor: pointer;
}