/* ============================================================
 *  white-label-embed.css
 *  Override applicato SOLO quando il template white-label viene
 *  caricato dentro a un <iframe> di terze parti (es. plugin
 *  WordPress, sito esterno). Il rilevamento è in layout.blade.php
 *  tramite snippet inline che aggiunge `html.wl-embed` se
 *  window.self !== window.top.
 *
 *  Obiettivo: far adattare TUTTO il white-label alla larghezza
 *  reale dell'iframe (anche quando è stretto), forzando un layout
 *  mono-colonna sopra le breakpoint Bootstrap. Niente più overflow
 *  orizzontale dal lato WP.
 * ============================================================ */

html.wl-embed,
html.wl-embed body{
    background:transparent;
    margin:0;
    padding:0;
}

/* Il body in embed può vivere senza margini esterni del tema WP */
html.wl-embed body{
    min-width:0;
}

/* Bootstrap container: in embed mai un max-width fisso, sempre 100% */
html.wl-embed .container,
html.wl-embed .container-fluid,
html.wl-embed .white-label-container{
    width:100% !important;
    max-width:100% !important;
    padding-left:.75rem !important;
    padding-right:.75rem !important;
    margin-left:0 !important;
    margin-right:0 !important;
}

/* Forziamo tutte le colonne lg-* a piena larghezza: in embed
   non vogliamo sidebar laterali che spezzano il layout su iframe
   stretti. */
html.wl-embed [class*="col-lg-"],
html.wl-embed [class*="col-xl-"]{
    flex:0 0 100% !important;
    max-width:100% !important;
    width:100% !important;
}

/* Listing/products grid: in embed teniamo 2 colonne su md
   (sotto 768 resta col-12 nativo). Evita card troppo strette. */
html.wl-embed .col-md-2,
html.wl-embed .col-md-3,
html.wl-embed .col-md-4{
    flex:0 0 50% !important;
    max-width:50% !important;
}
@media (max-width: 540px){
    html.wl-embed .col-md-2,
    html.wl-embed .col-md-3,
    html.wl-embed .col-md-4{
        flex:0 0 100% !important;
        max-width:100% !important;
    }
}

/* Card sidebar Search/Filter: full-width con margine inferiore.
   La sidebar diventa un blocco impilato sopra ai risultati. */
html.wl-embed .card{
    margin-bottom:1rem;
}

/* Navbar/footer più compatti, niente loghi giganti */
html.wl-embed .navbar{
    padding-top:.5rem;
    padding-bottom:.5rem;
}
html.wl-embed .navbar-brand img,
html.wl-embed .navbar img{
    max-height:48px;
    width:auto;
}

/* Form-availability (date range + ospiti) — su iframe stretti
   evitiamo che le 3 colonne sm si stringano troppo. */
html.wl-embed .col-sm-3{
    flex:0 0 50% !important;
    max-width:50% !important;
}
@media (max-width: 540px){
    html.wl-embed .col-sm-3,
    html.wl-embed .col-sm-6{
        flex:0 0 100% !important;
        max-width:100% !important;
    }
}

/* Tipografia: titoli più contenuti, niente h1 da 3rem in embed */
html.wl-embed h1{font-size:1.6rem;line-height:1.25}
html.wl-embed h2{font-size:1.3rem;line-height:1.3}
html.wl-embed h3{font-size:1.1rem;line-height:1.35}

/* Bottoni full-width sulle card embedded — più "tappabili" */
html.wl-embed .card .btn-block,
html.wl-embed .card .btn{
    width:100%;
}

/* Tabelle responsive: forziamo overflow interno sul wrapper, non
   sull'iframe genitore lato WP */
html.wl-embed .table-responsive{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

/* Padding generale ridotto per non sprecare pixel preziosi */
html.wl-embed .py-5,
html.wl-embed .my-5{padding-top:1.25rem !important;padding-bottom:1.25rem !important}
html.wl-embed .px-5,
html.wl-embed .mx-5{padding-left:1rem !important;padding-right:1rem !important}

/* ============================================================
 *  EMBED — Search sidebar, Filtri, Card listing
 *  Override mirati per la pagina /white-label/?type=room (e affini).
 *  Obiettivi:
 *   - Nascondere il box "Cerca" interno (l'host WP ha già il proprio).
 *   - Trasformare i filtri in una card collassabile (dropdown).
 *   - Rendere le card listing compatte: immagine sopra, corpo sotto.
 * ============================================================ */

/* Search sidebar interno: in embed l'utente ha già il form lato WP
   ([beetroot_search]) e arriva qui con i parametri già impostati. Mostrare
   un secondo form è ridondante e ruba spazio verticale. */
html.wl-embed .listing-sidebar-search{
    display:none !important;
}

/* ─── Filtri come dropdown collassabile ─── */
html.wl-embed .listing-filters{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    margin:0 0 .85rem;
    overflow:hidden;
    box-shadow:0 1px 2px rgba(0,0,0,.03);
}
html.wl-embed .listing-filters .listing-filters__header{
    cursor:pointer;
    user-select:none;
    margin:0;
    padding:.7rem .9rem;
    background:#fafbfc;
    border-bottom:0;
    display:flex;
    align-items:center;
    font-weight:600;
    font-size:.95rem;
    color:#2c3e50;
}
html.wl-embed .listing-filters .listing-filters__header::after{
    content:'\f078'; /* fa-chevron-down */
    font-family:'Font Awesome 6 Free','Font Awesome 5 Free','FontAwesome';
    font-weight:900;
    margin-left:auto;
    font-size:.78rem;
    color:#888;
    transition:transform .2s ease;
}
html.wl-embed .listing-filters.is-open .listing-filters__header::after{
    transform:rotate(180deg);
}
html.wl-embed .listing-filters .listing-filters__reset{
    margin-left:auto;
    margin-right:.6rem;
    background:transparent;
    border:0;
    color:#666;
    font-size:.78rem;
    cursor:pointer;
}
html.wl-embed .listing-filters .listing-filters__reset:hover{
    color:#1f7a4c;
}
html.wl-embed .listing-filters .listing-filters__fields{
    max-height:0;
    overflow:hidden;
    padding:0 .9rem;
    transition:max-height .28s ease, padding .28s ease;
}
html.wl-embed .listing-filters.is-open .listing-filters__fields{
    max-height:1200px;
    padding:.9rem;
    border-top:1px solid #eef0f3;
}
html.wl-embed .listing-filters .listing-filters__field{
    margin-bottom:.6rem;
}
html.wl-embed .listing-filters .listing-filters__field label{
    font-size:.72rem;
    text-transform:uppercase;
    color:#888;
    font-weight:600;
    margin-bottom:.2rem;
    display:block;
}
html.wl-embed .listing-filters select.form-control{
    height:auto;
    padding:.4rem .55rem;
    font-size:.9rem;
}

/* ─── Card listing compatte ─── */
html.wl-embed .card-availability,
html.wl-embed .listing-card--rich{
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:0;
    margin:0 0 .9rem;
    background:#fff;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
}
/* Stack image sopra al body, anche su sm/md/lg. La card experience
   usa col-sm-2/col-sm-8/col-sm-2 (immagine | body | data+prezzo+book):
   senza override la colonna destra si schiaccia a ~17% e taglia il
   pulsante BOOK NOW. */
html.wl-embed .card-availability > .row > [class*="col-sm-"],
html.wl-embed .card-availability > .row > [class*="col-md-"],
html.wl-embed .card-availability > .row > [class*="col-lg-"],
html.wl-embed .listing-card--rich > .row > [class*="col-sm-"],
html.wl-embed .listing-card--rich > .row > [class*="col-md-"],
html.wl-embed .listing-card--rich > .row > [class*="col-lg-"]{
    flex:0 0 100% !important;
    max-width:100% !important;
    width:100% !important;
}
html.wl-embed .card-availability .image,
html.wl-embed .listing-card--rich .image{
    position:relative;
    width:100%;
    height:170px;
    overflow:hidden;
    border-radius:0;
}
html.wl-embed .card-availability .image img,
html.wl-embed .listing-card--rich .image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
html.wl-embed .card-availability .no-image,
html.wl-embed .listing-card--rich .no-image{
    width:100%;
    height:170px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f3f4f6;
    color:#bbb;
    font-size:2rem;
}

/* Tag tipologia / premium: più piccoli e meno invasivi */
html.wl-embed .listing-typology-tag,
html.wl-embed .listing-premium-tag{
    font-size:.7rem;
    padding:.22rem .55rem;
    border-radius:14px;
    line-height:1.1;
}

/* Corpo card */
html.wl-embed .listing-body{
    padding:.85rem 1rem 1rem;
}
html.wl-embed .listing-structure{
    font-size:.78rem;
    color:#777;
    margin-bottom:.1rem;
}
html.wl-embed .listing-structure a{
    color:#777;
    text-decoration:none;
}
html.wl-embed .listing-title{
    font-size:1.05rem !important;
    line-height:1.3;
    margin:0 0 .3rem;
    font-weight:600;
}
html.wl-embed .listing-location{
    font-size:.82rem;
    color:#666;
    margin-bottom:.4rem;
}
html.wl-embed .listing-location i{
    color:#999;
    margin-right:.25rem;
}
html.wl-embed .listing-pills{
    display:flex;
    flex-wrap:wrap;
    gap:.3rem;
    margin:.3rem 0 .5rem;
}
html.wl-embed .amenity-pill{
    font-size:.72rem;
    padding:.22rem .55rem;
    border-radius:12px;
    background:#f3f4f6;
    color:#444;
    border:0;
    display:inline-flex;
    align-items:center;
    gap:.25rem;
    line-height:1.1;
}

/* Bottone di selezione/prenotazione full-width nella card */
html.wl-embed .card-availability .btn,
html.wl-embed .listing-card--rich .btn{
    width:100%;
    padding:.55rem .8rem;
    font-size:.92rem;
}

/* ============================================================
 *  EMBED — Pagina /white-label/products (catalogo)
 *  Allineamento visivo con le card listing/experience: titolo
 *  ridotto, form filtri stack su narrow, card immagine in cima,
 *  body compatto, bottoni nel verde Beetroot full-width.
 * ============================================================ */

/* Titolo Products */
html.wl-embed .wl-products-title{
    font-size:1.25rem !important;
    margin:.75rem 0 1rem !important;
    text-align:left !important;
    font-weight:600;
}

/* ─── Form filtri prodotti: layout pulito a 3 sezioni ───
   1) Search bar prominente in cima (con icona magnifier)
   2) Riga filtri (categoria, tipo) con chevron custom
   3) Actions row (reset link + submit verde con icona filter) */
html.wl-embed .wl-products-filters{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:1rem;
    margin:0 0 1.25rem !important;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
    display:flex;
    flex-direction:column;
    gap:.85rem;
}

/* ─── Search bar prominente con icona ─── */
html.wl-embed .wl-products-filters__search{
    position:relative;
}
html.wl-embed .wl-products-filters__search-icon{
    position:absolute;
    left:.95rem;
    top:50%;
    transform:translateY(-50%);
    color:#9aa0a6;
    font-size:.95rem;
    pointer-events:none;
}
html.wl-embed .wl-products-filters__search-input{
    width:100%;
    height:auto;
    padding:.7rem .9rem .7rem 2.4rem !important;
    font-size:.95rem;
    border:1px solid #d8dde2;
    border-radius:8px;
    background:#fff;
    color:#222;
    transition:border-color .15s ease, box-shadow .15s ease;
    box-shadow:none;
}
html.wl-embed .wl-products-filters__search-input:focus{
    border-color:#1f7a4c;
    box-shadow:0 0 0 3px rgba(31,122,76,.12);
    outline:0;
}
html.wl-embed .wl-products-filters__search-input::placeholder{
    color:#9aa0a6;
}

/* ─── Riga filtri ─── */
html.wl-embed .wl-products-filters__row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.75rem;
}
@media (max-width: 480px){
    html.wl-embed .wl-products-filters__row{
        grid-template-columns:1fr;
    }
}

html.wl-embed .wl-products-filters__field label{
    display:block;
    font-size:.78rem;
    color:#555;
    font-weight:600;
    margin:0 0 .3rem;
    text-transform:none;
    letter-spacing:0;
}

/* Custom select con chevron SVG inline (niente dipendenze) */
html.wl-embed .wl-select.form-control{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    width:100%;
    height:auto;
    padding:.6rem 2.2rem .6rem .8rem;
    font-size:.92rem;
    color:#222;
    background-color:#fff;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23556' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right .75rem center;
    background-size:.7rem;
    border:1px solid #d8dde2;
    border-radius:8px;
    cursor:pointer;
    transition:border-color .15s ease, box-shadow .15s ease;
    box-shadow:none;
}
html.wl-embed .wl-select.form-control:focus,
html.wl-embed .wl-select.form-control:hover{
    border-color:#1f7a4c;
    outline:0;
}
html.wl-embed .wl-select.form-control:focus{
    box-shadow:0 0 0 3px rgba(31,122,76,.12);
}

/* ─── Actions: reset link + submit button ─── */
html.wl-embed .wl-products-filters__actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    flex-wrap:wrap;
}
html.wl-embed .wl-products-filters__reset{
    color:#666;
    text-decoration:none;
    font-size:.85rem;
    font-weight:500;
    padding:.4rem 0;
    transition:color .15s ease;
}
html.wl-embed .wl-products-filters__reset:hover{
    color:#155f3a;
    text-decoration:underline;
}
html.wl-embed .wl-products-filters__reset i{
    color:#888;
}

html.wl-embed .wl-products-filters__submit{
    margin-left:auto;
    background:#1f7a4c !important;
    border:0 !important;
    color:#fff !important;
    font-weight:600;
    font-size:.9rem;
    padding:.65rem 1.5rem !important;
    border-radius:8px !important;
    cursor:pointer;
    transition:background .15s ease, transform .05s ease;
    display:inline-flex;
    align-items:center;
    line-height:1.2;
}
html.wl-embed .wl-products-filters__submit:hover{
    background:#155f3a !important;
}
html.wl-embed .wl-products-filters__submit:active{
    transform:translateY(1px);
}
@media (max-width: 480px){
    html.wl-embed .wl-products-filters__submit{
        width:100%;
        justify-content:center;
        margin-left:0;
    }
    html.wl-embed .wl-products-filters__actions{
        flex-direction:column-reverse;
        align-items:stretch;
    }
    html.wl-embed .wl-products-filters__reset{
        text-align:center;
    }
}

/* Card prodotto: stessa lingua visiva delle listing card */
html.wl-embed .wl-product-card{
    background:#fff !important;
    border:1px solid #e5e7eb !important;
    border-radius:10px !important;
    box-shadow:0 1px 3px rgba(0,0,0,.04) !important;
    margin:0 !important;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}
html.wl-embed .wl-product-card:hover{
    box-shadow:0 4px 12px rgba(0,0,0,.08) !important;
    transform:none;
}

/* Media wrapper: contiene immagine + stock badge in overlay */
html.wl-embed .wl-product-card__media{
    position:relative;
    width:100%;
    height:170px;
    overflow:hidden;
}
html.wl-embed .wl-product-card .card-img-top{
    width:100%;
    height:170px;
    object-fit:cover;
    border-radius:0 !important;
    display:block;
}

/* Stock badge in overlay top-right sull'immagine */
html.wl-embed .wl-product-stock{
    position:absolute;
    top:.6rem;
    right:.6rem;
    z-index:2;
    font-size:.7rem;
    font-weight:600;
    padding:.25rem .55rem;
    border-radius:14px;
    line-height:1.1;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    box-shadow:0 1px 3px rgba(0,0,0,.15);
}
html.wl-embed .wl-product-stock--ok{
    background:rgba(31,122,76,.92);
    color:#fff;
}
html.wl-embed .wl-product-stock--low{
    background:rgba(253,196,30,.95);
    color:#5c3d00;
}
html.wl-embed .wl-product-stock--out{
    background:rgba(108,117,125,.92);
    color:#fff;
}
html.wl-embed .wl-product-stock--request{
    background:rgba(31,122,76,.92);
    color:#fff;
}

html.wl-embed .wl-product-card .card-body{
    background:#fff !important;
    border-radius:0 !important;
    padding:.85rem 1rem 1rem !important;
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    gap:.35rem;
}

/* Categoria (sopra il titolo, uppercase tenuissimo) */
html.wl-embed .wl-product-card__category{
    font-size:.7rem !important;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#888 !important;
    margin:0 !important;
    font-weight:600;
}

/* Titolo: sotto la categoria, più peso */
html.wl-embed .wl-product-card .card-title{
    font-size:1rem;
    font-weight:600;
    margin:0;
    line-height:1.3;
    color:#222;
}

/* Estratto descrizione: grigio, line-clamp 2 */
html.wl-embed .wl-product-card__excerpt{
    font-size:.82rem;
    color:#666;
    margin:0;
    line-height:1.4;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* Riga varianti: icona + count */
html.wl-embed .wl-product-card__variants{
    font-size:.78rem;
    color:#555;
    margin:0;
    display:flex;
    align-items:center;
    gap:.3rem;
}
html.wl-embed .wl-product-card__variants i{
    color:#1f7a4c;
}

/* Riga prezzo + label "Su richiesta" */
html.wl-embed .wl-product-card__price-row{
    margin:.2rem 0 .55rem;
    display:flex;
    align-items:baseline;
    gap:.4rem;
}
html.wl-embed .wl-product-card__price{
    font-size:1.05rem;
    font-weight:700;
    color:#1f7a4c;
    line-height:1.1;
}
html.wl-embed .wl-product-card__price--request{
    font-size:.85rem;
    font-weight:600;
    color:#7a5b00;
    background:#fff3cd;
    padding:.25rem .55rem;
    border-radius:6px;
    border:1px solid #f0d97a;
}

/* CTA "Vedi prodotto" allineata in fondo alla card */
html.wl-embed .wl-product-card .btn{
    margin-top:auto;
}

/* Bottone "View product": verde Beetroot, full-width, stessa lingua dei
   bottoni listing/experience */
html.wl-embed .wl-product-card .btn,
html.wl-embed .wl-product-card .btn-outline-primary{
    width:100%;
    background:#1f7a4c !important;
    border:1px solid #1f7a4c !important;
    color:#fff !important;
    font-weight:600;
    padding:.5rem .75rem;
    font-size:.88rem;
    border-radius:6px;
}
html.wl-embed .wl-product-card .btn:hover,
html.wl-embed .wl-product-card .btn-outline-primary:hover{
    background:#155f3a !important;
    border-color:#155f3a !important;
    color:#fff !important;
}

/* Griglia prodotti: in embed sotto 540px una colonna, da 540 in su due */
html.wl-embed .row.g-3 > .col-sm-6.col-md-4{
    flex:0 0 100% !important;
    max-width:100% !important;
}
@media (min-width: 540px){
    html.wl-embed .row.g-3 > .col-sm-6.col-md-4{
        flex:0 0 50% !important;
        max-width:50% !important;
    }
}

/* Paginazione più compatta */
html.wl-embed .pagination{
    flex-wrap:wrap;
    gap:.15rem;
    justify-content:center;
}
html.wl-embed .pagination .page-link{
    padding:.35rem .65rem;
    font-size:.85rem;
}

/* ─── Link "Torna al catalogo" (product detail) ─── */
html.wl-embed .wl-back-link{
    display:inline-flex;
    align-items:center;
    color:#1f7a4c;
    text-decoration:none;
    font-size:.88rem;
    font-weight:500;
    padding:.35rem 0;
    transition:color .15s ease;
}
html.wl-embed .wl-back-link:hover,
html.wl-embed .wl-back-link:focus{
    color:#155f3a;
    text-decoration:underline;
}
html.wl-embed .wl-product-detail__back{
    margin-bottom:1rem !important;
}

/* ============================================================
 *  EMBED — Pagina last-step / booking summary
 *  (resources/views/white-label/last-step.blade.php)
 *  In iframe stretti l'Order summary a destra si schiaccia e il
 *  testo va a capo per ogni parola. Forziamo stack e ridisegniamo
 *  la card summary in modo coerente con il resto del white-label.
 * ============================================================ */

/* Titolo "What you are purchasing" / "Riepilogo ordine" più contenuto */
html.wl-embed .booking-page > h4{
    font-size:1.2rem !important;
    margin:.75rem 0 1.25rem !important;
    text-align:left !important;
}

/* Stack delle due colonne principali (cart items 8/12 | summary 4/12) */
html.wl-embed .booking-page > .col-sm-8,
html.wl-embed .booking-page > .col-sm-4{
    flex:0 0 100% !important;
    max-width:100% !important;
    width:100% !important;
}
html.wl-embed .booking-page > .col-sm-4{
    margin-top:1rem;
}

/* Cart card: immagine + body anche qui in stack */
html.wl-embed .booking-page .cart-card,
html.wl-embed .booking-page .card-availability{
    border:1px solid #e5e7eb !important;
    border-radius:10px !important;
    margin:0 0 .9rem !important;
    background:#fff;
    overflow:hidden;
}
html.wl-embed .booking-page .cart-card > .row > [class*="col-"]{
    flex:0 0 100% !important;
    max-width:100% !important;
    width:100% !important;
}
html.wl-embed .booking-page .cart-card .image{
    width:100%;
    height:170px;
    overflow:hidden;
    position:relative;
}
html.wl-embed .booking-page .cart-card .image img{
    width:100%;
    height:100%;
    object-fit:cover;
}
html.wl-embed .booking-page .cart-card .image .no-image{
    width:100%;
    height:170px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f3f4f6;
    color:#bbb;
    font-size:2rem;
}

/* Order summary card */
html.wl-embed .payment-summary{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:1rem 1.1rem;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
}
html.wl-embed .payment-summary .summary-title{
    font-size:1.05rem;
    font-weight:600;
    margin:0 0 .85rem;
    padding-bottom:.6rem;
    border-bottom:1px solid #eef0f3;
    color:#2c3e50;
    display:flex;
    align-items:center;
    line-height:1.3;
}

/* summary-item: ogni riga ordine */
html.wl-embed .payment-summary .summary-item{
    border-bottom:1px solid #f1f2f4;
    padding:.7rem 0;
}
html.wl-embed .payment-summary .summary-item:last-of-type{
    border-bottom:0;
}

/* Header item: nome a sinistra, prezzo a destra. Garantiamo che il
   nome non vada a capo per ogni parola (min-width:0 + word-break). */
html.wl-embed .payment-summary .summary-item-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:.75rem;
    margin-bottom:.4rem;
}
html.wl-embed .payment-summary .summary-item-name{
    flex:1 1 auto;
    min-width:0;
    font-weight:600;
    font-size:.92rem;
    line-height:1.35;
    color:#222;
}
html.wl-embed .payment-summary .summary-item-name .name-text{
    display:block;
    word-break:normal;
    overflow-wrap:break-word;
    hyphens:auto;
}
html.wl-embed .payment-summary .summary-item-name small{
    display:block;
    font-weight:400;
    font-size:.78rem;
    color:#777 !important;
    margin-top:.15rem;
}
html.wl-embed .payment-summary .summary-item-price{
    flex:0 0 auto;
    font-weight:700;
    font-size:1rem;
    color:#1f7a4c;
    white-space:nowrap;
    line-height:1.35;
}

/* Liste dettagli sotto al nome (date, tickets, slot orario) come pill */
html.wl-embed .payment-summary .summary-item-details{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-wrap:wrap;
    gap:.35rem;
}
html.wl-embed .payment-summary .summary-item-details li{
    font-size:.76rem;
    color:#555;
    background:#f3f4f6;
    padding:.22rem .55rem;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    gap:.3rem;
    line-height:1.1;
}
html.wl-embed .payment-summary .summary-item-details li i{
    color:#888;
    font-size:.72rem;
}

/* Eventuale dettaglio "summary-dates" per workstation multi-giorno */
html.wl-embed .payment-summary .summary-dates{
    margin-top:.5rem;
    font-size:.82rem;
    color:#444;
}
html.wl-embed .payment-summary .summary-dates ul{
    list-style:none;
    padding-left:0;
    margin:.25rem 0 0;
}
html.wl-embed .payment-summary .summary-dates li{
    padding:.1rem 0;
}

/* Total / fee row visiva separata */
html.wl-embed .payment-summary .summary-total,
html.wl-embed .payment-summary .summary-item.is-total,
html.wl-embed .payment-summary .total{
    border-top:2px solid #1f7a4c33;
    margin-top:.4rem;
    padding-top:.7rem;
    font-size:1.05rem;
    font-weight:700;
    color:#222;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:.5rem;
}
html.wl-embed .payment-summary .summary-total .price,
html.wl-embed .payment-summary .total .price{
    color:#1f7a4c;
    font-size:1.15rem;
    white-space:nowrap;
}

/* Bottoni di azione (Conferma e paga, ecc.) full-width + verde Beetroot */
html.wl-embed .booking-page .btn-complete-white-label,
html.wl-embed .booking-page .btn-beet{
    background:#1f7a4c !important;
    border-color:#1f7a4c !important;
    color:#fff !important;
    font-weight:600;
    padding:.7rem 1rem;
    border-radius:8px;
}
html.wl-embed .booking-page .btn-complete-white-label:hover,
html.wl-embed .booking-page .btn-beet:hover{
    background:#155f3a !important;
    border-color:#155f3a !important;
}

/* Tag tipologia (Experience, Camera, Workstation, Prodotto) coerente */
html.wl-embed .booking-page .listing-typology-tag{
    font-size:.7rem;
    padding:.22rem .55rem;
    border-radius:14px;
    line-height:1.1;
    position:absolute;
    top:.55rem;
    left:.55rem;
    background:rgba(31,122,76,.92);
    color:#fff;
    z-index:2;
}
html.wl-embed .booking-page .listing-typology-tag.is-workstation{
    background:rgba(245,158,11,.95);
}
html.wl-embed .booking-page .listing-typology-tag.is-product{
    background:rgba(139,92,246,.92);
}

/* ============================================================
 *  EMBED — Card Experience (resources/views/livewire/experience-card)
 *  Stessa lingua visiva delle listing card: immagine 170px in cima,
 *  body con padding compatto, footer con date+prezzo+qty+book.
 * ============================================================ */

/* Body experience (.info wrapper della colonna centrale) */
html.wl-embed .card-availability .info{
    padding:.85rem 1rem .25rem;
}
html.wl-embed .card-availability .info h4{
    font-size:1.05rem !important;
    line-height:1.3;
    margin:0 0 .35rem;
    font-weight:600;
}
html.wl-embed .card-availability .info h4 a,
html.wl-embed .card-availability .info > a > h4{
    color:#1f7a4c;
    text-decoration:none;
}
html.wl-embed .card-availability .info .property-meta{
    font-size:.82rem;
    color:#666;
    margin:.15rem 0 .5rem !important;
    flex-wrap:wrap;
}
html.wl-embed .card-availability .info .description{
    font-size:.88rem;
    line-height:1.4;
    color:#444;
    margin-bottom:.5rem;
    /* La description può essere lunga: 3 righe max in embed */
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* Pills info experience: stesso stile delle amenity-pill */
html.wl-embed .card-availability .experience-info-pills{
    gap:.3rem !important;
    margin-top:.4rem !important;
    margin-bottom:.4rem !important;
}
html.wl-embed .card-availability .experience-info-pills .info-pill{
    font-size:.72rem;
    padding:.22rem .55rem;
    border-radius:12px;
    background:#f3f4f6;
    color:#444;
    border:0;
    display:inline-flex;
    align-items:center;
    gap:.25rem;
    line-height:1.1;
}

/* Lingue experience */
html.wl-embed .card-availability .experience-languages{
    margin-bottom:.5rem !important;
}

/* Link "View details" */
html.wl-embed .card-availability .info > a.text{
    font-size:.85rem !important;
    color:#1f7a4c !important;
    margin-top:.25rem !important;
}

/* Colonna destra (date / prezzo / qty / book): in embed diventa un
   footer a tutta larghezza con i blocchi in flex orizzontale. */
html.wl-embed .card-availability > .row > .col-sm-2:last-child{
    background:#f9fafb;
    border-top:1px solid #eef0f3;
}
html.wl-embed .card-availability > .row > .col-sm-2:last-child > .p-2{
    padding:.85rem 1rem !important;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.6rem;
}
html.wl-embed .card-availability > .row > .col-sm-2:last-child > .p-2 > *{
    flex:1 1 auto;
    margin:0 !important;
}
/* Date selector compatto */
html.wl-embed .card-availability .date-selector-box{
    flex:0 0 auto !important;
    margin-bottom:0 !important;
    padding:.35rem .6rem !important;
    border-radius:6px;
    min-width:80px;
}
html.wl-embed .card-availability .date-selector-box small{
    font-size:.65rem !important;
}
/* Bottone BOOK NOW: prende tutto lo spazio rimanente, full-width sotto 480px */
html.wl-embed .card-availability > .row > .col-sm-2:last-child a.btn,
html.wl-embed .card-availability > .row > .col-sm-2:last-child button.btn,
html.wl-embed .card-availability > .row > .col-sm-2:last-child .btn{
    width:auto;
    min-width:140px;
    padding:.55rem 1.1rem !important;
    font-size:.92rem !important;
    line-height:1.2 !important;
    white-space:nowrap;
    flex:1 1 100%;
}
@media (min-width: 540px){
    html.wl-embed .card-availability > .row > .col-sm-2:last-child .btn{
        flex:0 1 auto;
    }
}