/**
 * Azureva Map Widget — frontend styles
 *
 * Ported verbatim from map-standalone/map.html <style> block (lines 12-119),
 * with every selector scoped under `.azureva-map-widget` so multiple widget
 * instances and the host theme can't collide. Body-level rules are scoped
 * under `body.azureva-map-fullscreen` (renamed from the standalone's
 * `body.map-fullscreen`) so independent instances don't fight over a shared
 * body class.
 *
 * Class names inside the widget are kept identical to the standalone — only
 * the root scope changes. This keeps the CSS port as close to verbatim as
 * possible while preventing leakage.
 */

/* Box-sizing reset, scoped */
.azureva-map-widget, .azureva-map-widget *, .azureva-map-widget *::before, .azureva-map-widget *::after { box-sizing: border-box; }

/* CSS custom properties — scoped to the widget root */
.azureva-map-widget {
    --pink: #f93c64; --pink-light: #fff0f3; --pink-hover: #e0234d;
    --dark: #1a1a2e; --gray-900: #2d2d3f; --gray-700: #4a4a5a;
    --gray-500: #7a7a8a; --gray-400: #9a9aa6; --gray-300: #c4c4d0;
    --gray-200: #e5e5eb; --gray-100: #f4f4f8; --white: #ffffff;
    --radius: 12px; --radius-lg: 16px; --radius-xl: 24px;
    --shadow: 0 4px 24px rgba(0,0,0,0.08); --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Noto Sans', sans-serif;
    color: var(--gray-900);
    line-height: 1.6;
    width: 100%;
}
.azureva-map-widget h1, .azureva-map-widget h2, .azureva-map-widget h3 { font-family: 'Manrope', serif; line-height: 1.2; }
.azureva-map-widget a { text-decoration: none; color: inherit; }
.azureva-map-widget img { max-width: 100%; display: block; }
.azureva-map-widget button { cursor: pointer; border: none; font-family: inherit; }
/* The widget fills 100% of whatever the Elementor parent container offers.
 * We use a namespaced class (.azv-map__inner) instead of the generic `.container`
 * to avoid colliding with Bootstrap / Astra / OceanWP / etc. global rules. */
.azureva-map-widget .azv-map__inner { width: 100%; max-width: none; margin: 0; padding: 0; }

/* RES-CARD (used in the card panel and bottom sheet) */
.azureva-map-widget .res-card { background: white; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gray-100); transition: all var(--transition); display: flex; flex-direction: column; }
.azureva-map-widget .res-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.azureva-map-widget .res-card__img { height: 190px; overflow: hidden; position: relative; flex-shrink: 0; }
.azureva-map-widget .res-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
/* Badge sizes are px, not rem — themes that shrink the root font-size would
 * otherwise render the pills smaller than the maquette. */
.azureva-map-widget .res-card__badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 70px); }
.azureva-map-widget .res-card__badge { background: var(--pink); color: white; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 100px; text-shadow: 0 1px 3px rgba(0,0,0,0.25); line-height: 1.4; }
.azureva-map-widget .res-card__badge--mer { background: #00dfff; }
.azureva-map-widget .res-card__badge--ocean { background: #2559eb; }
.azureva-map-widget .res-card__badge--montagne { background: #893a40; }
.azureva-map-widget .res-card__badge--campagne { background: #00a650; }
.azureva-map-widget .res-card__rating { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(255,255,255,0.95); color: var(--dark); padding: 4px 8px; font-size: 0.7rem; border-radius: 100px; display: flex; align-items: center; gap: 3px; font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.azureva-map-widget .res-card:hover .res-card__img img { transform: scale(1.05); }
.azureva-map-widget .res-card__price-overlay { position: absolute; bottom: 10px; right: 10px; z-index: 2; background: rgba(255,255,255,0.92); color: var(--dark); padding: 5px 10px; font-size: 0.7rem; border-radius: 100px; display: flex; align-items: center; gap: 3px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.azureva-map-widget .res-card__price-overlay strong { font-size: 0.9rem; font-weight: 700; color: var(--dark); }
.azureva-map-widget .res-card__body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.azureva-map-widget .res-card__loc { display: flex; align-items: center; gap: 4px; font-size: 0.76rem; color: var(--pink); font-weight: 500; margin-bottom: 6px; }
.azureva-map-widget .res-card__amenities { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.azureva-map-widget .res-card__amenity { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; color: var(--pink); opacity: 0.85; }
.azureva-map-widget .res-card__amenity img { width: 14px; height: 14px; object-fit: contain; filter: brightness(0) saturate(100%) invert(28%) sepia(90%) saturate(1600%) hue-rotate(318deg) brightness(100%) contrast(105%); }
.azureva-map-widget .res-card__name { font-family: 'Manrope', serif; font-size: 0.98rem; font-weight: 600; color: var(--dark); margin-bottom: 8px; }
.azureva-map-widget .res-card__desc { font-size: 0.8rem; color: var(--gray-500); line-height: 1.6; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.azureva-map-widget .res-card__footer { display: flex; align-items: center; padding-top: 12px; border-top: 1px solid var(--gray-100); }
.azureva-map-widget .res-card__cta { display: inline-block; width: 100%; background: var(--pink); color: white; font-weight: 600; font-size: 0.8rem; padding: 9px 16px; border-radius: 100px; text-align: center; transition: background var(--transition); }
.azureva-map-widget .res-card__cta:hover { background: var(--pink-hover); }

/* MAP SECTION */
@keyframes azureva-marker-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(249,60,100,0.3), 0 2px 6px rgba(0,0,0,0.3); } 50% { box-shadow: 0 0 0 6px rgba(249,60,100,0.15), 0 2px 6px rgba(0,0,0,0.3); } }
.azureva-map-widget .mapboxgl-ctrl-logo { display: none !important; }
.azureva-map-widget .mapboxgl-ctrl-attrib a[href*="improve"] { display: none !important; }

.azureva-map-widget .trip-calc { max-width: 100%; margin-top: 0; position: relative; }
.azureva-map-widget .trip-calc__form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-top: 16px; margin-bottom: 12px; padding: 10px; background: var(--gray-100); border-radius: var(--radius-lg); }
.azureva-map-widget .trip-calc__field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 180px; }
.azureva-map-widget .trip-calc__field label { font-size: 0.78rem; font-weight: 600; color: var(--dark); }
.azureva-map-widget .trip-calc__field input, .azureva-map-widget .trip-calc__field select { padding: 10px 14px; border: 1.5px solid var(--gray-200); border-radius: var(--radius); font-family: inherit; font-size: 0.88rem; color: var(--dark); background: white; outline: none; transition: border-color var(--transition); }
.azureva-map-widget .trip-calc__field input:focus, .azureva-map-widget .trip-calc__field select:focus { border-color: var(--pink); }
.azureva-map-widget .trip-calc__row { position: relative; display: flex; gap: 20px; align-items: flex-start; width: 100%; }
.azureva-map-widget .trip-calc__map { flex: 1 1 auto; min-width: 0; height: 550px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gray-200); }
.azureva-map-widget .trip-calc__result { display: none; padding: 10px 16px; background: rgba(255,255,255,0.95); border-radius: 100px; position: absolute; top: 12px; left: 12px; z-index: 10; box-shadow: 0 2px 12px rgba(0,0,0,0.12); }
.azureva-map-widget .trip-calc__result-grid { display: flex; gap: 16px; align-items: center; }
.azureva-map-widget .trip-calc__stat { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.azureva-map-widget .trip-calc__stat-value { font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 800; color: var(--pink); line-height: 1.2; }
.azureva-map-widget .trip-calc__stat-label { font-size: 0.78rem; color: var(--gray-500); }
.azureva-map-widget .trip-calc__dest-name { display: none; }
.azureva-map-widget .trip-calc__card-panel { flex: 0 0 360px; display: none; margin-left: auto; min-width: 0; }
.azureva-map-widget .trip-calc__card-panel .res-card { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.azureva-map-widget .trip-calc__placeholder { width: 100%; height: 550px; border-radius: var(--radius-lg); border: 2px dashed var(--gray-200); background: var(--gray-100); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; color: var(--gray-500); }
.azureva-map-widget .trip-calc__placeholder svg { color: var(--gray-400); }
.azureva-map-widget .trip-calc__placeholder-title { font-family: 'Manrope', sans-serif; font-size: 1rem; font-weight: 600; color: var(--dark); }
.azureva-map-widget .trip-calc__placeholder-text { font-size: 0.85rem; color: var(--gray-500); line-height: 1.5; max-width: 240px; }

.azureva-map-widget .map-tap-overlay { display: none; position: absolute; inset: 0; z-index: 10; background: transparent; border-radius: var(--radius-lg); cursor: pointer; }
.azureva-map-widget .map-tap-hint { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.62); color: white; font-size: 0.75rem; font-weight: 600; padding: 7px 16px; border-radius: 100px; pointer-events: none; white-space: nowrap; }
/* Fullscreen-mode floating elements (close button, bottom sheet, fullscreen
 * container) stay scoped under `.azureva-map-widget` — but on entry they're
 * teleported into a portal wrapper at <body> level that also carries the
 * `.azureva-map-widget` class. That keeps every scoped rule matching while
 * escaping any ancestor `transform` stacking context that would otherwise
 * trap our `position: fixed` elements behind the site header. */
.azureva-map-widget .map-close-btn { display: none; position: fixed; top: 14px; right: 14px; z-index: 10000001 !important; width: 44px; height: 44px; border-radius: 50%; background: white; border: 1.5px solid var(--gray-200); box-shadow: 0 2px 10px rgba(0,0,0,0.18); align-items: center; justify-content: center; cursor: pointer; font-size: 1.25rem; color: var(--pink); font-family: inherit; padding: 0; line-height: 1; }
.azureva-map-widget .map-close-btn.visible { display: flex !important; }

.azureva-map-widget .trip-calc--fullscreen { position: fixed !important; inset: 0 !important; z-index: 9999999 !important; margin: 0 !important; padding: 0 !important; background: white; overflow-y: auto; border-radius: 0 !important; display: flex; flex-direction: column; gap: 0; }
.azureva-map-widget .trip-calc--fullscreen .trip-calc__form { display: flex !important; flex-wrap: wrap !important; padding: 10px 12px; margin-bottom: 0 !important;  margin-top: 0 !important; border-radius: 0 !important; gap: 8px; }
.azureva-map-widget .trip-calc--fullscreen .trip-calc__field { min-width: 0 !important; flex: 1; }
.azureva-map-widget .trip-calc--fullscreen .trip-calc__field:first-child { flex: 0 0 100% !important; }
.azureva-map-widget .trip-calc--fullscreen .trip-calc__map { width: 100% !important; height: calc(100dvh - 230px) !important; border-radius: 0 !important; border: none !important; }
.azureva-map-widget .trip-calc--fullscreen .map-tap-overlay { display: none !important; }
/* The body-level portal also gets width: 100% so the teleported trip-calc fills the screen. */
.azureva-map-widget.azv-fullscreen-portal { position: static; width: 100%; }

.azureva-map-widget .map-bottom-sheet { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 10000002 !important; background: white; border-radius: 20px 20px 0 0; box-shadow: 0 -4px 24px rgba(0,0,0,0.18); transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); max-height: 55vh; max-width: 100vw; overflow-y: auto; overflow-x: hidden; }
.azureva-map-widget .map-bottom-sheet.open { transform: translateY(0); }
.azureva-map-widget .map-bottom-sheet__handle { width: 36px; height: 4px; background: var(--gray-200); border-radius: 2px; margin: 10px auto 6px; cursor: pointer; }
.azureva-map-widget .map-bottom-sheet .res-card { border: none; border-radius: 0; box-shadow: none; flex-direction: row; height: auto; min-height: 130px; width: 100%; max-width: 100%; }
.azureva-map-widget .map-bottom-sheet .res-card__img { width: 50%; height: auto; min-height: 130px; flex-shrink: 0; overflow: visible; }
.azureva-map-widget .map-bottom-sheet .res-card__price-overlay { white-space: nowrap; font-size: 0.58rem; padding: 3px 7px; gap: 2px; }
.azureva-map-widget .map-bottom-sheet .res-card__price-overlay strong { font-size: 0.76rem; }
/* min-width: 0 — without it the flex body refuses to shrink below its
 * nowrap children (CTA, loc line) and pushes the sheet past the viewport. */
.azureva-map-widget .map-bottom-sheet .res-card__body { padding: 10px 12px; justify-content: center; min-width: 0; }
.azureva-map-widget .map-bottom-sheet .res-card__desc { display: none; }
.azureva-map-widget .map-bottom-sheet .res-card__badges { display: none; }
.azureva-map-widget .map-bottom-sheet .res-card__rating { font-size: 0.6rem; padding: 3px 6px; }
.azureva-map-widget .map-bottom-sheet .res-card__cta { white-space: nowrap; font-size: 0.75rem; padding: 8px 10px; }

/* Body-level fullscreen rules — renamed from .map-fullscreen to .azureva-map-fullscreen
   so multiple widget instances don't toggle the same body class concurrently. */
body.azureva-map-fullscreen .azureva-map-widget .map-bottom-sheet { display: block; }
body.azureva-map-fullscreen .azureva-map-widget .mapboxgl-ctrl-group { display: none !important; }
body.azureva-map-fullscreen .azureva-map-widget .fuel-source-note { display: block; padding: 0 12px 8px; margin-top: 0; }
body.azureva-map-fullscreen .azureva-map-widget .trip-calc__stat-value { font-size: 0.55rem; }
body.azureva-map-fullscreen .azureva-map-widget .trip-calc__stat-label { font-size: 0.55rem; }
body.azureva-map-fullscreen .azureva-map-widget .trip-calc__result { padding: 6px 12px; }
body.azureva-map-fullscreen .azureva-map-widget .trip-calc__stat-label svg { width: 10px; height: 10px; }

/* Two-button footer (used when JetEngine relations produce >1 child link) */
.azureva-map-widget .res-card__footer--seasons { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--gray-100); }
.azureva-map-widget .res-card__footer--seasons .btn-sm { flex: 1; justify-content: center; }
.azureva-map-widget .btn-sm { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 100px; font-size: 0.78rem; font-weight: 600; transition: all var(--transition); text-decoration: none; }
.azureva-map-widget .btn-sm--pink { background: var(--pink); color: white; border: 1.5px solid transparent; }
.azureva-map-widget .btn-sm--pink:hover { background: var(--pink-hover); color: white; }
.azureva-map-widget .btn-sm--outline { border: 1.5px solid var(--pink); color: var(--pink); background: transparent; }
.azureva-map-widget .btn-sm--outline:hover { background: var(--pink-light); }

/* RESPONSIVE */

/* Tablet-ish — shrink the card panel so map keeps usable width */
@media (max-width: 1100px) {
    .azureva-map-widget .trip-calc__card-panel { flex-basis: 300px; }
}
@media (max-width: 900px) {
    .azureva-map-widget .trip-calc__card-panel { flex-basis: 260px; }
}

/* Mobile — stack vertically, drop the desktop form */
@media (max-width: 768px) {
    .azureva-map-widget .trip-calc__form { display: none; }
    .azureva-map-widget .fuel-source-note { display: none; }
    .azureva-map-widget .trip-calc__row { flex-direction: column; gap: 16px; }
    .azureva-map-widget .trip-calc { margin-top: 0; }
    .azureva-map-widget .trip-calc__map { flex: 1 1 auto !important; width: 100% !important; height: 260px !important; }
    .azureva-map-widget .trip-calc__card-panel { flex: 1 1 auto !important; width: 100% !important; max-width: 100%; margin-left: 0; }
    .azureva-map-widget .map-tap-overlay { display: block; }
    /* Hide zoom/compass controls on the compact mobile map (maquette parity). */
    .azureva-map-widget .mapboxgl-ctrl-group { display: none !important; }
    /* Mobile card proportions — mirror maquette index.html mobile res-card rules. */
    .azureva-map-widget .res-card__img { height: 160px; }
    .azureva-map-widget .res-card__body { padding: 3px 8px 8px; }
    .azureva-map-widget .res-card__name { font-size: 0.82rem; margin-bottom: 6px; }
    .azureva-map-widget .res-card__loc { font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .azureva-map-widget .res-card__loc > svg { display: none; }
    .azureva-map-widget .map-bottom-sheet .res-card__loc > svg { display: inline-block; }
    .azureva-map-widget .res-card__desc { display: none; }
    .azureva-map-widget .res-card__footer { padding-top: 8px; }
    .azureva-map-widget .res-card__cta { padding: 8px 12px; font-size: 0.72rem; }
    /* Dual-season buttons stack vertically so labels never overlap. */
    .azureva-map-widget .res-card__footer--seasons { flex-direction: column; gap: 6px; padding-top: 8px; margin-top: auto; }
    .azureva-map-widget .btn-sm { padding: 4px 10px; font-size: 0.7rem; }
    .azureva-map-widget .res-card__price-overlay { font-size: 0.58rem; padding: 3px 8px; }
    .azureva-map-widget .res-card__price-overlay strong { font-size: 0.75rem; }
    .azureva-map-widget .res-card__badges { top: 8px; left: 8px; }
    .azureva-map-widget .res-card__badge { font-size: 10px; padding: 3px 10px; }
    .azureva-map-widget .res-card__rating { font-size: 0.6rem; padding: 3px 6px; top: 8px; right: 8px; }
    /* Result pill: when a route was calculated in fullscreen and the user
     * exits to the compact view, the 4-stat pill overflows the 260 px map
     * on phones. Cap its width and scroll horizontally inside instead of
     * pushing the page wider than the viewport. */
    .azureva-map-widget .trip-calc__result {
        max-width: calc(100% - 24px);
        right: auto;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 8px 12px;
    }
    .azureva-map-widget .trip-calc__result::-webkit-scrollbar { display: none; }
    .azureva-map-widget .trip-calc__result-grid {
        flex-wrap: nowrap;
        min-width: max-content;
        gap: 10px;
    }
}
/* Mobile container padding is left to the Elementor parent — no override here. */

/* No-token placeholder shown when the Mapbox token isn't configured. */
.azureva-map-widget__placeholder { padding: 24px; border: 2px dashed #e5e5eb; background: #f4f4f8; color: #7a7a8a; text-align: center; border-radius: 16px; font-family: 'Noto Sans', sans-serif; }