/* ============================================================================
   Shared surface and button treatment for every widget in the suite.
   One place to change the look rather than eight.
   Elementor's per-widget controls still override all of this.
   ========================================================================== */

:root{
  --ps-rule:#DEDEDE;
  --ps-radius:10px;
  --ps-pill:99px;          /* buttons that should read as pills */
  --ps-purple:#6F00FF;
  --ps-black:#111111;
  --ps-ink-deep:#1B1030;   /* the dark surface behind flashcards */
  --ps-danger:#b32d2e;
}

/* ---- boxes: one border colour and radius across the suite ---------------- */
.pmd,.pfc,.pht,.phn,.pfl,.pes,.pel,.psu,.psm,#politicle-root{
  --pmd-rule:var(--ps-rule); --pfc-rule:var(--ps-rule); --pht-line:var(--ps-rule);
  --phn-line:var(--ps-rule); --pfl-rule:var(--ps-rule); --pes-rule:var(--ps-rule);
  --pel-rule:var(--ps-rule); --psu-rule:var(--ps-rule); --psm-rule:var(--ps-rule);
  --pmd-radius:var(--ps-radius); --pfc-radius:var(--ps-radius); --pht-radius:var(--ps-radius);
  --phn-radius:var(--ps-radius); --pfl-radius:var(--ps-radius); --pes-radius:var(--ps-radius);
  --pel-radius:var(--ps-radius);
}

.pmd-table-wrap,.pmd-side,.pfc .pfc-slot,.pht-card,.phn .phn-card,.pel-section,
.psu-card-face,.psm,.pes-results,.pel-m-box{
  border-color:var(--ps-rule);
  border-radius:var(--ps-radius)
}

/* ---- buttons ------------------------------------------------------------
   Primary: purple, white text. Secondary: black, white text.
   Hover swaps one for the other, both directions.
   -------------------------------------------------------------------------- */
.pmd .pmd-more,.pmd .pmd-view-btn.is-active,
.pfc .pfc-btn-primary,
.pel .pel-flash,
.psu .psu-btn-primary,
.pes .pes-submit,
.politicle-btn-share,
.pfl .pfl-save{
  background:var(--ps-purple)!important;
  border:0!important;
  color:#fff!important;
  border-radius:var(--ps-radius);
  transition:background .15s ease
}
/* the cabinet's primary buttons follow whatever accent is in play */
.pfc .pfc-btn-primary{background:var(--pfc-accent,var(--ps-purple))!important}
.pfc .pfc-btn-primary:hover{background:var(--ps-black)!important}
.pmd .pmd-more:hover,.pmd .pmd-view-btn.is-active:hover,
.pfc .pfc-btn-primary:hover,
.pel .pel-flash:hover,
.psu .psu-btn-primary:hover,
.pes .pes-submit:hover,
.politicle-btn-share:hover,
.pfl .pfl-save:hover{
  background:var(--ps-black)!important;
  border-color:var(--ps-black)!important;
  color:#fff!important;
  opacity:1
}

/* secondary */
.pel .pel-btn,
.pmd .pmd-view-btn,
.psu .psu-btn:not(.psu-btn-primary):not(.psu-btn-danger),
.pfc .pfc-btn:not(.pfc-btn-primary):not(.pfc-btn-danger),
.pel-m-close,
.pfl .pfl-close{
  background:var(--ps-black)!important;
  border:0!important;
  color:#fff!important;
  border-radius:var(--ps-radius);
  transition:background .15s ease,border-color .15s ease
}
.pel .pel-btn:hover,
.pmd .pmd-view-btn:hover,
.psu .psu-btn:not(.psu-btn-primary):not(.psu-btn-danger):hover,
.pfc .pfc-btn:not(.pfc-btn-primary):not(.pfc-btn-danger):hover,
.pel-m-close:hover,
.pfl .pfl-close:hover{
  background:var(--ps-purple)!important;
  border-color:var(--ps-purple)!important;
  color:#fff!important
}

/* destructive stays red however it is hovered */
.psu .psu-btn-danger,.pfc .pfc-btn-danger{
  background:#fff!important;border:1px solid #e8bcbc!important;
  color:var(--ps-danger)!important;border-radius:var(--ps-radius)
}
.psu .psu-btn-danger:hover,.pfc .pfc-btn-danger:hover{
  background:var(--ps-danger)!important;border-color:var(--ps-danger)!important;color:#fff!important
}

/* Teaser buttons — Politicle's Play now and On this day's Read more. Same size
   from one place, so a tweak to either can't leave them mismatched. */
:root{
  --ps-teaser-btn-pad:8px 18px;
  --ps-teaser-btn-size:.78rem;
  --ps-teaser-btn-weight:700;
  --ps-teaser-btn-track:.03em;
}