/*@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Pirata+One&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Almendra&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Caesar+Dressing&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Fruktur&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');
/*@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap');*/

:root {
    --color-primary: #1c1c23;
    --color-primary-hover: #24242c;
    --color-secondary: #312c04;
    --color-secondary-hover: #433d07;
    --color-white: #f1f1f1;
    --color-light-dark: #a6a6a6;
    --color-dark: #494949;
    --color-darker: #2e2e39;
    --color-error-bg: #ffdddd;
    --color-error-border: #e74c3c;
    --color-error-text: #c0392b;
    --color-green: #03860b;
    --color-red: #c10d0d;
    --color-success-bg: #ddffdd;
    --color-success-border: #27ae60;
    --color-success-text: #069541;
    --color-map-container: var(--color-primary-hover);

    /* Sans-serif (texte courant, UI) */
    --font-primary: "Source Sans 3",
    "Noto Sans JP", "Noto Sans CJK JP",
    "Yu Gothic", "Meiryo",
    "Noto Sans SC", /* chinois simplifié */
    "Noto Sans TC", /* chinois traditionnel */
    "Noto Sans KR", /* coréen */
    sans-serif;

    /* Serif (titres, ambiance médiévale) */
    --font-secondary: "Merriweather",
    "Noto Serif JP", "Noto Serif CJK JP",
    "Hiragino Mincho ProN", "MS Mincho",
    "Noto Serif SC", /* chinois simplifié */
    "Noto Serif TC", /* chinois traditionnel */
    "Noto Serif KR", /* coréen */
    serif;
}

body {
    position: relative;
    margin: 0;
    padding: 0;
    backdrop-filter: blur(2px);
    background-image: url('/img/background6.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: var(--font-primary);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100vh; /* hauteur pleine de la fenêtre */
}

/* Overlay semi-transparent sur l'image de fond */
body::after {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(57, 57, 57, 0.3); /* blanc à 40% d'opacité */
    pointer-events: none; /* laisse passer les clics */
    z-index: -1; /* derrière tout */
}

main {
    max-width: 2000px;
    /* Default width removed - will be set by page-specific classes */
    margin: 100px auto 70px auto; /* Margin top for header, bottom for footer */
    padding: 1rem 0;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.6) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);

    /* Gestion du positionnement et du scroll */
    position: relative; /* Changed back to relative to adapt to content */
    left: 0;
    transform: none; /* Removed transform since we're using auto margins */
    overflow-y: auto;
}

main .view-map {
    padding: 0 !important;
}

/* Page-specific widths */
main.browse-page {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

main.view-listing-page {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

main.listing-form-page {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    padding: 0; /* Remove padding to allow form to take full width and height */
}

main.my-listings-page {
    width: 80%;
    padding: 0;
}

main.favorites-page {
    width: 80%;
    padding: 0;
}

main.messages-page {
    width: 60%;
    padding: 0;
}

main.conversation-page {
    width: 60%;
    padding: 0;
}

main.message-form-page {
    width: 50%;
    padding: 0;
    margin: 100px auto 70px auto; /* Same as main */
}

main.signin-page {
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    padding: 0; /* Remove padding to allow form to take full width and height */
}

main.signup-page {
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    padding: 0; /* Remove padding to allow form to take full width and height */
}

main.view-map {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 0; /* Remove padding for view-map page */
    overflow: hidden !important; /* Prevent all scrollbars */
    overflow-x: hidden !important; /* Prevent horizontal scrollbar */
}

main.admin-page {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 0; /* Remove padding for view-map page */
}

h1 {
    margin-top: 0;
}

.link {
    text-decoration: none;
}

.shadowed-panel {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.shadowed-panel-intense {
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Loading overlay */
.page-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent; /* Changed to transparent to keep current page visible */
    background-image: url('/img/background2.jpg'); /* Same as body background */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none; /* Allow clicks to pass through */
}

.page-transition-overlay.active {
    opacity: 0.5; /* Make it more transparent so content is clearly visible */
    visibility: visible;
    pointer-events: none; /* Ensure clicks pass through to content */
}

/* Add the same semi-transparent overlay as body::after */
.page-transition-overlay::after {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(57, 57, 57, 0.4); /* Same as body::after */
    pointer-events: none;
    z-index: -1;
}

.page-transition-spinner {
    display: none; /* Hide the spinner completely */
    width: 50px;
    height: 50px;
    border: 5px solid var(--color-primary);
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
    /* Add a background to make spinner more visible against transparent overlay */
    background-color: rgba(255, 255, 255, 0.7);
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Pagination styles */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    gap: 5px;
    font-size: 14px;
}

.pagination a {
    line-height: 18px;
}

.pagination-link {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid var(--color-dark);
    border-radius: 4px;
    text-decoration: none;
    color: var(--color-darker);
    background-color: var(--color-white);
    transition: background-color 0.2s, color 0.2s;
}

.pagination-link:hover {
    color: var(--color-darker);
    background-color: #e6e6e6;
}

.pagination-link.active, .pagination-link.current {
    color: var(--color-white);
    background-color: var(--color-primary);
}

.pagination-link.active:hover, .pagination-link.current:hover {
    background-color: var(--color-primary-hover);
}

.pagination-ellipsis {
    padding: 8px 12px;
    color: #777;
}

.badge-category {
    background-color: var(--color-primary);
}

/* Availability badge styles */
.badge-availability-vacant {
    background-color: white;
    color: var(--color-green) !important;
    border: 1px solid var(--color-green);
    line-height: 13px !important;
}

.badge-availability-rented {
    background-color: white;
    color: var(--color-red) !important;
    border: 1px solid var(--color-red);
    line-height: 13px !important;
}

/** Ajustement de z-index pour Leaflet */
#province-map-container {
    z-index: 1; /* Ensure it's below other elements with higher z-index */
}

.leaflet-map-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-pane,
.leaflet-overlay-pane,
.leaflet-shadow-pane,
.leaflet-marker-pane,
.leaflet-popup-pane,
.leaflet-overlay-pane svg,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
    /* Force all Leaflet elements to respect the parent container's z-index */
    position: absolute;
    z-index: auto !important;
}

/* Media query for screens less than 1089px (mobile mode) */
@media (max-width: 1089px) {
    /* Ensure all pages' main container aligns with signin form width on mobile */
    main {
        margin: 68px 8px 59px 8px;
        width: 95%;
        padding: 0;
    }
    main.browse-page,
    main.view-listing-page,
    main.listing-form-page,
    main.my-listings-page,
    main.favorites-page,
    main.messages-page,
    main.message-form-page,
    main.conversation-page,
    main.signin-page,
    main.signup-page,
    main.view-map,
    main.admin-page {
        margin: 68px 8px 59px 8px; /* Explicitly kept for clarity; same as generic main */
        width: 95%;
        padding: 0;
    }
}