/* Auth pages only (linked from views/auth/*): sign in, sign up, partners, 2FA, forgot and reset. Uses the --mm-* tokens
   from theme.css. The forms are the app's (resources/views/auth/partials), so this styles their neutral auth-* classes. */
.mm-auth { background: var(--mm-cream); padding: var(--mm-sp-6) var(--mm-sp-3) var(--mm-sp-8); }
.mm-auth-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); max-width: 1080px; margin: 0 auto; background: #FFFFFF; border-radius: var(--mm-r-card); overflow: hidden; box-shadow: 0 0 0 1px var(--mm-line), 0 24px 56px rgba(35, 28, 90, .12); }

/* The indigo panel */
.mm-auth-panel { position: relative; display: flex; flex-direction: column; gap: var(--mm-sp-2); padding: var(--mm-sp-6); color: var(--mm-on-ink); background: radial-gradient(120% 80% at 0 0, var(--mm-ink-3), transparent 60%), var(--mm-ink); }
.mm-auth-kick { margin: 0; font-size: var(--mm-fs-meta); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mm-gold); }
.mm-auth-h { margin: 0; font: 600 32px/1.15 var(--mm-font-display); letter-spacing: -.01em; color: #FFFFFF; }
.mm-auth-lead { margin: 0; font-size: 17px; line-height: 1.5; max-width: 34ch; }
.mm-auth-pts { display: grid; gap: 12px; margin: var(--mm-sp-1) 0 0; padding: 0; list-style: none; }
.mm-auth-pts li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.45; }
.mm-auth-pts svg { flex: none; margin-top: 1px; padding: 3px; width: 24px; height: 24px; border-radius: 50%; background: rgba(242, 185, 44, .16); color: var(--mm-gold); }
.mm-auth-art { margin-top: auto; padding-top: var(--mm-sp-3); }
.mm-auth-art svg { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; }
.mm-auth-panel :focus-visible { outline-color: var(--mm-gold); box-shadow: 0 0 0 3px var(--mm-ink); }

/* The white form card */
.mm-auth-card { padding: var(--mm-sp-6); min-width: 0; color: var(--mm-ink); }
.mm-auth-card :focus-visible { outline: 3px solid var(--mm-ink); outline-offset: 2px; box-shadow: 0 0 0 5px #FFFFFF; }
.mm-auth-card a { color: var(--mm-link); font-weight: 600; }
.mm-auth-card a:hover { color: var(--mm-ink); }

.auth-form { display: grid; gap: 20px; margin: 0; }
.auth-field { display: grid; gap: 6px; min-width: 0; margin: 0; }
.auth-label { margin: 0; font-size: 15px; font-weight: 700; color: var(--mm-ink); }
.auth-hint { margin: 0; font-size: var(--mm-fs-sm); line-height: 1.45; color: var(--mm-muted); }
.auth-input { display: block; width: 100%; max-width: none; min-height: var(--mm-ctl); padding: 10px 14px; font: 500 16px/1.4 var(--mm-font-body); color: var(--mm-ink); background: #FFFFFF; border: 1.5px solid #7C76AB; border-radius: var(--mm-r-ctl); transition: border-color 150ms var(--mm-eo), box-shadow 150ms var(--mm-eo); }
.auth-input--area { min-height: 6rem; resize: vertical; }
.auth-input:hover { border-color: var(--mm-ink-line); }
.auth-input:focus-visible { border-color: var(--mm-ink); outline: 3px solid var(--mm-ink); outline-offset: 1px; box-shadow: none; }
.auth-input[aria-invalid=true] { border-color: #B42318; }
.auth-error { display: flex; gap: 6px; align-items: baseline; margin: 0; font-size: var(--mm-fs-sm); font-weight: 600; color: #B42318; }
.auth-error::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #B42318; color: #FFFFFF; font-size: 12px; font-weight: 800; transform: translateY(2px); }

.auth-check { display: flex; gap: 12px; align-items: center; min-height: var(--mm-ctl); margin: 0; font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--mm-ink); cursor: pointer; }
.auth-check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--mm-ink); cursor: pointer; }
.auth-check a { font-weight: 600; }
.auth-field .auth-check { align-items: flex-start; padding-top: 12px; }
.auth-field .auth-check input { margin-top: 0; }

.auth-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: var(--mm-ctl); margin: 4px 0 0; padding: 0 var(--mm-sp-3); border: 0; border-radius: var(--mm-r-ctl); font: 700 16px/1.2 var(--mm-font-body); background: var(--mm-ink); color: #FFFFFF; text-decoration: none; cursor: pointer; transition: transform 200ms var(--mm-eo), box-shadow 200ms var(--mm-eo), background-color 150ms var(--mm-eo); }
.auth-btn:hover { background: var(--mm-ink-2); color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(35, 28, 90, .28); }
.auth-btn:active { transform: none; }

/* Role choice (partner sign-up): two selectable cards */
.auth-roles { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-roles > legend { grid-column: 1 / -1; padding: 0 0 6px; }
.auth-roles > .auth-error { grid-column: 1 / -1; }
.auth-role { position: relative; display: flex; gap: 12px; align-items: flex-start; min-height: 64px; margin: 0; padding: 14px 16px; font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--mm-ink); background: #FFFFFF; border: 1.5px solid #7C76AB; border-radius: var(--mm-r-in); cursor: pointer; transition: border-color 150ms var(--mm-eo), background-color 150ms var(--mm-eo); }
.auth-role:hover { border-color: var(--mm-ink-line); background: var(--mm-surface); }
.auth-role input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--mm-ink); cursor: pointer; }
.auth-role strong { display: block; font-size: 16px; font-weight: 700; }
.auth-role:has(input:checked) { border-color: var(--mm-ink); background: var(--mm-lilac); box-shadow: inset 0 0 0 1.5px var(--mm-ink); }
.auth-role:has(input:focus-visible) { outline: 3px solid var(--mm-ink); outline-offset: 2px; }
.auth-role input:focus-visible { outline: 0; box-shadow: none; }
.auth-form:has(input[name=role][value=publisher]:checked) .auth-field--advertiser{display:none}
.auth-form:has(input[name=role][value=advertiser]:checked) .auth-field--publisher{display:none}

/* Status messages (flashes and the form error) */
.auth-status { margin: 0 0 20px; padding: 12px 16px; border-radius: var(--mm-r-ctl); font-size: 15px; font-weight: 600; line-height: 1.45; color: #05603A; background: #ECFDF3; border: 1px solid #ABEFC6; }
.auth-status--error { color: #B42318; background: #FEF3F2; border-color: #FECDCA; }

/* Social sign-in */
.auth-social { display: grid; gap: 12px; margin-top: 24px; }
.auth-social-divider { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; font-size: var(--mm-fs-sm); color: var(--mm-muted); }
.auth-social-divider::before, .auth-social-divider::after { content: ""; flex: 1; height: 1px; background: var(--mm-line); }
.mm-auth-card .auth-btn--social { margin: 0; background: #FFFFFF; color: var(--mm-ink); box-shadow: inset 0 0 0 1.5px #7C76AB; }
.mm-auth-card .auth-btn--social:hover { color: var(--mm-ink); background: var(--mm-surface); box-shadow: inset 0 0 0 1.5px var(--mm-ink); }

/* Cross-links under the form */
.auth-alt { display: grid; gap: 4px; margin: 28px 0 0; padding: 20px 0 0; list-style: none; border-top: 1px solid var(--mm-line); font-size: 15px; color: var(--mm-muted); }
.auth-alt li { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; min-height: 40px; }
.auth-alt a { display: inline-flex; align-items: center; min-height: var(--mm-ctl); margin: -4px 0; }

@media (max-width: 1023.98px) {
    .mm-auth-panel, .mm-auth-card { padding: var(--mm-sp-4); }
    .mm-auth-h { font-size: 28px; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
    /* The form column is ~330-430px here: a narrower panel, and the role cards one per row so their text keeps 2 lines. */
    .mm-auth-in { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
    .auth-roles { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .auth-role { gap: 10px; min-height: 56px; padding: 12px 14px; font-size: 14px; }
    .auth-role strong { font-size: 15px; }
}
@media (max-width: 767.98px) {
    .mm-auth { padding: var(--mm-sp-2) var(--mm-sp-2) var(--mm-sp-6); }
    .mm-auth-in { grid-template-columns: minmax(0, 1fr); border-radius: var(--mm-r-in); }
    .mm-auth-panel { gap: 8px; padding: 20px var(--mm-sp-3); }
    .mm-auth-h { font-size: 24px; }
    .mm-auth-lead { font-size: 15px; }
    .mm-auth-pts, .mm-auth-art { display: none; }
    .mm-auth-card { padding: var(--mm-sp-3) 20px; }
    .auth-roles { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .auth-btn, .auth-input, .auth-role { transition: none; }
    .auth-btn:hover { transform: none; }
    .mm-auth-art svg * { animation: none !important; }
}
.mm-auth-card .auth-btn--google { gap: 10px; border-radius: 999px; background: #FFFFFF; color: #1F1F1F; font: 500 15px/1.2 var(--mm-font-body); box-shadow: inset 0 0 0 1px #747775; }
.mm-auth-card .auth-btn--google:hover { background: #F1F3F4; color: #1F1F1F; box-shadow: inset 0 0 0 1px #747775; transform: none; }
.auth-btn--google svg { flex: none; }