/* Shared sign-in/sign-up widget, used by every homepage template via
   #auth-widget-root. Uses --accent-color / --accent-color-2 (aliases each
   template defines once near its own :root, pointing at whatever accent
   variable that template already uses) instead of hardcoding a color name,
   so this one file works across differently-themed templates. Falls back to
   a sane default if a template forgets the alias. */

.acct-wrap{position:relative;}
.acct-btn{
  display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);
  color:var(--text);border-radius:8px;padding:8px 16px 8px 10px;font-size:0.85rem;font-weight:600;
  cursor:pointer;transition:border-color .2s ease;
}
.acct-btn:hover,.acct-btn.open{border-color:var(--accent-color,#33C5E7);}
.acct-btn i.icon{margin:0;font-size:1.3rem;color:var(--accent-color,#33C5E7);}
.acct-menu{
  position:absolute;top:calc(100% + 10px);right:0;min-width:190px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,0.5);
  padding:6px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;
  transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:40;
}
.acct-wrap:hover .acct-menu,.acct-wrap:focus-within .acct-menu,.acct-menu.open{
  opacity:1;visibility:visible;transform:translateY(0);
}
.acct-menu button{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;
  color:var(--text);font-size:0.86rem;font-family:var(--sans);padding:10px 12px;border-radius:7px;cursor:pointer;
}
.acct-menu button:hover{background:var(--panel-2);color:#fff;}
.acct-menu button i.icon{margin:0;width:18px;color:var(--text-dim);}
.acct-menu .signed-in-email{font-size:0.75rem;color:var(--text-dim);padding:8px 12px 4px;border-bottom:1px solid var(--line);margin-bottom:4px;}

/* ================= Auth scrim + sliding card ================= */
.scrim{position:fixed;inset:0;background:rgba(4,8,12,0.88);backdrop-filter:blur(4px);z-index:100;
  display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;
  transition:opacity .22s ease,visibility .22s;padding:20px;}
.scrim.open{opacity:1;visibility:visible;}
.auth-shell{position:relative;}
.scrim-close{position:absolute;top:-42px;right:0;background:none;border:none;color:var(--text-dim);font-size:1.6rem;line-height:1;cursor:pointer;padding:6px;}
.scrim-close:hover{color:var(--text);}
.auth-mark{display:flex;flex-direction:column;align-items:center;gap:0.7rem;margin-bottom:1.6rem;}
.auth-mark svg{width:40px;height:40px;}
.auth-mark .name{font-weight:600;font-size:0.98rem;color:var(--text);}

.auth-viewport{width:340px;max-width:calc(90vw - 4px);overflow:hidden;border-radius:12px;}
.auth-track{display:flex;transition:transform .38s cubic-bezier(.4,0,.2,1);}
.pane{width:340px;max-width:calc(90vw - 4px);flex:none;padding:32px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 14px 46px rgba(0,0,0,0.4);}
@media (max-width:400px){.pane{padding:24px;}}

.field-wrap{position:relative;margin-top:16px;}
.field-wrap:first-child{margin-top:0;}
.field-wrap .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-dim);pointer-events:none;margin:0;width:auto;}
#auth-widget-root ~ .scrim input[type=text],
#auth-widget-root ~ .scrim input[type=email],
#auth-widget-root ~ .scrim input[type=password],
.scrim input[type=text],.scrim input[type=email],.scrim input[type=password]{
  width:100%;padding:10px 12px 10px 36px;border-radius:8px;border:1px solid var(--line);
  background:var(--bg);color:var(--text);font-size:14px;outline:none;transition:background-color .3s ease,border-color .3s ease;font-family:var(--sans);
}
.scrim input::placeholder{color:var(--text-dim);opacity:0.7;}
.scrim input:focus{border-color:var(--accent-color-2,var(--accent-color,#029FDF));}
.scrim input.st-empty{background-color:rgba(148,163,184,0.08);}
.scrim input.st-filled{background-color:rgba(244,120,32,0.15);border-color:rgba(244,120,32,0.35);}
.scrim input.st-success{background-color:rgba(47,191,113,0.25);border-color:var(--ok);}
.scrim input.st-error{background-color:rgba(229,72,77,0.25);border-color:var(--danger);}
.scrim input:-webkit-autofill,.scrim input:-webkit-autofill:hover,.scrim input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);-webkit-box-shadow:0 0 0px 1000px var(--bg) inset;box-shadow:0 0 0px 1000px var(--bg) inset;transition:background-color 5000s ease-in-out 0s;
}
.check-row{display:flex;align-items:flex-start;gap:8px;margin-top:16px;font-size:0.8rem;color:var(--text-dim);}
.check-row input{width:auto;padding:0;margin-top:2px;}
.auth-error{margin-top:14px;font-size:13px;color:var(--danger);display:none;}
.auth-msg{margin-top:14px;font-size:13px;min-height:1.1em;}
.auth-msg.ok{color:var(--ok);}
.switch-line{margin:18px 0 0;text-align:center;font-size:0.82rem;color:var(--text-dim);}
.switch-line a{cursor:pointer;color:var(--accent-color,#33C5E7);}

.submit-btn{width:100%;margin-top:20px;height:44px;border-radius:8px;cursor:pointer;border:2px solid var(--gray);
  background:var(--gray);color:#fff;font-weight:600;font-size:0.9rem;font-family:var(--sans);
  transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease;}
.submit-btn:disabled{cursor:default;}
@keyframes strokeMove{0%{background-position:0 0,0% 0;}100%{background-position:0 0,100% 0;}}
.submit-btn.btn-active{border-color:transparent;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,
    linear-gradient(90deg,var(--ok),var(--accent-color-2,var(--accent-color,#029FDF)),var(--accent-color,#33C5E7),var(--ok)) border-box;
  background-size:100% 100%,300% 100%;animation:strokeMove 1.6s linear infinite;color:var(--text);}
.submit-btn.btn-active:hover{background:rgba(2,159,223,0.35);border-color:var(--accent-color-2,var(--accent-color,#029FDF));box-shadow:0 0 16px rgba(2,159,223,0.55);color:#fff;}
@keyframes cardBounce{0%{transform:scale(1);}15%{transform:scale(1.02);}32%{transform:scale(0.991);}48%{transform:scale(1.012);}64%{transform:scale(0.997);}80%{transform:scale(1.005);}92%{transform:scale(0.999);}100%{transform:scale(1);}}
.pane.bounce{animation:cardBounce 0.9s cubic-bezier(.34,1.4,.64,1) both;}
@keyframes cardShake{0%,100%{transform:translateX(0);}15%{transform:translateX(-4px);}30%{transform:translateX(4px);}45%{transform:translateX(-3px);}60%{transform:translateX(3px);}75%{transform:translateX(-1.5px);}90%{transform:translateX(1.5px);}}
.pane.shake{animation:cardShake 0.45s ease both;}
@media (prefers-reduced-motion:reduce){.pane.bounce,.pane.shake,.submit-btn.btn-active,.auth-track{animation:none;transition:none;}}

.success-box{font-size:0.88rem;text-align:center;padding:0.6rem 0;}

/* ================= Soft Touch email promotion ================= */
.badge-recommended{
  display:inline-block;background:transparent;border:1px solid var(--accent-color,#33C5E7);
  color:var(--accent-color,#33C5E7);font-size:0.62rem;font-weight:700;letter-spacing:0.03em;
  text-transform:uppercase;padding:2px 7px;border-radius:999px;margin-left:8px;vertical-align:middle;
}
.submit-btn.secondary-cta{
  background:transparent;border:2px solid var(--accent-color,#33C5E7);color:var(--accent-color,#33C5E7);
  display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;
}
.submit-btn.secondary-cta:hover{background:rgba(51,197,231,0.1);}
.st-perks{list-style:none;margin:18px 0 0;padding:0;font-size:0.78rem;color:var(--text-dim);}
.st-perks li{padding-left:14px;position:relative;margin-top:6px;}
.st-perks li::before{content:"-";position:absolute;left:0;color:var(--accent-color,#33C5E7);}
.st-perks li:first-child{margin-top:0;}
.st-inline-form{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.toggle-row{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:0.8rem;color:var(--text-dim);}
.toggle-row input{width:auto;}