@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css');
@font-face {
	font-family: "Onest";
	src: url(../fonts/onset.woff2) format("woff2");
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
	font-family: "Quicksand";
	src: url(../fonts/quicksand.woff2) format("woff2");
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
}

@font-face {
	font-family: "SugarPeachy";
	src: url(../fonts/SugarPeachy.woff) format("woff"), url(../fonts/SugarPeachy.ttf) format("truetype");
	font-style: normal;
	font-weight: 900;
	font-display: swap
}
@font-face {
  font-family: "SugarPeachy";
  src: url("../fonts/SugarPeachyMedium.woff") format("woff"), url("./fonts/SugarPeachyMedium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}


 /* --- Paste all your original CSS here --- */
    .btn-chip{ border-radius:999px; border:1px solid var(--ring); background:#fff; padding:.55rem 1rem; }
    .btn-back{ width:44px;height:44px;border-radius:12px;border:1px solid #E5E5E5;background:#fff; display:flex;align-items:center;justify-content:center;}
    .login-page.signup .button-set .row .back-btn {
        width: auto !important;
        padding: 0px !important;
        border-radius: 0px 1 !important;
    }
    .title{ font-family:"Baloo 2"; font-weight:700; color:#111; letter-spacing:.2px; font-size:clamp(26px, 3.2vw, 36px);}
    .muted{ color:var(--muted); }

    /* Input shell styled like screenshot */
    .phone-shell{ position:relative; border-radius:999px; border:1.6px solid var(--ring); display:flex; align-items:center; padding:.18rem .3rem; background:#fff; transition:border-color .15s ease, box-shadow .15s ease; }
    .phone-shell.valid{ border-color:var(--violet); box-shadow:0 0 0 4px rgba(139,92,246,.16); }
    .phone-shell.invalid{ border-color:var(--danger); box-shadow:0 0 0 4px rgba(239,68,68,.14); }

    .flag-chip{ display:flex; align-items:center; gap:.38rem; background:var(--chip); border-radius:999px; padding:.38rem .56rem; margin-left:.1rem; border:1px solid rgba(0,0,0,.04); cursor:pointer; user-select:none; }
    .flag-chip img{ width:28px; height:20px; object-fit:cover; border-radius:6px; box-shadow:0 0 0 1px rgba(0,0,0,.06); }
    .flag-chip .caret{ width:18px;height:18px; display:inline-flex; align-items:center; justify-content:center; color:#555; }

    .phone-input{ border:none; outline:none; flex:1; padding:.74rem .8rem; font-size:1.05rem; color:#2b2b2b; }
    .phone-input::placeholder{ color:#9aa0a6; }

    .trailing{ width:26px;height:26px; margin-right:.65rem; color:#1f1f1f; opacity:.7; }

    .country-menu{ position:absolute; inset: auto auto 0 0; transform: translateY(calc(100% + 10px)); width:560px; max-width:92vw; background:#fff; border:1px solid var(--ring); border-radius:16px; box-shadow:0 14px 38px rgba(0,0,0,.12); padding:.6rem; z-index:1000; display:none; }
    .country-menu.open{ display:block; }
    .search{ width:100%; border:1px solid var(--ring); border-radius:10px; padding:.6rem .8rem; outline:none; }
    .list{ margin-top:.5rem; max-height:420px; overflow:auto; }
    .row-item{ display:flex; align-items:center; gap:.65rem; padding:.6rem .65rem; border-radius:10px; cursor:pointer; }
    .row-item:hover{ background:#f7f7fb; }
    .row-item img{ width:22px;height:16px;border-radius:3px;object-fit:cover; box-shadow:0 0 0 1px rgba(0,0,0,.05); }
    .row-item .name{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

    .helper{ font-size:.86rem; margin-top:.5rem; }
    .helper.invalid{ color:var(--danger); }
    .helper.valid{ color:var(--violet); }

    .btn-primary-soft{ background:#111; color:#fff; border:none; }
    .btn-outline{ background:#fff; border:1px solid var(--ring); color:#111; }
    section.login-page { height: 100vh; }
    section.login-page .col-lg-6.col-left { background-color: #111; color: #fff; padding: 80px 0 0; height: -webkit-fill-available; align-items: center; justify-content: center; display: flex; }
    section.login-page img.left-cross { position: absolute; top: 0; left: -110px; width: 100%; z-index: 1; max-width: 510px; }
    section.login-page img.vector-two { width: 92px; position: absolute; bottom: 14%; right: 16%; }
    section.login-page .row { height: 100vh; width: 100%; margin: 0 auto; position: relative; z-index: 9; }
    section.login-page img.vector-one { position: absolute; width: 72px; top: 20%; left: 20%; }
    section.login-page .section-title { margin-bottom: 24px; font-size: 48px; font-weight: 500; font-family: "SugarPeachy";}
    section.login-page img.stars { position: absolute; left: 50%; transform: translate(-50%, -50%); top: 50%; }
    img.auth-logo { width: 100%; max-width: 416px; }
    .login-page.signup .button-set .row { height: auto; max-width: 415px; gap: 16px; }
    .login-page.signup .button-set .row a:hover { transform: scale(.98); color: #1A1A1A;}
    .login-page.signup .button-set .row a{ width: 100%; padding: 15px; border-radius: 21px; font-size: 18px; text-align: center; transition: .3s all ease; text-decoration: none; }
    a.sign-in { background: #fff; color: #1A1A1A; border: 1.5px solid #1A1A1A; }
    .sign-up { background: #C097F0; color: #1A1A1A; border: 1.5px solid #1A1A1A; }
    .logo-mob { display: none; text-align: center; }
    @media screen and (max-width: 991px) { section.login-page .col-lg-6.col-left { display: none; } .logo-mob { display: block; } }



/* Signup free */
  a.mail-link:hover {
            opacity: 0.8;
        }

        a.mail-link {
            color: #C097F0;
            text-decoration: none;
            font-size: 16px;
            font-family: 'Quicksand';
            font-weight: 600;
            transition: .2s all ease;
        }

        a.mail-link:hover {
            transform: scale(0.98);
        }

        .btn-chip:hover {
            background: #2c2c2c;
            color: #fff;
        }

        .btn-chip {
            border-radius: 27px;
            text-decoration: none;
            border: 1px solid #E5E5E5;
            color: #2C2C2C;
            padding: 7px 12px;
            background: transparent;
            font-size: 14px;
        }

        .btn-back {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            border: 1px solid #E5E5E5;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .title {
            font-family: 'SugarPeachy';
            font-weight: 700;
            color: #111;
            letter-spacing: .2px;
            font-size: 36px;
        }

        .muted {
            color: var(--muted);
        }

        /* Input shell styled like screenshot */
        .phone-shell {
            position: relative;
            border-radius: 21px;
            display: flex;

            align-items: center;
            padding: 4px 20px 4px 10px;
            background: #fff;
            -webkit-font-smoothing: subpixel-antialiased;
            border: 1.5px solid #E5E5E5;
        }

        .phone-shell.valid {
            border-color: #C097F0;
            box-shadow: 0 0 0 2px rgba(139, 92, 246, .16);
        }

        .phone-shell.invalid {
            border-color: #F43F5E;
            box-shadow: 0 0 0 2px rgba(239, 68, 68, .14);
        }

        /* Flag chip (left) */
        .flag-chip {
            display: flex;
            align-items: center;
            gap: .38rem;
            background: #E5E5E5;
            border-radius: 13px;
            padding: 10px 5px;
            margin-left: .1rem;
            border: 1px solid rgba(0, 0, 0, .04);
            cursor: pointer;
            user-select: none;
        }

        .flag-chip img {
            width: 28px;
            height: 20px;
            object-fit: cover;
            border-radius: 6px;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
        }

        .flag-chip .caret {
            width: 18px;
            height: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #555;
        }

        /* Phone input */
        .phone-input {
            border: none;
            outline: none;
            flex: 1;
            padding: .74rem .8rem;
            font-size: 1.05rem;
            color: #2b2b2b;
        }

        .phone-input::placeholder {
            color: #9aa0a6;
        }

        /* Trailing phone icon */
        .trailing {
            width: 26px;
            height: 26px;
            margin-right: .65rem;
            color: #1f1f1f;
            opacity: .7;
        }

        /* Dropdown panel */
        .country-menu {
            position: absolute;
            inset: auto auto 0 0;
            transform: translateY(calc(100% + 10px));
            width: 100%;
            max-width: 92vw;
            background: #fff;
            border: 1px solid var(--ring);
            border-radius: 16px;
            box-shadow: 0 14px 38px rgba(0, 0, 0, .12);
            padding: .6rem;
            z-index: 1000;
            display: none;
        }

        .country-menu.open {
            display: block;
        }

        .search {
            width: 100%;
            border: 1px solid var(--ring);
            border-radius: 10px;
            padding: .6rem .8rem;
            outline: none;
        }

        .list {
            margin-top: .5rem;
            max-height: 420px;
            overflow: auto;
        }

        .row-item {
            display: flex;
            align-items: center;
            gap: .65rem;
            padding: .6rem .65rem;
            border-radius: 10px;
            cursor: pointer;
        }

        .row-item:hover {
            background: #f7f7fb;
        }

        .row-item img {
            width: 22px;
            height: 16px;
            border-radius: 3px;
            object-fit: cover;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, .05);
        }

        .row-item .name {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .helper {
            font-size: .86rem;
            margin-top: .5rem;
        }

        .helper.invalid {
            color: var(--danger);
        }

        .helper.valid {
            color: var(--violet);
        }

        .btn-primary-soft {
            background: #111;
            color: #fff;
            border: none;
        }

        .btn-outline {
            background: #fff;
            border: 1px solid var(--ring);
            color: #111;
        }

        section.login-page {
            height: 100vh;
        }

        section.login-page .col-lg-6.col-left {
            background-color: #111;
            color: #fff;
            padding: 80px 0 0;
            height: -webkit-fill-available;
            align-items: center;
            justify-content: center;
            display: flex;
        }

        section.login-page img.left-cross {
            position: absolute;
            top: 0;
            left: -110px;
            width: 100%;
            z-index: 0;
            max-width: 510px;
        }

        section.login-page img.vector-two {
            width: 92px;
            position: absolute;
            bottom: 14%;
            right: 16%;
        }

        section.login-page .row {
            height: 100vh;
            width: 100%;
            margin: 0 auto;
            position: relative;
            z-index: 9;
        }

        section.login-page img.vector-one {
            position: absolute;
            width: 72px;
            top: 20%;
            left: 20%;
        }

        section.login-page .section-title {
            margin-bottom: 24px;
            font-size: 48px;
            font-weight: 500;
        }

        section.login-page img.stars {
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            top: 50%;
        }

        img.auth-logo {
            width: 100%;
            max-width: 416px;
        }

        section.login-page .col-right .form-otp {
            width: 100%;
            max-width: 415px;
            margin: 0 auto;
        }

        button#cs-username-btn,
        button#cs-phone-btn,
        button#resendBtn,
        button#cs-facebook-btn {
            width: 100%;
            padding: 15px;
            font-family: 'Quicksand';
            border-radius: 21px !important;
            font-size: 18px;
            text-align: center;
            transition: .3s all ease;
            text-decoration: none;
            background: #fff;
            color: #787878;
            transition: .3s all ease;
            border: 1.5px solid #E5E5E5;
        }

        button#cs-username-btn:hover,
        button#cs-phone-btn:hover,
        button#cs-facebook-btn:hover {
            background: #2C2C2C;
            color: #fff;
            border: 1.5px solid #2C2C2C;
        }

        button#resendBtn:hover {
            background: #2C2C2C;
            color: #fff;
        }

        button#sendBtn,
        button#cnfBtn {
            background: #E5E5E5;
            border-radius: 21px !important;
        }

        button#cnfBtn:not(:disabled) {
            background: #2C2C2C;
            color: #fff;
        }


        p.muted {
            color: #787878;
            margin-bottom: 45px;
        }

        section.login-page img.auth-logo {
            width: 100%;
            max-width: 240px;
            margin-bottom: 10px;
        }

        .logo-mob {
            display: none;
        }

        .helper.invalid {
            font-size: 12px;

            color: #F43F5E;
        }

        .mx-auto.cs-phone-numder-section {
            margin-top: 100px;
        }

        .code-otp.disabled {
            background: #E5E5E5 !important;
            padding: 15px;
            border-radius: 21px !important;
            font-size: 18px;
            margin-top: 100px;
        }

        .username-section input[type="text"] {
            width: 100%;
            padding: 15px;
            border-radius: 21px !important;
            font-size: 18px;
            text-align: left;
            text-decoration: none;
            background: #fff;
            color: #2C2C2C;
            transition: .3s all ease;
            border: 1.5px solid #E5E5E5;
        }

        button#cnfBtn.active {
            background: #2C2C2C;
            color: #fff;
        }

        .btn.black-bg path {
            stroke: #fff;
        }

        .btn-primary-soft {
            background: #E5E5E5;
            color: #787878;
            font-size: 18px;
            font-family: 'Quicksand';
            border: none;
            border-radius: 21px;
        }

        .mx-auto.cs-phone-numder-section.phn {
            margin-top: 0;
        }

        @media screen and (max-width: 1024px) {
            img.auth-logo {
                width: 100%;
                max-width: 330px;
            }
        }

        @media screen and (max-width: 991px) {
            section.login-page .col-lg-6.col-left {
                display: none;
            }

            .logo-mob {
                display: block;
                text-align: center;
            }
        }

        @media screen and (max-width: 767px) {}
        p#timer {
            font-size: 20px;
            font-weight: 600;
            font-family: 'Quicksand';
            margin-top: 16px;
        }

        .otp-input {
            width: 48px;
            height: 48px;
            text-align: center;
            font-size: 18px;
            border: 1px solid #E5E5E5;
            border-radius: 17px;
            font-size: 20px;
            font-weight: 600;
            font-weight: 600;
        }

        .btn.black-bg {
            background: #2C2C2C !important;
            color: #fff !important;
        }

        #sendBtn.active {
            background-color: black !important;
            color: white !important;
            border: none !important;
        }

        button#sendBtn:not(:disabled) {
            background: black !important;
            color: white !important;
            border: none !important;
        }

        button.cs-btn-primary-soft {
            background: #E5E5E5;
            border-radius: 21px !important;
        }

        button.btn-primary-active {
            background: black !important;
            color: white !important;
            border: none !important;
        }

        a.facebook {
            background: #1877F2;
            color: #fff;
            background-image: url(./image/facebook.svg);
            background-repeat: no-repeat;
            background-position: 20px 15px;
            width: 100%;
            padding: 15px;
            border-radius: 21px;
            font-size: 18px;
            text-align: center;
            transition: .3s all ease;
            text-decoration: none;
            margin-bottom: 20px;
        }