/* Ciputra Layanan — the handful of things that aren't already covered by
   "Acuity Doctor Booking"'s booking.css/archive.css (loaded as a dependency
   when that plugin is active; see class-cl-render.php). Everything else
   (topbar, filter sidebar, card grid, id-card, sections, breadcrumb) reuses
   those stylesheets' classes directly so /layanan/ matches /dokter/ exactly.

   If "Acuity Doctor Booking" is inactive, these rules provide a bare-minimum
   fallback so the directory isn't completely unstyled — not a full design
   system replacement. */

.cl-price-badge {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--adb-green-d, #0e7d51);
	background: var(--adb-soft, #f7f7fa);
	border-radius: 999px;
	padding: 3px 10px;
	margin: 0 0 10px;
}
.cl-price-badge-detail {
	display: block;
	text-align: center;
	margin: 4px auto 0;
}

/* Secondary CTA on the detail page's id-card (WhatsApp), styled to sit
   alongside .adb-buatjanji (the primary "Buat Janji" button) without
   competing with it visually. */
.cl-wa-btn,
.cl-wa-btn:link,
.cl-wa-btn:visited,
.cl-wa-btn:hover,
.cl-wa-btn:focus,
.cl-wa-btn:active {
	display: block;
	margin-top: 12px;
	text-align: center;
	text-decoration: none;
	background: #fff;
	color: var(--adb-green-d, #0e7d51);
	border: 1.5px solid var(--adb-green, #159d68);
	font-weight: 700;
	font-size: 15px;
	padding: 13px 20px;
	border-radius: 12px;
	transition: background .15s;
	-webkit-tap-highlight-color: transparent;
}
.cl-wa-btn:hover { background: var(--adb-soft, #f7f7fa); }
.cl-wa-btn:focus-visible { outline: 2px solid var(--adb-green-d, #0e7d51); outline-offset: 2px; }

/* Big, unmissable closing CTA for services with no Acuity calendar (no
   self-service booking flow) — shown after Syarat & Ketentuan so a visitor
   who reads the whole page always has an obvious next action. Explicit color
   on every pseudo-class for the same reason as .adb-buatjanji/.cl-wa-btn:
   the browser's default a:visited rule otherwise wins over a plain class
   selector once the link has been clicked. */
.cl-wa-cta-big,
.cl-wa-cta-big:link,
.cl-wa-cta-big:visited,
.cl-wa-cta-big:hover,
.cl-wa-cta-big:focus,
.cl-wa-cta-big:active {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 24px;
	text-align: center;
	text-decoration: none;
	background: var(--adb-green, #159d68);
	color: #fff;
	font-weight: 700;
	font-size: 17px;
	padding: 18px 24px;
	border-radius: 14px;
	box-shadow: 0 10px 24px rgba(21, 157, 104, .25);
	transition: filter .15s, transform .12s;
	-webkit-tap-highlight-color: transparent;
}
.cl-wa-cta-big svg { width: 22px; height: 22px; flex: 0 0 auto; }
.cl-wa-cta-big:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cl-wa-cta-big:focus-visible { outline: 2px solid var(--adb-green-d, #0e7d51); outline-offset: 3px; }
@media (max-width: 480px) {
	.cl-wa-cta-big { font-size: 15px; padding: 16px 18px; }
}

/* "Layanan Terkait" — sits like a full-width .adb-section, but outside the
   two-column .adb-doctor-grid so the card row can use the full page width. */
.cl-related { margin-top: 40px; }
.cl-related .adb-doc-grid { margin-top: 4px; }

/* ---- Minimal fallback if "Acuity Doctor Booking" is not active ---- */
.cl-topbar-fallback { padding: 16px 24px; text-align: center; border-bottom: 1px solid #e6e7ec; }
.cl-topbar-fallback a { text-decoration: none; font-weight: 700; color: #2d2d3a; }
.cl-footer-fallback { padding: 24px; text-align: center; font-size: 13px; color: #6d6d7d; border-top: 1px solid #e6e7ec; }