/**
 * Park Map SVG Styles
 *
 * @package ParkBooking
 */

/* ================================
   STEP 2: TOP (people | info) sopra, mappa full-width sotto
   ================================ */
.pb-step2-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 16px;
}
.pb-step2-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}
.pb-step2-card {
    background: #fff;
    border: 1px solid rgba(45,110,106,0.15);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 4px 16px rgba(45,110,106,0.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.pb-step2-card .pb-people-hint { margin: 0; }
.pb-step2-info { gap: 10px; }
.pb-step2-info .pb-map-helper {
    margin: 0;
    background: #f0faf9;
    border: 1px solid #b2d8d5;
    border-radius: 10px;
    padding: 12px 14px;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
}
.pb-step2-info .pb-capacity-hint {
    margin: 0;
    border-radius: 10px;
}
.pb-step2-info .pb-selection-info {
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(245,158,11,0.10);
    border: 1px solid rgba(245,158,11,0.35);
}
.pb-step2-info .pb-selection-info p { margin: 4px 0; font-size: 14px; }

.pb-step2-map-wrap {
    position: relative;
}

@media (max-width: 760px) {
    .pb-step2-top {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

.pb-park-map {
    position: relative;
    width: 100%;
    max-width: 100%;
    /* aspect-ratio iniettato via JS dalle dimensioni reali dell'immagine.
       Il valore qui sotto e` solo un fallback prima del fetch della mappa. */
    aspect-ratio: 4 / 3;
    /* Sfondo "carta da parco" — crema chiaro con texture diagonale sottile */
    background:
        linear-gradient(135deg, #fefefb 0%, #f5f4ec 100%),
        repeating-linear-gradient(45deg, rgba(168,147,106,0.05) 0 2px, transparent 2px 14px);
    background-blend-mode: multiply;
    border: 1px solid rgba(45, 110, 106, 0.20);
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        inset 0 0 0 4px #ffffff,
        0 10px 30px -8px rgba(45, 110, 106, 0.18),
        0 2px 4px rgba(0, 0, 0, 0.05);
    margin: 0 auto;
    /* Block native browser gestures so pinch-zoom drives the SVG viewBox
       instead of the page. */
    touch-action: none;
    cursor: grab;
}
.pb-park-map::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 16px;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(45,110,106,0.07) 100%);
    z-index: 1;
}
.pb-park-map:active { cursor: grabbing; }
.pb-park-map svg { display: block; width: 100%; height: 100%; position: relative; z-index: 2; }
/* Fallback for browsers without aspect-ratio support (Safari < 15): */
@supports not (aspect-ratio: 1 / 1) {
    .pb-park-map { min-height: 420px; }
}

.pb-capacity-hint {
    margin: 12px 0;
    padding: 10px 14px;
    border-radius: 8px;
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    color: #856404;
    font-size: 14px;
    font-weight: 500;
}
.pb-people-hint {
    font-size: 12px;
    color: #666;
    margin: 8px 0 0;
}

.pb-map-controls {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    display: flex;
    gap: 8px;
}

.pb-btn-icon {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s;
}

.pb-btn-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.pb-btn-auto-suggest {
    width: auto;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
    background: var(--pb-primary, #8B2E3B);
    color: #fff;
}

.pb-zoom-controls {
    display: flex;
    gap: 4px;
}

.pb-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 18px;
    padding: 14px 18px;
    background: #ffffff;
    border: 1px solid rgba(45, 110, 106, 0.15);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(45, 110, 106, 0.05);
    font-size: 13px;
}

.pb-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Mini badge piatto coerente con il rendering dei pin numerati sulla mappa */
.pb-legend-pin {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid #fff;
    flex-shrink: 0;
    background: currentColor;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.pb-legend-pin--available   { color: #2d6e6a; }
.pb-legend-pin--selected    { color: #f59e0b; }
.pb-legend-pin--unavailable { color: #dc2626; opacity: 0.55; }
.pb-legend-pin--suggested   { color: #A8936A; }

/* Legacy fallback (vecchia legenda con .pb-legend-color quadrati) */
.pb-legend-color {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}

.pb-selection-info {
    margin-top: 16px;
    padding: 16px;
    background: rgba(168,147,106,.1);
    border: 2px solid var(--pb-secondary, #A8936A);
    border-radius: var(--pb-radius, 8px);
}

.pb-map-error {
    text-align: center;
    padding: 60px 20px;
    color: #e53e3e;
}

/* ── Marker tooltip card (hover / click on a table marker) ── */
.pb-marker-tooltip {
    position: absolute;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.08);
    padding: 12px 16px;
    min-width: 180px;
    z-index: 20;
    pointer-events: auto;
    font-size: 14px;
    line-height: 1.4;
}
.pb-marker-tooltip::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 18px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff;
    filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.06));
}
.pb-marker-tooltip__title {
    font-weight: 700;
    color: var(--pb-secondary, #2d6e6a);
    margin-bottom: 4px;
}
.pb-marker-tooltip__meta {
    color: #555;
    font-size: 13px;
    margin-bottom: 10px;
}
.pb-marker-tooltip__btn {
    display: inline-block;
    width: 100%;
    padding: 7px 12px;
    border: none;
    border-radius: 6px;
    background: var(--pb-secondary, #2d6e6a);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: opacity 0.15s;
}
.pb-marker-tooltip__btn:hover { opacity: 0.88; }
.pb-marker-tooltip__btn--deselect {
    background: #f59e0b;
    color: #fff;
}
.pb-marker-tooltip__btn--disabled {
    background: #B8B0A2;
    color: #fff;
    cursor: not-allowed;
    opacity: 0.7;
}

/* ── Map helper bar below the map (people / tables required counter) ── */
.pb-map-helper {
    margin-top: 12px;
    padding: 10px 16px;
    background: #f0faf9;
    border: 1px solid #b2d8d5;
    border-radius: 8px;
    font-size: 14px;
    color: #1a4d4a;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    align-items: center;
}
.pb-map-helper p { margin: 0; }
.pb-map-helper strong { color: var(--pb-secondary, #2d6e6a); }

@media (max-width: 640px) {
    /* On mobile we keep the same aspect ratio — no min-height override,
       the container shrinks proportionally with the viewport width. */
    .pb-map-controls {
        top: 8px;
        right: 8px;
    }
    .pb-map-legend {
        gap: 8px;
        font-size: 12px;
    }
    .pb-btn-icon {
        width: 44px;
        height: 44px;
    }
}