/* ===================================================
   NOIZZLY – Auth pages shared styles
   (login, signup, forgot-password, reset-password)
   =================================================== */

/* ── Background glow images ── */
.bg-glow-outer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.glow-img {
    position: absolute;
    width: 100%;
    left: 0;
    pointer-events: none;
    user-select: none;
}
.glow-img-top    { top: 0; }
.glow-img-bottom { bottom: 0; }

/* ── Main wrapper ── */
.auth-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    min-height: calc(100vh - 72px);
    padding-top: 72px;
}

/* ── Left panel (form) ── */
.auth-left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px 48px 32px;
}

/* ── Right panel (decorative) ── */
.auth-right {
    flex: 0 0 48%;
    max-width: 48%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    position: relative;
}

/* ── Form box ── */
.form-box {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ── Form header ── */
.form-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.form-title {
    font-size: 38px;
    font-weight: 600;
    line-height: 1.15;
    color: #fff;
    margin-top: 2px;
}
.form-subtitle {
    font-size: 15px;
    font-weight: 400;
    color: rgba(255,255,255,.65);
    line-height: 1.5;
}

/* ── Back link ── */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    opacity: .8;
    transition: opacity .15s;
    margin-bottom: 4px;
}
.back-link:hover { opacity: 1; color: #fff; }
.back-link i { font-size: 18px; }

/* ── Fields ── */
.fields-wrap {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.field { position: relative; }
.field input {
    width: 100%;
    height: 56px;
    background: #131313;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 80px;
    padding: 18px 16px 6px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    outline: none;
    transition: border-color .2s;
}
.field input:focus { border-color: #57ff8d; }
.field input.has-error { border-color: rgba(255,87,87,.6); }
.field label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,.45);
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    pointer-events: none;
    transition: top .18s, font-size .18s, color .18s, transform .18s;
    background: transparent;
    padding: 0 4px;
    margin-left: -4px;
    white-space: nowrap;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label {
    top: 0;
    transform: translateY(-50%);
    font-size: 12px;
    color: rgba(255,255,255,.55);
    background: #131313;
    border-radius: 4px;
}
.field input:focus + label { color: #57ff8d; }

/* Password eye toggle */
.field-pw { position: relative; }
.field-pw input { padding-right: 52px; }
.pw-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255,255,255,.4);
    cursor: pointer;
    font-size: 18px;
    padding: 4px;
    line-height: 1;
    transition: color .15s;
}
.pw-toggle:hover { color: rgba(255,255,255,.7); }

.field-error {
    font-size: 11px;
    color: #ff5757;
    margin-top: 4px;
    padding-left: 16px;
}

/* ── Remember me row ── */
.remember-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.remember-left {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.remember-left input[type=checkbox] { display: none; }
.remember-label {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}
.forgot-link {
    font-size: 14px;
    font-weight: 500;
    color: #c4c4c4;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s;
}
.forgot-link:hover { color: #fff; }

/* ── Custom checkbox ── */
.custom-check {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255,255,255,.4);
    border-radius: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s, background .2s;
}

/* ── Terms row ── */
.terms-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.terms-row input[type=checkbox] { display: none; }
.terms-text {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: #fff;
}
.terms-text a { color: #57ff8d; text-decoration: none; }
.terms-text a:hover { text-decoration: underline; }
.terms-error {
    font-size: 11px;
    color: #ff5757;
    margin-top: 2px;
    padding-left: 32px;
    display: block;
}

/* ── Actions ── */
.actions-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.btn-submit {
    width: 100%;
    height: 52px;
    background: #57ff8d;
    border: none;
    border-radius: 80px;
    color: #131313;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s, transform .1s;
}
.btn-submit:hover { opacity: .88; }
.btn-submit:active { transform: scale(.98); }
.btn-submit:disabled { opacity: .5; cursor: default; }

.register-link, .login-link {
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}
.register-link a, .login-link a { color: #57ff8d; text-decoration: none; }
.register-link a:hover, .login-link a:hover { text-decoration: underline; }

/* ── Divider ── */
.divider {
    display: flex;
    align-items: center;
    gap: 14px;
}
.divider-line {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,.18);
}
.divider-text {
    font-size: 13px;
    color: rgba(255,255,255,.4);
    white-space: nowrap;
}

/* ── Social buttons ── */
.social-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}
.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    border-radius: 80px;
    border: 1px solid rgba(87,255,141,.4);
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background .2s, border-color .2s;
    text-decoration: none;
}
.social-btn:hover {
    background: rgba(87,255,141,.07);
    border-color: #57ff8d;
    color: #fff;
}
.social-btn i { font-size: 18px; color: #fff; }

/* ── Phone mockup ── */
.phone-mockup-wrap {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}
.phone-img {
    width: 100%;
    height: auto;
    max-height: 70vh;
    border-radius: 30px;
    display: block;
    object-fit: cover;
    box-shadow: 0 40px 100px rgba(0,0,0,.6);
}
.phone-placeholder {
    width: 100%;
    aspect-ratio: 9/16;
    max-height: 70vh;
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(87,255,141,.08) 0%, rgba(255,255,255,.04) 50%, rgba(87,255,141,.05) 100%);
    border: 1px solid rgba(87,255,141,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.2);
    font-size: 13px;
    text-align: center;
}
.phone-overlay-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 60px;
    background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 100%);
    border-radius: 30px 30px 0 0;
    pointer-events: none;
}
.phone-dots {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}
.dot-active {
    width: 32px; height: 10px;
    border-radius: 5px;
    background: #57ff8d;
}
.dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.6);
}

/* ── Alerts ── */
.alert-danger {
    background: rgba(255,87,87,.1);
    border: 1px solid rgba(255,87,87,.2);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13px;
    color: #ff5757;
    display: flex;
    align-items: center;
    gap: 8px;
}
.alert-success {
    background: rgba(87,255,141,.1);
    border: 1px solid rgba(87,255,141,.25);
    border-radius: 14px;
    padding: 20px 24px;
    text-align: center;
}
.alert-success i { font-size: 32px; color: #57ff8d; display: block; margin-bottom: 10px; }
.alert-success strong { color: #57ff8d; font-size: 18px; }
.alert-success p { color: rgba(255,255,255,.7); font-size: 14px; margin-top: 6px; }
.alert-success a { color: #57ff8d; font-weight: 600; text-decoration: none; }

/* ── State boxes (forgot/reset) ── */
.state-box {
    border-radius: 18px;
    padding: 36px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.state-box.success { background: rgba(87,255,141,.07); border: 1px solid rgba(87,255,141,.2); }
.state-box.error   { background: rgba(255,87,87,.07);  border: 1px solid rgba(255,87,87,.2); }
.state-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}
.state-box.success .state-icon { background: rgba(87,255,141,.12); color: #57ff8d; }
.state-box.error   .state-icon { background: rgba(255,87,87,.12);  color: #ff5757; }
.state-title { font-size: 20px; font-weight: 600; color: #fff; }
.state-text  { font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.6; max-width: 380px; }

.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 12px 28px;
    border-radius: 80px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity .2s;
    border: none;
    cursor: pointer;
}
.btn-action.primary { background: #57ff8d; color: #131313; }
.btn-action.primary:hover { opacity: .88; color: #131313; }
.btn-action.outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.7);
}
.btn-action.outline:hover { border-color: rgba(255,255,255,.5); color: #fff; }

/* ── Password strength bar ── */
.strength-wrap { padding: 0 4px; margin-top: 8px; }
.strength-bars { display: flex; gap: 5px; margin-bottom: 5px; }
.strength-bar {
    flex: 1; height: 3px;
    border-radius: 10px;
    background: rgba(255,255,255,.1);
    transition: background .3s;
}
.strength-label {
    font-size: 11px;
    color: rgba(255,255,255,.35);
    transition: color .3s;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .auth-right { display: none; }
    .auth-left  { padding: 40px 24px; }
    .form-title { font-size: 28px; }
}
@media (max-width: 500px) {
    .auth-left  { padding: 32px 16px; }
    .row-2      { grid-template-columns: 1fr; }
    .form-title { font-size: 24px; }
    .remember-row { flex-wrap: wrap; gap: 12px; }
}