/*
 * Khan Home Loan — Subscribe Popup v1.5
 * Isolated responsive UI to prevent WordPress/theme CSS collisions.
 */

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

#khlSubscribePopup,
#khlSubscribePopup *{
    box-sizing:border-box !important;
}

#khlSubscribePopup{
    --khl-black:#070707;
    --khl-ink:#171717;
    --khl-gold:#f4ad17;
    --khl-gold-dark:#d99306;
    --khl-gold-soft:#fff8e9;
    --khl-text:#1b1b1b;
    --khl-muted:#6f6f6f;
    --khl-border:#e8e8e8;
    --khl-input:#fbfbfb;

    position:fixed !important;
    inset:0 !important;
    z-index:2147483000 !important;
    width:100vw !important;
    height:100dvh !important;
    margin:0 !important;
    padding:20px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
    font-size:16px !important;
    line-height:1.5 !important;
    text-align:left !important;
    transition:opacity .22s ease,visibility .22s ease;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

#khlSubscribePopup.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

#khlSubscribePopup .khl-popup__backdrop{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    background:rgba(7,7,7,.72) !important;
    -webkit-backdrop-filter:blur(7px);
    backdrop-filter:blur(7px);
}

#khlSubscribePopup .khl-popup__dialog{
    position:relative !important;
    z-index:2 !important;
    display:block !important;
    width:100% !important;
    max-width:470px !important;
    min-width:0 !important;
    max-height:calc(100dvh - 32px) !important;
    margin:0 !important;
    padding:32px 30px 28px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    background:#fff !important;
    border:1px solid rgba(255,255,255,.92) !important;
    border-radius:20px !important;
    box-shadow:0 34px 90px rgba(0,0,0,.36),0 8px 26px rgba(0,0,0,.12) !important;
    color:var(--khl-text) !important;
    text-align:left !important;
    transform:translateY(16px) scale(.985);
    transition:transform .25s cubic-bezier(.2,.72,.25,1);
    scrollbar-width:thin;
    scrollbar-color:#c8c8c8 transparent;
    isolation:isolate;
    contain:layout paint;
}

#khlSubscribePopup.is-open .khl-popup__dialog{
    transform:none;
}

#khlSubscribePopup .khl-popup__dialog::-webkit-scrollbar{width:5px}
#khlSubscribePopup .khl-popup__dialog::-webkit-scrollbar-track{background:transparent}
#khlSubscribePopup .khl-popup__dialog::-webkit-scrollbar-thumb{background:#c8c8c8;border-radius:999px}

#khlSubscribePopup .khl-popup__dialog::before{
    content:"";
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:5px !important;
    margin:0 !important;
    background:linear-gradient(90deg,#d99306 0%,#f4ad17 58%,#ffc84b 100%) !important;
    border-radius:20px 20px 0 0 !important;
}

#khlSubscribePopup .khl-popup__close{
    position:absolute !important;
    top:16px !important;
    right:16px !important;
    z-index:5 !important;
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    border:1px solid #e6e6e6 !important;
    border-radius:50% !important;
    background:#fff !important;
    color:#777 !important;
    box-shadow:0 4px 14px rgba(0,0,0,.08) !important;
    font-family:Arial,sans-serif !important;
    font-size:23px !important;
    font-weight:400 !important;
    line-height:1 !important;
    text-align:center !important;
    cursor:pointer !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}

#khlSubscribePopup .khl-popup__close span{
    display:block !important;
    width:auto !important;
    height:auto !important;
    margin:-2px 0 0 !important;
    padding:0 !important;
    line-height:1 !important;
}

#khlSubscribePopup .khl-popup__close:hover{
    background:var(--khl-gold-soft) !important;
    color:var(--khl-black) !important;
    border-color:rgba(244,173,23,.5) !important;
    transform:rotate(4deg);
}

#khlSubscribePopup .khl-popup__head{
    position:relative !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 0 21px !important;
    padding:0 48px 0 0 !important;
    text-align:left !important;
}

#khlSubscribePopup .khl-popup__eyebrow{
    display:inline-flex !important;
    align-items:center !important;
    gap:7px !important;
    width:auto !important;
    margin:0 0 9px !important;
    padding:5px 9px !important;
    border:1px solid rgba(244,173,23,.28) !important;
    border-radius:999px !important;
    background:var(--khl-gold-soft) !important;
    color:#8e5b00 !important;
    font-family:"Manrope","Inter",sans-serif !important;
    font-size:9.5px !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:.095em !important;
    text-transform:uppercase !important;
}

#khlSubscribePopup .khl-popup__eyebrow::before{
    content:"";
    width:6px !important;
    height:6px !important;
    flex:0 0 6px !important;
    border-radius:50% !important;
    background:var(--khl-gold) !important;
    box-shadow:0 0 0 3px rgba(244,173,23,.14) !important;
}

#khlSubscribePopup .khl-popup__head h2{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    color:var(--khl-black) !important;
    background:none !important;
    border:0 !important;
    font-family:"Manrope","Inter",sans-serif !important;
    font-size:28px !important;
    line-height:1.14 !important;
    font-weight:800 !important;
    letter-spacing:-.045em !important;
    text-align:left !important;
    text-transform:none !important;
    overflow-wrap:anywhere !important;
}

#khlSubscribePopup .khl-popup__head p{
    display:block !important;
    width:100% !important;
    margin:8px 0 0 !important;
    padding:0 !important;
    color:var(--khl-muted) !important;
    background:none !important;
    border:0 !important;
    font-family:"Inter",sans-serif !important;
    font-size:12.8px !important;
    line-height:1.58 !important;
    font-weight:400 !important;
    letter-spacing:0 !important;
    text-align:left !important;
}

#khlSubscribePopup .khl-popup__head p strong{
    color:#252525 !important;
    font-family:"Manrope","Inter",sans-serif !important;
    font-size:13.4px !important;
    font-weight:700 !important;
}

#khlSubscribePopup .khl-popup__form{
    position:relative !important;
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    background:none !important;
    border:0 !important;
    text-align:left !important;
}

#khlSubscribePopup .khl-popup__grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:12px !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
}

#khlSubscribePopup .khl-field{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 0 12px !important;
    padding:0 !important;
    background:none !important;
    border:0 !important;
    color:inherit !important;
    text-align:left !important;
}

#khlSubscribePopup .khl-field > span{
    display:block !important;
    width:100% !important;
    margin:0 0 6px !important;
    padding:0 !important;
    color:#343434 !important;
    background:none !important;
    border:0 !important;
    font-family:"Manrope","Inter",sans-serif !important;
    font-size:10.8px !important;
    line-height:1.3 !important;
    font-weight:700 !important;
    letter-spacing:.01em !important;
    text-align:left !important;
    text-transform:none !important;
}

#khlSubscribePopup .khl-field input{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:47px !important;
    min-height:47px !important;
    margin:0 !important;
    padding:0 14px !important;
    border:1px solid var(--khl-border) !important;
    border-radius:11px !important;
    background:var(--khl-input) !important;
    color:var(--khl-text) !important;
    box-shadow:none !important;
    outline:none !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    font-family:"Inter",sans-serif !important;
    font-size:13.2px !important;
    line-height:47px !important;
    font-weight:500 !important;
    letter-spacing:0 !important;
    text-align:left !important;
    text-indent:0 !important;
    transform:none !important;
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease !important;
}

#khlSubscribePopup .khl-field input::placeholder{
    color:#a1a1a1 !important;
    opacity:1 !important;
    font-weight:400 !important;
}

#khlSubscribePopup .khl-field input:hover{
    background:#fff !important;
    border-color:#d5d5d5 !important;
}

#khlSubscribePopup .khl-field input:focus{
    background:#fff !important;
    border-color:var(--khl-gold) !important;
    box-shadow:0 0 0 3px rgba(244,173,23,.14) !important;
}

#khlSubscribePopup .khl-consent{
    display:flex !important;
    align-items:flex-start !important;
    gap:9px !important;
    width:100% !important;
    min-width:0 !important;
    margin:1px 0 16px !important;
    padding:0 !important;
    background:none !important;
    border:0 !important;
    color:#737373 !important;
    font-family:"Inter",sans-serif !important;
    font-size:10.3px !important;
    line-height:1.5 !important;
    font-weight:400 !important;
    text-align:left !important;
    cursor:pointer !important;
}

#khlSubscribePopup .khl-consent input{
    display:block !important;
    flex:0 0 15px !important;
    width:15px !important;
    min-width:15px !important;
    max-width:15px !important;
    height:15px !important;
    min-height:15px !important;
    margin:1px 0 0 !important;
    padding:0 !important;
    border-radius:3px !important;
    accent-color:var(--khl-gold-dark) !important;
    cursor:pointer !important;
}

#khlSubscribePopup .khl-consent span{
    display:block !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    color:inherit !important;
    font:inherit !important;
    line-height:inherit !important;
    text-align:left !important;
}

#khlSubscribePopup .khl-popup__submit{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:49px !important;
    margin:0 !important;
    padding:0 18px !important;
    border:1px solid var(--khl-black) !important;
    border-radius:11px !important;
    background:var(--khl-black) !important;
    color:#fff !important;
    box-shadow:0 10px 26px rgba(0,0,0,.18) !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    font-family:"Manrope","Inter",sans-serif !important;
    font-size:12.8px !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:.005em !important;
    text-align:center !important;
    text-transform:none !important;
    cursor:pointer !important;
    transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease !important;
}

#khlSubscribePopup .khl-popup__submit span{
    display:inline !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    color:inherit !important;
    font:inherit !important;
}

#khlSubscribePopup .khl-popup__submit svg{
    display:block !important;
    flex:0 0 17px !important;
    width:17px !important;
    height:17px !important;
    margin:0 !important;
    color:var(--khl-gold) !important;
    transition:transform .18s ease,color .18s ease !important;
}

#khlSubscribePopup .khl-popup__submit:hover{
    transform:translateY(-1px) !important;
    background:var(--khl-gold) !important;
    color:var(--khl-black) !important;
    border-color:var(--khl-gold) !important;
    box-shadow:0 13px 30px rgba(244,173,23,.28) !important;
}

#khlSubscribePopup .khl-popup__submit:hover svg{
    color:var(--khl-black) !important;
    transform:translateX(2px) !important;
}

#khlSubscribePopup .khl-popup__submit:disabled{
    opacity:.68 !important;
    cursor:wait !important;
    transform:none !important;
}

#khlSubscribePopup .khl-popup__message{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:none !important;
    color:#666 !important;
    font-family:"Inter",sans-serif !important;
    font-size:11.2px !important;
    line-height:1.45 !important;
    font-weight:600 !important;
    text-align:center !important;
}

#khlSubscribePopup .khl-popup__message:not(:empty){
    margin-top:11px !important;
}

#khlSubscribePopup .khl-popup__message.is-success{color:#18763d !important}
#khlSubscribePopup .khl-popup__message.is-error{color:#b42318 !important}

#khlSubscribePopup .khl-popup__close:focus-visible,
#khlSubscribePopup .khl-popup__submit:focus-visible,
#khlSubscribePopup .khl-field input:focus-visible,
#khlSubscribePopup .khl-consent input:focus-visible{
    outline:3px solid rgba(244,173,23,.25) !important;
    outline-offset:2px !important;
}

@media (max-width:560px){
    #khlSubscribePopup{
        padding:14px !important;
        align-items:center !important;
    }

    #khlSubscribePopup .khl-popup__dialog{
        max-width:440px !important;
        max-height:calc(100dvh - 28px) !important;
        padding:28px 20px 22px !important;
        border-radius:18px !important;
    }

    #khlSubscribePopup .khl-popup__dialog::before{
        border-radius:18px 18px 0 0 !important;
    }

    #khlSubscribePopup .khl-popup__close{
        top:13px !important;
        right:13px !important;
        width:34px !important;
        height:34px !important;
        min-width:34px !important;
        min-height:34px !important;
    }

    #khlSubscribePopup .khl-popup__head{
        padding-right:42px !important;
        margin-bottom:18px !important;
    }

    #khlSubscribePopup .khl-popup__head h2{
        font-size:24px !important;
    }

    #khlSubscribePopup .khl-popup__head p{
        font-size:12.2px !important;
        line-height:1.52 !important;
    }

    #khlSubscribePopup .khl-popup__grid{
        grid-template-columns:minmax(0,1fr) !important;
        gap:0 !important;
    }

    #khlSubscribePopup .khl-field{
        margin-bottom:10px !important;
    }

    #khlSubscribePopup .khl-field input{
        height:45px !important;
        min-height:45px !important;
        line-height:45px !important;
    }

    #khlSubscribePopup .khl-popup__submit{
        min-height:47px !important;
    }
}

@media (max-height:650px){
    #khlSubscribePopup{
        align-items:flex-start !important;
        overflow-y:auto !important;
        padding-top:12px !important;
        padding-bottom:12px !important;
    }

    #khlSubscribePopup .khl-popup__dialog{
        max-height:none !important;
    }
}

@media (prefers-reduced-motion:reduce){
    #khlSubscribePopup,
    #khlSubscribePopup .khl-popup__dialog,
    #khlSubscribePopup .khl-popup__close,
    #khlSubscribePopup .khl-popup__submit,
    #khlSubscribePopup .khl-popup__submit svg{
        transition:none !important;
    }
}