/* =============================================================================
   SERVICES PAGE CARD MATCH  —  Radiology Department + Pharmacy
   -----------------------------------------------------------------------------
   TASK: The provider cards on the RADIOLOGY DEPARTMENT page ("Select Center")
   and the PHARMACY page ("Nearby Pharmacies") must be 100% identical in style,
   size and design to the HOME PAGE service cards (.grid / .service-card in
   styles.css) — same width, height, radius, image band, padding and typography,
   on phone and on desktop.

   HOW IT WORKS
   ------------
   Both pages already emit a shared card DOM that mirrors the home card:

       .svc-match-card                       ==  .service-card
         > .smc-img   > img | <i>            ==  .img-wrap > img
              + .smc-chip / .*-delivery      ==  .cat-chip
         > .smc-body  > .smc-title           ==  .sc-body > .label
                      + .smc-desc            ==  .sc-desc
                      + .smc-tags            (extra meta row)
         > .smc-cta                          (view link)

   This stylesheet gives `.svc-match-card` and every `.smc-*` child the EXACT
   same geometry as the home `.service-card` (values copied 1:1 from styles.css),
   and makes the two list grids (`.rad-centers-grid`, `.pharm-store-grid`)
   behave exactly like the home `.grid`.

   It is loaded LAST in <head> and uses !important so it overrides the earlier
   per-service rules in unified-cards.css / radiology.css / styles.css that were
   forcing a different, smaller card size on these two pages.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   0) CONTAINER NORMALISATION  —  make each page wrapper give its grid the SAME
      effective 16px horizontal inset as the home ".page", so the card WIDTH
      comes out identical to home (183px @ 412 phone).

      Two different host containers are involved:
      • HOME grid  : lives in  #app .page (padding:16px)  → 16px inset already.
      • RADIOLOGY  : separate portal route /radiology-department. Grid lives in
                     .rad-page → .rad-centers-section, both with NO horizontal
                     inset. The page was also capped at 480px. We drop the cap
                     and add the 16px inset on the RADIOLOGY grid itself.
      • PHARMACY   : main SPA, inside .page (already 16px) but wrapped in
                     .pharm-nearby-section (a 18px-padded card box). We strip
                     the section box + its padding so the grid inherits ONLY the
                     .page 16px inset — exactly like the home grid → NO extra
                     inset on the pharmacy grid.
   -------------------------------------------------------------------------- */
.rad-page{
  max-width: none !important;   /* was 480px → match home full-bleed page      */
  margin: 0 !important;
}
.rad-centers-section{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Pharmacy: strip the section's card styling so the grid spans the page like
   home. Keep the section title; drop the box background/border and inset. */
.pharm-nearby-section{
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-top: 4px !important;
}

/* -----------------------------------------------------------------------------
   1) GRID CONTAINERS  ==  home ".grid"  (2-up, gap 14, stretch)
      Home mobile : grid-template-columns: repeat(2,1fr); gap:14px; stretch
   -------------------------------------------------------------------------- */
.rad-centers-grid,          /* Radiology "Select Center" */
.pharm-store-grid{          /* Pharmacy "Nearby Pharmacies" */
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
  align-items: stretch !important;   /* every card same height, like home */
  margin: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
/* Radiology grid: its host (.rad-page / .rad-centers-section) is already inset
   to the same box width as the home grid, so the grid itself adds NO inset —
   exactly like the home .grid (0 padding) → identical card width. */
.rad-centers-grid{
  padding: 0 !important;
}
/* Pharmacy grid inherits the 16px inset from the surrounding .page (its
   .pharm-nearby-section box was zeroed above), so it must add NO inset itself. */
.pharm-store-grid{
  padding: 0 !important;
}

/* Loading / empty placeholders always span the whole row */
.rad-centers-grid .rad-empty,
.rad-centers-grid .ads-loading,
.rad-centers-grid .ads-empty,
.pharm-store-grid .ads-loading,
.pharm-store-grid .ads-empty,
.pharm-store-grid .rad-empty{
  grid-column: 1 / -1 !important;
}

/* -----------------------------------------------------------------------------
   2) CARD SHELL  ==  home ".service-card"  (styles.css lines 146-153)
   -------------------------------------------------------------------------- */
.svc-match-card{
  position: relative !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  background: linear-gradient(180deg, var(--surface), var(--surface-2)) !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.28) !important;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important;
  /* neutralise unified-cards.css sizing (min-height / height / padding / margin) */
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  /* neutralise styles.css .pharm-store-card{gap:10px} which otherwise inserts a
     10px flex gap between the image band and the body, making the card 10px
     taller than the home .service-card (which has no such gap). */
  gap: 0 !important;
}
.svc-match-card:active{ transform: scale(.985) !important; }

/* -----------------------------------------------------------------------------
   3) IMAGE BAND  ==  home ".img-wrap" + img  (aspect-ratio 16/10 gradient)
   -------------------------------------------------------------------------- */
.svc-match-card .smc-img{
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  height: auto !important;
  min-height: 0 !important;
  background: var(--surface-2) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  display: block !important;
  flex-shrink: 0 !important;
}
.svc-match-card .smc-img img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  transition: transform .5s ease !important;
}
.svc-match-card:active .smc-img img{ transform: scale(1.06) !important; }

/* Bottom gradient overlay identical to home .img-wrap::after */
.svc-match-card .smc-img::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(8,16,23,0) 45%, rgba(8,16,23,.55) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Icon fallback (no photo) fills the band centred, keeping the home geometry */
.svc-match-card .smc-img > i{
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 42px !important;
  color: var(--teal) !important;
  background: var(--surface-2) !important;
  z-index: 0 !important;
}

/* Rating chip == home ".cat-chip" (bottom-left pill over the image) */
.svc-match-card .smc-chip{
  position: absolute !important;
  left: 10px !important;
  bottom: 10px !important;
  top: auto !important;
  right: auto !important;
  z-index: 2 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  background: rgba(20,184,166,.92) !important;
  color: #03211d !important;
  box-shadow: 0 3px 8px rgba(0,0,0,.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  border: none !important;
}
.svc-match-card .smc-chip i{ color: #03211d !important; font-size: 10px !important; }

/* "Delivery" badge (pharmacy) sits top-right over the image, brand pill */
.svc-match-card .pharm-store-delivery{
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 2 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  background: rgba(20,184,166,.92) !important;
  color: #03211d !important;
  box-shadow: 0 3px 8px rgba(0,0,0,.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  border: none !important;
  line-height: 1.2 !important;
}
.svc-match-card .pharm-store-delivery i{ color: #03211d !important; font-size: 10px !important; }

/* -----------------------------------------------------------------------------
   4) BODY  ==  home ".sc-body" + ".label" + ".sc-desc"
   -------------------------------------------------------------------------- */
.svc-match-card .smc-body{
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 12px 13px 13px !important;
  gap: 0 !important;
  min-width: 0 !important;
}
.svc-match-card .smc-title{
  font-size: 14.5px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -.2px !important;
  color: var(--text) !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.svc-match-card .smc-desc{
  font-size: 11.5px !important;
  color: var(--muted) !important;
  line-height: 1.45 !important;
  margin: 5px 0 0 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  white-space: normal !important;
  text-overflow: clip !important;
}
.svc-match-card .smc-desc i{ color: var(--muted) !important; margin-right: 3px !important; }

/* Meta tag row (Mobile / 24-7 / hours) — subtle brand chips under the desc */
.svc-match-card .smc-tags{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 9px 0 0 0 !important;
  padding: 0 !important;
}
.svc-match-card .smc-tag{
  font-size: 10.5px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: rgba(20,184,166,.14) !important;
  color: var(--teal) !important;
  border: 1px solid rgba(20,184,166,.30) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}
.svc-match-card .smc-tag i{ color: var(--teal) !important; font-size: 9.5px !important; }

/* -----------------------------------------------------------------------------
   5) VIEW ACTION  ==  home ".sc-cta" gradient pill, pinned to the card bottom
      (margin-top:auto keeps it aligned across every card in a row)
   -------------------------------------------------------------------------- */
.svc-match-card .smc-cta{
  margin: 11px 13px 13px !important;
  margin-top: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: #03211d !important;
  background: linear-gradient(135deg, var(--teal), var(--teal-dark)) !important;
  padding: 9px 12px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(20,184,166,.28) !important;
  transition: filter .2s, transform .2s !important;
  border: none !important;
  width: auto !important;
}
.svc-match-card .smc-cta i{ font-size: 11px !important; transition: transform .25s !important; color: #03211d !important; }
.svc-match-card:active .smc-cta{ filter: brightness(1.05) !important; }

/* -----------------------------------------------------------------------------
   6) DESKTOP / TABLET  ==  home ".grid" @media (min-width:768px)
      Home switches to repeat(4,1fr) gap:22px and enlarges card typography.
   -------------------------------------------------------------------------- */
@media (min-width: 768px){
  /* Home desktop: .page padding 28px 6vw + .grid max-width:1400px, left-aligned. */
  .rad-centers-grid,
  .pharm-store-grid{
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 22px !important;
    max-width: 1400px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  /* Both grids inherit their desktop inset from the surrounding page container
     (radiology: .rad-content/.rad-book-tab; pharmacy: .page 28px 6vw), so the
     grids themselves add no horizontal inset — same as the home .grid. */
  .rad-centers-grid{ padding: 4px 0 0 !important; }
  .pharm-store-grid{ padding: 4px 0 0 !important; }
  .svc-match-card:hover{
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,.45) !important;
    border-color: var(--teal-dark) !important;
  }
  .svc-match-card:hover .smc-img img{ transform: scale(1.07) !important; }
  .svc-match-card:hover .smc-cta{ filter: brightness(1.08) !important; box-shadow: 0 8px 20px rgba(20,184,166,.4) !important; }
  .svc-match-card:hover .smc-cta i{ transform: translateX(4px) !important; }
  .svc-match-card .smc-title{ font-size: 16px !important; }
  .svc-match-card .smc-desc{ font-size: 12.5px !important; }
}