/**
 * Contact Form 7 - Custom Styles for TeenSerie Theme
 *
 * Stili personalizzati per i moduli Contact Form 7
 * Basati sugli stili esistenti della fan community (fan-community.css)
 * Supporta tema light e dark mode
 *
 * IMPORTANTE: Questo file sovrascrive gli stili di default di Contact Form 7
 * per integrarli con il design del tema TeenSerie
 *
 * @package TeenSerie
 * @since 1.3.0
 */

/* ===== Variables ===== */
:root {
    --accent-pink: #EC4899;
    --secondary-purple: #8B5CF6;
    --primary-lime: #A3E635;
}

/* ===== Form Container ===== */
.wpcf7 {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

/* ===== Response Output Messages ===== */
.wpcf7 form .wpcf7-response-output {
	margin: 1rem 0;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
    font-size: 0.875rem;
    text-align: center;
    border: none;
}

.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
	display: none;
}

/* Success message (green) */
.wpcf7 form.sent .wpcf7-response-output {
	background-color: #d1fae5;
	color: #065f46;
}

.dark .wpcf7 form.sent .wpcf7-response-output,
body.dark-mode .wpcf7 form.sent .wpcf7-response-output {
    background-color: #064e3b;
    color: #6ee7b7;
}

/* Error message (red) */
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	background-color: #fee2e2;
	color: #991b1b;
}

.dark .wpcf7 form.failed .wpcf7-response-output,
.dark .wpcf7 form.aborted .wpcf7-response-output,
body.dark-mode .wpcf7 form.failed .wpcf7-response-output,
body.dark-mode .wpcf7 form.aborted .wpcf7-response-output {
    background-color: #7f1d1d;
    color: #fca5a5;
}

/* Spam message (orange) */
.wpcf7 form.spam .wpcf7-response-output {
	background-color: #fed7aa;
	color: #9a3412;
}

.dark .wpcf7 form.spam .wpcf7-response-output,
body.dark-mode .wpcf7 form.spam .wpcf7-response-output {
    background-color: #7c2d12;
    color: #fdba74;
}

/* Invalid/unaccepted message (yellow) */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	background-color: #fef3c7;
	color: #92400e;
}

.dark .wpcf7 form.invalid .wpcf7-response-output,
.dark .wpcf7 form.unaccepted .wpcf7-response-output,
.dark .wpcf7 form.payment-required .wpcf7-response-output,
body.dark-mode .wpcf7 form.invalid .wpcf7-response-output,
body.dark-mode .wpcf7 form.unaccepted .wpcf7-response-output,
body.dark-mode .wpcf7 form.payment-required .wpcf7-response-output {
    background-color: #78350f;
    color: #fcd34d;
}

/* ===== Form Control Wrapper ===== */
.wpcf7-form-control-wrap {
	position: relative;
    display: block;
}

/* ===== Validation Error Tips ===== */
.wpcf7-not-valid-tip {
	color: #dc3232;
	font-size: 0.75rem;
	font-weight: normal;
	display: block;
    margin-top: 0.25rem;
}

.dark .wpcf7-not-valid-tip,
body.dark-mode .wpcf7-not-valid-tip {
    color: #fca5a5;
}

.use-floating-validation-tip .wpcf7-not-valid-tip {
	position: relative;
	top: -2ex;
	left: 1em;
	z-index: 100;
	border: 1px solid #dc3232;
	background: #fff;
	padding: .2em .8em;
	width: 24em;
    border-radius: 0.375rem;
}

.dark .use-floating-validation-tip .wpcf7-not-valid-tip,
body.dark-mode .use-floating-validation-tip .wpcf7-not-valid-tip {
    background: #1e293b;
    border-color: #ef4444;
    color: #fca5a5;
}

/* ===== Form Fields (Input, Textarea, Select) ===== */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 input[type="search"],
.wpcf7 textarea,
.wpcf7 select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background-color: #f1f5f9;
    border-radius: 0.5rem;
    border: 2px solid transparent;
    font-size: 0.875rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: #0f172a;
    font-family: inherit;
    line-height: 1.5;
}

.dark .wpcf7 input[type="text"],
.dark .wpcf7 input[type="email"],
.dark .wpcf7 input[type="url"],
.dark .wpcf7 input[type="tel"],
.dark .wpcf7 input[type="number"],
.dark .wpcf7 input[type="date"],
.dark .wpcf7 input[type="search"],
.dark .wpcf7 textarea,
.dark .wpcf7 select,
body.dark-mode .wpcf7 input[type="text"],
body.dark-mode .wpcf7 input[type="email"],
body.dark-mode .wpcf7 input[type="url"],
body.dark-mode .wpcf7 input[type="tel"],
body.dark-mode .wpcf7 input[type="number"],
body.dark-mode .wpcf7 input[type="date"],
body.dark-mode .wpcf7 input[type="search"],
body.dark-mode .wpcf7 textarea,
body.dark-mode .wpcf7 select {
    background-color: #334155;
    color: #f1f5f9;
}

/* Focus state */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 input[type="date"]:focus,
.wpcf7 input[type="search"]:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
    outline: none;
    border-color: var(--accent-pink);
    background-color: #ffffff;
}

.dark .wpcf7 input[type="text"]:focus,
.dark .wpcf7 input[type="email"]:focus,
.dark .wpcf7 input[type="url"]:focus,
.dark .wpcf7 input[type="tel"]:focus,
.dark .wpcf7 input[type="number"]:focus,
.dark .wpcf7 input[type="date"]:focus,
.dark .wpcf7 input[type="search"]:focus,
.dark .wpcf7 textarea:focus,
.dark .wpcf7 select:focus,
body.dark-mode .wpcf7 input[type="text"]:focus,
body.dark-mode .wpcf7 input[type="email"]:focus,
body.dark-mode .wpcf7 input[type="url"]:focus,
body.dark-mode .wpcf7 input[type="tel"]:focus,
body.dark-mode .wpcf7 input[type="number"]:focus,
body.dark-mode .wpcf7 input[type="date"]:focus,
body.dark-mode .wpcf7 input[type="search"]:focus,
body.dark-mode .wpcf7 textarea:focus,
body.dark-mode .wpcf7 select:focus {
    background-color: #475569;
}

/* Invalid state */
.wpcf7 input.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid,
.wpcf7 select.wpcf7-not-valid {
    border-color: #dc3232;
}

.dark .wpcf7 input.wpcf7-not-valid,
.dark .wpcf7 textarea.wpcf7-not-valid,
.dark .wpcf7 select.wpcf7-not-valid,
body.dark-mode .wpcf7 input.wpcf7-not-valid,
body.dark-mode .wpcf7 textarea.wpcf7-not-valid,
body.dark-mode .wpcf7 select.wpcf7-not-valid {
    border-color: #ef4444;
}

/* Placeholder */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    color: #94a3b8;
}

/* Textarea specific */
.wpcf7 textarea {
    resize: vertical;
    min-height: 5rem;
}

/* Disabled state */
.wpcf7 input:disabled,
.wpcf7 textarea:disabled,
.wpcf7 select:disabled {
    background-color: #e2e8f0;
    color: #64748b;
    cursor: not-allowed;
}

.dark .wpcf7 input:disabled,
.dark .wpcf7 textarea:disabled,
.dark .wpcf7 select:disabled,
body.dark-mode .wpcf7 input:disabled,
body.dark-mode .wpcf7 textarea:disabled,
body.dark-mode .wpcf7 select:disabled {
    background-color: rgba(15, 23, 42, 0.5);
    color: #94a3b8;
}

/* ===== File Upload ===== */
.wpcf7 input[type="file"] {
	cursor: pointer;
    padding: 0.5rem;
    font-size: 0.875rem;
}

.wpcf7 input[type="file"]:disabled {
	cursor: default;
}

/* ===== Checkboxes & Radio Buttons ===== */
.wpcf7-list-item {
	display: inline-block;
	margin: 0 0 0.5rem 0;
}

.wpcf7-list-item input[type="checkbox"],
.wpcf7-list-item input[type="radio"] {
    width: auto;
    margin-right: 0.5rem;
    cursor: pointer;
}

.wpcf7-list-item-label {
    font-size: 0.875rem;
    color: #334155;
    cursor: pointer;
}

.dark .wpcf7-list-item-label,
body.dark-mode .wpcf7-list-item-label {
    color: #cbd5e1;
}

/* ===== Submit Button ===== */
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"],
.wpcf7 .wpcf7-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--accent-pink);
    color: #ffffff;
    font-weight: 700;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 15px -3px rgba(236, 72, 153, 0.2);
    font-size: 0.875rem;
    font-family: inherit;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover {
    background-color: #db2777;
    box-shadow: 0 10px 15px -3px rgba(236, 72, 153, 0.3);
}

.wpcf7 input[type="submit"]:disabled,
.wpcf7 button[type="submit"]:disabled,
.wpcf7 .wpcf7-submit:disabled {
	cursor: not-allowed;
    opacity: 0.6;
}

/* ===== Acceptance Checkbox ===== */
.wpcf7-acceptance .wpcf7-list-item {
    margin: 0.5rem 0;
}

/* ===== Quiz ===== */
.wpcf7-quiz-label {
    font-size: 0.875rem;
    color: #334155;
    margin-bottom: 0.25rem;
}

.dark .wpcf7-quiz-label,
body.dark-mode .wpcf7-quiz-label {
    color: #cbd5e1;
}

/* ===== CAPTCHA ===== */
.wpcf7-captcha {
    margin: 1rem 0;
}

.wpcf7-captchac {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* ===== reCAPTCHA ===== */
.wpcf7 .g-recaptcha {
    margin: 1rem 0;
}

/* ===== Form Layout & Spacing ===== */
.wpcf7 form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wpcf7 form p {
    margin: 0;
}

.wpcf7 label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.25rem;
}

.dark .wpcf7 label,
body.dark-mode .wpcf7 label {
    color: #cbd5e1;
}

/* ===== Optional Grid Layout (2 columns) ===== */
.wpcf7 .wpcf7-form-control-wrap.half-width {
    width: 100%;
}

@media (min-width: 640px) {
    .wpcf7 .form-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}