/* ===== Orania Verblyf — MudBlazor theme overrides & custom styles ===== */
:root {
    --ov-primary: #2f5d3a;
    --ov-primary-dark: #234a2d;
    --ov-accent: #c8a24b;
    --ov-bg: #f7f6f2;
    --ov-text: #25291f;

    /* ===== Fyner spasiëring/radius-skaal (#184 / #116) =====
       'n Konsekwente, digter skaal i.p.v. los "eyeballed" waardes — help om meer
       inligting per skerm te pas, veral op mobiel. */
    --ov-space-1: .25rem;
    --ov-space-2: .5rem;
    --ov-space-3: .75rem;
    --ov-space-4: 1rem;
    --ov-space-5: 1.5rem;
    --ov-space-6: 2rem;
    --ov-radius-sm: 6px;
    --ov-radius-md: 8px;
    --ov-radius-lg: 12px;
    --ov-shadow-subtle: 0 1px 3px rgba(37, 41, 31, .08), 0 1px 2px rgba(37, 41, 31, .06);
    --ov-shadow-card: 0 2px 8px rgba(37, 41, 31, .07);
}

/* ===== WASM loading / splash screen ===== */
.ov-splash {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    gap: 1.25rem;
    background-color: var(--ov-bg);
}

.ov-splash-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.ov-splash-phi {
    color: var(--ov-accent);
    font-size: 2.2rem;
    font-weight: 700;
    font-family: Georgia, serif;
    line-height: 1;
}

.ov-splash-name {
    color: var(--ov-primary);
    font-size: 1.35rem;
    font-weight: 500;
    font-family: "Roboto", system-ui, sans-serif;
}

.ov-splash-loading-text {
    font-size: .9rem;
    color: rgba(37, 41, 31, 0.55);
    font-family: "Roboto", system-ui, sans-serif;
    animation: ov-splash-pulse 1.4s ease-in-out infinite;
}

@keyframes ov-splash-pulse {
    0%, 100% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }
}
/* ===== end splash ===== */

html, body {
    font-family: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
    background-color: var(--ov-bg);
    color: var(--ov-text);
    height: 100%;
}

/* ===== Sticky footer via MudBlazor layout hooks ===== */
.mud-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.mud-main-content {
    display: flex !important;
    flex-direction: column;
    flex: 1;
}

.ov-page-body {
    flex: 1;
}

/* ===== Nav responsive helpers ===== */
.ov-desktop-nav {
    display: none;
}
@media (min-width: 960px) {
    .ov-desktop-nav { display: flex !important; align-items: center; }
}

.ov-mobile-only {
    display: inline-flex !important;
}
@media (min-width: 960px) {
    .ov-mobile-only { display: none !important; }
}

.ov-desktop-only {
    display: none !important;
}
@media (min-width: 960px) {
    .ov-desktop-only { display: inline-flex !important; align-items: center; }
}

/* ===== Branding ===== */
.ov-brand-phi {
    color: var(--ov-accent);
    font-weight: 700;
    font-size: 1.3rem;
}

.ov-brand-icon {
    height: 1.5rem;
    width: auto;
    vertical-align: middle;
    margin-right: .15rem;
    margin-bottom: .2rem;
}

/* Kleiner brand-naam op klein skerms */
@media (max-width: 599px) {
    .ov-brand-text {
        font-size: 0.82rem !important;
        white-space: nowrap;
    }
}

/* ===== Browse — filter-paneel versteek op mobiel ===== */
@media (max-width: 1279px) {
    .ov-filter-panel {
        display: none !important;
    }
    .ov-filter-panel.ov-open {
        display: block !important;
    }
}

/* ===== Stelselwye mobiel-digtheid (#116) =====
   Verklein oorbodige lug/opvulling op klein skerms sodat meer inligting per skerm pas,
   sonder om raakpunte onder 44px te laat val. */
@media (max-width: 599px) {
    .mud-container {
        padding-left: var(--ov-space-3) !important;
        padding-right: var(--ov-space-3) !important;
    }

    /* MudBlazor se py-4/py-5 utility-klasse gee ruim vertikale opvulling — verdig dit op mobiel */
    .py-4 { padding-top: var(--ov-space-3) !important; padding-bottom: var(--ov-space-3) !important; }
    .py-5 { padding-top: var(--ov-space-4) !important; padding-bottom: var(--ov-space-4) !important; }

    .mud-card-content, .mud-paper.pa-4 {
        padding: var(--ov-space-3) !important;
    }

    /* Stay-galery: 260px i.p.v. 420px op mobiel — steeds duidelik, maar minder skerm-verspilling */
    .ov-stay-gallery, .ov-stay-gallery-img {
        height: 260px !important;
    }
}

/* Datumreeks-veld in die smal filter-paneel: keer dat die datums afgesny word.
   16px word behou op raakskerms (iOs/Android) — 'n fokus-veld met font-size < 16px
   laat Safari op iOS die hele bladsy outomaties inzoem, wat 'n growwe "moet self
   weer uitzoem"-ervaring gee. Op muis-toestelle (desktop) kan dit fyner wees. */
.ov-daterange input {
    font-size: 1rem !important;
    letter-spacing: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-width: 0;
    text-align: center;
}
@media (pointer: fine) {
    .ov-daterange input {
        font-size: 0.8rem !important;
    }
}
.ov-daterange .mud-range-input-separator {
    margin: 0 !important;
    font-size: 1rem;
}
.ov-daterange .mud-input-adornment-end {
    margin-left: 0;
}
.ov-daterange .mud-input-adornment-end .mud-icon-root {
    font-size: 1.15rem;
}

/* ===== Hero section =====
   Foto-agtergrond met twee helftes wat Orania se kontrasterende "klimate" wys: 'n
   welige rivier-oewer (Oewerpark aan die Oranjerivier) en die droë Karoo-vlaktes
   rondom die dorp. 'n Groen-oorlegskaduwee behou leesbaarheid en die kern-groen-branding. */
.ov-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 3rem 0 4rem;
    background: linear-gradient(135deg, var(--ov-primary) 0%, var(--ov-primary-dark) 100%);
}

.ov-hero-photos {
    position: absolute;
    inset: 0;
    display: flex;
}
.ov-hero-photo {
    flex: 1 1 50%;
    background-size: cover;
    background-position: center;
}

.ov-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(35, 74, 45, .55) 0%, rgba(35, 74, 45, .72) 100%),
        linear-gradient(90deg, rgba(35, 74, 45, .35) 0%, rgba(35, 74, 45, .1) 50%, rgba(35, 74, 45, .35) 100%);
}

.ov-hero-content {
    position: relative;
    z-index: 1;
}

.ov-hero-credit {
    position: absolute;
    z-index: 1;
    right: .75rem;
    bottom: .5rem;
    font-size: .68rem;
    color: rgba(255, 255, 255, .65);
}

@media (max-width: 599px) {
    .ov-hero {
        padding: 2rem 0 2.75rem;
    }
    .ov-hero-photos {
        flex-direction: column;
    }
}

/* ===== Search card (overlaps hero bottom) ===== */
.ov-search-card {
    background: #fff;
    border-radius: var(--ov-radius-lg);
    padding: var(--ov-space-4);
    margin-top: -2.5rem;
    position: relative;
    z-index: 1;
    box-shadow: var(--ov-shadow-card);
}

/* ===== Under construction / maintenance ===== */
.ov-maintenance {
    min-height: calc(100vh - 4rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    background:
        radial-gradient(circle at top, rgba(200, 162, 75, 0.18), transparent 30%),
        linear-gradient(135deg, #eef2ec 0%, #f7f6f2 100%);
}

.ov-maintenance-card {
    max-width: 42rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--ov-radius-lg);
    padding: 3rem 2rem;
    box-shadow: 0 16px 45px rgba(37, 41, 31, 0.12);
    border: 1px solid rgba(47, 93, 58, 0.08);
}

.ov-maintenance-kicker {
    color: var(--ov-primary);
    letter-spacing: 0.22em;
    font-weight: 700;
}

.ov-maintenance-copy {
    color: rgba(37, 41, 31, 0.72);
}

/* ===== Property card images ===== */
.ov-property-card {
    transition: transform .15s ease, box-shadow .15s ease;
    border-radius: var(--ov-radius-md);
    box-shadow: var(--ov-shadow-subtle) !important;
}
.ov-property-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ov-shadow-card) !important;
}

.ov-card-img {
    height: 170px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: var(--ov-radius-md);
    border-top-right-radius: var(--ov-radius-md);
}
.ov-card-img-placeholder {
    background: linear-gradient(135deg, #4a7a57, #2f5d3a);
    color: rgba(255,255,255,.85);
    font-size: 2.2rem;
    font-weight: 500;
}

/* Digter kaart-rooster op mobiel: 2 kolomme i.p.v. 1 gestapelde kolom sodat meer
   eiendomme sigbaar is sonder om te hoef te rol (#116). */
@media (max-width: 599px) {
    .ov-card-img {
        height: 120px;
    }
    .ov-property-card .mud-card-content {
        padding: var(--ov-space-2) var(--ov-space-3) !important;
    }
}

/* ===== Map iframe ===== */
.ov-map {
    height: 320px;
}
@media (min-width: 960px) {
    .ov-map {
        height: 480px;
    }
}

/* ===== Ora currency display ===== */
.ora-amount {
    font-weight: 500;
    color: var(--ov-primary-dark);
    white-space: nowrap;
}

/* ===== Rating stars ===== */
.ov-rating { color: var(--ov-accent); }

/* ===== Amenity chips ===== */
.ov-amenity-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: #eef2ec;
    border-radius: 2rem;
    padding: .25rem .75rem;
    font-size: .85rem;
    margin: 0 .35rem .35rem 0;
}

/* ===== Footer ===== */
.ov-footer {
    background-color: var(--ov-primary-dark);
    padding: 1.25rem 0;
    margin-top: 3rem;
}
.ov-footer-text {
    color: rgba(255,255,255,.85);
}
.ov-footer-link.mud-link {
    color: rgba(255,255,255,.85) !important;
}
.ov-footer-link.mud-link:hover {
    color: #ffffff !important;
}
.ov-footer-row {
    row-gap: .5rem;
}
.ov-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
}

/* ===== Koekie-toestemming-banier (#267) ===== */
.ov-cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
    justify-content: center;
    padding: 1rem;
}
.ov-cookie-banner-paper {
    max-width: 640px;
    width: 100%;
}

/* ===== Auth form inputs (SSR pages — no MudBlazor interactivity) ===== */
.ov-form-label {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    margin-bottom: .25rem;
    color: var(--ov-text);
}
.ov-form-input {
    display: block;
    width: 100%;
    padding: .5rem .75rem;
    font-size: 1rem;
    font-family: inherit;
    border: 1px solid rgba(0,0,0,.23);
    border-radius: 4px;
    color: var(--ov-text);
    background: #fff;
    box-sizing: border-box;
}
.ov-form-input:focus {
    outline: 2px solid var(--ov-primary);
    border-color: var(--ov-primary);
}
.ov-form-error {
    color: #d32f2f;
    font-size: .8rem;
    display: block;
    margin-top: .2rem;
}

/* ===== File input for photo upload ===== */
.ov-file-input {
    display: block;
    width: 100%;
    padding: .4rem;
    font-size: .9rem;
    border: 1px solid rgba(0,0,0,.23);
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
}

/* ===== Blazor error UI ===== */
/* Issue #273: explicit text/link colors so the banner stays legible even if a page's own
   theme (e.g. MudBlazor dark surfaces) would otherwise make the text blend into the
   light-yellow background and become invisible. */
#blazor-error-ui {
    background: lightyellow;
    color: #3f3f3f !important;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .reload {
    color: #0d47a1 !important;
    font-weight: 600;
    text-decoration: underline;
}
#blazor-error-ui .dismiss {
    color: #3f3f3f !important;
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* ===== Validation (EditForm / DataAnnotationsValidator) ===== */
.validation-message { color: #d32f2f; font-size: .8rem; }
.valid.modified:not([type=checkbox]) { outline: 1px solid #2e7d32; }
.invalid { outline: 1px solid #d32f2f; }

/* ===== Owner readonly availability calendar ===== */
.ov-owner-cal {
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.ov-owner-cal-month {
    font-weight: 500;
    padding: .5rem .75rem;
    background: #f1f4ef;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.ov-owner-cal-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.ov-owner-cal-grid th {
    font-size: .72rem;
    font-weight: 500;
    text-align: center;
    color: #606060;
    padding: .35rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ov-owner-cal-day {
    text-align: right;
    vertical-align: top;
    height: 40px;
    padding: .2rem .3rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    font-size: .8rem;
    cursor: default;
}

.ov-owner-cal-out {
    opacity: .35;
}

.ov-owner-cal-tooltip {
    border-collapse: collapse;
    font-size: .8rem;
}

.ov-owner-cal-tooltip td {
    padding: 0 .5rem 0 0;
    white-space: nowrap;
    text-align: left;
}

.ov-owner-cal-tooltip td:last-child {
    padding-right: 0;
}

.ov-owner-cal-available {
    background: #ffffff;
}

.ov-owner-cal-booked-orania {
    background: #f7d7d7;
}

.ov-owner-cal-booked-manual {
    background: #fde8cc;
}

.ov-owner-cal-booked-bookingcom {
    background: #d9e9ff;
}

.ov-owner-cal-booked-airbnb {
    background: #f8d9ea;
}

.ov-owner-cal-booked-ical {
    background: #e8dff9;
}

.ov-owner-cal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .88rem;
}

.ov-owner-cal-legend-color {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.18);
}

.ov-owner-cal-booked-external {
    /* Background colour is applied inline, per CalSync connection. */
    background: #e8dff9;
}

.ov-booking-history-panels .mud-expand-panel {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    margin-bottom: .5rem;
    background: #fff;
}

/* Calendar sync connection list */
.ov-cal-item {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    margin-bottom: .5rem;
    padding: .5rem .75rem;
}

.ov-cal-item-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.ov-cal-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    flex: 0 0 auto;
}

.ov-cal-item-name {
    font-weight: 500;
}

.ov-cal-url-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .25rem;
    min-width: 0;
}

.ov-cal-url-label {
    flex: 0 0 auto;
    font-weight: 500;
    white-space: nowrap;
}

.ov-cal-url {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: monospace;
    font-size: .8rem;
    color: rgba(0, 0, 0, 0.6);
}

/* ===== Payment method radio options — equal-width option cards (#347) =====
   MudRadio wraps its ChildContent in a <span class="mud-typography-body1">
   that defaults to flex-grow:0, so it shrinks to the content's natural width
   instead of filling the radio row. Force it (and our MudPaper card) to grow
   so every option box ends up the same width regardless of description length. */
.payment-method-group .mud-radio .mud-typography-body1 {
    flex-grow: 1;
    width: 100%;
}

/* ===== Booked date in MudDateRangePicker on /stay page ===== */
/* AdditionalDateClassesFunc voeg die klas by op die knoppie self */
button.ov-date-booked,
.mud-button-root.ov-date-booked {
    background-color: #fde8cc !important;
    color: #7a4a00 !important;
    font-weight: 500;
}