/* dash */

.dash-container {
    grid-column: 1 / -1; /* Allineato come specificato per il layout */
    grid-row: 2 / -1;
    background-color: black;
}

.dash-container .content {
    display: grid;
    width: 100%;
    height: 100%;
}

@media screen and (min-width: 769px) {
    .dash-container .content {
        grid-template-columns: 300px auto;
        grid-column: 1 / -1;
        grid-row: 2 / -1;
        grid-template-areas: "menu app";
    }

    .dash-container .menu {
        flex-flow: column;
        padding-top: 2rem;
    }
    /*.dash-container .app {
        flex-flow: row;
    }*/
    .dash-container .app {
        flex-flow: row;
        grid-area: app; /* ESSENZIALE: Associa .app all'area di Grid */
        width: initial; /* Resetta la larghezza per farla gestire al Grid */
    }
}

.dash-container .app {
    /* Su mobile, l'app occupa tutta la larghezza del contenitore */
    width: 100%;
    /* Aggiungi 'min-height: 100vh' o 'height: 100%' se deve occupare tutta l'altezza dello schermo, a seconda del contesto del genitore. */
}
.dash-container .menu {
    background-color: rgba(252, 252, 252, 0.1);
    grid-area: menu;
    width: auto;
}

.dash-container .menu {
    display: none; /* Nasconde l'elemento .menu su mobile */
}

@media screen and (min-width: 769px) {
    .dash-container .menu {
        display: block; /* O flex. Lo rende visibile su desktop */
        grid-area: menu; /* Lo riposiziona nell'area desktop */
    }
}

.dgth-engagement-card

/*.text:hover {
    color: var(--dgth-orange-primary);
}*/

.dash-container .app {
    background-color: black;
    grid-area: app;
    width: 100%;
    min-height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: nowrap;
}

/* urlo parts */
.item {
    flex-basis: 45%;
    height: 30vh; /* prima 10vh */
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}
/* end of urlo parts */

.item a {
    color: white;
    text-decoration: none;
    display: flex;
    justify-content: left;
    height: 100%;
    margin: 1rem;
    font-size: var(--dgth-tit1);
}

/* buttons */

.button-1 {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 12px 28px;
    border: 1px solid #e85211;
    border-radius: 100px;
    background: #e85211;
    cursor: pointer;
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
}
.button-1:hover {
    border: 1px solid var(--dgth-orange-primary);
    background: var(--dgth-orange-primary);
    color: #ffffff;
    text-transform: uppercase;
}
.button-1:focus {
    text-transform: uppercase;
    background: #ff5a13 !important;
}
.button-1:active {
    background: var(--dgth-orange-primary);
    color: #ffffff;
    text-transform: uppercase;
}
.button-1:visited {
    background-color: var(--dgth-orange-primary);
}
.button-2 {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 12px 28px;
    border: 1px solid rgba(252, 252, 252, 0);
    border-radius: 100px;
    background: rgba(252, 252, 252, 0.1);
    cursor: pointer;
    font: 14px;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
}
.button-2:hover {
    border: 1px solid rgba(252, 252, 252, 0.3);
    background: rgba(252, 252, 252, 0.1);
    color: #ffffff;
    text-transform: uppercase;
}
.button-2:focus {
    text-transform: uppercase;
}
.button-2:active {
    background: rgba(252, 252, 252, 0.3);
    border: 1px solid rgba(252, 252, 252, 0.3);
    color: #ffffff;
    text-decoration: underline;
    text-transform: uppercase;
}

/*.button-3 {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 12px 28px;
    text-decoration: underline;
    background: transparent;
    cursor: pointer;
    font: 14px arial;
    color: var(--dgth-orange-primary);
}
.button-3:focus {
    text-transform: uppercase;
}
.button-3:hover {
    background: transparent;
    color: #e04300;
    text-decoration: underline;
    text-transform: uppercase;
}
.button-3:active {
    background: transparent;
    color: var(--dgth-orange-primary);
    text-decoration: underline;
    text-transform: uppercase;
}*/

.button-3 {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 12px 28px;
    border: 1px solid #ff5a13;
    border-radius: 100px;
    background: transparent;
    cursor: pointer;
    font: 14px;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
}
.button-3:hover {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 12px 28px;
    border: 1px solid #ff5a13;
    border-radius: 100px;
    background: rgba(255, 90, 19, 0.2);
    cursor: pointer;
    font: 14px;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
}
.button-3:active {
    background-color: rgba(255, 90, 19, 1);
}

/* Card component styles */

.dgth-cards {
    width: 100%;
}

.dgth-card {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    /* border: rgba(225,225,225,0.3) solid 1px; */
    border-radius: 10px;
    background-color: rgba(252, 252, 252, 0.12);
    gap: 1rem;
    margin: 0.5rem 0 1rem 0;
    padding: 8px 16px 16px 24px;
    line-height: 1;
}
.dgth-card .title {
    font-size: var(--dgth-tit1);
    font-weight: bold;
}
/* ul {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            list-style: none; /* Rimuove i puntini
            margin: 16px;
            padding: 0;
            } /*
/* li {
            display: flex;
            flex-direction: column;
            justify-content: center;
            border-radius: 10px;
            background-color: rgba(252, 252, 252, 0.1);
            padding: 1rem;
            color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);  Leggera ombra        } */

/* li span {
            font-size: 0.9rem; /* Testo più piccolo per i dettagli
            color: rgba(255, 255, 255, 0.7); /* Colore del testo dei dettagli
        } */
.tracklist-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.tracklist-add {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* .info{
            margin: auto;
            padding: 0.5rem;
        } */
.tracklist-list .li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 10px;
    background-color: rgba(252, 252, 252, 0.1);
    padding: 1rem;
    color: #fff;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);  Leggera ombra */
}
.tracklist-list .li span {
    padding-bottom: 8px;
    padding-top: 8px;
    color: rgba(255, 255, 255, 0.7); /* Colore del testo dei dettagli */
}

.tracklist-container form {
    width: 50%;
    margin-top: 2rem;
}
/* sr-events */

@media only screen and (min-width: 993px) {
    .row .col.l4 {
        width: 25%;
        margin-left: auto;
        left: auto;
        right: auto;
        color: white;
    }
    .container {
        width: 80%;
    }
}
@media (max-width: 900px) {
    .col.m6 {
        width: 45% !important; /* Forza la larghezza, sfruttando le classi di griglia esistenti */
    }
}

@media (max-width: 400px) {
    .container {
        flex-direction: column;
        width: 90%;
    }
    .col {
        width: 100% !important;
        margin-bottom: 20px;
    }
}
.dgth-event-card {
    background: linear-gradient(
        45deg,
        rgba(237, 112, 27, 1),
        rgba(237, 112, 27, 0.35)
    );
}
.dgth-event-card .disabled {
    background-color: rgba(255, 255, 255, 0) !important;
    color: white !important;
}
.dgth-event-card .inactive {
    background-color: rgba(168, 168, 168, 1);
    color: rgba(72, 72, 72, 1);
    border: rgba(168, 168, 168, 1);
    font-size: 0.8rem;
    align-self: center;
}
.button-1 svg {
    max-width: 20px;
    max-height: 15px;
    align-self: flex-end;
}

.card .card-title {
    font-size: 18px;
    line-height: 26px;
    min-height: 2rem;
    font-size: 18px;
}
.card-content p {
    min-height: 78px;
    line-height: 26px;
    font-size: 14px;
}

.grey {
    background-color: rgba(0, 0, 0, 0) !important;
}

.grey .lighten-2 {
    background-color: rgba(0, 0, 0, 0) !important;
}

.draft {
    background-color: rgba(145, 104, 8, 0.2) !important;
    border: 1px solid rgb(145, 104, 8) !important;
    color: var(--dgth-bianco);
}
.complete {
    background-color: rgba(51, 131, 7, 0.2) !important;
    border: 1px solid rgb(51, 131, 7) !important;
    color: var(--dgth-bianco);
}
.catalog-action {
    display: flex;
    justify-content: flex-end;
}

/* nuove classi per il catalog-h*/

h4 {
    font-size: 1.625rem;
}

.catalog-h {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 20px 0;
    margin: 0 auto;
    gap: 1rem;
}

.dgth-event-card {
    width: 23%;
    min-width: 200px;
    box-sizing: border-box;
    background: linear-gradient(45deg, rgb(255, 90, 19), rgba(255, 90, 19, 0));
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    padding: 16px;
    border-radius: 8px;
    text-align: left;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.dgth-event-card .button-1 {
    background-color: transparent;
    border: none;
    color: white;
}
.dgth-event-card .button-1:hover {
    border: none;
    background: transparent;
    color: #ffffff;
}
.dgth-event-card .button-1:focus {
    text-transform: uppercase;
    background: transparent;
}
.dgth-event-card .button-1:active {
    background: transparent;
    color: #ffffff;
    text-transform: uppercase;
}
.dgth-event-card .button-1:visited {
    background-color: transparent;
}

.dgth-event-card .inactive {
    background-color: rgba(168, 168, 168, 1);
}

.dgth-card-content {
    display: block;
    margin-block-start: 1em;
    /*margin-block-end: 1em;*/
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.dgth-card-title {
    font-size: 1rem;
}
.dgth-event-card p {
    font-size: 14px;
}

.dgth-card-action {
    align-self: center;
    margin-top: auto;
}

/*.card .card-content {
    padding: 8px;
    border-radius: 0 0 2px 2px;
}*/

/* .card-content p {
    min-height: auto;
    line-height: 1.4;
    margin: 0 0 16px 0;
} */

.dgth-card-action {
    align-self: flex-end;
    margin-top: auto;
}

/* step e creazione|editing evento */
/* css per i form */

.input-field .helper-text {
    color: rgba(255, 255, 255, 0.5);
}

.card-content input:focus {
    color: var(--dgth-bianco);
    border-bottom: 1px solid var(--dgth-orange-primary);
    box-shadow: 0 1px 0 0 var(--dgth-orange-primary);
}

input[type="number"]:not(.browser-default)[readonly="readonly"] + label {
    color: white;
}

input[type="text"]:not(.browser-default):focus:not([readonly]) + label,
input[type="tel"]:not(.browser-default):focus:not([readonly]) + label,
input[type="email"]:not(.browser-default):focus:not([readonly]) + label,
input[type="time"]:not(.browser-default):focus:not([readonly]) + label,
input[type="date"]:not(.browser-default):focus:not([readonly]) + label,
input[type="number"]:not(.browser-default):focus:not([readonly]) + label,
textarea.materialize-textarea:focus:not([readonly]) + label {
    color: var(--dgth-bianco);
}

input[type="tel"]:not(.browser-default):focus:not([readonly]),
input[type="text"]:not(.browser-default):focus:not([readonly]),
input[type="email"]:not(.browser-default):focus:not([readonly]),
input[type="date"]:not(.browser-default):focus:not([readonly]),
input[type="time"]:not(.browser-default):focus:not([readonly]),
input[type="number"]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid var(--dgth-bianco);
    box-shadow: 0 1px 0 0 var(--dgth-bianco);
}

.card-content input {
    color: white;
}
/* srevents widgets */

/*
 select.browser-default{display:block!important;}
 .breadcrumb { color: #555 !important; }
 .breadcrumb:not(:first-child)::before {
     content: '>'; margin: 0 10px; color: #555; font-weight: bold;
 }
*/

.card .card-content p {
    margin: 0;
    min-height: 20px;
}
.step-indicator {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    font-weight: bold;
    transition: background-color 0.3s;
    text-decoration: none;
}

.step-circle.has-data {
    background: rgba(252, 252, 252, 0.9);
    color: var(--dgth-nero);
}

.step-circle.current {
    background: var(--dgth-orange-primary);
    color: white;
}

.step-circle.empty {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
}

.step-line {
    flex-grow: 1;
    max-width: 50px;
    height: 2px;
    background: #e0e0e0;
    margin-top: 19px;
    transition: background-color 0.3s;
}

.step-line.has-data {
    background: rgba(255, 255, 255, 0.9);
}

.btn-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    margin-right: 0.4em;
    stroke-width: 2;
    stroke: currentColor;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.checkbox-group {
    border: 1px solid #e0e0e0;
    padding: 0.5rem 1.5rem 1rem 1.5rem;
    border-radius: 4px;
    display: flex;
    gap: 5rem;
}

.checkbox-group legend {
    padding: 0 0.5rem;
    font-size: 0.8rem;
    color: #9e9e9e;
}

.checkbox-item {
    display: inline-block;
    margin-right: 25px;
}

.card .card-action {
    background-color: black;
}

.card {
    position: relative;
    margin: 0.5rem 0 1rem 0;
    background-color: transparent;
}
.card .card-content {
    padding: 24px;
    border: 1px solid rgba(252, 252, 252, 0.2);
    border-radius: 10px;
    background-color: rgba(252, 252, 252, 0.1);
}

.card
    .card-action
    a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(
        .btn-floating
    ):hover {
    color: var(--dgth-bianco);
}

.card
    .card-action
    a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(
        .btn-floating
    ) {
    color: var(--dgth-bianco);
    margin: o;
}

.license {
    margin-bottom: 32px;
}
/* catalog v */

.dgth-engagement-card {
    /*background-color: rgba(255, 255, 255, 0.1); */
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dgth-engagement-card .row {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
}

.dgth-engagement-card .button-1 {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 3px 16px 3px 16px;
    border: none;
    border-radius: 100px;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    margin-bottom: 5px;
    fill: var(--dgth-bianco);
}

.dgth-engagement-card .button-1:hover {
    border: none;
    background: transparent;
    color: #ffffff;
}
.dgth-engagement-card .button-1:focus {
    text-transform: uppercase;
    background: transparent;
}
.dgth-engagement-card .button-1:active {
    background: transparent;
    color: #ffffff;
    text-transform: uppercase;
}
.dgth-engagement-card .button-1:visited {
    background-color: transparent;
}

/*pagina riepilogo costi*/

.card-pricing {
    width: 30%;
    border: 1px solid var(--dgth-bianco);
    border-radius: 10px;
    padding: 16px;
    text-align: left;
    display: flex;
    flex-direction: column;
    min-width: 250px;
    min-height: 500px;
    position: relative;
}

/* .card-pricing {
  width: 25%;
  border: 1px solid black;
  border-radius: 10px;
  padding: 16px;
  text-align: left;
  display: grid;
  grid-template-row: 5fr 1fr;
  flex-direction: column;
  min-width: 250px;
  max-height: 500px;
  position:relative;
} */

.card-pricing-content span {
}

[type="radio"]:checked + span::after,
[type="radio"].with-gap:checked + span::after {
    background-color: var(--dgth-orange-primary);
}
[type="radio"]:checked + span::after,
[type="radio"].with-gap:checked + span::before,
[type="radio"].with-gap:checked + span::after {
    border: 2px solid var(--dgth-orange-primary);
}
label:has(input[type="radio"]:checked) {
    color: var(--dgth-orange-primary);
}
.card-pricing:has(input[type="radio"]:checked) {
    border-color: var(
        --dgth-orange-primary
    ); /* Sostituisci con il colore che preferisci */
}
/*site-bar new*/

.button-msgbar {
    text-align: center;
    padding: 8px;
    border-radius: 100px;
    background-color: var(--dgth-bianco);
    cursor: pointer;
    font-size: 14px;
    color: var(--dgth-nero) !important;
    text-decoration: none;
    text-transform: capitalize;
    margin: 0 1rem 0 0;
    transition:
        transform 0.2s ease-out,
        box-shadow 0.2s ease-out;
}
.button-msgbar:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.sitebar .text::first-letter {
    text-transform: uppercase;
}

/* scelta codice fiscale piva*/
.background-container {
    position: relative;
    margin: auto;
    background-color: rgba(255, 255, 255, 0.1);
    border: solid 1px rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    width: 75%;
}
.dgth-fiscal-card {
    width: 35%;
    min-width: 200px;
    background-color: (255, 255, 255, 0.1);
    color: white;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 10px;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.dgth-fiscal-card:first-child {
    margin-left: 2rem;
}
.dgth-fiscal-action {
    align-self: center;
    margin-top: auto;
    margin-bottom: 1rem;
}
.dgth-fiscal-card li {
    margin-bottom: 8px;
    font-size: 16px;
}
.dgth-fiscal-card h2 {
    font-size: var(--dgth-tit2);
    margin: 0 0 1.424rem 0;
}

.background-container p {
    padding: 2rem 2rem 0 2rem;
}

.background-container h4 {
    font-size: 1rem;
    margin: 1.52rem 2rem 0 2rem;
}

.background-container ul:not(.browser-default) > li {
    list-style-type: disc;
    list-style-position: inside;
}

.card-content .card-action {
    background-color: transparent;
}

/* pagina-pagamenti*/

.card-pricing .highlight {
    border-color: var(--dgth-orange-secondary);
    box-shadow: 0 0 0 1px var(--dgth-orange-secondary) inset;
}

.badge {
    position: absolute;
    top: -10px;
    left: 14px;
    background: var(--dgth-orange-secondary);
    color: #111;
    padding: 4px 10px;
    border-radius: 999px; /* Rende gli angoli completamente arrotondati */
    font-size: 12px;
    font-weight: 700;
}

.badge {
    position: absolute;
    top: -10px;
    left: 14px;
    background: var(--dgth-orange-secondary) !important;
    color: var(--dgth-bianco) !important;
    padding: 2px 8px 2px 8px !important;
    border-radius: 999px;
    font-size: 14px !important;
    font-weight: 700;
    line-height: 18px !important;
}

.card-pricing-title {
    font-weight: 500;
    font-size: 22px;
    margin: 8px 0 6px;
    color: var(--dgth-bianco);
}

.subtitle {
    color: #9aa0a6;
    font-size: 13px;
    margin-bottom: 14px;
}

.section-label {
    color: var(--dgth-orange-primary);
    font-size: 14px;
    text-transform: uppercase;
    margin: 8px 0;
}

.features-container {
    display: flex;
    margin-bottom: 10px;
    flex-wrap: wrap;
    color: var(--dgth-bianco);
}
.feature-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.feature-icon {
    width: 18px;
    height: 18px;
    color: var(--dgth-bianco);
    margin-right: 6px;
}

.feature-text {
    font-size: 14px;
    line-height: 1.4;
}

.list-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.feature-row p {
    margin: 0;
}

.line-icon {
    width: 10px;
    height: 1.7px;
    background-color: var(--dgth-bianco);
    margin-right: 6px;
    flex-shrink: 0;
}

.price p {
    color: var(--dgth-bianco);
    margin-bottom: 8px;
}
.align {
    align-content: center;
    display: flex;
}
.cross {
    color: #9aa0a6;
    text-decoration: line-through;
    margin-right: 8px;
}
/*.disc {
    background: #2a2b2f;
    border: 1px solid #2a2b2f;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 11px;
    margin-left: 6px;
    color:white;
} */

.disc {
    background: rgba(237, 112, 27, 0.25);
    border: 1px solid var(--dgth-orange-secondary);
    color: white;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 12px;
}

.total {
    font-weight: 800;
    font-size: 28px;
    margin: 2px 0 2px;
    color: var(--dgth-bianco);
}

.note {
    margin-top: 10px;
    font-size: 12px;
    color: #9aa0a6;
}
.price .note {
    margin-top: 2px;
}
.detail-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #9aa0a6;
    font-size: 13px;
    cursor: pointer;
    background-color: transparent;
    border: none;
}

.breakdown {
    border-top: 1px dashed var(--line);
    margin-top: 8px;
    padding-top: 8px;
    color: #9aa0a6;
    font-size: 13px;
    display: none;
}
.note {
    margin-top: 10px;
    font-size: 12px;
    color: #9aa0a6;
}

/* Checkbox button container */
.checkbox-button-container {
    display: grid;
    grid-template-areas: "stack";
    width: 150px;
    height: 50px;
}

[type="radio"],
.button-appearance {
    grid-area: stack;
}

[type="radio"] {
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    cursor: pointer;
}

.button-appearance {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--dgth-nero);
    color: var(--dgth-bianco);
    font-size: 14px;
    border-radius: 100px;
    border: 2px solid var(--dgth-orange-secondary);
    padding: 12px 28px;
    user-select: none;
    z-index: 1;
}

[type="radio"]:checked + .button-appearance {
    background-color: var(--dgth-orange-secondary);
}

.card-pricing-action {
    align-self: center;
    padding-bottom: 16px;
    padding-top: 2rem;
    margin-top: auto;
}

/* Responsive */
@media (max-width: 900px) {
    .card-pricing {
        max-width: 45%;
    }
}

@media (max-width: 600px) {
    .card-pricing {
        max-width: 100%;
    }
}
.contenitore-radio {
    position: relative;
    display: inline-block;
    margin-right: 10px;
}
.bottone-radio {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 12px 28px;
    border: 1px solid #e85211;
    border-radius: 100px;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    color: #e85211;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
}
.contenitore-radio input[type="radio"] {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    cursor: pointer;
}

/* menu
.dash-container .menu {
    background-color: rgba(252, 252, 252, 0.1);
    grid-area: menu;
    width: auto;
}*/

.menu .text {
    padding: 2rem;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
}
.menu-entry {
    margin: 0 0 0 1rem;
    font-size: var(--dgth-tit2);
}
.text div svg {
    width: 24px;
    height: 24px;
    fill: white;
}

/* form cf piva*/

.form-actions {
    display: flex;
    justify-content: space-between;
    padding: 0 16px 0 16px;
    margin: 24px 0;
}

fieldset {
    padding: 2rem 2rem 0 2rem;
    border: none;
}

/* Check-box */

.licenza-checkbox {
    /* Imposta il display Grid */
    display: grid;
    /* Definisce un'area che sarà occupata da entrambi gli elementi */
    grid-template-areas: "overlap";
    /* Importante per allineare il contenuto all'inizio */
    align-items: center;
    position: relative;
}

.licenza-checkbox input[type="checkbox"] {
    /* Assegna l'input all'area di sovrapposizione */
    grid-area: overlap;

    /* PROPRIETÀ CRUCIALI PER NASCONDERE MA MANTENERE CLICCABILE */
    opacity: 0; /* ⬅️ Questo è ciò che nasconde la grafica del box nativo */
    pointer-events: all; /* ⬅️ Questo assicura che il click sia intercettato */
    z-index: 99;
    /* POSIZIONAMENTO E DIMENSIONI */
    width: 20px; /* Deve avere le dimensioni del box finto (p::before) */
    height: 20px;
    margin: 0;

    /* Posiziona l'input nativo sopra il box finto */
    justify-self: start; /* Allinea a sinistra (inizio) della cella */
    align-self: center; /* Centra verticalmente */

    /* Assicurati che non ci siano margini o allineamenti che lo spostano */
}

/* 3. Stile del Paragrafo (Testo e Custom Box) */
.licenza-checkbox p {
    /* Assegna il p all'area di sovrapposizione */
    grid-area: overlap;
    z-index: 1;
    /* Il resto del tuo stile per il paragrafo rimane valido */
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    margin: 0;
    padding-left: 28px;
}
/* 3. Crea il BOX visibile (::before) */
/* L'elemento che visivamente sostituisce la checkbox */
.licenza-checkbox p::before {
    content: "";
    display: block;
    width: 20px; /* Dimensione del box */
    height: 20px;
    border: 2px solid #ccc; /* Bordo standard */
    background-color: #fff;
    border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 0; /* Posiziona il box a sinistra del testo */
    transform: translateY(-50%);
    box-sizing: border-box;
    z-index: 2;
}

/* 4. Aggiunge il SEGNO DI SPUNTA (✓) quando l'input è :checked */
/* Usa l'input selezionato (+) e il suo elemento adiacente (p::after) */
.licenza-checkbox input[type="checkbox"]:checked + p::after {
    /* Regole che hai fornito per il segno di spunta */
    content: "✓";
    font-size: 16px;
    color: var(--dgth-nero); /* Usa il colore del tema o un fallback */
    position: absolute;
    z-index: 10;
    /* Centra la spunta all'interno del box (simulato da ::before) */
    top: 50%;
    left: 10px; /* 10px = (0 (left box) + 20px (width box)) / 2 */
    transform: translate(-50%, -50%);

    /* Stili aggiuntivi per il box checkato */
    font-weight: bold; /* Per rendere il segno di spunta più visibile */
}

/* OPZIONALE: Modifica l'aspetto del box stesso quando è selezionato */
.licenza-checkbox input[type="checkbox"]:checked + p::before {
    border-color: var(--dgth-nero, black);
    background-color: #fff; /* O un colore a tua scelta */
}

.custom-checkbox:checked + label::after {
    content: "✓";
    font-size: 16px;
    color: var(--dgth-nero);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.custom-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* accettazione termini */
.card-action {
    display: grid;
    align-items: center;
    padding: 1rem;
    justify-content: center;
}

.intro p {
    color: rgba(255, 255, 255, 0.9);
}

.header h1 {
    font-size: 2em;
    margin-bottom: 25px;
    color: #ffffff;
}

/* .main-container {
     max-width: 1200px;
     margin: 40px auto;
     padding: 30px;
     background-color: #1e1e1e;
     border-radius: 12px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
     }*/

.content-grid {
    display: grid;
    /* Due colonne: la prima 3/5 dello spazio, la seconda 2/5 */
    grid-template-columns: 3fr 2fr;
    gap: 40px; /* Spazio tra le colonne */
}

.licenze-cards {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Spazio tra le card */
    margin-bottom: 2em;
}

.card-licenza {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Allineamento in alto per il testo lungo */
    padding: 15px 0;
    /* Separatore leggero, non un bordo completo */
    border-bottom: 1px solid #333;
}
.card-licenza:last-of-type {
    border-bottom: none; /* Rimuove il separatore dall'ultima card prima del footer */
}

.licenza-testo {
    flex-grow: 1;
    padding-right: 20px;
}

.licenza-testo h3 {
    margin: 0 0 12px 0;
    font-size: 1.1em;
    color: #ffffff;
}

.licenza-testo p {
    margin: 5px 0;
    font-size: 15px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.7);
}

.licenza-testo a:hover {
    color: rgba(255, 255, 255, 1);
}

.licenza-testo a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
}
.licenza-checkbox {
    /* Stile per il contenitore del checkbox (solo per allineamento) */
    padding-top: 5px; /* Spostato leggermente in basso per allinearsi al testo */
    margin-bottom: 2rem;
}
.custom-checkbox {
    /* Nasconde il checkbox nativo per usare la label come stile */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.licenza-checkbox label {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 2px solid #555;
    border-radius: 4px;
    background-color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

/* Stile quando il checkbox è selezionato */
.custom-checkbox:checked + label {
    background-color: var(--dgth-bianco); /* Colore di spunta (Blu) */
    border-color: var(--dgth-bianco);
}
.custom-checkbox:checked + label:after {
    content: "✓"; /* Oppure un'icona come '✔' o un SVG */
    font-size: 16px;
    color: var(--dgth-nero);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.riepilogo-pagamento {
    background-color: #2a2a2a; /* Sfondo scuro per la card di riepilogo */
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 25px;
    height: fit-content; /* Rende la card solo alta quanto il suo contenuto */
}

.riepilogo-card h2 {
    margin: 0 0 12px 0;
    color: #ffffff;
    font-size: 1.4em;
}

.riepilogo-card .sottotitolo {
    font-size: 1em;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 25px;
    padding-bottom: 15px;
}

.dettagli-costo {
    margin-bottom: 20px;
    margin-top: 24px;
}

.voce-costo {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 1em;
    color: #ccc;
}
.voce-costo.totale-parziale {
    padding-top: 5px;
    margin-top: 15px;
    font-weight: bold;
    color: #f0f0f0;
}

.valore-scontato {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ccc; /* Prezzo totale "barrato" nell'immagine originale */
    text-decoration: line-through;
    text-decoration-color: #ff6347; /* Un colore che simuli il barrato */
}

.sconto-badge {
    background-color: #ff6347; /* Rosso/Arancione per lo sconto */
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7em;
    font-weight: normal;
    text-decoration: none; /* Rimuove il barrato dal badge */
}

.saldo-finale {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 2px solid #3a3a3a;
    font-size: 1.5em;
    font-weight: bold;
    color: #ffffff;
}
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    transition:
        background-color 0.2s,
        opacity 0.2s;
}

.arrow-left {
    margin-right: 5px;
}

.arrow-right {
    margin-left: 5px;
}
/* Stili per il responsive (opzionale, ma consigliato) */
@media (max-width: 800px) {
    .content-grid {
        /* Su schermi piccoli, le colonne si impilano */
        grid-template-columns: 1fr;
    }

    .licenze-cards {
        /* 2. licenze-cards (colonna sinistra) prende l'ordine 2, appare per secondo (sotto al riepilogo). */
        order: 2;
    }
}

.riepilogo-pagamento .cross {
    margin-right: 0;
    margin-left: 8px;
}

.card .card-action {
    background-color: transparent;
    position: relative;
    padding: 16px 16px 0 16px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    border-top: none;
}
.license-action {
    margin: 0 !important;
}

#livello_1 {
    width: 280px;
    padding-top: 8px;
}

.sitebar .site a {
    /*color: var(--dgth-bianco);
    font-size: var(--dgth-tit1);
    margin-left: 1rem;
    line-height: 1em;
    font-size: 0.8em;*/
    display: block;
}

#terms-form .button-1:disabled {
    background-color: #ccc;
    border: 1px solid #ccc;
    color: #666;
    cursor: not-allowed;
}