/* ============================================================
   Dalga — "Continue with Google"
   Google's own button palettes (light: white / #747775 stroke,
   dark: #131314 / #8E918F stroke), sized and rounded to sit next
   to the site's primary buttons.

   Dark follows the site switch the same way the account area and
   checkout do: html[data-dl-theme] first, Dracula's attribute as
   the fallback. .dgl--auto (the standalone app page, which has no
   switch) follows the OS instead.

   The button's selectors carry two never-matching :not(#id) guards:
   the account shell styles links with a five-class :not() chain, and
   Elementor's popup and FunnelKit's modal have their own link rules,
   so plain class selectors lose to all three.
   ============================================================ */

.dgl{
  --dgl-bg:#ffffff;
  --dgl-bd:#747775;
  --dgl-fg:#1f1f1f;
  --dgl-hover:#f6f6f8;
  --dgl-press:#ececf0;
  --dgl-lift:0 1px 2px rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15);
  --dgl-ring:#6050dc;
  --dgl-rule:rgba(26,24,54,.13);
  --dgl-or:#8a87a0;
  --dgl-err-fg:#b42318;
  --dgl-err-bg:rgba(217,45,32,.07);
  --dgl-err-bd:rgba(217,45,32,.24);
  --dgl-info-fg:#4a3bc0;
  --dgl-info-bg:rgba(96,80,220,.07);
  --dgl-info-bd:rgba(96,80,220,.26);
  --dgl-h:44px;
  --dgl-r:10px;
  width:100%;
  margin:0 0 18px;
  box-sizing:border-box;
  color-scheme:light;
}

/* Inside the account shell, borrow its own rule / muted-text tokens so
   the divider matches the form around it in both polarities. */
.dl-app .dgl{
  --dgl-rule:var(--dl-line);
  --dgl-or:var(--dl-text-3);
  --dgl-ring:var(--dl-accent);
  --dgl-h:40px;
  --dgl-r:var(--dl-r-sm, 9px);
}

html[data-dl-theme="dark"] .dgl,
html:not([data-dl-theme])[data-dracula-scheme="dark"] .dgl{
  --dgl-bg:#131314;
  --dgl-bd:#8e918f;
  --dgl-fg:#e3e3e3;
  --dgl-hover:#1f1f21;
  --dgl-press:#2a2a2d;
  --dgl-lift:0 1px 3px rgba(0,0,0,.55), 0 4px 10px -4px rgba(0,0,0,.6);
  --dgl-ring:#7d6ff0;
  --dgl-rule:rgba(236,234,248,.14);
  --dgl-or:#a7a3c8;
  --dgl-err-fg:#ff9aa9;
  --dgl-err-bg:rgba(255,122,151,.10);
  --dgl-err-bd:rgba(255,122,151,.30);
  --dgl-info-fg:#b9b0fa;
  --dgl-info-bg:rgba(125,111,240,.12);
  --dgl-info-bd:rgba(125,111,240,.34);
  color-scheme:dark;
}
html[data-dl-theme="dark"] .dl-app .dgl,
html:not([data-dl-theme])[data-dracula-scheme="dark"] .dl-app .dgl{
  --dgl-rule:var(--dl-line);
  --dgl-or:var(--dl-text-3);
  --dgl-ring:var(--dl-accent);
}

@media (prefers-color-scheme:dark){
  .dgl.dgl--auto{
    --dgl-bg:#131314;
    --dgl-bd:#8e918f;
    --dgl-fg:#e3e3e3;
    --dgl-hover:#1f1f21;
    --dgl-press:#2a2a2d;
    --dgl-lift:0 1px 3px rgba(0,0,0,.55), 0 4px 10px -4px rgba(0,0,0,.6);
    --dgl-ring:#8d80f5;
    --dgl-rule:rgba(230,232,238,.14);
    --dgl-or:#9aa0ae;
    --dgl-err-fg:#ff9aa9;
    --dgl-err-bg:rgba(255,122,151,.10);
    --dgl-err-bd:rgba(255,122,151,.30);
    --dgl-info-fg:#b9b0fa;
    --dgl-info-bg:rgba(125,111,240,.12);
    --dgl-info-bd:rgba(125,111,240,.34);
    color-scheme:dark;
  }
}

/* — button — */
html body .dgl a.dgl-btn:not(#dgl-x):not(#dgl-y){
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  height:var(--dgl-h);
  min-height:0;
  margin:0;
  padding:0 16px;
  box-sizing:border-box;
  border:1px solid var(--dgl-bd);
  border-radius:var(--dgl-r);
  background:var(--dgl-bg);
  color:var(--dgl-fg);
  box-shadow:none;
  font-family:"Roboto", "Nunito", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size:14px;
  font-weight:500;
  line-height:20px;
  letter-spacing:.25px;
  text-align:center;
  text-decoration:none;
  text-transform:none;
  white-space:nowrap;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
html body .dgl a.dgl-btn:not(#dgl-x):not(#dgl-y):hover{
  background:var(--dgl-hover);
  color:var(--dgl-fg);
  box-shadow:var(--dgl-lift);
  text-decoration:none;
}
html body .dgl a.dgl-btn:not(#dgl-x):not(#dgl-y):active{
  background:var(--dgl-press);
  box-shadow:none;
}
html body .dgl a.dgl-btn:not(#dgl-x):not(#dgl-y):focus{ outline:none; }
html body .dgl a.dgl-btn:not(#dgl-x):not(#dgl-y):focus-visible{
  outline:2px solid var(--dgl-ring);
  outline-offset:2px;
}

.dgl .dgl-ico{
  position:relative;
  display:inline-flex;
  flex:none;
  width:18px;
  height:18px;
}
.dgl .dgl-g{
  display:block;
  width:18px;
  height:18px;
  transition:opacity .12s ease;
}
.dgl .dgl-label{
  overflow:hidden;
  text-overflow:ellipsis;
  color:inherit;
}

/* — busy: the G turns into a spinner until Google answers — */
.dgl .dgl-spin{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid var(--dgl-rule);
  border-top-color:#4285f4;
  opacity:0;
  box-sizing:border-box;
}
html body .dgl a.dgl-btn:not(#dgl-x):not(#dgl-y).is-busy{ cursor:progress; }
.dgl a.dgl-btn.is-busy .dgl-g{ opacity:0; }
.dgl a.dgl-btn.is-busy .dgl-spin{ opacity:1; animation:dgl-spin .7s linear infinite; }
.dgl a.dgl-btn.is-busy .dgl-label{ opacity:.7; }
@keyframes dgl-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
  .dgl a.dgl-btn.is-busy .dgl-spin{ animation-duration:2.4s; }
  html body .dgl a.dgl-btn:not(#dgl-x):not(#dgl-y){ transition:none; }
}

/* — "or use your email" rule — */
.dgl .dgl-or{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 0 0;
  color:var(--dgl-or);
  font-size:12px;
  font-weight:600;
  line-height:1;
  letter-spacing:.02em;
  text-transform:none;
}
.dgl .dgl-or::before,
.dgl .dgl-or::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:var(--dgl-rule);
}
.dgl .dgl-or span{ flex:none; }

/* — inline message (app page only; the store uses WooCommerce notices) — */
.dgl .dgl-msg{
  margin:0 0 14px;
  padding:10px 12px;
  border:1px solid var(--dgl-err-bd);
  border-radius:var(--dgl-r);
  background:var(--dgl-err-bg);
  color:var(--dgl-err-fg);
  font-size:13.5px;
  font-weight:600;
  line-height:1.45;
  text-align:left;
}
.dgl .dgl-msg--notice,
.dgl .dgl-msg--success{
  border-color:var(--dgl-info-bd);
  background:var(--dgl-info-bg);
  color:var(--dgl-info-fg);
}

/* ============================================================
   Profile › Sign-in methods — built from the account shell's own
   panel, chip and button parts; only the rows are new.
   ============================================================ */
.dgl-methods{ max-width:760px; margin-top:18px; }
.dgl-methods .dgl-m-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px;
}
.dgl-methods .dgl-m-row + .dgl-m-row{ border-top:1px solid var(--dl-line-soft); }
.dgl-methods .dgl-m-ico{
  flex:none;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:var(--dl-r-sm);
  border:1px solid var(--dl-line-soft);
  background:var(--dl-surface-2);
  color:var(--dl-text-2);
}
.dgl-methods .dgl-m-ico .dgl-g{ width:18px; height:18px; display:block; }
.dgl-methods .dgl-m-ico--g{ background:#ffffff; border-color:var(--dl-line); }
html[data-dl-theme="dark"] .dgl-methods .dgl-m-ico--g,
html:not([data-dl-theme])[data-dracula-scheme="dark"] .dgl-methods .dgl-m-ico--g{ background:#131314; }
.dgl-methods .dgl-m-t{ flex:1 1 auto; min-width:0; }
.dgl-methods .dgl-m-name{ font-size:13.5px; font-weight:700; color:var(--dl-text); line-height:1.4; }
.dgl-methods .dgl-m-sub{ font-size:12.5px; color:var(--dl-text-2); line-height:1.5; overflow-wrap:anywhere; }
.dgl-methods .dgl-m-act{ flex:none; display:flex; align-items:center; gap:8px; }
.dgl-methods .dgl-m-connect .dgl-g{ width:14px; height:14px; display:block; }
.dgl-methods .dgl-m-foot{
  padding:11px 18px;
  border-top:1px solid var(--dl-line-soft);
  border-radius:0 0 var(--dl-r-lg) var(--dl-r-lg);
  background:var(--dl-surface-2);
  font-size:12.5px;
  line-height:1.55;
  color:var(--dl-text-2);
}
@media (max-width:560px){
  .dgl-methods .dgl-m-row{ flex-wrap:wrap; }
  .dgl-methods .dgl-m-act{ width:100%; padding-left:52px; }
}

/* — per surface — */

/* My Account: the panel's form is a 17px grid; the wrapper is one row. */
.dl-auth .dl-form > .dgl{ margin:0; }

/* Checkout "Verify and Pay" popup: sits between the intro text and the
   Register / Returning-customer accordion. */
.dgl.dgl--popup{ margin:4px 0 6px; }
.dgl.dgl--popup .dgl-or{ margin-top:16px; }

/* FunnelKit returning-customer modal: its form rows are floated columns,
   so the wrapper must span the full row and clear them. */
#funnelkitLoginForm .dgl{ clear:both; float:none; margin:4px 0 16px; }

/* Desktop-app sign-in page. */
.dal-card .dgl{ margin:22px 0 4px; }
.dal-card .dgl + .dal-form{ margin-top:14px; }

@media (max-width:420px){
  html body .dgl a.dgl-btn:not(#dgl-x):not(#dgl-y){ padding:0 12px; }
}