/* Visually hidden but readable by screen readers and search engines. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Shared design tokens — colors and system font stacks reused across components. */
:root {
    --whatsapp-green: #25D366;
    --whatsapp-green-dark: #128C7E;

    /* System monospace stack for financial figures, dates and IDs in booking dialogs.
       Picks each OS's native monospace UI font (SF Mono on Apple, Cascadia Mono on Windows
       11, Roboto Mono built into Android) so digits align without any web-font download. */
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Consolas, Menlo, monospace;
}

/* ---------------------------------------------------------------------------
   System font stack for body text — zero font loading, zero CLS, instant render.
   Uses each OS's native UI font (San Francisco on Apple, Segoe UI Variable on
   Windows 11, Roboto built into Android). MudBlazor.min.css sets font-family:
   Roboto on .mud-typography classes; we override here because site.css loads
   after MudBlazor's CSS.
   --------------------------------------------------------------------------- */
body,
.mud-typography,
.mud-input-root,
.mud-button-root {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Anta Fallback — wraps Arial with size-adjust/ascent-override so the wordmark
   placeholder matches Anta's box dimensions. When Anta swaps in, no layout shift. */
@font-face {
    font-family: 'Anta Fallback';
    src: local('Arial');
    size-adjust: 107%;
    ascent-override: 88%;
    descent-override: 22%;
    line-gap-override: 0%;
}

/* Add styles for map popups */
.listing-card-popup .mapboxgl-popup-content {
    padding: 0 !important;
    overflow: hidden;
    border-radius: 8px !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}

.listing-card-popup.mapboxgl-popup {
    background: transparent !important;
}

.listing-card-popup .mapboxgl-popup-close-button {
    color: white;
    font-size: 16px;
    padding: 3px 8px;
    right: 0;
    top: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 0 0 0 8px;
}

.listing-card-popup .mapboxgl-popup-close-button:hover {
    background: rgba(0, 0, 0, 0.6);
}

/* GPU-accelerated marker rendering for smooth performance with 700+ markers */
.custom-marker {
    transition: transform 0.2s ease;
    width: 24px !important;
    height: 24px !important;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

.custom-marker:hover {
    transform: scale(1.1) translateZ(0);
}

/* Optimize all mapbox markers for GPU rendering */
.mapboxgl-marker {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Dark mode support */
.mud-dark-mode {
    /* Map popup styles */
    .map-popup-card {
        background: #2d2d2d;
        color: #fff;
    }

    .map-popup-card h4,
    .map-popup-card div[style*="color:#666"],
    .map-popup-card span[style*="color:#666"] {
        color: #bbb !important;
    }

    .listing-card-popup .mapboxgl-popup-close-button {
        color: #fff;
    }
}

/* Hide all popup tips */
.mapboxgl-popup-tip {
    display: none !important;
}

/* Connectivity related styles */
.offline-mode::before {
    content: "You are offline";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #f44336;
    color: white;
    text-align: center;
    padding: 4px;
    z-index: 2000;
    font-weight: bold;
}

/* Add extra padding when in offline mode to not hide content */
.offline-mode {
    padding-top: 28px;
}

/* Style specifically for input fields that will preserve data */
input[data-preserve], 
textarea[data-preserve], 
select[data-preserve] {
    border-left: 2px solid #1e88e5;
}

/* Ensure visibility of connection status on mobile */
@media (max-width: 600px) {
    .connection-status {
        padding: 12px 16px;
        font-size: 14px;
    }
}


/* Rich text description styling */
.description-content {
    max-width: 100%;
    overflow-x: auto;
}

.description-content img {
    max-width: 100%;
    height: auto;
}

.description-content ul, 
.description-content ol {
    padding-left: 1.5rem;
}

.description-content blockquote {
    border-left: 3px solid var(--mud-palette-primary);
    padding-left: 1rem;
    margin-left: 0;
    color: var(--mud-palette-text-secondary);
}

.description-content pre {
    background-color: var(--mud-palette-background-grey);
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
}

.description-content a {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.description-content a:hover {
    text-decoration: underline;
}

.description-content h1, 
.description-content h2, 
.description-content h3, 
.description-content h4, 
.description-content h5, 
.description-content h6 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

/* Mobile-specific styles */
@media (max-width: 960px) {
    .d-none-mobile {
        display: none !important;
    }
    
    .d-none-mobile-inline-flex {
        display: none !important;
    }
    
    .pb-16-mobile {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 16px)) !important;
    }
    
    /* Removed custom drawer z-index override to use MudBlazor defaults */
    
    /* Add bottom margin to the last element in the main content to ensure it's visible */
    .mud-container > *:last-child {
        margin-bottom: 20px;
    }
    
    /* Ensure the main content has proper height and scrolling */
    .mud-main-content {
        min-height: calc(100vh - var(--mud-appbar-height));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
}

/* Removed responsive drawer positioning override */

/* Bottom navbar styles */
.mobile-navbar .mud-paper {
    border-radius: 0 !important;
    border-top: 1px solid var(--mud-palette-divider);
}

.mobile-navbar .mud-icon-button {
    border-radius: 8px;
    transition: transform 0.1s ease-in-out, background-color 0.2s ease;
}

.mobile-navbar .mud-icon-button:active {
    transform: scale(0.9);
}

/* Connection status */
@media (max-width: 600px) {
    .connection-status {
        padding: 12px 16px;
        font-size: 14px;
    }
}

/* Ensure dialogs always appear above custom overlays */
.mud-dialog-container {
    z-index: 2100 !important;
}

.mud-overlay.mud-dialog-backdrop {
    z-index: 2099 !important;
}

/* Specific override for dialogs opened from within overlays */
.mud-dialog.chat-dialog .mud-dialog-container,
.mud-dialog.chat-dialog + .mud-overlay {
    z-index: 2150 !important;
}

/* Dialog above overlay class for dialogs opened within overlays */
.dialog-above-overlay.mud-dialog-container {
    z-index: 2150 !important;
}

.dialog-above-overlay.mud-overlay {
    z-index: 2149 !important;
}

/* Ensure other MudBlazor components stay below dialogs but above custom overlays */
.mud-popover-provider {
    z-index: 2050 !important;
}

/* ---------------------------------------------------------------------------
   Global desktop scaling (MudBlazor uses rem everywhere)
   Shrink the entire UI to ~80-85 % on large view-ports but keep mobile intact.
   Adjust the value if you want even smaller/larger base size.
--------------------------------------------------------------------------- */
@media (min-width: 992px) { /* lg breakpoint similar to MudBlazor/Bootstrap */
    html {
        font-size: 87.5%; /* 16 px × 0.875 ≈ 14 px  → ~12–13 px visual size */
    }
} 

/* Global Brand Styling — Anta font with the Anta Fallback above for zero-CLS swap. */
.brand-name,
.brand-name .mud-typography {
    font-family: 'Anta', 'Anta Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}

/* Resort dashboard tweaks */
.mud-paper.pa-3, .mud-paper.pa-4 { border-radius: 10px; }
.mud-chart { height: 260px; }
.mud-container.pa-4 { max-width: 1440px; }

/* Global Rounded Corners Styling - Apply 12px border-radius throughout the application */
/* MudPaper components */
.mud-paper {
    border-radius: 12px !important;
}

/* MudCard components */
.mud-card {
    border-radius: 12px !important;
}

/* MudExpansionPanels */
.mud-expansion-panels {
    border-radius: 12px !important;
    overflow: hidden;
}

.mud-expand-panel {
    border-radius: 12px !important;
}

.mud-expand-panel:first-child {
    border-radius: 12px 12px 0 0 !important;
}

.mud-expand-panel:last-child {
    border-radius: 0 0 12px 12px !important;
}

.mud-expand-panel:only-child {
    border-radius: 12px !important;
}

/* MudDialog */
.mud-dialog {
    border-radius: 12px !important;
}

.mud-dialog-container .mud-dialog {
    border-radius: 12px !important;
}

/* MudAlert */
.mud-alert {
    border-radius: 12px !important;
}

/* MudChip */
.mud-chip {
    border-radius: 12px !important;
}

/* MudButton - keep existing rounded corners but ensure consistency */
.mud-button {
    border-radius: 8px !important;
}

/* MudTextField, MudSelect, MudAutocomplete, etc. */
.mud-input-control {
    border-radius: 12px !important;
}

.mud-input-control .mud-input {
    border-radius: 12px !important;
}

/* MudTabs */
.mud-tabs {
    border-radius: 12px 12px 0 0 !important;
}

.mud-tab {
    border-radius: 12px 12px 0 0 !important;
}

/* MudMenu */
.mud-menu {
    border-radius: 12px !important;
}

/* MudPopover */
.mud-popover {
    border-radius: 12px !important;
}

/* MudSnackbar */
.mud-snackbar {
    border-radius: 12px !important;
}

/* MudDrawer */
.mud-drawer {
    border-radius: 0 12px 12px 0 !important;
}

.mud-drawer-anchor-right {
    border-radius: 12px 0 0 12px !important;
}

/* MudTooltip */
.mud-tooltip {
    border-radius: 8px !important;
}

/* Exceptions - components that should NOT have rounded corners */
.mud-appbar {
    border-radius: 0 !important;
}

.mud-main-content {
    border-radius: 0 !important;
}

.mud-navmenu {
    border-radius: 0 !important;
}

/* Mobile navbar should remain square at bottom */
.mobile-navbar .mud-paper {
    border-radius: 0 !important;
}

/* Map containers - keep square for proper map rendering */
.map-container,
.mapboxgl-map,
.mapboxgl-canvas-container {
    border-radius: 0 !important;
}

/* But map popups should have rounded corners */
.mapboxgl-popup-content {
    border-radius: 12px !important;
}

/* ============================================
   LIGHTWEIGHT STYLING ENHANCEMENTS
   ============================================ */

/* Simple shadows - Single layer for performance */



/* Dialog shadow */
.mud-dialog {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Chip hover shadow */
.mud-chip:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Icon button hover shadow */
.mud-icon-button:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Enhanced expansion panels */
.mud-expand-panel {
    border: 1px solid transparent !important;
}

.mud-expand-panel:hover {
    border-color: var(--mud-palette-primary-lighten) !important;
}

.mud-expand-panel-header:hover {
    background-color: var(--mud-palette-background-grey) !important;
}

/* Enhanced tabs */
.mud-tab:hover {
    background-color: var(--mud-palette-background-grey) !important;
}

/* Menu styling */
.mud-menu {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.mud-menu-item {
    border-radius: 8px !important;
    margin: 2px 4px !important;
}

.mud-menu-item:hover {
    background-color: var(--mud-palette-primary-lighten) !important;
}

/* Simple divider */
.mud-divider {
    height: 1px !important;
}

/* ===== Shared Document / File Upload Zones ===== */
.doc-upload-zone {
    border: 1.5px dashed color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
    background: color-mix(in srgb, var(--mud-palette-primary) 3%, transparent);
}

.doc-upload-zone:hover {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 60%, transparent);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

.doc-upload-zone.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.doc-upload-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.doc-upload-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.doc-upload-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}

.doc-upload-icon .mud-icon-root {
    font-size: 1.25rem;
    color: var(--mud-palette-primary);
}

.doc-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: var(--mud-palette-primary);
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.15s;
}

.doc-upload-btn:hover {
    opacity: 0.85;
}

.doc-upload-btn.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.doc-upload-hint {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
}

.doc-upload-file {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-success) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 20%, transparent);
}

.doc-file-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.doc-file-icon .mud-icon-root {
    font-size: 1rem;
    color: var(--mud-palette-success);
}

.doc-file-name {
    flex: 1;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.doc-file-remove {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
    color: var(--mud-palette-error);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}

.doc-file-remove:hover {
    background: color-mix(in srgb, var(--mud-palette-error) 20%, transparent);
}

/* Booked dates in calendar pickers — red strikethrough */
.mud-picker-calendar-day.picker-date-booked .mud-typography {
    text-decoration: line-through;
    text-decoration-color: var(--mud-palette-error);
    color: var(--mud-palette-error) !important;
    opacity: 0.7;
}