@import 'tailwindcss';

@source '../js/sdk/**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

:root {
    --lcf-primary: #3f57a1;
    --lcf-primary-dark: #2d3f75;
    --lcf-primary-light: #e8ebf5;
    --lcf-secondary: #b7bec8;
    --lcf-accent: #6ba3a9;
    --lcf-accent-light: #d4e8eb;
    --lcf-bg-cream: #fdfdfc;
    --lcf-text-dark: #1b1b18;
    --lcf-text-medium: #6b7280;
}

/*
 * Tutte le regole sono scoped sotto i container SDK per prevalere sui CSS del tema
 * WordPress. Il blocco finale usa !important sui controlli più spesso sovrascritti.
 */
@layer components {
    [data-lcf-registration-form],
    [data-lcf-renewal-form] {
        & .lcf-form {
            @apply box-border font-sans text-gray-900;
        }

        & .lcf-form * {
            @apply box-border;
        }

        & .lcf-form-shell {
            @apply mx-auto max-w-4xl px-4 py-8;
        }

        & .lcf-form-card {
            @apply bg-transparent;
        }

        & .lcf-form-card-body {
            @apply p-0 text-gray-900 md:p-0;
        }

        & .lcf-form-page-title {
            @apply mb-6 text-center text-2xl font-bold;
            color: var(--lcf-primary);
        }

        & .lcf-form-intro {
            @apply mb-6 rounded-xl border-l-4 border-blue-500 bg-gradient-to-r from-blue-50 to-indigo-50 p-5 text-sm leading-relaxed text-gray-700;
        }

        & .lcf-form-section {
            @apply relative mb-8;
        }

        & .lcf-form-section-header {
            @apply mb-5 border-b border-gray-200 pb-3;
        }

        & .lcf-form-section-title {
            @apply text-lg font-semibold;
            color: var(--lcf-primary);
        }

        & .lcf-form-grid {
            @apply mb-4 grid grid-cols-1 gap-4 md:grid-cols-2;
        }

        & .lcf-form-grid .lcf-form-grid-full {
            @apply md:col-span-2;
        }

        & .lcf-form-field {
            @apply block;
        }

        & .lcf-form-label {
            @apply mb-2 block text-sm font-medium text-gray-700;
        }

        & .lcf-form-label-required::after {
            content: ' *';
            @apply font-bold text-red-500;
        }

        & .lcf-form-input,
        & .lcf-form-select {
            @apply w-full min-h-[2.75rem] rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-[0.9375rem] leading-normal text-gray-900 shadow-sm transition-colors;
        }

        & .lcf-form-input:focus,
        & .lcf-form-select:focus {
            @apply border-[var(--lcf-primary)] outline-none ring-2 ring-[var(--lcf-primary)]/20;
        }

        & .lcf-form-input.uppercase {
            @apply uppercase;
        }

        & .lcf-form-radio-group {
            @apply mt-2 flex flex-wrap gap-4;
        }

        & .lcf-form-radio {
            @apply flex cursor-pointer items-center gap-2 text-sm font-normal text-gray-700;
        }

        & .lcf-form-radio input {
            @apply h-4 w-4 border-gray-300;
            accent-color: var(--lcf-primary);
        }

        & .lcf-form-note {
            @apply mt-1.5 text-xs text-gray-500;
        }

        & .lcf-form-privacy-block {
            @apply mb-4 rounded-lg border border-gray-200 p-4;
        }

        & .lcf-form-privacy-block-required {
            @apply border-2 bg-blue-50/50;
            border-color: color-mix(in srgb, var(--lcf-primary) 40%, white);
        }

        & .lcf-form-privacy-block a {
            color: var(--lcf-primary);
            @apply underline;
        }

        & .lcf-form-bank-details {
            @apply my-3 rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-4 text-sm leading-relaxed text-gray-700;
        }

        & .lcf-form-fee-option {
            @apply mb-2 block cursor-pointer rounded-lg border border-gray-200 p-3 transition-colors hover:border-[var(--lcf-primary)]/40 hover:bg-gray-50;
        }

        & .lcf-form-fee-option input {
            @apply mr-2;
        }

        & .lcf-form-checkbox {
            @apply flex items-start gap-2 text-sm text-gray-700;
        }

        & .lcf-form-checkbox input {
            @apply mt-0.5;
        }

        & .lcf-form-btn {
            @apply inline-flex cursor-pointer items-center justify-center rounded-lg px-5 py-2.5 text-base font-medium text-white shadow-sm transition-colors disabled:cursor-default disabled:opacity-60;
            background-color: var(--lcf-primary);
        }

        & .lcf-form-btn:hover:not(:disabled) {
            background-color: var(--lcf-primary-dark);
        }

        & .lcf-form-btn-secondary {
            @apply mt-4 inline-flex cursor-pointer items-center justify-center rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-base font-medium text-gray-800 shadow-sm transition-colors hover:bg-gray-50;
        }

        & .lcf-form-message {
            @apply mt-4 rounded-lg px-4 py-3 text-sm;
        }

        & .lcf-form-message.success {
            @apply border border-green-200 bg-green-50 text-green-800;
        }

        & .lcf-form-message.error {
            @apply border border-red-200 bg-red-50 text-red-800;
        }

        & .lcf-form-amount {
            @apply my-3 text-2xl font-bold;
            color: var(--lcf-accent);
        }

        & .lcf-form-pay-option {
            @apply mb-4;
        }

        & .lcf-form-required-note {
            @apply mt-2 text-xs text-gray-500;
        }

        & .lcf-form-required-note span {
            @apply font-bold text-red-500;
        }

        & .lcf-form-tax-status {
            @apply mt-1 text-xs;
        }

        & .lcf-form-tax-status.valid {
            @apply text-green-700;
        }

        & .lcf-form-tax-status.invalid {
            @apply text-red-700;
        }

        & .lcf-form-tax-status.pending {
            @apply italic text-gray-500;
        }

        & .lcf-form-hidden {
            @apply hidden;
        }

        & .lcf-form-loading {
            @apply pointer-events-none opacity-60;
        }

        & .lcf-form .field-with-status.touched:valid:not(:blank),
        & .lcf-form.form-submitted .field-with-status:valid:not(:blank) {
            border-color: #10b981 !important;
        }

        & .lcf-form select.field-with-status:invalid:not(:focus) {
            border-color: inherit !important;
        }

        & .lcf-form .field-with-status.touched:invalid:not(:focus),
        & .lcf-form.form-submitted .field-with-status:invalid:not(:focus) {
            border-color: #ef4444 !important;
        }
    }
}

/* Override espliciti: prevalgono sui temi WP che resettano input/button/heading */
[data-lcf-registration-form] .lcf-form,
[data-lcf-renewal-form] .lcf-form {
    font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif !important;
    color: #111827 !important;
    line-height: 1.5 !important;
}

[data-lcf-registration-form] .lcf-form h2,
[data-lcf-registration-form] .lcf-form h3,
[data-lcf-renewal-form] .lcf-form h2,
[data-lcf-renewal-form] .lcf-form h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

[data-lcf-registration-form] .lcf-form p,
[data-lcf-renewal-form] .lcf-form p {
    margin: 0 0 1rem !important;
}

[data-lcf-registration-form] .lcf-form label,
[data-lcf-renewal-form] .lcf-form label {
    font-weight: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

[data-lcf-registration-form] .lcf-form-input,
[data-lcf-registration-form] .lcf-form-select,
[data-lcf-renewal-form] .lcf-form-input,
[data-lcf-renewal-form] .lcf-form-select {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 2.75rem !important;
    margin: 0 !important;
    padding: 0.625rem 0.875rem !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.5rem !important;
    background-color: #fff !important;
    color: #111827 !important;
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
    appearance: auto !important;
}

[data-lcf-registration-form] .lcf-form-input[type='file'],
[data-lcf-renewal-form] .lcf-form-input[type='file'] {
    padding: 0.5rem !important;
}

[data-lcf-registration-form] .lcf-form-btn,
[data-lcf-renewal-form] .lcf-form-btn {
    display: inline-flex !important;
    width: auto !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0.625rem 1.25rem !important;
    border: none !important;
    border-radius: 0.5rem !important;
    background-color: var(--lcf-primary) !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    text-transform: none !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
    cursor: pointer !important;
}

[data-lcf-registration-form] .lcf-form-btn:hover:not(:disabled),
[data-lcf-renewal-form] .lcf-form-btn:hover:not(:disabled) {
    background-color: var(--lcf-primary-dark) !important;
    color: #fff !important;
}

[data-lcf-registration-form] .lcf-form-btn-secondary,
[data-lcf-renewal-form] .lcf-form-btn-secondary {
    display: inline-flex !important;
    background-color: #fff !important;
    color: #1f2937 !important;
    border: 1px solid #d1d5db !important;
}

[data-lcf-registration-form] .lcf-form-radio input,
[data-lcf-renewal-form] .lcf-form-radio input,
[data-lcf-registration-form] .lcf-form-checkbox input,
[data-lcf-renewal-form] .lcf-form-checkbox input,
[data-lcf-registration-form] .lcf-form-fee-option input,
[data-lcf-renewal-form] .lcf-form-fee-option input {
    width: auto !important;
    min-height: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
}

[data-lcf-registration-form] .lcf-form-grid,
[data-lcf-renewal-form] .lcf-form-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
}

@media (min-width: 768px) {
    [data-lcf-registration-form] .lcf-form-grid,
    [data-lcf-renewal-form] .lcf-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    [data-lcf-registration-form] .lcf-form-grid .lcf-form-grid-full,
    [data-lcf-renewal-form] .lcf-form-grid .lcf-form-grid-full {
        grid-column: 1 / -1 !important;
    }
}

[data-lcf-registration-form] .lcf-form-hidden,
[data-lcf-renewal-form] .lcf-form-hidden {
    display: none !important;
}