/*
 * Packages page — fully standalone stylesheet, scoped under #pkg-wrap.
 * Does NOT rely on cardiac-tool.css / cbt-booking-flow.css / cbt-clinician-
 * onboarding.css custom properties — this shortcode needs to work correctly
 * on a page that only has [cardiac_packages] and nothing else from this
 * plugin. Colors/radii matched directly against the provided screenshots.
 */
#pkg-wrap{
  --ink:#1a1a1a; --ink-2:#666; --ink-3:#8a8a8a;
  --red:#FF3333; --red-dk:#D81E1E;
  --green:#1a9e4a; --green-dk:#158239;
  --blue:#1f5fc4;
  --line:#ECECEC; --line-2:#E2E2E2; --surf:#F7F7F7;
  --r-card:0px; --r-field:10px; --r-pill:999px;
  font-family:'Poppins',system-ui,sans-serif; color:var(--ink); font-size:15px; line-height:1.5;
}
#pkg-wrap *{box-sizing:border-box}
#pkg-wrap .pkg-shell{max-width:1180px; margin:0 auto; padding:24px 16px 60px}

/* ---- top 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; padding:11px 18px; border:1.5px solid var(--red); border-radius:var(--r-pill); background:#fff; color:var(--red); font-family:inherit; font-weight:500; font-size:14.5px; cursor:pointer}
#pkg-wrap .pkg-cond-btn svg:first-child, #pkg-wrap .pkg-cond-icon{width:16px; height:16px; flex-shrink:0; object-fit:contain}
#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-2); border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.12); padding:8px; min-width:180px}
#pkg-wrap .pkg-cond-item{padding:10px 14px; border-radius:8px; font-size:14.5px; cursor:pointer}
#pkg-wrap .pkg-cond-item:hover{background:var(--surf)}
#pkg-wrap .pkg-cond-item.on{color:var(--red); font-weight:600}

#pkg-wrap .pkg-tabs{display:flex; align-items:center; background:var(--surf); border-radius:var(--r-pill); padding:5px; gap:2px; flex-wrap:wrap}
#pkg-wrap .pkg-tab{font-family:inherit; font-size:14px; font-weight:500; color:var(--ink-2); background:none; border:none; border-radius:var(--r-pill); padding:10px 18px; cursor:pointer; white-space:nowrap}
#pkg-wrap .pkg-tab.on{background:var(--ink); color:#fff; font-weight:600}

/* ---- card grid ---- */
#pkg-wrap .pkg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:980px){ #pkg-wrap .pkg-grid{grid-template-columns:repeat(2,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:22px 22px 20px; display:flex; flex-direction:column}
#pkg-wrap .pkg-ribbon{position:absolute; top:0; right:0; background:var(--red); color:#fff; font-size:12px; font-weight:600; padding:6px 16px; border-radius:0 0 0 8px}
#pkg-wrap .pkg-tag{display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px}
#pkg-wrap .pkg-tag svg, #pkg-wrap .pkg-tag-icon{width:16px; height:16px; color:var(--red); flex-shrink:0; object-fit:contain}
#pkg-wrap .pkg-name{font-size:19px; font-weight:600; margin-bottom:10px; 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:32px; font-weight:700; color:var(--ink)}
#pkg-wrap .pkg-vat{font-size:12.5px; color:var(--ink-3)}
#pkg-wrap .pkg-desc{font-size:13.5px; color:var(--ink-2); margin-bottom:16px; line-height:1.5}
#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:13.5px; color:var(--ink-2); margin-bottom:9px; line-height:1.4}
#pkg-wrap .pkg-incl li svg{width:15px; height:15px; color:var(--red); flex-shrink:0; margin-top:1px}
#pkg-wrap .pkg-incl li.pkg-more{color:var(--red); font-weight:600}
#pkg-wrap .pkg-incl li.pkg-more svg{color:var(--red)}
#pkg-wrap .pkg-btn{font-family:inherit; font-weight:600; font-size:14.5px; border-radius:var(--r-pill); padding:13px 20px; cursor:pointer; border:none; width:100%; text-align:center; display:flex; align-items:center; justify-content:center; gap:6px; transition:background .15s; text-decoration:none; box-sizing:border-box}
#pkg-wrap .pkg-btn svg{width:15px; height:15px}
#pkg-wrap .pkg-btn.ghost{background:var(--surf); color:var(--ink)}
#pkg-wrap .pkg-btn.ghost svg{color:var(--red)}
#pkg-wrap .pkg-btn.ghost:hover{background:var(--line-2)}
#pkg-wrap .pkg-btn.primary{background:var(--red); color:#fff}
#pkg-wrap .pkg-btn.primary:hover{background:var(--red-dk)}
#pkg-wrap .pkg-btn.green{background:var(--green); color:#fff}
#pkg-wrap .pkg-btn.green:hover{background:var(--green-dk)}

/* ---- Online GP card (always shown, static, distinct styling) ---- */
#pkg-wrap .pkg-card.pkg-gp{background:#EFF5FF; border-color:#DCE9FC}
#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)}
#pkg-wrap .pkg-gp .pkg-incl li svg{color:var(--blue)}
#pkg-wrap .pkg-gp .pkg-incl li.pkg-more{color:var(--blue)}
#pkg-wrap .pkg-gp .pkg-incl li.pkg-more svg{color:var(--blue)}

/* ---- detail modal ---- */
#pkg-wrap .pkg-overlay{position:fixed; inset:0; background:rgba(20,20,20,.6); z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px}
#pkg-wrap .pkg-modal{background:#fff; border-radius:20px; width:100%; max-width:600px; max-height:86vh; overflow-y:auto; padding:32px 34px 28px; position:relative}
#pkg-wrap .pkg-modal-close{position:absolute; top:20px; right:20px; width:34px; height:34px; border-radius:50%; background:var(--surf); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0}
#pkg-wrap .pkg-modal-close:hover{background:var(--line-2)}
#pkg-wrap .pkg-modal .pkg-tag{margin-bottom:16px}
#pkg-wrap .pkg-modal .pkg-name{font-size:25px; margin-bottom:14px}
#pkg-wrap .pkg-modal .pkg-price{font-size:38px; color:var(--red)}
#pkg-wrap .pkg-modal .pkg-price-row{margin-bottom:10px}
#pkg-wrap .pkg-modal .pkg-desc{margin-bottom:20px}
#pkg-wrap .pkg-modal .pkg-incl{margin-bottom:26px}
#pkg-wrap .pkg-modal .pkg-incl li{font-size:14.5px; margin-bottom:12px}
#pkg-wrap .pkg-modal-footer{display:flex; gap:12px}
#pkg-wrap .pkg-modal-footer .pkg-btn{width:auto; flex:1}

/* ---- mobile ---- */
@media (max-width:640px){
  /* Filter bar: condition pill full-width on its own row. Tabs become a
     2x2 grid (4 tabs total) that fits the full device width with no
     scrolling at all — cleaner than either cramming 4 pills onto one line
     or letting them wrap raggedly. */
  #pkg-wrap .pkg-filterbar{flex-direction:column; align-items:stretch}
  #pkg-wrap .pkg-cond{width:100%}
  #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; padding:0; border-radius:0}
  #pkg-wrap .pkg-tab{width:100%; text-align:center; font-size:13px; padding:12px 6px; background:var(--surf); border-radius:12px; white-space:normal; line-height:1.3}
  #pkg-wrap .pkg-tab.on{background:var(--ink)}

  /* Modal: tighter padding to fit narrow screens, and the footer buttons
     stack — Buy Now moves below Book via Assessment instead of being
     squeezed side by side and cut off. */
  #pkg-wrap .pkg-modal{padding:26px 20px 22px}
  #pkg-wrap .pkg-modal-footer{flex-direction:column}
  #pkg-wrap .pkg-modal-footer .pkg-btn{width:100%}
}