/* components/price-card.css
   Extracted card / pricing component styles (kept modular)
*/

/* Core price-card layout (shared component) */
.pricing .price-card,
.service-packages .price-card,
.all-packages .price-card{position:relative;overflow:visible;padding-top:34px;min-width:0;display:flex;flex-direction:column;height:100%}
@media (max-width:600px){ .pricing .price-card{padding-top:26px} }

/* tier head — full-width, gradient blue → yellow */
.pricing .price-card .price-head.service-title--pill{display:block;width:100%;box-sizing:border-box;margin:0 0 12px;padding:10px 14px;border-radius:12px;background:linear-gradient(90deg,#62d3ff 0%,#ffd34d 100%);color:#041124;font-weight:800;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,0.25);box-shadow:0 8px 24px rgba(6,40,80,0.06);letter-spacing:0.01em}

/* Tier-specific pill backgrounds (overrides default) */
.pricing .price-card .price-head.service-title--pill.tier-silver{background:linear-gradient(90deg,#eff6ff 0%,#c7d2fe 100%);color:#041124}
.pricing .price-card .price-head.service-title--pill.tier-gold{background:linear-gradient(90deg,#fffaf0 0%,#ffedd5 100%);color:#041124}
.pricing .price-card .price-head.service-title--pill.tier-platinum{background:linear-gradient(90deg,#faf5ff 0%,#e9d5ff 100%);color:#041124}
.pricing .price-card .price-head.service-title--pill.tier-diamond{background:linear-gradient(90deg,#ecfeff 0%,#c7f9ff 100%);color:#041124}
/* generic fallback for any other tier slugs — subtle accent */
.pricing .price-card .price-head.service-title--pill[class*="tier-"]{box-shadow:0 10px 30px rgba(2,6,23,0.10);border:1px solid rgba(255,255,255,0.03)}

/* related layanan pill */
.pricing .price-card .price-service{margin:12px 0;text-align:center;width:100%}
.pricing .price-card .price-service a{display:block;width:100%;box-sizing:border-box;padding:10px 14px;border-radius:12px;background:linear-gradient(90deg,#62d3ff 0%,#3b82f6 100%);color:#ffffff;font-weight:700;font-size:0.95rem;line-height:1;text-shadow:0 1px 0 rgba(0,0,0,0.06);box-shadow:0 8px 24px rgba(6,40,80,0.06);text-decoration:none;border:1px solid rgba(255,255,255,0.04);transition:transform .14s ease,box-shadow .14s ease}
@media (max-width:600px){ .pricing .price-card .price-service a{padding:8px 10px;font-size:0.92rem} }

/* price display */
.service-packages .price{margin-bottom:12px;display:flex;flex-direction:column;align-items:center;gap:6px}
.pricing .price-card .price-current{font-weight:900;font-size:clamp(1.6rem,3.6vw,3rem);line-height:1;color:var(--text)}
.pricing .price-card .price-old{font-size:0.95rem;color:var(--muted);text-decoration:line-through;opacity:0.85}
.service-packages .price .price-label{font-size:0.95rem;color:var(--muted)}

/* gradient separator between price and features (component-level) */
.pricing .price-card .price{position:relative;padding-bottom:14px}
.pricing .price-card .price::after{content:"";display:block;height:4px;width:100%;margin-top:12px;border-radius:999px;background:linear-gradient(90deg,rgba(98,211,255,0.55) 0%, rgba(59,130,246,0.45) 45%, rgba(255,211,77,0.30) 100%);box-shadow:inset 0 1px 6px rgba(0,0,0,0.06);opacity:0.95}
@media (max-width:600px){ .pricing .price-card .price::after{height:3px;margin-top:10px} }

/* top tier-gradient bar inside card (per-tier colors) */
.pricing .price-card:not(.recommended)::after{content:"";position:absolute;left:18px;right:18px;top:10px;height:6px;border-radius:999px;background:linear-gradient(90deg,#62d3ff 0%,#ffd34d 100%);opacity:0.98;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,0.02)}
.pricing .price-card.tier-silver:not(.recommended)::after{background:linear-gradient(90deg,#60a5fa 0%,#7c3aed 100%)}
.pricing .price-card.tier-gold:not(.recommended)::after{background:linear-gradient(90deg,#ffd27a 0%,#fb923c 100%)}
.pricing .price-card.tier-platinum:not(.recommended)::after{background:linear-gradient(90deg,#c7b3ff 0%,#a78bfa 100%)}
.pricing .price-card.tier-diamond:not(.recommended)::after{background:linear-gradient(90deg,#7dd3fc 0%,#06b6d4 100%)}
@media (max-width:600px){ .pricing .price-card:not(.recommended)::after{top:8px;height:4px} }

/* pkg ribbon + badge */
.pricing .price-card .pkg-ribbon{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:linear-gradient(90deg,#ff6b6b 0%,#ff3b30 100%);color:#fff;font-weight:800;font-size:.86rem;box-shadow:0 10px 30px rgba(255,59,48,0.14);text-transform:uppercase;z-index:40;border:1px solid rgba(255,255,255,0.06)}
.pricing .price-card .pkg-ribbon__icon{width:18px;height:18px;display:inline-block;flex-shrink:0;fill:currentColor;color:inherit}
.pricing .price-card .lp-badge{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);z-index:18;display:inline-flex;align-items:center;justify-content:center;padding:6px 14px;border-radius:999px;font-weight:800;background:rgba(255,255,255,0.02);color:inherit;box-shadow:inset 0 -1px 0 rgba(0,0,0,0.04);text-align:center}
.pricing .price-card.has-two-badges .lp-badge{top:56px;transform:translateX(-50%)}

/* layanan-specific: modern rounded badge with small icon */
.svc .lp-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-weight:800;text-transform:uppercase;font-size:.78rem;letter-spacing:.02em;box-shadow:0 10px 30px rgba(2,6,23,0.12);border:1px solid rgba(255,255,255,0.06);transition:transform .18s ease,box-shadow .18s ease}
.svc .lp-badge svg{width:10px;height:10px;flex-shrink:0;opacity:.14;fill:currentColor}
.svc .lp-badge:hover{transform:translateY(-2px);box-shadow:0 22px 60px rgba(2,6,23,0.18)}

/* badge icon (emoji or small svg) */
.lp-badge .lp-badge-icon{display:inline-flex;align-items:center;justify-content:center;margin-right:8px;font-size:1em;line-height:1;opacity:.95}

/* Load More / progressive reveal helpers */
.jz-collapsed{display:none !important}
.jz-revealed{display:block !important}
.services-load-more-wrap{margin-top:18px}
#jz-services-loadmore, #jz-paket-loadmore { min-width:180px; padding:10px 18px; border-radius:10px; }
@media (max-width:600px){ .pricing .price-card .pkg-ribbon{top:6px;padding:6px 10px;font-size:.78rem;transform:translate(-50%,-50%)} .pricing .price-card .pkg-ribbon__icon{width:14px;height:14px} .pricing .price-card .lp-badge{padding:6px 10px} }

/* component: layanan features list (modern checklist) */
.pricing .layanan-card__features, .services .layanan-card__features {list-style:none; padding:0; margin:12px 0 18px;}
.pricing .layanan-card__features li, .services .layanan-card__features li {position:relative;padding-left:40px;margin:14px 0;color:rgba(255,255,255,0.88);font-weight:600;line-height:1.7;letter-spacing:0.01em}
.pricing .layanan-card__features li::before, .services .layanan-card__features li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='%2362d3ff'/><path d='M6 12l4 4 8-8' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-size:contain;background-repeat:no-repeat;background-position:center;box-shadow:0 8px 20px rgba(2,6,23,0.45)}
@media (max-width:720px){ .pricing .layanan-card__features li, .services .layanan-card__features li{padding-left:34px;font-size:0.98rem} .pricing .layanan-card__features li::before, .services .layanan-card__features li::before{width:18px;height:18px} }

/* recommended / accent card (component-level) */
.pricing .price-card.recommended, .service-packages .price-card.recommended{border:2px solid rgba(255,59,48,0.12);background:linear-gradient(180deg, rgba(255,59,48,0.02), rgba(2,6,23,0.6));box-shadow:0 36px 96px rgba(255,59,48,0.16), 0 22px 48px rgba(2,6,23,0.56);transform:translateY(-2px);padding-top:34px;position:relative;overflow:visible}
.pricing .price-card.recommended::before, .service-packages .price-card.recommended::before{content:"";position:absolute;left:12px;right:12px;top:10px;height:6px;border-radius:999px;background:linear-gradient(90deg, rgba(255,107,107,0.28), rgba(255,59,48,0.16));pointer-events:none;opacity:1}
.pricing .price-card.recommended, .pricing .price-card.has-two-badges { padding-top:34px; }
@media (max-width:600px){ .service-packages .price-card.recommended, .pricing .price-card.recommended, .pricing .price-card.has-two-badges { padding-top:26px; } }

/* description / features separator (component-level fallback) */
.pricing .price-card .price-excerpt{padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,0.03);color:var(--muted)}

/* Pricing card CTA layout (component) */
.service-packages .price-body, .pricing .price-body, .all-packages .price-body { flex:1; display:flex; flex-direction:column }
.pricing .svc-cta, .service-packages .svc-cta, .all-packages .svc-cta { margin-top:auto; width:100%; display:flex; justify-content:center; align-items:center; padding:0; text-align:center }
.pricing .svc-cta .btn, .service-packages .svc-cta .btn, .all-packages .svc-cta .btn { margin:0 auto; display:block; width:160px; max-width:90% }
@media (max-width:480px){ .pricing .svc-cta .btn, .service-packages .svc-cta .btn, .all-packages .svc-cta .btn { width:100%; max-width:none; border-radius:10px; padding:12px 16px } }

/* Responsive breakpoints for pricing grids */
@media (min-width:1400px){ .service-packages .pricing-grid{grid-template-columns:repeat(4,1fr)} }
@media (min-width:981px) and (max-width:1399px){ .service-packages .pricing-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:481px) and (max-width:980px){ .service-packages .pricing-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .pricing .pricing-grid, .service-packages .pricing-grid, .all-packages .pricing-grid{grid-template-columns:repeat(2,minmax(140px,1fr)) !important;gap:10px !important} .service-packages .price-card{padding:14px} }

@media (max-width:360px){ .pricing .pricing-grid, .service-packages .pricing-grid, .all-packages .pricing-grid{grid-template-columns:repeat(1,1fr) !important} .service-packages .price-card{padding:12px} }

/* legacy / compact feature lists used across pricing cards */
.pricing .price-card .list,
.jz-card-features ul,
.service-packages .pkg-features,
.pkg-features{list-style:none;padding:0;margin:12px 0}
.pricing .price-card .list li,
.jz-card-features ul li,
.service-packages .pkg-features li,
.pkg-features li{position:relative;padding-left:40px;margin-bottom:10px;color:var(--muted);font-weight:600}
.pricing .price-card .list li::before,
.jz-card-features ul li::before,
.service-packages .pkg-features li::before,
.pkg-features li::before{content:"\2713";position:absolute;left:0;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#62d3ff,#3b82f6);color:#fff;font-size:12px;font-weight:900;box-shadow:0 6px 18px rgba(59,130,246,0.12)}