/* TrioEdX — Unified Auth (signup/login)
   Same split-screen pattern as page-auth.php/login-page.php, rebuilt as a self-contained
   stylesheet since this plugin now owns the actual form markup and behavior.
*/
:root{
  --tnb-primary:#630320;
  --tnb-logo-red:#8c1627;
  --tnb-light:#ebd7da;
  --tnb-dark:#18130e;
  --tnb-gray-50:#f9fafb;
  --tnb-gray-100:#f3f4f6;
  --tnb-gray-200:#e5e7eb;
  --tnb-gray-300:#d1d5db;
  --tnb-gray-500:#6b7280;
  --tnb-gray-700:#374151;
  --tnb-radius:10px;
  --tnb-shadow:0 20px 60px rgba(99,3,32,.12);
  --font-display:'M PLUS 2',Arial,sans-serif;
  --font-body:'M PLUS 2',Arial,sans-serif;
}

.tnb-auth-page{font-family:var(--font-body) !important;color:var(--tnb-gray-700);display:flex;min-height:100vh;margin:0;
  -webkit-tap-highlight-color:transparent;}
.tnb-auth-page *{box-sizing:border-box;font-family:var(--font-body) !important;}
.tnb-auth-page button{font-family:var(--font-body) !important;cursor:pointer;-webkit-tap-highlight-color:transparent;}

/* Every clickable element in this page gets its OWN explicit focus/active treatment below —
   this blanket rule only removes the browser/theme default (frequently a blue outline or
   highlight, which is what was showing before), it never leaves focus fully invisible. */
.tnb-auth-page button:focus,
.tnb-auth-page button:active,
.tnb-auth-page a:focus,
.tnb-auth-page a:active,
.tnb-auth-page input:active{
  outline:none;
  background-color:inherit;
}

.tnb-auth-brand{width:42%;background:linear-gradient(145deg,var(--tnb-primary) 0%,var(--tnb-logo-red) 50%,#a01830 100%);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:40px;}
.tnb-auth-brand-inner{position:relative;z-index:2;text-align:center;max-width:380px;color:#fff;}
.tnb-auth-brand-name{font-family:var(--font-display) !important;font-size:28px;font-weight:700;margin:0 0 10px;}
.tnb-auth-brand-tagline{font-size:15px;color:rgba(255,255,255,.85);margin:0 0 32px;}
.tnb-auth-brand-features{display:flex;flex-direction:column;gap:12px;text-align:left;}
.tnb-auth-brand-feature{padding:12px 16px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);
  border-radius:10px;font-size:13.5px;}

.tnb-auth-form-panel{flex:1;display:flex;align-items:center;justify-content:center;background:#fff;padding:40px 20px;}
.tnb-auth-form-inner{width:100%;max-width:400px;}
.tnb-eyebrow{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--tnb-primary);margin:0 0 8px;}
.tnb-auth-form-title{font-family:var(--font-display) !important;font-size:28px;font-weight:700;color:var(--tnb-dark);margin:0 0 8px;}
.tnb-auth-form-subtitle{font-size:14px;color:var(--tnb-gray-500);margin:0 0 24px;line-height:1.5;}

.tnb-auth-err{background:#fef2f2;border-left:4px solid #dc2626;color:#dc2626;border-radius:0 var(--tnb-radius) var(--tnb-radius) 0;
  padding:12px 16px;font-size:13px;margin-bottom:18px;}
.tnb-auth-ok{background:#e6f6ec;border-left:4px solid #16a34a;color:#15803d;border-radius:0 var(--tnb-radius) var(--tnb-radius) 0;
  padding:12px 16px;font-size:13px;margin-bottom:18px;}

.sso-stack{display:flex;flex-direction:column;gap:10px;margin-bottom:8px;}
.sso-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;border:1.5px solid var(--tnb-gray-300) !important;
  border-radius:var(--tnb-radius);background:#fff !important;font-size:14px;font-weight:600;color:var(--tnb-gray-700) !important;
  transition:border-color .15s,box-shadow .15s;}
.sso-btn:hover,.sso-btn:focus,.sso-btn:active{
  border-color:var(--tnb-primary) !important;background:#fff !important;color:var(--tnb-gray-700) !important;}
.sso-btn:focus-visible{box-shadow:0 0 0 3px rgba(99,3,32,.15);}
.sso-btn:active{background:var(--tnb-gray-50) !important;}
.sso-mark{width:18px;height:18px;flex-shrink:0;}
.sso-hint{font-size:12px;color:var(--tnb-gray-500);text-align:center;margin:0 0 20px;}

.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--tnb-gray-500);font-size:12.5px;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--tnb-gray-200);}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-row{margin-bottom:16px;}
.form-row label{display:block;font-size:13px;font-weight:600;color:var(--tnb-gray-700);margin-bottom:6px;}
.form-row .req{color:var(--tnb-primary);}
.form-row .hint{font-size:11.5px;color:var(--tnb-gray-500);margin:6px 0 0;line-height:1.4;}
.form-row input[type="text"],.form-row input[type="email"],.form-row input[type="password"]{
  width:100%;font-family:var(--font-body) !important;font-size:14px;color:var(--tnb-gray-700);background:var(--tnb-gray-50);
  border:1.5px solid var(--tnb-gray-300);border-radius:var(--tnb-radius);padding:11px 14px;}
.form-row input:focus{outline:none;border-color:var(--tnb-primary);background:#fff;box-shadow:0 0 0 3px rgba(99,3,32,.1);}

/* Password visibility toggle — an eye icon flush against the input's right edge, not a text
   label. Two SVGs (open eye = "currently hidden, click to show"; eye-with-slash = "currently
   shown, click to hide") swapped via the .is-visible class the JS toggles. */
.pwd-wrap{position:relative;}
.pwd-wrap input{padding-right:44px !important;}
.pwd-toggle{position:absolute !important;right:4px !important;top:50% !important;transform:translateY(-50%) !important;
  background:none !important;border:none !important;width:34px !important;height:34px !important;min-width:34px !important;
  max-width:34px !important;padding:0 !important;margin:0 !important;display:flex !important;align-items:center !important;
  justify-content:center !important;border-radius:8px;color:var(--tnb-gray-500) !important;line-height:1 !important;
  transition:color .15s,background .15s;box-shadow:none !important;}
.pwd-toggle:hover,.pwd-toggle:focus,.pwd-toggle:active{
  color:var(--tnb-primary) !important;background:var(--tnb-gray-100) !important;}
.pwd-toggle:focus-visible{box-shadow:0 0 0 2px rgba(99,3,32,.2) !important;}
.pwd-toggle svg{width:19px !important;height:19px !important;display:inline-block !important;flex-shrink:0;}
.pwd-toggle .eye-open{display:block !important;}
.pwd-toggle .eye-closed{display:none !important;}
.pwd-toggle.is-visible .eye-open{display:none !important;}
.pwd-toggle.is-visible .eye-closed{display:block !important;}

.captcha-mount{margin:6px 0 18px;}

.btn-primary{font-size:14.5px;font-weight:600;background:var(--tnb-primary) !important;color:#fff !important;
  border:2px solid var(--tnb-primary) !important;border-radius:var(--tnb-radius);padding:12px 22px;
  box-shadow:0 4px 15px rgba(99,3,32,.25);transition:opacity .2s,transform .15s;}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{
  background:var(--tnb-primary) !important;color:#fff !important;border-color:var(--tnb-primary) !important;}
.btn-primary:hover{opacity:.92;transform:translateY(-1px);}
.btn-primary:focus-visible{box-shadow:0 0 0 3px rgba(99,3,32,.3);}
.btn-primary:active{opacity:.85;transform:translateY(0);}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none;}
.btn-primary.block{width:100%;}

.auth-alt-row{text-align:center;margin-top:16px;}
.auth-alt-link{background:none !important;border:none !important;color:var(--tnb-primary) !important;font-size:13px;
  font-weight:600;text-decoration:underline;}
.auth-alt-link:hover,.auth-alt-link:focus,.auth-alt-link:active{
  background:none !important;color:var(--tnb-primary) !important;opacity:.8;}
.auth-alt-link:focus-visible{outline:2px solid rgba(99,3,32,.3);outline-offset:2px;}
.auth-alt-link.is-loading{display:inline-flex !important;align-items:center;gap:8px;text-decoration:none !important;
  cursor:default;opacity:.75;}
.auth-alt-link.is-loading::before{content:'';width:13px;height:13px;border:2px solid rgba(99,3,32,.25);
  border-top-color:var(--tnb-primary);border-radius:50%;animation:tnb-spin .7s linear infinite;flex-shrink:0;}
@keyframes tnb-spin{to{transform:rotate(360deg);}}
.magic-link-panel{margin-top:14px;padding:16px;background:var(--tnb-gray-50);border-radius:var(--tnb-radius);}

.auth-foot{text-align:center;font-size:13px;color:var(--tnb-gray-500);margin-top:20px;}
.auth-foot a{color:var(--tnb-primary);font-weight:600;text-decoration:none;}
.auth-foot a:hover{text-decoration:underline;}

.auth-icon-hero{font-size:48px;text-align:center;margin-bottom:16px;}
.verify-note{font-size:13px;color:var(--tnb-gray-500);text-align:center;margin-top:16px;}

/* Sign-in pages: header only, no footer, and the split screen fills the rest of the window. */
body.tnb-auth-screen .elementor-location-footer,
body.tnb-auth-screen #colophon,
body.tnb-auth-screen .site-footer{display:none !important;}
body.tnb-auth-screen .tnb-auth-page{min-height:calc(100vh - 90px);}
body.tnb-auth-screen.admin-bar .tnb-auth-page{min-height:calc(100vh - 122px);}
body.tnb-auth-screen #content > .ast-container,
body.tnb-auth-screen .site-content > .ast-container{max-width:100%;padding:0;}
body.tnb-auth-screen .entry-header{display:none;}

/* Theme/Elementor link and button sizes (18px) were overriding ours — keep every text link the
   same size as the sentence it sits in. */
.tnb-auth-page a,
.tnb-auth-page .auth-alt-link{font-size:inherit !important;line-height:inherit !important;}
.tnb-auth-page .auth-alt-row,
.tnb-auth-page .auth-foot,
.tnb-auth-page .verify-note{font-size:13px !important;line-height:1.6 !important;}
.tnb-auth-page .auth-foot a{font-weight:700;text-decoration:none !important;}
.tnb-auth-page .auth-foot a:hover{text-decoration:underline !important;}
.tnb-auth-page .auth-alt-link{padding:0 !important;margin:0 !important;box-shadow:none !important;font-weight:600;}
.tnb-auth-page .tnb-auth-form-title{font-size:28px !important;line-height:1.2 !important;}

@media(max-width:820px){
  .tnb-auth-page{flex-direction:column;}
  .tnb-auth-brand{width:100%;padding:30px 24px;}
  .form-grid{grid-template-columns:1fr;}
}

/* password requirements checklist (signup) */
.tnb-auth-page .pwd-rules{list-style:none;margin:-6px 0 16px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:5px 16px;
  font-size:12.5px;line-height:1.35;color:var(--tnb-gray-500);}
.tnb-auth-page .pwd-rules[hidden]{display:none;}
.tnb-auth-page .pwd-rules li{position:relative;padding-left:20px;transition:color .15s;}
.tnb-auth-page .pwd-rules li::before{content:'';position:absolute;left:0;top:2px;width:12px;height:12px;border-radius:50%;
  border:1.5px solid var(--tnb-gray-300);background:#fff;box-sizing:border-box;transition:all .15s;}
.tnb-auth-page .pwd-rules li.ok{color:#15803d;}
.tnb-auth-page .pwd-rules li.ok::before{border-color:#16a34a;background:#16a34a;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5'/%3E%3C/svg%3E");
  background-size:10px 10px;background-position:center;background-repeat:no-repeat;}
@media (max-width:520px){.tnb-auth-page .pwd-rules{grid-template-columns:1fr;}}