/* Yuran tadika (/yuran-tadika/) and Cari prasekolah (/cari/, /cari/<negeri>/, /cari/<negeri>/<daerah>/).
   Shared header (dvh) + shared footer around a cream page. Flat fills, 1px soft
   borders; the only soft shadows are on the floating map overlays. Nothing
   animates. Everything is readable without JS; yuran.js / cari.js add the
   filters and the map. */

/* ---- page chrome: no world backdrop (the shared header is static/css/dvh.css) ---- */
body:has(.yc) { background: #F7F1E5; }
body:has(.yc) .world-bg,
body:has(.yc) .world-veil { display: none; }

/* ---- base ---- */
.yc {
  font-family: "Lexend", system-ui, sans-serif; color: #202126; background: #F7F1E5;
  -webkit-text-size-adjust: 100%;
}
.yc h1, .yc h2 { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 800; margin: 0; }
.yc p { margin: 0; }
.yc a { color: #2448D8; }
.yc a:hover { color: #1B38B0; }
.yc button { font-family: inherit; cursor: pointer; }
.yc :focus-visible { outline: 3px solid #2448D8; outline-offset: 2px; }
.yc [hidden] { display: none !important; }
.yc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.yc-h1 { font-size: 50px; line-height: 1.05; letter-spacing: -.02em; color: #2448D8; }
.yc-lede { font-size: 18px; line-height: 1.6; color: #3D3A33; }

/* controls that only work with JS stay hidden without it */
.yc-js-only { display: none; }
html.yc-js .yc-pad { display: flex; }
html.yc-js .yc-seg { display: grid; }
html.yc-js .yc-typechips { display: flex; }
html.yc-js .yc-search { display: block; }
html.yc-js .yc-more-wrap { display: block; }

/* segmented control (sesi / paparan) */
.yc-seg {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px;
  background: #EDE3CF; max-width: 460px;
}
.yc-seg button {
  min-height: 44px; border-radius: 11px; border: 0; background: transparent; color: #5A564C;
  font-size: 14px; font-weight: 600;
}
.yc-seg button[aria-pressed="true"] { background: #FFFFFF; color: #202126; }

/* ================= fees page ================= */
.yc-fees-main {
  max-width: 960px; margin: 0 auto; padding: 28px 24px 72px;
  display: flex; flex-direction: column; gap: 22px;
}
.yc-hero { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.yc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.yc-tags span { padding: 5px 12px; border-radius: 999px; background: #EDE3CF; font-size: 13px; font-weight: 500; }

.yc-card { background: #FFFFFF; border: 1px solid #E6DAC3; border-radius: 22px; overflow: hidden; }
.yc-pad { padding: 20px 28px 16px; flex-direction: column; gap: 12px; }
.yc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.yc-chips button {
  min-height: 44px; padding: 0 14px; border-radius: 999px; background: #FFFFFF; color: #202126;
  border: 1px solid #DCCDAF; font-size: 14px; font-weight: 500;
}
.yc-chips button[aria-pressed="true"] { background: #2448D8; color: #FFFFFF; border-color: #2448D8; }

.yc-axis {
  display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; padding: 8px 28px;
  border-top: 1px solid #F0E8D8; font-size: 12px; color: #6B6556;
}
.yc-ticks { display: flex; justify-content: space-between; }
.yc-prows { list-style: none; margin: 0; padding: 0; }
.yc-prow {
  display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 14px 28px; border-top: 1px solid #F0E8D8;
}
.yc-pwho { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.yc .yc-pname {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; color: #202126;
  text-decoration: none; font-weight: 600; font-size: 15px;
}
.yc .yc-pname:hover { color: #2448D8; text-decoration: underline; }
/* the whole name cell is the tap target (>= 44px tall) */
.yc-pname::after { content: ""; position: absolute; inset: -14px 0; }
.yc-pwhere { font-size: 12px; color: #6B6556; }
.yc-prange { display: flex; flex-direction: column; gap: 5px; }
.yc-track { position: relative; height: 22px; border-radius: 6px; background: #F4EDE0; }
.yc-bar { position: absolute; border-radius: 4px; }
.yc-bar-half { background: #9FB3F0; }
.yc-bar-full { background: #2448D8; }
.yc-bar-ns { background: #B9A57E; }
.yc-pdetail { font-size: 13px; color: #202126; }
.yc-fees .yc-empty { padding: 18px 28px; border-top: 1px solid #F0E8D8; font-size: 14px; color: #5A564C; }
.yc-key {
  display: flex; flex-wrap: wrap; gap: 18px; padding: 12px 28px; border-top: 1px solid #F0E8D8;
  font-size: 13px; color: #5A564C;
}
.yc-key span { display: inline-flex; align-items: center; gap: 6px; }
.yc-key i { display: inline-block; width: 14px; height: 8px; border-radius: 4px; }
.yc-note { padding: 14px 28px 20px; border-top: 1px solid #F0E8D8; font-size: 13px; line-height: 1.55; color: #6B6556; }

.yc-gov { display: flex; flex-direction: column; gap: 12px; }
.yc-gov h2 { font-size: 22px; }
.yc-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.yc-type {
  background: #FFFFFF; border: 1px solid #E6DAC3; border-radius: 18px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.yc-type-name { font-size: 14px; font-weight: 600; color: #5A564C; }
.yc-type-price { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 800; font-size: 24px; color: #202126; }
.yc-type-detail { font-size: 14px; line-height: 1.5; color: #3D3A33; }
.yc-type-src { font-size: 12px; color: #6B6556; border-top: 1px solid #F0E8D8; padding-top: 8px; margin-top: auto; }
.yc .yc-morelink {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 44px;
  font-weight: 600; font-size: 15px;
}

.yc-method, .yc-source {
  border-top: 1px solid #E2D6BE; padding-top: 18px; display: flex; flex-direction: column; gap: 8px;
  font-size: 14px; line-height: 1.6; color: #4A463D; max-width: 760px;
}
.yc-method h2, .yc-source h2 { font-size: 17px; font-weight: 700; color: #202126; }
.yc-method a, .yc-source a {
  display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; font-weight: 600;
}

/* ================= finder ================= */
.yc-find-wrap {
  max-width: 1200px; margin: 0 auto; padding: 28px 24px 72px;
  display: flex; flex-direction: column; gap: 16px;
}
.yc-inset { display: flex; flex-direction: column; }
.yc-find-head { gap: 8px; }
.yc-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: #6B6556; }
.yc-crumbs li + li::before { content: "/"; margin-right: 6px; }
.yc-crumbs .yc-here { color: #202126; }
.yc-find .yc-h1 { font-size: 44px; }
.yc-find .yc-lede { font-size: 17px; line-height: 1.55; max-width: 760px; }

.yc-controls { gap: 10px; }
.yc-controls-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.yc-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.yc .yc-pills a {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px;
  border: 1px solid #DCCDAF; background: #FFFFFF; color: #202126; text-decoration: none;
  font-size: 14px; font-weight: 500;
}
.yc .yc-pills a[aria-current="page"] { background: #202126; color: #FFFFFF; border-color: #202126; font-weight: 600; }
.yc .yc-pills a .yc-count { margin-left: 6px; font-size: 13px; }
.yc .yc-pills a[aria-current="page"] .yc-count { color: #DCDDE3; }
.yc-seg-view { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 220px; max-width: none; }
.yc-seg-view button { font-size: 15px; }
.yc-typechips { flex-wrap: wrap; gap: 8px; }
.yc-typechips button {
  flex: 0 0 auto; min-height: 44px; padding: 0 14px; border-radius: 999px; display: inline-flex;
  align-items: center; gap: 7px; white-space: nowrap; background: #FFFFFF; color: #202126;
  border: 1px solid #DCCDAF; font-size: 14px; font-weight: 600;
}
.yc-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; background: var(--c, #202126); }
.yc-count { font-weight: 700; color: #6B6556; }
.yc-typechips button[aria-pressed="true"] { background: #2448D8; color: #FFFFFF; border-color: #2448D8; }
.yc-typechips button[aria-pressed="true"] .yc-dot { background: #FFFFFF; }
.yc-typechips button[aria-pressed="true"] .yc-count { color: #DCE3FA; }

.yc-shell { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid #E6DAC3; background: #EDE6D8; }

/* view switching: no JS = the list; JS = the map until "Senarai" is picked */
.yc-mapview { display: none; }
html.yc-js .yc-mapview { display: block; }
html.yc-js .yc-listview { display: none; }
html.yc-js .yc-find.is-list .yc-listview { display: block; }
html.yc-js .yc-find.is-list .yc-mapview { display: none; }
.yc-find.no-map .yc-seg-view { display: none; }

/* ---- map ---- */
.yc-map { position: relative; isolation: isolate; height: clamp(560px, 66vw, 760px); background: #EDE6D8; font-family: "Lexend", system-ui, sans-serif; }
.yc-map .leaflet-tile-pane { filter: saturate(.55) brightness(1.03); }
.yc-map .leaflet-top.leaflet-left { top: 54px; }
.yc-map .leaflet-left .leaflet-control { margin-left: 12px; }
.yc-map .leaflet-bar { border: 1px solid #E6DAC3; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 20px rgba(32, 33, 38, .12); }
.yc-map .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; color: #202126; border-bottom: 1px solid #F0E8D8; }
.yc-map .leaflet-bar a:last-child { border-bottom: 0; }
.yc-map .leaflet-control-attribution {
  margin: 0; padding: 3px 8px; background: rgba(255, 255, 255, .85); color: #3D3A33; font-size: 11px;
}
.yc-map .leaflet-control-attribution a { color: #1B38B0; }
.yc-map.leaflet-container::after,
.yc-map.leaflet-gesture-handling-touch-warning::after,
.yc-map.leaflet-gesture-handling-scroll-warning::after {
  animation: none; font-family: "Lexend", system-ui, sans-serif; font-size: 18px; line-height: 1.35;
  text-align: center; background: rgba(32, 33, 38, .62);
}

.yc-bub {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 50%;
  background: #2448D8; color: #FFFFFF; border: 2px solid #FFFFFF; font-family: "Lexend", system-ui, sans-serif;
  font-weight: 700; box-shadow: 0 4px 14px rgba(36, 72, 216, .35); cursor: pointer;
}
.yc-bub:hover { background: #1B38B0; }
.yc-bub.is-on { border: 3px solid #202126; }
.yc-bub:focus-visible { outline: 3px solid #202126; outline-offset: 2px; }

.yc-legend {
  position: absolute; z-index: 5; left: 12px; top: 12px; display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, .94); font-size: 12px; color: #3D3A33;
  box-shadow: 0 6px 20px rgba(32, 33, 38, .12);
}
.yc-legend-dot { width: 18px; height: 18px; border-radius: 50%; background: #2448D8; display: inline-block; flex: 0 0 auto; }
.yc-panel {
  position: absolute; z-index: 5; top: 16px; right: 16px; bottom: 16px; width: 360px; display: flex;
  flex-direction: column; background: #FFFFFF; border-radius: 18px; box-shadow: 0 10px 30px rgba(32, 33, 38, .18);
  overflow: hidden;
}
.yc-panel:focus-visible { outline: 3px solid #2448D8; outline-offset: -3px; }
.yc-panel-head {
  padding: 14px 16px; border-bottom: 1px solid #F0E8D8; display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
}
.yc-panel-who { display: flex; flex-direction: column; gap: 2px; }
.yc-panel-title { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 800; font-size: 18px; }
.yc-panel-sub { font-size: 13px; color: #6B6556; }
.yc-close {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; border: 1px solid #E6DAC3; background: #FFFFFF;
  color: #202126; display: inline-flex; align-items: center; justify-content: center;
}
.yc-panel-body { flex: 1 1 auto; overflow-y: auto; }
.yc-prow2 { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-bottom: 1px solid #F4EEE2; }
.yc-prow2 .yc-row-name { font-size: 15px; }
.yc-prow2 .yc-row-addr { font-size: 13px; }
.yc .yc-prow2 .yc-dirlink {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 600;
}
.yc-hint {
  position: absolute; z-index: 5; right: 16px; bottom: 16px; max-width: 300px; padding: 12px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, .95); box-shadow: 0 6px 20px rgba(32, 33, 38, .12); font-size: 14px; color: #3D3A33;
}

/* ---- list ---- */
.yc-listview { background: #FFFFFF; }
.yc-search { padding: 16px 20px; border-bottom: 1px solid #F0E8D8; }
.yc-search-field {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 14px;
  border: 1px solid #DCCDAF; background: #FBF7EE; color: #6B6556;
}
.yc-search-field:focus-within { outline: 3px solid #2448D8; outline-offset: 2px; }
.yc-search-field input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px;
  color: #202126; outline: none;
}
.yc-list { list-style: none; margin: 0; padding: 0; }
.yc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px;
  border-bottom: 1px solid #F0E8D8;
}
.yc-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.yc-row-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.yc-row-name { font-weight: 600; font-size: 16px; }
.yc-row-addr { font-size: 14px; color: #3D3A33; }
.yc-row-meta { font-size: 12px; color: #6B6556; }
.yc-badge { align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.yc-t-KEMAS { background: #EDE7F6; color: #5B3F9E; }
.yc-t-KPM { background: #FDEBDD; color: #B4461A; }
.yc-t-ISLAMIC { background: #F3EAD6; color: #7A5512; }
.yc-t-PERPADUAN { background: #E1F1EE; color: #1F6B5E; }
.yc-t-PRIVATE { background: #F7E6EF; color: #8E2F5E; }
.yc .yc-dir {
  flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 12px;
  border: 1px solid #DCCDAF; background: #FFFFFF; color: #202126; text-decoration: none; font-size: 14px; font-weight: 500;
}
.yc .yc-dir:hover { background: #FBF7EE; color: #202126; }
.yc-find .yc-empty { padding: 28px 20px; font-size: 15px; color: #5A564C; }
.yc-more-wrap { padding: 16px 20px; }
.yc-more-btn {
  min-height: 46px; padding: 0 20px; border-radius: 12px; border: 1px solid #DCCDAF; background: #FFFFFF;
  font-size: 15px; font-weight: 600; color: #202126;
}

/* ---- national index and state page ---- */
.yc-states {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.yc .yc-state-card {
  min-height: 84px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 16px 20px; border-radius: 18px; border: 1px solid #E6DAC3; background: #FFFFFF; color: #202126;
  text-decoration: none;
}
.yc .yc-state-card:hover { background: #FBF7EE; color: #202126; }
.yc-state-name { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 800; font-size: 20px; }
.yc-state-n { font-size: 14px; color: #5A564C; }

.yc-state .yc-controls-row { flex-direction: column; align-items: flex-start; }
.yc-state .yc-seg-view { order: -1; }
.yc-group { gap: 8px; }
.yc-group h2 { font-size: 22px; }
.yc-group p { font-size: 14px; line-height: 1.55; color: #4A463D; max-width: 760px; }
.yc-grouplist { background: #FFFFFF; margin-top: 4px; }
.yc-grouplist .yc-list .yc-row:last-child { border-bottom: 0; }

/* ================= phone ================= */
@media (max-width: 700px) {
  .yc-h1 { font-size: 36px; }
  .yc-types { grid-template-columns: minmax(0, 1fr); }
  .yc-pad { padding: 16px; }
  .yc-prow { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 16px; }
  .yc-pname::after { inset: -14px -16px; }
  .yc-axis { display: none; }
  .yc-key, .yc-fees .yc-empty { padding-left: 16px; padding-right: 16px; }
  .yc-note { padding: 14px 16px 20px; }

  .yc-find-wrap { padding: 20px 0 56px; }
  .yc-find .yc-h1 { font-size: 32px; }
  .yc-find .yc-lede { font-size: 16px; }
  .yc-inset { padding-left: 16px; padding-right: 16px; }
  .yc-shell { border-radius: 0; border-left: 0; border-right: 0; }
  .yc-map { height: 560px; }
  .yc-pills-many { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 4px; scrollbar-width: none; }
  .yc-pills-many::-webkit-scrollbar { display: none; }
  .yc-pills-many a { flex: 0 0 auto; white-space: nowrap; }
  .yc-state-name { font-size: 18px; }
  .yc-states { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .yc .yc-state-card { padding: 14px 16px; }
  .yc-typechips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .yc-typechips::-webkit-scrollbar { display: none; }
  .yc-row { flex-direction: column; align-items: flex-start; }
  .yc-legend { font-size: 11px; padding: 8px 10px; }
  /* bottom sheet over the map; the OSM credit stays visible under it */
  .yc-panel { top: auto; left: 8px; right: 8px; bottom: 28px; width: auto; max-height: 62%; }
  .yc-hint { left: 8px; right: 8px; bottom: 28px; max-width: none; }
}