/* 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);}

/* Language switcher (2026-08-25 user request) — mounted by
   portal-shared/visitorLanguage.js into #visitorLangSwitch (added inside
   .auth-shell, see authWidget.js's SCRIM_HTML); the switcher's own styling
   lives in portal-shared/visitorLanguage.css (shared with the share/request
   landing pages), loaded dynamically by authWidget.js alongside it. This
   block only overrides the things that differ inside this popup: position
   and three color tokens visitorLanguage.css assumes exist
   (--panel-2/--blue/--cyan) that a homepage template may not define, since
   authWidget.css otherwise only ever relies on --accent-color/
   --accent-color-2 (see this file's own top-of-file comment) — aliased here
   so the switcher still looks right regardless of which template loads it.
   z-index:101 (not visitorLanguage.css's default 3) since the desktop rule
   below switches this to position:fixed, which escapes .auth-shell's own
   stacking context and needs to clear .scrim's own z-index:100 backdrop to
   stay visible over it. */
.scrim #visitorLangSwitch{
  z-index:101;
  --panel-2:var(--panel);
  --blue:var(--accent-color-2,var(--accent-color,#029FDF));
  --cyan:var(--accent-color,#33C5E7);
}
.scrim #visitorLangSwitch .vls-trigger{font-family:var(--sans);}
/* Desktop (2026-08-26 user request): sit at the viewport's top-right corner,
   matching the un-overridden placement visitorLanguage.css's own default
   #visitorLangSwitch rule already gives share.html/request.html — fixed to
   the viewport, not anchored to the card, so it reads the same across every
   page that uses this switcher. Previously anchored above the card
   (top-left, then centered); moved off the card entirely now that "same
   corner as share/request" was the actual ask. left:auto/transform:none
   clear the centering rule below on wide viewports where both could
   otherwise apply. */
@media (min-width:481px){
  .scrim #visitorLangSwitch{
    position:fixed;top:14px;right:14px;left:auto;transform:none;
  }
}
/* Mobile: left exactly as the previous pass set it (anchored above the card,
   centered, with the extra top gap below to keep it clear of the viewport's
   top edge) — user explicitly asked not to touch mobile placement this
   round. */
@media (max-width:480px){
  .scrim #visitorLangSwitch{
    position:absolute;top:-42px;left:50%;transform:translateX(-50%);
  }
  /* The trigger above is centered via left:50%/translateX(-50%), but
     visitorLanguage.css's own .vls-panel rule anchors with right:0 (correct
     for the viewport-corner placement share.html/request.html use, where the
     trigger sits flush in a corner). Under a centered trigger that makes the
     panel hang off to the left instead of opening under the button — center
     it here too so it stays under the (also centered) trigger. */
  .scrim #visitorLangSwitch .vls-panel{
    right:auto;left:50%;transform:translateX(-50%);
  }
  .scrim{padding-top:60px;}
}
.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 stays overflow:hidden on both axes — it wraps .auth-track,
   which holds EVERY pane at once side by side (for the slide animation), so
   .auth-track's own height is always the tallest of all panes regardless of
   which one is active. An overflow-y:auto here (tried 2026-09-20, reverted
   same day) therefore showed a permanent scrollbar no matter which pane was
   showing, because the ever-present taller siblings — not the visible
   pane's own content — were what technically overflowed it. Scrolling only
   makes sense per-pane (below), not at this wrapper. */
.auth-viewport{width:340px;max-width:calc(90vw - 4px);overflow:hidden;border-radius:12px;transition:height .38s cubic-bezier(.4,0,.2,1);}
.auth-track{display:flex;align-items:flex-start;transition:transform .38s cubic-bezier(.4,0,.2,1);}
/* 2026-09-20 user request: a pane whose own content is genuinely taller than
   the screen (e.g. a short phone with the keyboard open) needs to scroll
   internally instead of silently clipping past .auth-viewport's height —
   that was the actual "button goes down to the invisible area" bug. Capped
   to the space .scrim's own 20px padding leaves, same as every other pane;
   in the ordinary case a pane's natural height is well under that cap, so
   this never engages and no scrollbar ever shows — see the scrollbar
   styling below for what it looks like on the rare pane that does need it. */
.pane{width:340px;max-width:calc(90vw - 4px);max-height:calc(100vh - 40px);overflow-y:auto;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;}}
/* Slim rounded-pill scrollbar, matching the thin/rounded treatment already
   used elsewhere in the app for scrollable lists (portal-files.html's
   .pfe-cs-list) rather than the browser's default chunky one — only ever
   rendered on the rare pane tall enough to actually need it. */
.pane{scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
.pane::-webkit-scrollbar{width:6px;}
.pane::-webkit-scrollbar-track{background:transparent;}
.pane::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;}
.pane::-webkit-scrollbar-thumb:hover{background:var(--text-dim);}

.field-wrap{position:relative;margin-top:18px;}
.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]{
  /* 2026-09-20 user request: was rgba(244,120,32,0.55) (vibrant orange) — too
     loud as a resting-state border. Switched to var(--line) (#22303c), the
     same near-background neutral already used for every other subtle border
     on this page (.acct-btn, .pane, etc.) — a real 1px border still exists
     (avoids the crisp antialiasing artifact some browsers render where a
     rounded corner has literally no border), it just now reads as
     near-invisible instead of drawing attention. */
  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));}
/* 2026-09-04 user request: a light, deliberate border once a field actually
   has content — :not(:placeholder-shown) catches this from typed input as
   well as autofill, purely in CSS, no JS state-tracking needed. */
.scrim input:not(:placeholder-shown){border-color:rgba(255,255,255,0.16);}
.scrim input.st-empty{background-color:rgba(148,163,184,0.08);}
/* 2026-09-20 user request: dropped this rule's own border-color (was
   rgba(244,120,32,0.35)) — it sits after :not(:placeholder-shown) above in
   source order, so on equal specificity it was winning and putting the
   orange stroke right back on any field .st-filled applies to (real typed
   input), while a field only autofilled/cache-filled (input event not
   always fired, so .st-filled never applied) correctly showed the
   near-invisible fallback above. Removing the override here means every
   filled field — typed or autofilled — now consistently falls through to
   that same near-invisible border, typed and autofilled alike. Background
   tint (the "still in progress" cue) is unchanged. */
.scrim input.st-filled{background-color:rgba(244,120,32,0.15);}
.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);}
/* 2026-09-04 user report: a rounded-corner "noise" seam, only ever visible
   once a field is actually browser-autofilled, never on an empty/typed one
   — the signature of this exact technique below (a huge inset box-shadow
   standing in for the real background so Chrome's native yellow autofill
   color never shows) not always clipping cleanly to the input's own
   border-radius at the corner arc in some browsers/zoom levels.
   background-clip keeps the shadow's paint inside the border box precisely,
   and redeclaring border-radius/border here (autofill styling can otherwise
   repaint over a plain input's border in a slightly different pass) closes
   the gap that let the corner seam show through. */
.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;
  background-clip:padding-box;-webkit-background-clip:padding-box;border-radius:8px;border:1px solid rgba(255,255,255,0.16);
}
.check-row{display:flex;align-items:flex-start;gap:8px;margin-top:18px;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:18px;height:44px;border-radius:8px;cursor:pointer;border:1px 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;}

.reset-warn{border:1px solid var(--danger,#e5484d);border-radius:8px;background:rgba(229,72,77,0.08);
  padding:0.7rem 0.9rem;margin-bottom:16px;font-size:0.78rem;line-height:1.55;color:var(--text-dim);}
.reset-warn strong{color:var(--text);}

/* Reset-password pane (2026-09-04 user request) — with the recovery-key
   block and warning box both hidden (the common case: no Generated key on
   file), this pane is just two fields and a button, so the shared
   .field-wrap/.submit-btn 18px rhythm reads as cramped/narrow on its own —
   wider breathing room here specifically, other panes untouched. */
#paneReset .field-wrap{margin-top:28px;}
#paneReset .field-wrap:first-child{margin-top:0;}
#paneReset .submit-btn{margin-top:28px;}

/* ================= Soft Touch email promotion ================= */
.badge-recommended{
  display:inline;background:none;border:none;color:var(--text-dim);font-size:0.72rem;
  font-weight:400;letter-spacing:normal;text-transform:none;padding:0;margin-left:6px;
  vertical-align:middle;opacity:0.8;
}
.submit-btn.secondary-cta{
  background:var(--panel);border:1px solid var(--line);color:var(--text-dim);font-weight:500;
  display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.submit-btn.secondary-cta:hover{border-color:var(--accent-color,#33C5E7);color:var(--text);}
.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);}
/* #fpEmailForm replaces krSection outright (see authWidget.js's paneForgot toggle
   handlers) instead of appearing stacked below other content like siSoftTouchForm
   does, so the shared .st-inline-form separator line has nothing above it to
   separate from here and just reads as a stray line. */
#fpEmailForm{margin-top:0;padding-top:0;border-top:none;}
.toggle-row{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:0.8rem;color:var(--text-dim);}
.toggle-row input{width:auto;}

/* ================= Blocked-provider notice (2026-09-19) =================
   A handful of providers (Outlook/Hotmail/Live/MSN, tracked as
   BLOCKED_EMAIL_DOMAINS in authWidget.js) are currently rejecting mail from
   softtouch.com.bd on their end. This is the explainer link + live per-field
   warning that surfaces that before someone submits a recovery address that
   will never actually receive anything, plus the shared popup both open. */
.domain-notice-line a{display:inline-flex;align-items:center;gap:5px;}
.domain-notice-line a::before{content:"\26A0";font-size:0.85em;}

.email-domain-hint{
  display:flex;align-items:flex-start;gap:6px;margin-top:8px;padding:0.55rem 0.75rem;
  border-radius:8px;font-size:0.74rem;line-height:1.5;color:var(--text);
  background:rgba(244,120,32,0.12);border:1px solid rgba(244,120,32,0.35);
  animation:hintDrop .2s ease both;
}
.email-domain-hint::before{content:"\26A0";flex:none;color:#F47820;}
.email-domain-hint a{color:var(--accent-color,#33C5E7);white-space:nowrap;}
@keyframes hintDrop{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}

.info-modal-scrim{
  position:fixed;inset:0;z-index:150;background:rgba(4,8,12,0.82);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s;
}
.info-modal-scrim.open{opacity:1;visibility:visible;}
.info-modal{
  position:relative;width:380px;max-width:calc(90vw - 4px);background:var(--panel);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 46px rgba(0,0,0,0.45);
  padding:28px;transform:translateY(-6px);transition:transform .2s ease;
}
.info-modal-scrim.open .info-modal{transform:translateY(0);}
.info-modal h3{margin:0 0 10px;font-size:1rem;color:var(--text);}
.info-modal p{margin:0 0 12px;font-size:0.84rem;line-height:1.6;color:var(--text-dim);}
.info-modal p:last-child{margin-bottom:0;}
.info-modal-close{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--text-dim);font-size:1.4rem;line-height:1;cursor:pointer;padding:4px;}
.info-modal-close:hover{color:var(--text);}
.blocked-domains-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:6px;}
.blocked-domains-list li{
  background:rgba(229,72,77,0.12);border:1px solid rgba(229,72,77,0.35);color:var(--text);
  font-size:0.78rem;font-weight:600;padding:4px 10px;border-radius:999px;
}
@media (prefers-reduced-motion:reduce){.email-domain-hint,.info-modal-scrim,.info-modal{animation:none;transition:none;}}