/* =========================================================
   Badr Al Safaa Medical Centre — Health Packages
   Built from Figma file "Badr-Al-Safaa", prototype frame 526:3543
   Loads after style.css (tokens, package carousel cards), about.css
   (top bar, visit block, footer) and departments.css (hero pattern).
   ========================================================= */

/* ---------- Hero ---------- */
.pk-hero { height: 484px; padding-top: 95px; background: #231f20; }
.pk-hero__blob--right { width: 440px; height: 440px; right: -150px; top: -130px; background: rgba(140,120,96,0.7); filter: blur(70px); }
.pk-hero__blob--left { width: 380px; height: 380px; left: -200px; bottom: -170px; background: rgba(120,92,40,0.55); filter: blur(70px); }
.pk-hero .dp-hero__title { margin-top: 22px; }
.pk-hero__lead { max-width: 680px; font-size: 17px; color: rgba(231,229,228,0.8); }

/* ---------- Filter tabs + featured checkup ---------- */
.pk-featured { background: #fff; padding: 53px 0 86px; }
.pk-tabs {
  width: fit-content; max-width: 100%; margin: 0 auto 109px; padding: 16px 24px; border-radius: 12px; background: #fff;
  box-shadow: 0 10px 30px -8px rgba(28,25,23,0.12), 0 1px 3px rgba(28,25,23,0.05);
  display: flex; align-items: center; gap: 16px; overflow-x: auto; scrollbar-width: none;
}
.pk-tabs::-webkit-scrollbar { display: none; }
.pk-tab {
  flex: 0 0 auto; height: 30px; padding: 0 20px; border-radius: 9999px;
  font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: 0.2px; color: #6b6966; white-space: nowrap; transition: background-color .2s, color .2s;
}
.pk-tab:hover { color: #1c1917; }
.pk-tab.is-active { padding: 0 17px; background: #ecc02b; color: #1c1917; letter-spacing: 0; }
.pk-label {
  display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 2px;
  background: #fdf6d8; border: 1px solid #f0d98a;
  font-weight: 600; font-size: 13px; line-height: 16px; letter-spacing: 1.55px; color: #7f5600; white-space: nowrap;
}
.pk-label--lg { height: 22px; padding: 0 10px; font-size: 14px; letter-spacing: 2px; }
.pk-featured__head { display: flex; flex-direction: column; align-items: flex-start; }
.pk-featured__title { margin-top: 10px; font-weight: 700; font-size: 32px; line-height: 38px; color: #1c1917; }
.pk-featured__lead { margin-top: 6px; font-size: 16px; line-height: 22px; color: #7a7774; }
.master {
  margin-top: 23px; display: flex; overflow: hidden; border-radius: 20px; background: #fff;
  border: 2px solid #f1dfaa; box-shadow: 0 20px 40px -18px rgba(28,25,23,0.25);
}
.master__media { flex: 0 0 511px; position: relative; min-height: 520px; }
.master__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.master__body { flex: 1 1 auto; min-width: 0; padding: 32px 20px 32px 32px; display: flex; flex-direction: column; align-items: flex-end; gap: 36px; }
.master__box { width: 100%; padding: 32px 20px 40px; border-radius: 4px; background: #faf6ec; border: 1px solid #f1e3b3; }
.master__box-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid #ece3cc; }
.master__kicker { font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 0.9px; color: #1c1917; }
.master__price {
  display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 14px; border-radius: 9999px; background: #1c1917; border: 1px solid #3a3530;
  font-weight: 700; font-size: 13px; line-height: 16px; color: #f5c542; white-space: nowrap;
}
.master__price i { width: 6px; height: 6px; border-radius: 9999px; background: #f5c542; }
.master__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 6px; padding: 21px 0 30px; border-bottom: 1px solid #ece3cc; }
.master__list li { position: relative; padding-left: 14px; font-size: 13px; line-height: 18px; color: #3f3d3a; }
.master__list li::before { content: "•"; position: absolute; left: 0; top: 0; color: #d49a24; font-size: 12px; }
.master__list b { font-weight: 700; color: #3a3835; }
.master__consults { padding-top: 18px; }
.master__consults-title { font-weight: 700; font-size: 12px; line-height: 16px; color: #1c1917; }
.master__tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.master__tags span {
  display: inline-flex; align-items: center; gap: 4px; height: 27px; padding: 0 11px 0 9px; border-radius: 6px; background: #fff; border: 1px solid #e7e2d8;
  font-size: 12px; line-height: 16px; font-weight: 500; color: #3a3835; white-space: nowrap;
}
.master__tags img { width: 16px; height: 16px; }
.master__btn {
  display: inline-flex; align-items: center; justify-content: center; width: 219px; height: 44px; border-radius: 4px; background: #ecc02b;
  font-family: var(--f-dm); font-weight: 600; font-size: 15px; color: #1c1917; transition: filter .2s;
}
.master__btn:hover { filter: brightness(1.05); }

/* ---------- Tailored packages (reuses the home page carousel cards) ---------- */
.pk-tailored { background: #aa7a00; padding: 84px 0 70px; }
.pk-tailored .container { align-items: stretch; gap: 28px; }
.pk-outline-badge {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; height: 26px; padding: 0 12px; border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.85);
  font-weight: 600; font-size: 13px; line-height: 16px; letter-spacing: 1.5px; color: #fff; white-space: nowrap;
}
.pk-outline-badge i { width: 8px; height: 8px; border-radius: 9999px; background: #f4c55e; }
.pk-tailored__title { margin-top: 8px; font-weight: 700; font-size: 40px; line-height: 46px; color: #fff; white-space: nowrap; }
.pk-tailored__title em { font-family: var(--f-serif); font-style: italic; font-weight: 700; color: #231f20; }
.pk-tailored__lead { margin-top: 4px; font-weight: 300; font-size: 15px; line-height: 20px; color: #fff; }

/* ---------- Summer special ---------- */
.summer { background: #f5ead3; padding: 88px 0 68px; }
.summer__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.summer__title { margin-top: 10px; font-weight: 700; font-size: 36px; line-height: 42px; color: #1c1917; }
.summer__title span { color: #c28b23; }
.summer__lead { margin-top: 4px; font-size: 14.5px; line-height: 20px; color: #1c1917; }
.summer__grid { margin: 56px -9px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.scard { display: flex; height: 300px; border-radius: 12px; overflow: hidden; background: #121820; box-shadow: 0 10px 30px -12px rgba(0,0,0,0.3); }
.scard__media { flex: 0 0 206px; position: relative; }
.scard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scard__body { flex: 1 1 auto; min-width: 0; padding: 26px 24px 24px; display: flex; flex-direction: column; justify-content: space-between; }
.scard__price {
  display: inline-flex; align-items: center; height: 20px; padding: 0 12px; border-radius: 9999px; border: 1px solid #d9a93f;
  font-weight: 700; font-size: 8.5px; line-height: 12px; color: #f5d27e; white-space: nowrap;
}
.scard__title { margin-top: 8px; font-family: var(--f-serif); font-weight: 400; font-size: 21.5px; line-height: 24px; color: #fff; }
.scard__title em { font-style: normal; color: #f2c24e; }
.scard__list { display: flex; flex-direction: column; gap: 4px; }
.scard__list li { display: flex; align-items: center; gap: 8px; font-size: 11.5px; line-height: 16.5px; color: rgba(255,255,255,0.88); }
.scard__list li::before { content: "•"; font-size: 10px; color: #d9a93f; }
.scard__list small { font-size: 10.5px; }
.scard__foot { margin-top: 13px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.14); }
.scard__foot--short { border-top: 0; position: relative; }
.scard__foot--short::before { content: ""; position: absolute; left: 0; top: 0; width: 110px; height: 1px; background: rgba(255,255,255,0.14); }
.scard__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 11px; line-height: 16px; color: #c79a36; }
.scard__link img { width: 14px; height: 14px; transition: transform .2s; }
.scard__link:hover img { transform: translateX(3px); }

/* ---------- Wellness packages ---------- */
.wellness { background: #fff; padding: 91px 0 73px; }
.wellness__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.wellness__head .eyebrow { letter-spacing: 1.5px; }
.wellness__title { margin-top: 8px; font-weight: 700; font-size: 35px; line-height: 42px; letter-spacing: -0.5px; color: #1c1917; }
.wellness__lead { margin-top: 6px; font-size: 14px; line-height: 20px; color: #57534e; }
.wellness__grid { margin: 57px 5px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 29px 29px; }
.wcard {
  min-height: 263px; padding: 32px 31px 22px; border-radius: 16px; border: 1px solid #efe2bd;
  display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease;
}
.wcard:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(28,25,23,0.35); }
.wcard__num { font-weight: 700; font-size: 13px; line-height: 16px; color: #6c550b; }
.wcard__title { margin-top: 20px; font-family: var(--f-serif); font-weight: 400; font-size: 20px; line-height: 26px; color: #1c1917; }
.wcard__text { margin-top: 12px; font-size: 13px; line-height: 21px; color: #57534e; }
.wcard__link {
  margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(180,140,40,0.3);
  display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; line-height: 16px; color: #744d02;
}
.wcard__link img { width: 14px; height: 14px; transition: transform .2s; }
.wcard__link:hover img { transform: translateX(3px); }
.wcard__text + .wcard__link { margin-top: auto; }
.wcard--light { background: linear-gradient(135deg, #ffffff 0%, #fbf3dc 45%, #f3e1a9 100%); }
.wcard--dark { background: linear-gradient(135deg, #231f20 0%, #2c2420 45%, #7a5a1f 100%); border-color: #2f2a26; }
.wcard--dark .wcard__num, .wcard--dark .wcard__title { color: #fff; }
.wcard--dark .wcard__text { color: rgba(255,255,255,0.88); }
.wcard--dark .wcard__link { color: #edc346; border-top-color: rgba(237,195,70,0.3); }
.wcard--gold { background: linear-gradient(135deg, #ffffff 0%, #f8e7b0 45%, #ecc02b 100%); }
.wcard--gold .wcard__link { color: #715000; }
.wcard--silver { background: linear-gradient(135deg, #ffffff 0%, #d9d8d4 50%, #c5c3be 75%, #e6e5e2 100%); border-color: #e6cf8a; }
.wcard--sand { background: linear-gradient(135deg, #fbf8f1 0%, #efe4cd 55%, #d9c7a0 100%); border-color: #d7c190; }
.wcard--sand .wcard__link { color: #967634; border-top-color: #b49a5c; }
.wcard--navy { background: #13171d; border-color: #20252c; }
.wcard--navy .wcard__num { color: #7c5907; }
.wcard--navy .wcard__title { color: #fff; }
.wcard--navy .wcard__text { color: rgba(255,255,255,0.85); }
.wcard--navy .wcard__link { color: #f8c162; border-top-color: rgba(255,255,255,0.12); }

/* ---------- Modern healthcare ---------- */
.modern { background: var(--ink); padding: 81px 0 103px; }
.modern__eyebrow { font-weight: 600; font-size: 13px; line-height: 16px; letter-spacing: 1.5px; color: #a8a29e; }
.modern__title { margin-top: 8px; font-family: var(--f-serif); font-weight: 400; font-size: 36px; line-height: 44px; color: #fff; }
.modern__title em { color: #e5a93c; }
.modern__lead { margin-top: 4px; font-size: 14px; line-height: 20px; color: #a8a29e; }
.modern__grid { margin-top: 55px; display: grid; grid-template-columns: 677px 473px; justify-content: space-between; align-items: start; }
.modern__kicker { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: 11.5px; line-height: 16px; letter-spacing: 0.8px; color: #f0b040; }
.modern__kicker img { width: 16px; height: 16px; }
.modern__subtitle { margin-top: 12px; font-weight: 700; font-size: 24px; line-height: 30px; color: #fff; }
.modern__sublead { margin-top: 2px; font-size: 12.5px; line-height: 18px; color: #d6d3d1; }
.treat-list { margin-top: 18px; display: flex; flex-direction: column; gap: 18px; }
.treat {
  position: relative; display: flex; gap: 16px; padding: 21px 120px 20px 20px; border-radius: 16px;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.treat:first-child { padding-top: 24px; padding-bottom: 20px; }
.treat__icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; background: #3a2e1c; display: flex; align-items: center; justify-content: center; }
.treat__icon img { width: 20px; height: 20px; }
.treat__title { font-weight: 700; font-size: 18.5px; line-height: 24px; color: #fff; white-space: nowrap; }
.treat__text { margin-top: 4px; font-size: 12.5px; line-height: 19.5px; color: #a8a29e; white-space: nowrap; }
.treat__tag {
  position: absolute; right: -16px; top: 18px; height: 22px; padding: 0 9px; border-radius: 9999px; background: rgba(255,255,255,0.06);
  display: flex; align-items: center; font-size: 10.5px; line-height: 14px; color: #a8a29e; white-space: nowrap;
}
.tele {
  padding: 32px 32px 40px; border-radius: 24px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
}
.tele__title { margin-top: 16px; font-weight: 700; font-size: 24px; line-height: 33px; color: #fff; }
.tele__text { margin-top: 20px; font-size: 12.5px; line-height: 19.5px; color: #a8a29e; }
.tele__list { margin-top: 23px; display: flex; flex-direction: column; gap: 14px; }
.tele__list li {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; border-radius: 12px; background: rgba(255,255,255,0.06);
  font-weight: 500; font-size: 12.5px; line-height: 16px; color: rgba(255,255,255,0.92);
}
.tele__list img { width: 17px; height: 17px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1240px) {
  .modern__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .treat__title, .treat__text { white-space: normal; }
  .treat__text br { display: none; }
  .treat { padding-right: 20px; flex-wrap: wrap; }
  .treat__tag { position: static; order: 3; margin-left: 56px; }
  .treat__body { flex: 1 1 0; min-width: 0; }
  .master__media { flex-basis: 42%; }
}
@media (max-width: 1180px) {
  .summer__grid { margin: 48px 0 0; grid-template-columns: minmax(0, 1fr); }
  .wellness__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 48px 0 0; }
  .master { flex-direction: column; }
  .master__media { flex-basis: auto; min-height: 320px; }
}
@media (max-width: 960px) {
  .pk-hero { height: auto; padding: 72px 0 80px; }
  .pk-tabs { justify-content: flex-start; margin-bottom: 64px; }
  .pk-tailored__title, .summer__title, .wellness__title, .modern__title { white-space: normal; font-size: 32px; line-height: 38px; }
  .pk-featured__lead br, .pk-tailored__lead br, .wellness__lead br, .modern__lead br, .scard__title br { display: none; }
}
@media (max-width: 640px) {
  .pk-hero { padding: 56px 0 64px; }
  .pk-featured, .pk-tailored, .summer, .wellness, .modern { padding: 56px 0; }
  .pk-label, .pk-outline-badge { white-space: normal; height: auto; padding: 4px 10px; letter-spacing: 1px; font-size: 11px; }
  .pk-featured__lead { font-size: 15px; }
  .master__body { padding: 20px; gap: 24px; align-items: stretch; }
  .master__box { padding: 20px 16px; }
  .master__list { grid-template-columns: minmax(0, 1fr); }
  .master__btn { width: 100%; }
  .scard { flex-direction: column; height: auto; }
  .scard__media { flex-basis: 200px; }
  .scard__body { gap: 20px; }
  .wellness__grid { grid-template-columns: minmax(0, 1fr); }
  .treat { padding: 20px; }
  .tele { padding: 24px 20px; }
  .tele__list li { height: auto; min-height: 44px; padding: 10px 12px; }
}