/* ==========================================================================
   V2 AUTH — the branded sign-in, registration, lost-password and
   reset-password screens.

   Moved out of the theme's style.css on 18 Oct 2026 (it was lines 1772-2146
   there) so that /my-account/ could stop loading that stylesheet altogether.
   It was the last V2 page still pulling in the previous generation's CSS, and
   the cost was real: `img[width][height]{height:auto}` from style.css was
   out-specifying the dashboard's own card rules and leaving photos sitting at
   their intrinsic ratio.

   Nothing here changed in the move. The block is self-contained — it declares
   its own --auth-* tokens on .met-auth and names its fonts literally — so it
   carries across whole.

   Loaded wherever this markup can render: every /my-account/ route (the
   WooCommerce myaccount template overrides, including lost-password and
   reset-password, plus met-password-reset.php's widget inside them) and the
   /login/ page, which runs the same shortcode on an Elementor canvas.
   ========================================================================== */

/* ============================================================
   AUTH PAGE — branded sign-in / sign-up (WooCommerce My Account)
   ============================================================ */

body.met-auth-fullscreen {
    padding-top: 0 !important;
    overflow-x: hidden;
}
body.met-auth-fullscreen #met-header,
body.met-auth-fullscreen .met-footer,
body.met-auth-fullscreen .met-whatsapp-float {
    display: none !important;
}
body.met-auth-fullscreen .met-wc-content,
body.met-auth-fullscreen .site-main,
body.met-auth-fullscreen main {
    margin: 0; padding: 0; max-width: none;
}

.met-auth {
    --auth-orange: #FF5533;
    --auth-orange-hov: #E03E1F;
    --auth-navy: #0F1E35;
    --auth-text: #1A2B49;
    --auth-muted: #6B7280;
    --auth-border: #E5E7EB;
    --auth-bg: #F8FAFC;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
    background: #fff;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--auth-text);
}
.met-auth * { box-sizing: border-box; }

/* Form side */
.met-auth__form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
    background: #fff;
    position: relative;
}
/* Decorative dots removed — were leaking visible specks near the form */

.met-auth__form-inner {
    width: 100%;
    max-width: 440px;
}

.met-auth__brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px;
}
.met-auth__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--auth-muted);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    transition: color .15s;
}
.met-auth__back:hover { color: var(--auth-orange); }
.met-auth__logo img { height: 36px; width: auto; display: block; }

/* Tabs */
.met-auth__tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--auth-bg);
    border-radius: 10px;
    margin-bottom: 28px;
}
.met-auth__tab {
    flex: 1;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--auth-muted);
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
}
.met-auth__tab.is-active {
    background: #fff;
    color: var(--auth-text);
    box-shadow: 0 1px 3px rgba(15,30,53,.08);
}
.met-auth__tab:hover:not(.is-active) { color: var(--auth-text); }

.met-auth__pane[hidden] { display: none !important; }

/* Flash message above the sign-in form — currently only the "that link has
   already been used" notice after a spent magic link. */
.met-auth__flash{ display:flex; gap:12px; align-items:flex-start; margin:0 0 22px; padding:14px 16px; border-radius:14px; background:#FFF7ED; border:1px solid #FDBA74; }
.met-auth__flash i{ flex:none; margin-top:2px; color:#C2410C; font-size:15px; }
.met-auth__flash > div{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.met-auth__flash b{ font-size:14.5px; font-weight:700; color:#7C2D12; }
.met-auth__flash span{ font-size:13px; line-height:1.55; color:#7C2D12; }
.met-auth__flash a{ color:#9A3412; font-weight:700; text-decoration:underline; }

.met-auth__pitch h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 700;
    color: var(--auth-text);
    margin: 0 0 10px;
    letter-spacing: -.01em;
    line-height: 1.15;
}
.met-auth__pitch p {
    color: var(--auth-muted);
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0 0 26px;
}

.met-auth__form { display: flex; flex-direction: column; gap: 14px; }
.met-auth__label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--auth-text);
    margin-bottom: 6px;
    letter-spacing: .02em;
}
.met-auth__input-row {
    position: relative;
    display: flex;
    align-items: center;
}
.met-auth__input-icon {
    position: absolute;
    left: 14px;
    color: var(--auth-muted);
    font-size: 14px;
    pointer-events: none;
}
.met-auth__input {
    width: 100%;
    padding: 12px 14px 12px 42px;
    font-size: 14.5px;
    font-family: inherit;
    border: 1px solid var(--auth-border);
    border-radius: 10px;
    background: #fff;
    color: var(--auth-text);
    transition: border-color .15s, box-shadow .15s;
}
.met-auth__input:focus {
    outline: none;
    border-color: var(--auth-orange);
    box-shadow: 0 0 0 4px rgba(255,85,51,.10);
}

.met-auth__row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    font-size: 13px;
}
.met-auth__check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--auth-muted);
    cursor: pointer;
}
.met-auth__check input { accent-color: var(--auth-orange); }
.met-auth__forgot {
    color: var(--auth-orange);
    text-decoration: none;
    font-weight: 600;
}
.met-auth__forgot:hover { color: var(--auth-orange-hov); }

.met-auth__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    padding: 13px 20px;
    background: var(--auth-orange);
    color: #fff;
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(255,85,51,.32);
    transition: background .15s, transform .1s, box-shadow .15s;
}
.met-auth__btn:hover { background: var(--auth-orange-hov); }
.met-auth__btn:active { transform: translateY(1px); }

.met-auth__hint {
    margin: 4px 0 0;
    color: var(--auth-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.met-auth__alt {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--auth-border);
    text-align: center;
    color: var(--auth-muted);
    font-size: 13.5px;
}
.met-auth__alt a { color: var(--auth-orange); font-weight: 600; text-decoration: none; }
.met-auth__alt a:hover { color: var(--auth-orange-hov); }

.met-auth__legal {
    margin: 16px 0 0;
    font-size: 12px;
    color: var(--auth-muted);
    text-align: center;
    line-height: 1.5;
}
.met-auth__legal a { color: var(--auth-orange); text-decoration: none; }

.met-auth__foot {
    margin-top: 32px;
    text-align: center;
    color: var(--auth-muted);
    font-size: 12px;
}
.met-auth__foot i { color: var(--auth-orange); margin-right: 4px; }

/* Lede + trust bullets (parallel to mbw-login__hero-points) */
.met-auth__hero-tag strong { color: #FFB47A; font-weight: 800; }
.met-auth__hero-lede {
    color: rgba(255,255,255,.88);
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 22px;
    max-width: 38ch;
}
.met-auth__hero-points {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.met-auth__hero-points li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.92);
    font-size: 14px;
    line-height: 1.4;
}
.met-auth__hero-points i { color: #4ADE80; font-size: 16px; flex-shrink: 0; }
.met-auth__hero-stats strong i { color: #FFB400; font-size: 18px; margin-left: 2px; }

/* Hero side */
.met-auth__hero {
    position: relative;
    background-color: var(--auth-navy);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    color: #fff;
    overflow: hidden;
}
.met-auth__hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(15,30,53,.55) 0%, rgba(15,30,53,.40) 50%, rgba(15,30,53,.80) 100%);
}
.met-auth__hero-content {
    position: relative;
    z-index: 1;
    padding: 56px 56px 64px;
    width: 100%;
}
.met-auth__hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 28px;
    color: #fff;
    backdrop-filter: blur(8px);
}
.met-auth__hero-tag i { color: #FFB47A; }
.met-auth__hero-content h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 700;
    color: #fff;
    margin: 0 0 28px;
    line-height: 1.18;
    max-width: 18ch;
}
.met-auth__hero-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}
.met-auth__hero-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--auth-orange);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 16px;
}
.met-auth__hero-author strong { display: block; color: #fff; font-size: 14px; }
.met-auth__hero-author span { display: block; color: rgba(255,255,255,.72); font-size: 12.5px; }
.met-auth__hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.18);
}
.met-auth__hero-stats > div { color: rgba(255,255,255,.85); }
.met-auth__hero-stats strong {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--auth-orange);
    line-height: 1;
}
.met-auth__hero-stats span {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.65);
}

/* Mobile — stack */
@media (max-width: 880px) {
    .met-auth { grid-template-columns: 1fr; }
    .met-auth__form-side { padding: 32px 22px 56px; }
    .met-auth__hero {
        min-height: 280px;
        order: -1;
    }
    .met-auth__hero-content { padding: 32px 24px; }
    .met-auth__hero-content h2 { font-size: 22px; max-width: none; margin-bottom: 18px; }
    .met-auth__hero-author { margin-bottom: 18px; }
    .met-auth__hero-stats { padding-top: 16px; gap: 12px; }
    .met-auth__hero-stats strong { font-size: 18px; }
}