/* Pagina scheda struttura NON partner (app/views/non_partners/dettaglio.twig).
   Riusa lo scheletro di partners.css ma con contenuti/markup diversi:
   qui i fix specifici per non-partner, per non toccare la pagina partner. */

/* mappa statica */
.np-map-wrap {
    display: block;
    position: relative;
    margin-top: 10px;
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    height: 80px;
    background: #e8ecf0;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.np-map-wrap svg { width: 100%; height: 100%; display: block; }
.np-map-pin {
    position: absolute; left: 50%; top: 44%;
    transform: translate(-50%, -100%);
    display: flex; flex-direction: column; align-items: center;
}
.np-map-pin-dot {
    width: 14px; height: 14px;
    background: var(--primary-color);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.np-map-pin-shadow { width: 6px; height: 3px; background: rgba(0,0,0,.15); border-radius: 50%; margin-top: 2px; }
.np-map-label {
    position: absolute; bottom: 8px; left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 6px; padding: 6px 14px;
    font-size: 13px; font-weight: 700; color: #1a73e8;
    box-shadow: 0 2px 10px rgba(0,0,0,.22);
    white-space: nowrap; pointer-events: none;
    display: flex; align-items: center; gap: 6px;
    border: 1px solid #e0e0e0;
}
.np-map-label .fa { font-size: 14px; color: #ea4335; }

/* gallery nav */
.np-gallery-wrap {
    display: flex; align-items: center; gap: 8px;
}
.np-gallery-btn {
    flex-shrink: 0;
    width: 32px !important; height: 32px !important;
    min-width: 32px !important; max-width: 32px !important;
    padding: 0 !important;
    background: var(--primary-color); border: none;
    border-radius: 50% !important;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.25);
    font-size: 13px; color: #fff; transition: opacity .15s;
    line-height: 1; overflow: hidden;
}
.np-gallery-btn:hover { opacity: .8; }
.np-partner-gallery { flex: 1; min-width: 0; }

/* gallery partner scrollabile */
.np-partner-gallery {
    display: flex; gap: 16px;
    overflow-x: auto; padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.np-partner-gallery::-webkit-scrollbar { height: 4px; }
.np-partner-gallery::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 4px; }
.np-partner-gallery::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.np-partner-card {
    flex: 0 0 230px; scroll-snap-align: start;
    display: flex; flex-direction: column;
}

/* pannello finto bloccato */
.np-locked-panel { position: relative; }
.np-locked-blur { filter: blur(2.5px); pointer-events: none; user-select: none; }
.np-locked-overlay {
    position: absolute; inset: 0;
    background: rgba(255,255,255,.72);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 8px; text-align: center; padding: 16px;
    border-radius: 10px;
}
.np-locked-icon {
    width: 44px; height: 44px;
    background: var(--primary-color); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 18px;
}
.np-locked-overlay strong { font-size: 14px; color: #222; }
.np-locked-overlay small { font-size: 12px; color: #666; line-height: 1.4; }
.np-locked-cta {
    margin-top: 2px;
    background: var(--primary-color); color: #fff;
    padding: 8px 18px; border-radius: 7px;
    font-weight: 700; font-size: 13px;
    text-decoration: none; display: inline-block;
}
.np-locked-cta:hover { opacity: .88; color: #fff; text-decoration: none; }

/* pannello CTA benefit */
.np-cta-benefits { list-style: none; margin: 10px 0 14px; padding: 0; }
.np-cta-benefits li { font-size: 13px; padding: 4px 0; color: #333; display: flex; gap: 8px; align-items: baseline; }
.np-cta-benefits li .fa { color: #27ae60; font-size: 12px; flex-shrink: 0; }
.np-cta-btn {
    display: block; width: 100%;
    background: var(--primary-color); color: #fff;
    text-align: center; padding: 11px;
    border-radius: 8px; font-weight: 700; font-size: 14px;
    text-decoration: none; border: none; cursor: pointer;
    transition: opacity .2s;
}
.np-cta-btn:hover { opacity: .88; color: #fff; text-decoration: none; }
.np-cta-footer { text-align: center; font-size: 11px; color: #aaa; padding: 8px 0 0; }

/* Bug overflow orizzontale mobile: la pagina eredita .max-w-2xl da main.css
   (max-width: 1536px !important, valore Tailwind sbagliato per "2xl"), che dentro
   il flex column .partner-page-body (align-items:center) si comporta come width
   intrinseca invece che come limite, e sfora il viewport. Scoped qui per non
   toccare le altre pagine che usano .max-w-2xl (partner compresa). */
.non-partner-page .padding-section.max-w-2xl {
    width: 100%;
    max-width: 100% !important;
}

@media (max-width: 991px) {
    .partner-right { position: static !important; }
    .booking-panel {
        position: relative !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
}

/* Layout colonna sinistra/destra via grid: su desktop identico all'originale
   (sinistra sopra: indirizzo + partner vicini, destra a fianco per tutta l'altezza),
   su mobile "Strutture partner vicine" va in fondo dopo tutti gli altri blocchi. */
.np-detail-row {
    display: grid;
    grid-template-columns: 66.6667% 33.3333%;
    align-items: start;
}
.np-detail-row .partner-left,
.np-detail-row .np-partner-vicini-block,
.np-detail-row .partner-right {
    width: auto;
}
.np-detail-row .partner-left { grid-column: 1; grid-row: 1; }
.np-detail-row .np-partner-vicini-block { grid-column: 1; grid-row: 2; }
.np-detail-row .partner-right { grid-column: 2; grid-row: 1 / span 2; }

@media (max-width: 991px) {
    .np-detail-row {
        display: flex;
        flex-direction: column;
    }
    .np-detail-row .partner-left,
    .np-detail-row .partner-right,
    .np-detail-row .np-partner-vicini-block {
        width: 100%;
        min-width: 0;
        flex-shrink: 1;
    }
    .np-detail-row .partner-left { order: 1; }
    .np-detail-row .partner-right { order: 2; }
    .np-detail-row .np-partner-vicini-block { order: 3; margin-top: 30px; }
}

/* Hint visivo che la navbar tab scrolla in orizzontale su mobile (i tab non vanno a capo) */
@media (max-width: 767px) {
    .non-partner-page .partner-navbar {
        position: relative;
    }
    .non-partner-page .partner-navbar::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 24px;
        height: 100%;
        background: linear-gradient(to right, transparent, var(--background-color));
        pointer-events: none;
    }
}