.hsb-auth-box,
.hsb-register-box {
    max-width: 520px;
    margin: 0 auto;
    direction: rtl;
    font-family: var(--font-family-base);
    background: var(--color-white);
}


.hsb-auth-header {
    text-align: center;
    margin-bottom: 32px;
}


.hsb-auth-header span {
    color: var(--color-primary);
    font-size: 16px;
    font-weight: 700;
}


.hsb-auth-header h1 {
    margin: 15px 0 10px;
    color: var(--color-dark);
    font-size: 32px;
    font-weight: 800;
}


.hsb-auth-header p {
    color: var(--color-gray-600);
}



.hsb-auth-tabs {
    display: flex;
    background: var(--color-light);
    border-radius: var(--radius-lg);
    padding: 5px;
    margin-bottom: 30px;
}


.hsb-auth-tabs button {
    flex: 1;
    height: 48px;
    background: transparent;
    color: var(--color-dark);
    border: none;
    border-radius: var(--radius-md);
}


.hsb-auth-tabs button.active {
    background: var(--color-primary);
    color: var(--color-white);
}



.hsb-auth-box label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}


.hsb-auth-box input,
.hsb-register-box input {

    width: 100%;
    height: 56px;

    border: 1px solid var(--border-color);

    border-radius: var(--radius-lg);

    padding: 0 18px;

    margin-bottom: 18px;

    background: var(--color-white);

    color: var(--color-dark);

}



.hsb-auth-box input:focus,
.hsb-register-box input:focus {

    outline: none;

    border-color: var(--color-primary);

}



.hsb-auth-box button,
.hsb-register-box button {

    width: 100%;

    height: 58px;

    background: var(--color-primary);

    color: var(--color-white);

    border: none;

    border-radius: var(--radius-lg);

    font-weight: 700;

    font-size: 16px;

}



.hsb-otp-boxes {

    display: flex;

    gap: 10px;

    direction: ltr;

    margin-bottom: 20px;

}


.hsb-otp-boxes input {

    width: 52px;

    height: 58px;

    text-align: center;

    font-size: 22px;

    padding: 0;

}



.hsb-auth-mobile {

    display: none;

}



.hsb-auth-footer {

    text-align: center;

    margin-top: 28px;

    color: var(--color-gray-600);

}


.hsb-auth-footer a {

    color: var(--color-primary);

    font-weight: 700;

}



.hsb-register-box h2 {

    text-align: center;

    margin-bottom: 30px;

}



@media(max-width:600px){

    .hsb-auth-box,
    .hsb-register-box {

        width: 100%;

    }


    .hsb-otp-boxes input {

        width: 42px;

    }

}


.hsb-auth-mobile {
    display: none;
}


.hsb-auth-password {
    display: block;
}


.hsb-auth-tabs {
    cursor: pointer;
}


.hsb-auth-tabs button {
    transition: all .2s ease;
}


.hsb-auth-message {
    text-align: center;
    color: var(--color-primary);
    margin-bottom: 20px;
}


.hsb-auth-box {
    padding: 35px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
}



.hsb-account-shell {
    max-width: 520px;
    margin: 40px auto;
}


.hsb-account-switch {

    display: flex;

    gap: 6px;

    background: var(--color-light);

    padding: 5px;

    border-radius: var(--radius-lg);

    margin-bottom: 30px;

}


.hsb-account-switch-btn {

    flex: 1;

    height: 48px;

    border: none;

    background: transparent;

    color: var(--gray-600);

    border-radius: var(--radius-md);

    font-weight: 700;

}


.hsb-account-switch-btn.is-active {

    background: var(--color-primary);

    color: var(--color-white);

}


.hsb-account-panel {

    display: none;

}


.hsb-account-panel.is-active {

    display: block;

}



/* ==========================
   Register Type Switch
========================== */


.hsb-register-type {

    display: flex;

    gap: 12px;

    margin-bottom: 30px;

}



.hsb-register-type-btn {

    flex: 1;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border-radius: var(--radius-lg);

    border: 1px solid var(--border-color);

    background: var(--color-light);

    color: var(--gray-700);

    font-weight: 700;

    cursor: pointer;

}



.hsb-register-type-btn.active {

    background: var(--color-primary);

    border-color: var(--color-primary);

    color: var(--color-white);

}




/* ==========================
   Register Sections
========================== */


.hsb-register-company {

    display: block;

}


.hsb-register-personal {

    display: none;

}



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


.hsb-otp-boxes {

    display: flex;

    direction: ltr;

    gap: 10px;

    margin: 20px 0;

}



.hsb-otp-boxes input {

    width: 52px;

    height: 56px;

    text-align: center;

    padding: 0;

    font-size: 22px;

    font-weight: 700;

}



/* ==========================
   Register Form
========================== */


.hsb-auth-register {

    margin-top: 20px;

}



.hsb-auth-register button {

    margin-top: 10px;

}




@media(max-width:600px){

    .hsb-register-type {

        gap: 8px;

    }


    .hsb-otp-boxes {

        gap: 6px;

    }


    .hsb-otp-boxes input {

        width: 42px;

    }

}



/* ===============================
   Register UI Improvement
================================ */


.hsb-auth-register {

    background: var(--color-white);

    padding: 30px;

    border-radius: var(--radius-xl);

}



/* type selector */

.hsb-register-type {

    background: var(--color-light);

    padding: 6px;

    border-radius: var(--radius-lg);

    gap: 8px;

}



.hsb-register-type-btn {

    background: transparent;

    color: var(--gray-700);

    border: none;

    height: 50px;

}



.hsb-register-type-btn.active {

    background: var(--color-primary);

    color: var(--color-white);

}





/* mobile verification */


.hsb-register-mobile {

    margin-top: 25px;

}


.hsb-register-mobile input {

    margin-bottom: 12px;

}


.hsb-register-mobile button,
.hsb-register-otp button {

    height: 52px;

    width:100%;

}





/* OTP */


.hsb-register-otp {

    margin-top:25px;

}


.hsb-otp-boxes {

    justify-content:center;

    margin:20px 0 30px;

}


.hsb-otp-boxes input {

    border-radius: var(--radius-md);

    border:1px solid var(--border-color);

    background:white;

}





/* company form */


.hsb-register-company,
.hsb-register-personal {

    margin-top:30px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;

}



.hsb-register-company input,
.hsb-register-personal input,
.hsb-auth-register > input {

    height:52px;

    border-radius:var(--radius-lg);

}





/* email password */


.hsb-auth-register > input {

    width:100%;

    margin-top:14px;

}



.hsb-auth-register > button:last-child {

    margin-top:25px;

    height:56px;

    border-radius:var(--radius-lg);

    font-size:16px;

}




@media(max-width:700px){

    .hsb-register-company,
    .hsb-register-personal {

        grid-template-columns:1fr;

    }


    .hsb-auth-register {

        padding:20px;

    }

}



/* ==========================
   Register OTP Steps
========================== */


.hsb-register-otp {

    display:none;

}



.hsb-register-mobile {

    max-width:420px;

    margin:30px auto;

}



.hsb-register-mobile label,
.hsb-register-otp label {

    display:block;

    margin-bottom:10px;

    font-weight:700;

}



.hsb-register-mobile input {

    height:56px;

    width:100%;

    margin-bottom:15px;

}



.hsb-register-mobile button {

    width:100%;

    height:56px;

}



.hsb-register-otp {

    max-width:420px;

    margin:30px auto;

}



.hsb-register-otp button {

    width:100%;

    height:56px;

}



.hsb-register-otp .hsb-otp-boxes {

    justify-content:center;

    direction:ltr;

}



/* ==========================
   Form Input Padding
========================== */


.hsb-auth-register input,
.hsb-auth-register textarea,
.hsb-register-company input,
.hsb-register-personal input {

    padding: 0 18px;

}


.hsb-auth-register textarea {

    padding: 15px 18px;

    min-height: 120px;

    resize: vertical;

}


.hsb-auth-register input::placeholder,
.hsb-auth-register textarea::placeholder {

    color: var(--gray-500);

}


.hsb-auth-register input,
.hsb-auth-register textarea {

    text-align: right;

}


.hsb-auth-tabs,
.hsb-account-switch,
.hsb-register-type {
    display:flex;
    gap:12px;
    margin-bottom:24px;
}

.hsb-auth-tabs button,
.hsb-account-switch-btn,
.hsb-register-type-btn {
    flex:1;
    height:48px;
    border-radius:var(--radius-lg);
    border:1px solid var(--border-color);
    background:var(--gray-100);
    color:var(--gray-700);
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.hsb-auth-tabs button.active,
.hsb-account-switch-btn.is-active,
.hsb-register-type-btn.active {
    background:var(--color-primary);
    color:var(--color-white);
    border-color:var(--color-primary);
}

.hsb-otp-boxes {
    display:flex;
    gap:10px;
    direction:ltr;
    margin:20px 0;
}

.hsb-otp-boxes input {
    width:42px;
    height:52px;
    text-align:center;
    font-size:20px;
    font-weight:700;
    padding:0;
    border-radius:var(--radius-md);
}

.hsb-auth-mobile,
.hsb-register-otp {
    display:none;
}

.hsb-auth-mobile.is-active,
.hsb-register-otp.is-active {
    display:block;
}

.hsb-auth-message {
    padding:10px;
    border-radius:var(--radius-md);
    text-align:center;
}

.hsb-auth-timer {
    text-align:center;
    color:var(--gray-600);
    margin-top:10px;
}

.hsb-auth-register input,
.hsb-auth-box input {
    padding:0 16px;
}


.hsb-send-otp,
.hsb-register-otp button,
.hsb-edit-mobile {
    border-radius:16px;
}

.hsb-otp-status {
    text-align:center;
    margin-top:12px;
    color:var(--gray-600);
    display:none;
}

.hsb-edit-mobile {
    margin-top:12px;
    background:var(--gray-200);
    color:var(--gray-700);
}

.hsb-edit-mobile:disabled {
    opacity:.5;
    cursor:not-allowed;
}

.hsb-register-mobile.otp-sent .hsb-otp-status {
    display:block;
}

.hsb-register-mobile.otp-sent .hsb-send-otp {
    display:none;
}

.hsb-register-mobile.otp-sent input {
    opacity:.7;
}

.hsb-register-verified {
    border:1px solid #28a745;
}


.hsb-register-mobile-actions {
    display:flex;
    gap:10px;
    align-items:center;
}

.hsb-register-mobile-actions button {
    flex:1;
    height:44px;
    border-radius:12px;
    margin:0;
    font-size:14px;
}

.hsb-otp-status {
    margin:8px 0;
    font-size:13px;
}

.hsb-edit-mobile {
    margin-top:0;
}

.hsb-register-otp button {
    height:44px;
    border-radius:12px;
}

.hsb-register-otp .hsb-otp-boxes {
    margin:12px 0;
}

.hsb-otp-boxes input {
    width:38px;
    height:46px;
}


/* =========================
   Unified OTP UX
========================= */

.hsb-auth-box,
.hsb-auth-register {
    max-width:520px;
}


.hsb-mobile-step {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 14px;
    background:var(--gray-100);
    border-radius:12px;
    margin-bottom:14px;
}


.hsb-mobile-number {
    font-weight:700;
    color:var(--gray-700);
}


.hsb-mobile-status {
    font-size:13px;
    color:var(--gray-600);
}


.hsb-mobile-status.waiting {
    color:var(--color-primary);
}


.hsb-mobile-status.success {
    color:#198754;
}


.hsb-mobile-actions {
    display:flex;
    gap:10px;
    margin-top:12px;
}


.hsb-mobile-actions button {
    flex:1;
    height:44px;
    border-radius:12px;
    font-size:14px;
}


.hsb-edit-mobile {
    background:var(--gray-200);
    color:var(--gray-700);
}


.hsb-otp-container {
    display:none;
}


.hsb-otp-container.active {
    display:block;
}


.hsb-otp-boxes {
    display:flex;
    justify-content:center;
    gap:8px;
    direction:ltr;
    margin:16px 0;
}


.hsb-otp-boxes input {
    width:42px;
    height:48px;
    border-radius:12px;
    text-align:center;
    font-size:18px;
    padding:0;
}


.hsb-confirm-mobile {
    width:100%;
    height:44px;
    border-radius:12px;
}


.hsb-countdown {
    text-align:center;
    font-size:13px;
    color:var(--gray-600);
    margin-top:8px;
}


@media (min-width:700px){

    .hsb-mobile-actions {
        max-width:100%;
    }

}



.hsb-account-panel {
    background:var(--color-white);
    border-radius:24px;
    padding:32px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}


.hsb-auth-box,
.hsb-auth-register {
    background:transparent;
    padding:0;
    max-width:520px;
}


.hsb-register-type {
    gap:10px;
    margin-bottom:24px;
}


.hsb-register-type-btn {
    height:46px;
    border-radius:14px;
    border:1px solid #ddd;
    background:#f8f8f8;
    font-weight:700;
    cursor:pointer;
}


.hsb-register-type-btn.active {
    background:var(--color-primary);
    color:#fff;
    border-color:var(--color-primary);
}


.hsb-create-account {
    width:100%;
    height:50px;
    border-radius:14px;
    margin-top:24px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
}


.hsb-auth-footer a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:42px;
    padding:0 18px;
    margin-right:8px;
    border-radius:12px;
    background:var(--color-primary);
    color:#fff;
    text-decoration:none;
    font-weight:700;
}


.hsb-auth-box,
.hsb-auth-register {
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    padding:0 !important;
    margin:0 !important;
}


.hsb-auth-header {
    padding-top:0;
}


.hsb-account-panel {
    background:var(--color-white);
    border-radius:28px;
    padding:40px;
}


.hsb-auth-footer {
    border:none;
    margin-top:20px;
}


.hsb-auth-tabs {
    margin-top:30px;
}


.hsb-account-panel {
    display:none;
}

.hsb-account-panel.is-active {
    display:block;
}

.hsb-otp-container {
    display:none;
}

.hsb-otp-container.active {
    display:block;
}


.hsb-register-type {
    display:flex;
    gap:12px;
    margin-bottom:24px;
}

.hsb-register-type-btn {
    flex:1;
    height:46px;
    border-radius:14px;
    border:1px solid #ddd;
    background:var(--color-white);
    font-size:14px;
    font-weight:600;
    cursor:pointer;
}

.hsb-register-type-btn.active {
    background:var(--color-primary);
    color:#fff;
    border-color:var(--color-primary);
}

.hsb-auth-register .hsb-auth-header {
    margin-bottom:24px;
}



/* Unified typography */

.hsb-auth-box,
.hsb-auth-register,
.hsb-auth-box button,
.hsb-auth-register button,
.hsb-auth-box input,
.hsb-auth-register input,
.hsb-auth-box label,
.hsb-auth-register label,
.hsb-auth-box p,
.hsb-auth-register p,
.hsb-auth-box h2,
.hsb-auth-register h2 {
    font-family: inherit;
}


.hsb-auth-box button,
.hsb-auth-register button {
    font-size:14px;
    font-weight:600;
    line-height:1.5;
}


.hsb-auth-box input,
.hsb-auth-register input {
    font-size:14px;
    font-weight:400;
}


.hsb-auth-header h2 {
    font-size:24px;
    font-weight:700;
}


.hsb-auth-header p {
    font-size:14px;
}




.hsb-auth-message.success {
    background:rgba(25,135,84,.08);
    color:#198754;
    border-radius:12px;
    padding:10px 14px;
    box-shadow:0 4px 12px rgba(25,135,84,.08);
}


.hsb-auth-message.error {
    background:rgba(220,53,69,.08);
    color:#dc3545;
    border-radius:12px;
    padding:10px 14px;
    box-shadow:0 4px 12px rgba(220,53,69,.08);
}


.hsb-auth-tabs,
.hsb-register-type {
    background:transparent;
}




.hsb-account-switch {
    background:transparent;
    border:none;
    box-shadow:none;
}


.hsb-account-switch-btn {
    background:transparent;
    border:none;
}


.hsb-account-switch-btn.is-active {
    background:transparent;
    border:none;
}




.hsb-account-switch {
    background:transparent;
    box-shadow:none;
}


.hsb-account-switch-btn {
    background:var(--gray-100);
    border:none;
}


.hsb-account-switch-btn.is-active {
    background:var(--color-primary);
    color:#fff;
}

/* Center mobile OTP login texts */
.hsb-mobile-input-step label,
.hsb-mobile-input-step input,
.hsb-mobile-input-step .hsb-mobile-actions,
.hsb-auth-footer {
    text-align: center;
}

.hsb-mobile-input-step input {
    text-align: center;
}

.hsb-mobile-input-step .hsb-mobile-actions {
    justify-content: center;
}


.hsb-mobile-input-step .hsb-mobile-actions {
    display: flex;
    justify-content: center;
}

.hsb-mobile-input-step .hsb-send-otp {
    margin-left: auto;
    margin-right: auto;
}