/* Site components. Colors come from tokens.css only. */

/* Buttons: Brand primary with white or dark text, whichever passes (decided server-side by ContrastRule) */
.btn { border-radius: var(--ea-radius); }
.btn:not(.btn-link) { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.btn-primary {
    --bs-btn-color: var(--brand-on-primary); --bs-btn-bg: var(--brand-primary); --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: var(--brand-on-primary); --bs-btn-hover-bg: var(--ea-brand-hover); --bs-btn-hover-border-color: var(--ea-brand-hover);
    --bs-btn-active-color: var(--brand-on-primary); --bs-btn-active-bg: var(--ea-brand-active); --bs-btn-active-border-color: var(--ea-brand-active);
    --bs-btn-disabled-color: var(--brand-on-primary); --bs-btn-disabled-bg: var(--brand-primary); --bs-btn-disabled-border-color: var(--brand-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--ea-link); --bs-btn-border-color: var(--ea-link);
    --bs-btn-hover-color: var(--brand-on-primary); --bs-btn-hover-bg: var(--brand-primary); --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-color: var(--brand-on-primary); --bs-btn-active-bg: var(--ea-brand-active); --bs-btn-active-border-color: var(--ea-brand-active);
}
.btn-outline-secondary { --bs-btn-color: var(--ea-text-muted); --bs-btn-border-color: var(--ea-rule); --bs-btn-hover-color: var(--ea-text); --bs-btn-hover-bg: var(--ea-stone); --bs-btn-hover-border-color: var(--ea-text-muted); --bs-btn-active-color: var(--ea-text); --bs-btn-active-bg: var(--ea-stone); }

/* Header, footer, cookie banner */
.site-header { background: var(--ea-surface); }
.site-header .navbar-brand, .site-header .nav-link.active { color: var(--ea-link); }
.site-footer { background: var(--ea-stone); }
.site-footer a { color: var(--ea-link); display: inline-block; min-height: 24px; padding-block: .125rem; } /* WCAG 2.2 target size */
.cookie-banner { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1080; background: var(--ea-surface); border-top: 1px solid var(--ea-rule); padding: .75rem 0; }
html.needs-consent .cookie-banner { display: block; }

/* Home and listings */
.gallery-img { aspect-ratio: 3 / 2; object-fit: cover; }
.hero-img { aspect-ratio: 21 / 8; object-fit: cover; }
.ea-label { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 600; }
.site-footer h2 { font-family: var(--ea-font-body); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 600; }
.site-footer, .site-header { border-color: var(--ea-rule) !important; }

/* Hero: search box sits on the first slide; phones show the first slide only, desktop moves by arrows and swipe (no auto-rotation) */
.hero-wrap { position: relative; }
.search-form { border-top: 3px solid var(--brand-primary); box-shadow: none; }
@media (min-width: 768px) {
  .hero-wrap:has(.hero) .search-overlap { position: absolute; left: 2rem; right: 2rem; bottom: 1.5rem; z-index: 2; }
  .hero .carousel-caption { bottom: 9rem; }
  .hero .carousel-indicators { bottom: auto; top: .5rem; margin-bottom: 0; }
}
@media (max-width: 767.98px) {
  .hero .carousel-item:not(:first-child), .hero .carousel-control-prev, .hero .carousel-control-next, .hero .carousel-indicators { display: none !important; }
  .hero-img { aspect-ratio: 4 / 3; }
  .hero-wrap:has(.hero) .search-overlap { position: relative; z-index: 2; margin: -2.5rem .75rem 0; }
}
.carousel-caption { background: rgba(0, 0, 0, .35); border-radius: var(--ea-radius); }
.bi { vertical-align: -.125em; }
.apartment-card { container-type: inline-size; }
/* Narrow cards (list columns, phones side by side) drop the secondary facts. */
@container (max-width: 17rem) { .card-facts .list-inline-item:nth-child(n+3), .card-amenities li:nth-child(n+5) { display: none; } }
.apartment-card .card-img-top, .offer-card .card-img-top { aspect-ratio: 3 / 2; object-fit: cover; }

/* Apartment page: photo mosaic, sticky booking box, phone bottom bar */
.gallery-mosaic { position: relative; display: grid; gap: .5rem; grid-template-columns: 1fr; }
.gallery-tile { background: none; display: block; }
.gallery-mosaic .gallery-tile:not(.gallery-main) { display: none; }
.gallery-all { position: absolute; right: .75rem; bottom: .75rem; }
.gallery-modal { background: var(--ea-text); }
@media (min-width: 768px) {
  .gallery-mosaic { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); }
  .gallery-mosaic .gallery-main { grid-column: span 2; grid-row: span 2; }
  .gallery-mosaic .gallery-tile:not(.gallery-main) { display: block; }
}
.booking-box { scroll-margin-top: 1rem; }
@media (min-width: 992px) { .booking-box { position: sticky; top: 1rem; } }
.book-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; background: var(--ea-surface); border-top: 1px solid var(--ea-rule); }
@media (max-width: 991.98px) { body { padding-bottom: 4.5rem; } }

/* Admin */
.admin-sidebar { width: 220px; min-height: 100vh; background: #212529; }
.timeline th.sticky-col { position: sticky; left: 0; background: var(--ea-surface); z-index: 1; min-width: 9rem; }
.timeline td { min-width: 1.6rem; }
.blocked { background: repeating-linear-gradient(45deg, var(--ea-rule), var(--ea-rule) 4px, var(--ea-stone) 4px, var(--ea-stone) 8px); }

/* Availability calendar: state is shown by shape and text-decoration as well as colour */
.cal-day { display: block; width: 100%; min-height: 2.25rem; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; }
button.cal-day { cursor: default; }
.cal-unavailable { color: var(--bs-secondary-color); text-decoration: line-through; background: var(--bs-secondary-bg); }
.cal-checkout-only { color: var(--bs-secondary-color); background: linear-gradient(135deg, transparent 50%, var(--bs-secondary-bg) 50%); }
.cal-js button.cal-day { cursor: pointer; }
.cal-js .cal-month { display: none; max-width: 26rem; }
.cal-js .cal-month.cal-show { display: block; }
.cal-js button.cal-day[aria-disabled="true"] { cursor: not-allowed; }
.cal-short, .cal-nostart { color: var(--bs-secondary-color); background: var(--bs-secondary-bg); opacity: .6; }
.cal-range { background: var(--ea-brand-subtle); }
.cal-month table { --bs-table-bg: transparent; border-color: var(--ea-rule); }
.cal-month caption { font-family: var(--ea-font-heading); font-size: 1.25rem; }
.cal-day { border-radius: var(--ea-radius); }
.cal-sel { background: var(--brand-primary); color: var(--brand-on-primary); font-weight: 700; }

/* Booking flow (boutique direction): thin-rule step markers, dark-outlined boxes, no shadows */
.booking-steps { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.booking-steps li { flex: 1; padding: .5rem 0; border-top: 2px solid var(--ea-rule); color: var(--ea-text-muted); }
.booking-steps .is-done { border-color: var(--ea-text-muted); color: var(--ea-text); }
.booking-steps .is-current { border-color: var(--brand-primary); color: var(--ea-text); font-weight: 600; }
@media (max-width: 575.98px) { .booking-steps { gap: .25rem; letter-spacing: .04em; font-size: .72rem; } }
.booking-summary { top: 1rem; border: 1px solid var(--ea-text); }
.booking-summary > summary { cursor: pointer; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; background: var(--ea-stone); }
.booking-summary h2 { font-size: 1.5rem; }
.booking-box, .booking-flow-box { border: 1px solid var(--ea-text); }
@media (min-width: 992px) {
  .booking-summary > summary { display: none; }
  .booking-summary::details-content { content-visibility: visible; display: block; }
}
/* Flow forms: small-caps labels, 16px fields (no iOS zoom), full-width actions and 44px targets on phones */
#details-form .form-label, .booking-flow-box .form-label { text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; color: var(--ea-text-muted); }
@media (max-width: 575.98px) {
  #details-form .form-control, #details-form .form-select { font-size: 1rem; min-height: 2.75rem; }
  #details-form button[type=submit], .booking-flow-box .btn-primary { width: 100%; min-height: 2.75rem; }
}

/* Blazor */
#blazor-error-ui { color-scheme: light only; color: #212529; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
.blazor-error-boundary { padding: 1rem; background: #b32121; color: white; }
.blazor-error-boundary::after { content: "An error has occurred."; }