/* ===============================
   C.E.S.I - Componente Contattaci
   Uniformato con Novità
   =============================== */

.cesi-ct-wrap,
.cesi-ct-wrap * { box-sizing: border-box; }

.cesi-ct-wrap {
    font-family: Arial, Helvetica, sans-serif;
    background: #0d0d0d;
    color: #eaeaea;
    padding: 40px 30px 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    width: 100%;
}

.cesi-ct {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---------- HEAD ---------- */
.cesi-ct__head {
    text-align: left;
    margin-bottom: 4px;
}

.cesi-ct__title {
    margin: 0 0 6px;
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: .3px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cesi-ct__title i { color: #3ab2f3; font-size: 1.15rem; }

.cesi-ct__subtitle {
    margin: 0;
    color: #9aa4b0;
    font-size: .85rem;
}

/* ---------- ALERT ---------- */
.cesi-ct__alert {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    font-size: .85rem;
    align-items: flex-start;
}

.cesi-ct__alert i { font-size: 1rem; margin-top: 2px; }
.cesi-ct__alert ul { margin: 0; padding-left: 16px; }

.cesi-ct__alert--success {
    background: rgba(34, 163, 85, .15);
    border-left: 3px solid #22a355;
    color: #7ce2a0;
}

.cesi-ct__alert--error {
    background: rgba(230, 57, 70, .15);
    border-left: 3px solid #e63946;
    color: #ff8c92;
}

/* ---------- GRIGLIA ---------- */
.cesi-ct__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cesi-ct__field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cesi-ct__field--full { grid-column: 1 / -1; }

.cesi-ct__field label {
    font-size: .72rem;
    font-weight: 600;
    color: #b8b8b8;
    margin-bottom: 5px;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.cesi-ct__field .req {
    color: #3ab2f3;
    font-weight: 700;
}

.cesi-ct__field input,
.cesi-ct__field select,
.cesi-ct__field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.1);
    background: #1a1a1a;
    color: #ffffff;
    font-family: inherit;
    font-size: .9rem;
    outline: none;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
    border-radius: 0;
}

.cesi-ct__field input::placeholder,
.cesi-ct__field textarea::placeholder { color: #6a7078; }

.cesi-ct__field input:focus,
.cesi-ct__field select:focus,
.cesi-ct__field textarea:focus {
    border-color: #3ab2f3;
    background: #222;
    box-shadow: 0 0 0 3px rgba(58, 178, 243, .18);
}

/* Select custom */
.cesi-ct__field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #b8b8b8 50%),
        linear-gradient(135deg, #b8b8b8 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 13px) calc(50% - 3px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
    cursor: pointer;
}

.cesi-ct__field select option {
    background: #1a1a1a;
    color: #fff;
}

.cesi-ct__field textarea {
    resize: vertical;
    min-height: 90px;
    line-height: 1.5;
}

/* ---------- AZIONI ---------- */
.cesi-ct__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.cesi-ct__submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    background: #3ab2f3;
    color: #fff;
    border: none;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    border-radius: 0;
}

.cesi-ct__submit:hover,
.cesi-ct__submit:focus-visible {
    background: #1a8fcc;
    transform: translateY(-1px);
    outline: none;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 480px) {
    .cesi-ct-wrap { padding: 30px 20px; }
    .cesi-ct__grid { grid-template-columns: 1fr; gap: 12px; }
    .cesi-ct__field--full { grid-column: auto; }
    .cesi-ct__submit { width: 100%; justify-content: center; }
}