/* 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, 320px);
  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));
  box-shadow: 0 12px 32px rgba(0,0,0,.3);
  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.
 * Sized to be prominent but not dominate. */
.gk-connect-logo {
  display: flex;
  justify-content: center;
  padding: 14px 20px 0;
}
.gk-connect-logo img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 10px;
}

.gk-connect-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px 12px;
  border-bottom: 1px solid var(--gk-border, var(--border, rgba(128,128,128,.15)));
}
.gk-connect-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}
.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: 12px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gk-connect-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.gk-connect-field > span {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gk-text-muted, var(--text-muted, var(--text2, #9ca3af)));
}
.gk-connect-field > input {
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--gk-text, var(--text, #f3f6fb));
  background: var(--gk-bg, var(--bg3, #0f141c));
  border: 1px solid var(--gk-border, var(--border, rgba(128,128,128,.3)));
  border-radius: calc(var(--gk-radius, var(--radius, 8px)) - 2px);
  outline: none;
  transition: border-color .12s;
}
.gk-connect-field > input:focus {
  border-color: var(--gk-primary, var(--accent, #3b82f6));
}

.gk-connect-submit {
  margin-top: 2px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  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 .12s;
}
.gk-connect-submit:hover { background: var(--gk-primary-hover, var(--accent-hover, #2563eb)); }
.gk-connect-submit:disabled { opacity: .6; cursor: wait; }

.gk-connect-error {
  min-height: 0;
  font-size: 12px;
  color: var(--gk-danger, #ef4444);
  opacity: 0;
  transition: opacity .15s;
}
.gk-connect-error.is-visible { opacity: 1; }

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

.gk-connect-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px 0;
  color: var(--gk-text-muted, var(--text-muted, var(--text2, #9ca3af)));
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.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: 12px 20px 4px;
  display: flex;
  justify-content: center;
  min-height: 44px;
}

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

.gk-connect-foot {
  padding: 0 20px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 12px;
  color: var(--gk-text-muted, var(--text-muted, var(--text2, #9ca3af)));
  border-top: 1px solid var(--gk-border, var(--border, rgba(128,128,128,.15)));
  padding-top: 14px; 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; }
.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;
  background: #fff; color: #1a202c; padding: 4px;
  border: 1px solid #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: #f3f4f6; color: inherit; }
.gk-auth-av {
  width: 30px; height: 30px; border-radius: 50%;
  background: #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: #1a202c; font-weight: 700; }
.gk-auth-role {
  font-size: 10px; color: #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: #6b7280; text-decoration: none; font-size: 15px; margin-left: 2px;
}
.gk-auth-out:hover { background: #fee2e2; color: #dc2626; }