/* لایه و زمینه مودال */
.hl-modal-bg {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(38, 46, 72, 0.36);
    z-index: 10000; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.hl-modal-box {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 10px 40px rgba(38,46,72,.15);
    width: 340px; max-width: 94vw;
    padding: 0 0 28px 0;
    overflow: hidden;
    position: relative;
    animation: fadeIn .4s;
}
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.96);}
    to { opacity: 1; transform: scale(1);}
}
/* هدر مودال */
.hl-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px 2px 12px;
    border-bottom: 1px solid #ececec;
    position: relative;
    background: #f8fafd;
}
.hl-modal-close {
    background: transparent; border: none; color: #4a4a4a;
    font-size: 19px; cursor: pointer; margin-right: -5px;
    padding: 0 7px;
}
.hl-link-edit {
    display: flex; align-items: center; color: #2374e1; text-decoration: none;
    font-size: 13px; gap: 3px;
    background: none; border: none; outline: none; cursor: pointer;
    padding: 0 3px; font-weight: 500;
}
.hl-link-edit .hl-back-arrow {
    font-size: 18px; margin-left: 2px;
}
/* فرم اصلی */
#hamyar-login-app { padding: 22px 25px 0 25px;}
#hl-mobile-field label,
.hl-otp-label { font-size: 15px; font-weight: 500; color: #363636; }
#hl-mobile {
    width: 100%; padding: 11px 12px; margin-top: 9px;
    font-size: 16px; border: 1.5px solid #e0e0e0; border-radius: 7px;
    outline: none; transition: border .18s;
    direction: ltr; background: #fafcff;
}
#hl-mobile:focus { border-color: #2374e1; background: #f3f8fd;}
.hl-error {
    color: #d32f2f; font-size: 13px; margin-top: 3px; display: block; min-height: 18px;
}
.hl-info { color: #2374e1; font-size: 13px; margin-top: 5px; min-height: 18px; }
.hl-success { color: #388e3c; font-size: 14px; margin-top: 7px; display: block;}
/* دکمه اصلی */
.hl-btn-main {
    width: 100%; background: linear-gradient(87deg,#2374e1 0,#2468ef 100%);
    color: #fff; font-size: 16px; padding: 12px 0; border: none;
    border-radius: 7px; margin-top: 17px; font-weight: 700; cursor: pointer;
    transition: background 0.15s,box-shadow .13s;
    box-shadow: 0 2px 12px rgba(36,104,239,.06);
    display: flex; align-items: center; justify-content: center; gap: 7px;
}
.hl-btn-main:disabled, .hl-btn-main.loading {
    background: #b6bfe6; cursor: not-allowed;
}
.hl-btn-text {
    background: none; border: none; color: #2374e1; font-size: 14px;
    margin: 0 auto; display: block; padding: 7px 0; cursor: pointer;
    text-decoration: underline;
}
.loader {
    display: inline-block; width: 18px; height: 18px;
    border: 2px solid #d0d0d0; border-radius: 50%;
    border-top-color: #2374e1;
    animation: spin 0.8s linear infinite;
    margin-right: 2px; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* OTP inputs */
.hl-otp-inputs {
    display: flex; justify-content: center; gap: 11px; margin: 23px 0 8px 0;
}
.hl-otp {
    width: 48px; height: 49px; border: 1.7px solid #d6e1f6;
    border-radius: 8px; font-size: 22px; text-align: center;
    font-family: inherit; background: #f8fafd;
    outline: none; transition: border .16s;
}
.hl-otp:focus { border-color: #2468ef; background: #fff;}
#hl-otp-error { min-height: 19px; margin: 5px 0 0 0;}
.hl-otp-extra {
    margin-top: 13px; text-align: center;
}
#hl-otp-timer { color: #1976d2; font-size: 14px; margin-bottom: 8px;}
/* Toast پیام موفقیت/خطا */
/* رویهٔ جدید برای #hl-toast */
#hl-toast {
    position: fixed !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 110000 !important;  /* بالاتر از تمام مودال‌ها */
    background: #222 !important;
    color: #fff !important;
    padding: 12px 22px !important;
    border-radius: 9px !important;
    font-size: 15px !important;
    box-shadow: 0 2px 18px rgba(0,0,0,0.09) !important;
    opacity: .97 !important;
}
#hl-toast.error {
    background: #d32f2f !important;
}

/* واکنش‌گرا */
@media (max-width: 500px) {
    .hl-modal-box { width: 99vw !important; border-radius: 0;}
    #hamyar-login-app { padding: 16px 7px 0 7px;}
    .hl-otp-inputs { gap: 6px;}
    .hl-otp { width: 38px; height: 41px; font-size: 19px;}
}
#hl-toast:empty {
    display: none !important;
}
#hl-toast:not(:empty) {
    display: block !important;
}