/**
 * RoomPlaza — Global refinement layer
 *
 * Load order (Header.tpl):
 *   1. screen.css      — compiled base bundle (utilities, layout, pages, jQuery UI)
 *   2. refinement-layer.css — this file; global post-base refinements
 *
 * Purpose
 * -------
 * Central place for visual polish and overrides after the main stylesheet.
 * Prefer adding new global UI updates here instead of editing screen.scss /
 * screen.css, so refinements stay isolated and easy to iterate on.
 *
 * Guidelines
 * ----------
 * - Use :root tokens (--rp-*) for shared radius/spacing values.
 * - Scope page-specific rules under .view-* wrappers where possible.
 * - Exclude third-party UI (e.g. [class*="gm-"]) when overriding globals.
 * - Full-bleed sections (header, footer, hero video) intentionally stay square.
 *
 * @layer refinement — conceptual layer name; loaded as separate file after base
 *   (not wrapped in CSS @layer, so overrides keep expected cascade priority).
 */

:root {
    --rp-r-0: 0;
    --rp-r-1: 0.5rem;
    --rp-r-2: 0.75rem;
    --rp-r-3: 1rem;
    --rp-r-4: 1.25rem;
    --rp-r-5: 1.5rem;
    --rp-r-6: 2rem;
    --rp-r-pill: 9999px;

    --rp-radius-control: var(--rp-r-2);
    --rp-radius-surface: var(--rp-r-4);
    --rp-radius-overlay: var(--rp-r-5);
    --rp-radius-hero: var(--rp-r-6);
    --rp-radius-pill: var(--rp-r-pill);

    --rp-r-margin: .5rem;

    /* FAQ — tinted neutrals aligned with RoomPlaza red (#f73329) */
    --faq-ink: oklch(0.28 0.015 25);
    --faq-ink-muted: oklch(0.52 0.012 25);
    --faq-surface: oklch(0.995 0.004 25);
    --faq-surface-hover: oklch(0.975 0.006 25);
    --faq-border: oklch(0.90 0.008 25);
    --faq-accent: oklch(0.58 0.22 25);
    --faq-accent-ink: oklch(0.99 0.004 25);
    --faq-ease-out: cubic-bezier(0.25, 1, 0.5, 1);
    --faq-duration-open: 220ms;
    --faq-duration-close: 165ms;
}

/* ---------- Form controls ---------- */
button:not([class*="gm-"]), /* Exclude Google Maps UI */
input,
select,
textarea,
.keygen,
output,
.dropdown,
#search-filter-form div[data-bind] {
    border-radius: var(--rp-radius-control) !important;
}

input[type="checkbox"] {
    border-radius: var(--rp-r-1);
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="file"] {
    border-radius: var(--rp-radius-control);
}

/* ---------- Home: centered search bar only ---------- */
.view-home form.content > div {
    border-radius: var(--rp-radius-hero);
    label {
        border-radius: var(--rp-radius-control) !important;
    }
}

.view-home form.content > div > button {
    border-radius: var(--rp-r-0);
}

.view-home .dropdown,
.view-home form.content .dropdown {
    border-radius: var(--rp-radius-control);
}

/* Dropdown menus (city, etc.) */
.dropdown ul {
    border-radius: var(--rp-radius-surface);
    overflow: hidden;
}

/* ---------- Search: full-width filter strip ---------- */
.filter,
form.setFilters,
#search-filter-form {
    border-radius: var(--rp-r-0);
}

.filter .dropdown,
.setFilters .dropdown {
    border-radius: var(--rp-radius-control);
}

/* PLP - Search listing */
.tag,
.tag-right {
    border-radius: var(--rp-r-4);
    margin: .5rem;
}

.semester-error .content {
    border-radius: var(--rp-r-6);
}

.view.view-overview .accommodations .filter div:last-child,
.submit {
    border-radius: var(--rp-radius-control) !important;
}

.pagination {
    border-radius: var(--rp-radius-control);
}

.pagination a,
.pagination strong {
    border-radius: var(--rp-radius-control);
}

.ssQIHO-checkbox-menu-item {
    border-radius: var(--rp-radius-control);
}

.apartment-price {
    margin-top: .6rem;
    min-height: initial !important;
    height: initial !important;
    line-height: normal !important;
    padding: 0 !important;
    color: black !important;
    font-weight: 600;
    font-size: 1rem;
    transform: initial !important;
}

[class*="tag"]:has(img) {
    background-color: color-mix(in oklab, white, transparent 50%) !important;
}

/* ---------- Cards & media (non-slider, non–full-bleed) ---------- */
figure,
.accommodations-item-container,
.accommodations-item-container a,
.feature-item,
.feature-item-container,
.images .image-container,
.house-info,
.general-info,
.rooms-info,
.videoWrapper,
.apartment-video,
.list-your-property.popup .content {
    border-radius: var(--rp-radius-surface);
    overflow: hidden;
}

figure img,
.accommodations-item-container img,
.feature-item img,
.image-container img,
.gallery-container img,
.lb-image {
    border-radius: inherit;
}

/* Apartment / detail: in-content video block only (not home hero) */
.view-apartment .video-wrapper video,
.apartment-video video {
    border-radius: var(--rp-radius-surface);
}

.general-info {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.house-info {
    /* Month select */
    .dropdown {
        border-radius: 0 !important;
    }
    /* Enquiry button */
    input[type="submit"] {
        border-radius: var(--rp-r-pill) !important;
        width: calc(100% - var(--rp-r-margin) * 2) !important;
    }
}

.booking-info li:has(input) {
    margin: var(--rp-r-margin) !important;
}

/* ---------- After login ---------- */

.person a {
    border-radius: var(--rp-radius-control);
}

.fb-login {
    border-radius: var(--rp-radius-control);
}

/* ---------- Full-width / bleed sections — not rounded ---------- */
.main-header,
.main-footer,
.mobile-menu,
.promo,
.cookies,
.cookies-item-container,
.mandatory.view {
    border-radius: var(--rp-r-0);
}

.main-footer table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--rp-r-0);
    overflow: visible;
}

.main-footer td,
.main-footer th {
    border-radius: 0;
}

.view-home .head,
.view-home .overlay,
.view-home .video-wrapper,
.view-home .video-wrapper video,
.view-home #video,
.view-home .features,
.view-home .recommendations,
.accommodations,
.map,
.map-container,
.view-apartment .head,
.sub-footer {
    border-radius: var(--rp-r-0);
}

.view-about .section,
.container.section,
.wrapper .content {
    border-radius: var(--rp-r-0);
}

/* ---------- Slider / carousel — not rounded ---------- */
.recommendation-slider,
.recommendation-slider figure,
.recommendation-item-container,
.recommendation-item,
.slider-container,
.slider,
.slider-item-container,
.slider-item {
    border-radius: var(--rp-r-0);
    overflow: visible;
}

.recommendation-slider img,
.recommendation-item img,
.slider img,
.slider-item img,
.recommendation-slider figure img,
.slider figure img,
.slider-item figure img {
    border-radius: var(--rp-r-0);
}

/* ---------- Popups / modals ---------- */
.video-popup,
.featured-popup {
    border-radius: var(--rp-radius-overlay);
    overflow: hidden;
}

.featured-popup .center,
.video-popup .center {
    border-radius: inherit;
    overflow: hidden;
}

.popup .content {
    border-radius: var(--rp-radius-overlay);
}

/* Form tables inside landlord / enquiry popups */
.list-your-property.popup table,
.enquiry-popup table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--rp-radius-control);
}

/* ---------- Apartment: misc controls ---------- */
.cost,
.tooltip,
.icon.showNextPhoto,
.icon.showPreviousPhoto,
.showNextPhoto,
.showPreviousPhoto {
    border-radius: var(--rp-radius-control);
}

/* ---------- Register / login extras ---------- */
.fb-login,
.fb-link,
.fb-warning,
.picture,
.ui-widget {
    border-radius: var(--rp-radius-control);
}

.form-group input,
.form-group select,
.form-group textarea,
.information-form input,
.information-form select,
.information-form textarea {
    border-radius: var(--rp-radius-control);
}

/* Content pages: boxed info (about / join) */
.view-about .info,
.view-joinus .info {
    border-radius: var(--rp-radius-surface);
    overflow: hidden;
}

/* Partners / legal CTA blocks */
.view .button {
    border-radius: var(--rp-radius-control);
}

/* ---------- Pagination (nav) ---------- */
nav a[href*="search/home"] {
    border-radius: var(--rp-radius-control);
}

/* ---------- Cookie ---------- */
.accept-button {
    border-radius: var(--rp-radius-pill);
}

button[type="submit"]:not(.view-home form.content button):not(.setFilters button) {
    border-radius: var(--rp-radius-pill);
}

/* ---------- Lightbox ---------- */
.lightboxOverlay {
    border-radius: 0;
}

.lightbox,
.lb-outerContainer,
.lb-container,
.lb-dataContainer {
    border-radius: var(--rp-radius-overlay);
    overflow: hidden;
}

.lb-close,
.lb-prev,
.lb-next {
    border-radius: var(--rp-radius-control);
}

/* ---------- jQuery UI ---------- */
.ui-widget,
.ui-widget-content,
.ui-widget-header,
.ui-menu,
.ui-autocomplete,
.ui-datepicker,
.ui-datepicker-calendar td,
.ui-datepicker-calendar th,
.ui-dialog,
.ui-dialog-titlebar {
    border-radius: var(--rp-radius-control);
}

.ui-dialog {
    border-radius: var(--rp-radius-overlay);
    overflow: hidden;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-right {
    border-radius: var(--rp-radius-control);
}

/* ---------- Third-party menus (not Google Maps) ---------- */
[class*="checkbox-menu"],
[role="menu"],
[role="listbox"] {
    border-radius: var(--rp-radius-surface);
}

/* Dropdown tweaks */
.dropdown {
    border-color: #CCC !important;
    color: black !important;
    span.disabled {
        color: #999 !important;
    }
}

/* ---------- FAQ page ---------- */
.view-faq {
    padding: 95px clamp(20px, 5vw, 50px);
    background: #f1f1f1;

    .container {
        max-width: 100%;
        width: 1280px;
        margin: 0 auto;

        .content {
            color: var(--faq-ink);

            & > nav.pagination {
                margin-top: clamp(1.5rem, 3vw, 2.5rem);
                text-align: center;
            }
        }
    }

    .faq-header {
        margin: 0 0 clamp(1.25rem, 2vw, 2rem);
        padding: 0;

        h2 {
            margin: 0;
            font-size: clamp(1.75rem, 2.5vw, 2.25rem);
            line-height: 1.15;
            letter-spacing: -0.02em;
        }
    }

    .faq-breadcrumbs {
        margin: 0 0 clamp(1rem, 2vw, 1.5rem);

        ol {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.375rem;
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 0.875rem;
            line-height: 1.4;
            color: var(--faq-ink-muted);
        }

        li + li::before {
            content: "/";
            margin-right: 0.375rem;
            color: var(--faq-border);
        }

        a {
            color: var(--faq-ink-muted);
            text-decoration: none;

            &:hover {
                color: var(--faq-accent);
            }
        }

        li[aria-current="page"] {
            color: var(--faq-ink);
            font-weight: 600;
        }
    }

    .faq-category-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: clamp(0.75rem, 1.5vw, 1rem);
    }

    .faq-category-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.875rem;
        padding: clamp(1.5rem, 2.5vw, 2rem);
        border: none;
        border-radius: var(--rp-radius-surface);
        background: white;
        color: inherit;
        text-align: center;
        text-decoration: none;
        transition:
            box-shadow var(--faq-duration-close) var(--faq-ease-out),
            transform var(--faq-duration-close) var(--faq-ease-out);

        &:hover {
            box-shadow: 0 8px 24px oklch(0.28 0.015 25 / 0.1);
            transform: translateY(-2px);

            .faq-category-card-title {
                color: var(--faq-accent);
            }
        }
    }

    .faq-category-card-image {
        display: block;
        width: 30%;
        max-width: 320px;
        height: inherit;
        flex-shrink: 0;
        object-fit: contain;
        margin-bottom: 10px;
    }

    .faq-category-card-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        gap: 0.375rem;
        width: 100%;
        min-width: 0;
        text-align: center;
    }

    .faq-category-card-title {
        margin: 0 !important;
        font-size: 1.125rem;
        line-height: 1.35;
        font-weight: 600;
        color: var(--faq-ink);
        transition: color var(--faq-duration-close) var(--faq-ease-out);
    }

    .faq-category-card-description {
        margin: 0;
        font-size: 0.9375rem;
        line-height: 1.5;
        color: var(--faq-ink-muted);
    }

    .faq-category-card-count {
        margin: 0;
        padding-top: 0.5rem;
        font-size: 0.875rem;
        line-height: 1.4;
        color: var(--faq-ink-muted);
    }

    .faq-empty {
        margin: 0;
        color: var(--faq-ink-muted);
        font-size: 1rem;
        line-height: 1.65;
    }

    .faq-list {
        display: flex;
        flex-direction: column;
        background: white;
        border-radius: var(--rp-radius-surface);
        overflow: hidden;
    }

    .faq-item {
        border-bottom: 1px solid var(--faq-border);

        &:last-child {
            border-bottom: none;
        }

        &[open] .faq-item-indicator::before {
            content: "−";
            transform: scale(0.92);
        }
    }

    .faq-item-question {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: clamp(0.875rem, 1.5vw, 1.125rem) clamp(1.5rem, 3vw, 2.25rem);
        font-size: clamp(1rem, 1.25vw, 1.0625rem);
        line-height: 1.4;
        font-weight: 600;
        color: var(--faq-ink);
        cursor: pointer;
        list-style: none;
        transition: color var(--faq-duration-close) var(--faq-ease-out);

        &::-webkit-details-marker {
            display: none;
        }

        &::marker {
            content: "";
        }

        &:hover {
            color: var(--faq-accent);

            .faq-item-indicator {
                color: var(--faq-accent);
            }
        }
    }

    .faq-item-question-text {
        flex: 1;
        min-width: 0;
    }

    .faq-item-indicator {
        flex-shrink: 0;
        width: 1rem;
        font-size: 1.125rem;
        line-height: 1;
        text-align: center;
        color: var(--faq-ink-muted);
        transition: color var(--faq-duration-close) var(--faq-ease-out);

        &::before {
            content: "+";
            display: inline-block;
            transition: transform var(--faq-duration-close) var(--faq-ease-out);
        }
    }

    .faq-item-body {
        max-width: 72ch;
        padding: 0 clamp(1.5rem, 3vw, 2.25rem) clamp(0.875rem, 1.5vw, 1.125rem);
        color: var(--faq-ink-muted);

        * {
            font-size: 1rem;
            line-height: 1.65;
            font-family: 'neuzeit-regular', sans-serif;
        }

        p {
            margin: 0 0 0.75rem;

            &:last-child {
                margin-bottom: 0;
            }
        }

        a {
            color: var(--faq-accent);
            text-decoration: underline;
            text-underline-offset: 0.15em;

            &:hover {
                color: color-mix(in oklab, var(--faq-accent), var(--faq-ink) 20%);
            }
        }
    }

    @media (max-width: 640px) {
        .container {
            padding-top: 3.5rem;
            padding-bottom: 3.5rem;
        }

        .faq-category-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .faq-item-question,
        .faq-item-indicator,
        .faq-item-indicator::before,
        .faq-category-card,
        .faq-category-card-title {
            transition: none;
        }

        .faq-category-card:hover {
            transform: none;
        }
    }
}

@supports (interpolate-size: allow-keywords) {
    .view-faq {
        interpolate-size: allow-keywords;
    }
}

@supports (content-visibility: auto) {
    .view-faq .faq-item::details-content {
        block-size: 0;
        overflow: hidden;
        opacity: 0;
        content-visibility: auto;
        transition:
            block-size var(--faq-duration-open) var(--faq-ease-out),
            opacity var(--faq-duration-close) var(--faq-ease-out);
    }

    .view-faq .faq-item[open]::details-content {
        block-size: auto;
        opacity: 1;
    }
}