/* =========================================================
   Ren & Remy’s — Authentication Page Styles
   Combined layout + registration form structure
   ========================================================= */
:root {
  --pink: #E899F2;
  --cyan: #9BE2F2;
  --ink: #0d0d0d;
  --ink-2: #1a1a1a;
  --ink-70: rgba(0, 0, 0, 0.7);
  --white: #f2f2f2;
}

/* =========================================================
   Global
   ========================================================= */
html, body {
  height: 100%;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  color: var(--white);
  background: linear-gradient(135deg, #003d61 25%, #2f004a 100%);
}

h1, h2, h3, h4 {
  color: var(--white);
  margin: 0 0 1rem;
}

/* =========================================================
   Viewport & Card
   ========================================================= */
.auth-viewport {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 40px;   /* keep top visual breathing room */
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 0;   /* remove extra space below buttons */
}

.auth-card, .auth-container {
  /* Constrained centered card. Padding reduced by ~50% for a tighter layout. */
  width: 75%;
  max-width: 900px;
  min-width: 360px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border-radius: 14px;
  padding: 16px 14px; /* halved */
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  margin: 0 auto;
 }

/* =========================================================
   Banner / Title
   ========================================================= */
.auth-banner {
  width: 75%;
  max-width: 400px;
}
.auth-banner img {
  width: 100%;
  height: auto;
  display: block;
}

.auth-title {
  font-size: 1.8rem;
  font-weight: 600;
  text-align: center;
  color: var(--white);
  margin-bottom: 0.4rem; /* tightened spacing under title */
}

.hint {
  display: block;
  margin-top: 6px;
  font-size: 0.9rem;
  color: rgba(242,242,242,0.8);
}

/* Privacy modal styles */
.privacy-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  z-index: 100000;
}
.privacy-dialog {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border-radius: 10px;
  padding: 22px;
  max-width: 680px;
  width: calc(80% - 40px);
  color: var(--white);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  text-align: left;
}
.privacy-dialog h2 { margin-top: 0; }
.privacy-dialog p { margin: 10px 0 16px; }
.privacy-actions { display:flex; justify-content:flex-end; }
.privacy-actions .auth-btn { width: auto; padding: 10px 14px; }

/* =========================================================
   Form Structure
   ========================================================= */
.auth-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px; /* tightened vertical rhythm */
  text-align: left;
}

.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 4px; /* slightly tighter label spacing */
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* Input / select universal look */
.auth-form input,
.auth-form select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: var(--white);
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-form input::placeholder {
  color: rgba(255,255,255,0.55);
}

.auth-form input:focus,
.auth-form select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
}

/* Make readonly/disabled inputs appear visually muted like traditional sites */
.auth-form input[readonly],
.auth-form input[disabled],
.auth-form select[disabled],
.auth-form textarea[readonly] {
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.6);
  border-color: rgba(255,255,255,0.08);
  cursor: not-allowed;
}

/* Two/three-column rows for desktop */
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* increased gap to ensure visible separation */
}

/* Uniform width for all field-half elements - exact same width for all */
.form-row label.field-half,
.form-row .field-half {
  flex: 0 0 42%; /* no grow/shrink, fixed 42% width */
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Small and xsmall helpers for tight right-column fields (state/zip) */
.form-row .field-small {
  flex: 0 0 18%;
  min-width: 90px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-row .field-xsmall {
  flex: 0 0 10%;
  min-width: 70px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Nudge small/xsmall right a little and center their controls vertically */
.form-row .field-small,
.form-row .field-xsmall {
  margin-left: 28px; /* nudged ~20px further to the right */
  justify-content: center; /* vertically center the inner select/input */
}

/* Shift right-column fields (second field-half in each row) to the right */
.form-row label.field-half:nth-child(2),
.form-row label.field-half:nth-child(even) {
  margin-left: 20px;
}

.form-row label {
  /* Default: two-column behaviour -> each label attempts to take 50% */
  flex: 1 1 calc(50% - 10px);
  min-width: 220px;
}

.form-row.single label {
  flex-basis: 100%;
}

/* Apply the same block styling to any element using the .contact-method helper
   (fieldsets or divs). This lets us use a div inside a <label> while preserving
   the previous fieldset visual treatment. */
.contact-method {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  gap: 12px;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
}

.contact-method legend {
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0 6px;
}

/* =========================================================
   Actions / Buttons / Captcha
   ========================================================= */
.g-recaptcha {
  margin: 4px auto; /* reduce vertical spacing around captcha */
  transform: scale(0.95);
  transform-origin: center;
}

.auth-btn, .btn-primary {
  width: 100%;
  padding: 12px 14px; /* slightly smaller button padding */
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  background: linear-gradient(180deg, var(--cyan), var(--pink));
  color: var(--ink);
  transition: transform 80ms ease, box-shadow 120ms ease;
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
}

.auth-btn:hover, .btn-primary:hover {
  box-shadow: 0 0 16px var(--pink);
}

.auth-btn:active, .btn-primary:active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}

 .auth-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px; /* tighten actions spacing */
  align-items: center;
  margin-top: 6px; /* reduce space above actions */
}

/* Scope buttons inside the login form so they match the input width and are centered */
#login-form .auth-actions {
  align-items: center;
}
#login-form .auth-actions .auth-btn {
  width: 50%;           /* match the label/input width */
  min-width: 280px;
  max-width: 520px;
}
#login-form .auth-actions .sign-up-btn {
  width: 50%;
  min-width: 280px;
  max-width: 520px;
}
#login-form .auth-actions .auth-btn,
#login-form .auth-actions .sign-up-btn {
  width: 50%;           /* match the label/input width */
  min-width: 280px;
  max-width: 520px;
}

/* Align the "Forgot my password" link under the left edge of the password field.
   Make it the same width as the inputs and center it so its left edge lines up. */
#login-form .auth-forgot {
  display: block;
  width: 50%;
  min-width: 280px;
  max-width: 520px;
  align-self: center;   /* center so left edge matches inputs */
  text-align: left;     /* keep text left-aligned inside the button */
  background: none;
  border: none;
  padding: 0;
}

@media (max-width: 640px) {
  #login-form .auth-actions .auth-btn,
  #login-form .auth-actions .sign-up-btn {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
    #login-form .auth-forgot {
      width: 100%;
      min-width: 0;
      max-width: none;
      text-align: left;
      align-self: stretch;
    }
}

.auth-forgot {
  align-self: flex-start;
  font-size: 0.9rem;
  color: rgba(242,242,242,0.85);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

.auth-forgot:hover {
  color: var(--cyan);
}

/* =========================================================
   Notes & Return Links
   ========================================================= */
.auth-note {
  font-size: 0.85rem;
  color: rgba(242,242,242,0.7);
  text-align: center;
  margin-top: 10px;
}

.return-link {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  color: var(--cyan);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.2s ease;
  z-index: 9999; /* ensure link sits above centered card and any overlays */
}
.return-link:hover {
  color: var(--pink);
}

/* When a page provides a top-left return link, push the main auth container down
   so the link doesn't overlap the form. This targets pages that add the
   `with-return` class on the body element. */
.with-return .auth-container {
  padding-top: 72px; /* large enough to clear the link on desktop */
}

/* =========================================================
   Login page specific tweaks
   - Make the email/password fields half-width and centered
   - Keep responsive behavior for small screens
   ========================================================= */
#login-form {
  display: flex;
  flex-direction: column;
  align-items: center; /* center the labels (which become constrained blocks) */
}

#login-form label {
  width: 50%;           /* make each label + input take half the card width */
  min-width: 280px;     /* avoid too-small fields on medium screens */
  max-width: 520px;     /* reasonable upper bound */
  margin: 4px 0;        /* vertical spacing between fields (tighter) */
}

/* On narrow viewports, revert to full-width stacking */
@media (max-width: 640px) {
  #login-form label {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}

/* =========================================================
   Spacer for fixed header pages (if used)
   ========================================================= */
.header-spacer {
  /* Default small spacer for mobile / narrow viewports */
  height: 56px;
  min-height: 56px;
}

/* =========================================================
   Page-specific: opt-in fixed, non-scrolling layout for auth pages
   - Pages opt-in by adding `class="auth-fixed"` to the <body>
   - Desktop: lock viewport to a single centered card (no scroll)
   - Mobile: allow normal scrolling for accessibility
   ========================================================= */
body.auth-fixed {
  height: 100vh;
  overflow: hidden;
}

body.auth-fixed .auth-viewport {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0; /* remove extra header/footer spacing */
}

@media (max-width: 640px) {
  body.auth-fixed {
    height: auto;
    overflow: auto; /* restore scrolling on small screens */
  }
  body.auth-fixed .auth-viewport {
    padding: 40px 20px; /* restore mobile padding to auth viewport */
    min-height: auto;
  }
}

/* On wide screens header is 108px high — ensure content isn't hidden */
@media (min-width: 993px) {
  .header-spacer { height: 108px; min-height: 108px; }
}

/* Constrain inner form area to avoid full-width stretching on large displays */
.auth-inner {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

/* =========================================================
   Contact Row (Phone + Preferred Contact) — Clean Version
   ========================================================= */
.contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* match form-row gap */
  align-items: flex-end;
  width: 100%;
}

/* Phone field and preferred contact - both 45% to align with form columns */
.contact-row .field-half,
.contact-row .flex-half {
  flex: 0 0 42%; /* exact same width as other field-half elements */
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Remove left margin - let flex layout handle alignment */
.contact-method-inline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-left: 20px; /* align with right-column fields */
}

.contact-method-inline .label-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 2px;
}

/* Radios now inline with no opaque box */
.contact-method-inline .radio-group {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0; /* remove input-like padding */
  border: none;
  background: none;
}

.contact-method-inline .radio-group label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  color: var(--white);
  cursor: pointer;
}

.contact-method-inline input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--pink);
  margin: 0;
  vertical-align: middle;
}

/* Remove legacy conflicts */
.contact-grid,
.pseudo-input,
.contact-method,
fieldset.contact-method {
  all: unset;
  display: contents;
}

/* Responsive stack */
@media (max-width: 640px) {
  .contact-row {
    flex-direction: column;
    align-items: stretch;
  }
  .contact-method-inline .radio-group {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

/* Cookie consent banner (FCC-style simple implementation) */
.cookie-consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.75));
  color: #fff;
  padding: 14px 16px;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  z-index: 120000;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  /* ensure the banner and its buttons can receive clicks even if other
     overlays exist on the page (defensive) */
  pointer-events: auto;
}
.cookie-consent .consent-text { flex: 1 1 480px; font-size: 0.95rem; line-height: 1.3; }
.cookie-consent .consent-actions { display:flex; gap:8px; align-items:center; }
.cookie-consent .consent-actions .auth-btn { padding: 10px 12px; }
.cookie-consent .consent-actions .btn-decline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.12); padding: 10px 12px; border-radius:8px; cursor:pointer; }

/* Styling hooks: make sure consent-accept/consent-decline classes match the beautiful auth styles */
.cookie-consent .consent-actions .consent-accept { padding: 10px 12px; }
.cookie-consent .consent-actions .consent-decline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.12); padding: 10px 12px; border-radius:8px; cursor:pointer; }

/* Fade-out helper used by the cookie-consent include JS to remove banner
  without leaving invisible overlays that block clicks. */
.cookie-consent.pl-consent-fade { opacity: 0; transition: opacity .28s ease; pointer-events: none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 640px) {
  .auth-card, .auth-container {
    padding: 22px;
  }

  .form-row {
    flex-direction: column;
  }

  fieldset.contact-method {
    flex-direction: column;
    align-items: flex-start;
  }

  .auth-banner {
    width: 90%;
  }
}

/* Put the "Stay logged in" checkbox and label on the same row */
.auth-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* target the label specifically */
.auth-actions .remember-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  margin: 8px 0;
}

/* make sure checkbox doesn’t shrink oddly */
.auth-actions .remember-wrapper input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
}

/* Override stacking behavior for remember-wrapper only (login form) */
#login-form .auth-actions .remember-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 50%;
  min-width: 280px;
  max-width: 520px;
  margin: 4px auto 6px;
}

#login-form .auth-actions .remember-wrapper input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--pink);
}

#login-form .auth-actions .remember-wrapper label {
  font-size: 0.95rem;
  color: rgba(242,242,242,0.9);
  margin: 0;
}