﻿
/* CONTAINER WIZARD */

/* --- 0. DICHIARAZIONE DEL CONTENITORE --- */
.apk_container.wizard {
    container-type: inline-size;
    container-name: wizard-container;
}

/* Regole di visibilità per elementi custom */
.wizard-mobile-only {
    display: none !important;
}

.wizard-desktop-only {
    display: block !important;
}

@media (min-width: 992px) {
    .apk_container.wizard > .con_body.steppers .steppers-nav .steppers-btn-confirm {
        margin-left: unset;
    }
}

/* --- 1. STILE GENERALE DELLA CARD --- */
.apk_container.wizard > .con_body.steppers {
    position: relative;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #e6e9f2;
    padding: 0;
}

/* --- OVERLAY LOADER --- */

.apk_container.wizard.loading .wizard-loader-overlay {
    display: flex;
}

.apk_container.wizard .wizard-loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 150;
    display: none;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
    border-radius: 8px;
}

/* --- 2. HEADER ANCORATO (STICKY TOP) --- */
.apk_container.wizard > .con_body.steppers .steppers-header {
    /* --- FUNZIONALITÀ STICKY --- */
    position: sticky;
    top: 54px; /* altezza header */
    z-index: 140; /* Tiene l'header sopra il contenuto del body del wizard */

    padding: 1.5rem 1.5rem 1rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    /* Preserva l'arrotondamento nativo della card in alto */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    /* Aggiunge una leggera ombra sul fondo per dare profondità quando si scrolla */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
}

.apk_container.wizard > .con_body.steppers .steppers-header ul {
    margin-bottom: 0;
}

/* RESET NATIVO PER I BOTTONI DELL'HEADER */
.apk_container.wizard > .con_body.steppers .steppers-header li button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    text-align: left;
}

/* Cursore a manina solo per i bottoni abilitati */
.apk_container.wizard > .con_body.steppers .steppers-header li button:not(:disabled) {
    cursor: pointer;
}

/* Cursore standard per i bottoni disabilitati */
.apk_container.wizard > .con_body.steppers .steppers-header li button:disabled {
    cursor: default;
}

/* Step Confermato (Verde) - Desktop */
.apk_container.wizard > .con_body.steppers .steppers-header li.confirmed .steppers-number {
    background-color: #008a53;
    border-color: #008a53;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.apk_container.wizard > .con_body.steppers .steppers-header li.confirmed .steppers-number svg {
    fill: #ffffff;
    width: 1.4rem;
    height: 1.4rem;
    margin: 0 !important;
    stroke: #ffffff;
    stroke-width: 1.5px;
}

.apk_container.wizard > .con_body.steppers .steppers-header li.confirmed .step-text {
    color: #008a53;
}

.apk_container.wizard > .con_body.steppers .steppers-header li.confirmed:hover button:not(:disabled) .step-text {
    color: #005c37;
}

/* Step Invalido (Rosso) - Desktop */
.apk_container.wizard > .con_body.steppers .steppers-header li.invalid {
    color: #e3383a;
}

.apk_container.wizard > .con_body.steppers .steppers-header li.invalid .steppers-number {
    border-color: #e3383a;
    color: #e3383a;
    background-color: #fbe6e8;
}

/* Step Disabilitato / Futuro generico */
.apk_container.wizard > .con_body.steppers .steppers-header li.disabled,
.apk_container.wizard > .con_body.steppers .steppers-header li.future {
    opacity: 0.5;
}

.apk_container.wizard > .con_body.steppers .steppers-header li span {
    cursor: default;
}

/* --- 2b. PROGRESS BAR --- */
.apk_container.wizard > .con_body.steppers .steppers-header .progress {
    height: 5px;
    background-color: #dee2e6;
    border-radius: 0;
    margin: 1.5rem -1.5rem -1rem -1.5rem;
    overflow: hidden;
}

.apk_container.wizard > .con_body.steppers .steppers-header .progress .progress-bar {
    background-color: #0066cc;
    transition: width 0.4s ease;
}

/* --- RIMOZIONE LINEE ESTERNE DESKTOP VIA CONTAINER QUERY --- */
@container wizard-container (min-width: 768.01px) {
    .apk_container.wizard > .con_body.steppers .steppers-header ul li:first-child {
        border-left: none;
    }

    .apk_container.wizard > .con_body.steppers .steppers-header ul li:last-child {
        border-right: none;
    }
}

/* --- 3. COMPORTAMENTO MOBILE VIA CONTAINER QUERY (< 768px) --- */
@container wizard-container (max-width: 768px) {

    .wizard-mobile-only {
        display: inline !important;
    }

    .wizard-desktop-only {
        display: none !important;
    }

    .apk_container.wizard > .con_body.steppers .steppers-header ul {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .apk_container.wizard > .con_body.steppers .steppers-header ul li:not(.active) {
        clip: unset;
        height: unset;
        position: unset;
        display: unset;
    }

    .apk_container.wizard > .con_body.steppers .steppers-header li {
        display: flex !important;
        align-items: center !important;
        width: auto !important;
        flex: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .apk_container.wizard > .con_body.steppers .steppers-header li button,
    .apk_container.wizard > .con_body.steppers .steppers-header li > span {
        padding: 0 !important;
        margin: 0 !important;
    }

    .apk_container.wizard > .con_body.steppers .steppers-header li::before,
    .apk_container.wizard > .con_body.steppers .steppers-header li::after {
        display: none !important;
    }
    /* Separatore ">" */
    .apk_container.wizard > .con_body.steppers .steppers-header li:not(:last-child)::after {
        content: '>' !important;
        display: inline-block !important;
        margin-left: 0.5rem !important;
        margin-right: 0 !important;
        color: #5c6f82 !important;
        font-weight: normal !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
    }

    .apk_container.wizard > .con_body.steppers .steppers-header .steppers-number {
        width: auto !important;
        height: auto !important;
        border: none !important;
        background: transparent !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        margin: 0 !important;
        color: inherit !important;
    }

    .apk_container.wizard > .con_body.steppers .steppers-header li.active span {
        color: #0066cc;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .apk_container.wizard > .con_body.steppers .steppers-header li.active .steppers-number::after {
        content: '.';
    }

    .apk_container.wizard > .con_body.steppers .steppers-header li:not(.active) .step-text {
        display: none !important;
    }
    /* Colori Mobile */
    .apk_container.wizard > .con_body.steppers .steppers-header li.confirmed button {
        color: #008a53 !important;
    }

    .apk_container.wizard > .con_body.steppers .steppers-header li.disabled button,
    .apk_container.wizard > .con_body.steppers .steppers-header li.future button {
        color: #6c757d !important;
    }

    .apk_container.wizard > .con_body.steppers .steppers-header li.invalid button {
        color: #e3383a !important;
    }
}

/* --- 4. BODY DEL WIZARD --- */
.apk_container.wizard > .con_body.steppers .steppers-content {
    padding: 2.5rem 1.5rem;
    background-color: #ffffff;
}

.apk_container.wizard > .con_body.steppers .steppers-content p {
    margin: 0;
    color: #333333;
    line-height: 1.6;
}

/* --- 5. NAV INFERIORE ANCORATA (STICKY BOTTOM) --- */
.apk_container.wizard > .con_body.steppers .steppers-nav {
    /* --- FUNZIONALITÀ STICKY --- */
    position: sticky;
    bottom: 0;
    z-index: 1010; /* Allineato all'header per stare sopra al testo in transito */

    padding: 1.25rem 1.5rem;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    /* Preserva l'arrotondamento nativo della card in basso */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    /* Un'ombra rivolta verso l'alto accentua visivamente l'effetto flottante sopra il testo */
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
}

.apk_container.wizard > .con_body.steppers .steppers-nav .btn {
    white-space: nowrap;
}


/* END CONTAINER WIZARD */


/* CONTAINER TABS */
.apk_container.tab > .con_body > .tab_header .tab-lg {
    box-shadow: inset 0px -10px 12px -6px rgba(0,0,0,0.25);
    background-color: var(--bs-white);
}

.apk_container.tab > .con_body > .tab_header .tab-clearfix {
    position: relative;
    z-index: 1;
    background-color: var(--bs-white);
}

.apk_container.tab > .con_body > .tab_header .tab-lg div {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.apk_container.tab > .con_body > .tab_header .tab-lg > div:last-child {
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.apk_container.tab > .con_body > .tab_header .tab-lg div svg {
    fill: var(--bs-body-color);
}

.apk_container.tab > .con_body > .tab_header .tab-lg .active {
    box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.25);
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity));
}

.apk_container.tab > .con_body > .tab_header .tab-lg .active span {
    color: var(--bs-primary);
    font-weight: bold;
}

.apk_container.tab > .con_body > .tab_header .tab-lg .active svg {
    fill: var(--bs-primary);
}

.apk_container.tab > .con_body > .tab_header .tab-lg > div {
    cursor: pointer;
    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}

.apk_container.tab > .con_body > .tab_header .nav-tabs-vertical div.nav-link {
    cursor: pointer; 
}

@media (max-width: 1024px) {
    .apk_container.tab > .con_body > .tab_header .tab-lg > div {
        border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    }
}

.apk_container.tab > .con_body > .tab_header .tab-lg > .disabled {
    cursor: not-allowed;
    pointer-events: none;
}

.apk_container.tab > .con_body > .tab_header .tab-lg .disabled span {
    color: var(--bs-gray-300);
}

.apk_container.tab > .con_body > .tab_header .tab-lg .disabled svg {
    fill: var(--bs-gray-300);
}



.apk_container.tab > .con_body > .tab_header .tab-md .active {
    border-color: var(--bs-primary) !important;
}

.apk_container.tab > .con_body > .tab_header .tab-md .active span {
    color: var(--bs-primary);
}

.apk_container.tab > .con_body > .tab_header .tab-md .active svg {
    fill: var(--bs-primary);
}

.apk_container.tab > .con_body > .tab_header > .tab-md > .col {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: center;
    border-bottom: 2px var(--bs-border-style) var(--bs-border-color);
}

.apk_container.tab > .con_body > .tab_header > .tab-md > div > .nav > .nav-link {
    cursor: pointer;
}

.apk_container.tab > .con_body > .tab_header .tab-md .disabled {
    cursor: not-allowed;
    pointer-events: none;
}

.apk_container.tab > .con_body > .tab_header .tab-md .disabled span {
    color: var(--bs-gray-300);
}

.apk_container.tab > .con_body > .tab_header .tab-md .disabled svg {
    fill: var(--bs-gray-300);
}

.apk_container.tab > .con_body .tab-content > .tab-pane {
    display: block;
    padding: 1rem;
}

/*Classe per aggiungere bordo sfumato sotto ai tab*/
.shadow-gradient {
    height: 12px; /* Altezza dell'ombra */
    background: linear-gradient(0deg, transparent 0%, rgba(0,0,0,0.2) 100%);
}

/* END CONTAINER MULTITAB */

/* CONTAINER SIDEBAR */

.apk_container.sidear {

}

.apk_container.sidear > .con_body {

}

.apk_container.sidear > .con_body > article.it-page-section {
    padding: 1rem;
}

.apk_container.sidebar > .con_body .menu-wrapper {
    background-color: #fff;
}

/* Agisce SOLO quando la sidebar è in un wizard E il plugin la rende sticky */
@media (min-width: 992px) {
    .apk_container.wizard .apk-wizard-aware-sticky.bs-is-sticky {
        top: calc(56.4px + var(--wizard-header-h, 0px) + 20px) !important;
    }
}

/* END CONTAINER SIDEBAR */

/* CONTAINER ACCORDION */

.apk_container.accordion {

}

.apk_container.accordion .accordion-header .accordion-button {
    font-weight: normal;
}

.apk_container.accordion .accordion-header .accordion-button:after {
    width: 3rem;
}

.apk_container.accordion .accordion-header .accordion-button:not(.collapsed) {
    background-color: var(--bs-primary-light) !important;
}

.apk_container.accordion .accordion-header.accordion-small-header .accordion-button:not(.collapsed) {
    background-color: white !important;
    border-bottom: 1px solid var(--bs-border-color);
}

.apk_container.accordion .accordion-button:not(.collapsed) {
    color: var(--bs-primary) !important;
}

.apk_container.accordion .icon-zoom {
    transition: transform 0.2s ease-in-out;
}

.apk_container.accordion .accordion-button:hover .icon-zoom {
    transform: scale(1.2);
}

/*versione small*/
.apk_container.accordion .accordion-header.accordion-small-header .accordion-button:not(.collapsed) {
    color: var(--bs-primary) !important;
}

.apk_container.accordion .accordion-header.accordion-small-header .accordion-button:hover .icon-zoom {
    transform: scale(1.2);
}

.apk_container.accordion .accordion-header.accordion-small-header .icon-zoom {
    transition: transform 0.2s ease-in-out;
}

/* END CONTAINER ACCORDION */