/* =====================================================================
   PACKAGE CARDS, glowing glass look (5 Nov 2026, v4). Loaded LAST.
   The 3D turning animation (js/swap.js) is kept. Only the look of each
   card changes, to match hiruni's picture: separate dark glass cards with
   a glowing coloured edge, the photo on top fading into the card, title +
   gold "Most popular" tag, tagline, glowing coloured line, price, thin
   line, icon list and a gold "Free interior vacuum" box.
   js/pkcard.js adds the classes used here. No words are changed.
   ===================================================================== */

/* the colour of each card: --edge = glowing border, --acc = line under the tagline */
#show .pkc{--gold:#ffb21e;--edge:#3d8bff;--acc:#3d8bff}
#show .pkc.pk-ice {--edge:#5ea8ff;--acc:#e6f0ff}
#show .pkc.pk-gold{--edge:#ff9a1f;--acc:#ffb21e}
#show .pkc.pk-fire{--edge:#d9e1ec;--acc:#ff3b2f}

/* 1. THE CARD: dark glass, rounded, glowing edge */
#packages.pk3d .pkstage .panel.pkc{
  width:min(24vw,340px);padding:0 0 18px;gap:0;display:flex;flex-direction:column;
  background: linear-gradient(
  180deg,
  #091020 0%,
  #091020 45%,
  #081b2e 75%,
  #073452 100%
);
  border:1.5px solid var(--edge)!important;border-radius:16px!important;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 0 22px -4px var(--edge),0 36px 60px -34px rgba(4,10,25,.8)!important;
  -webkit-box-reflect:unset;color:#e8eefb}
#packages.pk3d .pkstage .panel.pkc.now{
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 0 34px -2px var(--edge),0 0 70px -20px var(--edge),0 44px 70px -34px rgba(4,10,25,.85)!important}
#packages.pk3d .pkstage .panel.pkc > *:not(.stagebox){margin-inline:22px}
/* side cards stay solid, just a little darker (no see-through grey) */
#packages.pk3d .pkstage .panel.pkc{opacity:1!important;transition:box-shadow .4s,filter .4s}
#packages.pk3d .pkstage .panel.pkc:not(.now){filter:brightness(.6) saturate(.85)}

/* 2. THE PHOTO: full width at the top, fading into the card at the bottom */
#packages.pk3d .panel.pkc .stagebox{position:relative;aspect-ratio:506/385;flex:0 0 auto;overflow:hidden;border-radius:0!important;background:#081020}
#packages.pk3d .panel.pkc .stagebox img{object-fit:cover;object-position:50% 20%;transform:none!important;filter:none;border-radius:0!important}
#packages.pk3d .panel.pkc .stagebox::before{display:none}
#packages.pk3d .panel.pkc .stagebox::after{content:"";display:block!important;position:absolute;inset:0;height:auto;border-radius:0;filter:none;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 80%,rgba(9,16,32,0.15) 92%,rgb(9,16,32) 100%)}

/* 3. TITLE ROW: big title + gold "Most popular" pill */
#packages.pk3d .panel.pkc .pkhead{position:relative;z-index:3;margin-top:-16px;display:flex;align-items:center;gap:8px;white-space:nowrap}
#packages.pk3d .panel.pkc h3{margin:0;font-size:clamp(19px,1.7vw,25px);font-weight:900;letter-spacing:.01em;text-transform:uppercase;line-height:1.05}
#packages.pk3d .panel.pkc h3,#packages.pk3d .panel.pkc h3 b{color:#fff!important}
#packages.pk3d .panel.pkc .ptop{position:static;display:inline-block;background:var(--gold);color:#1a1000;
  font-size:10px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:99px!important;box-shadow:0 0 16px -3px rgba(255,178,30,.8)}

/* 4. TAGLINE, glowing line, PRICE, thin line */
#packages.pk3d .panel.pkc .sub{display:flex;flex-direction:column;align-items:stretch;gap:0;margin-top:5px;font-size:13px;color:#c4cfe2!important}
#packages.pk3d .panel.pkc .pkline{display:block;padding-bottom:10px;position:relative}
#packages.pk3d .panel.pkc .pkline::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--acc) 20%,var(--acc) 60%,transparent);box-shadow:0 0 10px var(--acc)}
#packages.pk3d .panel.pkc .pkprice{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:10px;padding-bottom:10px;border-bottom:1px solid rgba(200,215,240,.14)}
#packages.pk3d .panel.pkc .sub .price{margin:0;font-size:clamp(23px,2vw,30px);font-weight:800;color:#fff!important;line-height:1}
#packages.pk3d .panel.pkc .sub .price .cur{font-size:.7em;font-weight:700;color:#b9c3d4;margin-right:2px}
#packages.pk3d .panel.pkc.pk-gold .sub .price .cur{color:var(--gold)}
#packages.pk3d .panel.pkc .pktime{font-size:11px;color:#8c9bb5;white-space:nowrap}

/* 5. SERVICES: icon list, 2 columns (1 column on Basic, like the picture) */
#packages.pk3d .panel.pkc ul{display:grid;grid-template-columns:1fr 1fr;gap:9px 10px;margin-top:12px;padding:0;list-style:none}
#packages.pk3d .panel.pkc.one-col ul{grid-template-columns:1fr}
#packages.pk3d .panel.pkc ul li{display:flex;align-items:center;gap:10px;padding:0;background:none!important;border:0!important;border-radius:0!important;
  font-size:12.5px;color:#e6edf8!important;line-height:1.2;white-space:nowrap}
#packages.pk3d .panel.pkc .pki{flex:0 0 auto;width:19px;height:19px;color:#e6edf8}

/* 6. FREE INTERIOR VACUUM: gold box */
#packages.pk3d .panel.pkc ul li.vac{grid-column:1/-1;justify-content:center;margin-top:6px;padding:10px;
  border:1.5px solid var(--gold)!important;border-radius:8px!important;background:rgba(255,178,30,.05)!important;
  color:var(--gold)!important;font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:12px;box-shadow:0 0 14px -6px var(--gold)}
#packages.pk3d .panel.pkc ul li.vac .pki{color:var(--gold);width:22px;height:22px}

/* short laptop screens: shorter photo so the whole card fits */
@media (max-height:820px) and (min-width:761px){
  #packages.pk3d .panel.pkc .stagebox{aspect-ratio:16/10}
  #packages.pk3d .panel.pkc ul{gap:6px 8px;margin-top:9px}}
@media (max-height:760px) and (min-width:761px){
  #packages.pk3d .pkstage .panel.pkc{width:min(22vw,300px)}
  #packages.pk3d .panel.pkc .stagebox{aspect-ratio:16/8}
  #packages.pk3d .panel.pkc .pktime{display:none}}
/* tablets */
@media (max-width:1100px) and (min-width:761px){
  #packages.pk3d .pkstage .panel.pkc{width:36vw}
  #packages.pk3d .pkstage .panel.pkc > *:not(.stagebox){margin-inline:16px}}
/* phones */
@media (max-width:760px){
  #packages.pk3d .pkstage .panel.pkc{width:80vw;padding-bottom:14px;border-radius:14px!important}
  #packages.pk3d .pkstage .panel.pkc > *:not(.stagebox){margin-inline:16px}
  #packages.pk3d .panel.pkc .stagebox{aspect-ratio:16/10}
  #packages.pk3d .panel.pkc h3{font-size:20px}
  #packages.pk3d .panel.pkc .sub{font-size:12px}
  #packages.pk3d .panel.pkc .sub .price{font-size:23px}
  #packages.pk3d .panel.pkc ul{gap:6px 8px;margin-top:9px}
  #packages.pk3d .panel.pkc ul li{font-size:11.5px;gap:7px}
  #packages.pk3d .panel.pkc .pki{width:16px;height:16px}
  #packages.pk3d .panel.pkc ul li.vac{padding:8px;font-size:11px}
}
@media (prefers-reduced-motion:reduce){#packages.pk3d .pkstage .panel.pkc{transition:none}}
/* Remove glowing shadows around package cards */
#packages.pk3d .pkstage .panel.pkc,
#packages.pk3d .pkstage .panel.pkc.now {
    box-shadow: none !important;
}