/* ================================================================
   SHFTX Links — Auth Page v6
   Layout: Centered card on subtle textured background
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ── Full-page override ── */
body.shftx-fullpage-auth,
body.page:has(#shftx-auth-wrap) {
  margin: 0 !important;
  padding: 0 !important;
  background: #F7F6F3 !important;
  min-height: 100vh !important;
}
body.page:has(#shftx-auth-wrap) .site-header,
body.page:has(#shftx-auth-wrap) .site-footer,
body.page:has(#shftx-auth-wrap) header,
body.page:has(#shftx-auth-wrap) footer,
body.page:has(#shftx-auth-wrap) nav,
body.page:has(#shftx-auth-wrap) #wpadminbar { display: none !important; }
body.page:has(#shftx-auth-wrap) html { margin-top: 0 !important; }
body.page:has(#shftx-auth-wrap) .entry-content,
body.page:has(#shftx-auth-wrap) .wp-block-post-content,
body.page:has(#shftx-auth-wrap) main,
body.page:has(#shftx-auth-wrap) article { padding: 0 !important; max-width: none !important; }

/* ── Root wrapper ── */
#shftx-auth-wrap {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  position: relative;
  background:
    radial-gradient(ellipse 60% 50% at 20% 10%, rgba(245,166,35,.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 90%, rgba(245,166,35,.06) 0%, transparent 60%),
    #F7F6F3;
}

/* Subtle dot grid */
#shftx-auth-wrap::before {
  content: '';
  position: fixed; inset: 0;
  background-image: radial-gradient(circle, #D4CFC4 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .45;
  pointer-events: none;
  z-index: 0;
}

/* ── Card ── */
.sauth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  background: #FFFFFF;
  border-radius: 20px;
  border: 1px solid #E8E5DF;
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 4px 16px rgba(0,0,0,.06),
    0 20px 60px rgba(0,0,0,.06);
  padding: 36px 40px 40px;
  animation: cardAppear .35s cubic-bezier(.22,1,.36,1) both;
}
@keyframes cardAppear {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* ── Brand ── */
.sauth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.sauth-logo-mark {
  width: 34px; height: 34px;
  background: #0D0D0D;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
  flex-shrink: 0;
}
.sauth-logo-name {
  font-size: 15px;
  font-weight: 700;
  color: #0D0D0D;
  letter-spacing: -.2px;
}

/* ── Tabs ── */
.sauth-tabs {
  display: flex;
  background: #F5F4F0;
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 24px;
  gap: 0;
}
.sauth-tab {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: #8C8C8C;
  cursor: pointer;
  transition: all .18s ease;
  letter-spacing: -.1px;
}
.sauth-tab.active {
  background: #FFFFFF;
  color: #0D0D0D;
  box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.04);
}
.sauth-tab:hover:not(.active) { color: #404040; }

/* ── Alert banners ── */
.sauth-alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 18px;
  line-height: 1.45;
  animation: alertIn .2s ease both;
}
@keyframes alertIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.sauth-alert svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.sauth-alert-error   { background: #FEF3F2; color: #B42318; border: 1px solid #FECDCA; }
.sauth-alert-success { background: #ECFDF3; color: #027A48; border: 1px solid #A6F4C5; }

/* ── Forms ── */
.sauth-form { display: none; flex-direction: column; gap: 0; }
.sauth-form.active { display: flex; animation: formIn .22s ease both; }
@keyframes formIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.sauth-heading { margin-bottom: 22px; }
.sauth-heading h1 {
  font-size: 21px;
  font-weight: 800;
  color: #0D0D0D;
  letter-spacing: -.5px;
  margin: 0 0 4px;
}
.sauth-heading p {
  font-size: 13.5px;
  color: #8C8C8C;
  margin: 0;
}

/* ── Fields ── */
.sauth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.sauth-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.sauth-field-row .sauth-field { margin-bottom: 0; }

.sauth-field label,
.sauth-field-row label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: #404040;
  letter-spacing: .3px;
  text-transform: uppercase;
}

/* ── Input wrapper ── */
.sauth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.sauth-input-icon {
  position: absolute;
  left: 13px;
  width: 15px; height: 15px;
  color: #ABABAB;
  pointer-events: none;
  flex-shrink: 0;
}
.sauth-input-wrap input {
  width: 100%;
  padding: 11px 14px 11px 38px;
  border: 1.5px solid #E0DDD8;
  border-radius: 10px;
  font-size: 13.5px;
  font-family: inherit;
  color: #0D0D0D;
  background: #FAFAF8;
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
  -webkit-appearance: none;
}
.sauth-input-wrap input::placeholder { color: #C8C4BC; }
.sauth-input-wrap input:hover { border-color: #C8C4BC; background: #FFFFFF; }
.sauth-input-wrap input:focus {
  border-color: #F5A623;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(245,166,35,.14);
}
.sauth-input-wrap input:focus + .sauth-toggle-pw { color: #8C8C8C; }

/* Toggle password button */
.sauth-toggle-pw {
  position: absolute;
  right: 12px;
  background: none; border: none;
  cursor: pointer; padding: 2px;
  color: #CACAC8;
  transition: color .14s;
  display: flex; align-items: center;
}
.sauth-toggle-pw:hover { color: #8C8C8C; }
.sauth-toggle-pw svg { width: 16px; height: 16px; }
.sauth-toggle-pw.visible { color: #F5A623; }

/* ── Forgot link ── */
.sauth-forgot-link {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 11.5px; font-weight: 600; color: #F5A623;
  font-family: inherit; text-transform: none; letter-spacing: 0;
  transition: opacity .14s;
}
.sauth-forgot-link:hover { opacity: .75; }

/* ── Checkbox ── */
.sauth-checkbox-row { margin-bottom: 18px; margin-top: 2px; }
.sauth-checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #595959 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.sauth-checkbox-label input[type="checkbox"] { display: none; }
.sauth-check-box {
  width: 17px; height: 17px;
  border: 1.5px solid #D4D0C8;
  border-radius: 5px;
  background: #FAFAF8;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all .14s;
}
.sauth-checkbox-label input:checked ~ .sauth-check-box {
  background: #0D0D0D;
  border-color: #0D0D0D;
}
.sauth-checkbox-label input:checked ~ .sauth-check-box::after {
  content: '';
  width: 9px; height: 6px;
  border-left: 2px solid #FFF;
  border-bottom: 2px solid #FFF;
  transform: rotate(-45deg) translateY(-1px);
  display: block;
}

/* ── Password strength ── */
.sauth-strength-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: -6px;
  margin-bottom: 14px;
  min-height: 16px;
}
.sauth-strength-bar {
  flex: 1;
  height: 3px;
  background: #EBEBEB;
  border-radius: 2px;
  overflow: hidden;
}
.sauth-strength-fill {
  height: 100%;
  border-radius: 2px;
  width: 0;
  transition: width .3s ease, background .3s ease;
}
.sauth-strength-label {
  font-size: 11px;
  font-weight: 700;
  min-width: 44px;
  text-align: right;
}

/* ── Submit button ── */
.sauth-submit-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  background: #0D0D0D;
  color: #FFFFFF;
  border: none;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: -.1px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s;
  margin-top: 4px;
  margin-bottom: 18px;
}
.sauth-submit-btn svg { width: 16px; height: 16px; transition: transform .15s; }
.sauth-submit-btn:hover {
  background: #1C1C1C;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.sauth-submit-btn:hover svg { transform: translateX(3px); }
.sauth-submit-btn:active { transform: none; box-shadow: none; }
.sauth-submit-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ── Switch hint ── */
.sauth-switch-hint {
  text-align: center;
  font-size: 13px;
  color: #8C8C8C;
  margin: 0;
}
.sauth-inline-link {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 13px; font-weight: 600; color: #0D0D0D;
  font-family: inherit;
  transition: opacity .14s;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sauth-inline-link:hover { opacity: .65; }

/* ── Responsive ── */
@media (max-width: 520px) {
  .sauth-card { padding: 28px 24px 32px; border-radius: 16px; }
  .sauth-field-row { grid-template-columns: 1fr; }
}

/* ── Branding overrides (CSS vars from SHFTX_LS_Branding::output_css_vars) ── */
.sauth-tab.active {
  color: var(--shftx-btn-bg, #0D0D0D);
}
.sauth-input-wrap input:focus {
  border-color: var(--amber, #F5A623) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber, #F5A623) 18%, transparent) !important;
}
.sauth-submit-btn {
  background: var(--shftx-btn-bg, #0D0D0D) !important;
  color: var(--shftx-btn-text, #FFFFFF) !important;
}
.sauth-forgot-link,
.sauth-inline-link {
  color: var(--shftx-link, #F5A623) !important;
}
/* Logo in auth card — sized correctly */
.sauth-brand img {
  max-height: 32px;
  width: auto;
  object-fit: contain;
  display: block;
}