/*
 * LocalProxies aMember Theme
 * Design system: DM Sans + Instrument Serif, mirrors react-homepage-v2.
 * Tokens below map 1:1 to react-homepage-v2/src/index.css @theme.
 */

/* ═══════════════════════════════════════════
   TOKENS — source of truth: react-homepage-v2/src/index.css
   ═══════════════════════════════════════════ */

:root {
  /* Teal (primary accent) */
  --lp-teal-50:  #f0fdfa;
  --lp-teal-100: #ccfbf1;
  --lp-teal-200: #99f6e4;
  --lp-teal-400: #2dd4bf;
  --lp-teal-500: #14b8a6;
  --lp-teal-600: #0d9488;
  --lp-teal-700: #0f766e;
  --lp-teal-800: #115e59;
  --lp-teal-900: #134e4a;

  /* Emerald (success / accent) */
  --lp-emerald-50:  #ecfdf5;
  --lp-emerald-700: #047857;

  /* Stone (warm neutrals — the v2 "sandy" family) */
  --lp-sandy:     #FAF8F6;
  --lp-stone-50:  #fafaf9;
  --lp-stone-100: #f5f5f4;
  --lp-stone-200: #e7e5e4;
  --lp-stone-300: #d6d3d1;
  --lp-stone-400: #a8a29e;
  --lp-stone-500: #78716c;
  --lp-stone-600: #57534e;
  --lp-stone-700: #44403c;
  --lp-stone-900: #1c1917;

  /* Slate (cool neutrals — pre-existing chrome) */
  --lp-slate-50:  #f8fafc;
  --lp-slate-100: #f1f5f9;
  --lp-slate-200: #e2e8f0;
  --lp-slate-500: #64748b;
  --lp-slate-600: #475569;
  --lp-slate-900: #0f172a;

  /* Red (destructive actions — delete, cancel account) */
  --lp-red-600: #dc2626;
  --lp-red-700: #b91c1c;

  /* Typography */
  --lp-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --lp-font-display: 'Instrument Serif', Georgia, serif;
}

/* ═══════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

/* v2 rule: affordance only on things you can click. Prevents the
   "strange hovers under everything" feel. */
a, button, summary, [role="button"], input[type="submit"], input[type="button"], label[for] {
  cursor: pointer;
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #f8fafc;
  color: #475569;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Universal teal hero — every member page that uses layout-localproxies.phtml
   gets the same teal wash at the top, matching the main react v2 landing.
   Covers header + tabs + section title + first card. */
body:has(.lp-main) {
  background: linear-gradient(
    to bottom,
    rgb(238, 247, 245) 0,
    rgb(238, 247, 245) 480px,
    #f8fafc 580px,
    #f8fafc 100%
  ) !important;
  background-attachment: local !important;
  background-repeat: no-repeat !important;
}

/* /proxy-ports extends the teal zone through the bandwidth-usage section. */
body:has(.bw_div) {
  background: linear-gradient(
    to bottom,
    rgb(238, 247, 245) 0,
    rgb(238, 247, 245) 1340px,
    #f8fafc 1440px,
    #f8fafc 100%
  ) !important;
  background-attachment: local !important;
  background-repeat: no-repeat !important;
}

a { color: #0d9488; text-decoration: none; }
a:hover { color: #0f766e; }

h1, h2, h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  color: #0f172a;
  letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════ */

.lp-header {
  background: rgba(238, 247, 245, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(13, 148, 136, 0.1);
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
}

.lp-header-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lp-wordmark {
  font-size: 1.2rem;
  font-weight: 500;
  color: #0f172a !important;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}
.lp-wordmark img,
.lp-wordmark svg { height: 28px; width: auto; display: block; }

.lp-header-nav {
  display: flex;
  gap: 1.5rem;
}

.lp-header-nav a {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #64748b;
  transition: color 0.15s;
}

.lp-header-nav a:hover { color: #0f172a; }

@media (max-width: 480px) {
  .lp-header-nav { display: none; }
}

/* ═══════════════════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════════════════ */

.lp-main {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1.5rem;
}

/* Auth pages (login, signup) — vertically centered card */
body[class*="am-page-login"] .lp-main,
body[class*="am-page-signup"] .lp-main {
  align-items: center;
}

.lp-container {
  width: 100%;
  max-width: 28rem; /* 448px — matches demo/shared.css L53 (440px) within 1 column gutter */
  margin: 0 auto;
}

/* Member dashboard — wider layout.
   NOTE: main.phtml sets $body_class but layout-localproxies.phtml reads
   $bodyClass (camelCase), so the <body> element has no class on /member.
   We scope by unique DOM markers instead:
     - .am-layout-two-coll → /member dashboard (main.phtml only)
     - .am-account-toolbar → any member-area page with the tab bar
     - [class*="am-page-profile"] kept as fallback if/when that body
       class IS emitted (profile.phtml sets it directly). */
body.am-page-main .lp-container,
body[class*="am-page-profile"] .lp-container,
body:has(.am-layout-two-coll) .lp-container,
body:has(> .lp-main .am-account-toolbar):not(:has(.am-signup-form)):not(:has(.am-auth-form)) .lp-container {
  max-width: 72rem;
}

/* Signup card width — demo uses 35rem (560px) per shared.css L53.
   New-user /signup: narrow 35rem container (no nav tabs present).
   Logged-in /add-renew: widen container to 48rem so 4 nav tabs fit
   ("Add/Renew Subscription" label is too long at 35rem/4), but keep
   the signup-form card itself centred at 35rem. */
body:has(.am-signup-form):not(:has(.am-account-toolbar)) .lp-container {
  max-width: 35rem;
}
body:has(.am-signup-form):has(.am-account-toolbar) .lp-container {
  max-width: 48rem;
}
body:has(.am-signup-form):has(.am-account-toolbar) .am-signup-form {
  max-width: 35rem;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════
   PAGE TITLES — Instrument Serif, hero scale
   ═══════════════════════════════════════════ */

.am-body-content-top h1 {
  font-family: var(--lp-font-display);
  font-weight: 400;
  font-size: 2.75rem;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-align: left;
  color: var(--lp-stone-900);
  margin: 0.5rem 0 1.5rem;
}

/* Member inner pages: a calmer hero (no subtitle row) */
body.am-page-member .am-body-content-top h1,
body.am-page-profile .am-body-content-top h1,
body.am-page-proxy-ports .am-body-content-top h1,
body.am-page-member-payment-history .am-body-content-top h1 {
  margin: 0 0 1.75rem;
}

@media (max-width: 640px) {
  .am-body-content-top h1 { font-size: 2rem; }
}

/* ═══════════════════════════════════════════
   FORM CARD (login, signup, sendpass)
   ═══════════════════════════════════════════
   Signup DOM chain is .am-signup > .am-form > form.am-signup-form.
   The .am-signup div is the ONE frame we want on signup. The inner
   .am-form div and the <form> itself each need their vendor defaults
   (12px card + 3px #ddd border respectively) neutralized so we don't
   render three nested frames.

   Login DOM is .am-form.am-auth-form (no .am-signup wrapper), so the
   .am-form card rule must still apply there. We handle this by
   keeping .am-form as a card by default, then stripping it when
   nested inside .am-signup via a more-specific rule below. */

.am-form,
.am-signup {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* On signup the .am-form sits inside .am-signup — strip the inner
   frame so there's no double card. Specificity 0,2,0 beats the
   0,1,0 rule above without !important. */
.am-signup .am-form {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  margin: 0;
}

/* Vendor rule `.am-form form { border:1px solid #ddd; border-radius:3px;
   box-shadow:0 1px 1px -1px #b0b0b0 }` (amember.css L1894) puts a
   3rd frame on form.am-signup-form and on login's .am-login-form-form.
   Kill it uniformly — our card lives on the .am-form/.am-signup div,
   the <form> element itself should be frameless.
   Specificity 0,2,1 beats vendor 0,1,1. */
.am-body-content .am-form form,
.am-body-content .am-signup form {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* ── Form rows ── */

.am-row {
  margin-bottom: 1rem;
}

.am-row:last-child { margin-bottom: 0; }

/* ── Labels ── */

.am-element-title,
.element-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 0.3rem;
  display: block;
}

.am-element-title .comment,
.element-title .comment {
  font-size: 0.6875rem;
  color: #94a3b8;
  font-weight: 400;
  margin-top: 0.15rem;
}

.required { color: #ef4444; }

/* ── Inputs ── */

.am-body-content input[type="text"],
.am-body-content input[type="email"],
.am-body-content input[type="password"],
.am-body-content textarea,
.am-body-content select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8125rem;
  color: #0f172a;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* Every <select> inherits the demo's custom chevron — kill native OS
   chrome + draw an inline SVG caret right-aligned. */
.am-body-content select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}

.am-body-content input:focus,
.am-body-content textarea:focus,
.am-body-content select:focus {
  border-color: #0d9488;
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.12);
}

.am-body-content input::placeholder,
.am-body-content textarea::placeholder { color: #cbd5e1; }

/* Name fields side by side — 2-column grid so validation error spans fall
   into row 2 (under their input) instead of stealing horizontal space and
   squishing the inputs on the same line. */
#row-name-0 .am-element.group,
.am-element.group:has(#name_f) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem 0.625rem;
}

#row-name-0 .am-element.group input,
.am-element.group:has(#name_f) input {
  min-width: 0;
  width: 100%;
}

/* ── Buttons (signup/login only — member pages get their own sizing) ── */

.am-signup input[type="submit"],
.am-signup button[type="submit"],
.am-signup .am-cta-signup,
.am-auth-form input[type="submit"],
.am-auth-form button[type="submit"],
body[class*="am-page-login"] .am-body-content input[type="submit"],
body[class*="am-page-signup"] .am-body-content input[type="submit"],
body[class*="am-page-sendpassword"] .am-body-content input[type="submit"] {
  display: block;
  width: 100%;
  padding: 0.75rem 1.5rem;
  font-family: var(--lp-font-sans);
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  background: var(--lp-teal-600);
  border: 1px solid var(--lp-teal-600);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  margin-top: 0.5rem;
}

.am-signup input[type="submit"]:hover,
.am-signup button[type="submit"]:hover,
.am-signup .am-cta-signup:hover,
.am-auth-form input[type="submit"]:hover,
.am-auth-form button[type="submit"]:hover,
body[class*="am-page-login"] .am-body-content input[type="submit"]:hover,
body[class*="am-page-signup"] .am-body-content input[type="submit"]:hover,
body[class*="am-page-sendpassword"] .am-body-content input[type="submit"]:hover {
  background: var(--lp-teal-700);
  box-shadow: 0 10px 20px -6px rgba(13, 148, 136, 0.35);
  transform: translateY(-1px);
}

/* Secondary buttons / links */
.am-form-login-switch a,
.am-signup-link a {
  color: #0d9488;
  font-weight: 600;
  font-size: 0.8125rem;
}

/* ── Validation errors ── */

.am-error,
span.am-error,
label.am-error {
  color: #ef4444;
  font-size: 0.75rem;
  display: block;
  margin-top: 0.25rem;
}

.am-body-content input.am-error,
.am-body-content input.error {
  border-color: #ef4444 !important;
}

.am-body-content input.am-error:focus,
.am-body-content input.error:focus {
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.12) !important;
}

/* ── Password strength ── */

/* The password input is wrapped in .am-pass-indicator-wrap for the
   strength meter; ensure the wrap goes full-width so the input (which
   is 100% of the wrap) fills the row like sibling fields. */
.am-pass-indicator-wrap {
  width: 100%;
  display: block;
}

.am-pass-indicator + div,
.am-pass-strength {
  height: 3px;
  border-radius: 2px;
  margin-top: 0.375rem;
  background: #e2e8f0;
}

/* ═══════════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════════ */

/* Login modal (the ajax popup opened by the "log in" link on /signup).
   aMember's default .am-popup is 360px wide → after its 20px padding and
   the form's padding the inner content area is only ~256px, while the
   reCAPTCHA widget is 304px — so it overflowed and got clipped by the
   popup's overflow:hidden ("reCAPTCH…"). Widen the popup (only when it
   holds the login/sendpass form) and let the form fill it so the
   reCAPTCHA fits; clamp to the viewport so it never overflows on mobile. */
.am-popup.am-common:has(.am-login-form),
.am-popup.am-common:has(.am-auth-form) {
  width: min(26rem, calc(100vw - 1rem)) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 1rem) !important;
}
.am-popup.am-common:has(.am-login-form) .am-login-form-wrapper,
.am-popup.am-common:has(.am-login-form) .am-login-form,
.am-popup.am-common:has(.am-auth-form) .am-auth-form {
  max-width: none !important;
  width: 100% !important;
}
.am-popup.am-common:has(.am-login-form) .am-login-form,
.am-popup.am-common:has(.am-auth-form) .am-auth-form {
  padding: 1.5rem !important;
}
@media (max-width: 460px) {
  .am-popup.am-common:has(.am-login-form),
  .am-popup.am-common:has(.am-auth-form) {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  .am-popup.am-common:has(.am-login-form) .am-login-form,
  .am-popup.am-common:has(.am-auth-form) .am-auth-form {
    padding: 1rem !important;
  }
}

.am-login-form fieldset,
.am-sendpass-form fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

/* Vendor `.am-form fieldset legend` (amember.css L1917) has
   background:#f8f9f9 + border-bottom:1px #d5d5d5, producing a grey
   band and a divider line under the legend. Our plain `.am-login-form
   legend` is (0,1,1) which loses to vendor (0,1,2) — prefix with
   `.am-body-content` (0,2,1) so 2 classes > 1 class wins. */
.am-body-content .am-login-form legend,
.am-body-content .am-sendpass-form legend {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: #0f172a;
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 1.25rem;
  padding: 0;
  background: transparent;
  border-bottom: none;
}

/* Remember me checkbox */
#am-form-login-remember {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: #64748b;
  margin: 0.5rem 0;
}

#am-form-login-remember input[type="checkbox"] {
  accent-color: #0d9488;
  width: auto;
}

/* Login buttons row */
.am-login-form .am-row-buttons,
.am-sendpass-form .am-row-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.am-login-form .am-row-buttons input[type="submit"],
.am-sendpass-form .am-row-buttons input[type="submit"] {
  width: 100%;
}

/* Forgot password / login switch — sits right under the submit button
   inside `.am-row-buttons > .am-element`. The wrapper is an inline
   <span> so `text-align:center` on it does nothing; the block parent
   needs to center. We display:block the wrapper so it takes a row,
   then use teal for the link (was muted grey #94a3b8 — dead-looking)
   to match the demo's anchor aesthetic (demo/shared.css L20). */
.am-auth-form .am-row-buttons .am-element {
  text-align: center;
}

.am-form-login-switch-wrapper {
  display: block;
  text-align: center;
  margin-top: 0.75rem;
}

.am-form-login-switch {
  font-size: 0.75rem;
  font-weight: 600;
  color: #0d9488;
}

.am-form-login-switch:hover {
  color: #0f766e;
}

/* Signup link below login */
.am-signup-link {
  text-align: center;
  font-size: 0.8125rem;
  color: #94a3b8;
  margin-top: 1.25rem;
}

/* ═══════════════════════════════════════════
   LOGIN PAGE — STRIP VENDOR AUTH-FORM STYLING
   ═══════════════════════════════════════════
   Vendor amember.css treats .am-auth-form (login + sendpass) as a
   distinct widget with its own quirks we need to neutralise so login
   matches signup's clean-card look:

   - L2395: `.am-auth-form div.am-row { background: #f9f9f9 }` —
     stripes every row grey, producing a visible inner grey plate
     inside our white card.
   - L2350: `.am-auth-form div.am-element-title { display: none }`
     hides labels at < 500px viewport (only shown at 500px+), which
     is fine at desktop width but inconsistent with signup's always-
     visible label treatment.
   - L2359 / L2372: username + password inputs get a base64 user/key
     icon background + padding-left:30px, making them inconsistent
     with other inputs.
   - L2347: label font-weight: normal (we want 600 via signup rules).
   - L2384: submit text-transform: uppercase at < 500px.
   - L1980-L2022: two-column `.am-element-title` float-left 35% +
     `.am-element` margin-left 35% (same vendor rule signup fights). */

/* Kill the grey row plate so the card interior is uniform white. */
.am-auth-form .am-row,
.am-auth-form div.am-row {
  background: transparent;
}

/* Kill the vendor user/key icon backgrounds + padding on username and
   password inputs — we want inputs to match the rest of the theme. */
.am-body-content .am-auth-form input[name="login"],
.am-body-content .am-auth-form input[name="amember_login"],
.am-body-content .am-auth-form input[name="amember_pass"] {
  background-image: none;
  padding-left: 0.75rem;
  border-radius: 0.375rem;
  line-height: normal;
}

/* Kill uppercase on submit at small viewports. */
.am-body-content .am-auth-form input[type="submit"],
.am-body-content .am-auth-form button {
  text-transform: none;
}

/* Stacked-label layout on auth pages — mirror the signup treatment.
   Scope via .am-auth-form (login + sendpass) since body class is empty
   on these pages (verified via DOM probe 2026-04). Vendor L2350 hides
   .am-element-title at < 500px; force it visible and full-width. */
.am-auth-form .am-form div.am-element-title,
.am-auth-form div.am-element-title,
.am-auth-form div.am-element-title:first-child {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
  text-align: left;
  padding: 0;
  margin: 0 0 0.3rem;
  border-radius: 0;
}

.am-auth-form .am-form div.am-element,
.am-auth-form div.am-element {
  float: none;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  padding: 0;
}

.am-auth-form .am-form div.am-row,
.am-auth-form div.am-row {
  margin: 0 0 0.875rem;
  padding: 0;
}

.am-auth-form .am-form div.am-row:last-child,
.am-auth-form div.am-row:last-child {
  margin-bottom: 0;
}

/* Label typography — match signup .am-element-title label treatment
   (0.75rem semibold #0f172a). Vendor L2347 sets font-weight:normal
   on .am-auth-form div.am-element-title label; we beat that here. */
.am-auth-form .am-form div.am-element-title label,
.am-auth-form div.am-element-title label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0;
  padding: 0;
  display: block;
}

/* ═══════════════════════════════════════════
   SIGNUP PAGE — STACKED LABEL LAYOUT
   ═══════════════════════════════════════════
   Vendor amember.css (L1980-L2022) floats .am-element-title left at
   35% width with text-align:right, and margin-lefts .am-element by
   35% — creating the old two-column "label right of input left" layout
   we don't want. The demo uses labels stacked ABOVE the input, both
   full-width. Override those vendor rules on the signup page only —
   scoped by body:has(.am-signup-form) because aMember's signup
   controller does NOT set a body class on /signup (verified via DOM
   probe 2026-04). Other pages (admin, legacy) still rely on the 2-col
   layout, so they're not touched.

   Global reset at L748 already zeros `.am-element` float/width on every
   page, but the vendor title float + margin-left on .am-element are
   the load-bearing rules producing the visual 2-col split. We kill
   both here. */

body:has(.am-signup-form) .am-form div.am-element-title,
body:has(.am-signup-form) .am-form div.am-element-title:first-child {
  float: none;
  width: 100%;
  max-width: 100%;
  text-align: left;
  padding: 0;
  margin: 0 0 0.3rem;
  border-radius: 0;
}

body:has(.am-signup-form) .am-form div.am-element {
  float: none;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  padding: 0;
}

/* Per-row spacing (the vendor rule above reset padding to 0; restore
   inter-row gap via margin on .am-row). */
body:has(.am-signup-form) .am-form div.am-row {
  margin: 0 0 1.5rem !important;
  padding: 0;
}

body:has(.am-signup-form) .am-form div.am-row:last-child {
  margin-bottom: 0 !important;
}

/* Smaller, quieter placeholder on signup inputs — we move the vendor's
   .comment helper text into the placeholder via theme.js, so it needs to
   read as a soft hint, not a label. */
body:has(.am-signup-form) .am-form input::placeholder {
  font-size: 0.75rem;
  color: var(--lp-stone-400);
  opacity: 1;
}
/* Vendor amember.css inherits cursor:pointer onto inputs from a parent
   label/row rule; force the text caret so users don't see a "link" cursor
   over the actual fields. */
body:has(.am-signup-form) .am-form input[type="text"],
body:has(.am-signup-form) .am-form input[type="email"],
body:has(.am-signup-form) .am-form input[type="password"],
body:has(.am-signup-form) .am-form input[type="tel"],
body:has(.am-signup-form) .am-form input[type="url"],
body:has(.am-signup-form) .am-form input[type="number"],
body:has(.am-signup-form) .am-form input[type="search"],
body:has(.am-signup-form) .am-form textarea {
  cursor: text;
}
/* Reserve room on the right of password fields so browser password-
   manager extensions (1Password, Bitwarden, Keeper…) don't overlap the
   placeholder / input value with their injected badge. */
body:has(.am-signup-form) .am-form input[type="password"] {
  padding-right: 2.5rem;
}
/* Hide the vendor's password strength meter — it renders as a stray
   horizontal line in some browsers and the placeholder already surfaces
   the length rule. */
body:has(.am-signup-form) .am-pass-indicator-bar { display: none !important; }
/* Drop the red "*" required-marker on signup labels — everything in the
   form is required, so it's noise. Same treatment for per-field helper
   comments (password rules surface as a placeholder instead) and the
   reCAPTCHA row title (the widget already says "I'm not a robot"). */
body:has(.am-signup-form) .am-form .required,
body:has(.am-signup-form) .am-form .comment,
body:has(.am-signup-form) .am-form .am-element-comment,
body:has(.am-signup-form) #row-grp-captcha .am-element-title { display: none; }

/* Label typography on signup rows — match demo .lp-label
   (0.75rem semibold, #0f172a, bottom margin small). The vendor rule
   `.am-form div.am-element-title label { font-weight:bold }` beats
   our `.am-element-title` typography without this scope. */
body:has(.am-signup-form) .am-form div.am-element-title label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0;
  padding: 0;
  display: block;
}

/* ═══════════════════════════════════════════
   SIGNUP PAGE — PRODUCT LIST (always-expanded)
   ═══════════════════════════════════════════
   theme.js wraps the aMember-emitted product radio labels in a
   .am-product-select wrapper, renames the title to "Port Type", and
   injects "Sticky"/"Rotating" section dividers. The list is NOT
   collapsible — every plan stays visible at a glance. Card-row styling
   mirrors the demo's plan rows (demo/signup.html, demo/shared.css). */

/* The product row's title ("Port Type", set by theme.js) gets a
   small-caps uppercase treatment to match the demo's section labels. */
body:has(.am-signup-form) [id^="row-product_id_"] .am-element-title label,
body:has(.am-signup-form) .am-row:has(.am-product-select) .am-element-title label {
  font-size: 0.6875rem; /* small-caps size per demo L15 */
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Product-select wrapper — constrain to parent width (Bug 3).
   Specificity 0,1,0 beats our generic [id^="row-product_id_"] .am-element rules. */
.am-product-select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Product radios — card-style rows */
[id^="row-product_id_"] .am-element label,
.am-product-select label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.875rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  margin-bottom: 0.375rem;
  cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

[id^="row-product_id_"] .am-element label:hover {
  border-color: #0d9488;
  background: rgba(13, 148, 136, 0.03);
}

[id^="row-product_id_"] .am-element label:has(input:checked) {
  border-color: #0d9488;
  background: rgba(13, 148, 136, 0.05);
}

[id^="row-product_id_"] .am-element input[type="radio"] {
  accent-color: #0d9488;
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.5rem;
  flex-shrink: 0;
}

[id^="row-product_id_"] .am-element br { display: none; }

.am-product-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #0f172a;
  flex: 1;
}

.am-product-terms {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #0d9488;
  white-space: nowrap;
  margin-left: auto;
}

.am-product-desc { display: none; }

/* "Sticky" / "Rotating" section dividers — injected by theme.js above
   the first label of each group. Mirrors the demo's section labels. */
.am-product-divider {
  display: block;
  padding: 0.375rem 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid #f1f5f9;
  margin: 0.5rem 0 0.5rem;
}
/* First divider sits flush with the top of the list. */
.am-product-divider:first-child { margin-top: 0; }

/* Narrow screens: let long plan titles wrap instead of forcing the
   row wider than the form. */
@media (max-width: 480px) {
  .am-product-select label { flex-wrap: wrap; }
  .am-product-select label .am-product-title { white-space: normal; }
}

/* Payment system — hidden label, "FastSpring  Pay securely with FastSpring"
   centered below the Next button as quiet supporting copy. */
#row-paysys_id .am-element-title { display: none; }
#row-paysys_id .am-element {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  padding: 0.5rem 0 0;
}
.am-paysystem-title {
  display: none !important;
}
.am-paysystem-desc {
  font-size: 0.75rem;
  font-style: normal;
  color: var(--lp-stone-500);
}

/* Login prompt on signup */
.am-info.am-login-text {
  font-size: 0.75rem;
  color: #94a3b8;
  text-align: center;
  margin-bottom: 1rem;
  padding: 0;
  background: none;
  border: none;
}

/* ═══════════════════════════════════════════
   MEMBER AREA (DASHBOARD)
   ═══════════════════════════════════════════ */

/* Tabs navigation.
   Stock amember.css emits a bright orange gradient on .am-tabs li.active
   (lines 1429–1432 of amember.css: linear-gradient #f1826f → #e34b3d).
   We neutralize the li-level background + border and re-style the <a>
   inside to a flat teal underline that matches our brand. */
ul.am-tabs,
.am-tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--lp-stone-200);
  border-radius: 0.5rem;
  background: #ffffff;
  margin-bottom: 1.5rem;
  padding: 0;
  list-style: none;
  overflow: hidden;
  width: 100%;
}

ul.am-tabs li,
ul.am-tabs > li,
.am-tabs li {
  flex: 1 1 0;
  min-width: 0;
  float: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  margin: 0;
  padding: 0;
  display: block;
}

ul.am-tabs li a,
.am-tabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  height: auto;
  line-height: 1.4;
  font-family: var(--lp-font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--lp-stone-500);
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  transition: color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
  box-sizing: border-box;
  text-align: center;
  width: 100%;
}

ul.am-tabs li + li a,
.am-tabs li + li a {
  border-left: 1px solid var(--lp-stone-200) !important;
}

/* Tab hover (non-active) = sandy surface, no underline rail.
   The active-tab's teal underline is what differentiates committed from hover. */
ul.am-tabs li a:hover,
.am-tabs a:hover,
ul.am-tabs li.normal:hover > a {
  color: var(--lp-stone-900);
  background: var(--lp-sandy) !important;
}

/* Reset any stock gradient/shadow on li containers. */
ul.am-tabs li.active,
ul.am-tabs li.normal:hover {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Active tab — sandy "parked" surface with a teal underline rail,
   a warmer border against neighbors, and teal text for contrast. */
ul.am-tabs li.active > a,
ul.am-tabs li a.active,
.am-tabs a.active {
  color: var(--lp-teal-800) !important;
  font-weight: 600;
  background: var(--lp-sandy) !important;
  background-image: none !important;
  box-shadow:
    inset 0 -2px 0 var(--lp-teal-600),
    inset 0 1px 0 rgba(28, 25, 23, 0.02) !important;
  position: relative;
}
ul.am-tabs li.active > a:hover,
.am-tabs a.active:hover {
  color: var(--lp-teal-900) !important;
  background: #F3EEE8 !important;
  box-shadow:
    inset 0 -2px 0 var(--lp-teal-700),
    inset 0 1px 0 rgba(28, 25, 23, 0.03) !important;
}

/* Home-icon tab (#menu-member) — stock CSS caps width to 1em so only
   the ::before glyph shows; keep the glyph but tint it to slate/teal. */
ul.am-tabs #menu-member {
  width: auto;
}

ul.am-tabs #menu-member::before {
  color: #64748b;
}

ul.am-tabs li.active #menu-member::before {
  color: #0f766e;
}

/* Account toolbar — right-aligned muted identity chip above the tabs. */
.am-account-toolbar,
.am-account-toolbar-items {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.75rem;
  color: var(--lp-stone-500);
}

.am-account-toolbar a,
.am-account-toolbar-items a {
  font-size: 0.75rem;
  font-weight: 500;
}

/* Hide stock narrow-menu icon slots (dashboard+switch) — they render as
   orphan empty <a> tags when the header chrome is replaced. */
.am-tabs-narrow-dashboard,
.am-tabs-narrow-switch { display: none !important; }

/* Stock amember.css sets a default gray user-silhouette PNG as a
   background-image on .am-user-identity-block. Strip it and align the
   text/logout link on a single clean row. */
.am-user-identity-block,
.am-user-identity-block-avatar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none !important;
  padding-left: 0 !important;
  font-size: 0.75rem;
  color: var(--lp-stone-500);
  line-height: 1.5;
}

.am-user-identity-block_login {
  font-weight: 600;
  color: var(--lp-stone-700);
}

.am-user-identity-block a,
.am-user-identity-block-avatar a {
  color: var(--lp-teal-700);
  font-weight: 600;
  margin-left: 0;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.am-user-identity-block a:hover,
.am-user-identity-block-avatar a:hover {
  color: var(--lp-teal-800);
  border-bottom-color: var(--lp-teal-500);
}

/* Hide the default avatar image entirely — stock aMember renders a
   generic avatar <img> inside .am-user-identity-block-avatar-pic when
   no uploaded avatar is present. */
.am-user-identity-block-avatar-pic {
  display: none !important;
}

/* ── Tables (payment history, proxy list) ── */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

table th {
  text-align: left;
  font-weight: 600;
  color: #0f172a;
  padding: 0.625rem 0.75rem;
  border-bottom: 2px solid #e2e8f0;
  background: #f8fafc;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

table td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid #f1f5f9;
  color: #475569;
}

/* Row hover reserved for payment-history / invoices where rows are
   genuinely interactive. Nothing else should flash on hover. */
.am-payment-history-table tr:hover td,
.am-invoices-table tr:hover td {
  background: rgba(13, 148, 136, 0.03);
}

/* ── Proxy management specific ── */

.slot {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.proxy_list {
  margin-top: 1rem;
}

.current_proxies_title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.25rem;
  color: #0f172a;
  margin-bottom: 0.75rem;
}

/* Generic teal primary for .auth sub-forms — overridden in-context for
   inline sizing by the .add_c_ip and add_IP rules below. */
.auth input[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  padding: 0.625rem 1.25rem !important;
  font-family: var(--lp-font-sans);
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: var(--lp-teal-600) !important;
  border: 1px solid var(--lp-teal-600) !important;
  border-radius: 0.5rem !important;
  cursor: pointer;
  margin: 0 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  float: none !important;
}
.auth input[type="submit"]:hover {
  background: var(--lp-teal-700) !important;
  box-shadow: 0 10px 20px -6px rgba(13, 148, 136, 0.35);
  transform: translateY(-1px);
}
/* "Update" submit row — left-aligned inline button, not full-width. */
.auth form[method="POST"] > input[type="submit"]:last-child,
.auth tr:last-child td input[type="submit"],
.auth input[type="submit"][value="Update"],
.auth input[type="submit"][value="Save"] {
  float: left !important;
  margin-top: 0.75rem !important;
}

.auth_title {
  font-weight: 600;
  color: #0f172a;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

/* Country flags */
.flags_change {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.flag-int {
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.flag-int:hover { opacity: 1; }

/* ═══════════════════════════════════════════
   PROFILE PAGE — form redesign
   aMember's default is a 3-col grid (title | element | description).
   We flatten it to a single-column stack with labels above inputs.
   ═══════════════════════════════════════════ */

body.am-page-profile .lp-container,
body[class*="am-page-profile"] .lp-container {
  max-width: 42rem;
}

/* Inner form is frameless; outer .am-form provides the card. */
form#profile {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

form#profile .am-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: 100% !important;
}
/* Respect JS-driven display:none (hidden password-change rows etc.) */
form#profile .am-row[style*="display: none"],
form#profile .am-row[style*="display:none"] {
  display: none !important;
}

/* Password section — restructure the "Password / Change" row as a clean
   card with a teal action button. Also polish the hint text for the
   current-password/new-password rows when they're revealed. */
form#profile #row-qfauto-1 {
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  padding: 0.875rem 1rem !important;
  background: var(--lp-sandy) !important;
  border: 1px solid var(--lp-stone-200) !important;
  border-radius: 0.5rem !important;
  margin-top: 0.5rem !important;
}
form#profile #row-qfauto-1 .am-element-title label {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--lp-stone-900) !important;
  cursor: default !important;
}
form#profile #row-qfauto-1 .am-element {
  width: auto !important;
  flex: 0 0 auto !important;
}
/* Hide the vendor-shipped "Change" link text via font-size:0; render our
   own "Change password" via ::before so the label is in-theme. */
form#profile .am-change-pass-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  padding: 0.5rem 0.875rem !important;
  font-size: 0 !important;
  font-weight: 600 !important;
  color: var(--lp-teal-700) !important;
  background: #fff !important;
  border: 1px solid var(--lp-teal-200, #99f6e4) !important;
  border-radius: 0.375rem !important;
  text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
  cursor: pointer !important;
}
form#profile .am-change-pass-toggle::before {
  content: 'Change password';
  font-size: 0.8125rem;
}
form#profile .am-change-pass-toggle:hover {
  background: rgb(238, 247, 245) !important;
  border-color: var(--lp-teal-500) !important;
  color: var(--lp-teal-800) !important;
}

/* When revealed (display:grid via inline JS clear of display:none), the
   three password rows render as a grouped section. */
form#profile #row-_oldpass-0,
form#profile #row-pass-0,
form#profile #row-pass-confirm {
  background: var(--lp-sandy) !important;
  border: 1px solid var(--lp-stone-200) !important;
  border-radius: 0 !important;
  padding: 0.875rem 1rem !important;
}
/* Cancel the form's 16px flex gap so the three password rows read as one
   cohesive card instead of three disconnected cards. */
form#profile #row-_oldpass-0 {
  border-radius: 0.5rem 0.5rem 0 0 !important;
  border-bottom: 0 !important;
  margin-bottom: 0 !important;
}
form#profile #row-pass-0 {
  margin-top: -16px !important;
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
}
form#profile #row-pass-confirm {
  margin-top: -16px !important;
  border-radius: 0 0 0.5rem 0.5rem !important;
}
/* Suppress the hand cursor UAs give to <label for=...> inside the
   password-change section — the sandy card treatment makes it read as a
   clickable card, which misleads users. */
form#profile #row-_oldpass-0 label,
form#profile #row-pass-0 label,
form#profile #row-pass-confirm label {
  cursor: default !important;
}

form#profile #row-_oldpass-0 .comment,
form#profile #row-pass-0 .comment,
form#profile #row-pass-confirm .comment {
  font-size: 0.75rem;
  color: var(--lp-stone-500);
  font-weight: 400;
  line-height: 1.5;
  margin-top: 0.25rem;
  display: block;
}

form#profile .am-element-title,
form#profile div.am-element-title {
  width: 100% !important;
  text-align: left !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}
form#profile .am-element-title label {
  font-family: var(--lp-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--lp-stone-900);
  letter-spacing: 0;
  text-transform: none;
}

form#profile .am-element,
form#profile div.am-element {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* Submit row — right-align so the button sits at the end and is
   auto-width instead of filling the flex column. */
form#profile div[id*="_submit_"],
form#profile div.am-row:has(input[type="submit"]),
form#profile div.am-row:has(button[type="submit"]) {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding-top: 1rem !important;
  margin-top: 0.25rem !important;
  border-top: 1px solid var(--lp-stone-100) !important;
}
form#profile div[id*="_submit_"] > .am-element,
form#profile div.am-row:has(input[type="submit"]) > .am-element,
form#profile div.am-row:has(button[type="submit"]) > .am-element {
  width: auto !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

/* Inputs */
form#profile input[type="text"],
form#profile input[type="email"],
form#profile input[type="password"] {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-family: var(--lp-font-sans);
  font-size: 0.9375rem;
  color: var(--lp-stone-900);
  background: #fff;
  border: 1px solid var(--lp-stone-300);
  border-radius: 0.5rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
form#profile input[type="text"]:focus,
form#profile input[type="email"]:focus,
form#profile input[type="password"]:focus {
  outline: none;
  border-color: var(--lp-teal-500);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

/* First + Last name side-by-side without cramping. Target the row
   that contains two text inputs. */
form#profile .am-element:has(input[name="name_f"]),
form#profile .am-element:has(input[name="name_l"]) { flex: 1; }
form#profile .am-element:has(> input[name="name_f"]):has(~ input[name="name_l"]),
form#profile .am-row:has(input[name="name_f"]) .am-element {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
}

/* Hint text (the "a confirmation email will be sent to you..." line) */
form#profile .am-element-description,
form#profile .am-element-descripton,
form#profile small,
form#profile .am-description {
  font-size: 0.75rem;
  color: var(--lp-stone-500);
  font-style: normal;
  margin: 0;
  max-width: 100%;
  text-align: left;
  font-weight: 400;
}

/* "Personal information (data we collect additionally)" sidebar — if
   it does render, inline it below the form instead of floating right. */
.am-layout-two-coll,
.am-layout-right-col {
  display: block !important;
  width: 100% !important;
  float: none !important;
  margin-top: 1rem;
}
.am-layout-right-col {
  background: var(--lp-sandy);
  border: 1px solid var(--lp-stone-200);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  font-size: 0.8125rem;
  color: var(--lp-stone-600);
}

/* Required asterisk */
form#profile .am-element-title::before,
form#profile label em { color: #ef4444; font-style: normal; }

/* Save Profile — right-pinned primary CTA */
form#profile .am-row:last-child,
form#profile div.am-row-buttons,
form#profile #row-buttons,
form#profile div[id^="row-"]:last-of-type,
form#profile .am-form-element-buttons {
  display: flex !important;
  justify-content: flex-end !important;
  padding-top: 1rem !important;
  margin-top: 0.5rem !important;
  border-top: 1px solid var(--lp-stone-100) !important;
  width: 100% !important;
}
/* The button itself — ALWAYS auto-width on profile, no stretch. */
form#profile input[type="submit"],
form#profile button[type="submit"],
body[class*="am-page-profile"] form input[type="submit"],
body[class*="am-page-profile"] form button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  flex: 0 0 auto !important;
  padding: 0.75rem 1.75rem !important;
  font-family: var(--lp-font-sans) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: var(--lp-teal-600) !important;
  border: 1px solid var(--lp-teal-600) !important;
  border-radius: 0.5rem !important;
  cursor: pointer !important;
  margin: 0 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
  float: none !important;
  white-space: nowrap !important;
}
form#profile input[type="submit"]:hover,
form#profile button[type="submit"]:hover,
body[class*="am-page-profile"] form input[type="submit"]:hover,
body[class*="am-page-profile"] form button[type="submit"]:hover {
  background: var(--lp-teal-700) !important;
  box-shadow: 0 10px 20px -6px rgba(13, 148, 136, 0.35);
  transform: translateY(-1px);
}

/* Inline "Change" link next to Password row (not a real submit button) */
form#profile a[href*="change-password"],
form#profile .am-element a {
  font-family: var(--lp-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--lp-teal-700);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
form#profile a[href*="change-password"]:hover,
form#profile .am-element a:hover {
  color: var(--lp-teal-800);
  border-bottom-color: var(--lp-teal-500);
}

/* Mark to delete */
.mark_to_del {
  color: #ef4444;
  font-size: 0.75rem;
  cursor: pointer;
}

/* ═══════════════════════════════════════════
   NOTIFICATIONS (flash messages)
   ═══════════════════════════════════════════ */

.am-flash {
  font-family: 'DM Sans', sans-serif;
}

.am-flash-mask {
  background: rgba(0, 0, 0, 0.3);
}

.am-flash-content {
  background: #fff;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  font-size: 0.875rem;
  color: #0f172a;
}

/* ═══════════════════════════════════════════
   TRUST SIGNALS (injected by JS)
   ═══════════════════════════════════════════ */

.lp-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 0.625rem;
  font-size: 0.6875rem;
  color: #94a3b8;
}

.lp-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  opacity: 0.5;
}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */

/* Minimal footer — matches demo's footer.js minimal variant:
   dark stone bg, muted stone-400 text, ~0.75rem links. */
.lp-footer {
  background: #0c0a09;
  border-top: none;
  flex-shrink: 0;
  font-family: var(--lp-font-sans);
}

.lp-footer-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 300;
  color: #a8a29e;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.lp-footer-links {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.lp-footer-links a {
  font-size: 0.75rem;
  font-weight: 300;
  color: #a8a29e;
  text-decoration: none;
  transition: color 0.15s;
}

.lp-footer-links a:hover { color: #e7e5e4; }

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

@media (max-width: 640px) {
  .lp-main { padding: 1.5rem 1rem; }
  .am-form, .am-signup { padding: 1.25rem; }
  .lp-footer-inner { justify-content: center; text-align: center; }
  h1 { font-size: 1.25rem !important; }
}

/* ═══════════════════════════════════════════
   LEGACY OVERRIDES (remove aMember defaults)
   ═══════════════════════════════════════════ */

/* Hide old layout elements that our layout.phtml replaces */
header.sub,
.main-holder-div,
.footer-holder-div,
.clear-all { display: none !important; }

/* Reset aMember default spacing */
.am-body-content { padding: 0 !important; }
.am-body-content-wrapper { padding: 0 !important; }
.am-signup .am-form { margin: 0 !important; }
.row { margin: 0 !important; float: none !important; }
.am-element { width: 100% !important; float: none !important; }
.col { width: 100% !important; float: none !important; }

/* ═══════════════════════════════════════════
   PROXY-PORTS PAGE — ported from demo/shared.css
   Maps demo .lp-* classes onto real selectors
   emitted by ProxyPortsController in site.php.
   ═══════════════════════════════════════════ */

/* ── Flash / request-sent banner ── */
/* (demo has no direct twin; styled as a subtle info pill) */
.request_sent {
  font-size: 0.8125rem;
  color: #0f766e;
  background: rgba(13, 148, 136, 0.08);
  border: 1px solid rgba(13, 148, 136, 0.2);
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  margin-bottom: 1rem;
}
.request_sent.display_none_class { display: none; }

/* ── Account balance + Add Proxy Port — the top "hero" panel ──
   Sandy warm surface, left = balance display, right = add form. */
.credits {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.75rem;
  background: var(--lp-sandy);
  border: 1px solid var(--lp-stone-200);
  border-radius: 1rem;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.75rem;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.03);
}
.credits__balance {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-right: 1.5rem;
  border-right: 1px solid var(--lp-stone-200);
}
.credits__label {
  font-family: var(--lp-font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-stone-500);
}
.credits__value {
  font-family: var(--lp-font-display);
  font-size: 1.875rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--lp-stone-900);
  line-height: 1;
}
.credits__ccy {
  font-family: var(--lp-font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--lp-stone-500);
  margin-left: 0.25rem;
}

#form_add_slot {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  flex-wrap: wrap;
}

#form_add_slot select {
  flex: 1;
  min-width: 26rem;
  /* box-sizing:border-box + the UA control metric was leaving the inner
     content box (~11px) shorter than the 17.5px line box, clipping the
     option text top & bottom. Explicit min-height + line-height keeps the
     whole glyph inside, and matches the Add-Proxy-Port button's height. */
  min-height: 2.75rem;
  padding: 0.625rem 2.25rem 0.625rem 0.875rem;
  font-family: var(--lp-font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--lp-stone-900);
  background-color: #fff;
  background-position: right 0.875rem center;
  border: 1px solid var(--lp-stone-300);
  border-radius: 0.5rem;
  cursor: pointer;
  text-overflow: ellipsis;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#form_add_slot select:focus {
  outline: none;
  border-color: var(--lp-teal-500);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

/* Add Proxy Port — v2 primary CTA */
.add_slot_submit {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  padding: 0.75rem 1.5rem !important;
  font-family: var(--lp-font-sans);
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: var(--lp-teal-600) !important;
  border: 1px solid var(--lp-teal-600) !important;
  border-radius: 0.5rem !important;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  margin: 0 !important;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.add_slot_submit:hover {
  background: var(--lp-teal-700) !important;
  box-shadow: 0 10px 20px -6px rgba(13, 148, 136, 0.35);
  transform: translateY(-1px);
}
.add_slot_submit:active { transform: translateY(0); }

/* ── Allowed IPs block (.auth) ──
   demo twin: .lp-card (white rounded container) */
.auth {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.auth table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.auth table td {
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid #f1f5f9;
}
.auth table tr:last-child td { border-bottom: none; }
.auth .mark_to_del {
  text-align: right;
  font-size: 0.6875rem;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.input_chck {
  accent-color: #0d9488;
  width: auto !important;
}
.add_IP_title {
  padding-top: 1rem !important;
  font-size: 0.75rem;
  font-weight: 600;
  color: #0f172a;
}
.add_IP textarea {
  width: 100%;
  min-height: 5rem;
  padding: 0.5rem 0.75rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8125rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  resize: vertical;
}
.add_c_ip input[type="submit"] {
  background: #fff !important;
  color: #0d9488 !important;
  border: 1px solid #0d9488 !important;
  font-weight: 600;
}
.add_c_ip input[type="submit"]:hover {
  background: rgba(13, 148, 136, 0.05) !important;
}

/* Whitelist-by-URL info box (rendered as last <tr><td><div>) */
.auth table tr:last-of-type td div {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem;
  padding: 0.875rem 1rem !important;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: #64748b !important;
  line-height: 1.6;
  word-break: break-all;
}

/* ── Slots container ── */
.slots {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Slot card (.slot) — positioning hooks for absolute-positioned children */
.slot {
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Auto-renew form — demo twin: small header control strip */
.auto-renew_form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  color: #64748b;
}
.auto-renew_form input[type="submit"].flags_change {
  display: inline-block !important;
  width: auto !important;
  padding: 0.3rem 0.75rem !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  margin: 0 auto 0 0 !important;
  background: #0d9488 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0.375rem !important;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
  float: none !important;
}
.auto-renew_form input[type="submit"].flags_change:hover {
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
  transform: translateY(-1px);
}

/* First .div_type_slots = slot header block (ID, Type, IP Count, Expiration)
   demo twin: .lp-slot-header + .lp-slot-row label/value */
.slot > .div_type_slots:first-of-type {
  padding-bottom: 0.875rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.8125rem;
  color: #475569;
  line-height: 1.8;
}

/* ID pill — demo twin: .lp-slot-badge */
.id_slot_text {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(13, 148, 136, 0.1);
  color: #0d9488;
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
}

/* Bandwidth-per-slot info */
.div_type_slots_bw {
  font-size: 0.75rem;
  color: #64748b;
  padding: 0.375rem 0;
}

/* "Next automatic IP Change" + Domain block */
.div_type_slots4 {
  font-size: 0.8125rem;
  color: #475569;
  padding: 0.375rem 0;
  line-height: 1.7;
}

/* Thread stats block (.div_type_slots2 wraps .stats_div_black) */
.div_type_slots2 {
  margin: 0.75rem 0;
}

/* Download+upload stats block (.div_type_slots3 wraps green/orange) */
.div_type_slots3 {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
  margin: 0.75rem 0;
}

/* Stats pills — demo twin: .lp-slot-badge pattern, tinted */
.stats_div {
  flex: 1;
  font-size: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  line-height: 1.7;
}
.stats_div_black {
  background: rgba(28, 25, 23, 0.04);
  border-color: rgba(28, 25, 23, 0.1);
  color: #0f172a;
  font-weight: 500;
}
.stats_div_green {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.2);
  color: #047857;
}
.stats_div_orange {
  background: rgba(234, 88, 12, 0.06);
  border-color: rgba(234, 88, 12, 0.2);
  color: #c2410c;
}

/* Divider between download and upload stats */
.line_div {
  display: flex;
  align-items: center;
  width: 1px;
  flex-shrink: 0;
}
.hr_updo {
  width: 1px;
  height: 100%;
  min-height: 2rem;
  border: none;
  border-left: 1px dashed #e2e8f0;
  margin: 0;
}

/* Tooltip (small circular "?" with hover text) */
.tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b;
  font-size: 0.625rem;
  font-weight: 700;
  cursor: help;
  position: relative;
  vertical-align: middle;
}
.tooltip .tooltiptext {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  width: 14rem;
  padding: 0.5rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 400;
  color: #fff;
  background: #0f172a;
  border-radius: 0.375rem;
  text-align: center;
  line-height: 1.5;
  z-index: 10;
  transition: opacity 0.15s;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* CURL sample block — demo twin: muted code/info box */
.proxy_list_sample {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.75rem 0.875rem;
  margin: 0.75rem 0;
  color: #475569;
  line-height: 1.7;
  word-break: break-all;
}

/* HTTP/SOCKS ports list — demo twin: muted code block */
.proxy_list {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.75rem;
  background: #f8fafc !important; /* overrides legacy localproxies.css #bff0ff */
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.75rem 0.875rem;
  margin: 0.5rem 0 0.75rem;
  color: #0f172a;
  line-height: 1.8;
  max-height: 14rem;
  overflow-y: auto;
}

/* ── Port-options (flags) block ── */
.flags_div {
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px solid #f1f5f9;
}

table.tab_flags {
  width: 100%;
  border: none;
}
table.tab_flags td {
  padding: 0.375rem 0.5rem;
  vertical-align: top;
  border: none;
}

/* Header cell containing "Port Options" */
.flags_style {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0 0.5rem !important;
  border-bottom: 1px solid #f1f5f9;
}

/* Footer cell with the "Change" submit button */
.flag_style {
  padding-top: 0.875rem !important;
  text-align: right;
}

/* Individual flag cell */
.td_flag_f {
  width: 33.333%;
}
.td_flag_fd {
  padding: 0.375rem 0;
  font-size: 0.75rem;
  color: #475569;
}
.td_flag_fd .flag_holder {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

/* Flag inputs */
.td_flag_fd input[type="text"],
.td_flag_fd input[type="number"],
.td_flag_fd select.select_flag {
  flex: 1;
  min-width: 0;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.25rem;
  background: #fff;
  color: #0f172a;
}
.td_flag_fd .no-padding {
  padding: 0.25rem 0.5rem;
}

/* Faded/locked flag row */
.flag_holder.fader {
  position: relative;
  opacity: 0.55;
}
.flag_hider {
  position: absolute;
  inset: 0;
  background: rgba(250, 248, 246, 0.4);
  z-index: 1;
  pointer-events: none;
}

/* Unlock-request link — demo twin: .lp-btn-sm ghost */
.button_unlock {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #0d9488;
  background: rgba(13, 148, 136, 0.08);
  border: 1px solid rgba(13, 148, 136, 0.2);
  border-radius: 0.25rem;
  transition: background 0.15s;
}
.button_unlock:hover {
  background: rgba(13, 148, 136, 0.15);
  color: #0f766e;
}

/* Flag change / form submit buttons inside .tab_flags footer */
.tab_flags input[type="submit"].flags_change {
  display: inline-block !important;
  width: auto !important;
  padding: 0.4rem 0.875rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: #0d9488 !important;
  border: none !important;
  border-radius: 0.375rem !important;
  cursor: pointer;
  margin: 0 !important;
  transition: box-shadow 0.15s, transform 0.15s;
  float: none !important;
}
.tab_flags input[type="submit"].flags_change:hover {
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
  transform: translateY(-1px);
}

/* ── Bottom buttons (Copy URL / Change IP) ── */
.link_to_use_title {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
}

.break_url {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  margin: 0.375rem 0 0.75rem;
  color: #0f172a;
  word-break: break-all;
  line-height: 1.6;
}

.c_bottom_buttons {
  width: auto !important;
  margin-top: 0.5rem;
}
.c_bottom_buttons td {
  border: none !important;
  padding: 0 0.375rem !important;
  background: transparent !important;
  vertical-align: middle;
}
.bottom_buttons_or {
  font-size: 0.6875rem;
  color: #94a3b8;
  font-style: italic;
}

.copy_url {
  display: inline-block !important;
  width: auto !important;
  padding: 0.4rem 0.875rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #0d9488 !important;
  background: #fff !important;
  border: 1px solid #0d9488 !important;
  border-radius: 0.375rem !important;
  cursor: pointer;
  transition: background 0.15s;
  margin: 0 !important;
}
.copy_url:hover {
  background: rgba(13, 148, 136, 0.05) !important;
}

/* "Rotating Every Request" explainer (when no manual change available) */
.place_holder_link {
  font-size: 0.75rem;
  color: #64748b;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  margin-top: 0.75rem;
  line-height: 1.6;
}

/* ── Countries premium (unlock request) ── */
.countries_premium {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
table.tab_premium {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
table.tab_premium td {
  padding: 0.375rem 0.5rem;
  border: none;
}
.title_countries_unlock {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.125rem;
  color: #0f172a;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f1f5f9;
}
.premium_c_style {
  padding: 0.5rem 0 !important;
}
.td_country {
  color: #475569;
  font-size: 0.75rem;
}
.td_country_chck {
  text-align: right;
  width: 1.5rem;
}
.td_country_chck input[type="checkbox"] {
  accent-color: #0d9488;
}

/* ── Bandwidth Usage ── */
/* (The Account-balance `.credits` card is shown again — it's legacy
   functionality used by a small number of credit-holding accounts.
   Styled as the top hero panel up at the `.credits` rules above; for
   the `$global_show_bw` dev case both this and `.bw_div` can stack.) */

/* Bandwidth Usage — sandy "hero"-style card; no internal dividers;
   compact rows. */
.bw_div {
  background: var(--lp-sandy);
  border: 1px solid var(--lp-stone-200);
  border-radius: 1rem;
  padding: 0.875rem 1.5rem 1rem;
  margin-bottom: 2rem;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.03);
}
.table_bw {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin-bottom: 0;
}
.bw_title {
  font-family: var(--lp-font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--lp-stone-900);
  display: block;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}
/* Zero the cell padding-left so .bw_title aligns with .aip-title
   (both now flush with the card's 24px padding edge). */
.table_bw td { padding-left: 0 !important; }
.tr_bw .td_bw {
  padding-top: 0.5rem !important;
  background: transparent !important;
  border-bottom: none !important;
}
.txt_title_bw {
  font-family: var(--lp-font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--lp-teal-700);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.bw_div td {
  border: none !important;
  background: transparent !important;
}
.td_bw {
  padding: 0.3125rem 0 !important;
  color: var(--lp-stone-600);
}
.td_bw_right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.td_bw_bold {
  color: var(--lp-stone-900) !important;
  font-weight: 600;
}

/* Buy Extra Bandwidth — white sub-card nested inside the sandy bw_div */
.bw-purchase {
  background: #fff;
  border: 1px solid var(--lp-stone-200);
  border-radius: 0.875rem;
  padding: 1.5rem;
  margin-top: 1.25rem;
}
.bw-purchase__title {
  font-family: var(--lp-font-display);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--lp-stone-900);
  margin: 0 0 0.375rem;
  letter-spacing: -0.01em;
}
.bw-purchase__desc {
  font-size: 0.875rem;
  color: var(--lp-stone-600);
  margin: 0 0 1.125rem;
  line-height: 1.6;
}
.bw-purchase__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--lp-teal-700);
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bw-purchase__select + .bw-purchase__label {
  margin-top: 0.25rem;
}
.bw-purchase__select {
  /* Opt into full-CSS dropdown styling (Chromium 135+).
     Closed state stays neutral white; open popup keeps teal accents. */
  appearance: base-select;
  -webkit-appearance: base-select;
  accent-color: var(--lp-teal-600);
  width: 100%;
  min-width: 100%;
  /* min-height + line-height so the inner content box can hold the full
     line box — without them the UA control metric clips the option text
     top & bottom (same fix as #form_add_slot select). */
  min-height: 2.75rem;
  padding: 0.625rem 2.25rem 0.625rem 0.875rem;
  font-family: var(--lp-font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--lp-stone-900) !important;
  background-color: #fff;
  background-position: right 0.875rem center;
  border: 1px solid var(--lp-stone-300);
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.bw-purchase__select:hover {
  border-color: var(--lp-stone-400, #a8a29e);
  background-color: #fff;
}
.bw-purchase__select:focus,
.bw-purchase__select:open {
  outline: none;
  border-color: var(--lp-stone-400, #a8a29e);
  box-shadow: 0 0 0 3px rgba(168, 162, 158, 0.18);
}

/* Chrome 135+ customizable-select: style the popup panel + arrow */
.bw-purchase__select::picker(select) {
  appearance: base-select;
  background: #fff;
  border: 1px solid rgba(13, 148, 136, 0.3);
  border-radius: 0.5rem;
  box-shadow: 0 12px 28px -10px rgba(13, 148, 136, 0.3),
              0 2px 6px rgba(28, 25, 23, 0.08);
  padding: 0.25rem;
  margin-top: 0.25rem;
  min-width: 100%;
}
.bw-purchase__select::picker-icon {
  color: var(--lp-teal-700);
}

/* Individual options — Chromium honors background+color cross-browser;
   base-select enables the flex/border-radius/padding treatment in Chrome 135+. */
.bw-purchase__select option {
  padding: 0.625rem 0.875rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--lp-stone-900) !important;
  background-color: #fff !important;
  border-radius: 0.375rem;
}
.bw-purchase__select option:hover,
.bw-purchase__select option:focus {
  background-color: rgba(13, 148, 136, 0.08) !important;
  color: var(--lp-teal-800) !important;
  outline: none;
}
.bw-purchase__select option:checked {
  background-color: rgba(13, 148, 136, 0.14) !important;
  color: var(--lp-teal-800) !important;
  font-weight: 700 !important;
}
.bw-purchase__select option[disabled] {
  color: var(--lp-stone-500) !important;
  background-color: var(--lp-sandy) !important;
  font-weight: 500 !important;
}
/* Stack: select row full width, then Buy button underneath on the left */
.bw-purchase__row {
  display: block;
}
.bw-purchase__row .bw-purchase__select {
  width: 100%;
  margin-bottom: 1rem;
}
.bw-purchase__btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.5rem !important;
  font-family: var(--lp-font-sans);
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: var(--lp-teal-600) !important;
  border: 1px solid var(--lp-teal-600) !important;
  border-radius: 0.5rem !important;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  margin: 0 auto 0 0 !important;
  width: auto !important;
  float: none !important;
}
.bw-purchase__btn:hover {
  background: var(--lp-teal-700) !important;
  box-shadow: 0 10px 20px -6px rgba(13, 148, 136, 0.35);
  transform: translateY(-1px);
}
.bw-purchase__btn:active { transform: translateY(0); }
.bw-purchase__note {
  font-size: 0.75rem;
  color: var(--lp-stone-500);
  margin-top: 0.75rem;
  line-height: 1.5;
  text-align: left;
}

/* Responsive: stack stats blocks on narrow screens */
@media (max-width: 640px) {
  .div_type_slots3 { flex-direction: column; }
  .line_div { width: 100%; height: 1px; }
  .hr_updo {
    width: 100%;
    height: 1px;
    min-height: 0;
    border-left: none;
    border-top: 1px dashed #e2e8f0;
  }
  .td_flag_f { width: 100%; display: block; }
  .c_bottom_buttons,
  .c_bottom_buttons tr,
  .c_bottom_buttons tbody,
  .c_bottom_buttons td {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 0.25rem 0 !important;
  }
}

/* ═══════════════════════════════════════════
   PROXY-PORTS — per-slot UX (Option C, redesigned)
   One calm card per slot with a real reading order:
   Header  →  Ports  →  Stats  →  Settings  →  Developer tools
   ═══════════════════════════════════════════ */

/* Container: quiet white card, generous padding. */
.slot {
  background: #fff !important;
  border: 1px solid var(--lp-stone-200) !important;
  border-radius: 1rem !important;
  padding: 1.75rem !important;
  margin: 0 0 2rem !important;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.03) !important;
  color: var(--lp-stone-700) !important;
  font-weight: 400 !important;
  text-align: left !important;
}
.slot + .slot { margin-top: 0 !important; }

/* Pre-JS hide: .slot-options is only a direct child of .slot before
   theme.js wraps it in a <details>. Post-JS the selector no longer matches. */
.slot > .slot-options { display: none !important; }

/* ─ Section spacing + dividers ─ */
.slot > .slot-header,
.slot > .slot-ports,
.slot > .slot-stats,
.slot > .slot-expanders {
  padding: 1.25rem 0;
  border-top: 1px solid var(--lp-stone-100);
}
.slot > .slot-header { padding-top: 0; border-top: none; }
.slot > .slot-expanders { padding-bottom: 0; }

/* ═══ Slot body collapse ═══
   Whole slot collapses to just its identity header by default. Summary stacks
   the identity on top with an "Expand" / "Collapse" teal pill at bottom-left.
   Clicking anywhere on the summary toggles. */
.slot > details.slot-body-toggle { margin: 0 !important; }
.slot > details.slot-body-toggle > summary.slot-summary {
  list-style: none;
  cursor: default;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0;
  margin: 0;
}
.slot > details.slot-body-toggle > summary.slot-summary::-webkit-details-marker,
.slot > details.slot-body-toggle > summary.slot-summary::marker { display: none; content: ""; }
.slot > details.slot-body-toggle > summary.slot-summary > .slot-header {
  align-self: stretch;
  min-width: 0;
}
/* When collapsed, show only ID + Type + IP Count + Expiration —
   hide the "Next automatic IP Change" footnote and the per-type blurb. */
.slot > details.slot-body-toggle:not([open]) > summary .slot-header > .div_type_slots4,
.slot > details.slot-body-toggle:not([open]) > summary .slot-header > .place_holder_link {
  display: none;
}
/* Expand/Collapse pill — teal, matches lp-collapse summary styling.
   Lives as a child of .slot-header (flex column) between identity card
   and Next-IP-Change line; align-self prevents it stretching to full width. */
.slot-summary__btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.5rem;
  font-family: var(--lp-font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lp-teal-700);
  background: var(--lp-teal-50);
  border: 1px solid var(--lp-teal-100);
  border-radius: 999px;
  padding: 0.45rem 0.875rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.slot-summary__btn::before {
  content: '\25B8';
  font-size: 1.125rem;
  line-height: 1;
  color: var(--lp-teal-600);
  transition: transform 0.15s;
}
.slot-summary__btn::after { content: 'Expand'; }
details.slot-body-toggle[open] > summary .slot-summary__btn::before { transform: rotate(90deg); }
details.slot-body-toggle[open] > summary .slot-summary__btn::after { content: 'Minimize'; }
.slot-summary__btn:hover {
  background: var(--lp-teal-100);
  border-color: var(--lp-teal-400);
}

/* Re-create internal dividers on body sections now nested in .slot-body-toggle */
.slot > details.slot-body-toggle > .slot-ports-toggle,
.slot > details.slot-body-toggle > .slot-ports,
.slot > details.slot-body-toggle > .slot-stats,
.slot > details.slot-body-toggle > .slot-expanders {
  padding: 1.25rem 0;
  border-top: 1px solid var(--lp-stone-100);
}
.slot > details.slot-body-toggle > .slot-expanders { padding-bottom: 0; }

/* Port-card toolbar: Expand-all button left; Filter & sort trigger + Find
   input on the right. The popover panel is absolutely positioned relative
   to the toolbar. */
.slots-toolbar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  flex-wrap: wrap;
}
.slots-toolbar__controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Secondary control — pale-teal outline pill (the filled teal
   .slots-toggle-all is the toolbar's primary action). Uppercase text,
   ▸ chevron that rotates 90° when the panel is open. */
button.slots-fs-trigger {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-family: var(--lp-font-sans) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--lp-teal-700) !important;
  background: var(--lp-teal-50) !important;
  background-image: none !important;
  border: 1px solid var(--lp-teal-100) !important;
  border-radius: 999px !important;
  padding: 0.45rem 0.875rem !important;
  margin: 0 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}
button.slots-fs-trigger::before {
  content: '\25B8';
  font-size: 1.125rem;
  line-height: 1;
  color: var(--lp-teal-600);
  transition: transform 0.15s;
}
button.slots-fs-trigger.is-open::before { transform: rotate(90deg); }
button.slots-fs-trigger:hover,
button.slots-fs-trigger:active {
  background: var(--lp-teal-100) !important;
  background-image: none !important;
  border-color: var(--lp-teal-400) !important;
  color: var(--lp-teal-800) !important;
}
button.slots-fs-trigger:focus { outline: none; box-shadow: none; }
button.slots-fs-trigger:focus-visible {
  border-color: var(--lp-teal-500) !important;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}
.slots-fs-trigger__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #fff;
  background: var(--lp-teal-600);
  border-radius: 999px;
}
.slots-fs-trigger__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  margin-left: -0.125rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--lp-stone-500);
  border-radius: 999px;
  cursor: pointer;
}
.slots-fs-trigger__clear:hover { background: var(--lp-stone-100); color: var(--lp-stone-900); }

input.slots-find {
  flex: 0 0 auto;
  width: 340px;
  padding: 0.5rem 0.875rem;
  font-family: var(--lp-font-sans);
  font-size: 0.8125rem;
  color: var(--lp-stone-900);
  background: #fff;
  border: 1px solid var(--lp-stone-200);
  border-radius: 999px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input.slots-find:focus {
  outline: none;
  border-color: var(--lp-teal-500);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}
input.slots-find::placeholder {
  color: var(--lp-stone-400);
}

/* Inline collapsable panel — sibling of toolbar, above the card list.
   Full width, no overlay. Closed by clicking the Filter & sort trigger
   again or pressing Escape while focus is inside. */
.slots-fs-panel {
  padding: 1rem 1.25rem 1.25rem;
  margin: 0 0 1rem;
  background: #fff;
  border: 1px solid var(--lp-stone-200);
  border-radius: 1rem;
}
.slots-fs-panel[hidden] { display: none; }
.slots-fs-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.25rem;
}
.slots-fs-panel__title {
  font-family: var(--lp-font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--lp-stone-900);
  margin: 0;
  letter-spacing: -0.01em;
}
button.slots-fs-panel__reset {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--lp-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--lp-teal-700);
  cursor: pointer;
}
button.slots-fs-panel__reset:hover { color: var(--lp-teal-900); text-decoration: underline; }

.slots-fs-section { margin-top: 0.875rem; }
.slots-fs-section__label {
  font-family: var(--lp-font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-stone-500);
  margin-bottom: 0.5rem;
}

.slots-fs-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

button.slots-fs-pill,
.slots-fs-pill {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.375rem 0.75rem;
  font-family: var(--lp-font-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--lp-stone-700);
  background: #fff;
  border: 1px solid var(--lp-stone-200);
  border-radius: 999px;
  cursor: pointer;
  outline: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
/* Element selectors (0,1,1) tie .am-body-content button:hover; source order wins. */
button.slots-fs-pill:focus { outline: none; box-shadow: none; }
button.slots-fs-pill:focus-visible {
  border-color: var(--lp-teal-500);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}
button.slots-fs-pill:hover,
button.slots-fs-pill:active {
  color: var(--lp-stone-900);
  background: var(--lp-sandy);
  background-image: none;
  border-color: var(--lp-stone-300);
}
button.slots-fs-pill.is-active {
  color: var(--lp-teal-800);
  background: var(--lp-teal-50);
  border-color: var(--lp-teal-400);
  font-weight: 600;
}
button.slots-fs-pill.is-active:hover,
button.slots-fs-pill.is-active:active {
  background: var(--lp-teal-100);
  background-image: none;
  border-color: var(--lp-teal-500);
}

/* Pager: count · page buttons · per-page selector */
.slots-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.875rem 0;
  margin: 0 0 1.5rem;
  border-top: 1px solid var(--lp-stone-200);
  font-family: var(--lp-font-sans);
  font-size: 0.8125rem;
  color: var(--lp-stone-700);
}
.slots-pager[hidden] { display: none; }
.slots-pager__count { flex: 0 0 auto; }
.slots-pager__nav { display: inline-flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
button.slots-pager__btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  font-family: var(--lp-font-sans);
  font-size: 0.8125rem;
  color: var(--lp-stone-700);
  background: #fff;
  background-image: none;
  border: 1px solid var(--lp-stone-200);
  border-radius: 0.5rem;
  cursor: pointer;
  outline: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
button.slots-pager__btn:hover,
button.slots-pager__btn:active {
  background: var(--lp-sandy);
  background-image: none;
  border-color: var(--lp-stone-300);
  color: var(--lp-stone-900);
}
button.slots-pager__btn:disabled {
  color: var(--lp-stone-300);
  background: #fff;
  border-color: var(--lp-stone-100);
  cursor: not-allowed;
}
button.slots-pager__btn:focus { outline: none; box-shadow: none; }
button.slots-pager__btn:focus-visible { border-color: var(--lp-teal-500); box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12); }
button.slots-pager__btn.is-active,
button.slots-pager__btn.is-active:hover {
  color: var(--lp-teal-800);
  background: var(--lp-teal-50);
  background-image: none;
  border-color: var(--lp-teal-400);
  font-weight: 600;
}
.slots-pager__gap { padding: 0 0.25rem; color: var(--lp-stone-400); }
.slots-pager__size {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.slots-pager__size > select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  font-family: var(--lp-font-sans);
  font-size: 0.8125rem;
  color: var(--lp-stone-900);
  background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path fill="none" stroke="%230f766e" stroke-width="1.5" d="M1 1l4 4 4-4"/></svg>') no-repeat right 0.5rem center / 10px 6px;
  border: 1px solid var(--lp-stone-200);
  border-radius: 999px;
  cursor: pointer;
}
.slots-pager__size > select:focus-visible {
  outline: none;
  border-color: var(--lp-teal-500);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}
button.slots-pager__top {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  font-family: var(--lp-font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lp-teal-700);
  background: var(--lp-teal-50);
  background-image: none;
  border: 1px solid var(--lp-teal-100);
  border-radius: 999px;
  cursor: pointer;
  outline: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
button.slots-pager__top:hover,
button.slots-pager__top:active {
  color: var(--lp-teal-800);
  background: var(--lp-teal-100);
  background-image: none;
  border-color: var(--lp-teal-400);
}
button.slots-pager__top:focus-visible {
  border-color: var(--lp-teal-500);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

.slots-empty {
  padding: 1.5rem;
  margin: 0 0 1.5rem;
  text-align: center;
  background: var(--lp-sandy);
  border: 1px dashed var(--lp-stone-300);
  border-radius: 1rem;
}
.slots-empty[hidden] { display: none; }
.slots-empty p {
  margin: 0 0 0.75rem;
  font-family: var(--lp-font-sans);
  font-size: 0.9375rem;
  color: var(--lp-stone-700);
}
button.slots-empty__reset {
  appearance: none;
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.875rem;
  font-family: var(--lp-font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lp-teal-700);
  background: var(--lp-teal-50);
  border: 1px solid var(--lp-teal-100);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
button.slots-empty__reset:hover { background: var(--lp-teal-100); border-color: var(--lp-teal-400); }
/* Primary action of the port-card toolbar — strong solid-teal fill so it
   clearly outranks the outline "Filter & sort" / "Find" controls beside
   it. (Those stay pale-teal outline pills; this one is filled.) Base fill
   is teal-700 — darker = white text clears WCAG AA contrast. */
button.slots-toggle-all {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-family: var(--lp-font-sans) !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: var(--lp-teal-700) !important;
  background-image: none !important;
  border: 1px solid var(--lp-teal-700) !important;
  border-radius: 999px !important;
  padding: 0.6rem 1.3rem !important;
  margin: 0 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.30) !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.05s !important;
}
button.slots-toggle-all::before {
  content: '\25B8';
  font-size: 1.125rem;
  line-height: 1;
  color: #fff;
  transition: transform 0.15s;
}
button.slots-toggle-all.is-all-open::before { transform: rotate(90deg); }
button.slots-toggle-all:hover,
button.slots-toggle-all:active {
  background: var(--lp-teal-800) !important;
  background-image: none !important;
  border-color: var(--lp-teal-800) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.38) !important;
}
button.slots-toggle-all:active { transform: translateY(1px) !important; box-shadow: 0 1px 4px rgba(13, 148, 136, 0.30) !important; }
button.slots-toggle-all:focus { outline: none; box-shadow: 0 2px 6px rgba(13, 148, 136, 0.30) !important; }
button.slots-toggle-all:focus-visible {
  outline: none;
  border-color: var(--lp-teal-900) !important;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.35) !important;
}

/* Shared row for Port Options + Developer Tools pill buttons.
   Summaries sit side by side; when a details is open its body claims
   a full row via flex-basis:100%. Row-gap is generous so the open body
   has air above (from the pills row) and below (before the next row). */
.slot-expanders {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem 0.625rem;
}
.slot-expanders > details[open] { flex-basis: 100%; }

/* Breathing space between the summary pill and the opened form body */
.slot-options-toggle[open] > .slot-options,
.slot-advanced[open] > .slot-advanced__body {
  margin-top: 1rem;
}

/* The .slot-options form's "Port Options" header <td> is redundant with
   the summary pill — hide it when rendered inside the expander. */
.slot-options-toggle .slot-options .flags_style {
  display: none !important;
}

/* ─── HEADER ─── ID pill + Type/IP/Expiration block + Next-IP row. */
.slot-header {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* Auto-renew form (when present) sits first, as a muted inline row. */
.slot-header > .auto-renew_form {
  order: -1;
  align-self: flex-start;
  margin: 0 0 0.25rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  font-size: 0.75rem !important;
  color: var(--lp-stone-500) !important;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* ─── Identity block: clean sandy card. Type line promoted to display
   serif via ::first-line; ID chip tucked top-right; IP Count and
   Expiration render as regular DM Sans body lines. ─── */
.slot-header > .div_type_slots:first-of-type {
  position: relative;
  padding: 1rem 8rem 1rem 1.25rem !important;
  margin: 0 !important;
  background: var(--lp-sandy);
  border: 1px solid var(--lp-stone-200);
  border-radius: 0.625rem;
  box-shadow: none;
  font-family: var(--lp-font-sans);
  font-size: 0.9375rem;
  color: var(--lp-stone-700);
  line-height: 1.7;
  letter-spacing: 0;
}

/* First visual line = "Type: Rotating Every 10 Minutes" — promote to
   display-serif headline to match the project's title style. */
.slot-header > .div_type_slots:first-of-type::first-line {
  font-family: var(--lp-font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--lp-stone-900);
  letter-spacing: -0.01em;
}

/* ID chip — absolute top-right so the Type headline owns the left. */
.slot-header .id_slot_text {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  display: inline-flex;
  align-items: center;
  font-family: var(--lp-font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lp-teal-700);
  background: var(--lp-teal-50);
  border: 1px solid var(--lp-teal-100);
  padding: 0.3rem 0.625rem;
  border-radius: 999px;
  margin: 0 !important;
}

/* "Next automatic IP Change" footnote — normal DM Sans, muted stone.
   ::first-letter trick collapses the stray ⇒ glyph without touching
   the data text node (preserves dynamic updates). */
.slot-header .div_type_slots4,
.slot-header .div_type_slots_bw {
  font-family: var(--lp-font-sans);
  font-size: 0.8125rem;
  color: var(--lp-stone-500);
  padding: 0.375rem 0 0 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  line-height: 1.6;
  font-style: normal;
}
.slot-header .div_type_slots4::first-letter,
.slot-header .div_type_slots_bw::first-letter {
  font-size: 0;
  letter-spacing: -0.5em;
  color: transparent;
}

/* "Rotating Every Request" info note when no manual change is available. */
.slot-header .place_holder_link {
  margin: 0.25rem 0 0 !important;
  padding: 0.625rem 0.875rem !important;
  background: var(--lp-sandy) !important;
  border: 1px solid var(--lp-stone-200) !important;
  border-radius: 0.5rem !important;
  font-size: 0.8125rem !important;
  color: var(--lp-stone-600) !important;
  line-height: 1.5;
}

/* ─── PORTS ─── Monospace pills, click to copy. */
.slot-ports {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.slot-ports__row {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 0.75rem;
  align-items: start;
}
.slot-ports__label {
  font-family: var(--lp-font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--lp-stone-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-top: 0.45rem;
}
.port-pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.port-pill {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--lp-stone-900);
  background: var(--lp-teal-50);
  border: 1px solid var(--lp-teal-100);
  border-radius: 0.5rem;
  padding: 0.375rem 0.625rem;
  cursor: pointer;
  user-select: all;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  position: relative;
}
.port-pill:hover {
  background: rgba(20, 184, 166, 0.18);
  border-color: var(--lp-teal-400);
  transform: translateY(-1px);
}
.port-pill:active { transform: translateY(0); }
.port-pill:focus-visible {
  outline: 2px solid var(--lp-teal-500);
  outline-offset: 2px;
}
.port-pill.copied {
  background: var(--lp-emerald-50);
  border-color: rgba(16, 185, 129, 0.4);
  color: var(--lp-emerald-700);
}
.port-pill.copied::after {
  content: 'Copied';
  position: absolute;
  bottom: calc(100% + 0.375rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--lp-font-sans);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--lp-stone-900);
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ─── STATS ─── 3 equal cards, one unified neutral palette. */
.slot-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  align-items: stretch;
}
.slot-stats .div_type_slots2,
.slot-stats .div_type_slots3 {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  display: contents;
}
.slot-stats .line_div,
.slot-stats .hr_updo { display: none !important; }
.slot-stats .stats_div {
  flex: initial;
  margin: 0 !important;
  padding: 0.875rem 1rem !important;
  background: var(--lp-sandy) !important;
  border: 1px solid var(--lp-stone-200) !important;
  border-radius: 0.625rem !important;
  font-family: var(--lp-font-sans);
  font-size: 0.75rem;
  color: var(--lp-stone-600);
  line-height: 1.7;
}
.slot-stats .stats_div_black,
.slot-stats .stats_div_green,
.slot-stats .stats_div_orange {
  color: var(--lp-stone-600) !important;
}
.slot-stats .tooltip {
  background: var(--lp-stone-200);
  color: var(--lp-stone-600);
}

/* ─── OPTIONS (Port settings) ─── Real form, labelled, right-pinned CTA. */
.slot-options .flags_div {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
.slot-options .flags_style {
  font-family: var(--lp-font-sans) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: var(--lp-stone-700) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 0 0 0.875rem !important;
  border: none !important;
}
/* Break the <table> out of its native layout — render each option row
   as a 2-column CSS grid so Country/Region pair up, and the remaining
   toggles flow underneath. Title + submit rows revert to block. */
.slot-options table.tab_flags,
.slot-options table.tab_flags > tbody {
  display: block;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.slot-options table.tab_flags > tbody > tr {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.75rem;
  row-gap: 0.5rem;
}
/* Title row ("Port Options") + submit row (Save changes) — single cell,
   render as block so they don't grid-flow. */
.slot-options table.tab_flags > tbody > tr:first-child,
.slot-options table.tab_flags > tbody > tr:last-child {
  display: block;
}
.slot-options table.tab_flags > tbody > tr > td.td_flag_f {
  display: block;
  width: auto;
  padding: 0.5rem 0 !important;
  vertical-align: top;
  /* Full-width by default — only select-containing cells pair up.
     This makes long-label rows (Reuse IPs, IP rotation interval) get
     the whole row so the input + "seconds" suffix fit inline. */
  grid-column: 1 / -1;
}
/* Country + Region: paired 50/50 since they're the only cells holding
   a <select.select_flag>. */
.slot-options table.tab_flags > tbody > tr > td.td_flag_f:has(select.select_flag) {
  grid-column: auto;
}
.slot-options table.tab_flags > tbody > tr:last-child > td {
  padding-top: 1.25rem !important;
  border-top: 1px solid var(--lp-stone-100) !important;
  text-align: right !important;
}
/* Hide cells that render no meaningful content — "IP rotation interval"
   is marked inline display:none on "Rotating Every Request" slots. Also
   catch truly empty cells. */
.slot-options td.td_flag_f:has(> .td_flag_fd > .flag_holder[style*="display:none"]),
.slot-options td.td_flag_f:has(> .td_flag_fd > .flag_holder[style*="display: none"]),
.slot-options table.tab_flags > tbody > tr > td.td_flag_f:empty {
  display: none !important;
}
.slot-options .td_flag_fd {
  font-size: 0.8125rem;
  color: var(--lp-stone-600);
  padding: 0;
}
/* Each option row lays out as: label text → control → optional suffix
   ("seconds"). Flex with gap keeps everything on ONE line, with the
   numeric input capped so the suffix stays inline and readable. */
.slot-options .td_flag_fd .flag_holder {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  line-height: 1.5;
}
.slot-options .td_flag_fd input[type="text"],
.slot-options .td_flag_fd input[type="number"],
.slot-options .td_flag_fd select.select_flag {
  padding: 0.4rem 0.625rem;
  font-family: var(--lp-font-sans);
  font-size: 0.8125rem;
  color: var(--lp-stone-900);
  background-color: #fff;
  border: 1px solid var(--lp-stone-300);
  border-radius: 0.375rem;
}
.slot-options .td_flag_fd input[type="number"] {
  width: 5.5rem;
  flex: none;
}
.slot-options .td_flag_fd input[type="text"] {
  flex: 1 1 10rem;
  min-width: 8rem;
}
.slot-options .td_flag_fd select.select_flag {
  flex: 1 1 10rem;
  min-width: 9rem;
  padding-right: 2rem;
}
.slot-options .td_flag_fd input[type="checkbox"] {
  flex: none;
  width: 1rem;
  height: 1rem;
  accent-color: var(--lp-teal-600);
  margin: 0;
}
.slot-options .td_flag_fd input:focus,
.slot-options .td_flag_fd select:focus {
  outline: none;
  border-color: var(--lp-teal-500);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}
/* "Save changes" primary CTA */
.slot-options input[type="submit"].flags_change,
.slot-options input[type="submit"][name="flags_change"] {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  padding: 0.625rem 1.25rem !important;
  font-family: var(--lp-font-sans);
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: var(--lp-teal-600) !important;
  border: 1px solid var(--lp-teal-600) !important;
  border-radius: 0.5rem !important;
  cursor: pointer;
  margin: 0 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  float: none !important;
}
.slot-options input[type="submit"].flags_change:hover {
  background: var(--lp-teal-700) !important;
  box-shadow: 0 10px 20px -6px rgba(13, 148, 136, 0.35);
  transform: translateY(-1px);
}

/* ─── PORT OPTIONS + DEVELOPER TOOLS (<details>) ─── Subtle teal pills. */
.slot-advanced,
.slot-options-toggle { margin: 0; }
.slot-ports-toggle { margin: 1rem 0; }
.slot-ports-toggle[open] > summary { margin-bottom: 0.875rem; }
.slot-advanced > summary,
.slot-options-toggle > summary,
.slot-ports-toggle > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--lp-font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lp-teal-700);
  background: var(--lp-teal-50);
  border: 1px solid var(--lp-teal-100);
  border-radius: 999px;
  padding: 0.45rem 0.875rem;
  cursor: pointer !important;
  user-select: none;
  transition: background 0.15s, border-color 0.15s;
}
.slot-advanced > summary:hover,
.slot-options-toggle > summary:hover,
.slot-ports-toggle > summary:hover {
  background: var(--lp-teal-100);
  border-color: var(--lp-teal-400);
}
.slot-advanced > summary::-webkit-details-marker,
.slot-options-toggle > summary::-webkit-details-marker,
.slot-ports-toggle > summary::-webkit-details-marker { display: none; }
.slot-advanced > summary::marker,
.slot-options-toggle > summary::marker,
.slot-ports-toggle > summary::marker { display: none; content: ""; }
.slot-advanced > summary::before,
.slot-options-toggle > summary::before,
.slot-ports-toggle > summary::before {
  content: '▸';
  font-size: 1.125rem;
  line-height: 1;
  transition: transform 0.15s;
  color: var(--lp-teal-600);
}
.slot-advanced[open] > summary::before,
.slot-options-toggle[open] > summary::before,
.slot-ports-toggle[open] > summary::before { transform: rotate(90deg); }

/* ═══════════════════════════════════════════
   PAGE-LEVEL COLLAPSIBLES — /proxy-ports (REVERT-SAFE)
   ═══════════════════════════════════════════
   Paired with theme.js `wrapCollapse(...)`. Reverts cleanly: delete
   this block + the JS wrap block and the DOM restores to its original
   shape (we only wrap, never mutate). */
details.lp-collapse { margin: 1rem 0; }
details.lp-collapse > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--lp-font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lp-teal-700);
  background: var(--lp-teal-50);
  border: 1px solid var(--lp-teal-100);
  border-radius: 999px;
  padding: 0.45rem 0.875rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s;
}
details.lp-collapse > summary:hover {
  background: var(--lp-teal-100);
  border-color: var(--lp-teal-400);
}
details.lp-collapse > summary::-webkit-details-marker { display: none; }
details.lp-collapse > summary::marker { display: none; content: ""; }
details.lp-collapse > summary::before {
  content: '▸';
  font-size: 1.125rem;
  line-height: 1;
  color: var(--lp-teal-600);
  transition: transform 0.15s;
}
details.lp-collapse[open] > summary::before { transform: rotate(90deg); }
details.lp-collapse[open] > summary { margin-bottom: 1rem; }
.lp-collapse__count {
  color: var(--lp-stone-500);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.75rem;
}

/* Hide duplicate in-body titles — summary already says the same thing */
details.lp-collapse--buybw .bw-purchase__title,
details.lp-collapse--allowedips .auth_title { display: none !important; }

/* Buy-BW sandy card stays sandy when opened; no extra margin on the
   nested card since details[open] already pads below the summary */
details.lp-collapse--buybw > .bw-purchase { margin: 0; }

/* Allowed IPs card — serif title + caption + "Options" pill disclosure.
   Title/caption mirror .bw_title styling on the Bandwidth Usage card so the
   two read as peers. */
.aip-card {
  background: var(--lp-sandy);
  border: 1px solid var(--lp-stone-200);
  border-radius: 1rem;
  padding: 0.875rem 1.5rem 1rem;
  margin: 0 0 2.5rem;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.03);
}
.aip-title {
  font-family: var(--lp-font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--lp-stone-900);
  margin: 0 0 0.25rem;
  letter-spacing: -0.01em;
}
.aip-caption {
  font-size: 0.8125rem;
  color: var(--lp-stone-500);
  margin: 0 0 0.875rem;
}
.aip-card > details.lp-collapse--allowedips { margin: 0; }
.aip-card > details.lp-collapse--allowedips > .auth {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
.aip-card .auth table td { background: transparent; }

.slot-advanced__body {
  margin-top: 0.875rem;
  padding: 1.25rem;
  background: var(--lp-sandy);
  border: 1px solid var(--lp-stone-200);
  border-radius: 0.75rem;
  font-family: var(--lp-font-sans);
  font-size: 0.8125rem;
  color: var(--lp-stone-600);
  line-height: 1.6;
}
.slot-advanced__body .proxy_list_sample {
  margin: 0 0 1rem;
  padding: 0.875rem !important;
  background: #fff;
  border: 1px solid var(--lp-stone-200);
  border-radius: 0.5rem;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--lp-stone-700);
  line-height: 1.7;
  word-break: break-all;
}
.slot-advanced__body .link_to_use_title {
  display: block;
  margin: 0.25rem 0 0.375rem;
  font-size: 0.75rem;
  color: var(--lp-stone-500);
}
.slot-advanced__body .break_url {
  margin: 0 0 0.875rem;
  padding: 0.625rem 0.875rem !important;
  background: #fff;
  border: 1px solid var(--lp-stone-200);
  border-radius: 0.5rem;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--lp-stone-900);
  word-break: break-all;
}

/* Copy + Change-IP sit side-by-side, same height and weight. */
.slot-advanced__body .c_bottom_buttons {
  width: auto !important;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0.5rem 0;
}
.slot-advanced__body .c_bottom_buttons,
.slot-advanced__body .c_bottom_buttons tbody,
.slot-advanced__body .c_bottom_buttons tr {
  background: transparent !important;
}
.slot-advanced__body .c_bottom_buttons td {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  vertical-align: middle;
}
.slot-advanced__body .bottom_buttons_or {
  padding: 0 0.25rem !important;
  font-size: 0.6875rem;
  color: var(--lp-stone-400);
  font-style: italic;
  letter-spacing: 0.04em;
}
.slot-advanced__body .change_ip_btn { margin: 0; }
.slot-advanced__body .copy_url,
.slot-advanced__body .change_ip_btn_submit {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 2.375rem;
  width: auto !important;
  padding: 0 1.125rem !important;
  font-family: var(--lp-font-sans);
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 0.5rem !important;
  cursor: pointer;
  white-space: nowrap;
  margin: 0 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
/* Copy = secondary ghost */
.slot-advanced__body .copy_url {
  color: var(--lp-stone-700) !important;
  background: #fff !important;
  border: 1px solid var(--lp-stone-300) !important;
}
.slot-advanced__body .copy_url:hover {
  color: var(--lp-stone-900) !important;
  border-color: var(--lp-stone-500) !important;
  box-shadow: 0 6px 12px -4px rgba(28, 25, 23, 0.15);
  transform: translateY(-1px);
  background: #fff !important;
}
/* Change IP = primary teal */
.slot-advanced__body .change_ip_btn_submit {
  color: #fff !important;
  background: var(--lp-teal-600) !important;
  border: 1px solid var(--lp-teal-600) !important;
}
.slot-advanced__body .change_ip_btn_submit:hover {
  background: var(--lp-teal-700) !important;
  box-shadow: 0 10px 20px -6px rgba(13, 148, 136, 0.35);
  transform: translateY(-1px);
}
.slot-advanced__note {
  margin-top: 0.875rem;
  font-size: 0.75rem;
  color: var(--lp-stone-400);
  font-style: italic;
}

/* Responsive: stack stats, collapse port-pill label above pills. */
@media (max-width: 720px) {
  .slot { padding: 1.25rem !important; }
  .slot-stats { grid-template-columns: 1fr; }
  .slot-ports__row {
    grid-template-columns: 1fr;
    gap: 0.375rem;
  }
  .slot-ports__label { padding-top: 0; }
  .slot-options table.tab_flags > tbody > tr > td.td_flag_f { width: 100%; display: block; }
  .slot-advanced__body .c_bottom_buttons,
  .slot-advanced__body .c_bottom_buttons tbody,
  .slot-advanced__body .c_bottom_buttons tr,
  .slot-advanced__body .c_bottom_buttons td {
    display: block !important;
    width: 100% !important;
  }
  .slot-advanced__body .copy_url,
  .slot-advanced__body .change_ip_btn_submit {
    width: 100% !important;
    margin-bottom: 0.5rem !important;
  }
  .slot-advanced__body .bottom_buttons_or { display: none !important; }
}

/* ═══════════════════════════════════════════
   PAYMENT HISTORY — body-class scope + invoice cards
   ═══════════════════════════════════════════
   REAL MARKUP (from views/member/_invoice.phtml and member/layout):
     <body class="am-page-member-payment-history"> (auto-generated from
     controller/action; wildcard match used defensively)
       <div class="am-active-invoice">
         <div class="am-active-invoice-header">
           <span class="am-active-invoice-date">...</span>
           <span class="am-active-invoice-num">#1234</span>
           <span class="am-active-invoice-paysys">...</span>
           <span class="am-active-invoice-terms">...</span>
           <div class="am-active-invoice-rebill-info">
             <span class="am-active-invoice-rebill-date [am-error]">...</span>
             <span class="am-active-invoice-cancel">Cancelled (...)</span>
             <span class="am-active-invoice-failed">Failed</span>
             ...
           </div>
         </div>
         <ul class="am-active-invoice-product-list">
           <li class="am-active-invoice-product">...</li>
         </ul>
       </div>
   aMember renders ONE card per active invoice, NOT a flat table with a
   status column. The demo's table model doesn't match. We port the card
   aesthetic + pill-style state markers to the real classes. */

/* Widen container on payment-history page (matches dashboard width).
   payment-history.phtml doesn't set $body_class, so the old
   body[class*="am-page-payment-history"] wrapper never matched.
   We scope by the presence of an .am-active-invoice card instead —
   that class is emitted only by member/_invoice.phtml which is
   included exclusively from the payment-history view. */
body:has(.am-active-invoice) .lp-container {
  max-width: 72rem;
}

/* Invoice card — static white rounded card, no hard rectangles, no hover */
.am-active-invoice {
  background: #fff !important;
  border: 0 !important;
  border-radius: 0.875rem;
  padding: 1.125rem 1.375rem !important;
  margin: 0 0 0.875rem !important;
  box-shadow: none;
}
.am-active-invoice:hover {
  background: #fff !important;
}
.am-active-invoice:last-child { margin-bottom: 0 !important; }

.am-active-invoice-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem 0.75rem;
  padding-bottom: 0.625rem;
  margin-bottom: 0.625rem;
  border-bottom: 1px solid rgba(28, 25, 23, 0.06);
  font-size: 0.8125rem;
  color: var(--lp-stone-500);
}

.am-active-invoice-date {
  color: var(--lp-stone-900) !important;
  font-weight: 600 !important;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.am-active-invoice .am-active-invoice-num {
  font-weight: 600;
  color: var(--lp-teal-700);
  font-family: var(--lp-font-sans);
  font-size: 0.75rem;
}

.am-active-invoice-paysys {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lp-stone-500);
}

.am-active-invoice .am-active-invoice-terms {
  margin-left: auto;
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lp-stone-900);
  font-variant-numeric: tabular-nums;
}

/* Rebill info row — full-width below the meta header, muted type */
.am-active-invoice-rebill-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.625rem;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--lp-stone-500);
}

.am-active-invoice-rebill-date,
.am-active-invoice-rebill-date.am-error {
  color: var(--lp-teal-700) !important;
  font-weight: 600;
}

/* Status pills — match demo's "Paid"/"Pending"/"Failed" treatment.
   Demo: background:rgba(16,185,129,0.1); color:#059669;
         font-size:0.6875rem; font-weight:600;
         padding:0.15rem 0.5rem; border-radius:1rem;
   Mapped to real aMember state spans. */

/* "Cancelled" span (both the static label and the cancel-link wrapper) —
   neutral/amber pill */
.am-active-invoice .am-active-invoice-cancel {
  display: inline-flex;
  align-items: center;
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
}

.am-active-invoice .am-active-invoice-cancel a {
  color: #b45309;
}

.am-active-invoice .am-active-invoice-cancel a:hover {
  color: #92400e;
}

/* "Failed" pill — red */
.am-active-invoice-failed {
  display: inline-flex;
  align-items: center;
  background: rgba(239, 68, 68, 0.1);
  color: var(--lp-red-700);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
}

/* Renew / Restore / Update-CC action links — teal, small */
.am-active-invoice-manual-rebill a,
.am-active-invoice-restore a,
.am-active-invoice-update-cc a {
  font-size: 0.75rem;
  color: #0d9488;
  font-weight: 600;
}

.am-active-invoice-manual-rebill a:hover,
.am-active-invoice-restore a:hover,
.am-active-invoice-update-cc a:hover {
  color: #0f766e;
}

/* Product list inside invoice card */
.am-active-invoice .am-active-invoice-product-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.am-active-invoice .am-active-invoice-product-list li {
  list-style: none;
  padding: 0.125rem 0;
  font-size: 0.9375rem;
  color: var(--lp-stone-900);
  font-weight: 500;
  border-bottom: 0;
}

.am-active-invoice .am-active-invoice-product-list li:last-child {
  border-bottom: none;
}

.am-active-invoice-item-title {
  color: var(--lp-stone-900);
  font-weight: 500;
}

.am-active-invoice-upgrade a {
  font-size: 0.75rem;
  color: #0d9488;
  font-weight: 600;
  margin-left: 0.5rem;
}

.am-active-invoice-footer {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f1f5f9;
  font-size: 0.75rem;
  color: #94a3b8;
}

/* ─── Payment-history section titles (Your Subscriptions / Payments History)
   aMember emits plain <h1> inside #am-block-active-subscriptions and
   #am-block-payments. Base body reset makes them tiny — lift to
   proper section-title size matching demo H2s. */
#am-block-active-subscriptions,
#am-block-payments {
  margin: 0 0 2rem;
}
#am-block-active-subscriptions > h1,
#am-block-payments > h1 {
  font-family: var(--lp-font-sans) !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  color: var(--lp-stone-900) !important;
  margin: 0 0 0.875rem !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
}

/* ─── Payments-history — document-style receipt cards ───
   MARKUP: <table.am-grid.am-member-payment-history><tbody>
     <tr><th>Date</th><th>Invoice</th><th>Products</th><th>Payment System</th><th>Amount</th></tr>
     <tr class="am-grid-row"><td.date>…<td.invoice_id>…<td.items>…<td.paysys>…<td.amount>…</tr>
   We break table semantics with display overrides and render each
   row as a receipt/document card. */

.am-grid-container:has(> .am-member-payment-history) {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.am-member-payment-history {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  border-collapse: collapse;
  border-spacing: 0;
  font-family: var(--lp-font-sans);
}
.am-member-payment-history > tbody {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  width: 100%;
}

/* Header row — hide; we'll use card labels instead */
.am-member-payment-history > tbody > tr:first-child { display: none; }

/* Each data row becomes a static white receipt card — no border, no hover */
.am-member-payment-history > tbody > tr.am-grid-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "date    invoice amount"
    "product product product"
    "paysys  paysys  paysys";
  column-gap: 1rem;
  row-gap: 0.5rem;
  padding: 1.125rem 1.375rem;
  background: #fff !important;
  border: 0;
  border-radius: 0.875rem;
  box-shadow: none;
}
.am-member-payment-history > tbody > tr.am-grid-row:hover {
  background: #fff !important;
}

.am-member-payment-history > tbody > tr.am-grid-row > td {
  display: block;
  padding: 0;
  border: 0;
  background: transparent !important;
  font-size: 0.875rem;
  color: var(--lp-stone-700);
  vertical-align: baseline;
}

/* DATE — top-left, muted label */
.am-member-payment-history .am-member-payment-history-date {
  grid-area: date;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lp-stone-500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1.4;
}

/* INVOICE ID — middle-top, teal code */
.am-member-payment-history .am-member-payment-history-invoice_id {
  grid-area: invoice;
  color: var(--lp-teal-700);
  font-weight: 600;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.am-member-payment-history .am-member-payment-history-invoice_id::before {
  content: 'INV · ';
  color: var(--lp-stone-400, #a8a29e);
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* AMOUNT — top-right, large document-amount treatment */
.am-member-payment-history .am-member-payment-history-amount {
  grid-area: amount;
  text-align: right;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--lp-stone-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* PRODUCT name — middle row, main content */
.am-member-payment-history .am-member-payment-history-items {
  grid-area: product;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--lp-stone-900);
  line-height: 1.5;
  padding-top: 0.25rem;
  border-top: 1px solid var(--lp-stone-100);
}

/* PAYSYS — bottom row, small muted label */
.am-member-payment-history .am-member-payment-history-paysys {
  grid-area: paysys;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lp-stone-400, #a8a29e);
}
.am-member-payment-history .am-member-payment-history-paysys::before {
  content: 'via ';
  letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════
   PAYMENT PAGE (views/payment.phtml) — redirect form
   ═══════════════════════════════════════════
   REAL MARKUP:
     <body class="am-page-payment">
       <form id="payment-system-redirect" method="post" action="...">
         <input type="submit" id="payment-continue-button" value="Continue" />
       </form>
   Minimal styling — the form inherits most from existing .am-form rules.
   Just center the continue button and ensure the form sits inside a card. */

#payment-system-redirect {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.75rem;
  max-width: 28rem;
  margin: 1rem auto;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

#payment-continue-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  background: #0d9488;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
}

#payment-continue-button:hover {
  box-shadow: 0 8px 24px rgba(13,148,136,0.3);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════
   THANKS PAGE (views/thanks.phtml) — post-payment confirmation
   ═══════════════════════════════════════════
   REAL MARKUP (verified in thanks.phtml):
     <body class="am-page-thanks">
       <div class="am-thanks-status-success">Your payment has been ...</div>
       <div class="am-thanks-payment-details">Order reference: ...</div>
       <div class="am-thanks-awaiting-payment">...</div>
       <div class="am-thanks-awaiting-refresh">...</div>
       <div class="am-thanks-login-offer"><strong>Enjoy ... <a>Login</a></strong></div>
       (+ _receipt.phtml rendered inline — .am-receipt-* classes)
   The default amember.css gives these bare minimal styles (green text,
   padding). We upgrade to the card aesthetic. */

body.am-page-thanks .lp-container {
  max-width: 32rem;
}

.am-thanks-status-success {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 0.5rem;
  padding: 0.875rem 1rem;
  color: #059669;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.am-thanks-payment-details {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.875rem 1rem;
  font-size: 0.8125rem;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.am-thanks-payment-details strong {
  color: #0f172a;
  font-weight: 600;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.am-thanks-awaiting-payment {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 0.5rem;
  padding: 0.875rem 1rem;
  font-size: 0.8125rem;
  color: #b45309;
  margin-bottom: 1rem;
}

.am-thanks-awaiting-refresh {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #94a3b8;
}

.am-thanks-login-offer {
  text-align: center;
  padding: 1rem;
  font-size: 0.875rem;
  color: #475569;
  font-weight: 400;
}

.am-thanks-login-offer strong {
  font-weight: 400;
}

.am-thanks-login-offer a {
  color: #0d9488;
  font-weight: 600;
}

.am-thanks-login-offer a:hover {
  color: #0f766e;
}

/* ═══════════════════════════════════════════
   INVOICE SUMMARY — receipt body inside thanks/payment cards
   ═══════════════════════════════════════════
   Classes verified against amember.css (2944–2995), which is the
   canonical style-map for _receipt.phtml. We override the heavy
   white-box-with-border default to blend into our card aesthetic. */

.am-invoice-summary {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 1rem;
  font-size: 0.8125rem;
}
.am-invoice-summary table { width: 100%; border-collapse: collapse; }
.am-invoice-summary td { padding: 0.375rem 0.5rem; border-bottom: 1px solid #f1f5f9; }
.am-invoice-summary .am-invoice-summary-item-title { color: #64748b; }
.am-invoice-summary .am-invoice-summary-price,
.am-invoice-summary .am-invoice-summary-subtotal,
.am-invoice-summary .am-invoice-summary-shipping,
.am-invoice-summary .am-invoice-summary-tax {
  text-align: right; color: #0f172a; font-size: 0.8125rem;
}
.am-invoice-summary .am-invoice-summary-discount {
  text-align: right; color: #047857; font-size: 0.8125rem;
}
.am-invoice-summary .am-invoice-summary-total {
  text-align: right; color: #0d9488;
  font-size: 0.9375rem; font-weight: 700;
  border-top: 1px solid #e2e8f0;
}

/* ═══════════════════════════════════════════
   Item 1 — Member dashboard widget grid
   ═══════════════════════════════════════════
   REAL MARKUP (views/member/main.phtml L8-25):
     <div class="am-layout-two-coll">
       <div class="am-layout-two-coll-top"></div>
       <div class="am-coll-left">
         <div class="am-coll-content">
           <div class="am-widget" id="widget-*">
             <h2 id="*-head">Title</h2>
             <div class="am-block" id="*">...</div>
           </div>
         </div>
       </div>
       <div class="am-coll-right">...</div>
       <div class="am-layout-two-coll-bottom"></div>
     </div>
   Two-column grid, stacks at ≤640px. Each .am-widget = card. */

.am-layout-two-coll {
  display: flex !important;
  flex-direction: column;
  gap: 1.25rem;
  align-items: stretch;
  /* Stock amember.css gives this wrapper a #f5f5f5 background, 1px
     #d9d9d9 border, shadow, and a repeating data-URI dotted divider.
     Reset all of that so the two columns sit on our own card chrome. */
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0;
}

.am-layout-two-coll-top,
.am-layout-two-coll-bottom {
  grid-column: 1 / -1;
  background: transparent !important;
  height: 0 !important;
}

.am-coll-left,
.am-coll-right {
  min-width: 0;
  /* Stock amember.css (L1313-1317) floats these at width:50% on screens
     ≥750px — which breaks our CSS Grid layout by pulling them out of
     normal flow. Override to block so grid takes over. */
  float: none !important;
  width: auto !important;
}

.am-coll-content,
.am-coll-right {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 0 !important;
}

.am-widget {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Specificity 0,1,1 beats global h1,h2,h3 (0,0,1) — no !important needed. */
.am-widget > h2 {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.875rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid #f1f5f9;
}

.am-widget .am-block {
  font-size: 0.8125rem;
  color: #475569;
  line-height: 1.7;
}

@media (max-width: 640px) {
  .am-layout-two-coll { gap: 1rem; }
}

/* ═══════════════════════════════════════════
   Item 2 — Upgrade popup
   ═══════════════════════════════════════════
   REAL MARKUP (views/member/_upgrade.phtml L3-37):
     <form name="upgrade" action="...member/upgrade">
       <div class="am-upgrade-options">
         <label><input type="radio" ...>
           <span class="am-product-title">...</span>
           <span class="am-product-terms">...</span>
           <span class="am-product-desc">...</span>
         </label>
         <div class="am-upgrade-options-comment">...</div>
       </div>
       <div class="am-upgrade-coupon"><label>Coupon Code</label><input></div>
       <div>
         <input type="submit" class="upgrade-subscription-yes am-cta-upgrade">
         <a class="am-popup-close upgrade-subscription-no local-link">Cancel</a>
       </div>
     </form>
   Radio cards mirror signup's product-picker. Coupon = narrow inline field.
   Submit + cancel side-by-side. */

form[name="upgrade"] {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.am-upgrade-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.am-upgrade-options > label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.am-upgrade-options > label:hover {
  border-color: #0d9488;
  background: rgba(13, 148, 136, 0.03);
}

.am-upgrade-options > label:has(input:checked) {
  border-color: #0d9488;
  background: rgba(13, 148, 136, 0.05);
}

.am-upgrade-options > label input[type="radio"] {
  accent-color: #0d9488;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

/* Re-enable .am-product-desc in upgrade context via specificity only.
   Line 398 hides it globally for signup radio cards; specificity 0,2,0
   here beats the 0,1,0 global rule. NO !important used. */
.am-upgrade-options .am-product-desc {
  display: block;
  flex-basis: 100%;
  margin-top: 0.25rem;
  padding-left: 1.375rem;
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.6;
}

.am-upgrade-options-comment {
  font-size: 0.75rem;
  color: #94a3b8;
  padding: 0.25rem 0.875rem 0;
}

.am-upgrade-coupon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.am-upgrade-coupon label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0;
  white-space: nowrap;
}

.am-upgrade-coupon input[type="text"] {
  flex: 0 1 12rem;
  width: auto;
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
}

.am-upgrade-coupon br { display: none; }

form[name="upgrade"] > div:last-child {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.am-body-content input.am-cta-upgrade,
.am-body-content .am-cta-upgrade {
  display: inline-block;
  width: auto;
  padding: 0.625rem 1.25rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  background: #0d9488;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  margin: 0;
  transition: box-shadow 0.15s, transform 0.15s;
}

.am-body-content input.am-cta-upgrade:hover,
.am-body-content .am-cta-upgrade:hover {
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
  transform: translateY(-1px);
}

.am-popup-close.upgrade-subscription-no.local-link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #64748b;
}

.am-popup-close.upgrade-subscription-no.local-link:hover {
  color: #0f172a;
}

/* ═══════════════════════════════════════════
   Item 3 — Cancel-subscription popup
   ═══════════════════════════════════════════
   REAL MARKUP (views/member/_cancel.phtml L8-14):
     <div class="cancel-subscription-popup-text">...</div>
     <div class="cancel-subscription-buttons">
       <input type="button" id="cancel-subscription-yes" class="am-cta-cancel">
       <a class="am-popup-close local-link" id="cancel-subscription-no">...</a>
     </div>
   Note: confirm is type="button" (NOT submit) — so the global
   input[type="submit"] teal rule does NOT hit it.
   Safe-default cancel link = muted grey. Mobile reverses order. */

.cancel-subscription-popup-text {
  font-size: 0.875rem;
  color: #0f172a;
  line-height: 1.6;
  margin-bottom: 1rem;
  padding: 0.5rem 0;
}

.cancel-subscription-buttons {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.am-body-content input.am-cta-cancel,
.am-body-content .am-cta-cancel {
  display: inline-block;
  width: auto;
  padding: 0.625rem 1.25rem;
  font-family: var(--lp-font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  background: var(--lp-red-600);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  margin: 0;
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}

.am-body-content input.am-cta-cancel:hover,
.am-body-content .am-cta-cancel:hover {
  background: var(--lp-red-700);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
  transform: translateY(-1px);
}

#cancel-subscription-no.am-popup-close.local-link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #64748b;
}

#cancel-subscription-no.am-popup-close.local-link:hover {
  color: #0f172a;
}

@media (max-width: 640px) {
  .cancel-subscription-buttons {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .cancel-subscription-buttons .am-cta-cancel { width: 100%; }
  .cancel-subscription-buttons #cancel-subscription-no.am-popup-close.local-link {
    text-align: center;
    padding: 0.5rem 0;
  }
}

/* ═══════════════════════════════════════════
   Item 4 — .am-info block
   ═══════════════════════════════════════════
   REAL MARKUP (views/sendpass.phtml L2-5):
     <div class="am-info"><?php p($text) ?></div>
     <a href="javascript: history.back(-1)">Return to log-in page</a>
   Vendor default to override (views/public/css/amember.css 2787-2793):
     .am-info { background:#dfe8f0; border:1px solid #ccddeb;
                border-radius:3px; margin-bottom:1em; padding:.5em 1em; }
   The .am-info.am-login-text modifier already handled at line 436
   (signup login-offer). This rule is for the bare-.am-info pattern
   on sendpass and other notice pages. Narrow centered container. */

.am-info {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  color: #475569;
  font-size: 0.8125rem;
  line-height: 1.7;
  padding: 0.875rem 1rem;
  margin-bottom: 1rem;
}

/* "Return to login" anchor that directly follows an .am-info block */
.am-info + a {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #0d9488;
}

.am-info + a:hover {
  color: #0f766e;
}

/* Narrow centered container when the page is just a bare .am-info notice
   (sendpass and similar). Scoped so the dashboard / signup are untouched. */
body:has(> .lp-main > .lp-container > .am-info) .lp-container {
  max-width: 32rem;
}

/* ═══════════════════════════════════════════
   Account-delete confirm page (member/delete + personal-data/delete)
   ═══════════════════════════════════════════
   REAL MARKUP (views/member/delete-confirm.phtml, views/personal-data-*.phtml):
     - body has NO class
     - bare <p>, <h1>, <h2>, <hr> flow
     - form has id delete-personal-data-confirm or posts to member/delete
     - broken <p><h1></p> pattern leaves empty <p></p> siblings
   Scope both variants via :has on either the form id or the known action. */

body:has(#delete-personal-data-confirm) .lp-container,
body:has(form[action*="member/delete"]) .lp-container {
  max-width: 48rem !important;
}

body:has(#delete-personal-data-confirm) hr,
body:has(form[action*="member/delete"]) hr {
  border: none;
  border-top: 1px solid var(--lp-stone-200);
  margin: 1.5rem 0;
}

body:has(#delete-personal-data-confirm) .am-body-content-top h1,
body:has(#delete-personal-data-confirm) h1,
body:has(form[action*="member/delete"]) h1 {
  font-size: 2rem;
  color: var(--lp-stone-900);
  margin: 0 0 1rem;
  line-height: 1.2;
}

body:has(#delete-personal-data-confirm) h2,
body:has(form[action*="member/delete"]) h2 {
  font-family: var(--lp-font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--lp-stone-900);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 1.25rem 0 0.75rem;
  line-height: 1.4;
}

body:has(#delete-personal-data-confirm) p,
body:has(form[action*="member/delete"]) p {
  font-size: 1rem;
  color: var(--lp-stone-700);
  line-height: 1.65;
  margin: 0 0 0.875rem;
}

body:has(#delete-personal-data-confirm) p:empty,
body:has(form[action*="member/delete"]) p:empty {
  display: none;
}

/* Product list (subscriptions that will lose access) — cleaner readable lines */
body:has(#delete-personal-data-confirm) ul.am-list-subscriptions,
body:has(form[action*="member/delete"]) ul.am-list-subscriptions {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0.75rem;
}
body:has(#delete-personal-data-confirm) ul.am-list-subscriptions li {
  padding: 0.5rem 0;
  font-size: 1rem;
  color: var(--lp-stone-900);
  border-bottom: 1px solid var(--lp-stone-100);
}
body:has(#delete-personal-data-confirm) ul.am-list-subscriptions li:last-child {
  border-bottom: 0;
}
body:has(#delete-personal-data-confirm) .am-list-subscriptions-title strong {
  font-weight: 600;
}
body:has(#delete-personal-data-confirm) .am-list-subscriptions-date_lifetime {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--lp-teal-700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Confirm form — stacked left-aligned, comfortable sizing ── */
#delete-personal-data-confirm {
  margin: 1rem 0 0 !important;
  padding: 1.25rem 1.5rem !important;
  background: #fff;
  border-radius: 0.875rem;
  max-width: 32rem;
}

#delete-personal-data-confirm .am-row,
#delete-personal-data-confirm .am-row.row {
  display: block !important;
  margin-bottom: 1rem !important;
  text-align: left !important;
}

#delete-personal-data-confirm .am-element-title,
#delete-personal-data-confirm .element-title {
  display: block !important;
  width: 100% !important;
  margin: 0 0 0.375rem !important;
  padding: 0 !important;
  font-family: var(--lp-font-sans) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--lp-stone-900) !important;
  text-align: left !important;
}

#delete-personal-data-confirm .am-element-title label,
#delete-personal-data-confirm .element-title label {
  font-family: var(--lp-font-sans);
  font-weight: 600;
}

#delete-personal-data-confirm .am-element,
#delete-personal-data-confirm .element {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

#delete-personal-data-confirm input[type="password"] {
  width: 100% !important;
  padding: 0.625rem 0.875rem !important;
  font-size: 0.9375rem !important;
  color: var(--lp-stone-900) !important;
  background: #fff !important;
  border: 1px solid var(--lp-stone-300) !important;
  border-radius: 0.5rem !important;
}
#delete-personal-data-confirm input[type="password"]:focus {
  outline: none;
  border-color: var(--lp-teal-600) !important;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

#delete-personal-data-confirm #row-confirm-submit-0 {
  margin-top: 1.25rem !important;
  text-align: left !important;
}
#delete-personal-data-confirm #row-confirm-submit-0 .am-element {
  text-align: left !important;
}

/* Destructive submit — /personal-data/delete + legacy /member/delete. */
#delete-personal-data-confirm input[type="submit"],
body:has(form[action*="member/delete"]) form[action*="member/delete"] input[type="submit"],
body:has(form[action*="member/delete"]) form[action*="member/delete"] button[type="submit"] {
  display: inline-flex !important;
  padding: 0.625rem 1.25rem !important;
  font-family: var(--lp-font-sans) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: var(--lp-red-600) !important;
  border: 1px solid var(--lp-red-600) !important;
  border-radius: 0.5rem !important;
  cursor: pointer;
  margin: 0 !important;
  width: auto !important;
  transition: background 0.15s, box-shadow 0.15s;
}
#delete-personal-data-confirm input[type="submit"]:hover,
body:has(form[action*="member/delete"]) form[action*="member/delete"] input[type="submit"]:hover,
body:has(form[action*="member/delete"]) form[action*="member/delete"] button[type="submit"]:hover {
  background: var(--lp-red-700) !important;
  border-color: var(--lp-red-700) !important;
  box-shadow: 0 8px 20px -6px rgba(220, 38, 38, 0.4);
}

/* ═══ Narrow-viewport fixes (mobile QA) ═══ */

/* Port-card toolbar + identity block. Unpin the ID pill so the Type/IP/
   Expiration text can use the full width instead of wrapping word-per-line
   under the 8rem desktop gutter. */
@media (max-width: 480px) {
  .slots-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  button.slots-toggle-all {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.8rem 1.3rem !important;
  }
  .slots-toolbar__controls {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  input.slots-find {
    width: 100%;
    flex: 1 1 auto;
  }
  .slot {
    padding: 1.25rem !important;
  }
  .slot-header > .div_type_slots:first-of-type {
    padding: 0.875rem 1rem !important;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }
  .slot-header .id_slot_text {
    position: static;
    align-self: flex-start;
    margin: 0 0 0.375rem !important;
  }
  .slot-header > .div_type_slots:first-of-type::first-line {
    font-size: 1.25rem;
  }
}

/* iPhone-SE class: stack password row's label + Change button full-width. */
@media (max-width: 375px) {
  form#profile #row-qfauto-1 {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 0.5rem;
  }
  form#profile #row-qfauto-1 .am-element {
    width: 100% !important;
    flex: 1 1 auto !important;
  }
  form#profile .am-change-pass-toggle {
    width: 100% !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
}