/**
 * VirtualX Admin UI - Frontend styles
 * Scoped to .vxaui-* so the active theme is not affected.
 *
 * Coverage:
 * - Account shell layout and grouped navigation
 * - Course filters / pills / pagination
 * - No internal course-list scrolling
 * - Account Management form / feedback states
 * - In-shell PMPro/profile form visual alignment
 */

/* -------------------------------------------------------------------------- */
/* Design tokens                                                              */
/* -------------------------------------------------------------------------- */

:root{
  --vxaui-bg: #0b0f14;
  --vxaui-surface: rgba(255,255,255,0.97);
  --vxaui-surface-2: rgba(255,255,255,0.92);
  --vxaui-surface-3: rgba(15,23,42,0.03);

  --vxaui-text: #0f172a;
  --vxaui-muted: rgba(15,23,42,0.72);

  --vxaui-primary: #d0251f;
  --vxaui-primary-2: #0077ed;
  --vxaui-primary-contrast: #ffffff;
  --vxaui-primary-soft: rgba(208,37,31,0.08);
  --vxaui-link: #0077ed;

  --vxaui-border: rgba(15,23,42,0.14);
  --vxaui-border-strong: rgba(15,23,42,0.22);
  --vxaui-focus: rgba(208,37,31,0.22);

  --vxaui-shadow: 0 16px 44px rgba(0,0,0,0.20);
  --vxaui-shadow-soft: 0 10px 28px rgba(2,6,23,0.10);

  --vxaui-radius: 16px;
  --vxaui-radius-sm: 12px;
  --vxaui-radius-xs: 10px;

  --vxaui-success: #16a34a;
  --vxaui-success-bg: rgba(22,163,74,0.10);
  --vxaui-danger: #dc2626;
  --vxaui-danger-bg: rgba(220,38,38,0.10);
  --vxaui-warning: #b45309;
  --vxaui-warning-bg: rgba(180,83,9,0.10);

  --vxaui-btn-gradient: linear-gradient(135deg, var(--vxaui-primary), var(--vxaui-primary-2));
}

/* -------------------------------------------------------------------------- */
/* Root and shell                                                             */
/* -------------------------------------------------------------------------- */

.vxaui-root,
.vxaui-panel{
  color: var(--vxaui-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.vxaui-root{
  min-height: 400px;
  margin-bottom: 2rem;
}

.vxaui-shell{
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.vxaui-main,
.vxaui-panels{
  flex: 1 1 auto;
  min-width: 0;
}

.vxaui-panel{
  background: var(--vxaui-surface);
  border: 1px solid var(--vxaui-border);
  border-radius: var(--vxaui-radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--vxaui-shadow);
}

.vxaui-panel__header{
  margin-bottom: 0.75rem;
}

.vxaui-panel__header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vxaui-panel__actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.vxaui-panel__title{
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--vxaui-text);
}

.vxaui-panel__section{
  display: block;
}

.vxaui-panel__section[hidden]{
  display: none !important;
}

.vxaui-panel__section.is-active{
  display: block;
}

.vxaui-shell-header{
  margin-bottom: 1rem;
}

.vxaui-shell-title{
  margin: 0 0 0.25rem;
  font-size: 1.3rem;
  color: var(--vxaui-text);
}

.vxaui-shell-subtitle{
  margin: 0;
  font-size: 0.95rem;
  color: var(--vxaui-muted);
}

/* -------------------------------------------------------------------------- */
/* Sidebar and grouped navigation                                             */
/* -------------------------------------------------------------------------- */

.vxaui-sidebar{
  min-width: 230px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;

  background: var(--vxaui-surface);
  border: 1px solid var(--vxaui-border);
  border-radius: var(--vxaui-radius);
  padding: 0.5rem;
  box-shadow: var(--vxaui-shadow);

  max-height: calc(100vh - 180px);
  overflow: auto;

  position: sticky;
  top: 1rem;

  scrollbar-width: thin;
  scrollbar-color: rgba(17,24,39,.25) transparent;
}

.vxaui-tabs{
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.vxaui-sidebar__footer{
  margin-top: auto;
  padding-top: 0.35rem;
}

.vxaui-sidebar .vxaui-tabgroup,
.vxaui-sidebar .vxaui-nav-group{
  padding: 0.15rem 0;
}

.vxaui-sidebar .vxaui-tabgroup + .vxaui-tabgroup,
.vxaui-sidebar .vxaui-nav-group + .vxaui-nav-group{
  margin-top: 0.35rem;
}

.vxaui-sidebar .vxaui-tabgroup__label,
.vxaui-sidebar .vxaui-nav-group-title,
.vxaui-sidebar .vxaui-group-heading,
.vxaui-sidebar .vxaui-nav-heading,
.vxaui-sidebar [data-vxaui-group-title]{
  display: block;
  margin: 0.35rem 0 0.25rem;
  padding: 0.35rem 0.6rem;

  font-size: 0.72rem;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(15,23,42,0.55);
  user-select: none;
}

.vxaui-sidebar .vxaui-tabgroup__label::after,
.vxaui-sidebar .vxaui-nav-group-title::after,
.vxaui-sidebar .vxaui-group-heading::after,
.vxaui-sidebar .vxaui-nav-heading::after,
.vxaui-sidebar [data-vxaui-group-title]::after{
  content: "";
  display: block;
  height: 1px;
  margin-top: 0.35rem;
  background: rgba(15,23,42,0.10);
}

/* -------------------------------------------------------------------------- */
/* Tabs                                                                       */
/* -------------------------------------------------------------------------- */

.vxaui-tab{
  appearance: none;
  display: block;
  width: 100%;
  text-align: left;

  padding: 0.6rem 0.75rem;
  border: 1px solid transparent;
  background: transparent;

  cursor: pointer;
  border-radius: 10px;

  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--vxaui-text);
  text-decoration: none;

  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

.vxaui-tab:hover{
  background: var(--vxaui-surface-2);
  border-color: var(--vxaui-border);
  text-decoration: none;
}

.vxaui-tab:focus,
.vxaui-tab:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--vxaui-focus);
}

.vxaui-tab.is-active{
  background: var(--vxaui-primary);
  color: var(--vxaui-primary-contrast);
  border-color: var(--vxaui-primary);
}

.vxaui-tab.is-active:hover{
  filter: brightness(1.04);
}

.vxaui-tab.vxaui-tab--utility{
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.vxaui-tab[aria-disabled="true"]{
  opacity: 0.95;
}

.vxaui-tab[aria-disabled="true"] .vxaui-tab__lock{
  margin-left: 0.35rem;
  opacity: 0.9;
}

/* -------------------------------------------------------------------------- */
/* Cards, panels, grids, text                                                 */
/* -------------------------------------------------------------------------- */

.vxaui-panel h2{
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  color: var(--vxaui-text);
}

.vxaui-panel h3{
  margin: 0 0 0.5rem;
  font-size: 1.02rem;
  color: var(--vxaui-text);
}

.vxaui-panel-title{
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: var(--vxaui-text);
}

.vxaui-panel-agent{
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.vxaui-card{
  background: var(--vxaui-surface);
  border: 1px solid var(--vxaui-border);
  border-radius: var(--vxaui-radius-sm);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--vxaui-shadow-soft);
}

.vxaui-card h3,
.vxaui-card h4{
  margin: 0 0 0.45rem;
  color: var(--vxaui-text);
}

.vxaui-card-center{
  text-align: center;
  max-width: 520px;
  margin: 2rem auto;
}

.vxaui-card-agent.is-locked{
  opacity: 0.94;
}

.vxaui-card-actions{
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.vxaui-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.vxaui-grid-dashboard > .vxaui-card,
.vxaui-grid-dashboard > .vxaui-panel,
.vxaui-grid-dashboard > div{
  margin-bottom: 0;
}

.vxaui-health-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.vxaui-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.vxaui-list-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;

  padding: 0.7rem 0;
  border-bottom: 1px solid var(--vxaui-border);
}

.vxaui-list-row:last-child{
  border-bottom: none;
}

.vxaui-list-main{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vxaui-tag{
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 11px;
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  background: var(--vxaui-surface-2);
  border: 1px solid var(--vxaui-border);
  color: var(--vxaui-text);
}

.vxaui-muted{
  color: var(--vxaui-muted);
  font-size: 13px;
}

.vxaui-error{
  color: var(--vxaui-danger);
}

.vxaui-ok{
  color: var(--vxaui-success);
}

.vxaui-spacer{
  height: 0.5rem;
}

.vxaui-ssr{
  display: none;
}

.vxaui-app-loading{
  padding: 2rem 1rem;
  text-align: center;
  color: var(--vxaui-muted);
}

/* -------------------------------------------------------------------------- */
/* Buttons and links                                                          */
/* -------------------------------------------------------------------------- */

.vxaui-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.5rem 0.95rem;
  border-radius: 999px;

  border: 1px solid var(--vxaui-primary);
  background: var(--vxaui-btn-gradient);
  color: var(--vxaui-primary-contrast);

  text-decoration: none;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  cursor: pointer;

  transition:
    filter 0.15s ease,
    transform 0.05s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
}

.vxaui-btn:hover{
  filter: brightness(1.04) saturate(1.02);
  text-decoration: none;
}

.vxaui-btn:active{
  transform: translateY(1px);
}

.vxaui-btn:focus,
.vxaui-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--vxaui-focus);
}

.vxaui-btn[disabled],
.vxaui-btn[aria-disabled="true"]{
  opacity: 0.65;
  cursor: not-allowed;
}

.vxaui-btn.vxaui-btn-secondary{
  background: transparent;
  color: var(--vxaui-text);
  border-color: var(--vxaui-border);
}

.vxaui-btn.vxaui-btn-secondary:hover{
  background: var(--vxaui-surface-2);
  filter: none;
}

.vxaui-btn.vxaui-btn-logout{
  border-radius: 999px;
  padding: 0.5rem 1.05rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  border: 1px solid var(--vxaui-primary);
  background: var(--vxaui-btn-gradient);
  color: var(--vxaui-primary-contrast);
  box-shadow: 0 14px 36px rgba(0,0,0,0.16);
}

.vxaui-btn.vxaui-btn-logout:hover{
  filter: brightness(1.03);
}

.vxaui-btn.vxaui-btn-logout:focus,
.vxaui-btn.vxaui-btn-logout:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--vxaui-focus), 0 14px 36px rgba(0,0,0,0.16);
}

.vxaui-btn-small{
  padding: 0.42rem 0.78rem;
  font-size: 12px;
}

.vxaui-link{
  text-decoration: none;
  font-size: 13px;
  color: var(--vxaui-text);
}

.vxaui-link:hover{
  text-decoration: underline;
}

.vxaui-links{
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.vxaui-links .vxaui-link{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;

  padding: 0.45rem 0.55rem;
  border-radius: 8px;

  border: 1px solid transparent;
  background: transparent;

  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;

  transition: background 0.15s ease, border-color 0.15s ease;
}

.vxaui-links .vxaui-link:hover{
  background: var(--vxaui-surface-2);
  border-color: var(--vxaui-border);
  text-decoration: none;
}

.vxaui-links .vxaui-link:focus,
.vxaui-links .vxaui-link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--vxaui-focus);
}

.vxaui-links .vxaui-link::before{
  content: ">";
  display: inline-block;
  line-height: 1;
  opacity: 0.7;
}

/* -------------------------------------------------------------------------- */
/* Generic form controls                                                      */
/* -------------------------------------------------------------------------- */

.vxaui-field,
.vxaui-form-row{
  margin-top: 0.95rem;
}

.vxaui-form-row:first-child{
  margin-top: 0;
}

.vxaui-label,
.vxaui-panel label{
  display: block;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(15,23,42,0.86);
}

.vxaui-input,
.vxaui-select,
.vxaui-panel input[type="text"],
.vxaui-panel input[type="email"],
.vxaui-panel input[type="password"],
.vxaui-panel input[type="search"],
.vxaui-panel input[type="number"],
.vxaui-panel input[type="url"],
.vxaui-panel input[type="tel"],
.vxaui-panel textarea,
.vxaui-panel select{
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.16);
  background: rgba(255,255,255,0.98);
  color: var(--vxaui-text);
  font-size: 15px;
  line-height: 1.25;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.vxaui-panel textarea{
  min-height: 120px;
  resize: vertical;
}

.vxaui-input:focus,
.vxaui-select:focus,
.vxaui-panel input[type="text"]:focus,
.vxaui-panel input[type="email"]:focus,
.vxaui-panel input[type="password"]:focus,
.vxaui-panel input[type="search"]:focus,
.vxaui-panel input[type="number"]:focus,
.vxaui-panel input[type="url"]:focus,
.vxaui-panel input[type="tel"]:focus,
.vxaui-panel textarea:focus,
.vxaui-panel select:focus{
  border-color: rgba(0,119,237,0.48);
  box-shadow: 0 0 0 4px rgba(0,119,237,0.14);
}

.vxaui-field-error{
  margin-top: 6px;
  min-height: 18px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--vxaui-danger);
}

/* -------------------------------------------------------------------------- */
/* Account Management form and messages                                       */
/* -------------------------------------------------------------------------- */

.vxaui-account-management{
  max-width: 760px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.94));
}

.vxaui-account-management .vxaui-muted{
  font-size: 14px;
}

.vxaui-account-feedback{
  display: none;
  margin: 0 0 1rem;
  padding: 0.8rem 0.95rem;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 13px;
  line-height: 1.45;
}

.vxaui-account-feedback[data-state="idle"]{
  display: none;
}

.vxaui-account-feedback[data-state="busy"]{
  display: block;
  background: var(--vxaui-warning-bg);
  border-color: rgba(180,83,9,0.20);
  color: var(--vxaui-warning);
}

.vxaui-account-feedback[data-state="success"]{
  display: block;
  background: var(--vxaui-success-bg);
  border-color: rgba(22,163,74,0.20);
  color: var(--vxaui-success);
}

.vxaui-account-feedback[data-state="error"]{
  display: block;
  background: var(--vxaui-danger-bg);
  border-color: rgba(220,38,38,0.20);
  color: var(--vxaui-danger);
}

.vxaui-account-form{
  display: flex;
  flex-direction: column;
  gap: 0;
}

.vxaui-account-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.vxaui-account-form [disabled],
.vxaui-account-management [aria-busy="true"]{
  opacity: 0.75;
  cursor: not-allowed;
}

.vxaui-account-form .vxaui-input[aria-invalid="true"],
.vxaui-account-form .vxaui-input.is-invalid{
  border-color: rgba(220,38,38,0.45);
  box-shadow: 0 0 0 4px rgba(220,38,38,0.10);
}

/* -------------------------------------------------------------------------- */
/* In-shell PMPro / profile / account form alignment                          */
/* -------------------------------------------------------------------------- */

.vxaui-panel__section .pmpro,
.vxaui-panel__section .pmpro_account,
.vxaui-panel__section .pmpro_invoice,
.vxaui-panel__section .pmpro_message,
.vxaui-panel__section .pmpro_form,
.vxaui-panel__section form.pmpro_form{
  max-width: 100%;
}

.vxaui-panel__section .pmpro_card,
.vxaui-panel__section .pmpro_box,
.vxaui-panel__section .pmpro_content_message,
.vxaui-panel__section .pmpro_message{
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--vxaui-border);
  border-radius: 14px;
  box-shadow: var(--vxaui-shadow-soft);
}

.vxaui-panel__section .pmpro_form,
.vxaui-panel__section form.pmpro_form,
.vxaui-panel__section .pmpro_checkout-fields,
.vxaui-panel__section .pmpro_member_profile_edit-fields{
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
}

.vxaui-panel__section .pmpro_form h2,
.vxaui-panel__section .pmpro_form h3,
.vxaui-panel__section .pmpro_checkout h2,
.vxaui-panel__section .pmpro_member_profile_edit-fields h2{
  margin-top: 0;
}

.vxaui-panel__section .pmpro_form .pmpro_checkout-field,
.vxaui-panel__section .pmpro_member_profile_edit-fields > div,
.vxaui-panel__section .pmpro_checkout-fields > div{
  margin-bottom: 1rem;
}

.vxaui-panel__section .pmpro_form label,
.vxaui-panel__section .pmpro_checkout-field label,
.vxaui-panel__section .pmpro_member_profile_edit-fields label{
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(15,23,42,0.86);
}

.vxaui-panel__section .pmpro_form input[type="text"],
.vxaui-panel__section .pmpro_form input[type="email"],
.vxaui-panel__section .pmpro_form input[type="password"],
.vxaui-panel__section .pmpro_form input[type="number"],
.vxaui-panel__section .pmpro_form input[type="tel"],
.vxaui-panel__section .pmpro_form input[type="url"],
.vxaui-panel__section .pmpro_form select,
.vxaui-panel__section .pmpro_form textarea{
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.16);
  background: rgba(255,255,255,0.98);
  color: var(--vxaui-text);
  font-size: 15px;
  line-height: 1.25;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.vxaui-panel__section .pmpro_form input[type="text"]:focus,
.vxaui-panel__section .pmpro_form input[type="email"]:focus,
.vxaui-panel__section .pmpro_form input[type="password"]:focus,
.vxaui-panel__section .pmpro_form input[type="number"]:focus,
.vxaui-panel__section .pmpro_form input[type="tel"]:focus,
.vxaui-panel__section .pmpro_form input[type="url"]:focus,
.vxaui-panel__section .pmpro_form select:focus,
.vxaui-panel__section .pmpro_form textarea:focus{
  border-color: rgba(0,119,237,0.48);
  box-shadow: 0 0 0 4px rgba(0,119,237,0.14);
}

.vxaui-panel__section .pmpro_btn,
.vxaui-panel__section .pmpro_btn-submit,
.vxaui-panel__section .pmpro_checkout .pmpro_btn,
.vxaui-panel__section .pmpro_member_profile_edit-fields .pmpro_btn,
.vxaui-panel__section input[type="submit"].pmpro_btn,
.vxaui-panel__section input[type="submit"].pmpro_btn-submit,
.vxaui-panel__section input[type="submit"][name="updateuser"],
.vxaui-panel__section .pmpro_form input[type="submit"],
.vxaui-panel__section .pmpro_form button[type="submit"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--vxaui-primary);
  background: var(--vxaui-btn-gradient);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,119,237,0.12);
  transition: filter 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}

.vxaui-panel__section .pmpro_btn:hover,
.vxaui-panel__section .pmpro_btn-submit:hover,
.vxaui-panel__section .pmpro_form input[type="submit"]:hover,
.vxaui-panel__section .pmpro_form button[type="submit"]:hover{
  filter: brightness(1.04);
  text-decoration: none;
}

.vxaui-panel__section .pmpro_btn-cancel,
.vxaui-panel__section .pmpro_btn.pmpro_btn-cancel,
.vxaui-panel__section .pmpro_form .button-secondary,
.vxaui-panel__section .pmpro_form .pmpro_btn-secondary{
  background: transparent;
  color: var(--vxaui-text);
  border-color: var(--vxaui-border);
  box-shadow: none;
}

.vxaui-panel__section .pmpro_btn-cancel:hover,
.vxaui-panel__section .pmpro_form .button-secondary:hover,
.vxaui-panel__section .pmpro_form .pmpro_btn-secondary:hover{
  background: var(--vxaui-surface-2);
  filter: none;
}

.vxaui-panel__section .pmpro_message.pmpro_success,
.vxaui-panel__section .pmpro_message.pmpro_alert,
.vxaui-panel__section .pmpro_message.pmpro_error{
  padding: 0.8rem 0.95rem;
  border-radius: 12px;
  border-width: 1px;
  border-style: solid;
}

.vxaui-panel__section .pmpro_message.pmpro_success{
  background: var(--vxaui-success-bg);
  border-color: rgba(22,163,74,0.20);
  color: var(--vxaui-success);
}

.vxaui-panel__section .pmpro_message.pmpro_alert{
  background: var(--vxaui-warning-bg);
  border-color: rgba(180,83,9,0.20);
  color: var(--vxaui-warning);
}

.vxaui-panel__section .pmpro_message.pmpro_error{
  background: var(--vxaui-danger-bg);
  border-color: rgba(220,38,38,0.20);
  color: var(--vxaui-danger);
}

/* -------------------------------------------------------------------------- */
/* Courses UX                                                                 */
/* -------------------------------------------------------------------------- */

.vxaui-courses-ui{
  display: block;
}

.vxaui-courses-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.55rem;
  gap: 0.75rem;
}

.vxaui-courses-count{
  font-size: 0.88rem;
  color: var(--vxaui-muted);
}

/* Support both old and new wrappers */
.vxaui-courses-toolbar,
.vxaui-courses-filters{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 0.75rem;
  flex-wrap: nowrap;
}

.vxaui-courses-filter--search{
  flex: 1 1 auto;
  min-width: 220px;
}

.vxaui-courses-filter__search{
  width: 100%;
  min-height: 44px;
  font-size: 14px;
}

/* Desktop select wrapper */
.vxaui-status-menu{
  position: relative;
  flex: 0 0 auto;
}

.vxaui-status-menu__select{
  min-height: 44px;
  font-size: 14px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.35rem;
}

.vxaui-status-menu::after{
  content: "≡";
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.65;
  font-weight: 800;
  pointer-events: none;
}

.vxaui-course-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

/* No internal scrolling - pagination controls the viewport */
.vxaui-courses-list{
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
  margin: 0;
}

/* Pager always horizontal */
.vxaui-courses-pager,
.vxaui-pagination{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap !important;
  width: 100%;
  margin-top: 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.vxaui-courses-pager::-webkit-scrollbar,
.vxaui-pagination::-webkit-scrollbar{
  display: none;
}

.vxaui-courses-pager .vxaui-btn,
.vxaui-pagination .vxaui-btn,
.vxaui-pagination .vxaui-btn-secondary{
  white-space: nowrap;
  flex: 0 0 auto;
}

.vxaui-courses-pageinfo,
.vxaui-pagination-info{
  flex: 1 1 auto;
  text-align: center;
  white-space: nowrap;
  min-width: 0;
  font-size: 13px;
  color: var(--vxaui-muted);
}

/* Mobile / tablet visible status pills */
.vxaui-courses-statusseg,
.vxaui-status-pills{
  display: none;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.vxaui-courses-statusseg::-webkit-scrollbar,
.vxaui-status-pills::-webkit-scrollbar{
  display: none;
}

.vxaui-seg-btn,
.vxaui-status-pill{
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--vxaui-border);
  background: rgba(15,23,42,0.04);
  color: var(--vxaui-text);
  border-radius: 999px;

  padding: 0.45rem 0.95rem;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.vxaui-seg-btn:hover,
.vxaui-status-pill:hover{
  background: var(--vxaui-surface-2);
}

.vxaui-seg-btn:focus,
.vxaui-seg-btn:focus-visible,
.vxaui-status-pill:focus,
.vxaui-status-pill:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--vxaui-focus);
}

.vxaui-seg-btn.is-active,
.vxaui-seg-btn[aria-pressed="true"],
.vxaui-status-pill.is-active,
.vxaui-status-pill[aria-pressed="true"]{
  background: var(--vxaui-primary);
  border-color: var(--vxaui-primary);
  color: var(--vxaui-primary-contrast);
}

/* Desktop: search + status on one row */
@media (min-width: 1024px){
  .vxaui-courses-toolbar,
  .vxaui-courses-filters{
    flex-direction: row;
    align-items: center;
  }

  .vxaui-status-menu{
    display: block;
  }

  .vxaui-courses-statusseg,
  .vxaui-status-pills{
    display: none;
  }
}

/* Tablet/mobile: search on top, pills visible, no dropdown */
@media (max-width: 1023px){
  .vxaui-courses-toolbar,
  .vxaui-courses-filters{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .vxaui-courses-filter--search{
    min-width: 0;
  }

  .vxaui-status-menu{
    display: none !important;
  }

  .vxaui-courses-statusseg,
  .vxaui-status-pills{
    display: flex;
  }

  .vxaui-courses-toolbar > .vxaui-select,
  .vxaui-courses-filters > .vxaui-select{
    display: none !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Agent switcher                                                             */
/* -------------------------------------------------------------------------- */

.vxaui-agents-switcher{
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
}

.vxaui-agents-switcher-btn{
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--vxaui-border);
  background: var(--vxaui-surface);
  font-size: 0.85rem;
  line-height: 1.2;
  cursor: pointer;
  color: var(--vxaui-text);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.vxaui-agents-switcher-btn:hover{
  background: var(--vxaui-surface-2);
}

.vxaui-agents-switcher-btn.is-active{
  background: var(--vxaui-primary);
  color: var(--vxaui-primary-contrast);
  border-color: var(--vxaui-primary);
}

.vxaui-agents-ssr{
  position: relative;
}

.vxaui-agents-panel{
  display: none;
}

.vxaui-agents-panel.is-active{
  display: block;
}

.vxaui-agents-ssr-noscript{
  margin-top: 0.5rem;
  font-size: 0.85rem;
  opacity: 0.85;
}

/* -------------------------------------------------------------------------- */
/* AuthCard                                                                   */
/* -------------------------------------------------------------------------- */

.vxaui-auth,
.vxaui-auth-wrap{
  --vxaui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --vxaui-red: #e11d2e;
  --vxaui-blue: #2563eb;
  --vxaui-ink: #0b1220;
  --vxaui-muted-auth: rgba(11,18,32,.72);
  --vxaui-surface-auth: rgba(255,255,255,.965);
  --vxaui-border-auth: rgba(15,23,42,.14);
  --vxaui-shadow-auth: 0 18px 50px rgba(2,6,23,.28);
  --vxaui-radius-auth: 18px;
  --vxaui-focus-auth: rgba(37,99,235,.35);

  font-family: var(--vxaui-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.vxaui-auth,
.vxaui-auth *,
.vxaui-auth-wrap,
.vxaui-auth-wrap *{
  box-sizing: border-box;
}

.vxaui-auth,
.vxaui-auth-wrap{
  position: relative;
  min-height: min(78vh, 700px);
  padding: 38px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vxaui-auth-backdrop{
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 520px at 50% 10%, rgba(225,29,46,.20), rgba(37,99,235,.16) 40%, rgba(2,6,23,.12) 75%);
  pointer-events: none;
}

.vxaui-auth-card{
  position: relative;
  width: min(560px, 100%);
  background: var(--vxaui-surface-auth);
  border: 1px solid var(--vxaui-border-auth);
  border-radius: var(--vxaui-radius-auth);
  box-shadow: var(--vxaui-shadow-auth);
  overflow: auto;
  max-height: calc(100vh - 160px);
  overscroll-behavior: contain;
}

.vxaui-auth-card::before{
  content: "";
  display: block;
  height: 6px;
  background: linear-gradient(90deg, var(--vxaui-red), var(--vxaui-blue));
}

.vxaui-auth-head,
.vxaui-auth-header{
  padding: 22px 22px 10px;
}

.vxaui-auth-title,
.vxaui-auth-header h2{
  margin: 0;
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--vxaui-ink);
  font-weight: 800;
}

.vxaui-auth-subtitle,
.vxaui-auth-header .vxaui-muted{
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--vxaui-muted-auth);
}

.vxaui-auth-form{
  padding: 0 22px 18px;
}

.vxaui-check,
.vxaui-checkbox-row{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  color: rgba(11,18,32,.80);
  font-size: 13px;
}

.vxaui-check input[type="checkbox"],
.vxaui-checkbox-row input[type="checkbox"]{
  width: 16px;
  height: 16px;
  accent-color: var(--vxaui-blue);
}

.vxaui-auth-actions{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.vxaui-auth-actions .vxaui-btn{
  flex: 1 1 220px;
  min-height: 46px;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.vxaui-auth-actions .vxaui-btn:not(.vxaui-btn-secondary){
  background: linear-gradient(135deg, rgba(225,29,46,1), rgba(37,99,235,1));
  border: 0;
  color: #fff;
  box-shadow: 0 12px 26px rgba(37,99,235,.18);
}

.vxaui-auth-actions .vxaui-btn:not(.vxaui-btn-secondary):hover{
  filter: brightness(1.02) saturate(1.05);
  transform: translateY(-1px);
}

.vxaui-auth-actions .vxaui-btn:not(.vxaui-btn-secondary):active{
  transform: translateY(0);
}

.vxaui-auth-actions .vxaui-btn.vxaui-btn-secondary{
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.28);
  color: rgba(11,18,32,.92);
}

.vxaui-auth-actions .vxaui-btn.vxaui-btn-secondary:hover{
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.42);
  transform: translateY(-1px);
}

.vxaui-auth-reset,
.vxaui-auth-help{
  margin-top: 14px;
  border-top: 1px solid rgba(15,23,42,.10);
  padding-top: 14px;
}

.vxaui-auth-reset summary,
.vxaui-auth-help summary{
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  color: rgba(11,18,32,.86);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.vxaui-auth-reset summary::-webkit-details-marker,
.vxaui-auth-help summary::-webkit-details-marker{
  display: none;
}

.vxaui-auth-reset summary::before,
.vxaui-auth-help summary::before{
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid rgba(11,18,32,.65);
  border-bottom: 2px solid rgba(11,18,32,.65);
  transform: rotate(-45deg);
  transition: transform 0.16s ease;
  margin-top: 1px;
}

.vxaui-auth-reset details[open] summary::before,
.vxaui-auth-help details[open] summary::before{
  transform: rotate(45deg);
}

.vxaui-auth-reset .vxaui-muted,
.vxaui-auth-help .vxaui-muted{
  margin: 10px 0 12px;
  color: var(--vxaui-muted-auth);
  font-size: 13px;
  line-height: 1.45;
}

.vxaui-divider,
.vxaui-auth-divider{
  border: 0;
  border-top: 1px solid rgba(15,23,42,.10);
  margin: 16px 0 14px;
}

.vxaui-auth-enterprise{
  margin: 10px 0 0;
  text-align: center;
  font-size: 14px;
  opacity: 0.9;
}

.vxaui-auth-enterprise-link{
  color: var(--vxaui-primary);
  font-weight: 700;
  text-decoration: none;
  margin-left: 6px;
}

.vxaui-auth-enterprise-link:hover{
  text-decoration: underline;
}

.vxaui-auth-levels{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  padding: 0 22px 22px;
}

.vxaui-auth-levels .vxaui-btn-small{
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  background: rgba(225,29,46,.10);
  border: 1px solid rgba(225,29,46,.22);
  color: rgba(11,18,32,.92);
}

.vxaui-auth-levels .vxaui-btn-small:hover{
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.26);
}

.vxaui-alert,
.vxaui-auth-error{
  margin: 12px 22px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(225,29,46,.10);
  border: 1px solid rgba(225,29,46,.22);
  color: rgba(15,23,42,.95);
  font-size: 13px;
  line-height: 1.4;
}

.vxaui-auth .vxaui-link,
.vxaui-auth-wrap .vxaui-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(15,23,42,.04);
  color: rgba(11,18,32,.90);
  font-weight: 700;
  text-decoration: none;
  font-size: 13px;
  line-height: 1;
}

.vxaui-auth .vxaui-link:hover,
.vxaui-auth-wrap .vxaui-link:hover{
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.28);
  text-decoration: none;
}

/* -------------------------------------------------------------------------- */
/* Motion and responsive                                                      */
/* -------------------------------------------------------------------------- */

.vxaui-main{
  scroll-margin-top: 1rem;
}

@media (prefers-reduced-motion: reduce){
  .vxaui-tab,
  .vxaui-btn,
  .vxaui-links .vxaui-link,
  .vxaui-seg-btn,
  .vxaui-status-pill{
    transition: none !important;
  }

  .vxaui-btn:active{
    transform: none;
  }
}

@media (max-width: 960px){
  .vxaui-shell{
    flex-direction: column;
  }

  .vxaui-sidebar{
    position: relative;
    top: auto;
    min-width: 0;

    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.5rem;

    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5rem;
  }

  .vxaui-tabs{
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }

  .vxaui-sidebar .vxaui-tabgroup,
  .vxaui-sidebar .vxaui-tabgroup__label,
  .vxaui-sidebar .vxaui-nav-group-title,
  .vxaui-sidebar .vxaui-group-heading,
  .vxaui-sidebar .vxaui-nav-heading,
  .vxaui-sidebar [data-vxaui-group-title]{
    display: none;
  }

  .vxaui-sidebar__footer{
    margin-top: 0;
    padding-top: 0;
    margin-left: auto;
    flex: 0 0 auto;
  }

  .vxaui-tab{
    width: auto;
    white-space: nowrap;
  }

  .vxaui-panel{
    padding: 0.95rem 1rem;
  }
}

@media (max-width: 700px){
  .vxaui-panel__header-inner{
    align-items: flex-start;
    flex-direction: column;
  }

  .vxaui-panel__actions{
    width: 100%;
    justify-content: flex-start;
  }

  .vxaui-list-row{
    align-items: flex-start;
    flex-direction: column;
  }

  .vxaui-list-row .vxaui-card-actions{
    width: 100%;
  }
}

@media (max-width: 600px){
  .vxaui-shell{
    padding: 0 0 1.5rem;
  }

  .vxaui-shell-title{
    font-size: 1.2rem;
  }

  .vxaui-card,
  .vxaui-panel{
    padding: 0.9rem 0.95rem;
  }

  .vxaui-btn{
    font-size: 12px;
  }

  .vxaui-courses-pageinfo,
  .vxaui-pagination-info{
    font-size: 12px;
  }

  .vxaui-courses-pager .vxaui-btn,
  .vxaui-pagination .vxaui-btn{
    padding: 0.42rem 0.78rem;
  }

  .vxaui-account-actions{
    flex-direction: column;
    align-items: stretch;
  }

  .vxaui-account-actions .vxaui-btn{
    width: 100%;
  }
}

@media (max-width: 520px){
  .vxaui-auth,
  .vxaui-auth-wrap{
    padding: 30px 12px;
    min-height: 70vh;
  }

  .vxaui-auth-card{
    max-width: 94vw;
    max-height: calc(100vh - 120px);
  }

  .vxaui-auth-title,
  .vxaui-auth-header h2{
    font-size: 32px;
  }

  .vxaui-auth-card .vxaui-btn{
    font-size: 15px;
  }

  .vxaui-auth-card .vxaui-btn-small{
    font-size: 13px;
  }

  .vxaui-auth-levels{
    padding: 0 18px 18px;
  }
}

/* -------------------------------------------------------------------------- */
/* Final PMPro shell polish                                                   */
/* -------------------------------------------------------------------------- */

.vxaui-card-pmpro{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95));
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: 0 14px 36px rgba(2,6,23,0.08);
}

.vxaui-card-warning{
  background: linear-gradient(180deg, rgba(255,251,235,0.98), rgba(255,247,237,0.96));
  border-color: rgba(180,83,9,0.18);
}

.vxaui-locked{
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.95));
}

.vxaui-panel__section .pmpro a{
  color: var(--vxaui-link);
  text-decoration: none;
}

.vxaui-panel__section .pmpro a:hover{
  text-decoration: underline;
}

.vxaui-panel__section .pmpro small,
.vxaui-panel__section .pmpro .lite,
.vxaui-panel__section .pmpro .pmpro_form_hint,
.vxaui-panel__section .pmpro .pmpro_form_hint-under{
  color: var(--vxaui-muted);
  font-size: 12px;
  line-height: 1.45;
}

.vxaui-panel__section .pmpro hr{
  border: 0;
  border-top: 1px solid rgba(15,23,42,0.10);
  margin: 1rem 0;
}

.vxaui-panel__section .pmpro fieldset{
  margin: 0 0 1rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.72);
}

.vxaui-panel__section .pmpro legend{
  padding: 0 0.35rem;
  color: var(--vxaui-text);
  font-size: 13px;
  font-weight: 800;
}

.vxaui-panel__section .pmpro ul,
.vxaui-panel__section .pmpro ol{
  padding-left: 1.1rem;
}

.vxaui-panel__section .pmpro ul li,
.vxaui-panel__section .pmpro ol li{
  margin: 0.35rem 0;
}

.vxaui-panel__section .pmpro_actions_nav,
.vxaui-panel__section .pmpro_actions_nav-top,
.vxaui-panel__section .pmpro_actions_nav-bottom{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.vxaui-panel__section .pmpro_actions_nav li,
.vxaui-panel__section .pmpro_actions_nav-top li,
.vxaui-panel__section .pmpro_actions_nav-bottom li{
  list-style: none;
  margin: 0;
  padding: 0;
}

.vxaui-panel__section .pmpro_actions_nav a,
.vxaui-panel__section .pmpro_actions_nav-top a,
.vxaui-panel__section .pmpro_actions_nav-bottom a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--vxaui-border);
  background: rgba(15,23,42,0.04);
  color: var(--vxaui-text);
  font-weight: 700;
  text-decoration: none;
}

.vxaui-panel__section .pmpro_actions_nav a:hover,
.vxaui-panel__section .pmpro_actions_nav-top a:hover,
.vxaui-panel__section .pmpro_actions_nav-bottom a:hover{
  background: var(--vxaui-surface-2);
  border-color: var(--vxaui-border-strong);
  text-decoration: none;
}

.vxaui-panel__section .pmpro_checkout,
.vxaui-panel__section .pmpro_confirmation_wrap,
.vxaui-panel__section .pmpro_invoice,
.vxaui-panel__section .pmpro_cancel_wrap,
.vxaui-panel__section #pmpro_cancel,
.vxaui-panel__section .pmpro_billing_wrap{
  width: 100%;
}

.vxaui-panel__section .pmpro_checkout .pmpro_checkout-fields,
.vxaui-panel__section .pmpro_checkout .pmpro_checkout_gateway,
.vxaui-panel__section .pmpro_checkout .pmpro_checkout_order,
.vxaui-panel__section .pmpro_confirmation_wrap,
.vxaui-panel__section .pmpro_invoice,
.vxaui-panel__section .pmpro_cancel_wrap,
.vxaui-panel__section #pmpro_cancel{
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.80);
  box-shadow: var(--vxaui-shadow-soft);
  padding: 1rem 1.1rem;
  margin: 0 0 1rem;
}

.vxaui-panel__section .pmpro_checkout h2,
.vxaui-panel__section .pmpro_checkout h3,
.vxaui-panel__section .pmpro_confirmation_wrap h2,
.vxaui-panel__section .pmpro_invoice h2,
.vxaui-panel__section .pmpro_invoice h3,
.vxaui-panel__section .pmpro_cancel_wrap h2,
.vxaui-panel__section #pmpro_cancel h2{
  color: var(--vxaui-text);
  margin-top: 0;
}

.vxaui-panel__section .pmpro_checkout .pmpro_level-cost,
.vxaui-panel__section .pmpro_checkout .pmpro_level-description,
.vxaui-panel__section .pmpro_confirmation_wrap .pmpro_confirmation_message,
.vxaui-panel__section .pmpro_cancel_wrap .pmpro_cancel-message,
.vxaui-panel__section #pmpro_cancel .pmpro_cancel-message{
  color: var(--vxaui-muted);
}

.vxaui-panel__section .pmpro_checkout .pmpro_checkout-field-checkbox label,
.vxaui-panel__section .pmpro_checkout .pmpro_checkout-field-radio label,
.vxaui-panel__section .pmpro_form .pmpro_clickable{
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-weight: 600;
}

.vxaui-panel__section .pmpro_checkout input[type="checkbox"],
.vxaui-panel__section .pmpro_checkout input[type="radio"],
.vxaui-panel__section .pmpro_form input[type="checkbox"],
.vxaui-panel__section .pmpro_form input[type="radio"]{
  accent-color: var(--vxaui-primary-2);
  margin-top: 0.2rem;
}

.vxaui-panel__section .pmpro table,
.vxaui-panel__section table.pmpro_table,
.vxaui-panel__section .pmpro_invoice table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.96);
  box-shadow: var(--vxaui-shadow-soft);
  margin: 0 0 1rem;
}

.vxaui-panel__section .pmpro thead th,
.vxaui-panel__section table.pmpro_table thead th,
.vxaui-panel__section .pmpro_invoice thead th{
  background: rgba(15,23,42,0.04);
  color: var(--vxaui-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(15,23,42,0.10);
}

.vxaui-panel__section .pmpro th,
.vxaui-panel__section .pmpro td,
.vxaui-panel__section table.pmpro_table th,
.vxaui-panel__section table.pmpro_table td{
  padding: 0.8rem 0.9rem;
  vertical-align: top;
  color: var(--vxaui-text);
}

.vxaui-panel__section .pmpro tbody tr + tr td,
.vxaui-panel__section table.pmpro_table tbody tr + tr td{
  border-top: 1px solid rgba(15,23,42,0.08);
}

.vxaui-panel__section .pmpro tfoot th,
.vxaui-panel__section .pmpro tfoot td,
.vxaui-panel__section table.pmpro_table tfoot th,
.vxaui-panel__section table.pmpro_table tfoot td{
  background: rgba(15,23,42,0.03);
  font-weight: 800;
}

.vxaui-panel__section .pmpro_invoice-total,
.vxaui-panel__section .pmpro_price_part-total,
.vxaui-panel__section .pmpro_checkout .pmpro_checkout-field-payment-requested-total{
  color: var(--vxaui-text);
  font-weight: 800;
}

.vxaui-panel__section .pmpro_invoice_details,
.vxaui-panel__section .pmpro_invoice-details,
.vxaui-panel__section .pmpro_confirmation_wrap .pmpro_confirmation_message{
  background: rgba(15,23,42,0.03);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 12px;
  padding: 0.85rem 0.95rem;
}

.vxaui-panel__section .pmpro_checkout_gateway .pmpro_checkout_gateway-name,
.vxaui-panel__section .pmpro_checkout_gateway .pmpro_checkout_gateway-description{
  color: var(--vxaui-text);
}

.vxaui-panel__section .pmpro_checkout .pmpro_checkout-fields .pmpro_checkout-field:last-child,
.vxaui-panel__section .pmpro_member_profile_edit-fields > div:last-child,
.vxaui-panel__section .pmpro_checkout-fields > div:last-child{
  margin-bottom: 0;
}

.vxaui-panel__section .pmpro_form .pmpro_asterisk,
.vxaui-panel__section .pmpro_checkout .pmpro_asterisk{
  color: var(--vxaui-primary);
  font-weight: 800;
}

.vxaui-panel__section .pmpro_form .pmpro_checkout-field-required label::after,
.vxaui-panel__section .pmpro_member_profile_edit-fields .pmpro_checkout-field-required label::after{
  content: " *";
  color: var(--vxaui-primary);
  font-weight: 800;
}

.vxaui-panel__section .pmpro_form .pmpro_checkout-field-radio-items,
.vxaui-panel__section .pmpro_form .pmpro_checkout-field-checkbox-items{
  display: grid;
  gap: 0.55rem;
}

.vxaui-panel__section .pmpro_form .pmpro_checkout-field-radio-items label,
.vxaui-panel__section .pmpro_form .pmpro_checkout-field-checkbox-items label{
  margin: 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 12px;
  background: rgba(255,255,255,0.96);
}

.vxaui-panel__section .pmpro_form .pmpro_checkout-field-radio-items label:hover,
.vxaui-panel__section .pmpro_form .pmpro_checkout-field-checkbox-items label:hover{
  border-color: rgba(0,119,237,0.28);
  background: rgba(0,119,237,0.04);
}

.vxaui-panel__section input[type="submit"][name="updateuser"],
.vxaui-panel__section button[name="updateuser"],
.vxaui-panel__section .pmpro_member_profile_edit-fields .pmpro_btn,
.vxaui-panel__section .pmpro_member_profile_edit-fields input[type="submit"]{
  background: var(--vxaui-btn-gradient);
  border-color: var(--vxaui-primary);
  color: #fff;
}

.vxaui-panel__section .pmpro_btn-delete,
.vxaui-panel__section .pmpro_btn-cancel-membership,
.vxaui-panel__section #pmpro_actionlink-cancel,
.vxaui-panel__section a[href*="membership-cancel"]{
  border-color: rgba(220,38,38,0.22);
  background: rgba(220,38,38,0.08);
  color: var(--vxaui-danger);
  box-shadow: none;
}

.vxaui-panel__section .pmpro_btn-delete:hover,
.vxaui-panel__section .pmpro_btn-cancel-membership:hover,
.vxaui-panel__section #pmpro_actionlink-cancel:hover,
.vxaui-panel__section a[href*="membership-cancel"]:hover{
  background: rgba(220,38,38,0.12);
  text-decoration: none;
}

.vxaui-panel__section .pmpro_message a{
  color: inherit;
  font-weight: 800;
  text-decoration: underline;
}

.vxaui-panel__section .pmpro_confirmation_wrap .pmpro_actions_nav,
.vxaui-panel__section .pmpro_invoice .pmpro_actions_nav,
.vxaui-panel__section #pmpro_cancel .pmpro_actions_nav{
  margin-top: 0.9rem;
}

.vxaui-panel__section .pmpro .pmpro_actions_nav .pmpro_btn,
.vxaui-panel__section .pmpro .pmpro_actions_nav input[type="submit"],
.vxaui-panel__section .pmpro .pmpro_actions_nav button{
  min-height: 42px;
}

.vxaui-panel__section .pmpro .pmpro_checkout_gateway .pmpro_btn,
.vxaui-panel__section .pmpro .pmpro_checkout .pmpro_submit .pmpro_btn{
  min-width: 180px;
}

.vxaui-panel__section .pmpro_checkout .pmpro_submit,
.vxaui-panel__section .pmpro_member_profile_edit-fields .pmpro_submit,
.vxaui-panel__section #pmpro_cancel .pmpro_submit{
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin-top: 0.75rem;
}

.vxaui-panel__section .pmpro_confirmation_wrap .pmpro_actions_nav a,
.vxaui-panel__section .pmpro_invoice .pmpro_actions_nav a,
.vxaui-panel__section #pmpro_cancel .pmpro_actions_nav a{
  min-height: 42px;
}

.vxaui-panel__section .pmpro_checkout #pmpro_processing_message,
.vxaui-panel__section .pmpro_form .pmpro_processing_message{
  margin-top: 0.75rem;
  padding: 0.8rem 0.95rem;
  border-radius: 12px;
  background: var(--vxaui-warning-bg);
  border: 1px solid rgba(180,83,9,0.20);
  color: var(--vxaui-warning);
}

.vxaui-panel__section .pmpro_confirmation_wrap,
.vxaui-panel__section .pmpro_invoice,
.vxaui-panel__section #pmpro_cancel{
  overflow-x: auto;
}

@media (max-width: 860px){
  .vxaui-panel__section .pmpro table,
  .vxaui-panel__section table.pmpro_table,
  .vxaui-panel__section .pmpro_invoice table{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 640px){
  .vxaui-panel__section .pmpro_checkout .pmpro_checkout-fields,
  .vxaui-panel__section .pmpro_checkout .pmpro_checkout_gateway,
  .vxaui-panel__section .pmpro_checkout .pmpro_checkout_order,
  .vxaui-panel__section .pmpro_confirmation_wrap,
  .vxaui-panel__section .pmpro_invoice,
  .vxaui-panel__section .pmpro_cancel_wrap,
  .vxaui-panel__section #pmpro_cancel{
    padding: 0.9rem;
  }

  .vxaui-panel__section .pmpro_actions_nav,
  .vxaui-panel__section .pmpro_actions_nav-top,
  .vxaui-panel__section .pmpro_actions_nav-bottom,
  .vxaui-panel__section .pmpro_checkout .pmpro_submit,
  .vxaui-panel__section .pmpro_member_profile_edit-fields .pmpro_submit,
  .vxaui-panel__section #pmpro_cancel .pmpro_submit{
    flex-direction: column;
    align-items: stretch;
  }

  .vxaui-panel__section .pmpro_actions_nav a,
  .vxaui-panel__section .pmpro_actions_nav-top a,
  .vxaui-panel__section .pmpro_actions_nav-bottom a,
  .vxaui-panel__section .pmpro .pmpro_btn,
  .vxaui-panel__section .pmpro input[type="submit"],
  .vxaui-panel__section .pmpro button[type="submit"]{
    width: 100%;
  }
}