/* =====================================================
   FN Leads Manager — Frontend Form Styles
   ===================================================== */

:root {
    --fnlm-blue:    #003580;
    --fnlm-red:     #cc0000;
    --fnlm-green:   #00a651;
    --fnlm-gold:    #c8a040;
    --fnlm-white:   #ffffff;
    --fnlm-light:   #f4f6f9;
    --fnlm-border:  #dde3ed;
    --fnlm-gray:    #6b7280;
    --fnlm-text:    #1a2235;
    --fnlm-radius:  10px;
    --fnlm-shadow:  0 8px 32px rgba(0,53,128,.14);
    --fnlm-trans:   all .22s ease;
}

/* ---- TITOLO PAGINA DEL TEMA (nascosto sulle pagine del plugin) ---- */
/* Il titolo viene svuotato lato PHP (filtro 'the_title' in
   communitypro.php); qui azzeriamo anche lo spazio che il tema
   riservava per contenerlo, per evitare un vuoto sotto la riga tricolore. */
.wp-block-post-title:empty,
h1.entry-title:empty,
.entry-title:empty,
.page-title:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    line-height: 0 !important;
}
.wp-block-group:has(> .wp-block-post-title:empty),
.entry-header:has(> .entry-title:empty),
.page-header:has(> .page-title:empty) {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
}

/* Riduce lo spazio residuo tra la riga tricolore del tema e il contenuto
   della pagina, visto che il titolo (che occupava quello spazio) è
   sempre nascosto nelle pagine del plugin. */
.entry-header, .page-header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.entry-content, .wp-block-post-content {
    margin-top: 0 !important;
}

/* ---- CARD WRAPPER ---- */
.fn-lead-card {
    background: rgba(255,255,255,.96);
    border-radius: 16px;
    box-shadow: var(--fnlm-shadow);
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(10px);
}
.fn-lead-card--dark {
    background: rgba(0,32,96,.92);
    color: #fff;
}
.fn-lead-card-header {
    background: linear-gradient(135deg, var(--fnlm-blue) 0%, #0060cc 100%);
    padding: 22px 28px 20px;
    position: relative;
}
.fn-lead-card-header::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 20px;
    background: rgba(255,255,255,.96);
    clip-path: ellipse(55% 100% at 50% 100%);
}
.fn-lead-card-header h3 {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 4px;
    position: relative;
}
.fn-lead-card-header p {
    color: rgba(255,255,255,.82);
    font-size: .84rem;
    margin: 0;
    position: relative;
}

/* ---- FORM BODY ---- */
.fn-lead-form-body {
    padding: 24px 28px 28px;
}

/* ---- FIELD GROUP ---- */
.fn-field-group {
    margin-bottom: 16px;
    position: relative;
}
.fn-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ---- LABEL ---- */
.fn-label {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    color: var(--fnlm-blue);
    margin-bottom: 6px;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.fn-label .required {
    color: var(--fnlm-red);
    margin-left: 2px;
}

/* ---- INPUT ---- */
.fn-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--fnlm-border);
    border-radius: var(--fnlm-radius);
    font-size: .95rem;
    color: var(--fnlm-text);
    background: var(--fnlm-white);
    transition: var(--fnlm-trans);
    outline: none;
    font-family: inherit;
    -webkit-appearance: none;
}
.fn-input:focus {
    border-color: var(--fnlm-blue);
    box-shadow: 0 0 0 3px rgba(0,53,128,.1);
    background: #fff;
}
.fn-input.is-invalid {
    border-color: var(--fnlm-red);
    box-shadow: 0 0 0 3px rgba(204,0,0,.1);
}
.fn-input.is-valid {
    border-color: var(--fnlm-green);
}
.fn-input::placeholder { color: #b0bac8; }

/* ---- FIELD ERROR ---- */
.fn-field-error {
    display: none;
    font-size: .78rem;
    color: var(--fnlm-red);
    margin-top: 5px;
    font-weight: 600;
}
.fn-field-error.visible { display: block; }

/* ---- NOME UTENTE SCELTO — controllo automatico di disponibilità ---- */
.fn-username-status {
    min-height: 16px;
    font-size: .78rem;
    font-weight: 600;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.fn-username-status--checking { color: var(--fnlm-gray); }
.fn-username-status--available { color: var(--fnlm-green); }
.fn-username-status--taken,
.fn-username-status--invalid { color: var(--fnlm-red); }
.fn-username-status--error { color: var(--fnlm-gray); }
.fn-username-status--checking::before,
.fn-username-status--available::before,
.fn-username-status--taken::before,
.fn-username-status--invalid::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}
.fn-username-status--checking::before { content: '\f110'; animation: fnlm-spin 1s linear infinite; }
.fn-username-status--available::before { content: '\f00c'; }
.fn-username-status--taken::before,
.fn-username-status--invalid::before { content: '\f00d'; }
@keyframes fnlm-spin { to { transform: rotate(360deg); } }

/* ---- RADIO BUTTONS (Cittadinanza) ---- */
.fn-radio-group {
    display: flex;
    gap: 12px;
}
.fn-radio-option {
    flex: 1;
    position: relative;
}
.fn-radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
}
.fn-radio-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 10px;
    border: 2px solid var(--fnlm-border);
    border-radius: var(--fnlm-radius);
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    color: var(--fnlm-gray);
    transition: var(--fnlm-trans);
    background: var(--fnlm-white);
    text-align: center;
}
.fn-radio-label .flag { font-size: 1.2rem; }
.fn-radio-option input[type="radio"]:checked + .fn-radio-label {
    border-color: var(--fnlm-blue);
    background: rgba(0,53,128,.06);
    color: var(--fnlm-blue);
}
.fn-radio-option input[type="radio"]:checked + .fn-radio-label::before {
    content: '✓';
    width: 18px; height: 18px;
    background: var(--fnlm-blue);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .65rem;
    font-weight: 900;
    flex-shrink: 0;
}
.fn-radio-label:hover {
    border-color: var(--fnlm-blue);
    background: rgba(0,53,128,.04);
}

/* ---- SELECT ---- */
.fn-select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--fnlm-border);
    border-radius: var(--fnlm-radius);
    font-size: .95rem;
    color: var(--fnlm-text);
    background: var(--fnlm-white);
    transition: var(--fnlm-trans);
    outline: none;
    cursor: pointer;
    font-family: inherit;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23003580' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}
.fn-select:focus { border-color: var(--fnlm-blue); box-shadow: 0 0 0 3px rgba(0,53,128,.1); }

/* ---- PRIVACY CHECKBOX ---- */
.fn-privacy-wrapper {
    background: rgba(0,53,128,.04);
    border: 1px solid rgba(0,53,128,.12);
    border-radius: var(--fnlm-radius);
    padding: 14px 16px;
    margin-bottom: 18px;
}
.fn-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--fnlm-text);
}
.fn-checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
}
.fn-checkbox-custom {
    width: 20px; height: 20px;
    min-width: 20px;
    border: 2px solid var(--fnlm-border);
    border-radius: 5px;
    background: var(--fnlm-white);
    display: flex; align-items: center; justify-content: center;
    transition: var(--fnlm-trans);
    margin-top: 1px;
}
.fn-checkbox-label input[type="checkbox"]:checked ~ .fn-checkbox-custom {
    background: var(--fnlm-blue);
    border-color: var(--fnlm-blue);
}
.fn-checkbox-label input[type="checkbox"]:checked ~ .fn-checkbox-custom::after {
    content: '';
    width: 5px; height: 9px;
    border: 2px solid #fff;
    border-top: none; border-left: none;
    transform: rotate(45deg) translate(-1px,-1px);
    display: block;
}
.fn-checkbox-label.is-invalid .fn-checkbox-custom {
    border-color: var(--fnlm-red);
    background: rgba(204,0,0,.04);
}
.fn-privacy-link { color: var(--fnlm-blue); text-decoration: underline; font-weight: 600; }
.fn-privacy-link:hover { color: var(--fnlm-red); }

/* ---- HONEYPOT (anti-spam) ---- */
.fn-hp-field { opacity: 0; position: absolute; top: 0; left: 0; height: 0; width: 0; z-index: -1; pointer-events: none; }

/* ---- SUBMIT BUTTON ---- */
.fn-submit-btn {
    width: 100%;
    padding: 15px 24px;
    background: linear-gradient(135deg, var(--fnlm-red) 0%, #a00000 100%);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .3px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: var(--fnlm-trans);
    box-shadow: 0 6px 20px rgba(204,0,0,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: inherit;
    position: relative;
    overflow: hidden;
}
.fn-submit-btn::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.15), transparent);
    opacity: 0;
    transition: opacity .2s;
}
.fn-submit-btn:hover::before { opacity: 1; }
.fn-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(204,0,0,.45);
}
.fn-submit-btn:active { transform: translateY(0); }
.fn-submit-btn:disabled {
    opacity: .7; cursor: not-allowed;
    transform: none; box-shadow: none;
}
.fn-submit-btn .fn-spinner {
    width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: fnlm-spin .7s linear infinite;
    display: none;
}
.fn-submit-btn.is-loading .fn-spinner { display: block; }
.fn-submit-btn.is-loading .fn-btn-text { display: none; }

@keyframes fnlm-spin { to { transform: rotate(360deg); } }

/* ---- MESSAGES ---- */
.fn-form-message {
    display: none;
    padding: 14px 18px;
    border-radius: var(--fnlm-radius);
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: 16px;
    align-items: center;
    gap: 10px;
}
.fn-form-message.visible { display: flex; }
.fn-form-message--success {
    background: rgba(0,166,81,.1);
    border: 1px solid rgba(0,166,81,.3);
    color: #005c2b;
}
.fn-form-message--error {
    background: rgba(204,0,0,.08);
    border: 1px solid rgba(204,0,0,.25);
    color: #8b0000;
}
.fn-form-message i { font-size: 1.2rem; flex-shrink: 0; }

/* ---- GDPR BADGE ---- */
.fn-gdpr-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: .72rem;
    color: var(--fnlm-gray);
    margin-top: 12px;
    opacity: .7;
}
.fn-gdpr-badge i { font-size: .8rem; }

/* ---- CONTEXT: Hero (white text labels) ---- */
.fn-lead-card.context-hero .fn-label { color: var(--fnlm-blue); }

/* ---- SUCCESS STATE (entire card) ---- */
.fn-lead-card .fn-success-state {
    display: none;
    text-align: center;
    padding: 40px 28px;
}
.fn-lead-card .fn-success-state.visible { display: block; }
.fn-success-icon {
    width: 80px; height: 80px;
    background: linear-gradient(135deg, var(--fnlm-green), #00d466);
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.2rem;
    box-shadow: 0 8px 24px rgba(0,166,81,.3);
    animation: pop-in .5s cubic-bezier(.36,1.06,.52,1.2) both;
}
@keyframes pop-in {
    0% { transform: scale(0) rotate(-20deg); opacity: 0; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.fn-success-state h4 { font-size: 1.2rem; color: var(--fnlm-blue); margin-bottom: 8px; }
.fn-success-state p { font-size: .9rem; color: var(--fnlm-gray); }

/* ---- RESPONSIVE ---- */
@media (max-width: 480px) {
    .fn-lead-form-body { padding: 18px 18px 22px; }
    .fn-field-row { grid-template-columns: 1fr; }
    .fn-radio-label { font-size: .82rem; padding: 10px 6px; }
}