/* WhatScares email capture — the panel that follows a rating.
 *
 * Google One Tap paints its own card in the top right; that markup is Google's
 * and nothing here touches it. Everything styled in this file is the panel we
 * show after someone rates without an account.
 *
 * Like chrome.css, this file only consumes the template's palette
 * (--surface, --border, --text, --accent, --sans, --serif, --radius) and
 * defines none of its own. Fallbacks are for the two static pages that carry a
 * pasted header but no palette block.
 */

.gate-backdrop {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(12px);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.gate-backdrop.open { display: flex; }

.gate-panel {
  background: var(--surface, #f4f0e6);
  border: 1px solid var(--border, #cdc2ab);
  border-radius: 5px;
  max-width: 400px; width: 100%;
  padding: 32px 30px 26px;
  font-family: var(--sans, system-ui, sans-serif);
  color: var(--text, #191512);
}

.gate-eyebrow {
  font-family: var(--mono, monospace);
  font-size: 11.5px; letter-spacing: 1.7px; text-transform: uppercase;
  color: var(--accent, #a82e22);
  margin-bottom: 10px;
}

.gate-panel h2 {
  font-family: var(--serif, Georgia, serif);
  font-size: 25px; font-weight: 500; line-height: 1.15;
  margin: 0 0 10px;
}

.gate-body {
  font-size: 14.5px; line-height: 1.5;
  color: var(--text-2, #584f44);
  margin: 0 0 22px;
}

.gate-google {
  width: 100%; padding: 10px;
  border: 1px solid var(--border, #cdc2ab);
  border-radius: var(--radius, 3px);
  background: transparent; color: var(--text, #191512);
  font-size: 15.5px; font-family: var(--sans, system-ui, sans-serif);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: border-color 0.2s;
}
.gate-google:hover { border-color: var(--text-3, #6b6153); }
.gate-google svg { flex-shrink: 0; }

.gate-or {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0;
  color: var(--text-3, #6b6153); font-size: 13.5px;
}
.gate-or::before, .gate-or::after {
  content: ''; flex: 1; height: 1px;
  background: var(--border, #cdc2ab);
}

.gate-form { display: flex; gap: 8px; }
.gate-form input {
  flex: 1; min-width: 0; padding: 10px 13px;
  background: var(--field, rgba(255,253,247,0.78));
  border: 1px solid var(--border, #cdc2ab);
  border-radius: var(--radius, 3px);
  color: var(--text, #191512);
  font-size: 15.5px; font-family: var(--sans, system-ui, sans-serif);
  outline: none;
}
.gate-form input:focus { border-color: var(--text-3, #6b6153); }
.gate-form input::placeholder { color: var(--text-3, #6b6153); }

.gate-form button {
  padding: 10px 16px; border: none;
  border-radius: var(--radius, 3px);
  background: var(--accent, #a82e22); color: #fff;
  font-family: var(--mono, monospace);
  font-size: 12px; letter-spacing: 1.3px; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: opacity 0.2s;
}
.gate-form button:hover { opacity: 0.9; }
.gate-form button:disabled { opacity: 0.5; cursor: not-allowed; }

.gate-note {
  font-size: 13.5px; line-height: 1.45;
  margin: 14px 0 0; min-height: 1em;
  color: var(--text-2, #584f44);
}
.gate-note.bad { color: #b3382c; }

.gate-skip {
  display: block; width: 100%;
  margin-top: 20px; padding: 4px;
  background: none; border: none;
  color: var(--text-3, #6b6153);
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 14px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.gate-skip:hover { color: var(--text, #191512); }

@media (max-width: 420px) {
  .gate-panel { padding: 26px 22px 22px; }
  .gate-panel h2 { font-size: 22px; }
  .gate-form { flex-direction: column; }
  .gate-form button { width: 100%; padding: 11px; }
}