﻿
#NewsLetterSubcriptionContainer {
    background: #FAFAFA !important;
    padding: 48px 20px !important;
    position: relative !important;
}

    #NewsLetterSubcriptionContainer .container {
        max-width: 1100px !important;
        margin: 0 auto !important;
    }

    #NewsLetterSubcriptionContainer .ContactUsInnerContainer {
        background: #fff !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, .08) !important;
        border: 1px solid #E5E5E5 !important;
        margin: 0 !important;
    }

    #NewsLetterSubcriptionContainer .col-lg-11 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
    }

    #NewsLetterSubcriptionContainer .NewsLetterForm {
        padding: 32px 36px !important;
        background: #fff !important;
        width: 100% !important;
        position: relative !important;
    }

        #NewsLetterSubcriptionContainer .NewsLetterForm::before {
            content: "Newsletter Subscription" !important;
            display: block !important;
            width: fit-content !important;
            margin: 0 auto 24px auto !important;
            font-size: 26px !important;
            font-weight: 600 !important;
            color: #222 !important;
            line-height: 1.2 !important;
            /* Orange line centered under title */
            padding-bottom: 12px !important;
            background-image: linear-gradient( to right, #ff492f 0, #ff492f 48px, transparent 48px, transparent 100% ) !important;
            background-repeat: no-repeat !important;
            background-size: 48px 3px !important;
            background-position: center bottom !important;
            font-family:'BR Hendrix';
        }
    #NewsLetterSubcriptionContainer .container {
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    #NewsLetterSubcriptionContainer .ContactUsInnerContainer {
        width: 850px !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        background: #fff !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, .08) !important;
        border: 1px solid #E5E5E5 !important;
    }
        #NewsLetterSubcriptionContainer .ContactUsInnerContainer > .col-lg-11 {
            width: 100% !important;
            max-width: 100% !important;
            flex: 0 0 100% !important;
            padding: 0 !important;
        }
        #NewsLetterSubcriptionContainer .NewsLetterForm::after {
            display: none !important;
            content: none !important;
        }

    #NewsLetterSubcriptionContainer #NewsLetterForm {
        width: 100% !important;
    }

        /* Rows */
        #NewsLetterSubcriptionContainer #NewsLetterForm .row {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        /* Full width columns */
        #NewsLetterSubcriptionContainer #NewsLetterForm .col-12 {
            width: 100% !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

    #NewsLetterSubcriptionContainer .user-input-wrp {
        width: 100% !important;
        position: relative !important;
        margin-bottom: 18px !important;
    }

        /* Remove old <br> spacing */
        #NewsLetterSubcriptionContainer .user-input-wrp br {
            display: none !important;
        }

    #NewsLetterSubcriptionContainer .floating-label {
        position: static !important;
        display: block !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 0 7px 0 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        color: #444 !important;
        pointer-events: auto !important;
        transition: none !important;
    }

    /* Keep label above input on focus */
    #NewsLetterSubcriptionContainer .inputText:focus ~ .floating-label {
        position: static !important;
        top: auto !important;
        left: auto !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #444 !important;
    }

    /* Keep label above input when value exists */
    #NewsLetterSubcriptionContainer .inputText:not(:placeholder-shown) ~ .floating-label {
        position: static !important;
        top: auto !important;
        left: auto !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #444 !important;
        margin: 0 0 7px 0 !important;
    }

    #NewsLetterSubcriptionContainer .inputText {
        width: 100% !important;
        height: 44px !important;
        border-radius: 8px !important;
        border: 1.5px solid #E5E5E5 !important;
        background: #fff !important;
        padding: 0 14px !important;
        font-size: 14px !important;
        color: #222 !important;
        box-shadow: none !important;
        transition: border-color .2s ease, box-shadow .2s ease !important;
    }

        /* Input focus */
        #NewsLetterSubcriptionContainer .inputText:focus {
            border-color: #ff492f !important;
            background: #fff !important;
            box-shadow: 0 0 0 3px rgba(255, 73, 47, .12) !important;
            outline: none !important;
        }

    #NewsLetterSubcriptionContainer .text-danger {
        font-size: 12px !important;
        color: #d0342c !important;
        margin-top: 2px !important;
        display: block !important;
    }

    #NewsLetterSubcriptionContainer .user-input-wrp[style*="display:none"],
    #NewsLetterSubcriptionContainer .user-input-wrp[style*="display: none"] {
        display: none !important;
    }

    #NewsLetterSubcriptionContainer .recaptcha-wrapper {
        margin: 14px 0 8px 0 !important;
        display: block !important;
    }

        #NewsLetterSubcriptionContainer .recaptcha-wrapper .g-recaptcha {
            margin: 0 !important;
        }

        #NewsLetterSubcriptionContainer .recaptcha-wrapper span {
            color: #d0342c !important;
            font-size: 13px !important;
            display: inline-block !important;
            margin-top: 8px !important;
        }

    #NewsLetterSubcriptionContainer #NewsLetterForm > .col-12.d-flex {
        padding: 0 !important;
        margin-top: 12px !important;
        gap: 12px !important;
        align-items: center !important;
    }

    #NewsLetterSubcriptionContainer .animated-submit-btn {
        background: #ff492f !important;
        color: #fff !important;
        border: none !important;
        height: 42px !important;
        min-width: 110px !important;
        padding: 0 28px !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        cursor: pointer !important;
        transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
        box-shadow: 0 4px 12px rgba(255, 73, 47, .25) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        overflow: hidden !important;
    }

        /* Submit hover */
        #NewsLetterSubcriptionContainer .animated-submit-btn:hover {
            background: #ff492f !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 10px 20px rgba(255, 73, 47, .30) !important;
        }

    #NewsLetterSubcriptionContainer #NewsLetterForm input[type="reset"] {
        background: #fff !important;
        color: #222 !important;
        border: 1px solid #E5E5E5 !important;
        height: 42px !important;
        min-width: 110px !important;
        padding: 0 28px !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        cursor: pointer !important;
        transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
    }

        /* Cancel hover */
        #NewsLetterSubcriptionContainer #NewsLetterForm input[type="reset"]:hover {
            border-color: #ff492f !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 8px 16px rgba(0, 0, 0, .08) !important;
        }

    #NewsLetterSubcriptionContainer .loading-spinner {
        width: 18px !important;
        height: 18px !important;
        border: 2px solid rgba(255, 255, 255, .35) !important;
        border-top-color: #fff !important;
        border-radius: 50% !important;
        animation: newsletterSpinner .7s linear infinite !important;
    }

@keyframes newsletterSpinner {
    to {
        transform: rotate(360deg);
    }
}

#NewsLetterSubcriptionContainer .btn-icon {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2.5 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

    #NewsLetterSubcriptionContainer .btn-icon.show {
        display: block !important;
    }

@media (max-width: 991px) {

    #NewsLetterSubcriptionContainer {
        padding: 40px 20px !important;
    }

        #NewsLetterSubcriptionContainer .NewsLetterForm {
            padding: 28px 22px !important;
        }

            #NewsLetterSubcriptionContainer .NewsLetterForm::before {
                font-size: 22px !important;
            }
}

@media (max-width: 576px) {

    #NewsLetterSubcriptionContainer {
        padding: 24px 12px !important;
    }

        #NewsLetterSubcriptionContainer .ContactUsInnerContainer {
            border-radius: 12px !important;
        }

        #NewsLetterSubcriptionContainer .NewsLetterForm {
            padding: 22px 16px !important;
        }

            #NewsLetterSubcriptionContainer .NewsLetterForm::before {
                font-size: 20px !important;
            }

        #NewsLetterSubcriptionContainer .inputText {
            height: 42px !important;
        }

        #NewsLetterSubcriptionContainer #NewsLetterForm > .col-12.d-flex {
            flex-direction: column !important;
            align-items: stretch !important;
        }

        #NewsLetterSubcriptionContainer .animated-submit-btn,
        #NewsLetterSubcriptionContainer #NewsLetterForm input[type="reset"] {
            width: 100% !important;
        }
}
