/**
 * Cutino Raccolta Fondi Frontend – Stili CSS
 *
 * Styling Bootstrap-like senza dipendenze esterne.
 * Compatibile con Elementor e LiteSpeed Cache.
 *
 * @package CutinoRaccoltaFondi
 * @version 1.0.0
 */

/* =========================================================
   Variabili CSS personalizzate
   ========================================================= */
:root {
    --crff-color-primary:     #0a6fbf;
    --crff-color-primary-dark:#085a9a;
    --crff-color-success:     #198754;
    --crff-color-success-bg:  #d1e7dd;
    --crff-color-success-border: #a3cfbb;
    --crff-color-error:       #842029;
    --crff-color-error-bg:    #f8d7da;
    --crff-color-error-border:#f1aeb5;
    --crff-color-text:        #212529;
    --crff-color-label:       #344054;
    --crff-color-border:      #ced4da;
    --crff-color-border-focus:#0a6fbf;
    --crff-color-bg:          #ffffff;
    --crff-color-section-bg:  #f8f9fa;
    --crff-color-required:    #d9534f;
    --crff-color-help:        #6c757d;
    --crff-radius:            6px;
    --crff-transition:        0.2s ease-in-out;
    --crff-font:              -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --crff-shadow:            0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    --crff-shadow-focus:      0 0 0 3px rgba(10, 111, 191, .25);
}

/* =========================================================
   Wrapper principale
   ========================================================= */
.crff-wrapper {
    font-family: var(--crff-font);
    color:       var(--crff-color-text);
    max-width:   720px;
    margin:      0 auto;
    padding:     0 16px;
    box-sizing:  border-box;
}

.crff-wrapper *,
.crff-wrapper *::before,
.crff-wrapper *::after {
    box-sizing: inherit;
}

/* =========================================================
   Messaggi di stato (successo / errore)
   ========================================================= */
.crff-message {
    padding:       14px 18px;
    border-radius: var(--crff-radius);
    margin-bottom: 20px;
    font-size:     .95rem;
    line-height:   1.5;
    border:        1px solid transparent;
}

.crff-message.crff-success {
    background-color: var(--crff-color-success-bg);
    border-color:     var(--crff-color-success-border);
    color:            var(--crff-color-success);
}

.crff-message.crff-error {
    background-color: var(--crff-color-error-bg);
    border-color:     var(--crff-color-error-border);
    color:            var(--crff-color-error);
}

.crff-message ul {
    margin:     0;
    padding:    0 0 0 20px;
}

.crff-message ul li {
    margin-bottom: 4px;
}

/* =========================================================
   Sezioni del form
   ========================================================= */
.crff-section {
    background:    var(--crff-color-section-bg);
    border:        1px solid var(--crff-color-border);
    border-radius: var(--crff-radius);
    padding:       24px 28px;
    margin-bottom: 24px;
    box-shadow:    var(--crff-shadow);
}

.crff-section--privacy {
    background: #fff;
    padding:    16px 20px;
}

.crff-section-title {
    font-size:     1.1rem;
    font-weight:   600;
    color:         var(--crff-color-primary);
    margin:        0 0 20px;
    padding-bottom:10px;
    border-bottom: 2px solid var(--crff-color-primary);
}

/* =========================================================
   Campi form
   ========================================================= */
.crff-field {
    margin-bottom: 18px;
}

.crff-field:last-child {
    margin-bottom: 0;
}

/* Layout a due colonne per Nome/Cognome */
.crff-row {
    display:   flex;
    gap:       16px;
    flex-wrap: wrap;
}

.crff-col {
    flex: 1 1 200px;
    min-width: 0;
}

/* =========================================================
   Label
   ========================================================= */
.crff-label {
    display:       block;
    font-size:     .875rem;
    font-weight:   600;
    color:         var(--crff-color-label);
    margin-bottom: 6px;
}

.crff-required {
    color:       var(--crff-color-required);
    margin-left: 2px;
}

/* =========================================================
   Input, Textarea, Date
   ========================================================= */
.crff-input,
.crff-textarea,
.crff-date {
    display:          block;
    width:            100%;
    padding:          9px 13px;
    font-size:        .95rem;
    font-family:      var(--crff-font);
    color:            var(--crff-color-text);
    background-color: var(--crff-color-bg);
    border:           1px solid var(--crff-color-border);
    border-radius:    var(--crff-radius);
    transition:       border-color var(--crff-transition), box-shadow var(--crff-transition);
    appearance:       none;
    -webkit-appearance: none;
    line-height:      1.5;
}

.crff-input:focus,
.crff-textarea:focus,
.crff-date:focus {
    outline:      0;
    border-color: var(--crff-color-border-focus);
    box-shadow:   var(--crff-shadow-focus);
}

.crff-input:disabled,
.crff-textarea:disabled {
    background-color: #e9ecef;
    cursor:           not-allowed;
    opacity:          .75;
}

.crff-textarea {
    resize:    vertical;
    min-height:120px;
}

/* =========================================================
   File upload
   ========================================================= */
.crff-file {
    display:       block;
    width:         100%;
    padding:       8px 10px;
    font-size:     .875rem;
    font-family:   var(--crff-font);
    color:         var(--crff-color-text);
    background:    var(--crff-color-bg);
    border:        1px dashed var(--crff-color-border);
    border-radius: var(--crff-radius);
    cursor:        pointer;
    transition:    border-color var(--crff-transition);
}

.crff-file:hover,
.crff-file:focus {
    border-color:  var(--crff-color-border-focus);
    outline:       0;
    box-shadow:    var(--crff-shadow-focus);
}

/* =========================================================
   Checkbox
   ========================================================= */
.crff-fieldset {
    border:  none;
    padding: 0;
    margin:  0;
}

.crff-fieldset legend.crff-label {
    margin-bottom: 10px;
}

.crff-checkbox-group {
    display:   flex;
    flex-wrap: wrap;
    gap:       10px 24px;
}

.crff-checkbox-label {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   .9rem;
    cursor:      pointer;
    user-select: none;
}

.crff-checkbox {
    width:         17px;
    height:        17px;
    flex-shrink:   0;
    accent-color:  var(--crff-color-primary);
    cursor:        pointer;
    border-radius: 3px;
}

/* Privacy label */
.crff-privacy-label {
    align-items: flex-start;
    gap:         10px;
    font-size:   .875rem;
    line-height: 1.5;
}

.crff-privacy-label a {
    color:           var(--crff-color-primary);
    text-decoration: underline;
}

.crff-privacy-label a:hover {
    color: var(--crff-color-primary-dark);
}

/* =========================================================
   Testo di aiuto
   ========================================================= */
.crff-help-text {
    display:     block;
    font-size:   .8rem;
    color:       var(--crff-color-help);
    margin-top:  5px;
}

/* =========================================================
   Bottone submit
   ========================================================= */
.crff-submit-wrap {
    text-align:  right;
    margin-top:  8px;
}

.crff-btn {
    display:          inline-block;
    padding:          11px 28px;
    font-size:        1rem;
    font-weight:      600;
    font-family:      var(--crff-font);
    line-height:      1.5;
    text-align:       center;
    border:           none;
    border-radius:    var(--crff-radius);
    cursor:           pointer;
    transition:       background-color var(--crff-transition),
                      box-shadow var(--crff-transition),
                      transform var(--crff-transition);
    text-decoration:  none;
}

.crff-btn--primary {
    background-color: var(--crff-color-primary);
    color:            #ffffff;
}

.crff-btn--primary:hover {
    background-color: var(--crff-color-primary-dark);
    box-shadow:       0 4px 12px rgba(10, 111, 191, .3);
    transform:        translateY(-1px);
}

.crff-btn--primary:focus {
    outline:    0;
    box-shadow: var(--crff-shadow-focus);
}

.crff-btn--primary:active {
    transform:  translateY(0);
    box-shadow: none;
}

.crff-btn:disabled,
.crff-btn[disabled] {
    opacity:    .65;
    cursor:     not-allowed;
    transform:  none;
    box-shadow: none;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 600px) {
    .crff-section {
        padding: 18px 16px;
    }

    .crff-row {
        flex-direction: column;
        gap:            0;
    }

    .crff-col {
        flex: 1 1 100%;
    }

    .crff-submit-wrap {
        text-align: center;
    }

    .crff-btn {
        width: 100%;
    }

    .crff-checkbox-group {
        flex-direction: column;
        gap:            8px;
    }
}