/* ============================================================================
 * Planet Interim — shared parameter-selection modal (self-contained)
 * Load site-wide together with js/pi-parameter-modal.js. Uses the SPoT --pi-*
 * tokens when the page provides them, with fallbacks so it also works on pages
 * that don't load pi-design-system.css.
 * ========================================================================== */
:root{
  --pi-navy:#365A8F; --pi-blue:#00AEEF; --pi-green:#339A63; --pi-green-hover:#2f8f5c;
  --pi-text-soft:#666666; --pi-heading:#333333; --pi-border:#E6E9EF; --pi-border-strong:#B7B7B7;
  --pi-kicker-bg:#EEF4FB; --pi-overlay:rgba(42,74,110,0.18); --pi-red:#B42318;
}

/* ---------- Trigger field ---------- */
.pi-field{margin-bottom:24px;}
.pi-field-label{display:block;margin-bottom:12px;font-family:'Montserrat',Arial,sans-serif;
  font-size:16px;line-height:1.5;font-weight:600;color:var(--pi-heading);}
.pi-field-label .pi-field-hint{font-weight:400;color:var(--pi-text-soft);}
.pi-select{width:100%;min-height:48px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:0 16px;background:#fff;border:1px solid var(--pi-border-strong);border-radius:12px;
  cursor:pointer;font-family:'Montserrat',Arial,sans-serif;font-size:16px;line-height:1.4;
  color:var(--pi-text-soft);text-align:left;}
.pi-select:hover{border-color:var(--pi-navy);}
.pi-select:focus-visible{outline:none;border-color:var(--pi-navy);box-shadow:0 0 0 4px rgba(0,174,239,.22);}
.pi-select.is-empty .pi-select-value{color:#9AA3AF;}
.pi-select.has-value .pi-select-value{color:var(--pi-text-soft);font-weight:400;}
.pi-select-value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pi-chevron{flex:0 0 auto;width:18px;height:18px;color:var(--pi-navy);}
.pi-field-error{display:none;margin:8px 0 0;font-size:14px;font-weight:500;color:var(--pi-red);}
.pi-field.has-error .pi-field-error,
.help-block.with-errors .pi-field-error{display:block;}
.pi-field.has-error .pi-select{border-color:var(--pi-red);}

/* ---------- Buttons used by the modal ---------- */
#piParamOverlay .pi-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:28px;font-family:'Montserrat',Arial,sans-serif;white-space:nowrap;box-sizing:border-box;
  text-decoration:none;cursor:pointer;line-height:1;border:0;
  transition:background-color .15s ease,border-color .15s ease,transform .15s ease;}
#piParamOverlay .pi-btn:hover{transform:translateY(-1px);}
#piParamOverlay .pi-btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(0,174,239,.22);}
#piParamOverlay .pi-btn-utility{height:34px;min-width:0;padding:0 16px;font-size:14px;font-weight:500;
  background:var(--pi-kicker-bg);color:var(--pi-navy);border:1px solid #D6E2F3;border-radius:22px;}
#piParamOverlay .pi-btn-utility:hover{background:#E7F0FB;border-color:#C9D5E5;}
#piParamOverlay .pi-btn-utility-green{height:34px;min-width:0;padding:0 16px;font-size:14px;font-weight:500;
  background:#EEF7F1;color:var(--pi-green);border:1px solid #BFE0CF;border-radius:22px;}
#piParamOverlay .pi-btn-utility-green:hover{background:#E4F3EB;border-color:#BFE0CF;}
#piParamOverlay .pi-btn-utility-cancel{height:34px;min-width:0;padding:0 16px;font-size:14px;font-weight:500;
  background:#fff;color:var(--pi-heading);border:1px solid #C9D5E5;border-radius:22px;}
#piParamOverlay .pi-btn-utility-cancel:hover{background:#F7F8FA;border-color:var(--pi-border-strong);}

/* ---------- Modal shell ---------- */
#piParamOverlay.pi-modal-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  padding:24px 16px;background:var(--pi-overlay);overflow-y:auto;z-index:9999;
  font-family:'Montserrat',Arial,sans-serif;}
#piParamOverlay.pi-modal-overlay.is-open{display:flex;}
#piParamOverlay .pi-modal{width:100%;max-width:680px;background:#fff;border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.18);display:flex;flex-direction:column;max-height:calc(100vh - 48px);overflow:hidden;}
#piParamOverlay .pi-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding:24px 28px 20px;border-bottom:1px solid var(--pi-border);background:linear-gradient(180deg,#fff 0%,#FBFCFD 100%);}
#piParamOverlay .pi-modal-kicker{display:inline-flex;align-items:center;height:40px;margin-bottom:12px;padding:0 18px;
  border-radius:999px;background:var(--pi-kicker-bg);color:var(--pi-navy);font-size:13px;font-weight:600;line-height:1;}
#piParamOverlay .pi-modal-title{margin:0;font-size:24px;line-height:1.2;font-weight:700;color:var(--pi-navy);
  text-transform:none;letter-spacing:0;}
#piParamOverlay .pi-modal-close{width:44px;height:44px;border-radius:999px;border:1px solid #D9E2EC;background:#fff;
  color:#666;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;padding:0;}
#piParamOverlay .pi-modal-close:hover{background:#F7F8FA;}
#piParamOverlay .pi-modal-close svg{width:18px;height:18px;display:block;}

#piParamOverlay .pi-modal-toolbar{display:flex;flex-direction:column;gap:12px;padding:20px 28px 8px;}
#piParamOverlay .pi-search{position:relative;}
#piParamOverlay .pi-search input{width:100%;height:44px;padding:0 16px 0 42px;border:1px solid var(--pi-border-strong);
  border-radius:12px;background:#fff;font-family:inherit;font-size:16px;color:var(--pi-heading);}
#piParamOverlay .pi-search input::placeholder{color:#9AA3AF;}
#piParamOverlay .pi-search input:focus-visible{outline:none;border-color:var(--pi-navy);box-shadow:0 0 0 4px rgba(0,174,239,.22);}
#piParamOverlay .pi-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#9AA3AF;}
#piParamOverlay .pi-toolbar-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
#piParamOverlay .pi-counter{font-size:14px;font-weight:600;color:var(--pi-navy);}
#piParamOverlay .pi-counter .pi-counter-max{color:var(--pi-text-soft);font-weight:400;}

/* ---------- Option list ---------- */
#piParamOverlay .pi-optlist{flex:1 1 auto;margin:0;padding:8px 28px 4px;list-style:none;overflow-y:auto;}
#piParamOverlay .pi-opt{margin:0;}
#piParamOverlay .pi-opt label{display:flex;align-items:flex-start;gap:12px;padding:10px 0;cursor:pointer;
  font-size:16px;line-height:1.5;font-weight:400;color:var(--pi-text-soft);}
/* Mockup uses a native checkbox tinted with accent-color. The legacy global theme
   forces appearance:none !important and draws a ::before box, which breaks that — so we
   restore native rendering with !important and suppress the theme's pseudo-boxes. */
#piParamOverlay .pi-opt input[type="checkbox"]{
  -webkit-appearance:auto !important;-moz-appearance:auto !important;appearance:auto !important;
  flex:0 0 auto;width:20px !important;height:20px !important;margin:3px 0 0 !important;padding:0 !important;
  accent-color:var(--pi-navy) !important;cursor:pointer;
  background:none !important;background-image:none !important;background-color:initial !important;
  border:initial !important;border-radius:0 !important;box-shadow:none !important;color:initial !important;}
/* Suppress the legacy theme's ::before/::after boxes/ticks drawn on the checkbox. */
#piParamOverlay .pi-opt input[type="checkbox"]::before,
#piParamOverlay .pi-opt input[type="checkbox"]::after{content:none !important;display:none !important;border:0 !important;background:none !important;}
#piParamOverlay .pi-opt-text{flex:1 1 auto;min-width:0;}
/* Group header — bold, not selectable */
#piParamOverlay .pi-opt.is-group{padding:12px 0 4px;}
#piParamOverlay .pi-opt.is-group .pi-opt-text{font-weight:600;color:var(--pi-heading);}
#piParamOverlay .pi-opt.is-disabled label{opacity:.45;cursor:not-allowed;}
#piParamOverlay .pi-empty{padding:24px 0;text-align:center;font-size:15px;color:var(--pi-text-soft);}

/* ---------- Footer ---------- */
#piParamOverlay .pi-modal-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 28px 24px;border-top:1px solid var(--pi-border);background:#fff;}
#piParamOverlay .pi-footer-note{flex:1 1 auto;min-width:0;font-size:14px;color:var(--pi-text-soft);}
#piParamOverlay .pi-footer-note.is-warn{color:var(--pi-red);font-weight:500;}
#piParamOverlay .pi-footer-actions{display:flex;flex:0 0 auto;gap:16px;}

/* ---------- Responsive: full width, wrap, no horizontal scroll ---------- */
@media (max-width:768px){
  #piParamOverlay.pi-modal-overlay{align-items:flex-start;padding:16px;}
  #piParamOverlay .pi-modal{max-height:calc(100vh - 32px);}
  #piParamOverlay .pi-modal-head{padding:20px 18px 16px;}
  #piParamOverlay .pi-modal-toolbar{padding:16px 18px 8px;}
  #piParamOverlay .pi-optlist{padding:8px 18px 4px;}
  #piParamOverlay .pi-modal-footer{flex-direction:column;align-items:stretch;padding:16px 18px 20px;}
  #piParamOverlay .pi-footer-actions{flex-direction:column;}
  #piParamOverlay .pi-footer-actions .pi-btn{width:100%;}
  #piParamOverlay .pi-footer-note{order:2;text-align:center;}
}