.customer-signin-page {
    min-height: 100vh;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    background-image: url("/images/customers/bilionx-city-signal-login.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.customer-signin-card {
    width: min(100%, 580px);
    padding: 2.5rem;
    color: #111827;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 18px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
}

.customer-signin-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    color: #20242a;
    font-family: "Manrope", sans-serif;
    font-size: 2.25rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
}

.customer-signin-brand:hover {
    color: #20242a;
}

.customer-signin-logo-crop {
    display: block;
    width: 66px;
    height: 66px;
    overflow: hidden;
}

.customer-signin-logo-crop img {
    display: block;
    width: auto;
    height: 66px;
    max-width: none;
}

.customer-signin-brand-mobile {
    font-size: 1.7rem;
}

.input-holder{
    width: 100%;
    margin-bottom: 1rem;
}

.bilionx-signin-password {
    position: relative;
}

.bilionx-signin-password .form-control {
    padding-right: 54px !important;
}

.bilionx-signin-password button {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 8px;
    color: #d5deea;
    background: transparent;
}

.bilionx-signin-password button:hover,
.bilionx-signin-password button:focus-visible {
    color: #fff;
    background: rgba(255,255,255,.08);
}

.customer-signin-card label,
.signin-modal-holder label {
    margin-bottom: 0.45rem;
    color: #6b7280;
    font-size: 1rem;
    font-weight: 500;
}

.customer-signin-card .form-control,
.signin-modal-holder .form-control {
    min-height: 56px;
    padding: 0.75rem 1rem;
    color: #f7f7f8 !important;
    background-color: rgba(31, 39, 48, 0.92) !important;
    border: 1px solid rgba(141, 176, 195, 0.28) !important;
    border-radius: 9px !important;
}

.customer-signin-card .primary-button,
.signin-modal-holder .primary-button {
    min-height: 54px;
    font-size: 1.05rem;
}

.mobile-sign-in-holder {
    background-image: url("/images/customers/bilionx-city-signal-login.png");
    background-position: center;
}

.signin-modal-holder {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

@media (max-width: 767.98px) {
    .signin-content-holder {
        padding: 1.25rem;
    }

    .signin-modal-holder {
        padding: 1.5rem;
    }
}
.bilionx-create-account-link{display:grid;grid-template-columns:42px 1fr 18px;gap:13px;align-items:center;margin-top:20px;padding:16px 17px;color:#fff!important;text-decoration:none;border:1px solid rgba(243,29,52,.65);background:linear-gradient(110deg,rgba(243,29,52,.17),rgba(243,29,52,.04));box-shadow:0 10px 28px rgba(0,0,0,.22);transition:.2s ease}.bilionx-create-account-link>i:first-child{display:grid;place-items:center;width:42px;height:42px;background:#f31d34;border-radius:50%;font-size:1rem}.bilionx-create-account-link>i:last-child{color:#ff5265}.bilionx-create-account-link span{display:flex;flex-direction:column;gap:2px}.bilionx-create-account-link small{color:#ff6979;font-size:.64rem;letter-spacing:.12em;font-weight:900}.bilionx-create-account-link strong{color:#fff;font-size:1rem}.bilionx-create-account-link em{color:#aeb8c7;font-size:.75rem;font-style:normal;font-weight:500}.bilionx-create-account-link:hover{transform:translateY(-2px);border-color:#f31d34;background:rgba(243,29,52,.24)}
