/**
 * Modern Shop Theme — auth.css (PATCH v1.4)
 * ------------------------------------------------------------------
 * Styling for the NEW modern-shop auth pages:
 *   themes/modern-shop/auth/login.php
 *   themes/modern-shop/auth/register.php
 *
 * Why: the CMS used to fall back to default/auth/login.php whose CSS
 * classes (auth.css of the DEFAULT theme) are never enqueued by the
 * modern-shop header — so the login button rendered as a naked gray
 * OS button and the password eye sat BELOW the input with no style.
 *
 * All rules use the modern-shop design tokens (style.css :root) so the
 * primary-color option and dark mode keep working automatically.
 * ------------------------------------------------------------------ */

/* ================= Page & card ================= */
.ms-auth-wrap {
    display: flex;
    justify-content: center;
    padding: 28px 0 64px;
}

.ms-auth-card {
    width: 100%;
    max-width: 460px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

/* gradient top band */
.ms-auth-hero {
    position: relative;
    background: var(--primary-gradient);
    color: #fff;
    text-align: center;
    padding: 30px 24px 26px;
    overflow: hidden;
}
.ms-auth-hero::before,
.ms-auth-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
}
.ms-auth-hero::before { width: 150px; height: 150px; top: -70px; left: -50px; }
.ms-auth-hero::after  { width: 110px; height: 110px; bottom: -60px; right: -30px; }

.ms-auth-hero__icon {
    position: relative;
    z-index: 1;
    width: 62px;
    height: 62px;
    margin: 0 auto 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    color: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}
.ms-auth-hero h1 {
    position: relative;
    z-index: 1;
    font-size: 1.35rem;
    font-weight: 900;
    margin: 0 0 6px;
}
.ms-auth-hero p {
    position: relative;
    z-index: 1;
    font-size: 0.86rem;
    opacity: 0.92;
    margin: 0;
}

/* card body */
.ms-auth-body { padding: 26px 26px 30px; }

/* ================= Alerts ================= */
.ms-auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.8;
    margin-bottom: 18px;
}
.ms-auth-alert i { margin-top: 4px; font-size: 0.95rem; }
.ms-auth-alert--error   { background: #FEE2E2; color: #991B1B; }
.ms-auth-alert--success { background: #D1FAE5; color: #065F46; }
.ms-auth-alert--info    { background: #DBEAFE; color: #1E40AF; }
body.dark-mode .ms-auth-alert--error   { background: rgba(239, 68, 68, 0.16);  color: #FCA5A5; }
body.dark-mode .ms-auth-alert--success { background: rgba(16, 185, 129, 0.16); color: #6EE7B7; }
body.dark-mode .ms-auth-alert--info    { background: rgba(59, 130, 246, 0.16); color: #93C5FD; }

/* ================= Fields ================= */
.ms-auth-field { margin-bottom: 18px; }

.ms-auth-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 8px;
}
.ms-auth-label i { color: var(--primary); font-size: 0.85rem; }
.ms-auth-label .req { color: var(--primary); }
.ms-auth-label-hint { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }
.ms-auth-hint { display: block; font-size: 0.74rem; color: var(--text-muted); margin-top: 6px; }

.ms-auth-input-wrap { position: relative; }

.ms-auth-input {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 16px;
    padding-left: 48px; /* room for the leading icon (RTL) */
    border: 2px solid var(--input-border);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text-main);
    font: inherit;
    font-size: 0.92rem;
    outline: none;
    transition: border-color .25s, background .25s, box-shadow .25s;
}
.ms-auth-input.ltr { direction: ltr; text-align: left; }
.ms-auth-input:focus {
    border-color: var(--primary);
    background: var(--input-bg-focus, var(--card-bg));
    box-shadow: var(--input-focus-ring);
}

/* leading icon inside the field (right side in RTL) */
.ms-auth-input-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.95rem;
    pointer-events: none;
    transition: color .25s;
}
.ms-auth-input-wrap:focus-within .ms-auth-input-icon { color: var(--primary); }

/* eye toggle INSIDE the field (left side in RTL) */
.ms-auth-eye {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color .2s, background .2s;
}
.ms-auth-eye:hover { color: var(--primary); background: rgba(255, 46, 99, 0.08); }
.ms-auth-eye.is-on { color: var(--primary); }

/* password strength meter */
.ms-auth-strength { margin-top: 10px; }
.ms-auth-strength__track {
    height: 6px;
    border-radius: 6px;
    background: var(--thumb-bg, #E2E8F0);
    overflow: hidden;
}
.ms-auth-strength__fill {
    height: 100%;
    width: 0;
    border-radius: 6px;
    background: #EF4444;
    transition: width .35s ease, background .35s ease;
}
.ms-auth-strength__label {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--text-muted);
    margin-top: 5px;
    display: block;
}

/* captcha */
.ms-auth-captcha {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ms-auth-captcha__q {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--thumb-bg, #F1F5F9);
    border: 1px dashed var(--card-border-strong);
    color: var(--text-strong);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-size: 0.9rem;
    font-weight: 900;
    white-space: nowrap;
}
.ms-auth-captcha__q i { color: var(--primary); }
.ms-auth-captcha input {
    flex: 1;
    min-width: 90px;
    padding: 12px 14px;
    border: 2px solid var(--input-border);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text-main);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    text-align: center;
    direction: ltr;
    outline: none;
    transition: border-color .25s, box-shadow .25s;
}
.ms-auth-captcha input:focus {
    border-color: var(--primary);
    box-shadow: var(--input-focus-ring);
}

/* register type switch (mobile / email) */
.ms-auth-type-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: var(--input-bg);
    border: 2px solid var(--input-border);
    border-radius: var(--radius-md);
    padding: 5px;
    margin-bottom: 18px;
}
.ms-auth-type-btn {
    border: 0;
    background: transparent;
    border-radius: 9px;
    padding: 10px 8px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    transition: var(--transition);
}
.ms-auth-type-btn.is-active {
    background: var(--card-bg);
    color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* remember / agree rows */
.ms-auth-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 0.84rem;
    color: var(--text-main);
    line-height: 1.9;
    cursor: pointer;
    user-select: none;
}
.ms-auth-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 4px 0 0;
    accent-color: var(--primary);
    flex: 0 0 auto;
    cursor: pointer;
}
.ms-auth-check a { color: var(--primary); font-weight: 800; }

.ms-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.ms-auth-row--end { justify-content: flex-end; margin-top: -8px; }
.ms-auth-link { font-size: 0.82rem; font-weight: 800; color: var(--primary); }
.ms-auth-link:hover { text-decoration: underline; }

/* ================= Submit button ================= */
.ms-auth-submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: var(--primary-gradient);
    color: #fff;
    border: 0;
    border-radius: var(--radius-md);
    padding: 14px 24px;
    font: inherit;
    font-size: 0.98rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(255, 46, 99, 0.32);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.ms-auth-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(255, 46, 99, 0.4);
}
.ms-auth-submit:active { transform: translateY(0); }
.ms-auth-submit:disabled { filter: grayscale(.4); opacity: .7; cursor: wait; }

/* ================= Footer ================= */
.ms-auth-foot {
    text-align: center;
    padding: 18px 26px;
    border-top: 1px dashed var(--card-border);
    background: var(--thumb-bg, #F8FAFC);
    font-size: 0.88rem;
    color: var(--text-muted);
}
.ms-auth-foot a {
    color: var(--primary);
    font-weight: 800;
    margin-right: 4px;
}
.ms-auth-foot a:hover { text-decoration: underline; }

/* ================= Dark mode ================= */
body.dark-mode .ms-auth-card { border-color: var(--card-border); }
body.dark-mode .ms-auth-type-btn.is-active { background: rgba(255, 255, 255, 0.08); }
body.dark-mode .ms-auth-foot { background: transparent; }

/* ================= Responsive ================= */
@media (max-width: 480px) {
    .ms-auth-wrap { padding: 12px 0 48px; }
    .ms-auth-hero { padding: 24px 18px 22px; }
    .ms-auth-hero h1 { font-size: 1.18rem; }
    .ms-auth-hero__icon { width: 54px; height: 54px; font-size: 1.3rem; border-radius: 17px; }
    .ms-auth-body { padding: 20px 18px 24px; }
    .ms-auth-foot { padding: 15px 18px; }
    .ms-auth-input { padding: 12px 14px; padding-left: 46px; font-size: 16px; /* stops iOS auto-zoom */ }
    .ms-auth-captcha input { font-size: 16px; }
}