/**
 * Newsletter Component Styles
 */

.newsletter-section {
    background: var(--Secondary-White-red, #FFF8F8);
    padding: 20px 0;
}

/* Mobile First Base Styles */
/* Previously .newsletter-container specificity increase */
.newsletter-section .newsletter-container.dh-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    /* Reset padding only on desktop, let mobile/tablet inherit dh-container defaults */
    /* Implicitly uses dh-container width/padding defaults unless overridden */
}

/* Left Content Base (Mobile) */
.newsletter__content {
    display: flex;
    flex-direction: row;
    /* Side-by-side on mobile per Figma */
    align-items: center;
    gap: 16px;
    flex: 1;
    width: 100%;
}

.newsletter__image {
    flex-shrink: 0;
}

.newsletter__image img {
    width: 86px;
    /* Slightly larger on mobile to match visual weight? or keep 60? Let's try 80 based on visual */
    height: auto;
    object-fit: contain;
}

.newsletter__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.newsletter__overline {
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1.44px;
    text-transform: uppercase;
    color: var(--Primary-Red-100, #DF002F);
    margin: 0;
}

.newsletter__title {
    font-family: 'Lato', sans-serif;
    font-size: 22px;
    /* Mobile size */
    font-weight: 700;
    line-height: normal;
    color: var(--Primary-Red-100, #DF002F);
    margin: 0;
}

/* Right Form Base (Mobile) */
.newsletter__form {
    flex: 1;
    width: 100%;
    max-width: 100%;
}

.newsletter__form-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.newsletter__form-fields {
    display: flex;
    flex-direction: column;
    /* Stacked inputs on mobile */
    gap: 8px;
    align-items: stretch;
}

.newsletter__input-group {
    position: relative;
    display: block;
    width: 100%;
}

.newsletter__input {
    flex: 1;
    height: 40px;
    padding: 0 16px;
    padding-right: 140px;
    /* Space for button */
    border: 1px solid var(--Secondary-Light-Red, #FCE7E8);
    border-radius: 50px;
    background: var(--Primary-White, #FFFFFF);
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.24px;
    color: var(--Primary-Black-100, #111B29);
    width: 100%;
    /* Ensure full width in block context */
}

.newsletter__input::placeholder {
    color: #999;
}

.newsletter__input:focus {
    outline: none;
    border-color: var(--Primary-Red-100, #DF002F);
}

.newsletter__button {
    /* User specific styles */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-width: 110px;
    padding: 10px 12px;

    /* Overlay positioning */
    height: auto;
    width: auto;
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;

    background: var(--Primary-Red-100, #DF002F);
    border: none;
    border-radius: 50px;
    color: var(--Primary-White, #FFFFFF);
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.newsletter__button:hover {
    background: #C00018;
}

/* Consent Base */
.newsletter__consent {
    display: flex;
    align-items: flex-start;
}

.newsletter__consent-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    margin: 0;
}

.newsletter__checkbox {
    margin-top: 0px;
    flex-shrink: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid var(--Primary-Grey-80, #97A3B7);
    border-radius: 2px;
    /* User requested 2px for checked, applying base for consistency or transition */
    background-color: var(--Primary-White, #FFFFFF);
    position: relative;
    display: grid;
    place-content: center;
    transition: all 0.2s ease;
}

.newsletter__checkbox::before {
    content: "";
    width: 10px;
    height: 8px;
    /* Adjusted to SVG height approx */
    transform: scale(0);
    transition: 0.1s transform ease-in-out;
    /* New User provided SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M0.850098 4.2521L3.1181 6.5201L8.7881 0.850098' stroke='%23111B29' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.newsletter__checkbox:checked {
    border: 1px solid var(--Primary-Grey-80, #97A3B7);
    background: var(--Primary-Grey-20, #F7F8FA);
    border-radius: 2px;
}

.newsletter__checkbox:checked::before {
    transform: scale(1);
}

/* Error/Invalid State */
.newsletter__checkbox.error {
    border-color: var(--Semantic-Error-100, #D83232);
}

.newsletter__input.error {
    border: 1px solid var(--Semantic-Error-100, #D83232);
}

/* Error Messages */
.newsletter__error-message {
    color: var(--Semantic-Error-100, #D83232);
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.24px;
    margin-top: 4px;
}

/* Hover State */
.newsletter__checkbox:hover {

    border: 1px solid var(--primary-grey-80, #97A3B7);

}

.newsletter__consent-text {
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.24px;
    color: var(--Primary-Black-100, #111B29);
}

/* Tablet / Intermediate Styles (min-width: 576px) */
@media (min-width: 576px) {

    /* Keep stacked but improve spacing/alignment if needed */
    .newsletter__content {
        flex-direction: row;
        /* Horizontal text/image on tablet? Prev code had column gap 16 at max-width 576. So above 576 it was row. */
        align-items: center;
        gap: 12px;
    }

    /* Form styles now handled in base (overlay layout everywhere) */

    .newsletter__title {
        font-size: 24px;
        /* Move to desktop size earlier? Or stay 22? Prev: 22 at max 992. So 24 is only > 992. */
    }
}

/* Desktop Styles (min-width: 992px) */
@media (min-width: 992px) {
    .newsletter-section {
        padding: 30px 0;
    }

    /* "Until 992px we should leave normal padding" -> At 992px we apply the special layout */
    .newsletter-section .newsletter-container.dh-container {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 40px;
        /* Reduced gap for intermediate desktop */
        padding: 0;
        /* Remove default padding here as requested? User said "padding: 0" in desktop edit */
        max-width: 1017px;
    }

    .newsletter__content {
        max-width: 527px;
    }

    .newsletter__image img {
        width: 133px;
        /* As per recent user edit */
        height: auto;
    }

    .newsletter__form {
        max-width: 320px;
    }

    .newsletter__title {
        font-size: 24px;
        line-height: normal;
    }
}

/* Large Desktop (min-width: 1200px) - Full Gap */
@media (min-width: 1200px) {
    .newsletter-section .newsletter-container.dh-container {
        gap: 80px;
        /* Target gap from user edit */
    }
}

/* ========================================
   Contact Form 7 Overrides
   ======================================== */

/* Reset CF7 default styles */
.newsletter__form-wrapper .wpcf7 {
    margin: 0;
    padding: 0;
}

.newsletter__form-wrapper .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
}

/* CF7 Form Paragraph Wrapper */
.newsletter__form-wrapper .wpcf7-form p {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    position: relative !important;
}

/* Hide all BR tags that CF7 adds */
.newsletter__form-wrapper .wpcf7-form br {
    display: none;
}

/* Email Input Wrapper - Create a flex container for input and button */
.newsletter__form-wrapper .wpcf7-form .wpcf7-form-control-wrap[data-name="your-email"] {
    display: block;
    position: relative;
    width: 100%;
    margin-bottom: 12px;
}

/* Email Input Field */
.newsletter__form-wrapper .wpcf7-form input[type="email"] {
    height: 40px;
    padding: 0 16px;
    padding-right: 140px;
    border: 1px solid var(--Secondary-Light-Red, #FCE7E8);
    border-radius: 50px;
    background: var(--Primary-White, #FFFFFF);
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.24px;
    color: var(--Primary-Black-100, #111B29);
    width: 100%;
    box-sizing: border-box;
    display: block;
}

.newsletter__form-wrapper .wpcf7-form input[type="email"]::placeholder {
    color: #999;
}

.newsletter__form-wrapper .wpcf7-form input[type="email"]:focus {
    outline: none;
    border-color: var(--Primary-Red-100, #DF002F);
}

/* Submit Button - Position relative to email wrapper */
.newsletter__form-wrapper .wpcf7-form input[type="submit"] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-width: 110px;
    padding: 10px 12px;
    height: 38px;
    width: auto;
    position: absolute !important;
    top: 1px !important;
    right: 1px !important;
    background: var(--Primary-Red-100, #DF002F);
    border: none;
    border-radius: 50px;
    color: var(--Primary-White, #FFFFFF);
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
    margin: 0;
    z-index: 10;
}

.newsletter__form-wrapper .wpcf7-form input[type="submit"]:hover {
    background: #C00018;
}

/* Acceptance (Checkbox) Wrapper */
.newsletter__form-wrapper .wpcf7-form .wpcf7-form-control-wrap[data-name="newsletter-consent"] {
    display: block;
}

.newsletter__form-wrapper .wpcf7-form .wpcf7-acceptance {
    display: flex;
    align-items: flex-start;
    margin: 0;
}

.newsletter__form-wrapper .wpcf7-form .wpcf7-list-item {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
}

.newsletter__form-wrapper .wpcf7-form .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    margin: 0;
}

/* Checkbox Styling */
.newsletter__form-wrapper .wpcf7-form input[type="checkbox"] {
    margin: 0;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid var(--Primary-Grey-80, #97A3B7);
    border-radius: 2px;
    background-color: var(--Primary-White, #FFFFFF);
    position: relative;
    display: grid;
    place-content: center;
    transition: all 0.2s ease;
}

.newsletter__form-wrapper .wpcf7-form input[type="checkbox"]::before {
    content: "";
    width: 10px;
    height: 8px;
    transform: scale(0);
    transition: 0.1s transform ease-in-out;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M0.850098 4.2521L3.1181 6.5201L8.7881 0.850098' stroke='%23111B29' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.newsletter__form-wrapper .wpcf7-form input[type="checkbox"]:checked {
    border: 1px solid var(--Primary-Grey-80, #97A3B7);
    background: var(--Primary-Grey-20, #F7F8FA);
    border-radius: 2px;
}

.newsletter__form-wrapper .wpcf7-form input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.newsletter__form-wrapper .wpcf7-form input[type="checkbox"]:hover {
    border: 1px solid var(--primary-grey-80, #97A3B7);
}

/* Checkbox Label Text */
.newsletter__form-wrapper .wpcf7-form .wpcf7-list-item-label {
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.24px;
    color: var(--Primary-Black-100, #111B29);
}

/* Error States */
.newsletter__form-wrapper .wpcf7-form input.wpcf7-not-valid {
    border: 1px solid var(--Semantic-Error-100, #D83232);
}

.newsletter__form-wrapper .wpcf7-form input[type="checkbox"].wpcf7-not-valid {
    border-color: var(--Semantic-Error-100, #D83232);
}

/* CF7 Validation Error Messages */
.newsletter__form-wrapper .wpcf7-form .wpcf7-not-valid-tip {
    color: var(--Semantic-Error-100, #D83232);
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.24px;
    margin-top: 4px;
    display: block;
}

/* CF7 Response Output (General Error/Success Messages) */
.newsletter__form-wrapper .wpcf7-response-output {
    margin: 12px 0 0 0;
    padding: 12px;
    border-radius: 8px;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

/* Hide general validation errors - we show individual field errors instead */
.newsletter__form-wrapper .wpcf7-validation-errors,
.newsletter__form-wrapper .wpcf7-response-output[aria-hidden="true"] {
    display: none !important;
}

/* Only show success messages */
.newsletter__form-wrapper .wpcf7-mail-sent-ok {
    display: block !important;
    background: #e6f7e6;
    border: 1px solid #28a745;
    color: #28a745;
}

.newsletter__form-wrapper .wpcf7-spam-blocked,
.newsletter__form-wrapper .wpcf7-mail-sent-ng {
    background: #ffe6e6;
    border: 1px solid var(--Semantic-Error-100, #D83232);
    color: var(--Semantic-Error-100, #D83232);
}

/* Hide CF7 Spinner */
.newsletter__form-wrapper .wpcf7-spinner {
    display: none;
}

/* Screen reader response - hide visually */
.newsletter__form-wrapper .screen-reader-response {
    position: absolute;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

/* Hidden fields container */
.newsletter__form-wrapper .hidden-fields-container {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}