/* 
 * FORM & INPUT 
 */
form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-button-form-form-gap, 40px);
}

.field-wrapper {
    /*gap: var(--spacing-button-form-field-gap, 40px);*/
    position: relative;
    
    gap: var(--spacing-button-form-grid-gap, 8px);
}

.field-wrapper > div {
    gap: var(--spacing-button-form-label-gap, 4px);
    display: flex;
    flex-direction: column;
    min-width: 48%;
}

label.form-label {
    margin: 0;
    font-size: 14px;
    letter-spacing: -0.42px;
}
div:has(:required) > label::after {
    content: " *";
}

.input-group {
    border: 1px solid transparent;
    border-radius: var(--radius-input, 9999px);
    position: relative;
}
.input-group.is-invalid {
    border-color: var(--status-danger-emphasis, #DE6060);
}

.invalid-feedback {
    position: absolute;
    bottom: -21px;
    text-align: right;
    color: var(--status-danger-emphasis, #DE6060);
}

.input-group-text, .form-control {
    border: none;
    margin: 0 !important;
    padding: 8px var(--spacing-button-form-padding, 16px);
    border-radius: var(--radius-input, 9999px);
    background: var(--surface-item, #FFF);
    color: var(--text-body, #000) !important;
    height: 48px;
}

.form-control:focus {
    background: var(--surface-item, #FFF);
}

.input-group:has(textarea){
    border-radius: var(--radius-4, 16px);
}
textarea.form-control {
    border-radius: var(--radius-4, 16px);
    height: auto;
}

::placeholder {
    color: var(--text-placeholder-ondark, #ccc) !important;
}

.form-text {
    position: absolute;
    color: var(--text-muted, #969B9C);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 12px */
    letter-spacing: -0.36px;
}


.input-text-select-group:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 99;
}
.input-text-select {
    border-top-right-radius: var(--radius-input, 9999px) !important;
    border-bottom-right-radius: var(--radius-input, 9999px) !important;
}
.input-text-select:disabled {
    background: var(--surface-item, #FFF) !important;
    opacity: 1;
}
.input-text-select-down {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px var(--spacing-button-form-padding, 16px);
}

#selectModal .slot.selected {
    border: 1px solid var(--stroke-accent, #02778E);
}
#selectModal .slot {
    flex-direction: row;
    justify-content: space-between;
}

#selectModal .slot .icon {
    color: var(--text-accent, #02778E);
    width: 22px;
    height: 22px;
}

/* Nasconde il checkbox originale */
.power-checkbox {
    display: none;
}

/* Corpo dello switch */
.power-switch {
    width: 40px;
    height: 72px;

    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;

    border-radius: var(--radius-button, 9999px);
    background: var(--toggle-surface, rgba(3, 15, 19, 0.05));
}

/* Pulsante circolare */
.power-button {
    width: 36px;
    height: 36px;

    border-radius: var(--radius-full, 9999px);
    background: var(--toggle-nob, rgba(3, 15, 19, 0.20));

    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    user-select: none;

    color: var(--text-disabled, rgba(255,255,255,0.2));
}

/* Stato ON */
.power-checkbox:checked + .power-switch {
    background: var(--toggle-surface-active, rgba(2, 119, 142, 0.20));
    align-items: flex-start;
}

.power-checkbox:checked + .power-switch .power-button {
    background: var(--toggle-nob-active, #02778E);
    color: var(--text-body, #fffff);
}

.card:has(.power-checkbox:checked) {
    background: var(--color-teal-100, rgba(2, 119, 142, 0.10));
    box-shadow: 0 0 27px 0 var(--color-teal-300, rgba(2, 119, 142, 0.30)) inset;
    border-color: var(--color-teal-100, rgba(2, 119, 142, 0.10)) !important;
}


.pick-files {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-card-padding-inner, 12px);
    text-align: center;
    border-radius: var(--radius-list-item, 16px);
    border: 1px dashed var(--stroke-accent, #02778E);
    background: var(--surface-card, #FFF);
}

.pick-files .icon {
    width: 48px;
    height: 48px;
    color: var(--text-accent, #0277BE);
}