/**
 * LDD Detail POI — Stili tab "Nei dintorni" sulla pagina di dettaglio alloggio
 *
 * Replica identica del tab POI del guest portal (ldd-portal.css righe 600-650)
 * ma con selettori scopati sotto .ldd-detail-poi-wrap per evitare qualsiasi
 * collisione con il tema Blocksy o altri stili della pagina pubblica.
 *
 * Le CSS variables sono locali al wrapper — identiche alla brand palette LDO
 * definita in ldd-portal.css righe 15-41.
 */

.ldd-detail-poi-wrap {
    --ldd-s:  #CB9C73;  /* sabbia */
    --ldd-sd: #A87A52;  /* sabbia dark */
    --ldd-sf: #F8F1E9;  /* sabbia fade */
    --ldd-g:  #6A8F70;  /* salvia */
    --ldd-gd: #4A6B50;  /* salvia dark */
    --ldd-gl: #EBF2EC;  /* salvia light */
    --ldd-dk: #1A1817;  /* dark */
    --ldd-mt: #9A8E82;  /* muted */
    --ldd-ml: #C4BBB3;  /* muted light */
    --ldd-cr: #FAF8F5;  /* cream */
    --ldd-cm: #F4EEE6;  /* cream mid */
    --ldd-cd: #EDE5DB;  /* cream dark */
    --ldd-wh: #FFFFFF;
    --ldd-br: #E6DDD4;  /* border */
    --ldd-bl: #EFE8E0;  /* border light */
    --ldd-er: #C05050;  /* error */
    --ldd-r8:  8px;
    --ldd-r12: 12px;
    --ldd-ts:  0 4px 16px rgba(168,122,82,.28);
}

/* Card contenitore principale (stesso pattern della .ldd-card del portale) */
.ldd-detail-poi-card {
    background: var(--ldd-wh);
    border: 1px solid var(--ldd-br);
    border-radius: var(--ldd-r12);
    padding: 0;
    overflow: hidden;
    margin-top: 16px;
}

/* Tabs categoria
 *
 * Default (desktop): i tab possono andare a capo se non entrano in una riga.
 * Mobile (≤640px): flex-nowrap con scroll orizzontale (swipe naturale).
 */
.ldd-detail-poi-wrap .ldd-poi-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 16px 6px;
    margin: 0;
}

.ldd-detail-poi-wrap .ldd-poi-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    border: 1.5px solid var(--ldd-br);
    background: var(--ldd-cm);
    color: var(--ldd-dk);
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
    line-height: 1;
}
.ldd-detail-poi-wrap .ldd-poi-tab:hover {
    background: var(--ldd-cd);
    border-color: var(--ldd-ml);
}
.ldd-detail-poi-wrap .ldd-poi-tab-active {
    background: var(--ldd-s) !important;
    color: var(--ldd-wh) !important;
    border-color: var(--ldd-s) !important;
    box-shadow: var(--ldd-ts) !important;
}
.ldd-detail-poi-wrap .ldd-poi-tab svg {
    flex-shrink: 0;
}

/* Bar selettore raggio */
.ldd-detail-poi-wrap .ldd-poi-radius-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--ldd-bl);
    border-top: 1px solid var(--ldd-bl);
}
.ldd-detail-poi-wrap .ldd-poi-radius-label {
    font-size: 11px;
    color: var(--ldd-mt);
    font-weight: 600;
    white-space: nowrap;
}
.ldd-detail-poi-wrap .ldd-poi-radius-bar {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
    flex: 1;
}
.ldd-detail-poi-wrap .ldd-poi-radius {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    border: 1.5px solid var(--ldd-br);
    background: transparent;
    color: var(--ldd-mt);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1;
}
.ldd-detail-poi-wrap .ldd-poi-radius:hover {
    background: var(--ldd-cm);
    color: var(--ldd-dk);
    border-color: var(--ldd-ml);
}
.ldd-detail-poi-wrap .ldd-poi-radius-active {
    background: var(--ldd-sf) !important;
    color: var(--ldd-sd) !important;
    border-color: var(--ldd-s) !important;
    font-weight: 700 !important;
}

/* Contenuto lista */
.ldd-detail-poi-wrap .ldd-poi-content {
    padding: 14px 16px;
    min-height: 160px;
}

/* Spinner loading */
.ldd-detail-poi-wrap .ldd-poi-loading {
    padding: 36px 0;
    text-align: center;
}
.ldd-detail-poi-wrap .ldd-poi-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--ldd-bl);
    border-top-color: var(--ldd-s);
    border-radius: 50%;
    margin: 0 auto 10px;
    animation: ldd-detail-poi-spin 0.7s linear infinite;
}
@keyframes ldd-detail-poi-spin {
    to { transform: rotate(360deg); }
}
.ldd-detail-poi-wrap .ldd-poi-loading-text {
    font-size: 12px;
    color: var(--ldd-mt);
    text-align: center;
}

/* Item singolo POI */
.ldd-detail-poi-wrap .ldd-poi-item {
    padding: 14px 0;
    border-bottom: 1px solid var(--ldd-bl);
    cursor: pointer;
    transition: background .15s, margin .15s, padding .15s;
}
.ldd-detail-poi-wrap .ldd-poi-item:hover {
    background: var(--ldd-cm);
    margin: 0 -16px;
    padding: 14px 16px;
}
.ldd-detail-poi-wrap .ldd-poi-item:last-child {
    border-bottom: none;
}
.ldd-detail-poi-wrap .ldd-poi-item-inner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.ldd-detail-poi-wrap .ldd-poi-sep {
    height: 1px;
    background: var(--ldd-br);
    margin: 0 -16px;
}
.ldd-detail-poi-wrap .ldd-poi-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: var(--ldd-r8);
    object-fit: cover;
    display: block;
}
.ldd-detail-poi-wrap .ldd-poi-main {
    flex: 1;
    min-width: 0;
}
.ldd-detail-poi-wrap .ldd-poi-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ldd-dk);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ldd-detail-poi-wrap .ldd-poi-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}
.ldd-detail-poi-wrap .ldd-poi-stars {
    color: var(--ldd-s);
    font-size: 11px;
}
.ldd-detail-poi-wrap .ldd-poi-stars-num {
    color: var(--ldd-mt);
}
.ldd-detail-poi-wrap .ldd-poi-reviews {
    font-size: 10px;
    color: var(--ldd-mt);
}
.ldd-detail-poi-wrap .ldd-poi-open {
    color: var(--ldd-g);
    font-weight: 600;
    font-size: 11px;
}
.ldd-detail-poi-wrap .ldd-poi-closed {
    color: var(--ldd-er);
    font-weight: 600;
    font-size: 11px;
}
.ldd-detail-poi-wrap .ldd-poi-type {
    font-size: 10px;
    color: var(--ldd-mt);
    background: var(--ldd-cd);
    padding: 1px 6px;
    border-radius: 10px;
}
.ldd-detail-poi-wrap .ldd-poi-addr {
    font-size: 11px;
    color: var(--ldd-mt);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ldd-detail-poi-wrap .ldd-poi-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
    margin-left: 8px;
}
.ldd-detail-poi-wrap .ldd-poi-dist {
    font-size: 11px;
    font-weight: 600;
    color: var(--ldd-g);
    white-space: nowrap;
}
.ldd-detail-poi-wrap .ldd-poi-chev {
    color: var(--ldd-s);
    display: flex;
    align-items: center;
}

/* Stato empty / error */
.ldd-detail-poi-wrap .ldd-poi-empty {
    text-align: center;
    padding: 28px 20px;
    font-size: 14px;
    color: var(--ldd-mt);
}
.ldd-detail-poi-wrap .ldd-poi-empty-icon {
    font-size: 32px;
    margin-bottom: 12px;
}
.ldd-detail-poi-wrap .ldd-poi-empty-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ldd-dk);
    margin-bottom: 8px;
}
.ldd-detail-poi-wrap .ldd-poi-empty-msg {
    font-size: 12px;
    line-height: 1.6;
    max-width: 340px;
    margin: 0 auto;
}

/* Responsive tweaks */
@media (max-width: 640px) {
    .ldd-detail-poi-wrap .ldd-poi-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 12px 12px 4px;
    }
    .ldd-detail-poi-wrap .ldd-poi-tabs::-webkit-scrollbar {
        display: none;
    }
    .ldd-detail-poi-wrap .ldd-poi-tab {
        padding: 7px 11px;
        font-size: 11px;
        flex-shrink: 0;
    }
    .ldd-detail-poi-wrap .ldd-poi-content {
        padding: 12px;
    }
    .ldd-detail-poi-wrap .ldd-poi-thumb {
        width: 52px;
        height: 52px;
    }
}