/* MPA NDIS Support Calculator — rebuilt to match the "Support Item & Price
   Search" panel in the client's mockup: big search bar, popular-search
   chips, card-based results with badges and an "Add to Budget" action.
   Region logic + Added Supports summary are folded into this same layout
   since this plugin still needs to produce a running total, which that
   specific mock panel doesn't show on its own (that lives in the separate
   Budget Calculator panel in the mock). */

@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600;700&display=swap');

.mpa-sc {
  --mpa-purple: #6E2C7C;
  --mpa-purple-hover: #5A2266;
  --mpa-purple-light: #F3EAF6;
  --mpa-bg: #F8F9FB;
  --mpa-card: #ffffff;
  --mpa-border: #E4E7EC;
  --mpa-border-accent: rgba(110, 44, 124, 0.32);
  --mpa-text: #25202A;
  --mpa-grey: #6B6670;
  --mpa-success: #2E7D32;
  --mpa-success-bg: #E9F6EA;
  --mpa-info: #2563EB;
  --mpa-info-bg: #EAF1FE;
  --mpa-warning: #B26A00;
  --mpa-warning-bg: #FFF3E0;
  --mpa-error: #B3261E;
  --mpa-radius-lg: 16px;
  --mpa-radius-md: 10px;
  --mpa-shadow: 0 1px 2px rgba(20,10,30,0.04), 0 4px 16px rgba(20,10,30,0.06);


  font-family: inherit;
  color: var(--mpa-text);
  max-width: 1180px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.5;
}
.mpa-sc * { box-sizing: border-box; }

.mpa-sc-loading, .mpa-sc-error { padding: 2.5rem 1rem; text-align: center; color: var(--mpa-grey); font-size: 1rem; }
.mpa-sc-error { color: var(--mpa-error); }

/* ---- intro: title, description, "how it works" ---- */
.mpa-sc-intro {
  position: relative;
  overflow: hidden;
  padding: 0.85rem 1.5rem;
  margin-bottom: 0.85rem;
  border-radius: var(--mpa-radius-lg);
  background: linear-gradient(150deg, #FBFAFC 0%, #F4EEF7 100%);
  border: 1px solid var(--mpa-border);
  isolation: isolate;
}
.mpa-sc-intro-glow {
  position: absolute;
  z-index: -1;
  width: 340px;
  height: 340px;
  right: -140px;
  top: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(190,141,207,.30), transparent 70%);
  filter: blur(10px);
  animation: mpaScGlowFloat 7s ease-in-out infinite;
}
@keyframes mpaScGlowFloat {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(-18px, 22px, 0) scale(1.08); }
}

.mpa-sc-intro-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(110,44,124,.20);
  background: rgba(255,255,255,.75);
  color: var(--mpa-purple);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.mpa-sc-intro-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mpa-purple);
  box-shadow: 0 0 0 0 rgba(110,44,124,.55);
  animation: mpaScPulse 1.8s infinite;
}
@keyframes mpaScPulse {
  70%  { box-shadow: 0 0 0 8px rgba(110,44,124,0); }
  100% { box-shadow: 0 0 0 0 rgba(110,44,124,0); }
}

.mpa-sc-intro-title {
  margin: 0.4rem 0 0;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 800;
  text-transform: lowercase;
  color: var(--mpa-text);
}
.mpa-sc-intro-title-accent {
  display: inline;
  background: linear-gradient(90deg, var(--mpa-purple), #A35FB6, var(--mpa-purple));
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: mpaScGradient 5s ease infinite;
}
@keyframes mpaScGradient {
  0%, 100% { background-position: 0%; }
  50%      { background-position: 100%; }
}

.mpa-sc-intro-desc {
  max-width: 620px;
  margin: 0;
  color: var(--mpa-grey);
  font-size: 0.85rem;
  line-height: 1.55;
}

/* ---- main content / sidebar layout ---- */
.mpa-sc-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: start;
}
.mpa-sc-layout-main { min-width: 0; }

.mpa-sc-sidebar {
  position: static;
}

/* ---- sidebar floating "how it works" tips card ---- */
.mpa-sc-intro-card {
  position: relative;
  padding: 1.5rem;
  border-radius: var(--mpa-radius-lg);
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 24px 55px rgba(57,24,65,.14);
  backdrop-filter: blur(14px);
  animation-name: mpaScIntroEnter, mpaScCardFloat;
  animation-duration: .7s, 6s;
  animation-timing-function: cubic-bezier(.2,.8,.2,1), ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards, none;
  animation-delay: .3s, .7s;
}
@keyframes mpaScCardFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

.mpa-sc-intro-card-label {
  display: block;
  margin-bottom: 1rem;
  color: #958F99;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.mpa-sc-intro-steps {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.mpa-sc-intro-step {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.7rem;
  border-radius: var(--mpa-radius-md);
  background: #F9F7FB;
  border: 1px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.mpa-sc-intro-step:hover {
  transform: translateX(4px);
  background: #fff;
  box-shadow: 0 10px 22px rgba(57,24,65,.09);
  border-color: rgba(110,44,124,.20);
}
.mpa-sc-intro-step-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(145deg, #8D4DA0, #6E2C7C);
  box-shadow: 0 6px 14px rgba(110,44,124,.22);
  transition: transform .35s cubic-bezier(.2,1.5,.3,1);
}
.mpa-sc-intro-step-icon svg { width: 16px; height: 16px; }
.mpa-sc-intro-step:hover .mpa-sc-intro-step-icon {
  transform: rotate(-8deg) scale(1.1);
}
.mpa-sc-intro-step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mpa-sc-intro-step-body strong {
  font-size: 0.82rem;
  color: var(--mpa-text);
  letter-spacing: -0.01em;
}
.mpa-sc-intro-step-body span {
  font-size: 0.75rem;
  color: var(--mpa-grey);
  line-height: 1.4;
}

/* entrance animation, staggered */
.mpa-sc-intro-in {
  opacity: 0;
  transform: translateY(16px);
  animation: mpaScIntroEnter .7s cubic-bezier(.2,.8,.2,1) forwards;
}
.mpa-sc-intro-eyebrow.mpa-sc-intro-in { animation-delay: .05s; }
.mpa-sc-intro-title.mpa-sc-intro-in { animation-delay: .15s; }
.mpa-sc-intro-desc.mpa-sc-intro-in { animation-delay: .25s; }

@keyframes mpaScIntroEnter {
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 960px) {
  .mpa-sc-layout { grid-template-columns: 1fr; }
  .mpa-sc-sidebar { position: static; }
}

@media (max-width: 720px) {
  .mpa-sc-intro { padding: 0.75rem 1rem; }
  .mpa-sc-intro-desc { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mpa-sc-intro-glow,
  .mpa-sc-intro-dot,
  .mpa-sc-intro-title-accent,
  .mpa-sc-intro-in,
  .mpa-sc-intro-card {
    animation: none !important;
  }
  .mpa-sc-intro-in, .mpa-sc-intro-card { opacity: 1 !important; transform: none !important; }
  .mpa-sc-intro-step { transition: none !important; }
}

/* ---- search card: 2-step category → item flow ---- */
.mpa-sc-search-card {
  background: var(--mpa-card);
  border: 1px solid var(--mpa-border-accent);
  border-radius: var(--mpa-radius-lg);
  box-shadow: var(--mpa-shadow);
  padding: 1.75rem;
  margin-bottom: 0.85rem;
}
.mpa-sc-category-field,
.mpa-sc-item-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mpa-sc-category-field { margin-bottom: 0.5rem; }
.mpa-sc-category-field label,
.mpa-sc-item-field label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--mpa-text) !important;
}
.mpa-sc-region-style-label {
  font-size: 19px !important;
  font-weight: 600 !important;
  font-family: 'Crimson Text', serif !important;
  color: var(--mpa-text) !important;
}
.mpa-sc-active-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--mpa-purple-light);
  border-radius: var(--mpa-radius-md);
  padding: 0.5rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mpa-purple);
}
.mpa-sc-active-category[hidden] { display: none !important; }
.mpa-sc-active-category-change {
  background: none !important;
  border: none !important;
  color: #000 !important;
  text-decoration: underline !important;
  font-size: 19px;
  font-family: 'Crimson Text', serif;
  font-weight: 600 !important;
  cursor: pointer !important;
  padding: 0 !important;
  flex: 0 0 auto;
  white-space: nowrap;
}
.mpa-sc-active-category-change:hover { color: var(--mpa-purple-hover) !important; }
.mpa-sc-category-field select {
  border: 1.5px solid var(--mpa-border-accent) !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 999px;
  padding: 0 1.4rem;
  font-size: 1.05rem;
  background: #fff !important;
  color: var(--mpa-text) !important;
  height: 58px;
  min-height: 58px;
  width: 100%;
  font-family: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.mpa-sc-category-field select:focus {
  border-color: var(--mpa-purple) !important;
  box-shadow: 0 0 0 4px var(--mpa-purple-light) !important;
}
.mpa-sc-mini-field { display: flex; flex-direction: column; gap: 0.35rem; }
.mpa-sc-mini-field label {
  font-size: 19px;
  font-weight: 600;
  font-family: 'Crimson Text', serif;
  color: var(--mpa-text) !important;
  white-space: nowrap;
  text-align: left;
}
.mpa-sc-mini-field select {
  border: 1px solid var(--mpa-border-accent) !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 999px;
  padding: 0.3rem 1.9rem 0.3rem 0.85rem;
  font-size: 0.82rem;
  background: #fff !important;
  color: var(--mpa-text) !important;
  min-height: 32px;
  min-width: 110px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236E2C7C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 12px;
}
.mpa-sc-mini-field select:focus {
  border-color: var(--mpa-purple) !important;
  box-shadow: 0 0 0 3px var(--mpa-purple-light) !important;
}
.mpa-sc-search-input-wrap {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.75rem;
  border: 1.5px solid var(--mpa-border-accent) !important;
  border-radius: 999px;
  padding: 0 1.4rem;
  background: #fff !important;
  height: 58px;
  min-height: 58px;
  transition: border-color .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.mpa-sc-search-input-wrap:focus-within {
  border-color: var(--mpa-purple) !important;
  box-shadow: 0 0 0 4px var(--mpa-purple-light) !important;
}
/* Item box is inert until a category is chosen — dim it and swap the
   cursor so it visibly reads as "not yet" rather than looking broken. */
.mpa-sc-search-input-wrap:has(input:disabled) {
  background: var(--mpa-bg) !important;
  opacity: 0.75;
}
.mpa-sc-search-input-wrap input:disabled { cursor: not-allowed; }
.mpa-sc-search-icon {
  flex: 0 0 auto;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--mpa-purple);
  height: 100%;
  cursor: pointer;
}
.mpa-sc-search-input-wrap:has(input:disabled) .mpa-sc-search-icon {
  cursor: not-allowed;
}
.mpa-sc-search-icon svg { width: 20px; height: 20px; display: block; }
/* The input's vertical position is pinned independently of the flex
   centering above (some themes override flex alignment on form elements
   with higher-specificity rules), so we also zero out line-height/margin
   and give the input the same explicit height as its wrapper — between
   the two, the text can't end up sitting off-center. */
.mpa-sc-search-input-wrap input[type="text"],
.mpa-sc-search-input-wrap input {
  flex: 1 1 auto !important;
  min-width: 0;
  display: block !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  line-height: normal !important;
  vertical-align: middle !important;
  font-size: 1.05rem;
  font-family: inherit;
  color: var(--mpa-text) !important;
  order: 1;
}
.mpa-sc-search-icon { order: 2; }

/* ---- type-ahead dropdown ----
   Anchored to .mpa-sc-search-input-wrap (its nearest positioned ancestor)
   rather than the outer card, so "top: 100%" always sits flush under the
   input regardless of the card's own padding — including the smaller
   padding used on the 480px breakpoint below. Floats over the page
   instead of pushing content down, so results appear as the person types
   without any page-level scrolling. */
.mpa-sc-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 0.6rem);
  top: auto;
  z-index: 40;
  background: #fff;
  border: 1px solid var(--mpa-border);
  border-radius: var(--mpa-radius-md);
  box-shadow: 0 -10px 30px rgba(20,10,30,0.14);
  max-height: 320px;
  overflow-y: auto;
  padding: 0.4rem;
}
.mpa-sc-dropdown[hidden] { display: none !important; }

.mpa-sc-dropdown-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem;
  width: 100%;
  text-align: left;
  background: none !important;
  border: none !important;
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  cursor: pointer !important;
  font-family: inherit;
}
.mpa-sc-dropdown-item:hover,
.mpa-sc-dropdown-item-active {
  background: var(--mpa-purple-light) !important;
}
.mpa-sc-dropdown-item-main { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.mpa-sc-dropdown-item-name { font-weight: 600; font-size: 0.9375rem; color: var(--mpa-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpa-sc-dropdown-item-name .mpa-sc-legacy-badge {
  display: inline-block; font-size: 0.65rem; font-weight: 700;
  color: #7A4A00; background: var(--mpa-warning-bg); padding: 0.05rem 0.4rem;
  border-radius: 999px; margin-left: 0.35rem; vertical-align: middle;
}
.mpa-sc-dropdown-item-meta { font-size: 0.8rem; color: var(--mpa-grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpa-sc-dropdown-item-price { flex: 0 0 auto; font-size: 0.85rem; font-weight: 600; color: var(--mpa-purple); white-space: nowrap; }
.mpa-sc-dropdown-empty,
.mpa-sc-dropdown-more,
.mpa-sc-dropdown-hint {
  padding: 0.85rem 0.9rem;
  font-size: 0.875rem;
  color: var(--mpa-grey);
  text-align: center;
}
.mpa-sc-dropdown-hint {
  text-align: left;
  border-bottom: 1px solid var(--mpa-border);
  margin-bottom: 0.2rem;
  padding: 0.6rem 0.75rem 0.7rem;
}

/* ---- selected-item preview card ----
   Sits in place of the old full results list: one card for whatever was
   just picked from the dropdown, with its own Add to Budget action. */
.mpa-sc-preview-card { margin-bottom: 1.5rem; }

.mpa-sc-region-required {
  font-size: 0.9rem; font-weight: 600; color: #7A4A00;
  background: var(--mpa-warning-bg); border-radius: var(--mpa-radius-md);
  padding: 0.6rem 0.9rem; margin-top: 1rem;
}

/* ---- result / preview card ----
   Dark-purple background + white text, per the supplied colour swatch.
   Everything inside (icon chip, item-number pill, badges, footer divider,
   and the "Add to Budget" button) uses the same MPA purple/navy palette as
   the rest of the page — white card, purple icon and accents, dark text. */
.mpa-sc-result-card {
  background: var(--mpa-card);
  border: 1px solid var(--mpa-border);
  border-radius: var(--mpa-radius-lg);
  box-shadow: var(--mpa-shadow);
  padding: 1.4rem 1.5rem;
  color: var(--mpa-text);
  transition: box-shadow .12s ease, border-color .12s ease;
}
.mpa-sc-result-card:hover { border-color: var(--mpa-purple-light); box-shadow: 0 4px 18px rgba(110,44,124,0.14); }

.mpa-sc-result-top { display: flex; gap: 1rem; align-items: flex-start; }
.mpa-sc-result-icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--mpa-purple-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--mpa-purple);
}
.mpa-sc-result-icon svg { width: 22px; height: 22px; }

.mpa-sc-result-main { flex: 1 1 auto; min-width: 0; }
.mpa-sc-result-name { font-weight: 700; font-size: 1.05rem; color: var(--mpa-text); }
.mpa-sc-result-name .mpa-sc-legacy-badge {
  display: inline-block; font-size: 0.6875rem; font-weight: 700;
  color: #7A4A00; background: var(--mpa-warning-bg); padding: 0.1rem 0.5rem;
  border-radius: 999px; margin-left: 0.4rem; vertical-align: middle;
}
.mpa-sc-result-item-number {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--mpa-purple-light);
  color: var(--mpa-purple);
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
}
.mpa-sc-result-meta-extra { font-size: 0.8125rem; color: var(--mpa-grey) !important; margin-left: 0.5rem; }

.mpa-sc-result-price { flex: 0 0 auto; text-align: right; }
.mpa-sc-result-price-amount { font-weight: 700; font-size: 1.15rem; color: var(--mpa-purple); white-space: nowrap; }
.mpa-sc-result-price-label { font-size: 0.75rem; color: var(--mpa-grey); margin-top: 0.1rem; }

.mpa-sc-badges { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.9rem 0 0.75rem; }
.mpa-sc-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.75rem; font-weight: 600;
  padding: 0.25rem 0.65rem 0.25rem 0.5rem; border-radius: 999px;
}
.mpa-sc-badge svg { width: 13px; height: 13px; flex: 0 0 auto; }
.mpa-sc-badge-travel { background: var(--mpa-success-bg); color: var(--mpa-success); }
.mpa-sc-badge-nonf2f { background: var(--mpa-info-bg); color: var(--mpa-info); }
.mpa-sc-badge-cancel { background: var(--mpa-warning-bg); color: var(--mpa-warning); }
.mpa-sc-badge-quote { background: var(--mpa-warning-bg); color: var(--mpa-warning); }

.mpa-sc-result-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--mpa-border);
}
.mpa-sc-more-info-toggle {
  background: none; border: none; color: var(--mpa-purple);
  font-size: 0.875rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0;
}
.mpa-sc-more-info-toggle svg { width: 14px; height: 14px; }
.mpa-sc-result-footer .mpa-sc-btn-primary {
  background: var(--mpa-purple) !important;
  color: #fff !important;
}
.mpa-sc-result-footer .mpa-sc-btn-primary:hover { background: var(--mpa-purple-hover) !important; }

/* ---- Support Item Details drawer ---- */
.mpa-sc-drawer-overlay {
  position: fixed; inset: 0; background: rgba(20,10,30,0.45);
  display: flex; justify-content: flex-end;
  z-index: 9998;
}
.mpa-sc-drawer {
  background: #fff; width: 100%; max-width: 420px; height: 100%;
  overflow-y: auto; padding: 1.75rem;
  box-shadow: -8px 0 30px rgba(0,0,0,0.15);
  animation: mpaScDrawerIn .18s ease;
}
@keyframes mpaScDrawerIn { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.mpa-sc-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.mpa-sc-drawer-head h3 { font-size: 1.25rem; font-weight: 700; margin: 0; color: var(--mpa-text); }
.mpa-sc-drawer-close {
  background: none; border: none; font-size: 1.5rem; line-height: 1;
  color: var(--mpa-grey); cursor: pointer; padding: 0.25rem 0.5rem; border-radius: 6px;
}
.mpa-sc-drawer-close:hover { background: #F2F3F5; color: var(--mpa-text); }
.mpa-sc-drawer-title { font-weight: 700; font-size: 1.15rem; color: var(--mpa-text); line-height: 1.35; }
.mpa-sc-drawer-item-number {
  display: inline-block; margin-top: 0.6rem; font-size: 0.8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #F2F3F5; color: var(--mpa-text); border-radius: 6px; padding: 0.25rem 0.6rem;
}
.mpa-sc-drawer-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.mpa-sc-drawer-price { text-align: right; flex: 0 0 auto; }
.mpa-sc-drawer-price-amount { font-weight: 700; font-size: 1.3rem; color: var(--mpa-text); }
.mpa-sc-drawer-price-label { font-size: 0.8rem; color: var(--mpa-grey); }
.mpa-sc-drawer-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.mpa-sc-drawer-section { padding: 1rem 0; border-top: 1px solid var(--mpa-border); }
.mpa-sc-drawer-section:first-of-type { border-top: 1px solid var(--mpa-border); }
.mpa-sc-drawer-section dt { font-weight: 700; font-size: 0.9rem; color: var(--mpa-text); margin-bottom: 0.3rem; }
.mpa-sc-drawer-section dd { margin: 0; font-size: 0.9rem; color: var(--mpa-grey); }
.mpa-sc-drawer-note {
  font-size: 0.8rem; color: var(--mpa-grey); background: #F8F9FB;
  border-radius: var(--mpa-radius-md); padding: 0.75rem 0.9rem; margin: 1rem 0;
}
.mpa-sc-drawer-actions { margin-top: 1.25rem; }

/* ---- buttons ----
   !important on the visual properties (background/color/border) is
   deliberate: many themes carry a global "button, .btn { background:none;
   border:none; color:inherit }" reset that otherwise wins on specificity
   and leaves a same-size, invisible button behind — text and fill both
   gone, but still clickable, which is easy to miss during a site review
   and looks exactly like a blank white box where "Add to Budget" should
   be. These rules make sure the button's own look always wins. */
.mpa-sc-btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-height: 42px; padding: 0.55rem 1.25rem;
  border-radius: var(--mpa-radius-md); font-weight: 600 !important; font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer !important; border: none;
  line-height: normal;
  text-decoration: none !important;
  transition: background-color .12s ease, box-shadow .12s ease, transform .04s ease;
}
.mpa-sc-btn:active { transform: translateY(1px); }
.mpa-sc-btn-primary {
  background: var(--mpa-purple) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(110,44,124,0.25);
}
.mpa-sc-btn-primary:hover { background: var(--mpa-purple-hover) !important; }
.mpa-sc-btn-primary:disabled { background: #D8C9DE !important; color: #fff !important; box-shadow: none; cursor: not-allowed !important; }
.mpa-sc-btn-secondary {
  background: #fff !important;
  color: var(--mpa-purple) !important;
  border: 1.5px solid var(--mpa-purple) !important;
}
.mpa-sc-btn-secondary:hover { background: var(--mpa-purple-light) !important; }
.mpa-sc-btn-ghost {
  background: none !important;
  color: var(--mpa-grey) !important;
  border: none !important;
  padding: 0.5rem 0.75rem;
  font-weight: 500 !important;
}
.mpa-sc-btn-ghost:hover { color: var(--mpa-error) !important; }
.mpa-sc-btn-full { width: 100%; }

/* ---- MPA tip ---- */
.mpa-sc-tip {
  display: flex; gap: 0.75rem; align-items: flex-start;
  background: var(--mpa-info-bg); border: 1px solid #DCEAFE;
  border-radius: var(--mpa-radius-md); padding: 0.9rem 1.1rem;
  font-size: 0.9rem; color: #1E3A8A; margin-bottom: 1.5rem;
}
/* Same "author display beats [hidden]" issue as the modal overlay above —
   the class's own display:flex otherwise keeps this box on screen even
   while its "hidden" attribute is set once a search is active. */
.mpa-sc-tip[hidden] { display: none !important; }
.mpa-sc-tip-icon { font-size: 1.1rem; line-height: 1.3; }

/* ---- Added Supports summary card ---- */
.mpa-sc-summary-card {
  scroll-margin-top: 16px;
  background: var(--mpa-card);
  border: 1px solid var(--mpa-border-accent);
  border-radius: var(--mpa-radius-lg);
  box-shadow: var(--mpa-shadow);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}

.mpa-sc-summary-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 1rem;
  color: var(--mpa-text);
}

.mpa-sc-added-lines {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mpa-sc-category-group {
  width: 100%;
  margin: 0;
}

.mpa-sc-added-table {
  width: 100%;
  border: 1px solid var(--mpa-border);
  border-radius: var(--mpa-radius-md);
  overflow: hidden;
  background: var(--mpa-card);
}

/* Safety net for narrow containers or unusually long unit-price/total
   text: the grid's column minimums (below) can legitimately need more
   width than the card has to give. Scrolling this inner wrapper keeps
   every row's text inside its own column — never bleeding into the next
   one — instead of the columns silently overlapping. The outer
   .mpa-sc-added-table above keeps overflow:hidden purely so its rounded
   corners still clip the category title/head/rows correctly. */
.mpa-sc-added-table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
}
.mpa-sc-added-table-head,
.mpa-sc-added-table-body {
  min-width: fit-content;
}

/* Category is now part of the table so its left edge and typography
   line up exactly with the table heading and item rows. */
.mpa-sc-category-title {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0.65rem 0.9rem;
  background: var(--mpa-purple-light);
  color: var(--mpa-purple);
  border-bottom: 1px solid var(--mpa-border);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.2;
}

.mpa-sc-added-table-head,
.mpa-sc-added-line {
  display: grid;
  grid-template-columns:
    minmax(120px, 1.9fr)
    minmax(88px, 0.8fr)
    minmax(96px, 0.85fr)
    minmax(140px, 0.85fr)
    minmax(90px, 0.7fr)
    minmax(36px, 0.65fr)
    minmax(38px, auto);
  column-gap: 1rem;
  align-items: center !important;
}
/* Every direct cell in an added-support row gets its own explicit
   min-height + flex centering, matching the Hours Per Week cell — relying
   only on the grid container's align-items:center wasn't enough once a
   row grows taller than one line (e.g. a wrapped item name), because
   plain text cells like Total have no box height of their own to centre
   against consistently. This makes every cell self-centre regardless of
   row height or what the parent grid does. */
.mpa-sc-added-line > * {
  display: flex !important;
  align-items: center !important;
  min-height: 40px;
}

.mpa-sc-added-table-head {
  min-height: 54px;
  padding: 0.85rem 0.75rem;
  background: var(--mpa-purple);
  color: #fff;
  font-size: calc(0.78rem + 3px);
  font-weight: 700;
  line-height: 1.15;
}

.mpa-sc-added-table-head > div {
  display: flex;
  align-items: center;
  min-height: 30px;
}

.mpa-sc-added-table-head > div:nth-child(5) {
  justify-content: flex-start;
}

.mpa-sc-added-table-head > div:nth-child(4) {
  white-space: nowrap;
}

.mpa-sc-added-table-body {
  display: flex;
  flex-direction: column;
}

.mpa-sc-added-line {
  min-height: 76px;
  padding: 0.9rem 0.75rem;
  border-top: 1px solid var(--mpa-border);
  background: var(--mpa-card);
  transition: background 0.2s ease;
}

.mpa-sc-added-line:hover {
  background: var(--mpa-purple-light);
}

.mpa-sc-added-line-main {
  min-width: 0;
}

.mpa-sc-added-line-name {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--mpa-text);
  overflow-wrap: anywhere;
  line-height: 1.35;
}

/* Item Name may wrap in the print table, but it must never exceed 3 lines. */
@media print {
  .mpa-sc-added-line-name {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
}

.mpa-sc-added-line-meta {
  display: none;
}

.mpa-sc-added-line-number {
  font-size: 0.82rem;
  color: var(--mpa-grey);
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.mpa-sc-added-line-unit-price {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mpa-purple);
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.mpa-sc-added-line-hours {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start;
  align-self: center !important;
  justify-self: stretch;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mpa-sc-added-line-hours input {
  display: block !important;
  width: 100%;
  max-width: 92px;
  min-width: 68px;
  min-height: 30px;
  height: 30px;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--mpa-border) !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1.2 !important;
  background: #fff !important;
  color: var(--mpa-text) !important;
  text-align: left;
  box-sizing: border-box !important;
}

.mpa-sc-added-line-hours input:focus {
  border-color: var(--mpa-purple) !important;
  box-shadow: 0 0 0 3px var(--mpa-purple-light) !important;
}

/* Keep Hours Per Week vertically centred in the same summary row as
   Item Name, Item Number, Unit Price and Total. Theme-level input
   margins must not pull this control toward the top of the row. */
.mpa-sc-added-line-hours,
.mpa-sc-added-line-hours input {
  box-sizing: border-box !important;
}
.mpa-sc-added-line-hours input {
  margin: 0 !important;
  align-self: center !important;
}

.mpa-sc-added-line-weekly-total {
  font-weight: 600;
  color: var(--mpa-text);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.mpa-sc-added-line-total {
  font-weight: 700;
  color: var(--mpa-purple);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.mpa-sc-line-remove {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px;
  height: 34px;
  padding: 0 !important;
  border: 1px solid var(--mpa-border) !important;
  border-radius: 50%;
  background: #fff !important;
  color: var(--mpa-grey) !important;
  cursor: pointer !important;
  justify-self: center;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.mpa-sc-line-remove svg { width: 16px; height: 16px; display: block; }

.mpa-sc-line-remove:hover {
  background: #FDECEC !important;
  border-color: var(--mpa-error) !important;
  color: var(--mpa-error) !important;
}

.mpa-sc-added-line-new {
  animation: mpaScLineFlash 1.6s ease;
}

@keyframes mpaScLineFlash {
  0% { background: var(--mpa-purple-light); }
  100% { background: var(--mpa-card); }
}

.mpa-sc-priceless-inline {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--mpa-warning);
  display: block;
  text-align: right;
}

/* Totals row: grid-aligned to the same column template as the Added
   Supports table above it (with matching column-gap and left/right
   padding equal to the table's own cell padding), so Grand Total lines
   up exactly under the Sub Total column instead of sitting flush
   against the card's outer edge — which, because the table reserves a
   narrow trailing column for its (variable-width) delete-icon, used to
   land noticeably further right than Sub Total. */
.mpa-sc-summary-totals-row {
  display: grid;
  grid-template-columns:
    minmax(120px, 1.9fr)
    minmax(88px, 0.8fr)
    minmax(96px, 0.85fr)
    minmax(98px, 0.7fr)
    minmax(90px, 0.7fr)
    minmax(36px, 0.65fr)
    minmax(38px, auto);
  column-gap: 0.4rem;
  align-items: center !important;
  padding: 1.25rem 0.75rem 0;
  margin-top: 1.25rem;
  border-top: 1px solid var(--mpa-border);
}

.mpa-sc-weeks-field {
  grid-column: 1 / 2;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start;
  gap: 0.65rem;
  min-height: 30px;
  margin: 0 !important;
  padding: 0 !important;
}

.mpa-sc-weeks-field label {
  display: inline-flex !important;
  align-items: center !important;
  height: 30px;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 30px !important;
  white-space: nowrap;
  color: var(--mpa-text);
}

.mpa-sc-weeks-field input {
  width: 76px;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--mpa-border) !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: var(--mpa-radius-md);
  background: #fff !important;
  color: var(--mpa-text) !important;
  text-align: center !important;
  line-height: 30px !important;
  vertical-align: middle !important;
  font-size: 0.85rem;
  font-family: inherit;
  box-sizing: border-box !important;
}

.mpa-sc-weeks-field input:focus {
  border-color: var(--mpa-purple) !important;
  box-shadow: 0 0 0 3px var(--mpa-purple-light) !important;
}

/* "Grand Total" (label) and its dollar value are two separate grid cells
   rather than one flex group, so each can be pinned to an exact column:
   the label's right edge lands exactly on Total Per Week's right edge.
   The value is left-aligned (justify-self: start) in the Sub Total
   column to match how each row's own Sub Total figure is left-aligned in
   that same column — so the two line up vertically instead of one being
   pushed to the column's right edge while the other sits at its left. */
.mpa-sc-grand-total-label {
  grid-column: 3 / 6;
  justify-self: end;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--mpa-text);
  white-space: nowrap;
}

.mpa-sc-grand-total-value {
  grid-column: 6 / 7;
  justify-self: start;
}

.mpa-sc-grand-total-value strong {
  color: var(--mpa-purple);
  font-size: 1.25rem;
  line-height: 1.2;
}

.mpa-sc-priceless-note {
  display: block;
  font-size: 0.72rem;
  color: var(--mpa-warning);
  margin-top: 0.35rem;
  text-align: right;
  max-width: 100%;
}

.mpa-sc-summary-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.mpa-sc-disclaimer {
  font-size: 0.75rem;
  color: var(--mpa-grey);
  margin: 1.1rem 0 0;
}

/* ---- modal ---- */

.mpa-sc-modal-overlay {
  position: fixed; inset: 0; background: rgba(20,10,30,0.5);
  display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 1rem;
}
/* The class rule above always wins over the browser's default
   "[hidden]{display:none}" (author CSS beats user-agent CSS at equal
   specificity), so without this the overlay is permanently in the DOM
   at display:flex and silently eats clicks on whatever's underneath it,
   even while the "hidden" attribute is set. */
.mpa-sc-modal-overlay[hidden] { display: none !important; }
.mpa-sc-modal { background: #fff; border-radius: var(--mpa-radius-lg); max-width: 400px; width: 100%; padding: 1.75rem 1.75rem 1.5rem; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.25); }
.mpa-sc-modal-close { position: absolute; top: 0.75rem; right: 0.75rem; background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--mpa-grey); cursor: pointer; padding: 0.25rem 0.5rem; border-radius: 6px; }
.mpa-sc-modal-close:hover { background: #F2F3F5; color: var(--mpa-text); }
.mpa-sc-modal-message { font-size: 1.05rem; font-weight: 600; color: var(--mpa-text); margin: 0.5rem 0 1.5rem; padding-right: 1rem; }
.mpa-sc-modal-actions { display: flex; justify-content: flex-end; }

/* Between the full desktop grid and the 480px stacked-card layout, this
   keeps the grid columns narrow enough to avoid the horizontal scrollbar
   when the plugin sits in a narrower theme column/sidebar layout than the
   full 900px max-width. */
@media (max-width: 760px) {
  .mpa-sc-added-table-head,
  .mpa-sc-added-line {
    grid-template-columns:
      minmax(130px, 1.9fr)
      minmax(76px, 0.8fr)
      minmax(82px, 0.85fr)
      minmax(76px, 0.7fr)
      minmax(78px, 0.7fr)
      minmax(82px, 0.75fr)
      minmax(34px, auto);
    column-gap: 0.3rem;
  }
  .mpa-sc-added-table-head { padding: 0.75rem 0.6rem; }
  .mpa-sc-added-line { padding: 0.75rem 0.6rem; }
}

@media (max-width: 480px) {
  .mpa-sc-search-card, .mpa-sc-summary-card, .mpa-sc-result-card { padding: 1.15rem; border-radius: 14px; }
  .mpa-sc-dropdown { max-height: 300px; }
  .mpa-sc-dropdown-item { padding: 0.6rem 0.6rem; }
  .mpa-sc-dropdown-item-price { font-size: 0.8rem; }
  .mpa-sc-result-top { flex-wrap: wrap; }
  .mpa-sc-result-price { text-align: left; margin-left: 60px; }
  .mpa-sc-grand-total-label,
  .mpa-sc-grand-total-value { margin-left: 0; text-align: left; }
  .mpa-sc-added-table {
    border: 1px solid var(--mpa-border);
    overflow: hidden;
    background: var(--mpa-card);
  }
  .mpa-sc-category-title {
    min-height: 40px;
    padding: 0.6rem 0.8rem;
    font-size: 0.75rem;
  }
  .mpa-sc-added-table-head { display: none; }
  .mpa-sc-added-table-body { gap: 0; }
  .mpa-sc-added-line {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name name"
      "number number"
      "price price"
      "hours weekly"
      "total total"
      "delete delete";
    gap: 0.45rem 0.75rem;
    border-top: 1px solid var(--mpa-border);
    border-radius: 0;
    padding: 0.85rem;
    min-height: 0;
  }
  .mpa-sc-added-line-main { grid-area: name; }
  .mpa-sc-added-line-number { grid-area: number; }
  .mpa-sc-added-line-unit-price { grid-area: price; }
  .mpa-sc-added-line-hours { grid-area: hours; }
  .mpa-sc-added-line-weekly-total { grid-area: weekly; justify-content: flex-end; text-align: right; }
  .mpa-sc-added-line-weekly-total::before { content: "Weekly: "; font-weight: 400; color: var(--mpa-grey); margin-right: 0.25rem; }
  .mpa-sc-added-line-total { grid-area: total; justify-content: flex-end; text-align: right; }
  .mpa-sc-added-line-total::before { content: "Annual: "; font-weight: 400; color: var(--mpa-grey); margin-right: 0.25rem; }
  .mpa-sc-line-remove { grid-area: delete; justify-self: flex-start; }
  .mpa-sc-category-title { margin-top: 0; }
  .mpa-sc-summary-totals-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center !important;
    padding: 1.25rem 0 0;
  }
  .mpa-sc-weeks-field {
    grid-column: auto;
    width: 100%;
    justify-content: flex-start;
  }
  .mpa-sc-grand-total-label,
  .mpa-sc-grand-total-value {
    grid-column: auto;
  }
  .mpa-sc-grand-total-label {
    width: 100%;
    text-align: right;
  }
  .mpa-sc-grand-total-value {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ---- print-only header — hidden on screen, shown only inside @media
   print below. Gives the printed page a clean branded top instead of
   jumping straight into "Added Supports (N)". ---- */
.mpa-sc-print-header { display: none; }
.mpa-sc-print-strapline { display: none; }
.mpa-sc-print-logo { display: none; }

/* ---- print: only the Added Supports card should ever hit paper ----
   Search UI, result cards, chips, modals and drawers are all working
   documents for building the list — the client only wants the finished
   Added Supports summary on the printed page. */
@media print {
  /* display:none removes these from layout entirely. The previous
     visibility:hidden approach kept every hidden element's box taking up
     its full on-screen height, so the page underneath the summary card
     was still as tall as the whole search+results UI — that's what was
     forcing 7 mostly-blank printed pages instead of one. */
  [data-mpa-sc-app] > *:not(.mpa-sc-summary-card),
  .mpa-sc-loading,
  .mpa-sc-error,
  .mpa-sc-drawer-overlay,
  .mpa-sc-modal-overlay {
    display: none !important;
  }
  .mpa-sc-summary-card {
    box-shadow: none;
    border: none;
    margin: 0;
    padding: 0.5rem 0;
  }
  .mpa-sc-summary-actions,
  [data-line-remove],
  .mpa-sc-line-remove {
    display: none !important;
  }

  /* The branded header: text on the left (wordmark, title, generated-date
     /catalogue line), the MPA logo large and clearly visible on the
     right, then a clean rule underneath separating it from the table. */
  .mpa-sc-print-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 20px;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--mpa-purple);
  }
  .mpa-sc-print-header-text {
    flex: 1 1 auto;
    min-width: 0;
  }
  .mpa-sc-print-logo {
    display: block !important;
    flex: 0 0 auto;
    height: 82px;
    width: auto;
    margin: 0;
  }
  .mpa-sc-print-brand {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--mpa-purple);
    letter-spacing: 0.01em;
  }
  .mpa-sc-print-strapline {
    display: block !important;
    font-size: 0.85rem;
    color: var(--mpa-grey);
    margin: 0.2rem 0 0.5rem;
    line-height: 1.4;
    max-width: 42em;
  }
  .mpa-sc-print-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--mpa-text);
    margin-top: 0.15rem;
  }
  .mpa-sc-print-meta {
    font-size: 0.8rem;
    color: var(--mpa-grey);
    margin-top: 0.35rem;
  }

  .mpa-sc-summary-card h3 {
    font-size: 1.05rem;
    color: var(--mpa-text);
    margin: 0 0 0.85rem;
  }

  /* Category header + table: crisp borders instead of the on-screen
     purple fill/shadow, which either prints as a heavy ink block or
     disappears entirely depending on the browser's "background graphics"
     print setting — a plain border reads cleanly either way. */
  .mpa-sc-category-title {
    background: none !important;
    color: var(--mpa-purple) !important;
    border: none !important;
    border-bottom: 1.5px solid var(--mpa-purple) !important;
    padding: 0.4rem 0.1rem !important;
    font-size: 0.85rem !important;
  }
  .mpa-sc-added-table-head {
    background: none !important;
    color: var(--mpa-purple) !important;
    border-bottom: 1.5px solid var(--mpa-purple) !important;
    padding: 0.5rem 0.1rem !important;
  }
  .mpa-sc-added-table-head,
  .mpa-sc-added-line {
    /* A little extra breathing room between the Hours/Total Per Week/
       Grand Total columns on the printed page, on top of the smaller
       Item Name/Number text below. */
    column-gap: 0.65rem !important;
    /* The 7th track (delete icon) is hidden in print, but its
       minmax(38px, auto) column was still reserved, so "Sub Total"
       stopped ~40-50px short of the table's real right edge while
       Grand Total below (flush-right via margin-left:auto) sat flush
       with that real edge — pushing Grand Total further right than
       Sub Total instead of lining up under it. Dropping the track
       lets Sub Total's own column claim that width instead. */
    grid-template-columns:
      minmax(120px, 1.9fr)
      minmax(88px, 0.8fr)
      minmax(96px, 0.85fr)
      minmax(98px, 0.7fr)
      minmax(90px, 0.7fr)
      minmax(36px, 0.65fr) !important;
  }
  .mpa-sc-added-line {
    padding: 0.6rem 0.1rem !important;
    border-top: 1px solid #D9D9D9 !important;
  }
  .mpa-sc-added-line:hover { background: none !important; }
  /* The Support Breakdown uses the exact same typography as the Add
     Supporter table. Do not create a separate print font scale here. */
  .mpa-sc-added-table-head {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
  }
  .mpa-sc-added-line-name {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
  }
  .mpa-sc-added-line-number {
    font-size: 0.82rem !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
  }
  .mpa-sc-added-line-unit-price {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
  }
  .mpa-sc-added-line-hours input {
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    border: 1px solid var(--mpa-border) !important;
    background: #fff !important;
    padding: 0.2rem 0.35rem !important;
    color: var(--mpa-text) !important;
  }
  .mpa-sc-added-line-weekly-total {
    font-size: inherit !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }
  .mpa-sc-added-line-total {
    font-size: inherit !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }

  /* Keep each support line intact instead of splitting across a page
     break, which is what made an item look duplicated on the next page. */
  .mpa-sc-added-line {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .mpa-sc-summary-card { break-inside: auto; }

  /* Weeks in Plan stays on the left (in line with the Item Name column)
     and Grand Total sits on the right, aligned under the table's Sub
     Total column — matching the on-screen layout instead of the
     previous centred print-only treatment. */
  .mpa-sc-summary-totals-row {
    justify-content: space-between !important;
    border-top: 2px solid var(--mpa-purple);
    padding-top: 1rem;
    margin-top: 1.25rem;
  }
  .mpa-sc-weeks-field {
    justify-content: flex-start;
    margin: 0 !important;
  }
  .mpa-sc-grand-total {
    margin-left: auto !important;
    margin-right: 0.1rem !important;
    /* More breathing room between the "Grand Total" label and the
       amount, matching the label/value gap already used elsewhere on
       the printed page (was a cramped 0.25rem). */
    gap: 0.6rem !important;
    text-align: right !important;
  }
  .mpa-sc-grand-total strong { font-size: 1.3rem; }
  .mpa-sc-disclaimer {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--mpa-grey);
  }
}

/* v0.10.3 — make the selected pricing region explicit wherever a price is shown */
.mpa-sc-dropdown-item-price {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  text-align: right;
}
.mpa-sc-region-price-label {
  font-size: .72rem;
  font-weight: 700;
}
.mpa-sc-result-price-label {
  font-weight: 600;
}

/* ---- pricing region select ----
   Small pill-style dropdown, matching Hours mode's own compact sizing
   exactly, on the same row so both fields sit at the same height. "No
   region selected" is just its own option in the list ("All regions")
   rather than needing separate toggle-off logic. */
.mpa-sc-options-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 0;
}
.mpa-sc-region-mini-field select,
.mpa-sc-mini-field select { border-radius: 0 !important; }
.mpa-sc-region-mini-field select {
  min-width: 130px;
  padding-right: 1.9rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236E2C7C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 11px;
}
.mpa-sc-region-help {
  font-size: 0.8rem;
  color: var(--mpa-grey) !important;
  line-height: 1.4;
  margin: 0.1rem 0 0.4rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--mpa-border);
}
.mpa-sc-region-prices {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 190px;
}
.mpa-sc-region-prices > div {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.78rem;
  line-height: 1.25;
}
.mpa-sc-region-prices strong { font-weight: 700; }
.mpa-sc-region-prices span { white-space: nowrap; }
.mpa-sc-result-price-heading,
.mpa-sc-drawer-region-heading {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--mpa-grey);
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}