/*
 * NeuroClinicians — Packages page ([neuroclinicians_packages], nca-packages.js).
 * Standalone, scoped under #pkg-wrap: works on a page with nothing else from
 * this plugin. Same layout as cardiac's packages grid, in the neuro design
 * language: Fraunces headings, Poppins body, brand teal, rounded cards, pills.
 */
#pkg-wrap{
  --ink:#222222; --ink-2:#4a4a4a; --ink-3:#7d7d7d; --ink-4:#8a8a8a;
  --brand:#007c91; --brand-dk:#005f6e; --brand-tint:#f1fafb; --brand-tint2:#e2f3f5; --brand-line:#d9eff2;
  --grad:linear-gradient(90deg,#007c91 0%,#15958f 40%,#38a77a 70%,#68c85b 100%);
  --green:#1f7a52; --green-btn:#38a77a; --green-dk:#2a8a63;
  --line:#ebebea; --soft:#f5f5f4;
  --r-card:22px; --r-box:14px; --r-pill:999px;
  font-family:'Poppins',system-ui,sans-serif; color:var(--ink); font-size:14px; line-height:1.5;
}
#pkg-wrap *{box-sizing:border-box}
#pkg-wrap button{font-family:inherit; text-transform:none; letter-spacing:0; box-shadow:none}
#pkg-wrap .pkg-shell{max-width:1140px; margin:0 auto; padding:24px 16px 60px}

/* ---- filter bar ---- */
#pkg-wrap .pkg-filterbar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-bottom:26px}
#pkg-wrap .pkg-cond{position:relative}
#pkg-wrap .pkg-cond-btn{display:flex; align-items:center; gap:9px; min-height:44px; padding:10px 18px; margin:0; border:1px solid var(--brand); border-radius:var(--r-pill); background:#fff; color:var(--brand); font-weight:500; font-size:13.5px; cursor:pointer}
#pkg-wrap .pkg-cond-btn:hover, #pkg-wrap .pkg-cond-btn:focus{background:var(--brand-tint); color:var(--brand)}
#pkg-wrap .pkg-cond-icon{width:17px; height:17px; flex-shrink:0}
#pkg-wrap .pkg-cond-btn > svg:last-child{width:13px; height:13px; margin-left:4px; transition:transform .15s}
#pkg-wrap .pkg-cond-btn.open > svg:last-child{transform:rotate(180deg)}
#pkg-wrap .pkg-cond-menu{position:absolute; top:calc(100% + 8px); left:0; z-index:20; background:#fff; border:1px solid var(--line); border-radius:var(--r-box); box-shadow:0 16px 40px rgba(0,0,0,.10); padding:8px; min-width:190px}
#pkg-wrap .pkg-cond-item{padding:10px 14px; border-radius:10px; font-size:13.5px; cursor:pointer}
#pkg-wrap .pkg-cond-item:hover{background:var(--brand-tint)}
#pkg-wrap .pkg-cond-item.on{color:var(--brand); font-weight:600}

#pkg-wrap .pkg-tabs{display:flex; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--r-pill); padding:4px; gap:2px; flex-wrap:wrap}
#pkg-wrap .pkg-tab{font-size:12.5px; font-weight:400; color:var(--ink-2); background:none; border:none; border-radius:var(--r-pill); min-height:36px; padding:8px 16px; margin:0; cursor:pointer; white-space:nowrap}
#pkg-wrap .pkg-tab:hover{background:var(--brand-tint); color:var(--brand)}
#pkg-wrap .pkg-tab.on, #pkg-wrap .pkg-tab.on:hover{background:var(--brand); color:#fff; font-weight:500}

/* ---- card grid ---- */
#pkg-wrap .pkg-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
@media (max-width:980px){ #pkg-wrap .pkg-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ #pkg-wrap .pkg-grid{grid-template-columns:1fr} }

#pkg-wrap .pkg-card{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:24px 22px 20px; display:flex; flex-direction:column}
#pkg-wrap .pkg-card-err{border-color:#f3c7c4; max-width:640px; margin:0 auto}
#pkg-wrap .pkg-card-err h3{font-family:'Fraunces',serif; font-weight:600; font-size:20px; margin:0 0 8px}
#pkg-wrap .pkg-tag{display:inline-flex; align-items:center; gap:6px; align-self:flex-start; padding:4px 11px; border-radius:var(--r-pill); background:var(--brand-tint); color:var(--brand); font-size:11px; font-weight:500; margin-bottom:12px}
#pkg-wrap .pkg-tag-icon{width:13px; height:13px; flex-shrink:0}
#pkg-wrap .pkg-name{font-family:'Fraunces',serif; font-optical-sizing:auto; font-size:19px; font-weight:600; margin-bottom:8px; line-height:1.3}
#pkg-wrap .pkg-price-row{display:flex; align-items:baseline; gap:6px; margin-bottom:12px}
#pkg-wrap .pkg-price{font-size:28px; font-weight:600; color:var(--ink)}
#pkg-wrap .pkg-vat{font-size:12px; color:var(--ink-4)}
#pkg-wrap .pkg-desc{font-size:13px; color:var(--ink-2); margin:0 0 16px; line-height:1.6}
#pkg-wrap .pkg-incl{list-style:none; margin:0 0 20px; padding:0; flex:1}
#pkg-wrap .pkg-incl li{display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--ink-2); margin:0 0 9px; line-height:1.45}
#pkg-wrap .pkg-incl li svg{width:15px; height:15px; color:var(--brand); flex-shrink:0; margin-top:2px}
#pkg-wrap .pkg-incl li.pkg-more{color:var(--brand); font-weight:500}
#pkg-wrap .pkg-btn{display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:46px; padding:12px 20px; margin:0; border:1px solid transparent; border-radius:var(--r-pill); font-weight:500; font-size:13.5px; text-align:center; text-decoration:none; cursor:pointer; transition:background .15s, border-color .15s, color .15s}
#pkg-wrap .pkg-btn svg{width:14px; height:14px}
#pkg-wrap .pkg-btn.ghost{background:#fff; border-color:var(--line); color:var(--ink)}
#pkg-wrap .pkg-btn.ghost svg{color:var(--brand)}
#pkg-wrap .pkg-btn.ghost:hover, #pkg-wrap .pkg-btn.ghost:focus{border-color:var(--brand); color:var(--brand); background:#fff}
#pkg-wrap .pkg-btn.primary{background:var(--brand); color:#fff}
#pkg-wrap .pkg-btn.primary:hover, #pkg-wrap .pkg-btn.primary:focus{background:var(--brand-dk); color:#fff}
#pkg-wrap .pkg-btn.green{background:var(--green-btn); color:#fff}
#pkg-wrap .pkg-btn.green:hover, #pkg-wrap .pkg-btn.green:focus{background:var(--green-dk); color:#fff}
#pkg-wrap .pkg-btn:focus-visible, #pkg-wrap .pkg-tab:focus-visible, #pkg-wrap .pkg-cond-btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

/* ---- Online GP card (always shown, static) ---- */
#pkg-wrap .pkg-card.pkg-gp{background:var(--brand-tint); border-color:var(--brand-line)}
#pkg-wrap .pkg-gp-logo-img{display:block; height:20px; width:auto; max-width:130px; margin-bottom:12px; align-self:flex-start; object-fit:contain}
#pkg-wrap .pkg-gp .pkg-price{color:var(--green)}

/* ---- detail modal ---- */
#pkg-wrap .pkg-overlay{position:fixed; inset:0; background:rgba(20,30,32,.55); z-index:100000; display:flex; align-items:center; justify-content:center; padding:20px}
#pkg-wrap .pkg-modal{position:relative; width:100%; max-width:600px; max-height:86vh; overflow-y:auto; padding:30px 32px 26px; background:#fff; border-radius:var(--r-card); box-shadow:0 24px 60px rgba(0,0,0,.18)}
#pkg-wrap .pkg-modal-close{position:absolute; top:18px; right:18px; width:34px; height:34px; min-height:0; padding:0; margin:0; border-radius:50%; background:var(--soft); color:var(--ink); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer}
#pkg-wrap .pkg-modal-close:hover{background:var(--brand-tint); color:var(--brand)}
#pkg-wrap .pkg-modal-close svg{width:16px !important; height:16px !important}
#pkg-wrap .pkg-modal .pkg-name{font-size:24px; margin-bottom:12px; padding-right:40px}
#pkg-wrap .pkg-modal .pkg-price{font-size:34px; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--brand)}
#pkg-wrap .pkg-modal .pkg-desc{margin-bottom:20px}
#pkg-wrap .pkg-modal .pkg-incl{margin-bottom:24px}
#pkg-wrap .pkg-modal .pkg-incl li{font-size:13.5px; margin-bottom:11px}
#pkg-wrap .pkg-modal-footer{display:flex; gap:12px}
#pkg-wrap .pkg-modal-footer .pkg-btn{width:auto; flex:1}

@media (max-width:640px){
  #pkg-wrap .pkg-filterbar{flex-direction:column; align-items:stretch}
  #pkg-wrap .pkg-cond, #pkg-wrap .pkg-cond-btn{width:100%; justify-content:center}
  #pkg-wrap .pkg-cond-menu{left:0; right:0}
  #pkg-wrap .pkg-tabs{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; background:none; border:none; padding:0; border-radius:0}
  #pkg-wrap .pkg-tab{width:100%; text-align:center; padding:10px 6px; background:#fff; border:1px solid var(--line); border-radius:var(--r-box); white-space:normal; line-height:1.3}
  #pkg-wrap .pkg-modal{padding:24px 18px 20px}
  #pkg-wrap .pkg-modal-footer{flex-direction:column}
  #pkg-wrap .pkg-modal-footer .pkg-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){ #pkg-wrap *{transition:none !important} }