/*
 * smj-auth-theme.css  —  SMJ Marketplace Pro
 * Auth Modal (popup) + Login/Register page theme layer.
 *
 * All design tokens are driven by CSS variables emitted from
 * SMJ_Theme_Engine (class-theme-engine.php).  Every selector here
 * respects those variables so the Theme Control panel affects the
 * frontend live.
 *
 * Layout:
 *   1. Modal overlay & animation
 *   2. Modal card / container
 *   3. Modal header (close button, title)
 *   4. Tab navigation  (Login / Register)
 *   5. Form panels
 *   6. Field / input / button / link resets (scoped to modal)
 *   7. Notices (error / success)
 *   8. Responsive tweaks
 *   9. Body-scroll lock helper
 */

/* ═══════════════════════════════════════════════════════════════════
   1. MODAL OVERLAY
   ═══════════════════════════════════════════════════════════════════ */
.smj-auth-modal {
  position         : fixed;
  inset            : 0;
  z-index          : 999999;
  display          : flex;
  align-items      : center;
  justify-content  : center;
  padding          : 16px;
  box-sizing       : border-box;
  background-color : rgba(0,0,0,.55);
  backdrop-filter  : blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity          : 0;
  visibility       : hidden;
  transition       : opacity .25s ease, visibility .25s ease;
}
.smj-auth-modal.is-open {
  opacity    : 1;
  visibility : visible;
}

/* ═══════════════════════════════════════════════════════════════════
   2. MODAL CARD
   ═══════════════════════════════════════════════════════════════════ */
.smj-auth-modal-card {
  position         : relative;
  width            : 100%;
  max-width        : var(--smj-auth-card-max-width, 440px);
  max-height       : 92vh;
  overflow-y       : auto;
  background       : var(--smj-auth-card-bg, var(--smj-card-bg, #ffffff));
  border-radius    : var(--smj-auth-card-radius, 12px);
  padding          : var(--smj-auth-card-padding, 36px);
  box-shadow       : var(--smj-auth-card-shadow, 0 8px 40px rgba(0,0,0,.18));
  border           : var(--smj-auth-card-border-width, 1px) solid
                     var(--smj-auth-card-border-color, var(--smj-border, #e5e7eb));
  box-sizing       : border-box;
  font-family      : var(--smj-auth-font-family, var(--smj-font, inherit));
  color            : var(--smj-text-primary, #23262f);
  /* Entry animation */
  transform        : translateY(24px) scale(.97);
  transition       : transform .28s cubic-bezier(.34,1.22,.64,1), opacity .25s ease;
  opacity          : 0;
}
.smj-auth-modal.is-open .smj-auth-modal-card {
  transform : translateY(0) scale(1);
  opacity   : 1;
}
/* Scrollbar in card */
.smj-auth-modal-card::-webkit-scrollbar { width: 5px; }
.smj-auth-modal-card::-webkit-scrollbar-thumb { background: var(--smj-border); border-radius: 9999px; }

/* ═══════════════════════════════════════════════════════════════════
   3. MODAL HEADER (close button + optional logo/brand)
   ═══════════════════════════════════════════════════════════════════ */
.smj-auth-modal-head {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  margin-bottom   : var(--smj-auth-section-spacing, 24px);
}
.smj-auth-modal-logo {
  font-size   : 20px;
  font-weight : 700;
  color       : var(--smj-auth-heading-color, var(--smj-text-primary));
  text-decoration: none;
  line-height : 1;
}
.smj-auth-modal-logo img {
  max-height : 36px;
  width      : auto;
  display    : block;
}
.smj-auth-modal-close {
  width           : 34px;
  height          : 34px;
  border-radius   : 9999px;
  border          : 1px solid var(--smj-border, #e5e7eb);
  background      : transparent;
  cursor          : pointer;
  display         : flex;
  align-items     : center;
  justify-content : center;
  color           : var(--smj-muted, #6b7280);
  font-size       : 18px;
  line-height     : 1;
  padding         : 0;
  transition      : background .15s, color .15s;
  flex-shrink     : 0;
}
.smj-auth-modal-close:hover {
  background : var(--smj-light-section, #f5f7fa);
  color      : var(--smj-text-primary, #23262f);
}

/* ═══════════════════════════════════════════════════════════════════
   4. TAB NAVIGATION  (Login / Register)
   ═══════════════════════════════════════════════════════════════════ */
.smj-auth-tabs {
  display         : flex;
  gap             : var(--smj-auth-tab-spacing, 6px);
  margin-bottom   : var(--smj-auth-section-spacing, 24px);
  background      : var(--smj-light-section, #f5f7fa);
  padding         : 4px;
  border-radius   : calc(var(--smj-auth-tab-radius, 8px) + 4px);
}
.smj-auth-tab {
  flex          : 1 0 auto;
  min-width     : 0;
  padding       : var(--smj-auth-tab-padding-y, 10px) var(--smj-auth-tab-padding-x, 20px);
  border-radius : var(--smj-auth-tab-radius, 8px);
  font-size     : 14px;
  font-weight   : 500;
  cursor        : pointer;
  border        : none;
  background    : transparent;
  color         : var(--smj-muted, #6b7280);
  transition    : background .18s, color .18s, box-shadow .18s;
  line-height   : 1.4;
  text-align    : center;
  white-space   : nowrap;
  box-sizing    : content-box;
}
.smj-auth-tab:hover {
  background : var(--smj-auth-tab-hover-bg, rgba(0,0,0,.05));
  color      : var(--smj-auth-tab-hover-text, var(--smj-text-primary, #23262f));
}
.smj-auth-tab.is-active,
.smj-auth-tab[aria-selected="true"] {
  background  : var(--smj-auth-tab-active-bg, var(--smj-primary, #325d2a));
  color       : var(--smj-auth-tab-active-text, #ffffff);
  box-shadow  : 0 2px 8px rgba(0,0,0,.12);
}

/* ═══════════════════════════════════════════════════════════════════
   5. FORM PANELS
   ═══════════════════════════════════════════════════════════════════ */
.smj-auth-panel { display: block; animation: smjFadeIn .2s ease; }
.smj-auth-panel--hidden { display: none !important; }

@keyframes smjFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Form title (h2 inside panel) */
.smj-auth-modal-card h2.smj-auth-form-title {
  font-size   : var(--smj-auth-heading-size, 22px);
  font-weight : var(--smj-auth-heading-weight, 700);
  color       : var(--smj-auth-heading-color, var(--smj-text-primary, #23262f));
  margin      : 0 0 var(--smj-auth-section-spacing, 24px);
  line-height : 1.2;
  font-family : var(--smj-auth-font-family, var(--smj-heading-font, inherit));
}

/* ═══════════════════════════════════════════════════════════════════
   6. FIELD / INPUT / BUTTON / LINK  (scoped to .smj-auth-modal-card)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Field wrapper ── */
.smj-auth-modal-card .tmp-field,
.smj-auth-modal-card .smj-auth-field {
  display       : flex;
  flex-direction: column;
  gap           : 5px;
  margin-bottom : var(--smj-auth-field-spacing, 18px);
}
.smj-auth-modal-card .tmp-field:last-child { margin-bottom: 0; }

/* ── Labels ── */
.smj-auth-modal-card label {
  font-size   : var(--smj-auth-label-size, 13px);
  font-weight : 500;
  color       : var(--smj-text-primary, #23262f);
  margin-bottom: 4px;
}

/* ── Inputs ── */
.smj-auth-modal-card input[type="text"],
.smj-auth-modal-card input[type="email"],
.smj-auth-modal-card input[type="password"],
.smj-auth-modal-card input[type="tel"] {
  width            : 100%;
  background-color : var(--smj-auth-input-bg, var(--smj-bg, #ffffff));
  color            : var(--smj-auth-input-text, var(--smj-text-primary, #23262f));
  border           : 1px solid var(--smj-auth-input-border-color, var(--smj-border, #e5e7eb));
  border-radius    : var(--smj-auth-input-radius, 8px);
  font-size        : var(--smj-auth-input-font-size, 14px);
  padding          : 10px 12px;
  box-sizing       : border-box;
  transition       : border-color .15s, box-shadow .15s;
  outline          : none;
  font-family      : inherit;
}
.smj-auth-modal-card input::placeholder {
  color : var(--smj-auth-input-placeholder, var(--smj-muted, #9ca3af));
}
.smj-auth-modal-card input[type="text"]:focus,
.smj-auth-modal-card input[type="email"]:focus,
.smj-auth-modal-card input[type="password"]:focus,
.smj-auth-modal-card input[type="tel"]:focus {
  border-color : var(--smj-auth-input-focus-border, var(--smj-primary, #325d2a));
  box-shadow   : 0 0 0 3px color-mix(in srgb,
                   var(--smj-auth-input-focus-border, var(--smj-primary, #325d2a)) 14%,
                   transparent);
}
/* Validation invalid */
.smj-auth-modal-card input.smj-invalid,
.smj-auth-modal-card input:invalid:not(:placeholder-shown) {
  border-color : var(--smj-auth-validation-border, #ef4444) !important;
}

/* Checkbox (remember me) */
.smj-auth-modal-card input[type="checkbox"] {
  width       : 15px;
  height      : 15px;
  accent-color: var(--smj-auth-tab-active-bg, var(--smj-primary, #325d2a));
  cursor      : pointer;
  flex-shrink : 0;
}

/* ── Full-width submit button ── */
.smj-auth-modal-card button[type="submit"],
.smj-auth-modal-card .smj-auth-submit-btn {
  display          : inline-block;
  width            : auto;
  min-width        : 100%;
  box-sizing       : content-box;
  background-color : var(--smj-auth-btn-bg, var(--smj-primary, #325d2a));
  color            : var(--smj-auth-btn-text, #ffffff);
  border           : var(--smj-auth-btn-border-width, 0px) solid
                     var(--smj-auth-btn-border-color, transparent);
  border-radius    : var(--smj-auth-btn-radius, 8px);
  padding          : var(--smj-auth-btn-padding-y, 12px) var(--smj-auth-btn-padding-x, 20px);
  font-size        : var(--smj-auth-btn-font-size, 15px);
  font-weight      : var(--smj-auth-btn-font-weight, 600);
  font-family      : inherit;
  cursor           : pointer;
  margin-top       : var(--smj-auth-btn-margin-top, 8px);
  text-align       : center;
  letter-spacing   : .01em;
  transition       : background-color .18s, color .18s, box-shadow .18s, transform .12s;
}
.smj-auth-modal-card button[type="submit"]:hover,
.smj-auth-modal-card .smj-auth-submit-btn:hover {
  background-color : var(--smj-auth-btn-hover-bg, var(--smj-primary-dk, #234020));
  color            : var(--smj-auth-btn-hover-text, #ffffff);
  transform        : translateY(-1px);
  box-shadow       : 0 4px 14px rgba(0,0,0,.15);
}
.smj-auth-modal-card button[type="submit"]:active {
  transform  : translateY(0);
  box-shadow : none;
}

/* ── Inline row (Remember me + Forgot password) ── */
.smj-auth-modal-card .tmp-field--inline {
  flex-direction  : row;
  align-items     : center;
  justify-content : space-between;
  flex-wrap       : wrap;
  gap             : 8px;
}
.smj-auth-modal-card .tmp-field--inline label {
  display     : flex;
  align-items : center;
  gap         : 7px;
  font-size   : 13px;
  cursor      : pointer;
  margin      : 0;
}

/* ── Links (forgot, register link, etc.) ── */
.smj-auth-modal-card a,
.smj-auth-modal-card .tmp-link {
  color           : var(--smj-auth-link-color, var(--smj-primary, #325d2a));
  text-decoration : none;
  font-weight     : 500;
  transition      : color .15s;
}
.smj-auth-modal-card a:hover,
.smj-auth-modal-card .tmp-link:hover {
  color           : var(--smj-auth-link-hover-color, var(--smj-primary-dk, #234020));
  text-decoration : underline;
}

/* ── Footer note (no account / already have one) ── */
.smj-auth-modal-card .smj-auth-alt,
.smj-auth-modal-card .tmp-auth-alt {
  margin     : 20px 0 0;
  font-size  : 13px;
  color      : var(--smj-muted, #6b7280);
  text-align : center;
}
.smj-auth-modal-card .smj-auth-alt a,
.smj-auth-modal-card .tmp-auth-alt a {
  font-weight : 600;
}

/* ── Divider ── */
.smj-auth-modal-card .smj-auth-divider {
  display     : flex;
  align-items : center;
  gap         : 10px;
  margin      : 16px 0;
  font-size   : 12px;
  color       : var(--smj-muted, #9ca3af);
}
.smj-auth-modal-card .smj-auth-divider::before,
.smj-auth-modal-card .smj-auth-divider::after {
  content    : '';
  flex       : 1;
  height     : 1px;
  background : var(--smj-border, #e5e7eb);
}

/* ── Two-column grid (register form) ── */
.smj-auth-modal-card .tmp-grid-2 {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : 0 16px;
}
@media (max-width: 480px) {
  .smj-auth-modal-card .tmp-grid-2 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   7. NOTICES  (error / success / validation)
   ═══════════════════════════════════════════════════════════════════ */
.smj-auth-modal-card .tmp-notice {
  padding       : 10px 14px;
  border-radius : 8px;
  font-size     : 13px;
  margin-bottom : var(--smj-auth-field-spacing, 18px);
  border        : 1px solid transparent;
}
.smj-auth-modal-card .tmp-notice p { margin: 0; }

.smj-auth-modal-card .tmp-notice--error {
  color            : var(--smj-auth-error-text, #dc2626);
  background-color : var(--smj-auth-error-bg, #fef2f2);
  border-color     : var(--smj-auth-error-text, #dc2626);
}
.smj-auth-modal-card .tmp-notice--success {
  color            : var(--smj-auth-success-text, #16a34a);
  background-color : var(--smj-auth-success-bg, #f0fdf4);
  border-color     : var(--smj-auth-success-text, #16a34a);
}

/* ═══════════════════════════════════════════════════════════════════
   8. RESPONSIVE TWEAKS
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .smj-auth-modal { padding: 12px; }
  .smj-auth-modal-card {
    padding       : 24px 20px 20px;
    border-radius : calc(var(--smj-auth-card-radius, 12px) / 1.2);
  }
  .smj-auth-modal-card h2.smj-auth-form-title { font-size: 18px; }
  .smj-auth-tabs { flex-direction: row; }
}

/* ═══════════════════════════════════════════════════════════════════
   9. BODY SCROLL LOCK
   ═══════════════════════════════════════════════════════════════════ */
body.smj-modal-open {
  overflow : hidden;
}

/* ═══════════════════════════════════════════════════════════════════
   10. PAGE-LEVEL AUTH FORM (body.smj-pg-auth) — inherit same vars
   ═══════════════════════════════════════════════════════════════════ */
body.smj-pg-auth .tmp-auth-wrap,
body.smj-pg-auth .smj-reg-wrap {
  background : var(--smj-auth-page-bg, transparent);
}
body.smj-pg-auth .tmp-auth-box,
body.smj-pg-auth .smj-reg-box {
  font-family : var(--smj-auth-font-family, var(--smj-font, inherit));
}
/* Field spacing on page forms */
body.smj-pg-auth .tmp-auth-box .tmp-field,
body.smj-pg-auth .smj-reg-wrap .tmp-field {
  margin-bottom: var(--smj-auth-field-spacing, 18px);
}
/* Section spacing on page forms */
body.smj-pg-auth .tmp-auth-box,
body.smj-pg-auth .smj-reg-box {
  background-color : var(--smj-auth-card-bg, var(--smj-card-bg, #fff));
  border-radius    : var(--smj-auth-card-radius, 12px);
  border           : var(--smj-auth-card-border-width, 1px) solid
                     var(--smj-auth-card-border-color, var(--smj-border, #e5e7eb));
  box-shadow       : var(--smj-auth-card-shadow);
  padding          : var(--smj-auth-card-padding, 36px);
  max-width        : var(--smj-auth-card-max-width, 440px);
}

/* ═══════════════════════════════════════════════════════════════════
   11. SOCIAL LOGIN BUTTONS
   ═══════════════════════════════════════════════════════════════════ */
.smj-auth-social {
  display        : flex;
  flex-direction : column;
  gap            : 10px;
  margin-bottom  : 4px;
}
.smj-auth-social--sm { flex-direction: row; gap: 8px; }

.smj-social-btn {
  display         : flex;
  align-items     : center;
  justify-content : center;
  gap             : 10px;
  padding         : 11px 16px;
  border-radius   : 8px;
  font-size       : 14px;
  font-weight     : 600;
  text-decoration : none;
  border          : 1px solid var(--smj-border, #e5e7eb);
  transition      : box-shadow .15s, transform .1s;
  white-space     : nowrap;
}
.smj-social-btn:hover {
  box-shadow  : 0 2px 10px rgba(0,0,0,.1);
  transform   : translateY(-1px);
  text-decoration: none;
}
.smj-social-btn--google   { background:#fff;  color:#3c4043; }
.smj-social-btn--facebook { background:#1877f2; color:#fff; border-color:#1877f2; }

.smj-social-btn--sm {
  flex     : 1;
  padding  : 8px 10px;
  font-size: 13px;
  gap      : 7px;
}

/* ═══════════════════════════════════════════════════════════════════
   12. INDIVIDUAL / DEALER ROLE SELECTOR (inside modal register)
   ═══════════════════════════════════════════════════════════════════ */
.smj-modal-role-selector {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : 8px;
  margin-bottom         : 16px;
}
.smj-modal-role-card {
  display         : flex;
  align-items     : center;
  gap             : 10px;
  padding         : 12px 14px;
  border-radius   : 10px;
  border          : 1.5px solid var(--smj-border, #e5e7eb);
  cursor          : pointer;
  transition      : border-color .15s, background .15s;
  background      : var(--smj-bg, #fff);
}
.smj-modal-role-card input[type="radio"] { display: none; }
.smj-modal-role-card strong { display:block; font-size:13px; font-weight:600; color:var(--smj-text-primary,#23262f); }
.smj-modal-role-card small  { display:block; font-size:11px; color:var(--smj-muted,#6b7280); margin-top:1px; }
.smj-modal-role-icon { font-size:20px; flex-shrink:0; }
.smj-modal-role-card--active {
  border-color : var(--smj-auth-tab-active-bg, var(--smj-primary, #325d2a));
  background   : color-mix(in srgb, var(--smj-auth-tab-active-bg, var(--smj-primary, #325d2a)) 6%, white);
}
@media (max-width: 420px) {
  .smj-modal-role-selector { grid-template-columns: 1fr; }
}