/* Avalonpay account surfaces. The dashboard deliberately keeps its own design. */
html[data-theme="light"] body.av-app:not(.wp-dashboard-page) {
  --av-card-surface: #ffffff;
  --av-card-soft: #f5f9ff;
  --av-card-ink: #10254d;
  --av-card-muted: #617492;
  --av-card-line: #dae6f4;
  --av-card-line-strong: #b9d2f0;
  --av-card-shadow: 0 16px 38px -28px rgba(13, 55, 114, .34), 0 3px 10px rgba(11, 64, 134, .035);
}

html[data-theme="dark"] body.av-app:not(.wp-dashboard-page) {
  --av-card-surface: #10233d;
  --av-card-soft: #142b49;
  --av-card-ink: #f0f6ff;
  --av-card-muted: #a5bbd8;
  --av-card-line: #294361;
  --av-card-line-strong: #47709d;
  --av-card-shadow: 0 18px 38px -24px rgba(0, 4, 18, .7), 0 2px 10px rgba(0, 4, 18, .16);
}

html[data-theme] body.av-app:not(.wp-dashboard-page) .wp-main :is(
  .mx-panel, .wp-panel, .modern-card, .card, .kp-panel,
  .period-card, .card-custom, .stat-card, .payment-method-card,
  .image-card, .image-upload-card, .receipt-card, .description-card,
  .devices-card
) {
  background: var(--av-card-surface);
  border: 1px solid var(--av-card-line);
  border-radius: 20px;
  box-shadow: var(--av-card-shadow);
  color: var(--av-card-ink);
}

html[data-theme] body.av-app:not(.wp-dashboard-page) .wp-main :is(.mx-panel, .wp-panel, .modern-card, .card) :is(.mx-panel, .wp-panel, .modern-card, .card, .kp-panel) {
  background: var(--av-card-soft);
  border-color: var(--av-card-line);
  border-radius: 14px;
  box-shadow: none;
}

html[data-theme] body.av-app:not(.wp-dashboard-page) .wp-main .modern-card:hover {
  transform: none;
  box-shadow: var(--av-card-shadow);
}

html[data-theme] body.av-app:not(.wp-dashboard-page) .wp-main :is(.card-header, .card-footer) {
  background: var(--av-card-soft) !important;
  border-color: var(--av-card-line) !important;
  color: var(--av-card-ink) !important;
}

html[data-theme] body.av-app:not(.wp-dashboard-page) .wp-main .card-header {
  padding: 17px 21px;
  font-weight: 700;
  letter-spacing: -.02em;
}

html[data-theme] body.av-app:not(.wp-dashboard-page) .wp-main .card-footer {
  padding: 14px 21px;
}

html[data-theme] body.av-app:not(.wp-dashboard-page) .wp-main :is(.mx-section-heading, .wp-panel-heading) h2,
html[data-theme] body.av-app:not(.wp-dashboard-page) .wp-main :is(.modern-card, .card) :is(.card-title, h4, h5) {
  color: var(--av-card-ink);
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -.035em;
}

html[data-theme] body.av-app:not(.wp-dashboard-page) .wp-main :is(.mx-section-heading, .wp-panel-heading) h2 {
  font-size: clamp(17px, 1.15vw, 20px);
}

html[data-theme] body.av-app:not(.wp-dashboard-page) .wp-main :is(.modern-card, .card) :is(.card-title, h4, h5) {
  font-size: clamp(16px, 1.08vw, 19px);
}

html[data-theme] body.av-app:not(.wp-dashboard-page) .wp-main :is(.mx-section-heading, .wp-panel-heading) p {
  color: var(--av-card-muted);
  line-height: 1.55;
}

html[data-theme] body.av-app:not(.wp-dashboard-page) .wp-main :is(.mx-icon-tile, .wp-icon-tile) {
  border-radius: 13px;
}

/* Financial summaries are tighter and more legible than form panels. */
html[data-theme] body.av-app:not(.wp-dashboard-page) .wp-main :is(.mx-statement-metrics > .mx-panel, .modern-card.stats-card, .period-card, .stat-card) {
  border-color: var(--av-card-line-strong);
  box-shadow: 0 12px 26px -23px rgba(0, 67, 154, .4), 0 2px 8px rgba(0, 49, 121, .04);
}

html[data-theme] body.av-app:not(.wp-dashboard-page) .wp-main :is(.mx-statement-metrics > .mx-panel, .modern-card.stats-card, .period-card, .stat-card) :is(strong, .stats-value) {
  color: var(--av-card-ink);
  font-family: 'Plus Jakarta Sans', Arial, sans-serif !important;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  letter-spacing: -.045em;
}

html[data-theme] body.av-app:not(.wp-dashboard-page) .wp-main .modern-card.stats-card .stats-value {
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.2;
}

html[data-theme] body.av-app:not(.wp-dashboard-page) .wp-main :is(.stats-label, .mx-statement-metrics small) {
  color: var(--av-card-muted);
  font-weight: 600;
}

/* Secondary tiles should read as part of their parent, not as extra floating panels. */
html[data-theme] body.av-app:not(.wp-dashboard-page) .wp-main :is(
  .mx-credential-grid > div, .wp-mini-benefit, .link-item, .ticket-item,
  .kp-panel, .payment-method-card
) {
  background: var(--av-card-soft) !important;
  border: 1px solid var(--av-card-line) !important;
  border-radius: 14px !important;
  box-shadow: none;
}

html[data-theme] body.av-app:not(.wp-dashboard-page) .wp-main :is(.link-item, .ticket-item, .payment-method-card):hover {
  border-color: var(--av-card-line-strong) !important;
  box-shadow: 0 8px 22px -20px rgba(10, 72, 156, .45);
}

html[data-theme] body.av-app:not(.wp-dashboard-page) .wp-main .modern-card:has(.dropdown-menu) {
  overflow: visible;
}

/* The profile identity card has a clear head area; data remains calm below it. */
html[data-theme] body.av-modern-profile .mx-profile-aside {
  isolation: isolate;
  overflow: hidden;
}

html[data-theme] body.av-modern-profile .mx-profile-aside::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 92px;
  z-index: -1;
  background: var(--av-card-soft);
  border-bottom: 1px solid var(--av-card-line);
}

html[data-theme] body.av-modern-profile .mx-profile-picture {
  margin-top: 16px;
  border: 3px solid var(--av-card-surface);
  box-shadow: 0 3px 14px rgba(10, 66, 145, .16);
}

html[data-theme] body.av-modern-profile .mx-details-grid > div {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--av-card-line);
}

html[data-theme] body.av-modern-profile .mx-details-grid dt {
  color: var(--av-card-muted);
  font-weight: 600;
}

html[data-theme] body.av-modern-profile .mx-details-grid dd {
  color: var(--av-card-ink);
  font-weight: 650;
}

/* Account menu and achievements retain their own identities. */
html[data-theme] body.av-menu-page .av-menu-list {
  background: var(--av-card-surface);
  border-color: var(--av-card-line);
  border-radius: 18px;
  box-shadow: var(--av-card-shadow);
}

html[data-theme] body.av-menu-page .av-profile-card {
  border-radius: 19px;
  box-shadow: 0 14px 30px -21px rgba(0, 60, 156, .65);
}

html[data-theme] body.av-modern-awards .mx-award-hero {
  border-color: #3a83e8 !important;
  background: #0b3888 !important;
  color: #fff;
  box-shadow: 0 24px 42px -30px rgba(5, 54, 134, .6);
}

html[data-theme] body.av-modern-awards .mx-award-hero :is(h2, strong, .mx-eyebrow) {
  color: #fff;
}

html[data-theme] body.av-modern-awards .mx-award-hero :is(p, small, .mx-award-illustration) {
  color: #bcd8ff;
}

html[data-theme] body.av-modern-awards .mx-award-card.current {
  border-color: #2981ee;
  box-shadow: 0 12px 28px -20px rgba(10, 96, 213, .35);
}

/* Document verification and checkout builder use their own card classes. */
html[data-theme] body.wp-document-page .wp-main :is(.verify-container, .info-section) {
  background: var(--av-card-surface) !important;
  border: 1px solid var(--av-card-line) !important;
  border-radius: 20px;
  box-shadow: var(--av-card-shadow);
  color: var(--av-card-ink);
}

html[data-theme] body.wp-document-page .wp-main :is(.feature-card, .status-card) {
  background: var(--av-card-soft) !important;
  border: 1px solid var(--av-card-line) !important;
  border-radius: 14px;
  color: var(--av-card-ink);
}

html[data-theme] body.wp-document-page .wp-main .status-pending {
  border-left: 3px solid #d9971d !important;
}

html[data-theme] body.wp-document-page .wp-main .status-approved {
  border-left: 3px solid #15a772 !important;
}

html[data-theme] body.wp-document-page .wp-main .status-rejected {
  border-left: 3px solid #dc5368 !important;
}

/* Public entry pages use the same materials without touching the login animation. */
html[data-theme] body.wp-landing :is(.wp-landing-feature, .wp-hero-float),
html[data-theme] body.wp-auth-page .wp-auth-card {
  border: 1px solid color-mix(in srgb, var(--brand) 15%, var(--border));
  border-radius: 20px;
  box-shadow: 0 16px 36px -28px rgba(11, 60, 134, .35);
}

@media (max-width: 767px) {
  html[data-theme] body.av-app:not(.wp-dashboard-page) .wp-main :is(.mx-panel, .wp-panel, .modern-card, .card, .kp-panel, .period-card, .card-custom, .stat-card) {
    border-radius: 17px;
  }

  html[data-theme] body.av-app:not(.wp-dashboard-page) .wp-main :is(.card-header, .card-footer) {
    padding-inline: 16px;
  }

  html[data-theme] body.av-modern-profile .mx-profile-aside::before {
    height: 83px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] body.av-app:not(.wp-dashboard-page) .wp-main :is(.modern-card, .link-item, .ticket-item, .payment-method-card) {
    transition: none !important;
  }
}