/* ============================================
   Quform Newsletter Form - Custom Styling
   Matches: Farasun Theme Newsletter Design
   Based on: form-newsletter, subscribe-form, subscribe-email, tf-btn-newsletter
   ============================================ */

/* ===== Main Form Container ===== */
.quform-newsletter-wrapper {
    width: 100%;
    position: relative;
}

.quform-newsletter-wrapper form {
    width: 100%;
    position: relative;
}

/* ===== Input Field Styling ===== */
.quform-newsletter-wrapper input[type="email"],
.quform-newsletter-wrapper input[type="text"],
.quform-newsletter-wrapper input.qq-input-text {
    width: 100%;
    height: 55px;
    padding: 0 17px;
    border: 0;
    margin: 0;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    font-family: "IRANYekanX", sans-serif;
    background-color: transparent;
    color: var(--color-text);
    overflow: hidden;
}

/* ===== Placeholder Styling ===== */
.quform-newsletter-wrapper input[type="email"]::placeholder,
.quform-newsletter-wrapper input[type="text"]::placeholder,
.quform-newsletter-wrapper input.qq-input-text::placeholder {
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: var(--color-text);
}

/* ===== Focus State ===== */
.quform-newsletter-wrapper input[type="email"]:focus,
.quform-newsletter-wrapper input[type="text"]:focus,
.quform-newsletter-wrapper input.qq-input-text:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

/* ===== WebKit Autofill Override ===== */
.quform-newsletter-wrapper input[type="email"]:-webkit-autofill,
.quform-newsletter-wrapper input[type="text"]:-webkit-autofill,
.quform-newsletter-wrapper input.qq-input-text:-webkit-autofill {
    background-color: transparent !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    color: var(--color-text) !important;
    -webkit-text-fill-color: var(--color-text) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ===== Button Styling (Matches tf-btn-newsletter) ===== */
.quform-newsletter-wrapper button[type="submit"],
.quform-newsletter-wrapper input[type="submit"],
.quform-newsletter-wrapper button.qq-submit,
.quform-newsletter-wrapper input.qq-submit {
    width: 45px;
    height: 45px;
    position: absolute;
    top: 5px;
    right: 7px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--secondary);
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* ===== Button Icon Styling ===== */
.quform-newsletter-wrapper button[type="submit"] i,
.quform-newsletter-wrapper input[type="submit"] i,
.quform-newsletter-wrapper button.qq-submit i,
.quform-newsletter-wrapper input.qq-submit i {
    color: var(--white);
    font-size: 11px;
    transform: rotate(-45deg);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* ===== Button Hover State ===== */
.quform-newsletter-wrapper button[type="submit"]:hover,
.quform-newsletter-wrapper input[type="submit"]:hover,
.quform-newsletter-wrapper button.qq-submit:hover,
.quform-newsletter-wrapper input.qq-submit:hover {
    background-color: var(--primary);
}

.quform-newsletter-wrapper button[type="submit"]:hover i,
.quform-newsletter-wrapper input[type="submit"]:hover i,
.quform-newsletter-wrapper button.qq-submit:hover i,
.quform-newsletter-wrapper input.qq-submit:hover i {
    transform: rotate(0);
}

/* ===== Quform Wrapper Container ===== */
.quform-newsletter-wrapper .qq-form,
.quform-newsletter-wrapper form.quform-form {
    width: 100%;
    position: relative;
}

/* ===== Quform Element Styling ===== */
.quform-newsletter-wrapper .qq-element-wrapper {
    margin-bottom: 0;
}

.quform-newsletter-wrapper .qq-input-wrapper {
    width: 100%;
    position: relative;
}

/* ===== Error Message Styling ===== */
.quform-newsletter-wrapper .quform-error,
.quform-newsletter-wrapper .qq-error,
.quform-newsletter-wrapper .qq-errors {
    color: var(--error);
    font-size: 14px;
    font-weight: 400;
    font-family: "IRANYekanX", sans-serif;
    margin-top: 8px;
}

/* ===== Success Message Styling ===== */
.quform-newsletter-wrapper .quform-success,
.quform-newsletter-wrapper .qq-success {
    color: var(--primary);
    font-size: 14px;
    font-weight: 400;
    font-family: "IRANYekanX", sans-serif;
    margin-top: 8px;
}

/* ===== Label Styling ===== */
.quform-newsletter-wrapper label,
.quform-newsletter-wrapper .qq-label {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 400;
    font-family: "IRANYekanX", sans-serif;
    display: block;
    margin-bottom: 8px;
}

/* ===== Textarea Styling (if needed) ===== */
.quform-newsletter-wrapper textarea,
.quform-newsletter-wrapper .qq-textarea {
    width: 100%;
    padding: 8px 15px;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    font-family: "IRANYekanX", sans-serif;
    border: 1px solid var(--line-4);
    background-color: transparent;
    color: var(--color-text);
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    overflow: hidden;
}

.quform-newsletter-wrapper textarea::placeholder,
.quform-newsletter-wrapper .qq-textarea::placeholder {
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: var(--color-text);
}

/* ===== Responsive - Mobile ===== */
@media (max-width: 768px) {
    .quform-newsletter-wrapper input[type="email"],
    .quform-newsletter-wrapper input[type="text"],
    .quform-newsletter-wrapper input.qq-input-text {
        height: 48px;
        padding: 0 15px;
        font-size: 14px;
    }
    
    .quform-newsletter-wrapper button[type="submit"],
    .quform-newsletter-wrapper input[type="submit"],
    .quform-newsletter-wrapper button.qq-submit,
    .quform-newsletter-wrapper input.qq-submit {
        width: 40px;
        height: 40px;
        top: 4px;
        right: 5px;
    }
    
    .quform-newsletter-wrapper button[type="submit"] i,
    .quform-newsletter-wrapper input[type="submit"] i,
    .quform-newsletter-wrapper button.qq-submit i,
    .quform-newsletter-wrapper input.qq-submit i {
        font-size: 10px;
    }
}

/* ===== RTL Support ===== */
.rtl .quform-newsletter-wrapper button[type="submit"],
.rtl .quform-newsletter-wrapper input[type="submit"],
.rtl .quform-newsletter-wrapper button.qq-submit,
.rtl .quform-newsletter-wrapper input.qq-submit,
[dir="rtl"] .quform-newsletter-wrapper button[type="submit"],
[dir="rtl"] .quform-newsletter-wrapper input[type="submit"],
[dir="rtl"] .quform-newsletter-wrapper button.qq-submit,
[dir="rtl"] .quform-newsletter-wrapper input.qq-submit {
    right: 7px;
    left: auto;
}

/* ===== Theme Color Variables ===== */
:root {
    --primary: #f45b1e;
    --secondary: #232E63;
    --white: #ffffff;
    --error: #c72929;
    --color-text: #666666;
    --line-4: #d7d7d7;
}