/* =============================================================================
 * CREAENERGIA — CSS GENERICI CONDIVISI
 * Classi riutilizzate in più pagine del tema creaenergia.
 * CSS specifico di singola pagina rimane inline nel rispettivo blade.
 * ============================================================================= */


/* =============================================================================
 * COLORI / UTILITIES
 * ============================================================================= */

.primary-color { color: var(--ucue-theme-primary) !important; }
.secondary-color { color: var(--ucue-theme-secondary) !important; }
.tertiary-color { color: var(--ucue-theme-tertiary) !important; }

.bg-primary-color { background-color: var(--ucue-theme-primary); }
.bg-primary-light { background-color: var(--ucue-theme-bg-light); }
.bg-secondary-color { background-color: var(--ucue-theme-secondary); }
.bg-secondary-light { background-color: var(--ucue-theme-bg-light-2); }

.br-16 { border-radius: 16px; }

/* Colore verde fisso — indipendente dal tema, usato per stati completati */
.text-fixed-success { color: #12D89C !important; }
.bg-fixed-success { background-color: #12D89C !important; }

/* =============================================================================
 * TIPOGRAFIA
 * ============================================================================= */

.title-section {
    color: var(--ucue-theme-primary);
    font-weight: 400;
}

h1.title-section { font-size: 56px; }
h2.title-section { font-size: 45px; }
h3.title-section { font-size: 36px; }
h4.title-section { font-size: 28px; }
h5.title-section { font-size: 20px; }

p.text-14,
span.text-14,
label.text-14,
a.title-section,
.text-14 { font-size: 14px; }

p.text-12,
span.text-12 { font-size: 12px; }

.fw-500 { font-weight: 500 !important; }


h3.subtitle-section {
    color: var(--ucue-theme-primary) !important;
    font-weight: 500;
    font-size: 20px;
}



@media (max-width: 991px) {
    h1.title-section { font-size: 48px; }
    h2.title-section { font-size: 36px; }
    h3.title-section { font-size: 28px; }
    h3.subtitle-section { font-size: 16px; }
    h4.title-section { font-size: 22px; }
    h5.title-section { font-size: 18px; }
}

@media (max-width: 767px) {
    h1.title-section { font-size: 34px; }
    h2.title-section { font-size: 28px; }
    h3.title-section { font-size: 22px; }
    h4.title-section { font-size: 18px; }
    h5.title-section { font-size: 16px; }
}


/* =============================================================================
 * BOTTONI
 * ============================================================================= */

/* Bottone primario — sfondo primario */
.btn-primary-ucue {
    background-color: var(--ucue-theme-primary) !important;
    border: 1px solid var(--ucue-theme-primary);
    color: white !important;
    padding: 8px 20px;
    border-radius: 25px;
    font-weight: 400;
    font-size: 14px;
    cursor: pointer !important;
}

.btn-primary-ucue:hover {
    background-color: white !important;
    color: var(--ucue-theme-primary) !important;
    border: 1px solid var(--ucue-theme-primary) !important;
}

/* Bottone secondario — sfondo secondario */
.btn-secondary-ucue {
    background-color: var(--ucue-theme-secondary);
    border: 1px solid var(--ucue-theme-secondary);
    color: white !important;
    padding: 8px 20px;
    border-radius: 25px;
    font-weight: 400;
    font-size: 14px;
    cursor: pointer !important;
    display: inline-block;
}

.btn-secondary-ucue:hover {
    background-color: white;
    color: var(--ucue-theme-secondary) !important;
    border: 1px solid var(--ucue-theme-secondary);
}

/* Stato active (pagina corrente nella navbar) */
.btn-secondary-active-ucue {
    background-color: white;
    color: var(--ucue-theme-secondary) !important;
    border: 1px solid var(--ucue-theme-secondary);
}

.btn-light-2 {
    background-color: var(--ucue-theme-bg-light-2) !important;
    border: 1px solid var(--ucue-theme-secondary);
    color: var(--ucue-theme-secondary) !important;
    padding: 8px 20px;
    border-radius: 25px;
    font-weight: 400;
    font-size: 14px;
    cursor: pointer !important;
}

.btn-light-2:hover {
    background-color: white !important;
    color: var(--ucue-theme-secondary) !important;
}

/* Bottone trasparente */
.btn-secondary-transparent {
    background-color: transparent;
    border: 1px solid var(--ucue-theme-secondary);
    color: var(--ucue-theme-secondary) !important;
    padding: 8px 20px;
    border-radius: 25px;
    font-weight: 400;
    font-size: 14px;
    cursor: pointer !important;
}

.btn-secondary-transparent:hover {
    background-color: var(--ucue-theme-secondary) !important;
    color: white !important;
}

/* bottone danger */
.btn-danger-ucue {
    background-color: transparent;
    border: 1px solid #EB426E;
    color: #EB426E;
    padding: 8px 20px;
    border-radius: 25px;
    font-weight: 400;
    font-size: 14px;
    cursor: pointer !important;
}

.btn-danger-ucue:hover {
    background-color: #EB426E;
    color: white;
}

.link-primary-ucue{
    color: var(--ucue-theme-primary) !important;
    font-weight: 400;
    font-size: 14px;
    cursor: pointer !important;
    text-decoration: none !important;
}

.link-primary-ucue:hover{
    color: var(--ucue-theme-secondary) !important;
}

.link-secondary-ucue {
    color: var(--ucue-theme-secondary) !important;
    font-weight: 400;
    font-size: 14px;
    cursor: pointer !important;
    text-decoration: none !important;
}

.link-secondary-ucue:hover {
    color: var(--ucue-theme-primary) !important;
}


@media (max-width: 767px) {
    .btn-secondary-ucue, 
    .btn-primary-ucue,
    .btn-secondary-transparent { font-size: 12px; }
}


/* =============================================================================
 * IMMAGINI / BANNER
 * ============================================================================= */

/* Banner immagine a larghezza piena */
.section-img img {
    width: 100%;
    height: 450px;
    object-fit: cover;
}


@media (max-width: 767px) {
    .section-img img { height: 250px; }
}



/* =============================================================================
 * LAYOUT — AREA RISERVATA
 * Usato in: profilazione/index, /create,/pmi-check; diventa-socio/index.
 * ============================================================================= */

.layout-100 {
    background-color: #F7F8FB;
    min-height: calc(100dvh - var(--bs-app-header-height));
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .layout-100 { min-height: unset; }
}


/* =============================================================================
 * AREA RISERVATA — STEPPER ASIDE
 * Usato in: profilazione/index,create,pmi-check; diventa-socio/index.
 * ============================================================================= */

/* Numero box dello step */
.aside-step-num {
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    border-radius: 8px;
    text-align: center;
    background-color: var(--ucue-theme-primary);
    color: white;
}

.aside-step-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 2px, dashed var(--ucue-theme-secondary);
    text-align: center;
    background-color: var(--ucue-theme-bg-light-2);
    color: white;
}

/* Step inattivo — overlay bianco semi-trasparente */
.aside-step-card-inactive { position: relative; }

.aside-step-card-inactive::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    pointer-events: none;
}

/* Linea verticale tra step */
.aside-step-line {
    width: 2px;
    background-color: #e9ecef;
    height: 14px;
    margin: 6px 0 6px 20px;
}

.stepper-item.completed .stepper-icon {
    background-color: var(--ucue-theme-bg-light-2);
    color: #fff;
    border-color: var(--ucue-theme-secondary) !important;
}

.stepper-item.completed .stepper-title {
    color: var(--ucue-theme-bg-light-2);
}