/* ============================================================
   Clasva PMS Skin — presentation only
   Restyles Paid Member Subscriptions auth/account surfaces
   (sign-in 7703 · sign-up 7708 · password-reset 4899 · subscriptions 8272)
   into the Clasva product UI. No PMS markup, logic, routes or
   vendor CSS touched — this sheet loads after PMS styles and
   overrides by cascade/specificity.
   ============================================================ */

:root {
  --clsv-navy: #0f172a;
  --clsv-ink: #0f172a;
  --clsv-blue: #2563eb;
  --clsv-blue-hover: #1d4ed8;
  --clsv-blue-tint: #eff6ff;
  --clsv-body: #475569;
  --clsv-muted: #64748b;
  --clsv-line: #e2e8f0;
  --clsv-tint-bg: #f8fafc;
  --clsv-white: #ffffff;
  --clsv-danger: #dc2626;
  --clsv-danger-bg: #fef2f2;
  --clsv-ok: #047857;
  --clsv-ok-bg: #ecfdf5;
  --clsv-warn: #b45309;
  --clsv-warn-bg: #fffbeb;
  --clsv-font: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --clsv-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
}

/* ---- outer rail: keep Breakdance container centered, cap at system rail,
       and tighten the very tall Breakdance top padding on these surfaces
       (still clears the ~107px fixed site header) ---- */
.page-id-7703 .section-container,
.page-id-7708 .section-container,
.page-id-4899 .section-container,
.page-id-8272 .section-container {
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
}
.page-id-7703 .bde-section-7703-100 > .section-container,
.page-id-7708 .bde-section-7708-100 > .section-container,
.page-id-4899 .bde-section-852-100 > .section-container,
.page-id-8272 .bde-section-8272-100 > .section-container,
.page-id-8272 .bde-section-8272-103 > .section-container {
  padding-top: 120px !important;
  padding-bottom: 80px !important;
}

/* ============================================================
   1. FORM SHELL
   ============================================================ */
.pms-form.pms-form-design-wrapper,
.pms-form.pms-form-design-wrapper * {
  font-family: var(--clsv-font);
  box-sizing: border-box;
}

/* PMS form-designer lays the form / field list out as a wrapping flexbox
   which makes rows size to content and wrap oddly. Force a plain block
   stack so every field is full-width. */
.pms-form.pms-form-design-wrapper,
.pms-form.pms-form-design-wrapper .pms-form-fields-wrapper,
#pms_login.pms-form.pms-form-design-wrapper {
  display: block !important;
}

.pms-form.pms-form-design-wrapper {
  width: 100%;
  max-width: 460px !important;
  margin: 0 auto !important;
  padding: 36px 36px 32px;
  background: var(--clsv-white);
  border: 1px solid var(--clsv-line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 46px rgba(15, 23, 42, .06);
  color: var(--clsv-body);
  text-align: left;
}

/* register + checkout is a wider surface (plans, paygates, billing) */
#pms_register-form.pms-form.pms-form-design-wrapper,
#pms_new_subscription-form.pms-form.pms-form-design-wrapper,
#pms-change-subscription-form.pms-form.pms-form-design-wrapper,
#pms-renew-subscription-form.pms-form.pms-form-design-wrapper,
#pms_account-form.pms-form.pms-form-design-wrapper {
  max-width: 720px !important;
  padding: 40px;
}

/* neutralise the pre-existing Breakdance wrapper frame around the form
   so the skinned card is the only card on these auth surfaces */
.page-id-7703 .section-container > .bde-div,
.page-id-7708 .section-container > .bde-div,
.page-id-4899 .section-container > .bde-div,
.page-id-4899 .section-container > .bde-code-block,
.page-id-8272 .section-container > .bde-div {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.pms-block-container {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}
.pms-block-container .pms-form.pms-form-design-wrapper {
  margin: 0;
}

/* intro copy (password reset) */
.pms-form.pms-form-design-wrapper > p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--clsv-body);
  margin: 0 0 18px;
}

/* ============================================================
   2. HEADINGS INSIDE FORMS
   ============================================================ */
.pms-form.pms-form-design-wrapper h3,
.pms-form.pms-form-design-wrapper .pms-account-details-title,
.pms-form.pms-form-design-wrapper .pms-subscriptions-list-title {
  font-family: var(--clsv-serif) !important;
  font-size: 22px !important;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--clsv-ink);
  margin: 0 0 16px !important;
}
.pms-form.pms-form-design-wrapper .pms-account-section-wrapper + .pms-field-subscriptions .pms-subscriptions-list-title,
.pms-form.pms-form-design-wrapper .pms-field-subscriptions .pms-subscriptions-list-title {
  margin-top: 26px !important;
}

/* ============================================================
   3. FIELDS
   ============================================================ */
.pms-form.pms-form-design-wrapper .pms-field,
.pms-form.pms-form-design-wrapper p.login-username,
.pms-form.pms-form-design-wrapper p.login-password {
  margin: 0 0 16px;
}

.pms-form.pms-form-design-wrapper label {
  position: static !important;
  transform: none !important;
  display: block;
  margin: 0 0 6px !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4;
  color: var(--clsv-ink) !important;
  background: transparent !important;
  pointer-events: auto;
}
/* PMS form-designer float-label leaves top padding on the field for the
   absolutely-positioned label; reclaim it now the label flows inline */
.pms-form.pms-form-design-wrapper .pms-field,
.pms-form.pms-form-design-wrapper p.login-username,
.pms-form.pms-form-design-wrapper p.login-password {
  padding-top: 0 !important;
}

.pms-form.pms-form-design-wrapper input[type="text"],
.pms-form.pms-form-design-wrapper input[type="email"],
.pms-form.pms-form-design-wrapper input[type="password"],
.pms-form.pms-form-design-wrapper input[type="tel"],
.pms-form.pms-form-design-wrapper input[type="number"],
.pms-form.pms-form-design-wrapper input.input,
.pms-form.pms-form-design-wrapper select,
.pms-form.pms-form-design-wrapper textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--clsv-line);
  border-radius: 10px;
  background: var(--clsv-white);
  color: var(--clsv-ink);
  font-family: var(--clsv-font);
  font-size: 15px;
  line-height: 1.4;
  box-shadow: none;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
  -webkit-appearance: none;
  appearance: none;
}

.pms-form.pms-form-design-wrapper input::placeholder,
.pms-form.pms-form-design-wrapper textarea::placeholder {
  color: #94a3b8;
}

/* keep autofilled fields on the white form surface, not the browser tint */
.pms-form.pms-form-design-wrapper input:-webkit-autofill,
.pms-form.pms-form-design-wrapper input:-webkit-autofill:hover,
.pms-form.pms-form-design-wrapper input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: var(--clsv-ink) !important;
  caret-color: var(--clsv-ink);
}

.pms-form.pms-form-design-wrapper input[type="text"]:focus,
.pms-form.pms-form-design-wrapper input[type="email"]:focus,
.pms-form.pms-form-design-wrapper input[type="password"]:focus,
.pms-form.pms-form-design-wrapper input[type="tel"]:focus,
.pms-form.pms-form-design-wrapper input[type="number"]:focus,
.pms-form.pms-form-design-wrapper input.input:focus,
.pms-form.pms-form-design-wrapper select:focus,
.pms-form.pms-form-design-wrapper textarea:focus {
  border-color: var(--clsv-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

/* field description / helper text */
.pms-form.pms-form-design-wrapper p.pms-field-description {
  margin: 6px 0 0;
  padding-left: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--clsv-muted);
}

/* ============================================================
   4. BUTTONS
   ============================================================ */
.pms-form.pms-form-design-wrapper input[type="submit"],
.pms-form.pms-form-design-wrapper button[type="submit"],
.pms-form.pms-form-design-wrapper .pms-form-submit input,
.pms-form.pms-form-design-wrapper #wp-submit,
.pms-form.pms-form-design-wrapper .button.button-primary {
  display: block;
  width: 100% !important;
  min-height: 46px;
  padding: 13px 28px;
  border: 1px solid var(--clsv-blue);
  border-radius: 10px;
  background: var(--clsv-blue);
  color: #fff;
  font-family: var(--clsv-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .18);
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
  -webkit-appearance: none;
  appearance: none;
}

.pms-form.pms-form-design-wrapper input[type="submit"]:hover,
.pms-form.pms-form-design-wrapper button[type="submit"]:hover,
.pms-form.pms-form-design-wrapper .pms-form-submit input:hover,
.pms-form.pms-form-design-wrapper #wp-submit:hover,
.pms-form.pms-form-design-wrapper .button.button-primary:hover {
  background: var(--clsv-blue-hover);
  border-color: var(--clsv-blue-hover);
  transform: translateY(-1px);
}

.pms-form.pms-form-design-wrapper input[type="submit"]:focus-visible,
.pms-form.pms-form-design-wrapper button[type="submit"]:focus-visible,
.pms-form.pms-form-design-wrapper #wp-submit:focus-visible,
.pms-form.pms-form-design-wrapper .button.button-primary:focus-visible {
  outline: 2px solid var(--clsv-blue);
  outline-offset: 2px;
}

/* secondary / cancel links rendered as buttons by PMS */
.pms-form.pms-form-design-wrapper a.pms-button-secondary,
.pms-form.pms-form-design-wrapper .pms-cancel-subscription a {
  display: inline-block;
  min-height: 44px;
  padding: 12px 22px;
  border: 1px solid var(--clsv-line);
  border-radius: 10px;
  background: #fff;
  color: var(--clsv-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

/* ============================================================
   5. SIGN-IN EXTRAS  (#pms_login uses WP core login markup)
   ============================================================ */
#pms_login.pms-form.pms-form-design-wrapper p.login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--clsv-body);
}
#pms_login.pms-form.pms-form-design-wrapper p.login-remember input {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  accent-color: var(--clsv-blue);
}
#pms_login.pms-form.pms-form-design-wrapper p.login-remember label {
  margin: 0 !important;
  font-weight: 500 !important;
}
#pms_login.pms-form.pms-form-design-wrapper p.login-submit {
  margin: 0 0 16px;
}
#pms_login.pms-form.pms-form-design-wrapper p.login-extra {
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--clsv-line);
  font-size: 14px;
  line-height: 1.7;
  color: var(--clsv-muted);
  text-align: center;
}
#pms_login.pms-form.pms-form-design-wrapper p.login-extra a {
  color: var(--clsv-blue);
  font-weight: 600;
  text-decoration: none;
}
#pms_login.pms-form.pms-form-design-wrapper p.login-extra a:hover {
  text-decoration: underline;
}
#pms_login.pms-form.pms-form-design-wrapper p.login-extra .separator {
  margin: 0 8px;
  color: #cbd5e1;
}

/* ============================================================
   6. reCAPTCHA
   ============================================================ */
.pms-form.pms-form-design-wrapper .pms-recaptcha,
.pms-form.pms-form-design-wrapper [id^="pms-recaptcha"] {
  margin: 6px 0 16px;
}

/* ============================================================
   7. SUBSCRIPTION PLAN PICKER
   ============================================================ */
.pms-form.pms-form-design-wrapper .pms-field-subscriptions {
  margin: 8px 0 20px;
}
.pms-form.pms-form-design-wrapper .pms-subscription-plan {
  display: block;
  margin: 0 0 10px;
  border: 1px solid var(--clsv-line);
  border-radius: 12px;
  background: #fff;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.pms-form.pms-form-design-wrapper .pms-subscription-plan > label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 !important;
  padding: 14px 16px !important;
  cursor: pointer;
  font-weight: 500 !important;
}
.pms-form.pms-form-design-wrapper .pms-subscription-plan input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0 4px 0 0;
  accent-color: var(--clsv-blue);
}
.pms-form.pms-form-design-wrapper .pms-subscription-plan-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--clsv-ink);
}
.pms-form.pms-form-design-wrapper .pms-subscription-plan-price,
.pms-form.pms-form-design-wrapper .pms-subscription-plan-duration,
.pms-form.pms-form-design-wrapper .pms-subscription-plan-currency,
.pms-form.pms-form-design-wrapper .pms-subscription-plan-price-value {
  font-size: 14px;
  color: var(--clsv-body);
}
.pms-form.pms-form-design-wrapper .pms-subscription-plan-trial,
.pms-form.pms-form-design-wrapper .pms-subscription-plan-sign-up-fee {
  font-size: 12.5px;
  color: var(--clsv-muted);
}
.pms-form.pms-form-design-wrapper .pms-subscription-plan:has(input[type="radio"]:checked) {
  border-color: var(--clsv-blue);
  background: var(--clsv-blue-tint);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.pms-form.pms-form-design-wrapper .pms-subscription-plan:hover {
  border-color: rgba(37, 99, 235, .45);
}

/* invite / discount code */
.pms-form.pms-form-design-wrapper .pms-invite-code-field,
.pms-form.pms-form-design-wrapper .pms-discount-code-field {
  margin-top: 14px;
}
.pms-form.pms-form-design-wrapper .pms-invite-code-description {
  font-size: 12.5px;
  color: var(--clsv-muted);
}

/* ============================================================
   8. PAYGATES / BILLING / PRICE BREAKDOWN
   ============================================================ */
.pms-form.pms-form-design-wrapper #pms-paygates-wrapper,
.pms-form.pms-form-design-wrapper .pms-paygates-wrapper,
.pms-form.pms-form-design-wrapper #pms-paygates-holder,
.pms-form.pms-form-design-wrapper .pms-billing-details {
  margin: 20px 0;
}
.pms-form.pms-form-design-wrapper .pms-paygates-holder label,
.pms-form.pms-form-design-wrapper #pms-paygates-holder label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--clsv-ink);
}
.pms-form.pms-form-design-wrapper .pms-paygate-extra-fields,
.pms-form.pms-form-design-wrapper .pms-paygate-extra-fields-stripe {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--clsv-line);
  border-radius: 12px;
  background: var(--clsv-tint-bg);
}
.pms-form.pms-form-design-wrapper .pms-stripe-connect .StripeElement,
.pms-form.pms-form-design-wrapper .pms-stripe-connect input,
.pms-form.pms-form-design-wrapper .StripeElement {
  padding: 12px 14px;
  border: 1px solid var(--clsv-line);
  border-radius: 10px;
  background: #fff;
}
.pms-form.pms-form-design-wrapper .pms-price-breakdown__holder,
.pms-form.pms-form-design-wrapper .pms-price-breakdown {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid var(--clsv-line);
  border-radius: 12px;
  background: var(--clsv-tint-bg);
  font-size: 14px;
  color: var(--clsv-body);
}
.pms-form.pms-form-design-wrapper .pms-price-breakdown__holder strong,
.pms-form.pms-form-design-wrapper .pms-price-breakdown strong {
  color: var(--clsv-ink);
}

.pms-form.pms-form-design-wrapper .pms-form-submit {
  margin-top: 24px;
}

/* ============================================================
   9. MESSAGES / VALIDATION
   ============================================================ */
.pms-form.pms-form-design-wrapper .pms_field-errors-wrapper p,
.pms-form.pms-form-design-wrapper .pms-field-error,
.pms-form.pms-form-design-wrapper .pms-error {
  color: var(--clsv-danger) !important;
  font-size: 13px !important;
  line-height: 1.5;
  margin: 6px 0 0 !important;
  padding: 0 !important;
}
.pms-form.pms-form-design-wrapper .pms-form-field-error input,
.pms-form.pms-form-design-wrapper input.pms-form-field-error {
  border-color: var(--clsv-danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .13);
}

/* PMS status/notice blocks that render just outside the form */
.page-id-7703 .pms-alert,
.page-id-7708 .pms-alert,
.page-id-4899 .pms-alert,
.page-id-8272 .pms-alert,
.page-id-7703 .pms-message,
.page-id-7708 .pms-message,
.page-id-4899 .pms-message,
.page-id-8272 .pms-message {
  max-width: 460px;
  margin: 0 auto 18px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--clsv-line);
  background: var(--clsv-tint-bg);
  color: var(--clsv-body);
  font-family: var(--clsv-font);
  font-size: 14px;
  line-height: 1.55;
}
.page-id-7703 .pms-error.pms-message,
.page-id-7708 .pms-error.pms-message,
.page-id-4899 .pms-error.pms-message,
.page-id-8272 .pms-error.pms-message,
.page-id-7703 .pms-alert-error,
.page-id-7708 .pms-alert-error,
.page-id-4899 .pms-alert-error,
.page-id-8272 .pms-alert-error {
  border-color: rgba(220, 38, 38, .35);
  background: var(--clsv-danger-bg);
  color: #b91c1c;
}
.page-id-7703 .pms-success,
.page-id-7708 .pms-success,
.page-id-4899 .pms-success,
.page-id-8272 .pms-success,
.page-id-7703 .pms-alert-success,
.page-id-7708 .pms-alert-success,
.page-id-4899 .pms-alert-success,
.page-id-8272 .pms-alert-success {
  border-color: rgba(4, 120, 87, .3);
  background: var(--clsv-ok-bg);
  color: var(--clsv-ok);
}

/* ============================================================
   10. LOGGED-IN ACCOUNT / SUBSCRIPTION TABLE  ([pms-account])
   ============================================================ */
.pms-form.pms-form-design-wrapper table,
.page-id-8272 table.pms-subscriptions-table,
.page-id-8272 .pms-subscription-details table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--clsv-body);
}
.pms-form.pms-form-design-wrapper th,
.page-id-8272 .pms-subscriptions-table th {
  padding: 10px 12px;
  border-bottom: 2px solid var(--clsv-line);
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--clsv-ink);
}
.pms-form.pms-form-design-wrapper td,
.page-id-8272 .pms-subscriptions-table td {
  padding: 12px;
  border-bottom: 1px solid var(--clsv-line);
}
.pms-subscription-status,
.page-id-8272 .pms-subscription-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
}
.pms-subscription-status.active,
.pms-subscription-status-active {
  background: var(--clsv-ok-bg);
  color: var(--clsv-ok);
}
.pms-subscription-status.expired,
.pms-subscription-status.canceled,
.pms-subscription-status-expired,
.pms-subscription-status-canceled {
  background: var(--clsv-danger-bg);
  color: #b91c1c;
}
.pms-subscription-status.pending,
.pms-subscription-status-pending {
  background: var(--clsv-warn-bg);
  color: var(--clsv-warn);
}

/* [pms-account] subscription details table (logged-in /subscriptions/) */
.page-id-8272 .pms-account-subscription-details-table {
  width: 100% !important;
  max-width: 460px !important;
  margin: 26px auto 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--clsv-line) !important;
  border-radius: 14px !important;
  overflow: hidden;
  font-family: var(--clsv-font);
  font-size: 14px;
  color: var(--clsv-body);
}
.page-id-8272 .pms-account-subscription-details-table td {
  padding: 12px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--clsv-line) !important;
  vertical-align: middle;
  text-align: left !important;
}
.page-id-8272 .pms-account-subscription-details-table tr:last-child td {
  border-bottom: 0 !important;
}
.page-id-8272 .pms-account-subscription-details-table tr > td:first-child {
  width: 42%;
  font-weight: 600 !important;
  color: var(--clsv-ink) !important;
}
.page-id-8272 .pms-account-subscription-details-table td.status-active {
  color: var(--clsv-ok) !important;
  font-weight: 600 !important;
}
.page-id-8272 .pms-account-subscription-details-table td.status-expired,
.page-id-8272 .pms-account-subscription-details-table td.status-canceled {
  color: #b91c1c !important;
  font-weight: 600 !important;
}
/* PMS renders the status word as an inline pill — bring it onto system colours */
.page-id-8272 .pms-account-subscription-details-table td[class*="status-"] span {
  border-radius: 999px !important;
  padding: 2px 12px !important;
  font-weight: 600 !important;
}
.page-id-8272 .pms-account-subscription-details-table td.status-active span {
  background: var(--clsv-ok-bg) !important;
  border-color: rgba(4, 120, 87, .28) !important;
  color: var(--clsv-ok) !important;
}
.page-id-8272 .pms-account-subscription-action-link {
  display: inline-block;
  margin-right: 12px;
  color: var(--clsv-blue);
  font-weight: 600;
  text-decoration: none;
}
.page-id-8272 .pms-account-subscription-action-link:hover {
  text-decoration: underline;
}

/* ============================================================
   11. CLASVA BILLING SUMMARY CARD  (.clasva-bs — subscriptions page)
   ============================================================ */
.page-id-8272 .clasva-bs.clasva-bs--card {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 32px;
  border: 1px solid var(--clsv-line);
  border-radius: 16px;
  background: var(--clsv-white);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 46px rgba(15, 23, 42, .06);
  font-family: var(--clsv-font);
}
.page-id-8272 .clasva-bs__eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clsv-blue-hover);
}
.page-id-8272 .clasva-bs__plan {
  margin: 0 0 10px;
  font-family: var(--clsv-serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--clsv-ink);
}
.page-id-8272 .clasva-bs__price {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--clsv-ink);
}
.page-id-8272 .clasva-bs__allowance {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--clsv-body);
}
.page-id-8272 .clasva-bs__allowance span[aria-hidden] {
  color: var(--clsv-blue);
  font-weight: 700;
}
.page-id-8272 .clasva-bs__rule {
  margin: 18px 0;
  border: 0;
  border-top: 1px solid var(--clsv-line);
}
.page-id-8272 .clasva-bs__terms {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--clsv-muted);
}
.page-id-8272 .clasva-bs__status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--clsv-body);
}
.page-id-8272 .clasva-bs__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--clsv-blue);
}
/* dot + glyph are redundant status marks — keep the dot, drop the glyph */
.page-id-8272 .clasva-bs__status .clasva-bs__glyph {
  display: none;
}
.page-id-8272 .clasva-bs__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.page-id-8272 .clasva-bs__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 13px 24px;
  border-radius: 10px;
  font-family: var(--clsv-font);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.page-id-8272 .clasva-bs__cta--primary {
  background: var(--clsv-blue);
  border: 1px solid var(--clsv-blue);
  color: #fff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .18);
}
.page-id-8272 .clasva-bs__cta--primary:hover {
  background: var(--clsv-blue-hover);
  border-color: var(--clsv-blue-hover);
  transform: translateY(-1px);
}
.page-id-8272 .clasva-bs__cta--secondary {
  background: #fff;
  border: 1px solid var(--clsv-line);
  color: var(--clsv-ink);
}

/* tighten the oversized empty band above the card on /subscriptions/
   (the section/column stretches far taller than the billing card) */
.page-id-8272 section.bde-section-8272-100,
.page-id-8272 section.bde-section-8272-103 {
  min-height: 0 !important;
}
.page-id-8272 .bde-section-8272-100 > .section-container {
  min-height: 0 !important;
  align-items: center !important;
  padding-top: 56px !important;
  padding-bottom: 72px !important;
}
.page-id-8272 .bde-section-8272-100 .bde-div,
.page-id-8272 .bde-section-8272-103 .bde-div {
  min-height: 0 !important;
  height: auto !important;
  flex: 0 0 auto !important;
}
.page-id-8272 .bde-section-8272-103 > .section-container {
  padding-bottom: 32px !important;
}

/* ============================================================
   12. RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .pms-form.pms-form-design-wrapper {
    padding: 26px 20px 24px;
    border-radius: 14px;
  }
  #pms_register-form.pms-form.pms-form-design-wrapper,
  #pms_new_subscription-form.pms-form.pms-form-design-wrapper,
  #pms-change-subscription-form.pms-form.pms-form-design-wrapper,
  #pms-renew-subscription-form.pms-form.pms-form-design-wrapper,
  #pms_account-form.pms-form.pms-form-design-wrapper {
    padding: 26px 20px;
  }
  .pms-form.pms-form-design-wrapper h3,
  .pms-form.pms-form-design-wrapper .pms-account-details-title,
  .pms-form.pms-form-design-wrapper .pms-subscriptions-list-title {
    font-size: 20px !important;
  }
  .page-id-8272 .clasva-bs.clasva-bs--card {
    padding: 24px;
  }
  .page-id-8272 .clasva-bs__plan {
    font-size: 30px;
  }
  .pms-form.pms-form-design-wrapper .pms-subscription-plan > label {
    padding: 13px 14px;
  }
}

/* ============================================================
   12b. MOBILE CONTAINER FLUIDITY
   The Breakdance elements wrapping the PMS form on 7703 / 7708 /
   4899 / 8272 carry fixed pixel widths (~600px) with no small-
   screen breakpoint, so at <420px the whole auth card renders
   wider than the viewport and is clipped on the left. Force the
   wrapping chain fluid; the form itself already has its own
   max-width cap above.
   ============================================================ */
@media (max-width: 782px) {
  .page-id-7703 .section-container,
  .page-id-7708 .section-container,
  .page-id-4899 .section-container,
  .page-id-8272 .section-container {
    max-width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .page-id-7703 .section-container [class*="bde-div-"],
  .page-id-7708 .section-container [class*="bde-div-"],
  .page-id-4899 .section-container [class*="bde-div-"],
  .page-id-8272 .section-container [class*="bde-div-"],
  .page-id-7703 .section-container [class*="bde-shortcode-"],
  .page-id-7708 .section-container [class*="bde-shortcode-"],
  .page-id-4899 .section-container [class*="bde-shortcode-"],
  .page-id-8272 .section-container [class*="bde-shortcode-"],
  .page-id-4899 .section-container [class*="bde-code-block-"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .pms-form.pms-form-design-wrapper {
    max-width: 100% !important;
  }
  .pms-form .input,
  .pms-form input[type="text"],
  .pms-form input[type="email"],
  .pms-form input[type="password"] {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* reCAPTCHA narrow-screen fit (integrity pass 2026-09-03): the Google widget
   is a fixed 302px iframe with no small-screen fallback; at <=400px (e.g. 375)
   it pushes the auth card past the viewport edge. Scale from the top-left so it
   fits without clipping the checkbox. */
@media (max-width: 400px) {
  .pms-form.pms-form-design-wrapper .pms-recaptcha,
  .pms-form.pms-form-design-wrapper [id^="pms-recaptcha"] {
    transform: scale(0.9);
    transform-origin: left top;
  }
}