/*
 * CSS custom bekas Elementor & wp:html, dipakai lintas halaman.
 * Design tokens: biru #157CBD, emas #D9BB27, Montserrat.
 */
:root{
	--lph-blue: #157CBD;
	--lph-gold: #D9BB27;
	--lph-font: "Montserrat", Sans-serif;
}

/* Home page only: OceanWP adds a 40px margin-bottom to .content-area below
   959px width (@media max-width:959px in style.min.css) - meant to space
   content from a stacked sidebar, but Home has none and the gap shows up
   as dead space between the closing CTA and the footer on mobile/tablet. */
.home .content-area{ margin-bottom: 0 !important; }

/* Logo mitra ("Didukung oleh") - gambar aslinya besar (~300px, ukuran
   "medium"), jadi tanpa ini satu logo bisa memenuhi layar HP. Dipaksa kecil
   dan proporsional di semua ukuran layar lewat clamp(), tetap dalam satu
   baris, bukan cuma di-stack seperti kolom biasa. */
.lph-partner-logos{ flex-wrap: nowrap !important; gap: 12px; }
.lph-partner-logos img{ width: clamp(56px, 18vw, 130px); height: auto; }

/* Smart sticky header - OceanWP's own CSS already makes #site-header
   position:sticky (always pinned); this just hides it on scroll-down and
   brings it back on scroll-up (class toggled by sticky-header.js). */
#site-header{ transition: transform .3s ease; }
body.lph-sticky-hidden #site-header{ transform: translateY(-100%); }

/* Bar judul seksi biru (dulu container Elementor) */
.lph-section-bar{
	background: var(--lph-blue);
	border-radius: 8px;
	padding: 14px 20px;
	text-align: center;
	margin-bottom: 24px;
}
.lph-section-bar h2{
	font-family: var(--lph-font);
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: #fff !important;
	margin: 0 !important;
}

/* Kartu putih generik (dulu .lph-keunggulan-item), dipakai ulang oleh pattern & carousel lain */
.lph-card{
	background: #fff;
	border: 1px solid #f0f0f0;
	border-radius: 12px;
	padding: 22px 20px;
	box-shadow: 0 4px 15px rgba(0,0,0,.05);
	transition: transform .3s ease, box-shadow .3s ease;
	height: 100%;
}
.lph-card:hover{
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(0,0,0,.1);
}
.lph-card h3{
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	color: #222 !important;
	margin: 0 0 8px !important;
}
.lph-card p{ font-size: 14px; line-height: 1.6; color: #555; margin: 0; }

.lph-card-icon{
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
	border-radius: 50%;
	background: linear-gradient(135deg, #157cbd, #4ca1e6);
	box-shadow: 0 4px 10px rgba(21,124,189,.2);
}
.lph-card-icon svg{ width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lph-card-icon i{ font-size: 20px; color: #fff; line-height: 1; }

/* Tombol CTA (dulu elementor button background_color custom) */
.lph-btn-gold.wp-block-button .wp-block-button__link{ background-color: var(--lph-gold); color: #000; }
.lph-btn-blue.wp-block-button .wp-block-button__link{ background-color: var(--lph-blue); }

/* ==========================================================================
   Carousel langkah horizontal (dulu widget html "Tugas" & "Alur" terpisah -
   satu CSS dipakai keduanya + halaman Alur Sertifikasi lewat class
   .halal-flow-*, jadi ukuran kotak selalu identik di semua tempat)
   ========================================================================== */
.halal-flow-widget-wrapper{ position: relative; max-width: 1200px; margin: 16px auto; }

.halal-flow-steps{
	display: flex;
	align-items: stretch;
	gap: 20px;
	overflow-x: auto;
	padding: 10px 5px 25px;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.halal-flow-steps::-webkit-scrollbar{ display: none; }

/* .lph-card gives the white box/border/shadow/hover, including height:100% -
   but a % height needs a definite parent height to resolve against, which a
   flex item without one doesn't have, so it silently breaks stretch here.
   height:auto lets the explicit align-items:stretch above do the equalizing
   instead. */
.halal-flow-card.lph-card{ flex: 0 0 280px; height: auto; align-items: center; text-align: center; position: relative; overflow: hidden; }
@media (max-width: 600px){ .halal-flow-card.lph-card{ flex: 0 0 85%; } }

/* Big pale watermark number - by design it sits low/behind the text (very
   light color, doesn't hurt readability), not a badge. */
.halal-flow-card .step-number{
	position: absolute;
	bottom: -5px;
	left: 10px;
	font-size: 80px;
	font-weight: 900;
	color: #f4f8fb;
	z-index: 1;
	line-height: 1;
	pointer-events: none;
}
.halal-flow-card .lph-card-icon{ margin: 0 auto 18px; position: relative; z-index: 2; }
.halal-flow-card h3,
.halal-flow-card p{ position: relative; z-index: 2; }

.halal-nav-buttons{
	display: none;
	position: absolute;
	width: 100%;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	justify-content: space-between;
	pointer-events: none;
	z-index: 10;
}
.halal-nav-btn{
	width: 45px;
	height: 45px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #e0e0e0;
	box-shadow: 0 4px 10px rgba(0,0,0,.1);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	transition: transform .2s ease, box-shadow .2s ease;
}
.halal-nav-btn:hover{ transform: scale(1.05); box-shadow: 0 6px 15px rgba(0,0,0,.15); }
.halal-nav-btn svg{ width: 20px; height: 20px; fill: #157cbd; }

.halal-scroll-indicator-container{ padding: 10px 20px; display: flex; justify-content: center; }
.halal-scroll-indicator-track{
	width: 100%;
	height: 4px;
	background: #e0e0e0;
	border-radius: 2px;
	position: relative;
	overflow: hidden;
}
.halal-scroll-indicator-thumb{
	height: 100%;
	background: var(--lph-blue);
	border-radius: 2px;
	position: absolute;
	top: 0;
	left: 0;
	transition: left .1s linear, width .2s ease;
}
@media (min-width: 901px){
	.halal-scroll-indicator-container{ display: none; }
	.halal-nav-buttons{ display: flex; }
}

/* Block options: sembunyikan panah nav / indikator scroll */
.halal-flow-widget-wrapper.hide-nav .halal-nav-buttons{ display: none !important; }
.halal-flow-widget-wrapper.hide-indicator .halal-scroll-indicator-container{ display: none !important; }

/* ==========================================================================
   Checklist syarat (dulu widget html "syarat-halal-wrapper", dipakai di Home
   dan halaman Syarat Pendaftaran)
   ========================================================================== */
.syarat-list{ list-style: none; display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0; padding: 0; }
@media (min-width: 768px){ .syarat-list{ grid-template-columns: repeat(2, 1fr); gap: 16px; } }
.syarat-item.lph-card{ flex-direction: row; align-items: center; padding: 18px 16px; }
.syarat-item .lph-card-icon{ width: 38px; height: 38px; margin: 0 12px 0 0; flex-shrink: 0; }
.syarat-item .lph-card-icon svg{ width: 16px; height: 16px; }
.syarat-content{ font-size: 14px; color: #444; line-height: 1.5; font-weight: 500; }

/* ==========================================================================
   Hero (Cover block di halaman Home)
   ========================================================================== */
.lph-hero h1{ font-size: 24px !important; line-height: 1.3 !important; }
.lph-hero h2{ font-size: 16px !important; line-height: 1.4 !important; }

/* ==========================================================================
   Kartu Biaya Sertifikasi (lph/biaya-cards + lph/biaya-card)
   ========================================================================== */
.lph-biaya-head{ text-align: center; margin-bottom: 40px; }

.lph-biaya-eyebrow{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--lph-blue);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: 12px;
}
.lph-biaya-eyebrow i{ font-size: 15px; color: var(--lph-blue); line-height: 1; }

.lph-biaya-title{ margin: 0 0 12px; font-size: 34px; font-weight: 800; color: #14202b; line-height: 1.2; }
.lph-biaya-desc{ margin: 0 auto; max-width: 560px; font-size: 15px; line-height: 1.6; color: #5a6672; }

.lph-biaya-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }

.lph-biaya-card{
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e6ebf0;
	border-radius: 12px;
	padding: 32px 26px;
	box-shadow: 0 4px 15px rgba(0,0,0,.05);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
	position: relative;
	text-align: center;
	height: 100%;
	/* lets the price scale to the card width instead of wrapping in narrow columns */
	container-type: inline-size;
}
.lph-biaya-card:hover{ transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,.1); }
.lph-biaya-card.is-featured{ border-width: 2px; border-color: var(--lph-blue); box-shadow: 0 10px 28px rgba(21,124,189,.18); }

.lph-biaya-badge{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	background: linear-gradient(135deg, #157cbd, #4ca1e6);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 4px 10px rgba(21,124,189,.25);
}

.lph-biaya-name{ font-size: 18px; font-weight: 700; color: #14202b; margin-bottom: 14px; }

.lph-biaya-price-row{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px; margin-bottom: 22px; }
.lph-biaya-price{
	font-size: 27px;
	font-size: clamp(19px, 8.4cqi, 27px);
	font-weight: 800;
	color: var(--lph-blue);
	line-height: 1.15;
}
.lph-biaya-suffix{ font-size: 13px; color: #7a8794; white-space: nowrap; }

.lph-biaya-features{ list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; text-align: left; flex-grow: 1; }
.lph-biaya-features li{ display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: #46525e; }
.lph-biaya-features svg{ flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: var(--lph-blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.lph-biaya-btn{
	display: block;
	margin-top: auto;
	padding: 12px 22px;
	border: 1.5px solid var(--lph-blue);
	border-radius: 999px;
	background: transparent;
	color: var(--lph-blue);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
a.lph-biaya-btn:hover{ background: var(--lph-blue); color: #fff; text-decoration: none; }
.lph-biaya-card.is-featured .lph-biaya-btn{ background: linear-gradient(135deg, #157cbd, #4ca1e6); border-color: transparent; color: #fff; }

@media (max-width: 1024px){ .lph-biaya-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px){
	.lph-biaya-grid{ grid-template-columns: 1fr; }
	.lph-biaya-title{ font-size: 26px; }
}