/*
Theme Name: Woodmart Child
Description: Woodmart Child Theme
Author: XTemos
Template: woodmart
Version: 1.0.0
Text Domain: woodmart
*/

/* =========================================================
   THE STYLISH GEM
   WHATSAPP OTP LOGIN
   Premium responsive authentication UI
   ========================================================= */


/* =========================================================
   1. MAIN AUTHENTICATION WRAPPER
   ========================================================= */

.tsg-whatsapp-login {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 65px 25px 80px;
    box-sizing: border-box;
    color: #24150f;
}

.tsg-whatsapp-login,
.tsg-whatsapp-login * {
    box-sizing: border-box;
}


/* =========================================================
   2. WOOCOMMERCE NOTICES
   Keep notices visible above the authentication card.
   ========================================================= */

.tsg-whatsapp-login .woocommerce-notices-wrapper,
.tsg-whatsapp-login > .woocommerce-message,
.tsg-whatsapp-login > .woocommerce-error,
.tsg-whatsapp-login > .woocommerce-info {
    width: 100%;
    margin-bottom: 25px;
}


/* =========================================================
   3. MAIN AUTHENTICATION CARD
   Desktop:
   Brand panel on left
   Authentication panel on right
   ========================================================= */

.tsg-whatsapp-login-inner {
    width: 100%;

    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

    align-items: stretch;
    gap: 0;

    overflow: hidden;

    border: 1px solid #eadfd7;
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 18px 50px rgba(45, 25, 15, 0.08),
        0 3px 12px rgba(45, 25, 15, 0.04);
}


/* =========================================================
   4. BRAND PANEL
   Desktop only
   ========================================================= */

.tsg-whatsapp-brand-panel {
    width: 100%;
    min-height: 520px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 70px 60px;

    background:
        linear-gradient(
            135deg,
            #fbf7f3 0%,
            #f8f0ea 100%
        );

    border-right: 1px solid #eee3dc;
}


/* =========================================================
   5. BRAND TYPOGRAPHY
   ========================================================= */

.tsg-brand-eyebrow,
.tsg-auth-eyebrow {
    margin: 0 0 10px;

    color: #7b6c63;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;

    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.tsg-brand-title {
    margin: 0;

    color: #1d120d;

    font-size: clamp(36px, 4vw, 50px);
    font-weight: 400;
    line-height: 1.06;

    letter-spacing: -0.7px;
}

.tsg-brand-title em {
    font-style: italic;
    font-weight: 400;
}

.tsg-brand-copy {
    max-width: 500px;

    margin: 28px 0 30px;

    color: #786b63;

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   6. BRAND FEATURES
   ========================================================= */

.tsg-brand-features {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tsg-brand-feature {
    display: flex;
    align-items: flex-start;

    gap: 12px;
    margin: 0;
}

.tsg-brand-feature-icon {
    flex: 0 0 auto;

    display: block;

    margin-top: 1px;

    color: #7a4a2c;

    font-size: 15px;
    line-height: 1.5;
}

.tsg-brand-feature > div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.tsg-brand-feature strong {
    color: #2d211b;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.tsg-brand-feature span:not(.tsg-brand-feature-icon) {
    color: #786b63;

    font-size: 14px;
    line-height: 1.5;
}


/* =========================================================
   7. AUTHENTICATION PANEL
   ========================================================= */

.tsg-whatsapp-auth-panel {
    width: 100%;
    max-width: 570px;

    justify-self: center;
    align-self: center;

    padding: 70px 65px;
}

.tsg-otp-state {
    width: 100%;
}

.tsg-otp-state[hidden] {
    display: none !important;
}


/* =========================================================
   8. AUTH HEADINGS
   ========================================================= */

.tsg-auth-eyebrow {
    margin-bottom: 12px;
    color: #7b6c63;
}

.tsg-auth-title {
    margin: 0 0 20px;

    color: #1d120d;

    font-size: 38px;
    font-weight: 400;
    line-height: 1.15;

    letter-spacing: -0.4px;
}

.tsg-auth-description {
    margin: 0 0 30px;

    color: #786b63;

    font-size: 15px;
    line-height: 1.65;
}


/* =========================================================
   9. PHONE FORM
   ========================================================= */

.tsg-phone-form {
    width: 100%;
    margin: 0;
}

.tsg-phone-field {
    width: 100%;
    margin: 0 0 20px;
}

.tsg-field-label {
    display: block;

    margin: 0 0 9px;

    color: #2d211b;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}


/* =========================================================
   10. PHONE INPUT
   ========================================================= */

.tsg-phone-input-wrapper {
    display: flex;
    align-items: stretch;

    width: 100%;
    height: 56px;

    border: 1px solid #ddd3cc;
    border-radius: 6px;

    background: #ffffff;

    overflow: hidden;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.tsg-phone-input-wrapper:focus-within {
    border-color: #7a4a2c;

    box-shadow:
        0 0 0 3px rgba(122, 74, 44, 0.08);
}

.tsg-country-code {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    padding: 0 14px;

    border-right: 1px solid #e4ddd7;

    color: #51443d;
    background: #ffffff;

    font-size: 14px;
    line-height: 1;

    white-space: nowrap;
}

.tsg-phone-input {
    flex: 1 1 auto;

    width: 100%;
    min-width: 0;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 16px !important;

    border: 0 !important;
    border-radius: 0 !important;

    outline: none !important;

    background: #ffffff !important;

    color: #24150f !important;

    box-shadow: none !important;

    font-size: 15px !important;
}

.tsg-phone-input::placeholder {
    color: #a59a93;
    opacity: 1;
}


/* =========================================================
   11. BUTTONS
   ========================================================= */

.tsg-send-otp-button,
.tsg-verify-otp-button {
    position: relative;

    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 54px;

    margin: 0;
    padding: 14px 20px !important;

    border: 1px solid #4b2412 !important;
    border-radius: 6px !important;

    background: #5c2d17 !important;
    color: #ffffff !important;

    font-family: inherit;

    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.3;

    letter-spacing: 0.2px;

    text-align: center;

    cursor: pointer;

    box-shadow: none !important;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        opacity 0.2s ease,
        transform 0.15s ease;
}

.tsg-send-otp-button:hover,
.tsg-verify-otp-button:not(:disabled):hover {
    background: #47210f !important;
    border-color: #47210f !important;
    color: #ffffff !important;

    transform: translateY(-1px);
}

.tsg-send-otp-button:active,
.tsg-verify-otp-button:not(:disabled):active {
    transform: translateY(0);
}

.tsg-verify-otp-button:disabled,
.tsg-send-otp-button:disabled {
    opacity: 0.55;

    cursor: not-allowed;

    transform: none;
}

.tsg-button-loader {
    display: none;
}

.tsg-send-otp-button.tsg-loading .tsg-button-text,
.tsg-verify-otp-button.tsg-loading .tsg-button-text {
    display: none;
}

.tsg-send-otp-button.tsg-loading .tsg-button-loader,
.tsg-verify-otp-button.tsg-loading .tsg-button-loader {
    display: inline;
}


/* =========================================================
   12. WHATSAPP NOTE
   ========================================================= */

.tsg-whatsapp-note {
    margin: 10px 0 0;

    color: #786b63;

    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   13. AJAX / VALIDATION MESSAGE
   ========================================================= */

.tsg-otp-message {
    width: 100%;

    margin: 0 0 14px;

    color: #786b63;

    font-size: 13px;
    line-height: 1.55;
}

.tsg-otp-message:empty {
    display: none;
}


/* =========================================================
   14. OTP PHONE ROW
   ========================================================= */

.tsg-otp-phone-row {
    display: flex;
    align-items: center;

    gap: 10px;

    margin: -8px 0 26px;
}

.tsg-verified-phone {
    color: #2d211b;

    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
}

.tsg-edit-phone {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-height: 30px;

    margin: 0 !important;
    padding: 4px 9px !important;

    border: 1px solid #7a4a2c !important;
    border-radius: 4px !important;

    background: transparent !important;

    color: #5c2d17 !important;

    font-family: inherit;

    font-size: 12px !important;
    font-weight: 500;
    line-height: 1.2;

    cursor: pointer;

    box-shadow: none !important;
}

.tsg-edit-phone:hover {
    background: #faf5f1 !important;
    color: #47210f !important;
}


/* =========================================================
   15. OTP INPUTS
   ========================================================= */

.tsg-otp-inputs {
    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 10px;

    width: 100%;

    margin: 0 0 22px;
}

.tsg-otp-input {
    width: 100% !important;
    height: 58px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid #ded7d1 !important;
    border-radius: 6px !important;

    outline: none !important;

    background: #ffffff !important;
    color: #24150f !important;

    font-family: inherit;

    font-size: 22px !important;
    font-weight: 500;

    line-height: 1 !important;

    text-align: center;

    box-shadow: none !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.tsg-otp-input:hover {
    border-color: #c9bbb1 !important;
}

.tsg-otp-input:focus {
    border-color: #7a4a2c !important;

    box-shadow:
        0 0 0 3px rgba(122, 74, 44, 0.08) !important;
}


/* =========================================================
   16. RESEND AREA
   ========================================================= */

.tsg-resend-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 24px;

    margin: 0 0 22px;

    text-align: center;
}

.tsg-resend-countdown {
    color: #786b63;

    font-size: 13px;
    line-height: 1.5;
}

.tsg-resend-countdown strong {
    color: #5c2d17;
    font-weight: 500;
}

.tsg-resend-button {
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    color: #5c2d17 !important;

    font-family: inherit;

    font-size: 13px !important;
    font-weight: 500;
    line-height: 1.5;

    text-decoration: underline;

    cursor: pointer;

    box-shadow: none !important;
}

.tsg-resend-button:hover {
    color: #8a5434 !important;
    background: transparent !important;
}


/* =========================================================
   17. VERIFY / CHANGE NUMBER
   ========================================================= */

.tsg-verify-otp-button {
    margin-top: 0;
}

.tsg-change-number {
    display: block !important;

    width: auto !important;

    margin: 18px auto 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    color: #5c2d17 !important;

    font-family: inherit;

    font-size: 13px !important;
    font-weight: 400;
    line-height: 1.5;

    text-decoration: none !important;

    cursor: pointer;

    box-shadow: none !important;
}

.tsg-change-number:hover {
    color: #8a5434 !important;
    background: transparent !important;
}


/* =========================================================
   18. SUCCESS / ERROR STATES
   ========================================================= */

.tsg-otp-message.tsg-success,
.tsg-otp-message.success {
    color: #426a4b;
}

.tsg-otp-message.tsg-error,
.tsg-otp-message.error {
    color: #a33b32;
}


/* =========================================================
   19. REMOVE WOODMART / WOOCOMMERCE DEFAULT FORM STYLING
   Only inside authentication UI.
   ========================================================= */

.tsg-whatsapp-login form,
.tsg-whatsapp-login .form-row {
    margin-bottom: 0;
    padding: 0;
}

.tsg-whatsapp-login input,
.tsg-whatsapp-login button {
    font-family: inherit;
}

.tsg-whatsapp-login button::before,
.tsg-whatsapp-login button::after {
    display: none !important;
}


/* =========================================================
   20. LOGGED-IN MY ACCOUNT BANNER
   Existing child-theme behaviour.
   ========================================================= */

body:not(.logged-in) .elementor-element-0e916b3 {
    display: none !important;
}


/* =========================================================
   21. TABLET
   <= 991px

   Hide left brand panel.
   Authentication becomes centered.
   ========================================================= */

@media (max-width: 991px) {

    .tsg-whatsapp-login {
        max-width: 850px;

        padding: 55px 25px 70px;
    }

    /*
     * Hide left Jewellery brand panel.
     *
     * Applies to:
     * - Phone login screen
     * - OTP verification screen
     */
    .tsg-whatsapp-brand-panel {
        display: none !important;
    }

    /*
     * Authentication becomes one column.
     */
    .tsg-whatsapp-login-inner {
        display: grid;

        grid-template-columns: minmax(0, 1fr);

        align-items: center;

        gap: 0;
    }

    /*
     * Authentication card remains centered.
     */
    .tsg-whatsapp-auth-panel {
        width: 100%;
        max-width: 570px;

        justify-self: center;
        align-self: center;

        padding: 55px 55px;
    }

    .tsg-auth-title {
        font-size: 32px;
    }
}


/* =========================================================
   22. MOBILE
   <= 767px

   Single authentication card.
   Brand panel hidden.
   ========================================================= */

@media (max-width: 767px) {

    .tsg-whatsapp-login {
        width: 100%;
        max-width: 100%;

        margin: 0;

        padding: 35px 20px 55px;
    }

    /*
     * Single-column mobile card.
     */
    .tsg-whatsapp-login-inner {
        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        border-radius: 14px;

        box-shadow:
            0 12px 30px rgba(45, 25, 15, 0.07),
            0 2px 8px rgba(45, 25, 15, 0.04);
    }

    /*
     * Brand panel MUST remain hidden on mobile.
     */
    .tsg-whatsapp-brand-panel {
        display: none !important;
    }

    /*
     * Authentication panel fills mobile card.
     */
    .tsg-whatsapp-auth-panel {
        width: 100%;
        max-width: none;

        padding: 40px 24px 42px;

        justify-self: auto;
        align-self: stretch;
    }

    .tsg-auth-eyebrow {
        margin-bottom: 8px;

        font-size: 11px;
    }

    .tsg-auth-title {
        margin-bottom: 18px;

        font-size: 30px;
    }

    .tsg-auth-description {
        margin-bottom: 24px;

        font-size: 14px;
    }


    /* =====================================================
       PHONE
       ===================================================== */

    .tsg-phone-field {
        margin-bottom: 17px;
    }

    .tsg-phone-input-wrapper {
        height: 53px;
    }

    .tsg-country-code {
        padding: 0 12px;

        font-size: 13px;
    }

    .tsg-phone-input {
        padding: 0 13px !important;

        font-size: 14px !important;
    }

    .tsg-send-otp-button,
    .tsg-verify-otp-button {
        min-height: 52px;
    }

    .tsg-whatsapp-note {
        font-size: 12px;
    }


    /* =====================================================
       OTP
       ===================================================== */

    .tsg-otp-phone-row {
        margin-top: -4px;

        margin-bottom: 22px;
    }

    .tsg-verified-phone {
        font-size: 14px;
    }

    .tsg-otp-inputs {
        gap: 8px;

        margin-bottom: 20px;
    }

    .tsg-otp-input {
        height: 54px !important;

        font-size: 20px !important;
    }

    .tsg-resend-wrapper {
        margin-bottom: 20px;
    }

    .tsg-change-number {
        margin-top: 16px !important;
    }
}


/* =========================================================
   23. SMALL MOBILE
   <= 380px
   ========================================================= */

@media (max-width: 380px) {

    .tsg-whatsapp-login {
        padding-left: 16px;
        padding-right: 16px;
    }

    .tsg-whatsapp-login-inner {
        border-radius: 12px;
    }

    .tsg-whatsapp-brand-panel {
        display: none !important;
    }

    .tsg-whatsapp-auth-panel {
        padding: 34px 20px 36px;
    }

    .tsg-brand-title {
        font-size: 31px;
    }

    .tsg-auth-title {
        font-size: 28px;
    }

    .tsg-auth-description {
        font-size: 13px;
    }

    .tsg-phone-input-wrapper {
        height: 51px;
    }

    .tsg-country-code {
        padding: 0 10px;

        font-size: 12px;
    }

    .tsg-phone-input {
        padding: 0 11px !important;

        font-size: 13px !important;
    }

    .tsg-otp-inputs {
        gap: 6px;
    }

    .tsg-otp-input {
        height: 50px !important;

        font-size: 19px !important;
    }

    .tsg-verified-phone {
        font-size: 13px;
    }

    .tsg-edit-phone {
        min-height: 28px;

        padding: 3px 8px !important;
    }
}


/* =========================================================
   24. VERY SMALL PHONES
   <= 330px
   ========================================================= */

@media (max-width: 330px) {

    .tsg-whatsapp-login {
        padding-left: 13px;
        padding-right: 13px;
    }

    .tsg-whatsapp-login-inner {
        border-radius: 10px;
    }

    .tsg-whatsapp-brand-panel {
        display: none !important;
    }

    .tsg-whatsapp-auth-panel {
        padding: 30px 17px 32px;
    }

    .tsg-brand-title {
        font-size: 29px;
    }

    .tsg-auth-title {
        font-size: 26px;
    }

    .tsg-otp-inputs {
        gap: 5px;
    }

    .tsg-otp-input {
        height: 48px !important;

        font-size: 18px !important;
    }
}



/* =========================================================
   THE STYLISH GEM — CHECKOUT LOGIN POPUP
   CLEANED / DEDUPED FINAL VERSION
   ========================================================= */

/* =========================================================
   OVERLAY
   ========================================================= */
#tsg-checkout-login-overlay.tsg-checkout-login-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100vw !important;
    height: 100vh !important;
    padding: 12px !important;
    background: rgba(20, 18, 16, 0.72) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    overflow: hidden !important;
}

#tsg-checkout-login-overlay.tsg-checkout-login-overlay.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

body.tsg-checkout-popup-open {
    overflow: hidden !important;
}

/* =========================================================
   POPUP
   ========================================================= */
#tsg-checkout-login-overlay .tsg-checkout-login-popup {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 520px !important;
    max-width: calc(100vw - 24px) !important;
    height: auto !important;
    max-height: calc(100vh - 24px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fffdfb !important;
    color: #191716 !important;
    border-radius: 26px !important;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    isolation: isolate !important;
}

#tsg-checkout-login-overlay .tsg-checkout-login-popup::-webkit-scrollbar {
    width: 6px !important;
}
#tsg-checkout-login-overlay .tsg-checkout-login-popup::-webkit-scrollbar-thumb {
    background: #e4d3b6 !important;
    border-radius: 3px !important;
}

/* RESET — applies box-sizing to everything inside, once */
#tsg-checkout-login-overlay .tsg-checkout-login-popup *,
#tsg-checkout-login-overlay .tsg-checkout-login-popup *::before,
#tsg-checkout-login-overlay .tsg-checkout-login-popup *::after {
    box-sizing: border-box !important;
}

/* =========================================================
   CLOSE
   ========================================================= */
#tsg-checkout-login-overlay .tsg-checkout-popup-close {
    position: absolute !important;
    top: 12px !important;
    right: 14px !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #181615 !important;
    font-family: Arial, sans-serif !important;
    font-size: 29px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

/* =========================================================
   FLORAL DECORATION
   ========================================================= */
#tsg-checkout-login-overlay .tsg-popup-floral {
    position: absolute !important;
    top: -25px !important;
    left: -25px !important;
    width: 120px !important;
    height: 120px !important;
    pointer-events: none !important;
    z-index: 1 !important;
    opacity: 0.45 !important;
}

/* =========================================================
   MAIN CONTENT
   ========================================================= */
#tsg-checkout-login-overlay .tsg-popup-header {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 34px 40px 12px !important;
    text-align: center !important;
}

/* =========================================================
   LOGO
   ========================================================= */
#tsg-checkout-login-overlay .tsg-popup-logo {
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

#tsg-checkout-login-overlay .tsg-popup-logo-the {
    margin: 0 !important;
    padding: 0 !important;
    color: #181615 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

#tsg-checkout-login-overlay .tsg-popup-logo-name {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    color: #181615 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    line-height: 1.02 !important;
}

#tsg-checkout-login-overlay .tsg-gold-sparkle {
    color: #c99a32 !important;
    font-size: 14px !important;
}

#tsg-checkout-login-overlay .tsg-popup-logo-ornament {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 7px auto 18px !important;
}

#tsg-checkout-login-overlay .tsg-popup-logo-ornament span {
    display: block !important;
    width: 38px !important;
    height: 1px !important;
    background: #c99a32 !important;
}

#tsg-checkout-login-overlay .tsg-popup-logo-ornament b {
    color: #c99a32 !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

/* =========================================================
   CONTENT / STATE SWITCHING
   ========================================================= */
#tsg-checkout-login-overlay .tsg-popup-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

#tsg-checkout-login-overlay .tsg-popup-content[hidden] {
    display: none !important;
}

/* =========================================================
   HEADING
   ========================================================= */
#tsg-checkout-login-overlay .tsg-popup-title {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 13px !important;
    padding: 0 !important;
    color: #181615 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 34px !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.8px !important;
    text-align: center !important;
}

#tsg-checkout-login-overlay .tsg-title-sparkle {
    display: inline-block !important;
    margin-left: 3px !important;
    color: #c99a32 !important;
    font-size: 14px !important;
    vertical-align: middle !important;
}

/* =========================================================
   DESCRIPTION
   ========================================================= */
#tsg-checkout-login-overlay .tsg-popup-description {
    width: 100% !important;
    max-width: 390px !important;
    margin: 0 auto 16px !important;
    padding: 0 !important;
    color: #514b47 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

/* =========================================================
   FEATURES ROW
   ========================================================= */
#tsg-checkout-login-overlay .tsg-popup-features {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 13px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#tsg-checkout-login-overlay .tsg-popup-feature {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

#tsg-checkout-login-overlay .tsg-popup-feature-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    flex: 0 0 52px !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #faf2e6 !important;
    color: #c99a32 !important;
    overflow: hidden !important;
}

#tsg-checkout-login-overlay .tsg-popup-feature-icon svg {
    display: block !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    flex: 0 0 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #c99a32 !important;
    fill: none !important;
    stroke: currentColor !important;
    transform: none !important;
    overflow: visible !important;
}

#tsg-checkout-login-overlay .tsg-popup-feature strong {
    display: block !important;
    width: 100% !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    color: #181615 !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

#tsg-checkout-login-overlay .tsg-popup-feature span {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #68615d !important;
    font-size: 8px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
}

/* =========================================================
   DIVIDER
   ========================================================= */
#tsg-checkout-login-overlay .tsg-popup-divider {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    gap: 10px !important;
    margin: 14px 0 !important;
    padding: 0 !important;
}

#tsg-checkout-login-overlay .tsg-popup-divider span {
    display: block !important;
    flex: 1 1 auto !important;
    height: 1px !important;
    background: #e4d3b6 !important;
}

#tsg-checkout-login-overlay .tsg-popup-divider b {
    flex: 0 0 auto !important;
    color: #c99a32 !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

/* =========================================================
   PHONE FIELD LABEL
   ========================================================= */
#tsg-checkout-login-overlay .tsg-popup-field-label {
    display: block !important;
    width: 100% !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
    color: #1e1b19 !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: left !important;
}

/* =========================================================
   PHONE INPUT ROW
   ========================================================= */
#tsg-checkout-login-overlay .tsg-popup-phone-wrapper {
    position: relative !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #d9d4cf !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    overflow: visible !important;
}

#tsg-checkout-login-overlay .tsg-popup-country {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 68px !important;
    width: 68px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #25211f !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    user-select: none !important;
}

#tsg-checkout-login-overlay .tsg-popup-phone-divider {
    display: block !important;
    align-self: center !important;
    width: 1px !important;
    height: 27px !important;
    flex: 0 0 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ddd8d2 !important;
    pointer-events: none !important;
}

#tsg-checkout-login-overlay .tsg-popup-phone-wrapper .tsg-phone-input {
    position: relative !important;
    z-index: 10 !important;
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    background: transparent !important;
    color: #25211f !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: normal !important;
    text-align: left !important;
    pointer-events: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    cursor: text !important;
    box-shadow: none !important;
    opacity: 1 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

#tsg-checkout-login-overlay .tsg-popup-phone-wrapper .tsg-phone-input:focus {
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

#tsg-checkout-login-overlay .tsg-popup-phone-wrapper .tsg-phone-input::placeholder {
    color: #a39d98 !important;
    opacity: 1 !important;
}

#tsg-checkout-login-overlay .tsg-popup-whatsapp-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 43px !important;
    width: 43px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #c99a32 !important;
    pointer-events: none !important;
}

#tsg-checkout-login-overlay .tsg-popup-whatsapp-icon svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    flex: 0 0 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #c99a32 !important;
    fill: none !important;
    stroke: currentColor !important;
    transform: none !important;
}

/* =========================================================
   MESSAGE / ERROR
   ========================================================= */
#tsg-checkout-login-overlay .tsg-otp-message {
    width: 100% !important;
    min-height: 12px !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    color: #a33 !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
    text-align: center !important;
}

/* =========================================================
   SEND OTP / VERIFY OTP BUTTON
   ========================================================= */
#tsg-checkout-login-overlay .tsg-popup-send-button {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    margin: 9px 0 0 !important;
    padding: 0 48px 0 16px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #191817 !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

#tsg-checkout-login-overlay .tsg-popup-send-button:hover,
#tsg-checkout-login-overlay .tsg-popup-send-button:focus {
    background: #191817 !important;
    color: #ffffff !important;
}

#tsg-checkout-login-overlay .tsg-popup-send-button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

#tsg-checkout-login-overlay .tsg-popup-button-arrow {
    position: absolute !important;
    right: 17px !important;
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
}

#tsg-checkout-login-overlay .tsg-button-loader {
    display: none !important;
}

#tsg-checkout-login-overlay .tsg-popup-send-button.is-loading .tsg-button-text,
#tsg-checkout-login-overlay .tsg-popup-send-button.is-loading .tsg-popup-button-arrow {
    display: none !important;
}

#tsg-checkout-login-overlay .tsg-popup-send-button.is-loading .tsg-button-loader {
    display: inline-block !important;
}

/* =========================================================
   SECURITY NOTE (below Send OTP)
   This is the block that was rendering huge — the fix is a
   single, high-specificity rule with no duplicates below.
   ========================================================= */
#tsg-checkout-login-overlay .tsg-popup-security-note {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    gap: 6px !important;
    color: #59534f !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    text-align: center !important;
}

#tsg-checkout-login-overlay.tsg-checkout-login-overlay .tsg-popup-security-note svg.tsg-security-icon {
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    max-width: 15px !important;
    max-height: 15px !important;
    flex: 0 0 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    color: #c99a32 !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
    overflow: visible !important;
}

#tsg-checkout-login-overlay .tsg-security-text {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #59534f !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    white-space: nowrap !important;
    text-align: center !important;
}

/* =========================================================
   BOTTOM TRUST ROW
   Same specificity-boost approach applied to all three icons.
   ========================================================= */
#tsg-checkout-login-overlay .tsg-popup-trust-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    border: 0 !important;
    border-top: 1px solid #f1eae0 !important;
    background: #ffffff !important;
}

#tsg-checkout-login-overlay .tsg-popup-trust-row > div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #3f3a37 !important;
    font-size: 8.5px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    text-align: left !important;
}

#tsg-checkout-login-overlay.tsg-checkout-login-overlay .tsg-popup-trust-row svg.tsg-trust-icon {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    flex: 0 0 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    color: #c99a32 !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    overflow: visible !important;
}

#tsg-checkout-login-overlay .tsg-trust-text {
    display: inline-block !important;
    width: auto !important;
    max-width: 90px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #3f3a37 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: left !important;
}

/* =========================================================
   OTP VERIFICATION STATE
   ========================================================= */
#tsg-checkout-login-overlay .tsg-otp-phone-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    margin: 0 0 10px !important;
}

#tsg-checkout-login-overlay .tsg-verified-phone {
    color: #24211f !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

#tsg-checkout-login-overlay .tsg-edit-phone {
    margin: 0 !important;
    padding: 3px 7px !important;
    border: 1px solid #c99a32 !important;
    border-radius: 5px !important;
    background: #ffffff !important;
    color: #8d671e !important;
    font-size: 9px !important;
    cursor: pointer !important;
}

#tsg-checkout-login-overlay .tsg-otp-inputs {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 13px 0 11px !important;
}

#tsg-checkout-login-overlay .tsg-otp-input {
    display: block !important;
    width: 42px !important;
    height: 44px !important;
    min-width: 42px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #ddd8d2 !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    color: #181615 !important;
    font-size: 18px !important;
    text-align: center !important;
    outline: none !important;
    box-shadow: none !important;
}

#tsg-checkout-login-overlay .tsg-otp-input:focus {
    border-color: #c99a32 !important;
    box-shadow: 0 0 0 1px #c99a32 !important;
}

#tsg-checkout-login-overlay .tsg-resend-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 17px !important;
    margin: 0 !important;
}

#tsg-checkout-login-overlay .tsg-resend-countdown {
    color: #756e69 !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
}

#tsg-checkout-login-overlay .tsg-resend-button {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #8d671e !important;
    font-size: 9px !important;
    cursor: pointer !important;
}

#tsg-checkout-login-overlay .tsg-change-number {
    display: block !important;
    margin: 9px auto 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #8d671e !important;
    font-size: 9px !important;
    cursor: pointer !important;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 767px) {
    #tsg-checkout-login-overlay.tsg-checkout-login-overlay {
        padding: 6px !important;
    }

    #tsg-checkout-login-overlay .tsg-checkout-login-popup {
        width: calc(100vw - 12px) !important;
        height: auto !important;
        max-height: calc(100vh - 12px) !important;
        border-radius: 22px !important;
    }

    #tsg-checkout-login-overlay .tsg-popup-header {
        padding: 31px 18px 10px !important;
    }

    #tsg-checkout-login-overlay .tsg-popup-logo-the { font-size: 17px !important; }
    #tsg-checkout-login-overlay .tsg-popup-logo-name { font-size: 24px !important; }
    #tsg-checkout-login-overlay .tsg-popup-logo-ornament { margin: 6px auto 16px !important; }

    #tsg-checkout-login-overlay .tsg-popup-title {
        font-size: 27px !important;
        line-height: 1.08 !important;
        margin-bottom: 11px !important;
    }

    #tsg-checkout-login-overlay .tsg-popup-description {
        max-width: 315px !important;
        margin-bottom: 17px !important;
        font-size: 10.5px !important;
        line-height: 1.5 !important;
    }

    #tsg-checkout-login-overlay .tsg-popup-features { gap: 7px !important; }

    #tsg-checkout-login-overlay .tsg-popup-feature-icon {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        max-width: 46px !important;
        max-height: 46px !important;
        flex: 0 0 46px !important;
        margin-bottom: 7px !important;
    }

    #tsg-checkout-login-overlay .tsg-popup-feature-icon svg {
        width: 23px !important;
        height: 23px !important;
        min-width: 23px !important;
        min-height: 23px !important;
        max-width: 23px !important;
        max-height: 23px !important;
        flex: 0 0 23px !important;
    }

    #tsg-checkout-login-overlay .tsg-popup-feature strong { font-size: 9.5px !important; margin-bottom: 3px !important; }
    #tsg-checkout-login-overlay .tsg-popup-feature span { font-size: 7.8px !important; }

    #tsg-checkout-login-overlay .tsg-popup-divider { margin: 12px 0 !important; }
    #tsg-checkout-login-overlay .tsg-popup-field-label { font-size: 10px !important; margin-bottom: 6px !important; }

    #tsg-checkout-login-overlay .tsg-popup-phone-wrapper {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }

    #tsg-checkout-login-overlay .tsg-popup-country {
        flex: 0 0 64px !important;
        width: 64px !important;
        font-size: 12px !important;
    }

    #tsg-checkout-login-overlay .tsg-popup-phone-wrapper .tsg-phone-input {
        font-size: 12px !important;
        padding: 0 9px !important;
    }

    #tsg-checkout-login-overlay .tsg-popup-whatsapp-icon {
        flex: 0 0 40px !important;
        width: 40px !important;
    }

    #tsg-checkout-login-overlay .tsg-popup-whatsapp-icon svg {
        width: 21px !important;
        height: 21px !important;
        min-width: 21px !important;
        min-height: 21px !important;
        max-width: 21px !important;
        max-height: 21px !important;
        flex: 0 0 21px !important;
    }

    #tsg-checkout-login-overlay .tsg-popup-send-button {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        margin-top: 8px !important;
    }

    #tsg-checkout-login-overlay .tsg-popup-security-note {
        margin-top: 8px !important;
        gap: 5px !important;
        font-size: 8px !important;
    }

    #tsg-checkout-login-overlay.tsg-checkout-login-overlay .tsg-popup-security-note svg.tsg-security-icon {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        min-height: 14px !important;
        max-width: 14px !important;
        max-height: 14px !important;
        flex: 0 0 14px !important;
    }

    #tsg-checkout-login-overlay .tsg-security-text { font-size: 8px !important; white-space: normal !important; }

    #tsg-checkout-login-overlay .tsg-popup-trust-row { padding: 8px 8px !important; }
    #tsg-checkout-login-overlay .tsg-popup-trust-row > div { gap: 4px !important; font-size: 7.5px !important; }

    #tsg-checkout-login-overlay.tsg-checkout-login-overlay .tsg-popup-trust-row svg.tsg-trust-icon {
        width: 15px !important;
        height: 15px !important;
        min-width: 15px !important;
        min-height: 15px !important;
        max-width: 15px !important;
        max-height: 15px !important;
        flex: 0 0 15px !important;
    }

    #tsg-checkout-login-overlay .tsg-trust-text { max-width: 72px !important; font-size: 7.5px !important; }
}

/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */
@media (max-width: 380px) {
    #tsg-checkout-login-overlay .tsg-popup-header { padding: 27px 14px 8px !important; }
    #tsg-checkout-login-overlay .tsg-popup-logo-name { font-size: 22px !important; }
    #tsg-checkout-login-overlay .tsg-popup-title { font-size: 25px !important; }
    #tsg-checkout-login-overlay .tsg-popup-description { font-size: 10px !important; margin-bottom: 14px !important; }

    #tsg-checkout-login-overlay .tsg-popup-feature-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        flex: 0 0 44px !important;
    }

    #tsg-checkout-login-overlay .tsg-popup-feature-icon svg {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
        flex: 0 0 22px !important;
    }

    #tsg-checkout-login-overlay .tsg-popup-feature strong { font-size: 8px !important; }
    #tsg-checkout-login-overlay .tsg-popup-feature span { font-size: 7px !important; }
    #tsg-checkout-login-overlay .tsg-popup-divider { margin: 12px 0 !important; }

    #tsg-checkout-login-overlay.tsg-checkout-login-overlay .tsg-popup-security-note svg.tsg-security-icon {
        width: 13px !important;
        height: 13px !important;
        min-width: 13px !important;
        min-height: 13px !important;
        max-width: 13px !important;
        max-height: 13px !important;
        flex: 0 0 13px !important;
    }

    #tsg-checkout-login-overlay.tsg-checkout-login-overlay .tsg-popup-trust-row svg.tsg-trust-icon {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        min-height: 14px !important;
        max-width: 14px !important;
        max-height: 14px !important;
        flex: 0 0 14px !important;
    }

    #tsg-checkout-login-overlay .tsg-trust-text { max-width: 62px !important; font-size: 7px !important; }
}

/* =========================================================
   TSG WHATSAPP — MARKETING CONSENT CHECKBOX
   =========================================================
   Default:
   CHECKED

   Customer can manually untick before OTP verification.

   Visual goal:
   Compact, clean, left-aligned consent row inspired by
   the Palmona-style reference.
   ========================================================= */


/* =========================================================
   MY ACCOUNT — MARKETING CONSENT
   ========================================================= */

.tsg-whatsapp-login .tsg-marketing-consent {
    display: flex !important;

    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;

    margin: 10px 0 0 !important;
    padding: 0 !important;

    gap: 7px !important;

    color: #6f6863 !important;

    font-size: 11px !important;
    font-weight: 400 !important;

    line-height: 1.35 !important;

    text-align: left !important;

    cursor: pointer !important;

    user-select: none !important;
}


/* =========================================================
   HIDDEN REAL CHECKBOX
   ========================================================= */

.tsg-whatsapp-login .tsg-marketing-consent-checkbox {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: -1px !important;
    padding: 0 !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* =========================================================
   CUSTOM CHECKBOX
   ========================================================= */

.tsg-whatsapp-login .tsg-marketing-consent-box {
    position: relative !important;

    display: block !important;

    flex: 0 0 14px !important;

    width: 14px !important;
    height: 14px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid #bdb5af !important;
    border-radius: 3px !important;

    background: #ffffff !important;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease !important;
}


/* =========================================================
   CHECKMARK
   ========================================================= */

.tsg-whatsapp-login .tsg-marketing-consent-box::after {
    content: "" !important;

    position: absolute !important;

    top: 2px !important;
    left: 4px !important;

    width: 4px !important;
    height: 7px !important;

    border: solid #ffffff !important;

    border-width:
        0
        1.5px
        1.5px
        0 !important;

    opacity: 0 !important;

    transform:
        rotate(45deg)
        scale(0.8) !important;

    transition:
        opacity 0.15s ease,
        transform 0.15s ease !important;
}


/* =========================================================
   CHECKED STATE
   ========================================================= */

.tsg-whatsapp-login
.tsg-marketing-consent-checkbox:checked
+ .tsg-marketing-consent-box {

    border-color: #5c2d17 !important;

    background: #5c2d17 !important;
}


.tsg-whatsapp-login
.tsg-marketing-consent-checkbox:checked
+ .tsg-marketing-consent-box::after {

    opacity: 1 !important;

    transform:
        rotate(45deg)
        scale(1) !important;
}


/* =========================================================
   FOCUS
   ========================================================= */

.tsg-whatsapp-login
.tsg-marketing-consent-checkbox:focus-visible
+ .tsg-marketing-consent-box {

    box-shadow:
        0 0 0 3px
        rgba(92, 45, 23, 0.12) !important;
}


/* =========================================================
   TEXT
   ========================================================= */

.tsg-whatsapp-login .tsg-marketing-consent-text {
    display: block !important;

    flex: 1 1 auto !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #6f6863 !important;

    font-size: inherit !important;
    font-weight: 400 !important;

    line-height: inherit !important;

    text-align: left !important;
}


/* =========================================================
   HOVER
   ========================================================= */

.tsg-whatsapp-login
.tsg-marketing-consent:hover
.tsg-marketing-consent-text {

    color: #514943 !important;
}


.tsg-whatsapp-login
.tsg-marketing-consent:hover
.tsg-marketing-consent-box {

    border-color: #9f938a !important;
}


/* =========================================================
   CHECKOUT POPUP — MARKETING CONSENT
   ========================================================= */

#tsg-checkout-login-overlay
.tsg-marketing-consent {

    display: flex !important;

    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;

    margin: 7px 0 0 !important;
    padding: 0 2px !important;

    gap: 6px !important;

    color: #6f6863 !important;

    font-size: 9px !important;
    font-weight: 400 !important;

    line-height: 1.35 !important;

    text-align: left !important;

    cursor: pointer !important;

    user-select: none !important;
}


/* =========================================================
   CHECKOUT — REAL CHECKBOX
   ========================================================= */

#tsg-checkout-login-overlay
.tsg-marketing-consent-checkbox {

    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: -1px !important;
    padding: 0 !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* =========================================================
   CHECKOUT — CUSTOM CHECKBOX
   ========================================================= */

#tsg-checkout-login-overlay
.tsg-marketing-consent-box {

    position: relative !important;

    display: block !important;

    flex: 0 0 12px !important;

    width: 12px !important;
    height: 12px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid #bdb5af !important;

    border-radius: 3px !important;

    background: #ffffff !important;
}


/* =========================================================
   CHECKOUT — CHECKMARK
   ========================================================= */

#tsg-checkout-login-overlay
.tsg-marketing-consent-box::after {

    content: "" !important;

    position: absolute !important;

    top: 1px !important;
    left: 3.5px !important;

    width: 3px !important;
    height: 6px !important;

    border:
        solid #ffffff !important;

    border-width:
        0
        1px
        1px
        0 !important;

    opacity: 0 !important;

    transform: rotate(45deg) !important;
}


/* =========================================================
   CHECKOUT — CHECKED
   ========================================================= */

#tsg-checkout-login-overlay
.tsg-marketing-consent-checkbox:checked
+ .tsg-marketing-consent-box {

    border-color: #8d671e !important;

    background: #8d671e !important;
}


#tsg-checkout-login-overlay
.tsg-marketing-consent-checkbox:checked
+ .tsg-marketing-consent-box::after {

    opacity: 1 !important;
}


/* =========================================================
   CHECKOUT — FOCUS
   ========================================================= */

#tsg-checkout-login-overlay
.tsg-marketing-consent-checkbox:focus-visible
+ .tsg-marketing-consent-box {

    box-shadow:
        0 0 0 2px
        rgba(201, 154, 50, 0.16) !important;
}


/* =========================================================
   CHECKOUT — TEXT
   ========================================================= */

#tsg-checkout-login-overlay
.tsg-marketing-consent-text {

    display: block !important;

    flex: 1 1 auto !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #6f6863 !important;

    font-size: inherit !important;

    font-weight: 400 !important;

    line-height: inherit !important;

    text-align: left !important;

    white-space: nowrap !important;
}


/* =========================================================
   CHECKOUT — HOVER
   ========================================================= */

#tsg-checkout-login-overlay
.tsg-marketing-consent:hover
.tsg-marketing-consent-text {

    color: #514943 !important;
}


#tsg-checkout-login-overlay
.tsg-marketing-consent:hover
.tsg-marketing-consent-box {

    border-color: #9f938a !important;
}


/* =========================================================
   MOBILE — MY ACCOUNT
   ========================================================= */

@media (max-width: 767px) {

    .tsg-whatsapp-login
    .tsg-marketing-consent {

        align-items: center !important;

        margin-top: 9px !important;

        gap: 7px !important;

        font-size: 11px !important;

        line-height: 1.35 !important;
    }


    .tsg-whatsapp-login
    .tsg-marketing-consent-box {

        flex-basis: 14px !important;

        width: 14px !important;
        height: 14px !important;
    }


    /* =====================================================
       MOBILE — CHECKOUT
       ===================================================== */

    #tsg-checkout-login-overlay
    .tsg-marketing-consent {

        align-items: center !important;

        margin-top: 6px !important;

        padding: 0 1px !important;

        gap: 5px !important;

        font-size: 8.5px !important;

        line-height: 1.3 !important;
    }


    #tsg-checkout-login-overlay
    .tsg-marketing-consent-box {

        flex-basis: 11px !important;

        width: 11px !important;
        height: 11px !important;
    }


    #tsg-checkout-login-overlay
    .tsg-marketing-consent-box::after {

        top: 1px !important;

        left: 3px !important;

        width: 3px !important;
        height: 6px !important;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .tsg-whatsapp-login
    .tsg-marketing-consent {

        font-size: 10.5px !important;
    }


    #tsg-checkout-login-overlay
    .tsg-marketing-consent {

        font-size: 8px !important;
    }
}

/* =========================================================
   TSG PATCH — MY ACCOUNT MARKETING CONSENT ALIGNMENT
   =========================================================
   Keep the WhatsApp notification directly below the phone
   field with a small, controlled gap.
   Add breathing room before the Send OTP button.
   ========================================================= */

.tsg-whatsapp-login .tsg-phone-field {
    margin-bottom: 0 !important;
}

.tsg-whatsapp-login .tsg-marketing-consent {
    margin-top: 9px !important;
    margin-bottom: 12px !important;

    align-items: center !important;
}

@media (max-width: 767px) {

    .tsg-whatsapp-login .tsg-phone-field {
        margin-bottom: 0 !important;
    }

    .tsg-whatsapp-login .tsg-marketing-consent {
        margin-top: 8px !important;
        margin-bottom: 11px !important;

        align-items: center !important;
    }
}