/* Music Room — صفحات ورود و ثبت‌نام */

:root {
    --bg: #08090f;
    --card: rgba(20, 21, 32, .78);
    --line: rgba(255, 255, 255, .09);
    --text: #f4f4fb;
    --muted: rgba(255, 255, 255, .58);
    --violet: #7c5cff;
    --cyan: #00bfff;
    --danger: #ff7188;
    --ok: #4ade80;
    --radius: 16px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

.auth-body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    font-family: Vazirmatn, Tahoma, "Segoe UI", Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
}

/* ---------- پس‌زمینه‌ی متحرک ---------- */

.orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    pointer-events: none;
    z-index: 0;
    animation: drift 18s ease-in-out infinite alternate;
}
.orb-a { width: 380px; height: 380px; background: var(--violet); top: -120px; right: -90px; }
.orb-b { width: 340px; height: 340px; background: var(--cyan); bottom: -130px; left: -100px; animation-delay: -6s; opacity: .4; }
.orb-c { width: 220px; height: 220px; background: #ff4fa3; top: 55%; right: 55%; animation-delay: -11s; opacity: .22; }

@keyframes drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(40px, 30px, 0) scale(1.15); }
}

/* ---------- کارت ---------- */

.auth-card {
    position: relative;
    z-index: 1;
    width: min(440px, calc(100% - 28px));
    padding: 34px 30px 26px;
    border-radius: 26px;
    background: var(--card);
    border: 1px solid var(--line);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
    animation: rise .55s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes rise {
    from { opacity: 0; transform: translateY(22px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.auth-card.shake { animation: shake .42s; }

@keyframes shake {
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

/* ---------- لوگو ---------- */

.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 22px;
    font-size: 28px;
}
.brand-text b { color: #9b8cff; font-weight: 800; }

.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 26px; }
.eq i {
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(to top, var(--violet), var(--cyan));
    animation: eq 1s ease-in-out infinite;
}
.eq i:nth-child(1) { height: 40%; animation-delay: -.2s; }
.eq i:nth-child(2) { height: 90%; animation-delay: -.6s; }
.eq i:nth-child(3) { height: 60%; animation-delay: -.4s; }
.eq i:nth-child(4) { height: 80%; animation-delay: -.8s; }

@keyframes eq {
    0%, 100% { transform: scaleY(.35); }
    50%      { transform: scaleY(1); }
}
.eq i { transform-origin: bottom; }

/* ---------- متن‌ها ---------- */

h1 { margin: 0 0 8px; text-align: center; font-size: 24px; }

.subtitle {
    margin: 0 0 24px;
    text-align: center;
    color: var(--muted);
    line-height: 1.9;
    font-size: 14.5px;
}

.ltr-inline { direction: ltr; unicode-bidi: embed; display: inline-block; color: var(--text); font-weight: 600; }
.inline-link { color: #9b8cff; text-decoration: none; margin-right: 6px; white-space: nowrap; }
.inline-link:hover { text-decoration: underline; }

.hint { margin: 18px 0 0; text-align: center; color: var(--muted); font-size: 12.5px; line-height: 1.8; }

/* ---------- فرم ---------- */

.auth-form label {
    display: block;
    margin: 0 0 8px;
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
}
.auth-form label small { color: var(--muted); }

.field {
    margin-bottom: 16px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .05);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.field:focus-within {
    border-color: var(--violet);
    background: rgba(124, 92, 255, .08);
    box-shadow: 0 0 0 4px rgba(124, 92, 255, .16);
}
.field.has-error { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(255, 113, 136, .12); }

.field input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 16px;   /* جلوگیری از زوم خودکار iOS */
}
.field input::placeholder { color: rgba(255, 255, 255, .28); }

.phone-input { letter-spacing: 2px; text-align: left; }

.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .row-2 { grid-template-columns: 1fr; gap: 0; } }

.field-error { margin: -8px 0 14px; color: var(--danger); font-size: 13px; line-height: 1.7; animation: fade .3s both; }
.field-error.center { text-align: center; margin-top: 12px; }

@keyframes fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- پیام‌ها ---------- */

.flash { margin-bottom: 16px; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.7; animation: fade .3s both; }
.flash-error { background: rgba(255, 60, 90, .12); color: var(--danger); border: 1px solid rgba(255, 60, 90, .22); }
.flash-ok    { background: rgba(74, 222, 128, .10); color: var(--ok);     border: 1px solid rgba(74, 222, 128, .22); }

/* ---------- دکمه‌ها ---------- */

.btn-primary, .btn-ghost {
    position: relative;
    width: 100%;
    border: 0;
    cursor: pointer;
    font: inherit;
    color: #fff;
    transition: transform .15s, box-shadow .2s, opacity .2s, background .2s;
}

.btn-primary {
    height: 54px;
    margin-top: 6px;
    border-radius: var(--radius);
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--violet), var(--cyan));
    box-shadow: 0 10px 28px rgba(124, 92, 255, .35);
}
.btn-primary:hover  { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(124, 92, 255, .48); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
    height: 46px;
    margin-top: 12px;
    border-radius: 14px;
    font-size: 14px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--line);
}
.btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .11); }
.btn-ghost:disabled { opacity: .5; cursor: not-allowed; }

.btn-spinner {
    display: none;
    position: absolute;
    inset: 0;
    margin: auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    animation: spin .7s linear infinite;
}
.is-loading { pointer-events: none; }
.is-loading .btn-label { opacity: 0; }
.is-loading .btn-spinner { display: block; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- کد ۶ رقمی ---------- */

.otp-wrap { position: relative; margin: 4px 0 6px; }

.otp-input {
    width: 100%;
    height: 62px;
    padding: 0 16px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .05);
    color: var(--text);
    font: inherit;
    font-size: 26px;
    letter-spacing: 14px;
    text-align: center;
    outline: none;
}
.otp-input:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(124, 92, 255, .16); }
.otp-wrap.has-error .otp-input { border-color: var(--danger); }

/* وقتی جاوااسکریپت فعال است، کادرهای جدا نشان داده می‌شوند */
.js .otp-input {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    cursor: text;
}

.otp-boxes { display: none; }

.js .otp-boxes {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 9px;
}

.otp-boxes span {
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .05);
    font-size: 26px;
    font-weight: 700;
    transition: border-color .2s, box-shadow .2s, transform .15s;
}
.otp-boxes span.filled { border-color: rgba(155, 140, 255, .55); animation: pop .18s both; }
.otp-boxes span.active {
    border-color: var(--violet);
    box-shadow: 0 0 0 4px rgba(124, 92, 255, .2);
}
.otp-boxes span.active:empty::after {
    content: "";
    width: 2px;
    height: 28px;
    background: var(--violet);
    animation: blink 1s steps(1) infinite;
}
.otp-wrap.has-error .otp-boxes span { border-color: var(--danger); }

@keyframes pop   { from { transform: scale(.85); } to { transform: scale(1); } }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- لینک‌ها ---------- */

.alt-links { margin-top: 20px; text-align: center; }
.alt-links a, .back-home { color: var(--muted); text-decoration: none; font-size: 13.5px; transition: color .2s; }
.alt-links a:hover, .back-home:hover { color: #fff; }

.back-home { display: block; margin-top: 22px; text-align: center; }

.resend-form { margin: 0; }

/* ---------- کاهش حرکت ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* B.F.K customer authentication theme overrides */
:root {
  --violet: #00a6c7;
  --cyan: #29c9df;
  --danger: #c64c61;
  --ok: #168b76;
  --muted: #58777b;
}
.auth-body {
  color: #183a36;
  background:
    radial-gradient(circle at 12% 12%, rgba(41,201,223,.24), transparent 34%),
    radial-gradient(circle at 88% 85%, rgba(194,139,53,.16), transparent 32%),
    linear-gradient(135deg,#effcfd,#d9f7fa 52%,#f8ffff);
}
.orb-a { background: #29c9df !important; opacity: .22 !important; }
.orb-b { background: #00a6c7 !important; opacity: .16 !important; }
.orb-c { background: #c28b35 !important; opacity: .12 !important; }
.auth-card {
  color: #183a36;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(0,166,199,.16);
  box-shadow: 0 24px 80px rgba(24,58,54,.13);
  backdrop-filter: blur(18px);
}
.brand-text, .auth-card h1 { color: #183a36; }
.brand-text b { color: #008da8 !important; }
.auth-card .subtitle, .auth-card .hint,
.auth-card .alt-links a, .auth-card .back-home { color: #58777b; }
.auth-form label { color: #254d4b; }
.field {
  background: rgba(239,252,253,.88);
  border-color: rgba(0,166,199,.2);
}
.field input { color: #183a36; }
.field input::placeholder { color: #8ba8a9; }
.field:focus-within {
  border-color: #00a6c7;
  box-shadow: 0 0 0 4px rgba(0,166,199,.12);
}
.btn-primary {
  background: linear-gradient(115deg,#008da8,#29c9df);
  box-shadow: 0 12px 28px rgba(0,166,199,.22);
}
.btn-primary:hover { box-shadow: 0 14px 34px rgba(0,166,199,.3); }
.btn-ghost { color: #087e91; border-color: rgba(0,166,199,.25); }
.flash-error { color: #a6324b; background: #fff1f3; border-color: #f4cbd3; }
.flash-ok { color: #16745f; background: #edfaf5; border-color: #c7ecdf; }