/* ── GOOGLE SIGN-IN BUTTON ── */
.gsi-material-button{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;
  -webkit-appearance:none;appearance:none;background-color:#131314;background-image:none;
  border:none;border-radius:25px;box-sizing:border-box;color:#e3e3e3;
  cursor:pointer;font-family:'Roboto',arial,sans-serif;font-size:14px;
  height:44px;letter-spacing:.25px;outline:none;overflow:hidden;
  padding:0 16px;position:relative;text-align:center;
  transition:background-color .218s,border-color .218s,box-shadow .218s;
  vertical-align:middle;white-space:nowrap;width:100%;}
.gsi-material-button .gsi-material-button-icon{height:20px;margin-right:10px;min-width:20px;width:20px;}
.gsi-material-button .gsi-material-button-content-wrapper{
  align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;
  height:100%;justify-content:center;position:relative;width:100%;}
.gsi-material-button .gsi-material-button-contents{
  flex-grow:0;font-family:'Roboto',arial,sans-serif;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;vertical-align:top;}
.gsi-material-button .gsi-material-button-state{
  transition:opacity .218s;bottom:0;left:0;opacity:0;
  position:absolute;right:0;top:0;}
.gsi-material-button:not(:disabled):hover{box-shadow:0 1px 2px 0 rgba(60,64,67,.30),0 1px 3px 1px rgba(60,64,67,.15);}
.gsi-material-button:not(:disabled):hover .gsi-material-button-state{background-color:#fff;opacity:.08;}
.gsi-material-button:not(:disabled):active .gsi-material-button-state{background-color:#fff;opacity:.12;}

/* ── AUTH BUTTONS CONTAINER ── */
.auth-buttons-container{display:flex;flex-direction:column;gap:10px;width:100%;}
/* Past Apple's own ~375px button cap, stack would leave the Apple pill
   floating inside an oversized square clip box — so sit the two buttons
   side by side instead, splitting the width so each stays under the cap. */
.auth-buttons-container.auth-buttons-row{flex-direction:row;align-items:stretch;}
.auth-buttons-container.auth-buttons-row>*{flex:1 1 0;min-width:0;}


/* ── OFFICIAL APPLE SIGN-IN WRAPPER ──
   Apple's JS SDK draws a fixed-pixel SVG button (no % width support) sized
   from data-width/data-height at render time, so the iframe must be pinned
   to that exact pixel size in JS (see _renderAppleButton) rather than
   stretched with CSS %, otherwise the pill edge misaligns on one side. */
#appleid-signin{width:100%;height:44px;border-radius:22px;overflow:hidden;display:block;}
#appleid-signin iframe{border-radius:22px !important;display:block !important;}
.gsi-material-button:disabled{opacity:.5;cursor:not-allowed;}

/* ── STATIC APPLE BUTTON (native sign-in + website offline fallback) ──
   Two different callers share this same simple black-pill markup:
   (1) native: the app's own real Apple sign-in trigger (Face ID/Touch ID
       sheet via @capgo/capacitor-social-login) — no SDK/iframe needed, a
       plain button click is enough, same as Google's button.
   (2) website, offline: Apple's real button is only ever drawn by Apple's
       own JS SDK, which can't load or render anything without network —
       offline, that container would otherwise just stay empty. This
       look-alike matches its black-pill shape so the offline state reads
       the same way Google's disabled button does, not as a missing/broken
       element. The website's online case still uses the real SDK button
       (#appleid-signin above), untouched. */
.apple-signin-button{width:100%;height:44px;border:none;border-radius:22px;
  background-color:#000;color:#fff;display:flex;align-items:center;justify-content:center;
  gap:8px;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;
  font-size:14px;font-weight:500;cursor:pointer;}
.apple-signin-button.auth-btn-offline{cursor:not-allowed;}
.apple-signin-icon{width:15px;height:15px;flex:none;}
.auth-btn-offline{opacity:.5;}
/* ── AUTH SIGNED-IN STATE ── */
.auth-signout-btn{width:100%;padding:10px 14px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);border-radius:25px;
  font-family:'Outfit','Vazirmatn',sans-serif;font-size:.83rem;font-weight:600;
  color:var(--muted);cursor:pointer;transition:border-color .15s,color .15s;text-align:center;margin-top:8px;}
.auth-signout-btn:hover{color:var(--text);border-color:rgba(255,255,255,.18);}

/* ── AUTH UI ── */
.auth-email{font-size:.8rem;color:var(--muted);margin:0 0 10px;word-break:break-all;
  padding:10px 12px;background:rgba(255,255,255,.04);border-radius:10px;
  border:1px solid rgba(255,255,255,.07);line-height:1.5;direction:ltr;text-align:left;}
.auth-email strong{color:var(--text);display:block;font-size:.85rem;}