/* ══════════════════════════════════════════════
   MSC AUTH MODAL — msc-login-page.css  v1.1.0
   Replaces WooCommerce's plain My Account
   login / register page with a styled version.
   Uses the same --msc-purple colour system.
══════════════════════════════════════════════ */
:root {
    --mlp-purple:    #9c27b0;
    --mlp-purple2:   #7b1fa2;
    --mlp-purple-lt: #f5eeff;
    --mlp-text:      #212121;
    --mlp-muted:     #757575;
    --mlp-border:    #e0e0e0;
    --mlp-bg:        #f5f5f5;
    --mlp-white:     #ffffff;
    --mlp-green:     #388e3c;
    --mlp-red:       #c0392b;
    --mlp-r:         8px;
    --mlp-shadow:    0 2px 16px rgba(0,0,0,0.09);
}

/* ── Hide default WC "Login" heading & form ── */
.woocommerce-account:not(.logged-in) .woocommerce > h2,
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper,
.woocommerce-account:not(.logged-in) .u-column1,
.woocommerce-account:not(.logged-in) .u-column2,
.woocommerce-account:not(.logged-in) .col2-set {
    display: none !important;
}

/* ── Hide WooCommerce's native lost-password & reset-password forms for guests ──
   Our styled card replaces them. The reset form stays in the DOM (just hidden) so
   the card can fill its password fields and submit it through WooCommerce. */
.woocommerce-account:not(.logged-in) form.woocommerce-ResetPassword,
.woocommerce-account:not(.logged-in) form.lost_reset_password,
.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword.lost_reset_password {
    display: none !important;
}

/* ── Full-page centred layout ── */
.woocommerce-account:not(.logged-in) .woocommerce,
.mscam-order-received-guest {
    max-width: 480px !important;
    margin: 40px auto 60px !important;
    padding: 0 16px !important;
}

/* ── Card wrapper (injected by our JS) ── */
#msc-login-card {
    background: var(--mlp-white);
    border-radius: 12px;
    box-shadow: var(--mlp-shadow);
    overflow: hidden;
    font-family: 'Segoe UI', Roboto, sans-serif;
}

/* ── Header ── */
.mlp-header {
    background: linear-gradient(135deg, var(--mlp-purple) 0%, var(--mlp-purple2) 100%);
    padding: 20px 24px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}
.mlp-header-brand { font-size: 17px; font-weight: 700; letter-spacing: 0.02em; }
.mlp-header-sub   { font-size: 12px; opacity: 0.8; margin-top: 2px; }

/* ── Tabs ── */
.mlp-tabs {
    display: flex;
    border-bottom: 2px solid var(--mlp-border);
    background: var(--mlp-white);
}
.mlp-tab {
    flex: 1;
    padding: 13px 10px;
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -2px;
    font-size: 13px;
    font-weight: 700;
    color: var(--mlp-muted);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: inherit;
    transition: color 0.15s, border-color 0.15s;
}
.mlp-tab.active { color: var(--mlp-purple); border-bottom-color: var(--mlp-purple); }

/* ── Panes ── */
.mlp-pane { display: none; padding: 22px 24px 28px; }
.mlp-pane.active { display: block; }
.mlp-intro { font-size: 13px; color: var(--mlp-muted); margin: 0 0 18px; }

/* ── Message ── */
.mlp-msg {
    font-size: 13px; border-radius: var(--mlp-r);
    padding: 9px 12px; margin-bottom: 14px; display: none;
}
.mlp-msg.is-error   { background:#fdf0ee; color:var(--mlp-red);   border:1px solid #f5c6c0; display:block; }
.mlp-msg.is-success { background:#edf7ed; color:var(--mlp-green); border:1px solid #b7dbb8; display:block; }

/* ── Fields ── */
.mlp-field { margin-bottom: 15px; }
.mlp-label {
    display: block;
    font-size: 11px; font-weight: 700;
    color: var(--mlp-muted);
    margin-bottom: 6px;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.mlp-input-wrap {
    display: flex; align-items: stretch;
    border: 1.5px solid var(--mlp-border);
    border-radius: var(--mlp-r);
    background: #fff; overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.mlp-input-wrap:focus-within {
    border-color: var(--mlp-purple);
    box-shadow: 0 0 0 3px rgba(156,39,176,0.10);
}
.mlp-input-wrap.is-err { border-color: var(--mlp-red); }

.mlp-prefix {
    padding: 0 10px 0 12px;
    font-size: 14px; font-weight: 600; color: var(--mlp-text);
    background: var(--mlp-bg); border-right: 1.5px solid var(--mlp-border);
    display: flex; align-items: center; white-space: nowrap; flex-shrink: 0;
}
.mlp-input {
    flex: 1;
    border: 1.5px solid var(--mlp-border); border-radius: var(--mlp-r);
    padding: 10px 12px; font-size: 14px; color: var(--mlp-text);
    background: #fff; width: 100%; box-sizing: border-box;
    outline: none; font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.mlp-input:focus {
    border-color: var(--mlp-purple);
    box-shadow: 0 0 0 3px rgba(156,39,176,0.10);
}
.mlp-input.is-err { border-color: var(--mlp-red); }
.mlp-input-wrap .mlp-input { border: none; border-radius: 0; box-shadow: none; }

.mlp-eye {
    background: none; border: none; padding: 0 12px; cursor: pointer;
    color: var(--mlp-muted); display: flex; align-items: center;
    transition: color 0.15s; flex-shrink: 0;
}
.mlp-eye:hover { color: var(--mlp-purple); }

.mlp-err { display: block; font-size: 12px; color: var(--mlp-red); margin-top: 4px; min-height: 15px; }

/* Strength bar */
.mlp-strength-bar { height: 3px; background: var(--mlp-border); border-radius: 3px; margin-top: 5px; overflow: hidden; }
.mlp-strength-fill { height: 100%; width: 0; border-radius: 3px; transition: width 0.3s, background 0.3s; }
.mlp-strength-fill[data-l="1"] { width:25%; background:#e53935; }
.mlp-strength-fill[data-l="2"] { width:50%; background:#fb8c00; }
.mlp-strength-fill[data-l="3"] { width:75%; background:#fdd835; }
.mlp-strength-fill[data-l="4"] { width:100%; background:var(--mlp-green); }

/* ── Button ── */
.mlp-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 13px 0;
    background: var(--mlp-purple); color: #fff; border: none;
    border-radius: var(--mlp-r); font-size: 15px; font-weight: 700;
    cursor: pointer; letter-spacing: 0.02em; font-family: inherit;
    transition: background 0.15s, transform 0.1s; margin-top: 4px;
}
.mlp-btn:hover  { background: var(--mlp-purple2); }
.mlp-btn:active { transform: scale(0.99); }
.mlp-btn:disabled { background: #bdbdbd; cursor: not-allowed; }

.mlp-spinner {
    display: none; width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
    border-radius: 50%; animation: mlp-spin 0.65s linear infinite;
}
.mlp-btn.is-loading .mlp-spinner { display: inline-block; }
@keyframes mlp-spin { to { transform: rotate(360deg); } }

.mlp-switch { text-align: center; font-size: 13px; color: var(--mlp-muted); margin-top: 16px; }
.mlp-switch-link {
    background: none; border: none; color: var(--mlp-purple);
    font-weight: 700; cursor: pointer; font-size: 13px;
    padding: 0; font-family: inherit;
    text-decoration: underline; text-underline-offset: 2px;
}
.mlp-switch-link:hover { color: var(--mlp-purple2); }

/* ── Forgot password link ── */
.mlp-forgot-row { text-align: right; margin: -4px 0 14px; }
.mlp-forgot-link {
    background: none; border: none; color: var(--mlp-purple);
    font-weight: 600; cursor: pointer; font-size: 12px;
    padding: 0; font-family: inherit;
    text-decoration: underline; text-underline-offset: 2px;
}
.mlp-forgot-link:hover { color: var(--mlp-purple2); }

@media (max-width: 480px) {
    #msc-login-card { border-radius: 0; }
    .mlp-pane { padding: 16px 14px 20px; }
}