/* ============================================================================
   Vysora — branded account area
   Restyles Paid Memberships Pro member pages into a dark dashboard that matches
   vysora.eu. Loaded only on the PMPro member pages, only when the account area
   is enabled under Settings → Vysora Sync.

   Selectors cover both PMPro 3.x markup (.pmpro_card, .pmpro_section) and the
   older .pmpro_box / #pmpro_account-* ids, so it survives either.
   ============================================================================ */

/* ---------------------------------------------------------------- page background
   The member pages set their own background here rather than relying on Elementor
   page settings or the theme default — otherwise the colour changes depending on
   which editor built the page. Change --vys-page to restyle all member pages.  */
body.vysora-account-page{
  --vys-page:#141a23;
  background-color:var(--vys-page)!important;
}
/* The theme AND Elementor both paint on top of body. Elementor keeps its colour on
   the section/container/widget elements (not on ".elementor"), which is why the
   Profile and Cancel pages still showed a white/cream slab. */
body.vysora-account-page .site,
body.vysora-account-page .site-content,
body.vysora-account-page .content-area,
body.vysora-account-page .site-main,
body.vysora-account-page article,
body.vysora-account-page .inside-article,
body.vysora-account-page .entry-content,
body.vysora-account-page .page-header,
body.vysora-account-page .elementor,
body.vysora-account-page .elementor-section,
body.vysora-account-page .elementor-section-wrap,
body.vysora-account-page .elementor-container,
body.vysora-account-page .elementor-column,
body.vysora-account-page .elementor-column-wrap,
body.vysora-account-page .elementor-widget-wrap,
body.vysora-account-page .elementor-element,
body.vysora-account-page .elementor-widget,
body.vysora-account-page .elementor-widget-container,
body.vysora-account-page .e-con,
body.vysora-account-page .e-con-inner,
body.vysora-account-page .e-child,
body.vysora-account-page .elementor-shortcode{
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  border:0!important;
}
/* Elementor also injects ::before/::after overlays carrying the colour */
body.vysora-account-page .elementor-section::before,
body.vysora-account-page .elementor-section::after,
body.vysora-account-page .e-con::before,
body.vysora-account-page .e-con::after{background:none!important;opacity:0!important}

/* Those same Elementor wrappers still RESERVE height (section padding, min-height,
   spacer widgets) — which left a gap above the card once the colour was gone.
   Collapse the vertical space so the content lines up with the sidebar.
   Left/right padding is left alone so nothing goes edge-to-edge. */
body.vysora-account-page .vys-pmpro .elementor,
body.vysora-account-page .vys-pmpro .elementor-section,
body.vysora-account-page .vys-pmpro .elementor-section-wrap,
body.vysora-account-page .vys-pmpro .elementor-container,
body.vysora-account-page .vys-pmpro .elementor-column,
body.vysora-account-page .vys-pmpro .elementor-column-wrap,
body.vysora-account-page .vys-pmpro .elementor-widget-wrap,
body.vysora-account-page .vys-pmpro .elementor-widget,
body.vysora-account-page .vys-pmpro .elementor-widget-container,
body.vysora-account-page .vys-pmpro .e-con,
body.vysora-account-page .vys-pmpro .e-con-inner,
body.vysora-account-page .vys-pmpro .e-child{
  padding-top:0!important;
  padding-bottom:0!important;
  margin-top:0!important;
  margin-bottom:0!important;
  min-height:0!important;
}

/* spacers and genuinely empty wrappers contribute nothing but height */
body.vysora-account-page .vys-pmpro .elementor-widget-spacer,
body.vysora-account-page .vys-pmpro .elementor-spacer,
body.vysora-account-page .vys-pmpro .elementor-element:empty,
body.vysora-account-page .vys-pmpro .e-con:empty{display:none!important}

/* and the first thing in the column starts flush with the sidebar */
body.vysora-account-page .vys-main{padding-top:0!important;margin-top:0!important}
body.vysora-account-page .vys-pmpro > *:first-child,
body.vysora-account-page .vys-main > *:first-child{margin-top:0!important}

.vys-acct{
  --vys-bg:#141a23; --vys-bg-2:#1b2330; --vys-bg-3:#212b3a; --vys-bg-4:#283547;
  --vys-line:rgba(255,255,255,.09); --vys-line-2:rgba(255,255,255,.16);
  --vys-ink:#E9EDF2; --vys-ink-soft:#9AA6B4; --vys-ink-faint:#6C7889;
  --vys-accent:#79A1A1; --vys-accent-hi:#9FD3D0; --vys-ok:#5FA88C; --vys-error:#E07B7B;
  --vys-r-sm:8px; --vys-r-md:14px; --vys-r-full:999px;

  /* The theme's .entry-content is already full width, so no breakout hack is
     needed — just centre and leave room for the transparent/absolute header. */
  width:100%; max-width:1180px; margin:0 auto;
  padding:118px 24px 72px;
  color:var(--vys-ink); font-size:15px; line-height:1.55;
}
.vys-acct--narrow{max-width:560px}

/* Typography: match the rest of vysora.eu. Form controls and buttons default to
   the OS font unless told otherwise, which is what made the account pages look
   like a different site. Everything here inherits the theme's font. */
.vys-acct,
.vys-acct h1,.vys-acct h2,.vys-acct h3,.vys-acct h4,
.vys-acct p,.vys-acct span,.vys-acct a,.vys-acct li,.vys-acct td,.vys-acct th,
.vys-acct label,.vys-acct legend,
.vys-acct input,.vys-acct select,.vys-acct textarea,.vys-acct button{
  font-family:inherit!important;
}

/* page heading — !important because the theme colours h1 dark-on-dark */
.vys-hd{margin:0 0 28px}
.vys-hd h1{font-size:34px!important;font-weight:800;margin:0 0 6px;
  letter-spacing:-.01em;color:var(--vys-ink)!important}
.vys-hd p{color:var(--vys-ink-soft)!important;margin:0;font-size:15px}
.vys-acct *,.vys-acct *::before,.vys-acct *::after{box-sizing:border-box}
.vys-acct a{color:var(--vys-accent-hi);text-decoration:none}
.vys-acct a:hover{text-decoration:underline}

/* ---------------------------------------------------------------- layout */
.vys-acct-grid{display:grid;grid-template-columns:252px 1fr;gap:28px;align-items:start}
.vys-side{position:sticky;top:112px;display:flex;flex-direction:column;gap:14px}
.vys-main{min-width:0}

/* ---------------------------------------------------------------- sidebar */
.vys-who{background:var(--vys-bg-2);border:1px solid var(--vys-line);border-radius:var(--vys-r-md);padding:20px}
.vys-av{width:46px;height:46px;border-radius:var(--vys-r-full);
  background:linear-gradient(140deg,var(--vys-accent),#4d6f75);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#0e1319;font-size:16px}
.vys-nm{font-weight:800;margin:12px 0 2px;font-size:15.5px;color:var(--vys-ink)}
.vys-em{color:var(--vys-ink-faint);font-size:12.5px;margin:0;word-break:break-all}
.vys-pill{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;border-radius:var(--vys-r-full);
  padding:4px 11px;margin-top:12px}
.vys-pill--free{background:rgba(154,166,180,.16);color:var(--vys-ink-soft);border:1px solid var(--vys-line-2)}
.vys-pill--paid{background:rgba(121,161,161,.2);color:var(--vys-accent-hi);border:1px solid rgba(121,161,161,.45)}

.vys-snav{background:var(--vys-bg-2);border:1px solid var(--vys-line);border-radius:var(--vys-r-md);padding:8px;
  display:flex;flex-direction:column}
.vys-snav a{display:block;color:var(--vys-ink-soft);font-size:14.5px;padding:11px 14px;
  border-radius:var(--vys-r-sm);text-decoration:none;min-height:44px;line-height:22px}
.vys-snav a:hover{background:var(--vys-bg-3);color:var(--vys-ink);text-decoration:none}
.vys-snav a.vys-on{background:var(--vys-bg-4);color:var(--vys-ink);font-weight:700;box-shadow:inset 3px 0 0 var(--vys-accent)}
.vys-snav .vys-sep{height:1px;background:var(--vys-line);margin:8px 12px}
.vys-snav a.vys-out{color:var(--vys-ink-faint)}
.vys-snav a.vys-out:hover{color:var(--vys-error)}

/* ---------------------------------------------------------------- buttons */
.vys-acct .vys-btn,
.vys-acct .pmpro_btn,
.vys-acct input[type=submit],
.vys-acct button[type=submit]{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--vys-r-sm);font-weight:700;font-size:14.5px;padding:12px 24px;
  border:1px solid transparent;cursor:pointer;min-height:44px;text-decoration:none;
  font-family:inherit;line-height:1.2}
.vys-acct .vys-btn-p,
.vys-acct .pmpro_btn-submit,
.vys-acct input[type=submit],
.vys-acct button[type=submit]{background:var(--vys-accent);color:#0e1319}
.vys-acct .vys-btn-p:hover,
.vys-acct input[type=submit]:hover,
.vys-acct button[type=submit]:hover{background:var(--vys-accent-hi);color:#0e1319;text-decoration:none}
.vys-acct .vys-btn-s,
.vys-acct .pmpro_btn-cancel{background:transparent;color:var(--vys-ink);border-color:var(--vys-line-2)}
.vys-acct .vys-btn-s:hover{border-color:var(--vys-accent);color:var(--vys-accent-hi);text-decoration:none}
.vys-acct .vys-btn-sm{padding:9px 16px;font-size:13.5px;min-height:38px}

/* ---------------------------------------------------------------- cards */
.vys-acct .vys-card{background:var(--vys-bg-2);border:1px solid var(--vys-line);
  border-radius:var(--vys-r-md);padding:24px 26px;margin:0 0 20px}
.vys-acct .vys-card > h2{font-size:17px;font-weight:800;margin:0 0 4px;color:var(--vys-ink)}
.vys-acct .vys-sub{color:var(--vys-ink-soft);font-size:13.5px;margin:0 0 18px}

.vys-handoff{background:linear-gradient(120deg,#1d2b31,#1b2330 62%);
  border:1px solid rgba(121,161,161,.32);border-left:3px solid var(--vys-accent);
  display:flex;gap:26px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.vys-handoff h2{font-size:19px;margin:0 0 6px}
.vys-handoff p{color:var(--vys-ink-soft);font-size:14px;margin:0;max-width:56ch}
.vys-handoff .vys-note{display:block;margin-top:10px;color:var(--vys-ink-faint);font-size:12.5px}

.vys-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 20px}
.vys-tile{background:var(--vys-bg-2);border:1px solid var(--vys-line);border-radius:var(--vys-r-md);padding:20px 22px}
.vys-tile .vys-k{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--vys-ink-faint);font-weight:700;margin:0 0 8px}
.vys-tile .vys-v{font-size:21px;font-weight:800;margin:0;color:var(--vys-ink);letter-spacing:-.01em}
.vys-tile .vys-m{font-size:12.5px;color:var(--vys-ink-soft);margin:5px 0 0}

.vys-mrow{display:flex;align-items:center;gap:18px;padding:16px 0;
  border-top:1px solid var(--vys-line);flex-wrap:wrap}
.vys-mrow .vys-body{flex:1 1 240px;min-width:0}
.vys-mrow .vys-ttl{font-weight:800;font-size:15px;margin:0 0 3px;color:var(--vys-ink)}
.vys-mrow .vys-meta{color:var(--vys-ink-soft);font-size:13px;margin:0}

/* ============================================================================
   Sign-in page
   ========================================================================= */
.vys-login{max-width:440px;margin:0 auto}
.vys-login-hd{text-align:center;margin:0 0 26px}
.vys-login-hd h1{font-size:30px!important;font-weight:800;margin:0 0 8px;
  letter-spacing:-.01em;color:var(--vys-ink)!important;line-height:1.2}
.vys-login-hd p{color:var(--vys-ink-soft)!important;margin:0;font-size:14.5px}

.vys-login-card{
  background:var(--vys-bg-2);border:1px solid var(--vys-line);
  border-radius:var(--vys-r-md);padding:32px 32px 28px;
  box-shadow:0 18px 48px rgba(0,0,0,.28);
}
/* PMPro nests wrapper inside wrapper inside form — flatten EVERY container in
   here, or you get boxes drawn inside boxes. Only the outer card has a surface. */
.vys-login-card div,
.vys-login-card form,
.vys-login-card fieldset,
.vys-login-card ul,
.vys-login-card li,
.vys-login-card .pmpro_login_wrap,
.vys-login-card #pmpro_login_wrapper,
.vys-login-card .pmpro_card,
.vys-login-card .pmpro_card_content,
.vys-login-card .pmpro_section,
.vys-login-card .pmpro_section_content,
.vys-login-card #loginform{
  background:transparent!important;background-image:none!important;
  border:0!important;border-radius:0!important;
  padding:0!important;margin:0!important;
  box-shadow:none!important;max-width:none!important;width:auto!important}
.vys-login-card h2,.vys-login-card h3,
.vys-login-card .pmpro_section_title{display:none!important} /* our own heading above */

.vys-login-card p{margin:0 0 16px!important}
.vys-login-card label{display:block;font-size:12.5px!important;font-weight:700!important;
  color:var(--vys-ink-soft)!important;margin:0 0 7px!important;letter-spacing:.02em}
.vys-login-card input[type=text],
.vys-login-card input[type=email],
.vys-login-card input[type=password]{
  width:100%!important;background:var(--vys-bg)!important;
  border:1px solid var(--vys-line-2)!important;color:var(--vys-ink)!important;
  border-radius:var(--vys-r-sm)!important;padding:13px 15px!important;
  font-size:15px!important;min-height:48px}
.vys-login-card input:focus{outline:2px solid var(--vys-accent);outline-offset:1px;
  border-color:transparent!important}

/* "Remember me" row */
.vys-login-card .login-remember,
.vys-login-card .pmpro_login_wrap .login-remember{margin:0 0 20px!important}
.vys-login-card .login-remember label{display:flex!important;align-items:center;gap:9px;
  font-weight:500!important;color:var(--vys-ink-soft)!important;font-size:13.5px!important;
  margin:0!important;cursor:pointer}
.vys-login-card input[type=checkbox]{width:17px;height:17px;min-height:0;accent-color:var(--vys-accent)}

/* primary button, full width */
.vys-login-card .login-submit{margin:0!important}
.vys-login-card input[type=submit],
.vys-login-card #wp-submit,
.vys-login-card button[type=submit]{
  width:100%!important;background:var(--vys-accent)!important;color:#0e1319!important;
  border:0!important;border-radius:var(--vys-r-sm)!important;
  padding:14px 24px!important;font-size:15px!important;font-weight:800!important;
  min-height:50px;cursor:pointer;letter-spacing:.01em}
.vys-login-card input[type=submit]:hover,
.vys-login-card #wp-submit:hover{background:var(--vys-accent-hi)!important}

/* Chrome's autofill repaints the field pale blue with dark text — this is what
   made the inputs look white on a dark card. The inset shadow trick is the only
   way to override it. */
.vys-login-card input:-webkit-autofill,
.vys-login-card input:-webkit-autofill:hover,
.vys-login-card input:-webkit-autofill:focus,
.vys-pmpro input:-webkit-autofill,
.vys-pmpro input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--vys-bg) inset!important;
  box-shadow:0 0 0 1000px var(--vys-bg) inset!important;
  -webkit-text-fill-color:var(--vys-ink)!important;
  caret-color:var(--vys-ink)!important;
  transition:background-color 5000s ease-in-out 0s;
}

/* "Show password" toggle — it was rendering as a white pill on top of the label.
   Park it on its own right-aligned row above the field. */
.vys-login-card .pmpro_password_toggle,
.vys-login-card .pmpro_show_password,
.vys-login-card button.wp-hide-pw,
.vys-login-card .wp-pwd button{
  position:static!important;float:right;
  background:none!important;background-color:transparent!important;
  border:0!important;box-shadow:none!important;
  color:var(--vys-ink-faint)!important;
  font-size:12.5px!important;line-height:1.2!important;
  padding:0!important;margin:0 0 6px!important;
  width:auto!important;min-height:0!important;height:auto!important;
  font-weight:600!important;white-space:nowrap;cursor:pointer}
.vys-login-card .pmpro_password_toggle:hover,
.vys-login-card button.wp-hide-pw:hover{color:var(--vys-accent-hi)!important}
.vys-login-card .wp-pwd{position:relative}
.vys-login-card .dashicons,
.vys-login-card .wp-hide-pw .dashicons{font-size:15px;width:15px;height:15px;vertical-align:-2px}
.vys-login-card .pmpro_actions_nav,
.vys-login-card .pmpro_login_wrap .pmpro_actions_nav{
  background:transparent!important;border:0!important;border-top:1px solid var(--vys-line)!important;
  margin:22px 0 0!important;padding:18px 0 0!important;text-align:center!important;display:block!important}
.vys-login-card .pmpro_actions_nav a{color:var(--vys-ink-soft)!important;font-size:13.5px!important;font-weight:600}
.vys-login-card .pmpro_actions_nav a:hover{color:var(--vys-accent-hi)!important}

/* error / message banners */
.vys-login-card .pmpro_message,
.vys-login-card #login_error,
.vys-login-card .login .message{border-radius:var(--vys-r-sm)!important;
  padding:13px 16px!important;font-size:13.5px!important;margin:0 0 18px!important}

/* footer notes under the card */
.vys-login-foot{margin:22px auto 0;text-align:center;max-width:420px}
.vys-login-note{background:rgba(121,161,161,.09);border:1px solid rgba(121,161,161,.26);
  border-radius:var(--vys-r-sm);padding:14px 18px;color:var(--vys-ink-soft);
  font-size:13.5px;line-height:1.6;margin:0 0 14px}
.vys-login-note strong{color:var(--vys-ink)}
.vys-login-alt{color:var(--vys-ink-faint);font-size:13.5px;margin:0}

/* ============================================================================
   PMPro's own output
   ========================================================================= */
.vys-pmpro{color:var(--vys-ink)}

/* the near-invisible dark-on-dark section headings */
/* PMPro nests its headings differently depending on the markup version, so size
   every heading level inside the account area rather than one wrapper variant.
   Without !important the theme's h2 (~40px) wins and the sections shout. */
.vys-pmpro h1,.vys-pmpro h2,.vys-pmpro h3,.vys-pmpro h4,
.vys-pmpro .pmpro_section_title h1,
.vys-pmpro .pmpro_section_title h2,
.vys-pmpro .pmpro_section_title h3,
.vys-pmpro legend{
  color:var(--vys-ink)!important;
  font-weight:800!important;
  line-height:1.3!important;
  letter-spacing:0!important;
  margin:0 0 4px!important;
}
.vys-pmpro h1,.vys-pmpro h2,
.vys-pmpro .pmpro_section_title h1,
.vys-pmpro .pmpro_section_title h2{font-size:19px!important}
.vys-pmpro h3,.vys-pmpro h4,
.vys-pmpro .pmpro_section_title h3,
.vys-pmpro legend{font-size:16px!important}
.vys-pmpro .pmpro_section_title{padding:20px 26px 0!important;margin:0!important}
.vys-pmpro .pmpro_section_description,
.vys-pmpro .pmpro_lite{color:var(--vys-ink-soft)!important}

/* section + card surfaces: dark, not white */
.vys-pmpro .pmpro_section,
.vys-pmpro .pmpro_card,
.vys-pmpro .pmpro_box,
.vys-pmpro .pmpro_member_profile,
.vys-pmpro div[id^="pmpro_account-"]{
  background:var(--vys-bg-2)!important;
  border:1px solid var(--vys-line)!important;
  border-radius:var(--vys-r-md)!important;
  box-shadow:none!important;
  color:var(--vys-ink)!important;
  margin:0 0 20px!important;
  overflow:hidden;
}
.vys-pmpro .pmpro_card_content,
.vys-pmpro .pmpro_section_content{padding:22px 26px!important;background:transparent!important}
.vys-pmpro .pmpro_card_actions,
.vys-pmpro .pmpro_section_actions,
.vys-pmpro .pmpro_actions_nav{
  background:rgba(255,255,255,.03)!important;
  border-top:1px solid var(--vys-line)!important;
  padding:14px 26px!important;
  display:flex;gap:18px;flex-wrap:wrap;align-items:center;
}
.vys-pmpro .pmpro_card_actions a,
.vys-pmpro .pmpro_actions_nav a{color:var(--vys-accent-hi);font-size:14px;font-weight:600}
.vys-pmpro .pmpro_card_title h2,
.vys-pmpro .pmpro_card_title h3{padding:20px 26px 0;margin:0}

/* text, labels, links — size clamped too, or Elementor's typography renders
   body copy like "You have the following active memberships." at heading size */
.vys-pmpro p,.vys-pmpro li,.vys-pmpro dd,.vys-pmpro span{color:var(--vys-ink-soft)}
.vys-pmpro p,.vys-pmpro li,.vys-pmpro dd,.vys-pmpro td,.vys-pmpro th{
  font-size:14.5px!important;line-height:1.6!important}

/* destructive / secondary buttons must not look identical to the primary one */
body.vysora-account-page .vys-pmpro .pmpro_btn-cancel,
body.vysora-account-page .vys-pmpro a.pmpro_btn-cancel,

body.vysora-account-page .vys-pmpro input[value="Cancel"],
body.vysora-account-page .vys-pmpro button.pmpro_btn-cancel{
  background:transparent!important;
  color:var(--vys-ink-soft)!important;
  border:1px solid var(--vys-line-2)!important;
}
body.vysora-account-page .vys-pmpro .pmpro_btn-cancel:hover,
body.vysora-account-page .vys-pmpro input[value="Cancel"]:hover{
  border-color:var(--vys-error)!important;color:var(--vys-error)!important;
}
.vys-pmpro strong,.vys-pmpro b,.vys-pmpro dt,.vys-pmpro label{color:var(--vys-ink)}
.vys-pmpro hr{border-color:var(--vys-line)}

/* tables (order history / invoices) */
.vys-pmpro table,
.vys-pmpro .pmpro_table{width:100%;border-collapse:collapse;font-size:14px;background:transparent!important}
.vys-pmpro .pmpro_table thead th,
.vys-pmpro table thead th{
  text-align:left;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--vys-ink-faint)!important;font-weight:700;padding:14px 26px;
  border-bottom:1px solid var(--vys-line)!important;background:rgba(255,255,255,.015)!important}
/* PMPro marks the first cell of each row as <th scope="row"> — themes often give
   that a light background, which is what produced the white "date" column. */
.vys-pmpro .pmpro_table tbody td,
.vys-pmpro .pmpro_table tbody th,
.vys-pmpro table tbody td,
.vys-pmpro table tbody th{
  padding:16px 26px;border-bottom:1px solid var(--vys-line)!important;
  color:var(--vys-ink-soft)!important;background:transparent!important;
  text-align:left;font-weight:400}
.vys-pmpro .pmpro_table tbody th{color:var(--vys-ink)!important;font-weight:700}
.vys-pmpro .pmpro_table tbody tr:last-child td{border-bottom:0!important}
.vys-pmpro .pmpro_table tbody tr:nth-child(even) td{background:rgba(255,255,255,.012)!important}

/* The theme highlights rows and card bodies with a WHITE hover, leaving light text
   on white. Body-class prefix is there to out-specify the theme rule. */
body.vysora-account-page .vys-pmpro tbody tr:hover,
body.vysora-account-page .vys-pmpro tbody tr:hover td,
body.vysora-account-page .vys-pmpro tbody tr:hover th,
body.vysora-account-page .vys-pmpro .pmpro_table tbody tr:hover,
body.vysora-account-page .vys-pmpro .pmpro_table tbody tr:hover td,
body.vysora-account-page .vys-pmpro .pmpro_table tbody tr:hover th{
  background-color:rgba(159,211,208,.07)!important;
  background-image:none!important;
  color:var(--vys-ink)!important;
}
body.vysora-account-page .vys-pmpro tbody tr:hover a{color:var(--vys-accent-hi)!important}
body.vysora-account-page .vys-pmpro tbody tr{transition:background-color .12s ease}

/* Card bodies keep their own surface on hover instead of flashing white.
   Outer surfaces re-assert their colour; inner content stays see-through. */
body.vysora-account-page .vys-pmpro .pmpro_card:hover,
body.vysora-account-page .vys-pmpro .pmpro_section:hover,
body.vysora-account-page .vys-pmpro .pmpro_box:hover,
body.vysora-account-page .vys-pmpro .pmpro_member_profile:hover,
body.vysora-account-page .vys-pmpro div[id^="pmpro_account-"]:hover{
  background-color:var(--vys-bg-2)!important;
  background-image:none!important;
}
body.vysora-account-page .vys-pmpro .pmpro_card_content:hover,
body.vysora-account-page .vys-pmpro .pmpro_section_content:hover,
body.vysora-account-page .vys-pmpro .pmpro_card_title:hover,
body.vysora-account-page .vys-pmpro .pmpro_section_title:hover,
body.vysora-account-page .vys-pmpro li:hover,
body.vysora-account-page .vys-pmpro p:hover,
body.vysora-account-page .vys-pmpro form:hover,
body.vysora-account-page .vys-pmpro fieldset:hover{
  background-color:transparent!important;
  background-image:none!important;
  color:inherit!important;
}
/* the action bars keep their subtle tint on hover */
body.vysora-account-page .vys-pmpro .pmpro_card_actions:hover,
body.vysora-account-page .vys-pmpro .pmpro_section_actions:hover,
body.vysora-account-page .vys-pmpro .pmpro_actions_nav:hover{
  background-color:rgba(255,255,255,.03)!important;
}

/* status chips PMPro renders in order history */
.vys-pmpro .pmpro_tag,
.vys-pmpro .pmpro_table .pmpro_status,
.vys-pmpro span.pmpro_tag-success{
  display:inline-block;font-size:11.5px;font-weight:700;padding:4px 11px;
  border-radius:var(--vys-r-full);background:rgba(95,168,140,.16)!important;
  color:var(--vys-ok)!important;border:1px solid rgba(95,168,140,.3)}

/* forms (profile edit, billing, password) */
.vys-pmpro input[type=text],
.vys-pmpro input[type=email],
.vys-pmpro input[type=password],
.vys-pmpro input[type=tel],
.vys-pmpro input[type=number],
.vys-pmpro select,
.vys-pmpro textarea{
  background:var(--vys-bg)!important;border:1px solid var(--vys-line-2)!important;
  color:var(--vys-ink)!important;border-radius:var(--vys-r-sm)!important;
  padding:12px 14px!important;font-size:14.5px;min-height:44px;width:100%;max-width:100%;
  font-family:inherit;box-shadow:none!important}
.vys-pmpro input:focus,.vys-pmpro select:focus,.vys-pmpro textarea:focus{
  outline:2px solid var(--vys-accent);outline-offset:1px;border-color:transparent!important}
.vys-pmpro input::placeholder,.vys-pmpro textarea::placeholder{color:var(--vys-ink-faint)}
.vys-pmpro .pmpro_form_field,
.vys-pmpro .pmpro_field{margin:0 0 16px}
.vys-pmpro .pmpro_form_label,
.vys-pmpro label{display:block;font-size:12.5px;font-weight:700;
  color:var(--vys-ink-soft)!important;margin:0 0 7px;letter-spacing:.02em}
.vys-pmpro .pmpro_form_hint,
.vys-pmpro .lite,
.vys-pmpro small{color:var(--vys-ink-faint)!important;font-size:12px}
.vys-pmpro .pmpro_form_fields{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.vys-pmpro .pmpro_form_field-textarea,
.vys-pmpro .pmpro_form_field-full{grid-column:1/-1}
.vys-pmpro .pmpro_form_submit,
.vys-pmpro .pmpro_submit{grid-column:1/-1;margin-top:6px;padding-top:18px;
  border-top:1px solid var(--vys-line);display:flex;gap:12px;flex-wrap:wrap}

/* messages */
.vys-pmpro .pmpro_message{border-radius:var(--vys-r-sm)!important;padding:14px 18px!important;
  border-width:1px!important;font-size:14px}
.vys-pmpro .pmpro_success{background:rgba(95,168,140,.1)!important;border-color:rgba(95,168,140,.35)!important;color:var(--vys-ok)!important}
.vys-pmpro .pmpro_error{background:rgba(224,123,123,.1)!important;border-color:rgba(224,123,123,.35)!important;color:var(--vys-error)!important}

/* destructive links sit apart */
.vys-pmpro a[href*="cancel"]{color:var(--vys-ink-faint)}
.vys-pmpro a[href*="cancel"]:hover{color:var(--vys-error)}

/* ---------------------------------------------------------------- responsive */
@media(max-width:940px){
  .vys-acct-grid{grid-template-columns:1fr}
  .vys-side{position:static}
  .vys-snav{flex-direction:row;overflow-x:auto}
  .vys-snav .vys-sep{display:none}
  .vys-snav a{white-space:nowrap;box-shadow:none!important}
  .vys-snav a.vys-on{box-shadow:inset 0 -3px 0 var(--vys-accent)!important}
  .vys-tiles{grid-template-columns:1fr}
  .vys-pmpro .pmpro_form_fields{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .vys-acct *{transition:none!important;animation:none!important}
}

/* ============================================================================
   SIGN-IN PAGE — final rules, written against the real markup:

     section#pmpro_login.pmpro_section
       div.pmpro_card.pmpro_login_wrap
         div.pmpro_card_content
           form#loginform
             p.login-username / p.login-password / p.login-remember / p.login-submit
             input#user_login / input#user_pass / input#wp-submit.button
           div.pmpro_form_field-password-toggle
             button#pmpro_btn-password-toggle-1.pmpro_btn.pmpro_btn-plain
         div.pmpro_card_actions > div.pmpro_actions_nav > a   (Lost Password)

   These sit at the end of the file on purpose: the generic .vys-pmpro card rules
   above have equal specificity, so source order decides. The card element also
   carries .vys-pmpro, which is why the earlier attempt lost.
   ========================================================================= */

body.vysora-account-page .vys-login-card #pmpro_login,
body.vysora-account-page .vys-login-card .pmpro_section,
body.vysora-account-page .vys-login-card .pmpro_card,
body.vysora-account-page .vys-login-card .pmpro_login_wrap,
body.vysora-account-page .vys-login-card .pmpro_card_content,
body.vysora-account-page .vys-login-card .pmpro_card_actions,
body.vysora-account-page .vys-login-card .pmpro_actions_nav,
body.vysora-account-page .vys-login-card form,
body.vysora-account-page .vys-login-card div{
  background:transparent!important;background-image:none!important;
  border:0!important;border-radius:0!important;
  padding:0!important;margin:0!important;
  box-shadow:none!important;overflow:visible!important;
  max-width:none!important;width:auto!important;
}

/* field rows */
body.vysora-account-page .vys-login-card p.login-username,
body.vysora-account-page .vys-login-card p.login-password{margin:0 0 18px!important}
body.vysora-account-page .vys-login-card p.login-remember{margin:0 0 22px!important}
body.vysora-account-page .vys-login-card p.login-submit{margin:0!important}

body.vysora-account-page .vys-login-card p.login-username label,
body.vysora-account-page .vys-login-card p.login-password label{
  display:block;font-size:12.5px!important;font-weight:700!important;
  color:var(--vys-ink-soft)!important;margin:0 0 7px!important;letter-spacing:.02em}

body.vysora-account-page .vys-login-card input#user_login,
body.vysora-account-page .vys-login-card input#user_pass{
  display:block;width:100%!important;box-sizing:border-box;
  background:var(--vys-bg)!important;border:1px solid var(--vys-line-2)!important;
  color:var(--vys-ink)!important;border-radius:var(--vys-r-sm)!important;
  padding:13px 15px!important;font-size:15px!important;
  min-height:48px;margin:0!important;box-shadow:none!important}

/* remember me */
body.vysora-account-page .vys-login-card p.login-remember label{
  display:flex!important;align-items:center;gap:9px;
  font-size:13.5px!important;font-weight:500!important;
  color:var(--vys-ink-soft)!important;margin:0!important;cursor:pointer}
body.vysora-account-page .vys-login-card input#rememberme{
  width:16px!important;height:16px!important;min-height:0!important;
  margin:0!important;accent-color:var(--vys-accent)}

/* submit — matches the site's button weight, not a heavier one */
body.vysora-account-page .vys-login-card input#wp-submit{
  display:block;width:100%!important;box-sizing:border-box;
  background:var(--vys-accent)!important;color:#0e1319!important;
  border:0!important;border-radius:var(--vys-r-sm)!important;
  padding:14px 24px!important;
  font-size:15px!important;font-weight:700!important;letter-spacing:0!important;
  text-transform:none!important;line-height:1.2!important;
  min-height:50px;height:auto!important;cursor:pointer;box-shadow:none!important}
body.vysora-account-page .vys-login-card input#wp-submit:hover{
  background:var(--vys-accent-hi)!important}

/* password toggle — it inherits .pmpro_btn, which is why it rendered at button
   size. Reset it to a small quiet control sitting right of the Password label. */
body.vysora-account-page .vys-login-card .pmpro_form_field-password-toggle{
  position:absolute!important;top:0;right:0;margin:0!important;padding:0!important}
body.vysora-account-page .vys-login-card p.login-password{position:relative!important}
body.vysora-account-page .vys-login-card button.pmpro_btn-plain,
body.vysora-account-page .vys-login-card button[id^="pmpro_btn-password-toggle"]{
  display:inline-flex!important;align-items:center;gap:6px;
  background:none!important;background-color:transparent!important;
  border:0!important;box-shadow:none!important;border-radius:0!important;
  color:var(--vys-ink-faint)!important;
  font-size:12px!important;font-weight:600!important;line-height:1!important;
  letter-spacing:0!important;text-transform:none!important;
  padding:0!important;margin:0!important;
  width:auto!important;height:auto!important;min-height:0!important;
  cursor:pointer}
body.vysora-account-page .vys-login-card button.pmpro_btn-plain:hover{
  color:var(--vys-accent-hi)!important;background:none!important}
body.vysora-account-page .vys-login-card .pmpro_icon,
body.vysora-account-page .vys-login-card .pmpro_icon svg{
  width:14px!important;height:14px!important;display:block}
body.vysora-account-page .vys-login-card .pmpro_icon svg{stroke:currentColor;fill:none}

/* Lost Password row */
body.vysora-account-page .vys-login-card .pmpro_card_actions{
  border-top:1px solid var(--vys-line)!important;
  margin:24px 0 0!important;padding:16px 0 0!important;text-align:center!important}
body.vysora-account-page .vys-login-card .pmpro_actions_nav{
  display:block!important;text-align:center!important}
body.vysora-account-page .vys-login-card .pmpro_actions_nav a{
  color:var(--vys-ink-soft)!important;font-size:13.5px!important;font-weight:600}
body.vysora-account-page .vys-login-card .pmpro_actions_nav a:hover{
  color:var(--vys-accent-hi)!important}