/* Mobile styles for LifeTravel */

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #f8fafd;
    color: #222;
    font-size: 1.08em;
    padding: 0;
    margin: 0;
}

header, .main-header, .home-header {
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    background: #fff;
    padding: 0.7em 0.5em;
}

.logo, .logo-area, .logo-center {
    text-align: center;
}
.logo img, .logo-large {
    height: 48px !important;
    max-width: 90vw;
}

.navbar, .main-tabs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: #1769aa;
    border-radius: 10px;
    margin: 0.5em 0;
    padding: 0.5em 0;
}

.nav-links, .main-tabs {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.nav-links a, .main-tabs a {
    padding: 1em;
    color: #fff;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 1.1em;
    text-decoration: none;
    transition: background 0.2s;
}

.nav-links a:last-child, .main-tabs a:last-child {
    border-bottom: none;
}

.nav-links a.active, .main-tabs a.active {
    background: #0090e3;
    color: #fff;
    font-weight: bold;
}

.hamburger, .sidenav, .sidenav-overlay { display: none; }

.nav-links { display: flex; }

.btn, .btn-primary, .btn-search {
    display: block;
    width: 100%;
    padding: 1em;
    font-size: 1.1em;
    border-radius: 8px;
    background: #1769aa;
    color: #fff;
    border: none;
    margin: 1em 0 0.5em 0;
    text-align: center;
    transition: background 0.2s;
}
.btn:hover, .btn-primary:hover, .btn-search:hover {
    background: #0090e3;
}

.btn-search, button.btn-search {
    display: block;
    margin: 1.2em auto 0 auto !important;
    width: 80%;
    max-width: 300px;
    text-align: center;
}

.card, .pay-form-block, .feature-card {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    background: #fff;
    margin: 1em 0;
    padding: 1.2em 1em;
}

input, select, textarea {
    width: 100%;
    padding: 0.9em;
    border-radius: 8px;
    border: 1px solid #cfd8dc;
    margin-bottom: 1em;
    font-size: 1em;
}

.search-box, .search-form {
    padding: 1em 0.2em;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    margin: 1em 0;
}

footer, .footer {
    background: #1769aa;
    color: #fff;
    text-align: center;
    padding: 2em 0 1em 0;
    border-radius: 10px 10px 0 0;
    margin-top: 2em;
}

/* Cacher le side nav et l'overlay sur PC */
.sidenav, .sidenav-overlay {
    display: none !important;
}

/* Overlay mobile : caché par défaut */
.sidenav-overlay {
    display: none !important;
}

@media (max-width: 600px) {
    html, body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    .container, .about-card, .hotel-header, .room-block, .hotel-tarifs-dyn, .pay-main, .pay-form-block, .pay-summary-block {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    img, video, iframe {
        max-width: 100% !important;
        height: auto !important;
        display: block;
    }
    /* Empêcher le scroll horizontal global */
    * {
        box-sizing: border-box !important;
    }
    .sidenav, .sidenav-overlay {
        display: block !important;
    }
    .sidenav {
        display: flex !important;
        position: fixed;
        top: 0; left: 0;
        height: 100vh;
        width: 78vw;
        max-width: 320px;
        background: #fff;
        box-shadow: 2px 0 16px rgba(0,0,0,0.13);
        z-index: 1202;
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(.4,0,.2,1);
        flex-direction: column;
        padding: 1.2em 1em 1em 1.2em;
    }
    .sidenav.active { transform: translateX(0); }
    .sidenav-links { display: flex; flex-direction: column; margin-top: 2em; }
    .sidenav-links a { color: #1769aa; font-size: 1.15em; text-decoration: none; padding: 1em 0; border-bottom: 1px solid #f0f0f0; font-weight: 500; transition: background 0.2s, color 0.2s; }
    .sidenav-links a:last-child { border-bottom: none; }
    .sidenav-links a.active, .sidenav-links a:hover { color: #0090e3; background: #f2faff; }
    .close-sidenav { background: none; border: none; font-size: 2.1em; color: #1769aa; position: absolute; top: 0.5em; right: 0.7em; cursor: pointer; z-index: 1203; }
    .sidenav-overlay.active {
        display: block !important;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(44,62,80,0.25);
        z-index: 1200;
    }

    /* Hotel page - aération et lisibilité */
    .about-card, .hotel-header, .room-block, .hotel-tarifs-dyn {
        padding: 1.2em 0.5em !important;
        margin: 1.2em 0 !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
        background: #fff !important;
    }
    .hotel-header {
        flex-direction: column !important;
        gap: 1.2em !important;
        align-items: flex-start !important;
    }
    .hotel-header img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 10px !important;
        margin-bottom: 1em !important;
    }
    .hotel-header h1 {
        font-size: 1.35em !important;
        margin-bottom: 0.5em !important;
        font-weight: 700 !important;
        color: #1769aa !important;
    }
    .hotel-header .stars {
        font-size: 1.1em !important;
        margin-bottom: 0.5em !important;
    }
    .hotel-header > div {
        width: 100% !important;
    }
    .hotel-header .city {
        color: #7cb342 !important;
        font-size: 1.1em !important;
        margin-bottom: 0.7em !important;
    }
    .hotel-header .price, .hotel-header .tarif {
        font-size: 1.15em !important;
        color: #0090e3 !important;
        font-weight: 700 !important;
        margin-bottom: 1em !important;
    }
    .galerie-photos {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.7em !important;
        margin: 1em 0 !important;
        overflow-x: auto !important;
        padding-bottom: 0.5em !important;
    }
    .galerie-photos img {
        width: 90px !important;
        height: 60px !important;
        object-fit: cover !important;
        border-radius: 7px !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    }
    .section-title, .desc-title, .options-title {
        font-size: 1.13em !important;
        color: #0090e3 !important;
        font-weight: 700 !important;
        margin: 1.2em 0 0.5em 0 !important;
        letter-spacing: 0.01em;
    }
    .desc-longue, .desc-section, .hotel-desc, .hotel-note {
        font-size: 1em !important;
        color: #333 !important;
        margin-bottom: 1.2em !important;
        line-height: 1.7 !important;
        white-space: pre-line !important;
    }
    .hotel-options, .hotel-tags, .hotel-boardings, .hotel-themes {
        margin-bottom: 1.2em !important;
    }
    .hotel-options ul, .hotel-tags ul, .hotel-boardings ul, .hotel-themes ul {
        padding-left: 1.2em !important;
        margin-bottom: 0.7em !important;
    }
    .hotel-options li, .hotel-tags li, .hotel-boardings li, .hotel-themes li {
        margin-bottom: 0.5em !important;
        font-size: 0.98em !important;
        color: #444 !important;
        line-height: 1.5 !important;
    }
    .room-block {
        background: #fff !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 16px rgba(0,144,227,0.10) !important;
        margin-bottom: 1.7em !important;
        padding: 1.2em 0.7em !important;
        border: 1.5px solid #e3f2fd !important;
    }
    .room-title {
        font-size: 1.15em !important;
        font-weight: 700 !important;
        color: #0090e3 !important;
        margin-bottom: 1em !important;
        display: flex;
        align-items: center;
        gap: 0.7em;
    }
    .room-option {
        background: #f8fafc !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0,144,227,0.07) !important;
        padding: 1em 0.7em !important;
        margin-bottom: 1.2em !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.7em !important;
        border: 1px solid #e0e0e0 !important;
        position: relative;
    }
    .room-option input[type="radio"] {
        width: 1.3em !important;
        height: 1.3em !important;
        accent-color: #0090e3 !important;
        margin-bottom: 0.5em !important;
        margin-right: 0.7em !important;
        box-shadow: 0 1px 4px rgba(0,144,227,0.10);
    }
    .room-type {
        font-size: 1.08em !important;
        color: #222 !important;
        font-weight: 500 !important;
        margin-bottom: 0.3em !important;
    }
    .boarding-select {
        width: 100% !important;
        padding: 0.8em 1em !important;
        border-radius: 8px !important;
        border: 1.5px solid #b0c4d6 !important;
        font-size: 1.08em !important;
        background: #f2faff !important;
        margin-bottom: 0.7em !important;
        margin-top: 0.2em !important;
        color: #1769aa !important;
        font-weight: 500 !important;
    }
    .badge-available {
        background: #7cb342 !important;
        color: #fff !important;
        border-radius: 8px !important;
        padding: 0.35em 1.2em !important;
        font-size: 1em !important;
        font-weight: 600 !important;
        margin-bottom: 0.5em !important;
        display: inline-block !important;
        box-shadow: 0 1px 4px rgba(124,179,66,0.10);
    }
    .room-price {
        color: #0090e3 !important;
        font-weight: 700 !important;
        font-size: 1.18em !important;
        margin-top: 0.5em !important;
        margin-bottom: 0.2em !important;
        letter-spacing: 0.01em;
        display: block !important;
    }
    /* Espacement entre chaque option */
    .room-block > .room-option:not(:last-child) {
        margin-bottom: 1.2em !important;
    }
    /* Animation tap sur option */
    .room-option:active {
        background: #e3f2fd !important;
        box-shadow: 0 2px 12px rgba(0,144,227,0.13) !important;
        border-color: #0090e3 !important;
    }
    /* Espacement entre sections */
    .about-card > *:not(:last-child) {
        margin-bottom: 1.2em !important;
    }
    /* Listes à puces plus lisibles */
    ul, ol {
        padding-left: 1.3em !important;
        margin-bottom: 1em !important;
    }
    li {
        font-size: 1em !important;
        margin-bottom: 0.5em !important;
        line-height: 1.5 !important;
    }
    /* Boutons */
    .btn, .btn-primary, .btn-search {
        font-size: 1.1em !important;
        padding: 1em !important;
        border-radius: 8px !important;
        margin: 1em 0 0.5em 0 !important;
        width: 100% !important;
    }
    .equip-list label, .theme-list label {
        display: block;
        margin-bottom: 0.7em;
        font-size: 1.08em;
        padding-left: 0.2em;
    }
    .equip-list input[type="checkbox"], .theme-list input[type="checkbox"] {
        width: 1.3em;
        height: 1.3em;
        accent-color: #0090e3;
        margin-right: 0.6em;
        vertical-align: middle;
    }
    .equip-list, .theme-list {
        margin-bottom: 1.2em;
        padding-left: 0.2em;
    }
}

/* Utility */
.hide-mobile { display: none !important; }
.show-mobile { display: block !important; }