/* =========================================================
   EXCLUSIVE PAY - FINAL FULL REGISTRATION CSS
   ========================================================= */

:root {
    --ep-navy: #061B3F;
    --ep-blue: #0B356B;
    --ep-orange: #FF7A00;
    --ep-orange-dark: #F45100;

    --ep-bg: #F7FAFF;
    --ep-text: #061B3F;
    --ep-muted: #64748B;

    --ep-border: rgba(6, 27, 63, 0.14);
    --ep-shadow: 0 18px 45px rgba(6, 27, 63, 0.14);
}

/* =========================================================
   RESET
   ========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
    overflow-x:hidden;
}

/* =========================================================
   BODY
   ========================================================= */

body.container-width{
    position:relative;

    width:100%;

    min-height:100dvh !important;

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

    overflow-x:hidden !important;
    overflow-y:auto !important;

    color:var(--ep-text);

    background:
        radial-gradient(circle at 10% 10%, rgba(255,122,0,.12), transparent 28%),
        radial-gradient(circle at 92% 18%, rgba(11,53,107,.10), transparent 32%),
        linear-gradient(180deg,#ffffff 0%, var(--ep-bg) 100%) !important;
}

/* =========================================================
   FLOATING GLOW
   ========================================================= */

body.container-width::before,
body.container-width::after{
    content:"";

    position:fixed;

    z-index:0;

    border-radius:999px;

    pointer-events:none;

    filter:blur(10px);

    opacity:.7;

    animation:floatingBlob 7s ease-in-out infinite alternate;
}

body.container-width::before{
    width:220px;
    height:220px;

    left:-100px;
    top:90px;

    background:rgba(255,122,0,.14);
}

body.container-width::after{
    width:260px;
    height:260px;

    right:-120px;
    bottom:120px;

    background:rgba(6,27,63,.10);

    animation-delay:1s;
}

@keyframes floatingBlob{
    from{
        transform:translate3d(0,0,0) scale(1);
    }
    to{
        transform:translate3d(16px,-18px,0) scale(1.08);
    }
}

/* =========================================================
   WRAP
   ========================================================= */

.wrap{
    position:relative;

    z-index:2;

    width:100% !important;

    min-height:100dvh !important;

    display:flex !important;

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

    padding:14px !important;

    margin:0 auto !important;

    box-sizing:border-box !important;
}

/* =========================================================
   CONTAINER
   ========================================================= */

.tf-container{
    width:100% !important;

    max-width:430px !important;

    margin:0 auto !important;
}

/* =========================================================
   FORM CARD
   ========================================================= */

.from-login.sign-up{
    position:relative;

    overflow:hidden !important;

    width:100% !important;

    max-width:430px;

    margin:0 auto !important;

    padding:28px 22px 24px;

    border-radius:32px;

    background:rgba(255,255,255,.86);

    border:1px solid rgba(255,255,255,.72);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    box-shadow:var(--ep-shadow);

    animation:formIn .55s ease both;
}

/* =========================================================
   CARD OVERLAY
   ========================================================= */

.from-login.sign-up::before{
    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:
        radial-gradient(circle at top right, rgba(255,122,0,.12), transparent 32%),
        linear-gradient(135deg, rgba(6,27,63,.03), transparent 46%);

    pointer-events:none;
}

/* =========================================================
   SHINE
   ========================================================= */

.from-login.sign-up::after{
    content:"";

    position:absolute;

    inset:-70% -120%;

    background:linear-gradient(
        115deg,
        transparent 30%,
        rgba(255,255,255,.52) 48%,
        transparent 66%
    );

    transform:translateX(-80%) rotate(10deg);

    animation:shineMove 5s ease-in-out infinite;

    pointer-events:none;
}

.from-login.sign-up > *{
    position:relative;
    z-index:2;
}

@keyframes formIn{
    from{
        opacity:0;
        transform:translateY(20px) scale(.98);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes shineMove{
    0%{
        transform:translateX(-80%) rotate(10deg);
        opacity:0;
    }
    40%{
        opacity:.45;
    }
    100%{
        transform:translateX(80%) rotate(10deg);
        opacity:0;
    }
}

/* =========================================================
   LOGO
   ========================================================= */

.from-login.sign-up > div:first-of-type img{
    width:clamp(100px, 34vw, 120px) !important;
    height:auto !important;

    padding:12px;

    border-radius:28px;

    background:#ffffff;

    box-shadow:
        0 16px 32px rgba(6,27,63,.10),
        inset 0 1px 0 rgba(255,255,255,.9);
}

/* =========================================================
   TITLE
   ========================================================= */

.top-from{
    text-align:center;

    margin-top:20px;
    margin-bottom:24px;
}

.top-from .title{
    color:var(--ep-navy) !important;

    font-size:24px !important;
    font-weight:950 !important;

    letter-spacing:-.4px;

    margin-bottom:7px;
}

.top-from .sub-title{
    color:var(--ep-muted) !important;

    font-size:13.5px;
    font-weight:600;
}

/* =========================================================
   INPUTS
   ========================================================= */

.middle-from{
    margin-top:4px;
}

.middle-from fieldset{
    position:relative;

    overflow:visible !important;

    min-height:56px;

    border-radius:18px !important;

    border:1px solid var(--ep-border) !important;

    background:rgba(255,255,255,.92) !important;

    box-shadow:0 8px 20px rgba(6,27,63,.05);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.middle-from fieldset:focus-within{
    border-color:rgba(255,122,0,.72) !important;

    background:#ffffff !important;

    box-shadow:
        0 0 0 4px rgba(255,122,0,.12),
        0 12px 24px rgba(6,27,63,.08);

    transform:translateY(-1px);
}

.middle-from input{
    color:var(--ep-navy) !important;

    font-weight:800;
}

.middle-from input::placeholder{
    color:#94A3B8 !important;

    font-weight:600;
}

.tf-field-label{
    color:#94A3B8 !important;
}

/* =========================================================
   PASSWORD VALIDATION BOX
   ========================================================= */

#pwdRulesBox{
    margin-top:12px !important;

    padding:14px;

    border-radius:18px;

    background:rgba(255,255,255,.78);

    border:1px solid rgba(6,27,63,.08);

    box-shadow:0 8px 20px rgba(6,27,63,.04);
}

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

.middle-from p.color-grayscale-500{
    margin-top:16px;

    color:var(--ep-muted) !important;

    font-size:12px;

    line-height:1.5;
}

.middle-from p.color-grayscale-500 a{
    color:var(--ep-orange) !important;

    font-weight:800;

    text-decoration:none;
}

/* =========================================================
   BUTTON
   ========================================================= */

.tf-btn.primary{
    position:relative;

    overflow:hidden;

    height:54px;

    border:0 !important;

    border-radius:18px !important;

    background:linear-gradient(
        135deg,
        var(--ep-orange),
        var(--ep-orange-dark)
    ) !important;

    color:#ffffff !important;

    font-size:15px !important;
    font-weight:950 !important;

    box-shadow:
        0 14px 28px rgba(255,122,0,.28),
        inset 0 1px 0 rgba(255,255,255,.28);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.tf-btn.primary:active{
    transform:scale(.98);
}

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

.fixed-bottom-btn{
    position:static !important;

    margin-top:18px;
}

.text-bottom{
    text-align:center;

    color:var(--ep-muted) !important;

    font-size:13px;
    font-weight:700;
}

.text-bottom a{
    color:var(--ep-orange) !important;

    font-weight:900;

    text-decoration:none;
}

/* =========================================================
   VALIDATION COLORS
   ========================================================= */

.field-error-text{
    font-size:12px;

    margin-top:6px;

    color:#dc3545;

    font-weight:700;
}

.field-msg-text,
.field-ok-text{
    font-size:12px;

    margin-top:6px;

    color:#198754;

    font-weight:700;
}

/* =========================================================
   INTL TEL INPUT
   ========================================================= */

.iti{
    width:100% !important;

    display:block !important;

    position:relative !important;

    z-index:20;
}

#mobileInput{
    width:100% !important;

    padding-top:14px;
    padding-bottom:14px;
}

.iti__tel-input,
.iti input[type="tel"]{
    width:100% !important;
}

/* =========================================================
   COUNTRY DROPDOWN
   ========================================================= */

.iti__country-list{
    width:100% !important;

    max-height:230px !important;

    overflow-y:auto !important;

    border-radius:18px !important;

    margin-top:8px !important;

    background:#ffffff !important;

    border:1px solid rgba(6,27,63,.12) !important;

    box-shadow:
        0 18px 40px rgba(6,27,63,.16) !important;

    z-index:99999 !important;
}

.iti-dropdown-open-field{
    margin-bottom:245px !important;
}

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

.modal-top-up-success .modal-content,
.wg-top-up-success{
    border-radius:28px !important;

    border:0 !important;

    box-shadow:
        0 14px 42px rgba(0,0,0,.12),
        0 2px 8px rgba(0,0,0,.06) !important;
}

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

.digit-group{
    display:flex;

    justify-content:center;

    gap:10px;
}

.digit-group input{
    width:52px;
    height:56px;

    border-radius:16px;

    border:1px solid rgba(6,27,63,.12);

    background:#ffffff;

    text-align:center;

    font-size:22px;
    font-weight:900;

    color:var(--ep-navy);

    box-shadow:0 8px 18px rgba(6,27,63,.05);
}

/* =========================================================
   PRELOADER
   ========================================================= */

.preload.preload-container{
    position:fixed !important;

    inset:0 !important;

    z-index:999999 !important;

    background:
        radial-gradient(circle at 50% 42%, rgba(255,122,0,.12), transparent 32%),
        linear-gradient(180deg,#ffffff 0%, #F7FAFF 100%) !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:420px){

    .wrap{
        padding:10px 12px !important;
    }

    .from-login.sign-up{
        padding:24px 18px 22px;

        border-radius:28px;
    }

    .top-from .title{
        font-size:22px !important;
    }

    .from-login.sign-up > div:first-of-type img{
        width:130px !important;
    }

    .middle-from fieldset{
        min-height:54px;

        border-radius:16px !important;
    }

    .tf-btn.primary{
        height:52px;

        border-radius:16px !important;
    }

    .digit-group input{
        width:48px;
        height:52px;
    }

    .iti__country-list{
        max-height:220px !important;
    }

    .iti-dropdown-open-field{
        margin-bottom:235px !important;
    }
}

/* =========================================================
   IOS FIX
   ========================================================= */

@supports (-webkit-touch-callout: none){

    body.container-width,
    .wrap{
        min-height:-webkit-fill-available;
    }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        animation:none !important;
        transition:none !important;
    }
}


/* =========================================================
   PREMIUM REGISTRATION ANIMATIONS
   ========================================================= */

/* form animation */
.from-login.sign-up{
    animation:
        registerCardEntry .8s cubic-bezier(.22,1,.36,1),
        floatingRegisterCard 5s ease-in-out infinite;
}

@keyframes floatingRegisterCard{
    0%,100%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-5px);
    }
}

@keyframes registerCardEntry{
    0%{
        opacity:0;

        transform:
            translateY(35px)
            scale(.96);
    }

    100%{
        opacity:1;

        transform:
            translateY(0)
            scale(1);
    }
}

/* logo pulse */
.from-login.sign-up > div:first-of-type img{
    animation:
        logoFloat 3.5s ease-in-out infinite,
        registerLogoGlow 2.8s ease-in-out infinite;
}

@keyframes registerLogoGlow{
    0%,100%{
        box-shadow:
            0 16px 32px rgba(6,27,63,.10),
            0 0 0 rgba(255,122,0,0);
    }

    50%{
        box-shadow:
            0 16px 32px rgba(6,27,63,.12),
            0 0 24px rgba(255,122,0,.24);
    }
}

/* input hover */
.middle-from fieldset{
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.middle-from fieldset:hover{
    transform:translateY(-1px);
}

/* button hover */
.tf-btn.primary{
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease;
}

.tf-btn.primary:hover{
    transform:
        translateY(-2px)
        scale(1.01);

    filter:brightness(1.03);

    box-shadow:
        0 22px 38px rgba(255,122,0,.32),
        inset 0 1px 0 rgba(255,255,255,.28);
}

/* title fade */
.top-from{
    animation:registerTitleFade .9s ease;
}

@keyframes registerTitleFade{
    from{
        opacity:0;
        transform:translateY(12px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* =========================================================
   COUNTRY DROPDOWN OPEN ANIMATION
   ========================================================= */

.iti__country-list{
    animation:countryDropdownOpen .25s ease both;
    transform-origin:top center;
}

@keyframes countryDropdownOpen{
    from{
        opacity:0;
        transform:translateY(-8px) scale(.98);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

/* country row smooth hover */
.iti__country{
    transition:
        background-color .18s ease,
        transform .18s ease;
}

.iti__country:hover{
    transform:translateX(3px);
}

/* flag selected area animation */
.iti__selected-flag{
    transition:
        background-color .2s ease,
        transform .2s ease;
}

.iti__selected-flag:hover{
    transform:scale(1.03);
}


/* Registration country dropdown final fix */
.iti-dropdown-open-field {
    margin-bottom: 0 !important;
}

.iti--container {
    position: fixed !important;
    right: auto !important;
    transform: none !important;
    z-index: 999999999 !important;
    max-width: calc(100vw - 24px) !important;
}

.iti--container .iti__dropdown-content {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}

.iti--container .iti__search-input {
    width: 100% !important;
    box-sizing: border-box !important;
}

.iti--container .iti__country-list {
    width: 100% !important;
    max-height: 260px !important;
    overflow-y: auto !important;
    margin-top: 0 !important;
}

@media (max-width: 576px) {
    .iti--container .iti__country-list {
        max-height: 38vh !important;
    }
}


/* HARD FIX: remove right-side white page on registration mobile */
html,
body,
body.container-width {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: clip !important;
    background: #f7faff !important;
}

body.container-width {
    display: block !important;
}

.wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 16px 12px !important;
    overflow-x: clip !important;
    display: flex !important;
    justify-content: center !important;
}

.tf-container {
    width: 100% !important;
    max-width: 430px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.from-login.sign-up {
    width: 100% !important;
    max-width: 430px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
}

/* Prevent card pseudo layers from extending page width */
.from-login.sign-up::before,
.from-login.sign-up::after,
body.container-width::before,
body.container-width::after {
    max-width: 100vw !important;
    overflow: hidden !important;
}

/* Important: your old shine animation uses inset:-70% -120%, causing side overflow */
.from-login.sign-up::after {
    display: none !important;
}