/* ========================================================================
   IDROINDOOR | KLARNA ON-SITE MESSAGING
   File: modules/idroklarnaosm/views/css/front.css
   PrestaShop 9.0.2 | AngarTheme | Layout responsive

   Obiettivi:
   - styling circoscritto al modulo IdroIndoor Klarna OSM;
   - fascia superiore con sfondo esterno nero (#000000);
   - posizionamenti prodotto, carrello, footer e pagina informativa;
   - conservare testo legale, logo, badge e CTA Klarna.

   IMPORTANTE SULLO SHADOW DOM:
   Il Web SDK di Klarna puo' generare Shadow DOM annidati.
   Un foglio CSS del sito NON puo' attraversare automaticamente due shadow
   root: ::part(osm-container) funziona solo se la parte e' esposta dal
   custom element raggiunto (o riesportata con exportparts).
   Per personalizzare il colore INTERNO, se il componente non esporta la
   parte, configurare lo stile dal portale Klarna oppure intervenire sul
   codice che monta il componente, dopo aver verificato la sua struttura.
   Non usare .container.dark in modo globale: colpirebbe anche AngarTheme.
   ======================================================================== */

:root {
    --idrokosm-top-background: #000000;
    --idrokosm-top-text: #ffffff;
    --idrokosm-content-max-width: 100%;
    --idrokosm-top-max-width: 300px;
    --idrokosm-spacing-product: 14px;
    --idrokosm-spacing-cart: 16px;
}

/* 1. CONTENITORE BASE --------------------------------------------------- */
.idrokosm-placement {
    display: block;
    position: relative;
    width: 100%;
    max-width: var(--idrokosm-content-max-width);
    min-width: 0;
    margin: 12px 0;
    padding: 0;
    box-sizing: border-box;
}

.idrokosm-placement,
.idrokosm-placement *,
.idrokosm-placement *::before,
.idrokosm-placement *::after {
    box-sizing: border-box;
}

.idrokosm-placement[hidden] {
    display: none !important;
}

.idrokosm-placement:empty {
    min-height: 0;
    margin: 0;
    padding: 0;
}

/* Il motore Klarna puo' creare custom element con nome dinamico. */
.idrokosm-placement > klarna-placement,
.idrokosm-placement > [id^="idrokosm-rendered-"],
.idrokosm-placement > [data-key] {
    display: block;
    width: 100%;
    max-width: 100%;
}

/* 2. BANNER SUPERIORE --------------------------------------------------- */
/* NAV1 contiene contatti a sinistra e account/lingua a destra.
   Posizionare il banner senza aggiungere una riga o coprire i separatori. */
#idrokosm-placement-top,
.idrokosm-placement--top {
    width: 100%;
    max-width: var(--idrokosm-top-max-width);
    margin: 3px auto;
    padding: 0;
    background-color: var(--idrokosm-top-background);
    color: var(--idrokosm-top-text);
}

@media (min-width: 992px) {
    /* Punto di ancoraggio: colonna in cui AngarTheme esegue displayNav1. */
    #header .header-nav .container > .row > .col-md-12 {
        position: relative;
    }

    #header .header-nav #idrokosm-placement-top {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 300px;
        max-width: 30%;
        margin: 0;
        clear: none;
        z-index: 1;
    }
}

#idrokosm-placement-top > * {
    display: block;
    width: 100%;
    max-width: 100%;
    background-color: var(--idrokosm-top-background);
}

/* API ufficiale ::part: valida solo se il custom element espone questa
   parte direttamente (non attraversa Shadow DOM annidati non esportati). */
#idrokosm-placement-top > klarna-placement::part(osm-container),
#idrokosm-placement-top > [id^="idrokosm-rendered-"]::part(osm-container),
#idrokosm-placement-top > [data-key]::part(osm-container) {
    background-color: var(--idrokosm-top-background) !important;
    color: var(--idrokosm-top-text);
    border-color: var(--idrokosm-top-background);
}

/* 3. SCHEDA PRODOTTO ---------------------------------------------------- */
.idrokosm-placement--product,
#idrokosm-placement-product {
    width: 100%;
    margin: var(--idrokosm-spacing-product) 0 10px;
    clear: both;
}

/* 4. CARRELLO ----------------------------------------------------------- */
/* Ripristino: banner a tutta larghezza della colonna carrello. */
.idrokosm-placement--cart,
#idrokosm-placement-cart {
    width: 100%;
    max-width: 100%;
    margin: var(--idrokosm-spacing-cart) 0;
    clear: both;
}

/* 5. FOOTER E PAGINA INFORMATIVA ---------------------------------------- */
.idrokosm-placement--footer,
.idrokosm-placement--info {
    width: 100%;
    margin: 18px auto;
    clear: both;
}

/* 6. RESPONSIVE --------------------------------------------------------- */
@media (max-width: 768px) {
    .idrokosm-placement--product,
    #idrokosm-placement-product,
    .idrokosm-placement--cart,
    #idrokosm-placement-cart {
        max-width: 100%;
        margin: 10px 0;
    }

    #idrokosm-placement-top,
    .idrokosm-placement--top {
        width: calc(100% - 16px);
        margin: 4px auto;
    }

    .idrokosm-placement--footer,
    .idrokosm-placement--info {
        margin: 12px auto;
    }
}

@media (max-width: 480px) {
    .idrokosm-placement {
        width: 100%;
        min-width: 0;
    }
}

/* KLARNA TOP NAV1 - Riduzione padding interno */
#idrokosm-placement-top klarna-placement::part(osm-container),
#idrokosm-placement-top [id^="idrokosm-rendered-"]::part(osm-container),
#idrokosm-placement-top[data-key]::part(osm-container) {
    padding: 2px 6px !important;
}


/* Non occultare mai il logo, il testo legale o i collegamenti Klarna. */