/* Halaman Cek Service + Cara mengetahui nomor service (dipakai index.html). Gambar ada di folder ini (assets/Desain). */
.cs-page{--red:#d91c2b;--red-dark:#b8141f;--ink:#13213a;--muted:#5b6475;font-family:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#fff;line-height:1.5;-webkit-font-smoothing:antialiased}
.cs-page *,.cs-page *::before,.cs-page *::after{box-sizing:border-box}
.cs-page a{color:inherit}
.cs-page :focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:6px}
.cs{position:relative;isolation:isolate;overflow:hidden;min-height:640px;min-height:max(640px,calc(100svh - 110px));display:flex;flex-direction:column;align-items:center;padding:48px 20px 104px;text-align:center}
.cs::before{content:"";position:absolute;inset:-24px;z-index:-2;background:url('/assets/service-e17/bg-toko.jpg') center/cover no-repeat}

/* Cek Service */
.cs-logo{display:block;width:min(290px,70vw);height:auto}
.cs-title{max-width:12em;margin:56px 0 0;font-size:clamp(2.5rem,6vw,4.5rem)!important;line-height:1.2!important;font-weight:600;letter-spacing:-.01em;color:#fff}
.cs-search{display:flex;align-items:center;gap:12px;width:min(780px,100%);margin:40px 0 0;padding:10px 10px 10px 34px;border-radius:999px;background:#fff;color:var(--ink);box-shadow:0 10px 40px rgba(0,0,0,.28)}
.cs-search:focus-within{box-shadow:0 0 0 4px rgba(255,255,255,.45),0 10px 40px rgba(0,0,0,.28)}
.cs-field{flex:1;min-width:0;display:flex;align-items:center;gap:16px}
.cs-field svg{flex:none;width:26px;height:26px}
.cs-field input{flex:1;min-width:0;height:56px;border:0;outline:0;background:transparent;box-shadow:none;color:var(--ink);font:500 20px/1 var(--font,"Outfit",system-ui,sans-serif);padding:0}
.cs-field input::placeholder{color:var(--muted);opacity:1}
.cs-btn{flex:none;height:56px;padding:0 40px;border:0;border-radius:999px;background:var(--red);color:#fff;font:600 20px/1 "Outfit",system-ui,sans-serif;cursor:pointer;transition:background .15s}
.cs-btn:hover{background:var(--red-dark)}
.cs-msg{width:min(780px,100%);margin:16px 0 0;padding:12px 20px;border-radius:16px;background:rgba(7,13,38,.78);font-size:17px}
.cs-msg[hidden]{display:none}
.cs-msg.err{box-shadow:inset 0 0 0 1px #ff5a6a}
.cs-help{display:inline-flex;align-items:center;gap:10px;margin-top:30px;font-size:19px;font-weight:500;text-decoration:none}
.cs-help span{text-decoration:underline;text-underline-offset:4px}
.cs-help svg{flex:none;width:20px;height:20px}
.cs-wa{margin:48px 0 0;font-size:18px;color:rgba(255,255,255,.92)}

/* Cara mengetahui nomor service */
.cs-guide{justify-content:center;align-items:stretch;padding:56px 24px 104px;text-align:left}
.cs-guide::before{filter:blur(6px)}
.cs-guide::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(7,13,38,.68)}
.cs-wrap{width:100%;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:56px;align-items:center}
.cs-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:24px;font-size:16px;color:rgba(255,255,255,.85)}
.cs-back svg{width:18px;height:18px}
.cs-h{margin:0 0 40px;font-size:clamp(2.2rem,4.4vw,3.4rem)!important;line-height:1.1!important;font-weight:600;letter-spacing:-.01em;color:#fff}
.cs-steps{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.cs-steps li{display:flex;align-items:center;gap:20px;margin:0;padding:20px 24px;border:1px solid rgba(255,255,255,.2);border-radius:24px;background:rgba(255,255,255,.07);font-size:18px;line-height:1.5}
.cs-num{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--red);font-size:18px;font-weight:700}
.cs-hl{color:#ff5a6a;font-weight:600}
.cs-note{margin:36px 0 0;font-size:17px;color:rgba(255,255,255,.88)}
.cs-nota{display:block;width:100%;max-width:600px;height:auto;justify-self:center}

@media(max-width:900px){.cs-wrap{grid-template-columns:1fr;gap:40px}.cs-nota{max-width:520px}}
@media(max-width:600px){
  .cs{padding-top:32px}
  .cs-title{margin-top:40px}
  .cs-search{flex-direction:column;align-items:stretch;gap:10px;padding:14px;border-radius:28px}
  .cs-field{padding:0 6px}
  .cs-btn{width:100%}
  .cs-wa{margin-top:40px}
  .cs-guide{padding:32px 20px 104px}
  .cs-steps li{padding:16px 18px;gap:16px;border-radius:20px}
}

/* E17: keep WhatsApp contact affordance, remove floating consultation text only. */
#xp-consult-tip25,#consultation-tip,.xp-consult-tip25 {display:none!important}
.cs-page .cs-phone-field{flex:0 1 160px;min-width:115px;border-left:1px solid #dce6ee;padding-left:14px}
.cs-page .cs-phone-field input{font-size:16px;min-width:0;width:100%}
.cs-page #cek-phone4::placeholder{font-size:14px}
@media(max-width:600px){.cs-page .cs-phone-field{border-left:0;border-top:1px solid #dce6ee;padding:8px 6px 0;flex:1 1 auto}.cs-page .cs-title{font-size:clamp(2rem,7vw,2.8rem)!important}.cs-page .cs{min-height:max(560px,calc(100svh - 110px))}.cs-page .cs-help{font-size:16px}}

/* E31: verified status display, isolated from store/cart styling. */
.cs-page .xs31-result{width:min(780px,100%);margin:18px 0 0;padding:18px 22px;background:rgba(8,20,44,.91);border:1px solid rgba(255,255,255,.3);border-radius:18px;color:#fff;text-align:left;overflow-wrap:anywhere}
.cs-page .xs31-result[hidden]{display:none!important}
.cs-page .xs30-status-heading{margin:0 0 9px;font-size:16px;opacity:.95}
.cs-page .xs30-status-state{margin:0 0 12px;font-size:clamp(18px,3vw,23px);line-height:1.3;font-weight:800;color:#fff}
.cs-page .xs30-status-note,.cs-page .xs30-discount-note,.cs-page .xs30-hours,.cs-page .xs30-contact{margin:12px 0 0;font-size:15px;line-height:1.55}
.cs-page .xs30-cost-heading{margin:22px 0 10px;font-size:17px;color:#fff;font-weight:700}
.cs-page .xs30-cost-lines{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.cs-page .xs30-cost-item{display:flex;gap:14px;align-items:baseline;justify-content:space-between;margin:0;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.cs-page .xs30-cost-description{flex:1;min-width:0}
.cs-page .xs30-cost-amount{white-space:nowrap;font-weight:600}
.cs-page .xs30-cost-total{margin:13px 0 0;text-align:right;font-size:18px}
.cs-page .xs31-result a{color:#95e2ff;text-decoration:underline}
@media(max-width:600px){.cs-page .xs31-result{padding:16px 14px;border-radius:13px}.cs-page .xs30-cost-item{gap:8px}.cs-page .xs30-cost-amount{font-size:14px}}

/* E36: Cek Service UX. Local to the Cek Service view; header/navigation and guide untouched. */
.cs-page .cs-check{
  min-height:max(630px,calc(100svh - 112px));
  padding:clamp(68px,14vh,154px) clamp(14px,2.5vw,34px) 112px;
  justify-content:flex-start;
}
.cs-page .cs-check::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(9,20,42,.52),rgba(9,20,42,.58));
}
.cs-page .cs-check .cs-title{
  max-width:100%;margin:0;
  font-size:clamp(1.8rem,3.2vw,2.85rem)!important;
  font-weight:700;line-height:1.18!important;letter-spacing:-.017em;
  text-wrap:balance;
}
.cs-page .cs-check .cs-search{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(104px,135px) minmax(130px,200px);
  align-items:center;gap:14px;
  width:min(920px,100%);margin:28px 0 0;
  padding:9px 10px 9px 28px;
  border-radius:999px;
}
.cs-page .cs-check .cs-field{min-width:0;gap:12px;padding:0}
.cs-page .cs-check .cs-field svg{width:24px;height:24px}
.cs-page .cs-check #no-service{
  width:100%;min-width:0;
  /* Follows available viewport size; no fixed 20px placeholder that truncates. */
  font-size:clamp(10px,calc(6px + .88vw),18px);
  font-weight:500;
}
.cs-page .cs-check .cs-phone-field{
  min-width:0;flex:auto;
  border-left:1px solid #d4dbe5;
  border-top:0;padding:0 0 0 18px;
}
.cs-page .cs-check #cek-phone4{height:54px;font-size:clamp(13px,1.2vw,16px)}
.cs-page .cs-check #cek-phone4::placeholder{font-size:clamp(11px,1.08vw,14px)}
.cs-page .cs-check .cs-btn{width:100%;height:60px;padding:0 13px;font-size:clamp(15px,1.4vw,19px)}
.cs-page .cs-check .cs-msg{width:min(920px,100%)}
.cs-page .cs-check .cs-help{margin-top:26px}
.cs-page .cs-check .cs-wa{margin-top:36px}
.cs-page .cs-check.cs-has-result .cs-help,
.cs-page .cs-check.cs-has-result .cs-wa{display:none}

/* White result area, matching the verified-status previews. */
.cs-page .cs-check .xs31-result{
  width:min(1152px,100%);margin:24px 0 0;
  padding:30px;background:#fff;border:1px solid rgba(28,43,68,.11);
  border-radius:24px;box-shadow:0 10px 35px rgba(6,14,29,.15);
  color:#142033;overflow-wrap:break-word;
}
.cs-page .cs-check .xs36-layout{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
  gap:clamp(20px,2.5vw,28px);align-items:stretch;
}
.cs-page .cs-check .xs36-summary{min-width:0;padding:0}
.cs-page .cs-check .xs30-status-heading{
  margin:0;color:#5b6575;opacity:1;font-size:15px;line-height:1.45;
}
.cs-page .cs-check .xs36-receipt{
  margin:1px 0 18px;font-size:clamp(20px,2vw,26px);
  line-height:1.24;color:#121c30;font-weight:800;
}
.cs-page .cs-check .xs30-status-state{
  display:flex;align-items:center;gap:18px;
  width:100%;min-height:72px;padding:15px 20px;
  border-radius:16px;margin:0;
  font-size:clamp(15px,1.45vw,20px);
  font-weight:800;line-height:1.35;letter-spacing:-.01em;
}
.cs-page .cs-check .xs30-status-state svg{width:28px;height:28px;flex:none}
.cs-page .cs-check .xs36-status-processing{background:#fff1c0;color:#81400e}
.cs-page .cs-check .xs36-status-completed{background:#e1f4e8;color:#1c6542}
.cs-page .cs-check .xs36-status-collected{background:#e1e8ff;color:#234187}
.cs-page .cs-check .xs36-status-cancelled{background:#ffeded;color:#9a3038}
.cs-page .cs-check .xs30-discount-note{
  margin:20px 0 0;color:#576475;font-size:15px;line-height:1.55;
}
.cs-page .cs-check .xs36-details{
  border:1px solid #e0e5ec;border-radius:18px;
  padding:24px 22px;min-width:0;
  background:#fff;
}
.cs-page .cs-check .xs30-status-note{margin:0 0 20px;color:#1e293b;font-size:16px;line-height:1.7}
.cs-page .cs-check .xs36-inline-phone{color:#174391;font-weight:700;text-decoration:underline}
.cs-page .cs-check .xs30-cost-heading{
  margin:0 0 12px;color:#5b6575;font-size:15px;line-height:1.5;font-weight:500;
}
.cs-page .cs-check .xs30-cost-lines{margin:0;padding:0;gap:0;list-style:none}
.cs-page .cs-check .xs30-cost-item{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;border:0;margin:0;padding:7px 0;
  color:#192334;font-size:16px;line-height:1.4;
}
.cs-page .cs-check .xs30-cost-description{min-width:0;flex:1}
.cs-page .cs-check .xs30-cost-amount{white-space:nowrap;color:#162033;font-size:16px;font-weight:700}
.cs-page .cs-check .xs30-cost-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border-top:1px dashed #aab6c6;
  margin:14px 0 0;padding:14px 0 0;
  color:#172135;text-align:left;font-size:16px;
}
.cs-page .cs-check .xs36-total-money{white-space:nowrap;font-size:clamp(19px,2vw,27px);font-weight:800}
.cs-page .cs-check .xs36-action{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:10px 24px;border-radius:999px;
  font-size:16px;font-weight:700;text-decoration:none;
  transition:filter .15s,background .15s;
  white-space:nowrap;
}
.cs-page .cs-check .xs36-action:hover{filter:brightness(.94)}
.cs-page .cs-check .xs36-action-call,
.cs-page .cs-check .xs36-action-wa{background:#15418e;color:#fff}
.cs-page .cs-check .xs36-action-mail{border:1px solid #15418e;color:#15418e;background:#fff}
.cs-page .cs-check .xs36-footer{
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  border-top:1px solid #e5e9f0;margin-top:24px;padding-top:20px;
}
.cs-page .cs-check .xs36-footer-copy{flex:1;min-width:0;color:#5b6575}
.cs-page .cs-check .xs30-hours,
.cs-page .cs-check .xs30-contact{margin:0 0 7px;font-size:14px;line-height:1.55}
.cs-page .cs-check .xs30-contact{margin-bottom:0}
.cs-page .cs-check .xs36-footer-copy a{color:#15418e;font-weight:650;text-decoration:underline}
.cs-page .cs-check .xs36-footer-actions{display:flex;flex:none;gap:12px;align-items:center}
.cs-page .cs-check :is(.xs36-action,.xs36-inline-phone):focus-visible{outline:3px solid #174391;outline-offset:3px}

@media(max-width:860px){
 .cs-page .cs-check{padding-top:clamp(44px,11vh,105px)}
 .cs-page .cs-check .cs-search{
   grid-template-columns:minmax(0,1fr) minmax(100px,116px) minmax(115px,155px);
   gap:8px;padding:9px 10px 9px 16px;
 }
 .cs-page .cs-check .cs-phone-field{padding-left:10px}
 .cs-page .cs-check .xs31-result{padding:24px}
 .cs-page .cs-check .xs36-layout{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:16px}
 .cs-page .cs-check .xs36-footer{flex-wrap:wrap}
}
@media(max-width:700px){
 .cs-page .cs-check{min-height:max(580px,calc(100svh - 110px));padding:46px 14px 100px}
 .cs-page .cs-check .cs-title{font-size:clamp(1.65rem,6vw,2.2rem)!important}
 .cs-page .cs-check .cs-search{
   display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,38%);
   margin:24px 0 0;gap:10px;border-radius:26px;padding:12px 14px;
 }
 .cs-page .cs-check .cs-field:first-child{grid-column:1/-1;grid-row:1;min-width:0}
 .cs-page .cs-check #no-service{font-size:clamp(11px,2.85vw,16px)}
 .cs-page .cs-check .cs-phone-field{grid-column:1;grid-row:2;border:0;padding:0 8px;min-width:0}
 .cs-page .cs-check .cs-btn{grid-column:2;grid-row:2;height:51px}
 .cs-page .cs-check .xs36-layout{grid-template-columns:1fr;gap:18px}
 .cs-page .cs-check .xs31-result{border-radius:20px;padding:20px 16px}
 .cs-page .cs-check .xs36-details{padding:18px}
 .cs-page .cs-check .xs30-status-state{min-height:62px}
 .cs-page .cs-check .xs36-footer{align-items:stretch;flex-direction:column;gap:15px}
 .cs-page .cs-check .xs36-footer-actions{justify-content:flex-start;flex-wrap:wrap}
 .cs-page .cs-check .xs36-action{min-height:44px;padding:9px 18px}
}
@media(max-width:390px){
 .cs-page .cs-check .cs-search{grid-template-columns:minmax(0,1fr) minmax(118px,42%)}
 .cs-page .cs-check #no-service{font-size:clamp(10px,2.78vw,12px)}
 .cs-page .cs-check .cs-field svg{width:21px;height:21px}
 .cs-page .cs-check .xs30-cost-item{gap:8px;font-size:14px}
 .cs-page .cs-check .xs30-cost-amount{font-size:14px}
}

/* E38: active-service UI refinement. No changes to queries, controls or desktop CTA. */
.cs-page .cs-check .xs30-status-heading,
.cs-page .cs-check .xs36-receipt{text-align:center}
.cs-page .cs-check .xs38-help-question,
.cs-page .cs-check .xs38-help-contact{display:block}
.cs-page .cs-check .xs38-help-contact a{font-weight:650}

/* At desktop widths, keep the discount explanation on one line without
   extending beyond the summary column or covering the detail card. */
@media(min-width:1100px){
 .cs-page .cs-check .xs36-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .cs-page .cs-check .xs30-discount-note{
   white-space:nowrap;
   font-size:clamp(12px,1vw,14px);
 }
}

/* The mobile receipt prompt was too tiny in E36; make it larger while
   retaining the complete, user-approved placeholder and search icon. */
@media(max-width:700px){
 .cs-page .cs-check #no-service{
   font-size:clamp(12px,calc(4.75vw - 2.8px),16.5px);
 }
 /* Mobile only. Desktop WhatsApp / Email CS positions remain unchanged. */
 .cs-page .cs-check .xs36-footer-actions{
   width:100%;justify-content:center;
 }
}
@media(max-width:390px){
 .cs-page .cs-check #no-service{
   font-size:clamp(12px,calc(4.75vw - 2.8px),16.5px);
 }
}