/* =========================================================
   Beachcomber Payment Portal — LOGIN page overrides only
   Goal: smooth fluid resizing across viewports, exact ~10px
         total grey gutter on phones, and stable row order:
         Row 1 = [Login Button | Error]; Row 2 = Turnstile
   ========================================================= */

/* ---------- Fluid page + card sizing ---------- */
:root {
  /* Page-wide total horizontal gap (left + right combined). */
  --page-gap-total: clamp(16px, 6vw, 96px);
  /* Max width the login card should grow to on large screens. */
  --card-max: 44rem; /* ≈704px; adjust to taste */
}

/* MOBILE PIN: at phone sizes, enforce exactly ~10px total gap
   (≈5px of grey background visible on each side). */
@media (max-width: 480px) {
  :root { --page-gap-total: 10px; }
}

/* Apply the edge padding and layout constraints ONLY on the
   login page container to avoid cross-page side-effects. */
section.account.login-account {
  padding-left: calc(var(--page-gap-total) / 2) !important;
  padding-right: calc(var(--page-gap-total) / 2) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important; /* avoid min-content crunch in children */
}

/* The login card/form should smoothly resize, centered, never
   exceed --card-max, and always leave the computed page gap. */
section.account.login-account .login-card,
section.account.login-account .form,
section.account.login-account .page-card {
  display: block !important;
  width: clamp(280px, calc(100% - var(--page-gap-total)), var(--card-max)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  min-width: 0 !important; /* critical for flex/grid children */
}

/* Defensive: never allow horizontal scrolling on small devices. */
html, body { overflow-x: hidden !important; }

/* ---------- Two-row login actions layout ---------- */
/* Container holds: [button+error] then [Turnstile] */
section.account.login-account .login-actions {
  display: flex !important;
  flex-wrap: wrap !important; /* allow a second row */
  align-items: flex-start !important;
  column-gap: .5rem !important;
  row-gap: .5rem !important;
  min-width: 0 !important;
}

/* Row 1: button + error, side-by-side. This block occupies the
   full width of row 1 and keeps its children on one line. */
section.account.login-account .login-actions .button-group {
  order: 1 !important;
  display: flex !important;          /* override any inline-flex */
  flex-wrap: nowrap !important;      /* keep error on same line */
  align-items: center !important;
  gap: .5rem !important;
  flex: 1 1 100% !important;         /* make this the entire first row */
  min-width: 0 !important;           /* unleash proper flex sizing */
}

/* Inside Row 1: button shouldn't shrink; error takes remaining space
   and wraps its *text*, not the entire box. */
section.account.login-account .login-actions .button-group .btn,
section.account.login-account .login-actions .button-group button {
  flex: 0 0 auto !important;
}
section.account.login-account .login-actions .button-group .errors {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: break-word !important;  /* avoid 1-character columns */
  margin: 0 !important;
}

/* Row 2: Cloudflare Turnstile / captcha — always new line, full width. */
section.account.login-account .login-actions .captcha-block,
section.account.login-account .login-actions #turnstile-container,
section.account.login-account .login-actions .cf-turnstile {
  order: 2 !important;
  flex: 1 1 100% !important; /* force new line */
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;      /* prevent iframe clipping */
}

/* ---------- Make the login card a container (for container queries) ---------- */
/* Lets us react to the card's width (not the viewport) to relax the
   button's min-width only when space is genuinely tight. */
section.account.login-account .login-card { container-type: inline-size; }

/* When the card becomes narrow, allow the login button to shrink so the
   error isn't squashed into a sliver. This is smoother than viewport MQs. */
@container (max-width: 26rem) { /* ≈416px; tweak if needed */
  #login-btn {
    min-width: 0 !important;  /* beats any 18rem defaults */
    width: auto !important;
  }
}

/* Viewport-based fallback for browsers without container queries. */
@media (max-width: 600px) {
  #login-btn { min-width: 0 !important; width: auto !important; }
}

/* ---------- Defensive media for images/icons ---------- */
img, svg { max-width: 100% !important; height: auto !important; }

/* ===== FINAL, HIGH-SPECIFICITY OVERRIDES ===== */

/* Fluid gap + max width */
:root { --page-gap-total: clamp(16px, 6vw, 96px); --card-max: 44rem; }
@media (max-width: 480px) { :root { --page-gap-total: 10px; } }

/* Page edge gap on LOGIN page */
html body section.account.login-account {
  padding-left: calc(var(--page-gap-total)/2) !important;
  padding-right: calc(var(--page-gap-total)/2) !important;
  width: 100% !important; max-width: 100% !important;
  margin: 0 !important; box-sizing: border-box !important; min-width: 0 !important;
}

/* Make the card/form FLUID and CENTER it even if parent is flex-right */
html body section.account.login-account .login-card,
html body section.account.login-account .form,
html body section.account.login-account .page-card {
  display: block !important;
  width: clamp(280px, calc(100% - var(--page-gap-total)), var(--card-max)) !important;
  max-width: none !important;            /* defeat 420px cap */
  margin-left: auto !important;
  margin-right: auto !important;         /* centers inside block or flex */
  margin-inline: auto !important;
  align-self: center !important;         /* centers inside flex parent */
  float: none !important;
  box-sizing: border-box !important; min-width: 0 !important;
}

/* Two-row layout: Row 1 = button+error; Row 2 = Turnstile */
html body section.account.login-account .login-actions {
  display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important;
  column-gap: .5rem !important; row-gap: .5rem !important; min-width: 0 !important;
}
html body section.account.login-account .login-actions .button-group {
  order: 1 !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important;
  gap: .5rem !important; flex: 1 1 100% !important; min-width: 0 !important;
}
html body section.account.login-account .login-actions .button-group .btn,
html body section.account.login-account .login-actions .button-group button { flex: 0 0 auto !important; }
html body section.account.login-account .login-actions .button-group .errors {
  flex: 1 1 auto !important; min-width: 0 !important; max-width: 100% !important;
  white-space: normal !important; word-break: break-word !important; margin: 0 !important;
}
html body section.account.login-account .login-actions .captcha-block,
html body section.account.login-account .login-actions #turnstile-container,
html body section.account.login-account .login-actions .cf-turnstile {
  order: 2 !important; flex: 1 1 100% !important; display: block !important;
  width: 100% !important; max-width: 100% !important; overflow: visible !important;
}

/* Relax button min-width so it won't crush the error */
html body section.account.login-account .login-actions #login-btn {
  min-width: 0 !important; width: auto !important;
}

/* No sideways scroll */
html, body { overflow-x: hidden !important; }

/* ⛏️ Fix the narrow wrapper that’s constraining the form */
section.account.login-account > section {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* Belt-and-braces: defeat any legacy width caps that still leak through */
section.account.login-account .login-card {
  width: clamp(280px, calc(100% - var(--page-gap-total)), var(--card-max)) !important;
  max-width: none !important;   /* override 420px caps from legacy css */
  margin-left: auto !important;
  margin-right: auto !important;
}