/* ══ TABITHA MARKETING AUTH MODAL ════════════════════════════
   Refined modal for sign in / create account
   Matches Tabitha design language: warm cream, dark ink, Literata/Figtree */

:root {
  --cream:       #F5F1E8;
  --cream-light: #FBFAF8;
  --paper:       #FEFDFB;
  --blue-accent: #B9CCDC;
  --ink:         #1A2332;
  --ink-dim:     #5A6167;
  --divider:     rgba(26, 35, 50, 0.06);
  --error:       #8A4A3E;
  --success:     #4C6B4F;
  --display:     Literata, "Century Schoolbook", Georgia, serif;
  --ui:          Figtree, ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* Backdrop */
[data-auth-modal-backdrop] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 35, 50, 0.4);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
  animation: fadeIn 0.2s ease-out;
}

[data-auth-modal-backdrop].active {
  display: flex;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Modal container */
[data-auth-modal] {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--divider);
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(26, 35, 50, 0.12);
  max-width: 440px;
  width: 100%;
  padding: 48px;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Close button */
[data-auth-modal-close] {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
  font-size: 20px;
  transition: color 0.2s;
  padding: 0;
  min-height: 44px;
  min-width: 44px;
  margin: -6px -6px -6px -6px;
}

[data-auth-modal-close]:hover {
  color: var(--ink);
}

[data-auth-modal-close]:focus-visible {
  outline: 2px solid var(--auth-link, #4A6A85);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Heading and copy */
[data-auth-modal] h1 {
  margin: 0 0 12px 0;
  font-family: var(--display);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

[data-auth-modal] .auth-subtitle {
  margin: 0 0 32px 0;
  font-size: 15px;
  color: var(--ink-dim);
  line-height: 1.5;
}

/* Form structure */
[data-auth-modal] form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Form groups */
.auth-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-form-group label {
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.auth-form-group input {
  font-family: var(--ui);
  font-size: 16px;
  padding: 12px 14px;
  min-height: 48px;
  box-sizing: border-box;
  border: 1px solid var(--divider);
  border-radius: 12px;
  background: var(--cream-light);
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-form-group input:focus {
  outline: none;
  border-color: var(--blue-accent);
  box-shadow: 0 0 0 3px rgba(185, 204, 220, 0.15);
}

.auth-form-group input::placeholder {
  color: var(--ink-dim);
}

/* Password field with visibility toggle */
.auth-password-wrapper {
  position: relative;
}

.auth-password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-dim);
  font-size: 18px;
  padding: 4px 8px;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}

.auth-password-toggle:hover {
  color: var(--ink);
}

.auth-password-toggle:focus-visible {
  outline: 2px solid var(--auth-link, #4A6A85);
  outline-offset: 2px;
}

.auth-form-group input[type="password"],
.auth-form-group input[type="text"].password-visible {
  padding-right: 44px;
}

/* The wrapper is a block, so its input never stretched like the other fields
   do (they sit directly in a column flex group). It kept the browser's default
   intrinsic width, which differs between type=password and type=text, so the
   field was narrower than its siblings and changed width when toggled. Make it
   full width, and keep the same padding in both states (the JS never added
   .password-visible, so the text state silently lost its right padding). */
.auth-password-wrapper input {
  width: 100%;
  box-sizing: border-box;
  padding-right: 44px;
}

/* Checkbox (Remember me) */
.auth-checkbox-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-checkbox-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--ink);
}

.auth-checkbox-group label {
  font-size: 14px;
  color: var(--ink-dim);
  margin: 0;
  cursor: pointer;
}

/* Buttons */
.auth-submit-btn {
  font-family: var(--ui);
  font-size: 16px;
  font-weight: 600;
  padding: 14px 20px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream-light);
  cursor: pointer;
  transition: background 0.2s;
  min-height: 44px;
}

.auth-submit-btn:hover:not(:disabled) {
  background: #0F1922;
}

.auth-submit-btn:active:not(:disabled) {
  background: #0F1922;
}

.auth-submit-btn:focus-visible {
  outline: 2px solid var(--auth-link, #4A6A85);
  outline-offset: 2px;
}

.auth-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary links */
.auth-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0 20px;
  margin-top: 0;
}

.auth-link {
  font-size: 14px;
  color: var(--auth-link, #4A6A85);
  text-decoration: none;
  transition: color 0.2s;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.auth-link:hover {
  color: var(--ink);
}

.auth-link:focus-visible {
  outline: 2px solid var(--auth-link, #4A6A85);
  outline-offset: 2px;
}

/* Error message */
.auth-error {
  padding: 12px 14px;
  background: rgba(138, 74, 62, 0.08);
  border: 1px solid rgba(138, 74, 62, 0.2);
  border-radius: 6px;
  color: var(--error);
  font-size: 14px;
  line-height: 1.5;
  display: none;
}

.auth-error.active {
  display: block;
}

/* Loading state */
.auth-loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(26, 35, 50, 0.1);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-right: 8px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Mode switcher text */
.auth-mode-switcher {
  text-align: center;
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink-dim);
}

.auth-mode-switcher button {
  background: none;
  border: none;
  color: var(--auth-link, #4A6A85);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  padding: 0;
  margin: 0 0 0 4px;
  transition: color 0.2s;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.auth-mode-switcher button:hover {
  color: var(--ink);
}

.auth-mode-switcher button:focus-visible {
  outline: 2px solid var(--auth-link, #4A6A85);
  outline-offset: 2px;
}

/* Responsive */
@media (max-width: 480px) {
  /* A bottom sheet that never grows past the screen: it scrolls inside itself, and the spacing is tight enough
     that sign-in fits without scrolling on a normal phone. */
  [data-auth-modal-backdrop] { align-items: flex-end; padding: 0; }
  [data-auth-modal] {
    max-width: none;
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    border-radius: 24px 24px 0 0;
    padding: 24px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  [data-auth-modal] h1 { margin: 0 0 4px; font-size: 24px; }
  [data-auth-modal] .auth-subtitle { margin: 0 0 16px; }
  [data-auth-modal] form { gap: 12px; }
  .auth-form-group { gap: 4px; }
  .auth-links { flex-direction: row; flex-wrap: wrap; gap: 0 16px; margin-top: 0; }
  .auth-mode-switcher { margin-top: 4px; }
  [data-auth-modal-close] { top: 12px; right: 12px; }
}

/* Inline SVG icons (close, password visibility). Replace emoji/Unicode glyphs
   that rendered as "?" boxes in the iOS WebView. Inherit colour from the button. */
.auth-icon {
  display: block;
  pointer-events: none;
  flex-shrink: 0;
}

/* "Forgot your password?" is a button (it switches the modal view, it does not navigate),
   styled exactly like the link it replaces. */
button.auth-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

/* Confirmation note (forgot-password view). Same shape as .auth-error, in the calm green. */
.auth-success {
  padding: 12px 14px;
  background: rgba(107, 155, 127, 0.1);
  border: 1px solid rgba(107, 155, 127, 0.3);
  border-radius: 6px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  display: none;
}

.auth-success.active {
  display: block;
}

/* Reset view: the fields sit in a wrapper (so they can be hidden together when a link has expired);
   give it the same stacked layout as the form around it so spacing and full-width buttons match. */
[data-reset-fields] {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Link text and focus outlines were the pale accent blue (#B9CCDC = 1.58:1 on the modal surface).
   WCAG AA needs 4.5:1 for text and 3:1 for focus indicators; this steel blue is 5.45:1. */
:root { --auth-link: #4A6A85; }