/* =====================================================
   User Forms — Login, Register, Password Reset,
   Profile Edit, Payment Methods.

   Design tokens from base.css. No new design language.
   Card pattern consistent with cart/checkout cards.
   ===================================================== */

/* ══════════════════════════════════════════════════════
   SHARED PAGE LAYOUT — all user form pages
   Body classes injected by events_theme_preprocess_html():
     .is-user-form-page  — all user pages
     .is-user-auth-page  — login / register / password
     .is-user-account-page — edit profile / payment methods
   ══════════════════════════════════════════════════════ */

/* Hide Drupal's default page title block — hero provides the heading */
.is-user-form-page .block-page-title-block {
  display: none !important;
}

/* ══════════════════════════════════════════════════════
   AUTH PAGES — /user/login, /user/register, /user/password
   Narrow centered card layout.
   ══════════════════════════════════════════════════════ */

.is-user-auth-page .main-content__container {
  max-width: 480px;
  padding-block: var(--spacing-12);
}

/* Card wrapper — same shadow/border/radius as commerce cards */
.is-user-auth-page #user-login-form,
.is-user-auth-page #user-register-form,
.is-user-auth-page #user-pass {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-8);
  position: relative;
  overflow: hidden;
}

/* Accent top bar — matches the checkout card accent */
.is-user-auth-page #user-login-form::before,
.is-user-auth-page #user-register-form::before,
.is-user-auth-page #user-pass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-accent);
}

/* ── Secondary links (Register / Forgot password / Back to login) ── */

/* These render as separate <ul> blocks below the form in Drupal */
.is-user-auth-page .user-login-links,
.is-user-auth-page ul.links {
  list-style: none;
  padding: 0;
  margin: var(--spacing-4) 0 0;
  display: flex;
  justify-content: center;
  gap: var(--spacing-6);
  flex-wrap: wrap;
}

.is-user-auth-page .user-login-links li,
.is-user-auth-page ul.links li {
  margin: 0;
}

.is-user-auth-page .user-login-links a,
.is-user-auth-page ul.links a {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.is-user-auth-page .user-login-links a:hover,
.is-user-auth-page ul.links a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

/* ══════════════════════════════════════════════════════
   SHARED FORM ELEMENTS — all user form pages
   Overrides Olivero defaults for inputs, labels, buttons.
   ══════════════════════════════════════════════════════ */

/* Form field spacing */
.is-user-form-page .form-item {
  margin-bottom: var(--spacing-6);
}

/* Labels */
.is-user-form-page .form-item label,
.is-user-form-page .form-item .form-item__label {
  display: block;
  font-size: var(--font-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin-bottom: var(--spacing-2);
  line-height: 1.4;
}

/* Required asterisk — use accent color */
.is-user-form-page abbr[title="This field is required."],
.is-user-form-page abbr[title="required"] {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: none;
}

/* ── Inputs ── */
.is-user-form-page input.form-text,
.is-user-form-page input[type="text"],
.is-user-form-page input[type="email"],
.is-user-form-page input[type="password"],
.is-user-form-page input[type="tel"],
.is-user-form-page input[type="url"],
.is-user-form-page .form-element[type="text"],
.is-user-form-page .form-element[type="email"],
.is-user-form-page .form-element[type="password"] {
  display: block;
  width: 100%;
  padding: 10px var(--spacing-4);
  font-family: var(--font-family);
  font-size: var(--font-md);
  color: var(--color-primary);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.5;
}

.is-user-form-page input.form-text:focus,
.is-user-form-page input[type="text"]:focus,
.is-user-form-page input[type="email"]:focus,
.is-user-form-page input[type="password"]:focus,
.is-user-form-page input[type="tel"]:focus,
.is-user-form-page input[type="url"]:focus,
.is-user-form-page .form-element[type="text"]:focus,
.is-user-form-page .form-element[type="email"]:focus,
.is-user-form-page .form-element[type="password"]:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.12);
}

/* Textarea */
.is-user-form-page textarea.form-textarea,
.is-user-form-page .form-element[type="textarea"] {
  display: block;
  width: 100%;
  padding: 10px var(--spacing-4);
  font-family: var(--font-family);
  font-size: var(--font-md);
  color: var(--color-primary);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  outline: none;
  min-height: 100px;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.is-user-form-page textarea.form-textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.12);
}

/* Select */
.is-user-form-page select.form-select,
.is-user-form-page .form-element[type="select"] {
  display: block;
  width: 100%;
  padding: 10px 36px 10px var(--spacing-4);
  font-family: var(--font-family);
  font-size: var(--font-md);
  color: var(--color-primary);
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236c757d' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.is-user-form-page select.form-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.12);
}

/* Checkbox / radio — accent color */
.is-user-form-page input[type="checkbox"],
.is-user-form-page input[type="radio"] {
  accent-color: var(--color-accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Field description / help text */
.is-user-form-page .form-item__description,
.is-user-form-page .description {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  margin-top: var(--spacing-2);
  line-height: 1.5;
}

/* ── Submit / action buttons ── */
.is-user-form-page .form-actions {
  margin-top: var(--spacing-8);
  display: flex;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  align-items: center;
}

.is-user-form-page .form-actions input[type="submit"],
.is-user-form-page .form-actions .button {
  padding: 11px var(--spacing-8);
  font-family: var(--font-family);
  font-size: var(--font-md);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
  line-height: 1.4;
  text-decoration: none;
  display: inline-block;
}

/* Primary submit */
.is-user-form-page .form-actions input[type="submit"].button--primary,
.is-user-form-page .form-actions .button--primary {
  background: var(--color-accent) !important;
  color: white !important;
  border-color: var(--color-accent) !important;
}

.is-user-form-page .form-actions input[type="submit"].button--primary:hover,
.is-user-form-page .form-actions .button--primary:hover {
  background: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
}

/* Secondary / default submit */
.is-user-form-page .form-actions input[type="submit"]:not(.button--primary):not(.button--danger),
.is-user-form-page .form-actions .button:not(.button--primary):not(.button--danger) {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.is-user-form-page .form-actions input[type="submit"]:not(.button--primary):not(.button--danger):hover,
.is-user-form-page .form-actions .button:not(.button--primary):not(.button--danger):hover {
  background: var(--color-accent);
  color: white;
}

/* Danger button (e.g. delete account) */
.is-user-form-page .form-actions .button--danger {
  background: transparent;
  color: #c62828;
  border-color: #c62828;
}

.is-user-form-page .form-actions .button--danger:hover {
  background: #c62828;
  color: white;
}

/* ══════════════════════════════════════════════════════
   MESSAGES — Error / Status / Warning
   Consistent with overall site messaging.
   ══════════════════════════════════════════════════════ */

.is-user-form-page .messages,
.is-user-form-page .messages--error,
.is-user-form-page .messages--status,
.is-user-form-page .messages--warning {
  padding: var(--spacing-4);
  border-radius: var(--radius);
  border-left: 4px solid;
  margin-bottom: var(--spacing-6);
  font-size: var(--font-sm);
  line-height: 1.5;
}

.is-user-form-page .messages--error {
  background: #fce4ec;
  border-color: var(--color-accent);
  color: #c62828;
}

.is-user-form-page .messages--status {
  background: #e8f5e9;
  border-color: var(--seat-available);
  color: #2e7d32;
}

.is-user-form-page .messages--warning {
  background: #fff8e1;
  border-color: var(--seat-reserved);
  color: #e65100;
}

.is-user-form-page .messages ul {
  margin: var(--spacing-2) 0 0 var(--spacing-4);
  padding: 0;
}

/* ══════════════════════════════════════════════════════
   ACCOUNT PAGES — /user/*/edit, /user/*/payment-methods
   Wider layout with card sections.
   ══════════════════════════════════════════════════════ */

.is-user-account-page .main-content__container {
  max-width: var(--max-width-narrow);
  padding-block: var(--spacing-8);
}

/* Main form wrapper card */
.is-user-account-page .user-form,
.is-user-account-page form[class*="user-form"] {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-8);
  position: relative;
  overflow: hidden;
}

.is-user-account-page .user-form::before,
.is-user-account-page form[class*="user-form"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-accent);
}

/* Fieldset / details sections inside the profile form */
.is-user-account-page fieldset.form-wrapper,
.is-user-account-page details.form-wrapper {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--spacing-6);
  margin-bottom: var(--spacing-6);
  background: var(--color-surface-alt);
}

.is-user-account-page fieldset.form-wrapper legend,
.is-user-account-page details.form-wrapper > summary {
  font-size: var(--font-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  padding: 0 var(--spacing-2);
  cursor: pointer;
}

/* ── Password confirm widget ── */
.is-user-account-page .js-password-parent,
.is-user-account-page .form-type--password-confirm {
  margin-bottom: var(--spacing-6);
}

.is-user-account-page .password-strength__meter {
  height: 4px;
  border-radius: 2px;
  margin-top: var(--spacing-2);
  background: var(--color-border);
}

.is-user-account-page .password-strength__indicator {
  height: 100%;
  border-radius: 2px;
  transition: width var(--transition-base), background var(--transition-base);
}

/* ══════════════════════════════════════════════════════
   PAYMENT METHODS — /user/*/payment-methods
   ══════════════════════════════════════════════════════ */

/* Page header with add-new action */
.is-user-account-page .payment-methods-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-6);
}

/* Each saved payment method row */
.is-user-account-page .views-row,
.is-user-account-page .commerce-payment-method {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: var(--spacing-3);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast);
}

.is-user-account-page .views-row:hover,
.is-user-account-page .commerce-payment-method:hover {
  box-shadow: var(--shadow-md);
}

/* "Add payment method" link — styled as primary button */
.is-user-account-page a[href*="payment-methods/add"],
.is-user-account-page .add-payment-method a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: 10px var(--spacing-6);
  background: var(--color-accent);
  color: white !important;
  border-radius: var(--radius);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none !important;
  transition: background var(--transition-fast);
  margin-top: var(--spacing-4);
  border: 2px solid var(--color-accent);
}

.is-user-account-page a[href*="payment-methods/add"]:hover,
.is-user-account-page .add-payment-method a:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* Delete / edit buttons inside payment method rows */
.is-user-account-page .views-row .dropbutton-widget,
.is-user-account-page .views-row .views-field-operations {
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */

@media (max-width: 576px) {
  .is-user-auth-page .main-content__container {
    padding-block: var(--spacing-8);
  }

  .is-user-auth-page #user-login-form,
  .is-user-auth-page #user-register-form,
  .is-user-auth-page #user-pass {
    padding: var(--spacing-6);
  }

  .is-user-auth-page .form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .is-user-auth-page .form-actions input[type="submit"],
  .is-user-auth-page .form-actions .button {
    width: 100%;
    text-align: center;
    padding: 13px var(--spacing-4);
  }

  .is-user-account-page .main-content__container {
    padding-block: var(--spacing-6);
  }

  .is-user-account-page .user-form,
  .is-user-account-page form[class*="user-form"] {
    padding: var(--spacing-6);
  }

  .is-user-account-page .views-row,
  .is-user-account-page .commerce-payment-method {
    flex-direction: column;
    align-items: flex-start;
  }
}