/* Shared connect modal styling.
 *
 * Variable lookup order (first match wins):
 *   1. `--gk-*`   — modal-specific override (injected by the widget from
 *                   packages.yaml theme_color/background_color).
 *   2. `--*`      — the site's own theme tokens (--bg, --accent, --text,
 *                   --border, --radius, --card-shadow). Gateka sites set
 *                   these per [data-theme="light"|"dark"], so the modal
 *                   tracks the active theme automatically.
 *   3. hardcoded  — dark-navy fallback so the modal stays legible on
 *                   sites that expose neither.
 */

.gk-connect-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--gk-font, inherit);
  color: var(--gk-text, var(--text, #f3f6fb));
  background: transparent;
  border: 1px solid var(--gk-border, var(--border, rgba(128,128,128,.4)));
  border-radius: var(--gk-radius, var(--radius, 8px));
  cursor: pointer;
  transition: all .15s ease;
}
.gk-connect-trigger:hover {
  background: var(--gk-bg-surface, rgba(255,255,255,.06));
  border-color: var(--gk-primary, var(--accent, #3b82f6));
  color: var(--gk-primary, var(--accent, #3b82f6));
}

/* ── Overlay + card ─────────────────────────────────────────────────────── */

/* Popover — anchored directly below the trigger button (like Artsiderz's
 * old dropdown). No full-screen overlay: the page stays fully interactive
 * behind the panel. The JS sets the panel's ``top`` / ``left`` on open
 * using the trigger's ``getBoundingClientRect()`` — works whether the
 * trigger is fixed, absolute, or in normal flow.
 */
.gk-connect-overlay {
  display: none;
  position: fixed;
  width: var(--gk-connect-width, 340px);
  background: var(--gk-bg-surface, var(--bg, #1a1e27));
  color: var(--gk-text, var(--text, #f3f6fb));
  border: 1px solid var(--gk-border, var(--border, rgba(128,128,128,.2)));
  border-radius: var(--gk-radius, var(--radius, 12px));
  /* Refined drop shadow — lifts the card off the page without the heavy
   * "dialog" feel of the previous 32-px blur. Matches the inred login. */
  box-shadow: 0 2px 12px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
  z-index: 9999;
  font-family: var(--gk-font, inherit);
  transform-origin: top right;
  animation: gkConnectPop .15s ease;
  /* JS sets top / left on open. Fallback placement keeps the panel sane
   * even if JS fails to position it. */
  top: 56px;
  right: 14px;
}
.gk-connect-overlay.is-open {
  display: block;
}

@keyframes gkConnectPop {
  from { transform: scale(.96) translateY(-6px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);    opacity: 1; }
}

/* The markup has an inner .gk-connect-card around the form for historical
 * reasons (used to be the modal "card" inside a full-screen overlay). Now
 * the popover is the card — neutralise the inner wrapper's visuals.
 */
.gk-connect-card {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  max-width: none;
  width: auto;
  animation: none;
}

/* On narrow screens the popover may overflow. Cap to viewport and right-align. */
@media (max-width: 400px) {
  .gk-connect-overlay {
    width: calc(100vw - 28px);
    right: -10px;
  }
}

/* Optional site logo at the top of the card — sits above the head row.
 * Sites pass their own asset URL via the modal() macro's `logo_url` option.
 * Inred-style: a bit more breathing room + crisp rounding. */
.gk-connect-logo {
  display: flex;
  justify-content: center;
  padding: 22px 24px 10px;
}
.gk-connect-logo img {
  /* Supports both square product icons (~48px²) AND wide wordmarks
     (e.g. ELEN's ~4:1 logo.svg) without squashing either. Browser picks
     the smaller of the two constraints, so a 4:1 wordmark fills the
     ~180px width while a square icon maxes out at ~52px. */
  max-width: 180px;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
}

.gk-connect-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 24px 14px;
  border-bottom: 1px solid var(--gk-border, var(--border, rgba(128,128,128,.12)));
}
.gk-connect-head h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gk-primary, var(--accent, var(--text, #3b82f6)));
}
.gk-connect-close {
  background: none;
  border: none;
  color: var(--gk-text-muted, var(--text-muted, var(--text2, #9ca3af)));
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  border-radius: 6px;
  transition: all .12s;
}
.gk-connect-close:hover {
  color: var(--gk-text, var(--text, #f3f6fb));
  background: var(--gk-bg, var(--bg3, rgba(255,255,255,.05)));
}

/* ── Email form ─────────────────────────────────────────────────────────── */

.gk-connect-form {
  padding: 14px 24px 20px;
  display: flex;
  flex-direction: column;
  /* Individual children carry their own margin-top (14px) so that
   * collapsed items don't leave a phantom `gap` behind them during the
   * progressive-reveal animation. */
  gap: 0;
}
.gk-connect-form > .gk-connect-field:not(:first-of-type),
.gk-connect-form > .gk-connect-submit,
.gk-connect-form > .gk-connect-error {
  margin-top: 14px;
}

.gk-connect-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Visually-hidden but screen-reader-accessible label — inputs rely on
 * their placeholder for the visible cue (matches the inred treatment). */
.gk-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.gk-connect-field > input {
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 300;
  font-family: inherit;
  color: var(--gk-text, var(--text, #1a1a1a));
  background: var(--gk-bg, var(--bg, #ffffff));
  border: 1px solid var(--gk-border, var(--border, rgba(26,26,26,.12)));
  border-radius: calc(var(--gk-radius, var(--radius, 8px)) - 2px);
  outline: none;
  /* Animate border, ring, and a soft upward lift so the field reacts
   * when focused — same calm motion inred uses on its /login card. */
  transition: border-color .2s ease,
              box-shadow   .2s ease,
              transform    .2s ease;
}
.gk-connect-field > input::placeholder {
  color: var(--gk-text-muted, var(--text-muted, var(--text3, #9e9dac)));
  transition: opacity .2s ease;
}
/* Chrome's autofill UI paints its own light-yellow background on top
 * of the theme bg, looking bright in dark mode. Inset box-shadow trick
 * forces the field to render the theme's --gk-bg over the autofill
 * yellow. -webkit-text-fill-color repaints the autofilled text in the
 * theme color too. */
.gk-connect-field > input:-webkit-autofill,
.gk-connect-field > input:-webkit-autofill:hover,
.gk-connect-field > input:-webkit-autofill:focus,
.gk-connect-field > input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--gk-bg, var(--bg, #ffffff)) inset !important;
  -webkit-text-fill-color: var(--gk-text, var(--text, #1a1a1a)) !important;
  caret-color: var(--gk-text, var(--text, #1a1a1a));
  transition: background-color 5000s ease-in-out 0s;
}
.gk-connect-field > input:focus {
  border-color: var(--gk-primary, var(--accent, #3b82f6));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gk-primary, var(--accent, #3b82f6)) 14%, transparent);
  transform: translateY(-1px);
}
.gk-connect-field > input:focus::placeholder {
  opacity: .5;
}

/* Progressive reveal — password + submit stay folded until the email
 * field has content. Uses the Material "standard" curve for both phases
 * and a small translate-up so the fields glide in from below instead of
 * snapping open. Staggered via transition-delay so password arrives
 * first and submit follows ~100 ms later.
 *
 * `:has()` is modern-browser-only; older browsers fall back to
 * everything-visible (still functional). */
.gk-connect-form > .gk-connect-field:not(:first-of-type),
.gk-connect-form > .gk-connect-submit {
  max-height: 120px;
  opacity: 1;
  transform: translateY(0);
  transition:
    max-height  320ms cubic-bezier(.4, 0, .2, 1),
    opacity     260ms cubic-bezier(.4, 0, .2, 1),
    transform   260ms cubic-bezier(.4, 0, .2, 1),
    margin      320ms cubic-bezier(.4, 0, .2, 1),
    padding     320ms cubic-bezier(.4, 0, .2, 1);
}
/* Stagger on the way IN: password first, submit trails. */
.gk-connect-form > .gk-connect-field:not(:first-of-type) { transition-delay:   0ms; }
.gk-connect-form > .gk-connect-submit                     { transition-delay: 110ms; }

.gk-connect-form:has(input[type="email"]:placeholder-shown)
  > .gk-connect-field:not(:first-of-type),
.gk-connect-form:has(input[type="email"]:placeholder-shown)
  > .gk-connect-submit {
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Reverse stagger on the way OUT: submit collapses first, password after. */
.gk-connect-form:has(input[type="email"]:placeholder-shown)
  > .gk-connect-field:not(:first-of-type) { transition-delay: 80ms; }
.gk-connect-form:has(input[type="email"]:placeholder-shown)
  > .gk-connect-submit                     { transition-delay:  0ms; }

.gk-connect-submit {
  margin-top: 4px;
  padding: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: inherit;
  color: #fff;
  background: var(--gk-primary, var(--accent, #3b82f6));
  border: none;
  border-radius: calc(var(--gk-radius, var(--radius, 8px)) - 2px);
  cursor: pointer;
  transition: background .2s;
}
.gk-connect-submit:hover { background: var(--gk-primary-hover, var(--accent-hover, #2563eb)); }
.gk-connect-submit:disabled { opacity: .6; cursor: wait; }

/* Error pill — inred-styled tinted chip with border, instead of the old
 * bare red text line. Only occupies space when `.is-visible`. */
.gk-connect-error {
  display: none;
  background: color-mix(in srgb, var(--gk-danger, #ef4444) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--gk-danger, #ef4444) 22%, transparent);
  color: var(--gk-danger, #ef4444);
  border-radius: calc(var(--gk-radius, var(--radius, 8px)) - 2px);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 400;
  text-align: center;
}
.gk-connect-error.is-visible { display: block; }
/* Optional CTA when the per-product issuer returns access-denied with a
   sign-up / contact link. Renders as a pill below the error message so
   the visitor has a recovery path instead of a dead-end string. */
.gk-connect-error-cta {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent, var(--gk-accent, #2d6a4f));
  color: #fff !important;
  font-weight: 600;
  font-size: 12.5px;
  text-decoration: none;
  transition: filter .15s ease, transform .15s ease;
}
.gk-connect-error-cta:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  text-decoration: none;
}

/* ── Divider ────────────────────────────────────────────────────────────── */

.gk-connect-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 24px 0;
  color: var(--gk-text-muted, var(--text-muted, var(--text2, #9e9dac)));
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.gk-connect-divider::before,
.gk-connect-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gk-border, var(--border, rgba(128,128,128,.2)));
}

/* ── Google button slot ─────────────────────────────────────────────────── */

.gk-connect-google {
  padding: 16px 24px 4px;
  display: flex;
  justify-content: center;
  min-height: 44px;
}

/* ── Footer: forgot-password + "no account? contact us" ─────────────────── */

.gk-connect-foot {
  padding: 14px 24px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 12px;
  color: var(--gk-text-muted, var(--text-muted, var(--text2, #6b6a7a)));
  border-top: 1px solid var(--gk-border, var(--border, rgba(26,26,26,.08)));
  margin-top: 4px;
}
.gk-connect-link {
  color: var(--gk-primary, var(--accent, #3b82f6));
  text-decoration: none;
  font-weight: 600;
}
.gk-connect-link:hover { text-decoration: underline; }

/* ── Shared "Features" nav button ─────────────────────────────────────────
   Rendered by gateka.connect.widget.render_features_button() so every
   site shows the same accent pill inside its header. Colours follow the
   site's own --accent / --accent-hover tokens (gateka-core's chain
   already maps these to --gk-primary); radius follows --radius. */
.gk-features-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  font: 600 12px var(--gk-font, inherit);
  letter-spacing: .3px;
  text-decoration: none; white-space: nowrap;
  color: #fff;
  background: var(--gk-primary, var(--accent, #3b82f6));
  border: 1px solid var(--gk-primary, var(--accent, #3b82f6));
  border-radius: var(--gk-radius, var(--radius, 999px));
  transition: background .15s ease, border-color .15s ease, transform .15s ease, opacity .15s ease;
  margin-right: 8px;
}
.gk-features-btn:hover {
  background: var(--accent-hover, color-mix(in srgb, var(--gk-primary, var(--accent, #3b82f6)) 85%, #fff 15%));
  border-color: var(--accent-hover, color-mix(in srgb, var(--gk-primary, var(--accent, #3b82f6)) 85%, #fff 15%));
  transform: translateY(-1px);
  text-decoration: none;
  color: #fff;
}
.gk-features-btn i { font-size: 12px; }
.gk-features-btn span { line-height: 1; }
.gk-connect-nomember { text-align: center; }


/* ── Fixed top-right auth pill (anonymous trigger + signed-in avatar) ────
   Single source of truth shared by:
     - PHP:    gateka-core/php/shared/auth_pill.php (include)
     - Jinja:  gateka-core/gateka/templates/_connect_widget.html (gk_connect)
   Anything here replaces the previously-inlined <style> blocks in both.     */

.gk-auth {
  position: fixed; top: 12px; right: 14px; z-index: 100;
  font: 600 13px system-ui, -apple-system, sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  border-radius: 999px;
  text-decoration: none;
}
.gk-auth--in {
  display: inline-block; padding: 8px 16px;
  background: #2d3748; color: #fff;
  border: none; cursor: pointer; font-family: inherit;
}
.gk-auth--in:hover { background: #1a202c; color: #fff; }

/* Icon-only variant (opt-in via auth_pill.php `gk_auth_use_modal`). */
.gk-auth--icon {
  width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .15s, background .15s;
}
.gk-auth--icon:hover { transform: scale(1.05); }
.gk-auth--icon svg { width: 18px; height: 18px; stroke: currentColor; }

/* Inline variant — drops the fixed positioning so the pill can sit inside
   a normal header / nav container (e.g. gateka.fr's .gk-nav-actions). */
.gk-auth--inline { position: static; top: auto; right: auto; }

.gk-auth--out {
  display: inline-flex; align-items: center; gap: 0;
  padding: 4px;
  background: var(--gk-bg-surface, var(--bg2, var(--bg, #fff)));
  color: var(--gk-text, var(--text, #1a202c));
  border: 1px solid var(--gk-border, var(--border, #e5e7eb));
}
.gk-auth-main {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 2px 10px 2px 2px; border-radius: 999px;
  color: inherit; text-decoration: none;
}
.gk-auth-main:hover {
  background: var(--surface-hover, var(--gk-bg, rgba(0,0,0,.05)));
  color: inherit;
}
.gk-auth-av {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--gk-primary, var(--accent, #4c78ff)); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; overflow: hidden; flex-shrink: 0; font-size: 13px;
}
.gk-auth-av img { width: 100%; height: 100%; object-fit: cover; }
.gk-auth-text {
  display: flex; flex-direction: column;
  line-height: 1.1; font-size: 12px;
}
.gk-auth-text b { color: var(--gk-text, var(--text, #1a202c)); font-weight: 700; }
.gk-auth-role {
  font-size: 10px; color: var(--gk-text-muted, var(--text2, #6b7280));
  font-weight: 500; text-transform: capitalize; letter-spacing: .3px;
}
.gk-auth-out {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gk-text-muted, var(--text2, #6b7280));
  text-decoration: none; font-size: 15px; margin-left: 2px;
}
.gk-auth-out:hover {
  background: color-mix(in srgb, #ef4444 18%, transparent);
  color: #ef4444;
}
/* Restore-to-self variant: appears while admin-impersonating another
   user. Red-tinted so it's obvious the button exits imitation mode
   instead of logging the real admin out. */
.gk-auth-out--restore {
  color: #fff;
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, .25);
}
.gk-auth-out--restore:hover {
  background: #dc2626;
  color: #fff;
}
/* Inline variant drops the default fixed pill shadow too. */
.gk-auth--out.gk-auth--inline { box-shadow: none; }