/* ============================================================
   fix.css — pemulihan komponen yang kehilangan gaya
   1) chip akun header   2) halaman Akun Saya   3) kalender .avc
   4) kartu villa .villa-card (dipakai favorit & villa populer)
   ============================================================ */

/* ---------- ukuran ikon dasar ---------- */
.i{width:18px;height:18px;flex:none}
.i-lg{width:22px;height:22px;flex:none}

/* ---------- 1. chip akun di header ---------- */
.user-chip{
  display:inline-flex;align-items:center;gap:8px;
  height:42px;padding:4px 11px 4px 4px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  cursor:pointer;font:inherit;line-height:1;transition:border-color .15s,box-shadow .15s,background .15s;
}
.user-chip:hover{border-color:#bfdccf;box-shadow:0 6px 16px -10px rgba(8,57,44,.45)}
.user-chip .user-avatar{width:32px;height:32px;font-size:11px}
.user-chip>span:nth-child(2){
  display:flex;flex-direction:column;line-height:1.16;text-align:left;min-width:0;
}
.user-chip-name{
  font-size:11.8px;font-weight:800;color:var(--text);
  max-width:118px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.user-chip-role{font-size:9.8px;font-weight:600;color:var(--muted);letter-spacing:.01em;margin-top:1px}
.user-chip svg{width:13px;height:13px;flex:none;color:#7d948a}
.user-menu{position:relative;display:inline-flex}

/* ---------- 2. halaman Akun Saya ---------- */
.side-menu{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:8px;display:flex;flex-direction:column;gap:2px;
  position:sticky;top:14px;box-shadow:0 1px 2px rgba(16,42,34,.04);
}
.side-menu a{
  display:flex;align-items:center;gap:9px;
  padding:10px 11px;border-radius:9px;
  font-size:12.4px;font-weight:700;color:#33473d;text-decoration:none;
  transition:background .14s,color .14s;
}
.side-menu a svg{width:16px;height:16px;flex:none;color:#7d948a}
.side-menu a:hover{background:#f4faf7}
.side-menu a.active{background:var(--mint);color:var(--green-800)}
.side-menu a.active svg{color:var(--green-700)}

.stat-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 14px}
.stat-strip .s{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 13px;box-shadow:0 1px 2px rgba(16,42,34,.04)}
.stat-strip .l{font-size:10.4px;font-weight:700;color:var(--muted);margin-bottom:6px}
.stat-strip .v{font-size:20px;font-weight:800;color:var(--green-900);line-height:1}
@media (max-width:760px){
  .stat-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .side-menu{position:static;flex-direction:row;overflow-x:auto;gap:4px;padding:6px}
  .side-menu a{white-space:nowrap;padding:8px 10px;font-size:11.4px}
}

/* ---------- 4. kartu villa klasik ---------- */
.villa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.villa-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(16,42,34,.04);
  transition:box-shadow .18s,transform .18s;
}
.villa-card:hover{box-shadow:0 14px 30px -20px rgba(8,57,44,.5);transform:translateY(-2px)}
.vc-media{position:relative;aspect-ratio:4/3;background:#eef4f0;overflow:hidden}
.vc-media a{display:block;height:100%}
.vc-media img{width:100%;height:100%;object-fit:cover;display:block}
.vc-media .badge{
  position:absolute;left:10px;top:10px;z-index:2;background:var(--green-700);color:#fff;
  font-size:9.6px;font-weight:700;letter-spacing:.1px;padding:4px 9px;border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.16);
}
.vc-media .badge.gold,.vc-media .badge.promo{background:var(--gold);color:#42310a}
.fav-btn{
  position:absolute;right:9px;top:9px;z-index:2;width:30px;height:30px;border-radius:50%;border:0;
  background:rgba(255,255,255,.94);display:grid;place-items:center;cursor:pointer;
  color:#5d736a;box-shadow:0 2px 8px rgba(0,0,0,.14);transition:transform .14s,color .14s;
}
.fav-btn:hover{transform:scale(1.06)}
.fav-btn.on{color:#e05b4e}
.fav-btn svg{width:14px;height:14px}
.vc-body{display:flex;flex-direction:column}
.vc-name{display:block;text-decoration:none;color:var(--text);font-weight:800}
.vc-rating{display:flex;align-items:center;gap:3px;color:var(--muted)}
.vc-rating svg{width:12px;height:12px;color:#f0b429;flex:none}
.vc-rating b{color:var(--text);font-weight:800}
.vc-meta{display:flex;flex-wrap:wrap;color:var(--muted)}
.vc-meta span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.vc-meta svg{width:12px;height:12px;flex:none;opacity:.8}
.vc-foot .price{color:var(--green-900);font-weight:800}
@media (max-width:760px){
  .villa-grid{grid-template-columns:1fr!important}
}

/* ---------- 3. kalender ketersediaan (.avc) ---------- */
.avc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}
.avc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.avc-title b{display:block;font-size:13.2px;font-weight:800;color:var(--green-900);letter-spacing:-.1px}
.avc-title span{display:block;font-size:11px;color:var(--muted);margin-top:2px;max-width:62ch}
.avc-nav{display:flex;align-items:center;gap:6px;flex:none}
.avc-nav b{font-size:12px;font-weight:800;color:var(--green-900);min-width:118px;text-align:center;text-transform:capitalize}
.avc-nav button{
  width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;cursor:pointer;color:#33473d;transition:.14s;
}
.avc-nav button:hover:not(:disabled){background:#f4faf7;border-color:#bfdccf}
.avc-nav button:disabled{opacity:.38;cursor:not-allowed}
.avc-nav button svg{width:14px;height:14px}

.avc-legend{display:flex;flex-wrap:wrap;gap:14px;margin:6px 0 12px;font-size:10.6px;color:var(--muted);font-weight:600}
.avc-legend span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.avc-legend .dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.avc-legend .dot.green{background:#2ea97e}
.avc-legend .dot.red{background:#e0665a}
.avc-legend .dot.grey{background:#b8c3bd}

.avc-dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin-bottom:5px}
.avc-dow span{text-align:center;font-size:9.8px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#84988e}
.avc-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}

.avc-day{
  position:relative;min-height:58px;min-width:0;
  display:flex;flex-direction:column;justify-content:space-between;gap:2px;
  border:1px solid var(--line);border-radius:9px;background:#fff;
  padding:5px 6px;text-align:left;font:inherit;cursor:pointer;
  transition:border-color .12s,background .12s,transform .12s;
}
.avc-day .d{font-size:11.6px;font-weight:800;color:var(--green-900);line-height:1}
.avc-day .s{
  display:inline-flex;align-items:center;gap:3px;
  font-size:8.4px;font-weight:700;color:#8ba79b;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.avc-day .s svg{width:9px;height:9px;flex:none}
.avc-day .p{font-size:9.2px;font-weight:700;color:#556b60;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.avc-day.green{background:#f2fbf6;border-color:#d3eddf}
.avc-day.green .s{color:#1f8f68}
.avc-day.red{background:#fdf1ef;border-color:#f6d8d3;cursor:not-allowed}
.avc-day.red .d{color:#b04b3f}
.avc-day.red .s{color:#c2594c}
.avc-day.closed{background:#fff8e8;border-color:#f2e2bb}
.avc-day.closed .s{color:#a8802a}
.avc-day.past{background:#f7faf8;border-color:#eef3f0;cursor:not-allowed}
.avc-day.past .d{color:#b9c7bf}
.avc-day.past .s,.avc-day.past .p{opacity:.55}
.avc-day.empty{background:transparent;border-color:transparent;cursor:default;box-shadow:none}
.avc-day.off{cursor:not-allowed}
.avc-day.inrange{background:#eaf6f0;border-color:#cbe8d8}
.avc-day.sel{border-color:var(--green-600);background:#dff2e8;box-shadow:0 0 0 2px rgba(15,122,92,.16)}
.avc-day:hover:not(.empty):not(:disabled):not(.red):not(.past){border-color:#a9d6c2;transform:translateY(-1px)}

/* ---------- HOT SALE: tanggal diskon 40–50% dengan ikon jempol merah ---------- */
.avc-day.hot{
  background:linear-gradient(165deg,#fff5f3 0%,#ffe5e0 100%);
  border-color:#f0a599;
  box-shadow:inset 0 0 0 1px rgba(214,58,43,.14),0 2px 6px rgba(214,58,43,.08);
}
.avc-day.hot .d{color:#b92c1e}
.avc-day.hot .s{color:#cf4433;font-weight:800}
.avc-day.hot .p{color:#b52619;font-weight:800}
.avc-day.hot .p s{color:#bd9b95;font-weight:600;font-size:8.2px}
.avc-day.hot:hover:not(:disabled){border-color:#e0705f;box-shadow:0 3px 10px rgba(214,58,43,.18)}
.avc-day .hot-tag{
  position:absolute;top:-6px;right:-5px;z-index:2;
  display:inline-flex;align-items:center;gap:2px;line-height:1;
  background:linear-gradient(135deg,#e8412c,#b21b12);color:#fff;
  font-size:6.6px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:2.5px 4px;border-radius:999px;border:1.5px solid #fff;
  box-shadow:0 2px 6px rgba(178,27,18,.4);pointer-events:none;
}
.avc-day .hot-tag svg{width:8px;height:8px;stroke-width:2.6}
.avc-legend .lg-hot{
  display:inline-flex;align-items:center;gap:4px;color:#b92c1e;font-weight:800;
  background:#fdecea;border:1px solid #f7c9c2;border-radius:999px;padding:1px 8px;
}
.avc-legend .lg-hot svg{width:10px;height:10px;stroke-width:2.6}
@media (max-width:560px){
  .avc-day .hot-tag{font-size:0;padding:2.5px;top:-5px;right:-4px;gap:0}
  .avc-day .hot-tag svg{width:9px;height:9px}
}
/* badge HOT SALE untuk kartu villa, galeri, dan kotak harga */
.hs-badge{
  position:absolute;left:10px;top:10px;z-index:3;display:inline-flex;align-items:center;gap:4px;
  background:linear-gradient(135deg,#e8412c,#b21b12);color:#fff;text-transform:uppercase;
  font-size:9.6px;font-weight:800;letter-spacing:.04em;line-height:1;
  padding:5px 9px;border-radius:999px;box-shadow:0 4px 12px rgba(178,27,18,.35);
}
.hs-badge svg{width:12px;height:12px;stroke-width:2.4}
.hs-badge b{font-size:10px}
.hs-inline{display:inline-flex;align-items:center;gap:4px;color:#b92c1e;font-weight:800;font-size:11px;
  background:#fdecea;border:1px solid #f7c9c2;border-radius:999px;padding:2px 8px;text-transform:uppercase;letter-spacing:.03em}
.hs-inline svg{width:11px;height:11px;stroke-width:2.5}
.hs-old{color:#9aa8a1;font-weight:600;text-decoration:line-through;margin-right:4px;font-size:11.5px}
.hs-now{color:#c0392b!important}
.hs-note{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#b92c1e;margin:2px 0 0}
.hs-note svg{width:12px;height:12px;stroke-width:2.5}

.dt-loc input[data-datefield]{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;
  cursor:pointer;color:transparent;background:transparent;caret-color:transparent;
}
.bb-cell .dt-loc input[data-datefield]{cursor:pointer}


/* ---------- saran performa mitra & CTA notifikasi ---------- */
.sug-list{display:flex;flex-direction:column;gap:8px}
.sug-item{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-left:3px solid #cfe0d6;border-radius:12px;padding:10px 12px;background:#fff}
.sug-item.sev-high{border-left-color:#dc4a34;background:#fff7f5}
.sug-item.sev-medium{border-left-color:#e8b23a;background:#fffdf5}
.sug-item.sev-low{border-left-color:#8fc7ae}
.sug-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:#f1f7f4;color:#157a5c}
.sug-item.sev-high .sug-ic{background:#fdecea;color:#c0392b}
.sug-item.sev-medium .sug-ic{background:#fdf6e3;color:#b07d13}
.sug-ic svg{width:16px;height:16px;stroke-width:2.3}
.sug-item.sev-high .sug-ic{color:#b3261e}
.sug-item.sev-medium .sug-ic{color:#9a6a05}
.sug-tx{flex:1;min-width:0}
.sug-tx b{display:block;font-size:12px;color:var(--green-900);line-height:1.35}
.sug-tx span{display:block;font-size:11px;color:var(--muted);line-height:1.55;margin-top:2px}
.sug-item .btn{flex:none}
@media(max-width:640px){.sug-item{flex-wrap:wrap}.sug-item .btn{width:100%}}
.notif-cta{display:inline-block;margin-top:4px;font-size:10px;font-weight:800;color:#0e6b51;background:#e8f6ef;border:1px solid #cbe8d8;border-radius:999px;padding:2px 8px}


/* ---------- badge peran akun di sidebar dashboard ---------- */
.side-role{
  display:inline-flex;align-items:center;gap:6px;margin:9px 0 2px;padding:5px 10px;border-radius:999px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);color:#e8f8f0;
  font-size:9.6px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1;
  width:max-content;max-width:100%;white-space:nowrap;
}
.side-role i{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none;box-shadow:0 0 0 3px rgba(255,255,255,.10)}

/* ---------- lonceng notifikasi di header dashboard ---------- */
.dash-head .dash-notif{margin-left:2px;position:relative}
.dash-head .dash-notif .notif-btn{width:36px;height:36px;background:#fff;border:1px solid var(--line);color:#173a2f}
.dash-head .dash-notif .notif-btn:hover{background:#f4f9f5;border-color:#cfe0d6}
.dash-head .dash-notif .notif-panel{top:44px;z-index:300}
@media(max-width:640px){
  .dash-head .dash-notif .notif-panel{position:fixed;left:10px;right:10px;top:64px;width:auto;max-height:70vh}
}


/* ---------- pill peran akun di header dashboard (kiri lonceng) ---------- */
.dash-role-pill{
  display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;
  background:#f2f8f5;border:1px solid #d8e9e0;color:#14523f;
  font-size:9.8px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;line-height:1;white-space:nowrap;
}
.dash-role-pill i{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}
@media(max-width:640px){.dash-role-pill{font-size:9px;padding:5px 9px}}

.avc-loading,.avc-error{padding:26px 10px;text-align:center;font-size:12px;color:var(--muted)}
.avc-error{color:#b4453a}
.avc-error button{margin-left:8px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:5px 10px;font:inherit;font-size:11px;cursor:pointer}

.avc-action{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px;padding:10px 11px;
  background:#f4faf7;border:1px solid #dcefe4;border-radius:10px;
}
.avc-action .txt{flex:1 1 210px;min-width:0}
.avc-action .txt b{display:block;font-size:11.6px;font-weight:800;color:var(--green-900)}
.avc-action .txt span{display:block;font-size:10.4px;color:var(--muted);margin-top:1px}
.avc-action .input{height:32px;flex:0 1 250px;font-size:11.5px}
.avc-foot{margin-top:10px;font-size:10.6px;color:var(--muted)}

.avc-mini{padding:11px}
.avc-mini .avc-day{min-height:44px;padding:4px 5px}
.avc-mini .avc-day .p{display:none}
.avc-mini .avc-day .s{font-size:7.8px}

/* ---------- PROMO (tarif promo): badge ikon + harga coret ---------- */
.avc-day.promo{
  background:linear-gradient(165deg,#fffdf3 0%,#fff2d8 100%);
  border-color:#eed7a4;box-shadow:inset 0 0 0 1px rgba(180,124,12,.14),0 2px 6px rgba(180,124,12,.07);
}
.avc-day.promo .d{color:#8a5800}
.avc-day.promo .p{color:#8a5800;font-weight:800}
.avc-day.promo .p s{color:#bda67d;font-weight:600;font-size:8.2px}
.avc-day.promo:hover:not(:disabled){border-color:#dfb96d;box-shadow:0 3px 10px rgba(180,124,12,.16)}
.avc-day .promo-s{color:#a8760a;font-weight:800;letter-spacing:.02em}
.avc-day.promo .s.st.promo,.avc-day .s.promo{color:#a8760a}
.avc-legend .lg-promo{
  display:inline-flex;align-items:center;gap:4px;color:#8a5800;font-weight:800;
  background:#fff7e6;border:1px solid #f0dcb0;border-radius:999px;padding:1px 8px;
}
.avc-legend .lg-promo svg{width:10px;height:10px}
/* kode promo aktif (voucher) di bawah legenda */
.avc-vouchers{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:-4px 0 10px}
.avc-vchip{display:inline-flex;align-items:center;gap:4px;background:#fffaf0;border:1px dashed #e5c98e;color:#8a5800;
  border-radius:999px;padding:2px 8px;font-size:9.6px;font-weight:700;line-height:1.5}
.avc-vchip svg{width:9px;height:9px;flex:none}
.avc-vchip b{letter-spacing:.05em}
.avc-vnote{font-size:9.4px;color:var(--muted)}
/* sel promo/hot: badge kecil + harga coret di atas harga promo */
.avc-day.has-promo{min-height:64px;justify-content:flex-start;gap:2px}
.avc-day .deal-tag{
  display:inline-flex;align-items:center;justify-content:center;gap:2px;width:100%;
  font-size:6.8px;font-weight:800;letter-spacing:.02em;line-height:1;white-space:nowrap;
  padding:2px 2px;border-radius:5px;overflow:hidden;text-overflow:ellipsis;
  background:#fff3d8;border:1px solid #efdcb4;color:#8a5800;
}
.avc-day.hot .deal-tag{background:#fdecea;border-color:#f6cdc6;color:#b3261e}
.avc-day .deal-tag svg{width:7px;height:7px;flex:none}
.avc-day .p.promo-p{display:flex;flex-direction:column;line-height:1.02;gap:1px;overflow:hidden}
.avc-day .p.promo-p s{font-size:6.9px;font-weight:600;color:#b9a084;text-decoration:line-through}
.avc-day .p.promo-p b{font-size:9px;font-weight:800;color:#8a5800}
.avc-day.hot .p.promo-p b{color:#b3261e}
.avc-mini .avc-day.has-promo{min-height:58px;padding:3px 4px}
.avc-mini .avc-day.has-promo .p,.avc-mini .avc-day.show-p .p{display:flex;flex-direction:column;font-size:8px;line-height:1.05}
.avc-mini .avc-day.has-promo .p.promo-p b{font-size:8.4px}
.avc-mini .avc-day.has-promo .p.promo-p s{font-size:6.4px}
/* harga tetap tampil di kalender mini (popover) untuk tanggal promo */
.avc-mini .avc-day.has-promo .p,.avc-mini .avc-day.show-p .p{display:block;font-size:8.4px;line-height:1.15}
@media (max-width:560px){
  .avc-day.has-promo .s{display:inline-flex!important;font-size:6.8px;gap:2px;justify-content:center;overflow:visible}
  .avc-day.has-promo .s svg{width:8px;height:8px}
  .avc-day.has-promo .p{display:block!important;font-size:6.8px;text-align:center}
  .avc-day.has-promo .p s{font-size:6.2px}
}

.avc-pop{position:fixed;inset:0;z-index:400;background:rgba(6,30,23,.42);display:flex;align-items:center;justify-content:center;padding:16px}
.avc-pop-in{width:100%;max-width:430px;background:#fff;border-radius:16px;padding:13px;box-shadow:0 24px 60px rgba(0,0,0,.3);max-height:92vh;overflow:auto}

@media (max-width:620px){
  .avc{padding:11px}
  .avc-day{min-height:50px;padding:4px 4px}
  .avc-day .d{font-size:10.4px}
  .avc-day .s{font-size:7.6px}
  .avc-day .p{font-size:8.2px}
  .avc-dow span{font-size:8.8px}
  .avc-nav b{min-width:96px;font-size:11px}
  .avc-title b{font-size:12.4px}
}

/* ---------- footer situs tidak boleh muncul di dashboard ---------- */
body.dash-mode .site-footer,
body.dash-mode .bottom-nav{display:none!important}

/* ---------- kalender versi mobile: angka saja + warna, legenda sebagai petunjuk ---------- */
@media (max-width:560px){
  .avc-days{gap:3px}
  .avc-day{min-height:46px;padding:4px 3px!important;justify-content:flex-start}
  .avc-day .d{font-size:11px}
  .avc-day .s,.avc-day .p{display:none!important}
  .avc-dow{font-size:8.2px;letter-spacing:.02em}
  .avc-head{gap:6px}
  .avc-legend{gap:8px;font-size:9.5px;flex-wrap:wrap}
}

/* ---------- baris chart + donut berdampingan ---------- */
.dash-row{display:grid!important;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:12px;align-items:start}
@media(max-width:1000px){.dash-row{grid-template-columns:1fr}}

/* ---------- chip akun di pojok kanan atas header, samping Favorit ---------- */
body.dash-mode .user-chip{display:inline-flex!important}
body.dash-mode .header-actions>.user-menu{margin-left:2px}

/* ---------- tabel dashboard: kolom villa cukup lebar ---------- */
.table-wrap table.data{table-layout:auto}
.table-wrap table.data th:first-child,
.table-wrap table.data td:first-child{min-width:238px}
.table-wrap table.data .member{display:flex;align-items:center;gap:10px;min-width:0}
.table-wrap table.data .member img{width:58px;height:44px;flex:0 0 58px;border-radius:8px;object-fit:cover}
.table-wrap table.data .member .n{font-size:12.8px;font-weight:700;color:#0d2b22;line-height:1.3;overflow-wrap:anywhere}
.table-wrap table.data .member .d{font-size:11px;color:#6c8078;margin-top:2px;white-space:nowrap}

/* ---------- legenda donut: label kiri, angka kanan ---------- */
.donut-legend .row{display:flex;align-items:center;gap:7px;min-width:0}
.donut-legend .row i{width:8px;height:8px;border-radius:50%;flex:none;display:block}
.donut-legend .row b{margin-left:auto;font-weight:800;color:#0d2b22}

/* ---------- tabel dashboard lebih padat agar tidak terpotong ---------- */
.table-wrap table.data th,
.table-wrap table.data td{padding:9px 10px;vertical-align:middle}
.table-wrap table.data td:nth-child(2){min-width:128px}
.table-wrap table.data td:nth-child(4),
.table-wrap table.data th:nth-child(4){white-space:nowrap}
.table-wrap table.data td:last-child,
.table-wrap table.data th:last-child{white-space:nowrap}
@media(min-width:861px){
  .table-wrap table.data{font-size:11.9px}
}

/* ---------- rasio kolom dashboard: kartu kiri lebih lega ---------- */
.dash-row{grid-template-columns:minmax(0,1fr) minmax(280px,318px)!important}
@media(max-width:1000px){.dash-row{grid-template-columns:1fr!important}}

/* ---------- tabel booking muat tanpa geser di desktop ---------- */
.table-wrap table.data th,
.table-wrap table.data td{padding:8px 9px}
.table-wrap table.data th:first-child,
.table-wrap table.data td:first-child{min-width:222px}
.table-wrap table.data td:nth-child(2){min-width:112px}
.table-wrap table.data{font-size:11.6px}
.table-wrap table.data .member img{width:52px;height:40px;flex:0 0 52px}

/* ---------- tabel Villa Saya: thumbnail lebih besar, lokasi dibatasi 2 baris ---------- */
.table-wrap table.data .member img{width:72px;height:52px;flex:0 0 72px;border-radius:9px}
.table-wrap table.data th:first-child,
.table-wrap table.data td:first-child{min-width:250px}
.table-wrap table.data td:nth-child(2){padding-right:14px;line-height:1.45}

/* ---------- tabel dashboard di mobile jadi kartu (tbl-stack) ---------- */
@media (max-width:860px){
  .table-wrap{overflow:visible!important}
  .tbl-hint{display:none!important}
  table.tbl-stack{display:block!important;width:100%;min-width:0!important;border:0;background:none}
  table.tbl-stack thead{display:none!important}
  table.tbl-stack tbody{display:block}
  table.tbl-stack tr{display:block;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 10px;background:#fff;box-shadow:0 1px 2px rgba(8,57,44,.04)}
  table.tbl-stack td{display:flex!important;align-items:center;justify-content:space-between;gap:10px;border:0!important;padding:4px 0!important;font-size:12.2px;min-width:0!important;text-align:right}
  table.tbl-stack td::before{content:attr(data-label);flex:0 0 96px;text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#7a8f85}
  table.tbl-stack td:first-child{display:block!important;padding:0 0 8px!important;border-bottom:1px dashed var(--line)!important}
  table.tbl-stack td:first-child::before{display:none}
  table.tbl-stack td:first-child .member{gap:10px}
  table.tbl-stack td:last-child{justify-content:flex-end;padding-top:9px!important;border-top:1px dashed var(--line)!important;margin-top:4px}
  table.tbl-stack td:last-child::before{display:none}
  table.tbl-stack .row-actions{justify-content:flex-end;width:100%}
}

/* ---------- KPI dashboard mobile: 2 kolom agar ringkas ---------- */
@media (max-width:560px){
  .dash-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .dash-grid .kpi{padding:12px 12px!important;border-radius:12px}
  .dash-grid .k-label{font-size:9.4px!important;letter-spacing:.02em}
  .dash-grid .k-value{font-size:19px!important;margin-top:4px!important}
  .dash-grid .k-sub{font-size:10px!important;line-height:1.35}
  .dash-grid .k-ic{width:24px!important;height:24px!important}
}

/* ---------- reset lebar kolom global, khususkan hanya untuk tabel Villa ---------- */
.table-wrap table.data th:first-child,
.table-wrap table.data td:first-child{min-width:0}
.table-wrap table.data td:nth-child(2){min-width:0;padding-right:0;line-height:1.5}
.table-wrap table.data td:nth-child(4),
.table-wrap table.data th:nth-child(4),
.table-wrap table.data td:last-child,
.table-wrap table.data th:last-child{white-space:normal}
.table-wrap table.data .member img{width:52px;height:40px;flex:0 0 52px;border-radius:8px;object-fit:cover}

table.data.tbl-villa th:first-child,
table.data.tbl-villa td:first-child{min-width:250px}
table.data.tbl-villa td:nth-child(2){padding-right:14px}
table.data.tbl-villa .member img{width:72px;height:52px;flex:0 0 72px;border-radius:9px}
table.data.tbl-villa td:nth-child(3),
table.data.tbl-villa td:last-child,
table.data.tbl-villa th:last-child{white-space:nowrap}

/* tabel di kartu dashboard: total & status jangan pecah baris */
.dash-card table.data td:nth-child(4),
.dash-card table.data td:nth-child(5){white-space:nowrap}

/* kode pesanan jangan pecah baris */
.table-wrap table.data td:first-child{white-space:nowrap}

/* ================= MENU AKUN (dropdown header) ================= */
.header-actions{overflow:visible!important}
.user-menu .dropdown{
  position:absolute;top:calc(100% + 10px);right:0;min-width:198px;
  display:flex;flex-direction:column;gap:2px;
  background:#fff;border:1px solid #e2ece7;border-radius:14px;
  box-shadow:0 22px 44px -22px rgba(8,57,44,.45),0 2px 8px -4px rgba(8,57,44,.12);
  padding:6px;z-index:95;
}
.user-menu .dropdown.hidden{display:none}
.user-menu .dropdown a,
.user-menu .dropdown button{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:9px 11px;border:0;border-radius:10px;background:none;
  font:600 12.4px/1.2 'Plus Jakarta Sans',system-ui,sans-serif;color:#1d352b;
  text-align:left;text-decoration:none;cursor:pointer;white-space:nowrap;
}
.user-menu .dropdown a:hover,.user-menu .dropdown button:hover{background:#f0f7f3;color:var(--green-800,#0d5c46)}
.user-menu .dropdown a svg,.user-menu .dropdown button svg{width:15px;height:15px;flex:none;color:#6f8d80}
.user-menu .dropdown hr{border:0;border-top:1px solid #e9f0ec;margin:5px 3px}
.user-menu .dropdown #logoutBtn{color:#b23b2e}
.user-menu .dropdown #logoutBtn svg{color:#c9695c}
.user-menu .dropdown #logoutBtn:hover{background:#fdf1ef;color:#a3311f}
/* chip saat menu terbuka */
.user-menu:has(.dropdown:not(.hidden)) .user-chip{border-color:#bfdccf;box-shadow:0 6px 16px -10px rgba(8,57,44,.45)}
.user-menu:has(.dropdown:not(.hidden)) .user-chip>svg{transform:rotate(180deg)}
.user-menu .user-chip>svg{transition:transform .18s ease}

/* ================= DROPDOWN STATUS DI KOLOM AKSI ================= */
.table-wrap table.data select.sort-select{
  -webkit-appearance:none;appearance:none;
  width:100%;max-width:116px;margin:0 auto;
  padding:5px 22px 5px 10px!important;
  border:1px solid #d9e7e0;border-radius:999px;
  background:#f7fbf9 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f8d80' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 7px center;
  background-size:11px 11px;
  font:700 10.5px/1.35 'Plus Jakarta Sans',system-ui,sans-serif;color:#1d3a2f;
  cursor:pointer;text-align:left;text-align-last:center;
}
.table-wrap table.data select.sort-select:hover{border-color:#b6d8c8;background-color:#eef7f3}
.table-wrap table.data select.sort-select:focus{outline:2px solid rgba(23,138,104,.28);outline-offset:1px;border-color:#7fc0a6}
.table-wrap table.data td:last-child:has(select.sort-select){width:124px}
.table-wrap table.data select.sort-select option{font-size:12.5px;font-weight:600;background:#fff;color:#1d352b}
@media (max-width:860px){
  .user-menu .dropdown{min-width:190px;right:-4px}
}

/* ---------- select filter di toolbar (Semua status / sumber) biar konsisten pill ---------- */
select.sort-select{
  -webkit-appearance:none;appearance:none;
  padding:7px 28px 7px 12px;
  border:1px solid #d9e7e0;border-radius:999px;background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f8d80' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 9px center;
  background-size:11px 11px;
  font:600 11.6px/1.3 'Plus Jakarta Sans',system-ui,sans-serif;color:#1d3a2f;cursor:pointer;
}
select.sort-select:hover{border-color:#b6d8c8;background-color:#f7fbf9}
select.sort-select:focus{outline:2px solid rgba(23,138,104,.26);outline-offset:1px;border-color:#7fc0a6}

/* ---------- warna pill status di kolom Aksi ---------- */
.table-wrap table.data select.sort-select:has(option[value="Menunggu"]:checked){background-color:#fff8e8;border-color:#f0dcae;color:#8a6212}
.table-wrap table.data select.sort-select:has(option[value="Dikonfirmasi"]:checked){background-color:#eef8f2;border-color:#bfe0cc;color:#136b47}
.table-wrap table.data select.sort-select:has(option[value="Selesai"]:checked){background-color:#eef2f8;border-color:#c9d6e8;color:#2a4b74}
.table-wrap table.data select.sort-select:has(option[value="Dibatalkan"]:checked){background-color:#fdf0ee;border-color:#f0cbc3;color:#a5342a}

/* ---------- warna pill status kolom Aksi (by data-st) ---------- */
.table-wrap table.data select.sort-select[data-st="Menunggu"]{background-color:#fff8e8!important;border-color:#efd9a8!important;color:#8a6212!important}
.table-wrap table.data select.sort-select[data-st="Dikonfirmasi"]{background-color:#ecf8f1!important;border-color:#b9dfc8!important;color:#116447!important}
.table-wrap table.data select.sort-select[data-st="Selesai"]{background-color:#eef2f9!important;border-color:#c6d4e8!important;color:#2a4b74!important}
.table-wrap table.data select.sort-select[data-st="Dibatalkan"]{background-color:#fdf0ee!important;border-color:#efc9c1!important;color:#a5342a!important}

/* ---------- kartu tabel mobile: baris aksi ikut berlabel & tidak meluber ---------- */
@media (max-width:860px){
  table.tbl-stack td:last-child{justify-content:space-between!important}
  table.tbl-stack td:last-child::before{display:block!important;content:attr(data-label)}
  table.tbl-stack td{overflow-wrap:anywhere}
  table.tbl-stack td>span,table.tbl-stack td>b{min-width:0}
}

@media (max-width:860px){
  table.tbl-stack td:last-child{white-space:nowrap!important}
  table.tbl-stack td:last-child select.sort-select{flex:0 0 auto!important;width:120px!important;max-width:120px!important}
  table.tbl-stack td:last-child .row-actions{flex:0 0 auto}
  table.tbl-stack td{white-space:normal}
  table.tbl-stack td>*{white-space:normal}
}

/* kartu mobile: sel dua-baris (nama+telepon, tanggal+malam) rata kanan rapi */
@media (max-width:860px){
  table.tbl-stack td:nth-child(2),table.tbl-stack td:nth-child(4){
    display:grid!important;grid-template-columns:94px minmax(0,1fr);column-gap:10px;
    text-align:right;align-items:center;row-gap:1px;
  }
  table.tbl-stack td:nth-child(2)::before,table.tbl-stack td:nth-child(4)::before{
    grid-column:1;grid-row:1/span 3;align-self:center;
  }
  table.tbl-stack td .d{font-size:10.8px;color:#7b9186;line-height:1.35}
}

/* ---------- jaga-jaga: tidak boleh ada chip akun kedua di dashboard ---------- */
body.dash-mode .dash-account,
body.dash-mode .dash-user,
body.dash-mode .dacc-tx{display:none!important}

/* ---------- halaman Akun Saya: tampilan premium (mobile) ---------- */
.account-page .page-head{position:relative}
@media (max-width:760px){
  .account-page{padding:0 14px 30px}
  .account-page .page-head{
    margin:10px 0 12px;padding:18px 16px 16px;border-radius:20px;overflow:hidden;
    background:linear-gradient(135deg,#0b4636 0%,#137a5a 58%,#2ea37c 100%);
    color:#fff;box-shadow:0 18px 38px -22px rgba(9,60,45,.65);
  }
  .account-page .page-head:before{content:"";position:absolute;width:200px;height:200px;border-radius:50%;right:-80px;top:-100px;border:28px solid rgba(255,255,255,.09)}
  .account-page .page-head:after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;left:-50px;bottom:-70px;background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,0) 70%)}
  .account-page .breadcrumb{display:none}
  .account-page .section-head{display:block;margin:0;position:relative;z-index:1}
  .account-page .section-head h2{font-size:21px;line-height:1.25;letter-spacing:-.02em;color:#fff}
  .account-page .section-head p{font-size:11.5px;color:rgba(255,255,255,.8);margin-top:4px}
  .account-page .member-chip{margin-top:11px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);color:#fff;font-size:10.5px;padding:6px 12px;backdrop-filter:blur(8px);box-shadow:0 8px 20px -14px rgba(0,0,0,.5)}
  .account-page .member-chip:hover{background:rgba(255,255,255,.24)}
  .account-page .section-head>.btn{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;margin-top:10px}
  .account-page .side-menu{
    position:sticky;top:8px;z-index:30;display:flex;flex-direction:row;gap:6px;
    padding:7px;margin:0 0 12px;border-radius:16px;border:1px solid rgba(14,90,69,.08);
    background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
    box-shadow:0 10px 24px -18px rgba(10,45,33,.55);scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .account-page .side-menu::-webkit-scrollbar{display:none}
  .account-page .side-menu a{padding:9px 12px;border-radius:999px;font-size:11px;font-weight:700;background:#f2f8f5;color:#3b5147;border:1px solid #e6f0ea}
  .account-page .side-menu a svg{width:14px;height:14px;color:#6d8a7c}
  .account-page .side-menu a.active{background:linear-gradient(135deg,#0e5a45,#1d8a66);color:#fff;border-color:transparent;box-shadow:0 10px 20px -12px rgba(14,90,69,.8)}
  .account-page .side-menu a.active svg{color:#fff}
  .account-page .stat-strip{gap:8px;margin-bottom:14px}
  .account-page .stat-strip .s{
    border-radius:16px;padding:12px 12px 11px;border:1px solid #e6f0ea;
    background:linear-gradient(180deg,#ffffff,#f6fbf8);box-shadow:0 12px 24px -22px rgba(10,45,33,.6);
  }
  .account-page .stat-strip .l{font-size:9.3px;letter-spacing:.07em;text-transform:uppercase;margin-bottom:7px}
  .account-page .stat-strip .v{font-size:21px}
  .account-page .flow-card{border-radius:16px;padding:14px;box-shadow:0 12px 26px -24px rgba(9,50,36,.6)}
  .account-page .card-list{gap:12px}
  .account-page .order-card{
    grid-template-columns:82px minmax(0,1fr);gap:11px;border-radius:16px;padding:12px;
    box-shadow:0 12px 26px -22px rgba(9,50,36,.55);
  }
  .account-page .order-card>img{width:82px;height:82px;border-radius:12px}
  .account-page .oc-title{font-size:13px;line-height:1.3}
  .account-page .oc-meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:10.5px;margin-top:3px}
  .account-page .oc-action{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;border-top:1px dashed #e5efe9;padding-top:10px;margin-top:2px}
  .account-page .oc-action .price{font-size:15px;font-weight:900;color:#0e5a45;margin:0}
  .account-page .member-how .mh-row{align-items:flex-start}
}
@media (max-width:760px){
  .account-page .side-menu{
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 94%,rgba(0,0,0,.25) 100%);
    mask-image:linear-gradient(to right,#000 0,#000 94%,rgba(0,0,0,.25) 100%);
  }
  .account-page .side-menu a{padding:8px 11px;font-size:10.6px;gap:6px}
  .account-page .side-menu a svg{width:13px;height:13px}
}

/* ---------- Akun Saya mobile: gaya dashboard premium (teal) ---------- */
.mob-hero,.mob-poin,.mob-steps,.mob-grid,.mob-band{display:none}
@media (max-width:760px){
  .account-page .page-head,.account-page .side-menu,.account-page .stat-strip{display:none!important}
  .account-page{padding:0 14px 26px;background:#fff}
  .mob-hero{
    display:block;position:relative;overflow:hidden;margin:-14px -14px 0;padding:18px 16px 54px;
    background:#0e5a45;color:#fff;border-radius:0 0 24px 24px;
    box-shadow:0 8px 22px -14px rgba(14,90,69,.55);
  }
  .mob-hero:before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-70px;top:-90px;border:24px solid rgba(255,255,255,.10)}
  .mob-hero:after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;left:-55px;bottom:-70px;background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,0) 70%)}
  .mob-brand{display:flex;align-items:center;gap:10px;position:relative;z-index:1}
  .mob-brand img{width:34px;height:34px;object-fit:contain;flex:none}
  .mob-word{display:flex;flex-direction:column;line-height:1}
  .mob-word b{font-size:19px;font-weight:800;letter-spacing:-.01em;color:#fff}
  .mob-word span{font-size:8.5px;letter-spacing:.28em;font-weight:700;opacity:.85;margin-top:4px}
  .mob-tag{margin-left:auto;font-size:10.5px;line-height:1.5;text-align:right;color:rgba(255,255,255,.92);max-width:150px}
  .mob-search{display:flex;align-items:center;gap:8px;margin-top:16px;background:#fff;border-radius:999px;padding:5px 5px 5px 14px;position:relative;z-index:1;box-shadow:0 6px 14px -8px rgba(7,63,48,.45)}
  .mob-search svg{width:17px;height:17px;color:#3e4a57;flex:none}
  .mob-search input{flex:1;min-width:0;border:0;outline:0;font-size:12.5px;color:#26332e;background:transparent;padding:6px 0;font-family:inherit}
  .mob-search input::placeholder{color:#5b666f}
  .mob-search button{flex:none;border:1px solid #7fb9a3;background:#fff;color:#2f4a49;font-size:12px;font-weight:700;border-radius:999px;padding:9px 16px;cursor:pointer;font-family:inherit}
  .mob-search button:active{background:#f1faf5}
  .mob-promo{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:18px;position:relative;z-index:1}
  .mob-promo b{display:block;font-size:14.5px;font-weight:800;line-height:1.45;letter-spacing:.1px;color:#fff}
  .mob-promo a{display:inline-flex;align-items:center;gap:3px;margin-top:7px;font-size:12px;font-weight:600;color:#fff;text-decoration:none;opacity:.95}
  .mob-promo a svg{width:13px;height:13px}
  .mob-medal{flex:none;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(4px)}
  .mob-medal svg{width:30px;height:30px;color:#fff}
  .mob-poin{display:block;position:relative;z-index:2;margin:-40px 0 0;background:#fff;border:1px solid #cfe8dc;border-radius:20px;padding:15px 16px 13px;box-shadow:0 6px 18px -10px rgba(14,90,69,.45)}
  .mp-head{display:flex;align-items:center;gap:8px}
  .mp-coin{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#ffd54a,#f0a81c);color:#fff;flex:none;box-shadow:0 4px 10px -4px rgba(240,168,28,.7)}
  .mp-coin svg{width:17px;height:17px}
  .mp-label{font-size:12px;font-weight:800;letter-spacing:.13em;color:#177a5c}
  .mp-info{margin-left:auto;width:48px;height:48px;border-radius:50%;background:#f7f9fc;border:2px solid #fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;text-decoration:none;box-shadow:0 2px 8px -4px rgba(7,63,48,.25)}
  .mp-info span:first-child{font-size:9px;font-weight:800;color:#6b7280;letter-spacing:.04em}
  .mp-info span:last-child{font-size:8.5px;font-weight:600;color:#4b5563}
  .mp-balance{font-size:31px;font-weight:800;color:#16233a;line-height:1.05;margin-top:6px;letter-spacing:-.01em}
  .mp-divider{height:1px;background:#e9e9e9;margin:11px 0 9px}
  .mp-conv{font-size:10.5px;color:#4b5563;line-height:1.5}
  .mp-conv b{color:#177a5c;font-weight:800}
  .mob-steps{display:block;margin-top:13px;background:#fff;border:1px solid #e2efe8;border-radius:16px;padding:13px 13px 11px;box-shadow:0 5px 16px -14px rgba(7,63,48,.5)}
  .ms-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .ms-head b{font-size:12.8px;font-weight:700;color:#2b3340}
  .ms-head a{display:inline-flex;align-items:center;gap:2px;font-size:11.5px;font-weight:600;color:#0e5a45;text-decoration:none}
  .ms-head a svg{width:12px;height:12px}
  .ms-row{display:flex;align-items:flex-start;justify-content:space-between;gap:2px;margin-top:11px}
  .ms-step{display:flex;flex-direction:column;align-items:center;gap:7px;width:64px;flex:none}
  .ms-ic{width:40px;height:40px;border-radius:50%;border:1px solid #a9d3c2;display:grid;place-items:center;background:#fff;color:#0e5a45}
  .ms-ic svg{width:19px;height:19px}
  .ms-lb{font-size:9.8px;line-height:1.3;color:#4b5563;text-align:center}
  .ms-sep{color:#3f4756;font-size:15px;line-height:40px;flex:none;opacity:.75}
  .mob-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px 6px;margin:18px 0 4px}
  .mob-act{display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;color:#494f55;font-size:10.2px;line-height:1.25;text-align:center}
  .mob-act svg{width:23px;height:23px;color:#0e5a45;background:#eaf5ef;border-radius:50%;box-sizing:content-box;padding:16px;transition:transform .15s}
  .mob-act:active svg{transform:scale(.94)}
  .mob-act.active svg{background:#e8f5ee;color:#0e5a45;box-shadow:0 0 0 2px #cfe8dc}
  .mob-band{display:block;margin:16px -14px 0;padding:14px 14px 10px;background:#f9fafc;border-radius:18px 18px 0 0}
  .mob-banner{display:flex;flex-direction:column;gap:3px;position:relative;overflow:hidden;text-decoration:none;border-radius:14px;padding:15px 16px;color:#fff;background:linear-gradient(120deg,#073f30 0%,#0f7a3d 55%,#0e5a45 100%);box-shadow:0 12px 24px -18px rgba(7,63,48,.85)}
  .mob-banner:after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-50px;top:-70px;background:radial-gradient(circle,rgba(255,255,255,.28),rgba(255,255,255,0) 70%)}
  .mb-kicker{font-size:9px;font-weight:800;letter-spacing:.2em;color:#ffe08a}
  .mb-title{font-size:15.5px;font-weight:800;line-height:1.3;max-width:86%}
  .mb-sub{font-size:10.5px;color:rgba(255,255,255,.82);line-height:1.4}
  .mb-cta{margin-top:8px;display:inline-flex;align-items:center;gap:3px;align-self:flex-start;background:#fff;color:#0e5a45;font-size:10.5px;font-weight:800;border-radius:999px;padding:7px 12px}
  .mb-cta svg{width:12px;height:12px}
  .mob-dots{display:flex;justify-content:center;gap:6px;margin-top:8px}
  .mob-dots i{width:7px;height:7px;border-radius:50%;border:1.5px solid #0e5a45;background:transparent}
  .mob-dots i.on{background:#178a68;border-color:#178a68}
  .account-page .flow-card{border-radius:16px;border-color:#e2efe8;box-shadow:0 6px 18px -16px rgba(7,63,48,.5)}
  .account-page .order-card{border-radius:16px;border-color:#e2efe8}
  .account-page .section-head{margin:14px 0 8px}
  .account-page .section-head h2{font-size:17px;color:#16233a}
}
@media (max-width:760px){
  body:has(.account-page) .site-header{display:none!important}
  body:has(.account-page) .mobile-drawer{display:none!important}
  body:has(.account-page) .bottom-nav>a.active{color:#0e5a45}
  body:has(.account-page) .bottom-nav>a.active svg{color:#0e5a45}
  body:has(.account-page) .bottom-nav .bn-fab .bn-circle{background:#0e5a45!important}
  .account-page .mob-hero{margin-top:0;border-radius:0 0 24px 24px}
}
@media (max-width:760px){
  .account-page{padding-bottom:98px}
  .account-page .mob-band{margin-bottom:0}
}
@media (max-width:760px){
  .mob-act svg{background:#0e5a45;color:#fff;box-shadow:0 7px 16px -10px rgba(7,63,48,.75)}
  .mob-act.active svg{background:#073f30;color:#fff;box-shadow:0 0 0 2px #cfe8dc}
  .mob-act svg *{stroke-width:2.15}
  .ms-ic{background:#0e5a45;border-color:#0e5a45;color:#fff}
  .ms-ic svg *{stroke-width:2.1}
}
@media (max-width:760px){
  /* Grid menu: warna block premium bervariasi */
  .mob-act:nth-child(1) svg{background:linear-gradient(145deg,#1a8a68,#0b4a38);box-shadow:0 8px 16px -10px rgba(11,74,56,.75)}
  .mob-act:nth-child(2) svg{background:linear-gradient(145deg,#dcb25c,#a9761c);box-shadow:0 8px 16px -10px rgba(169,118,28,.7)}
  .mob-act:nth-child(3) svg{background:linear-gradient(145deg,#a85462,#7a2f3c);box-shadow:0 8px 16px -10px rgba(122,47,60,.7)}
  .mob-act:nth-child(4) svg{background:linear-gradient(145deg,#3c7091,#224a63);box-shadow:0 8px 16px -10px rgba(34,74,99,.7)}
  .mob-act:nth-child(5) svg{background:linear-gradient(145deg,#7f5c94,#553a68);box-shadow:0 8px 16px -10px rgba(85,58,104,.7)}
  .mob-act:nth-child(6) svg{background:linear-gradient(145deg,#2f7d74,#1b514a);box-shadow:0 8px 16px -10px rgba(27,81,74,.7)}
  .mob-act:nth-child(7) svg{background:linear-gradient(145deg,#99653f,#6b4227);box-shadow:0 8px 16px -10px rgba(107,66,39,.7)}
  .mob-act:nth-child(8) svg{background:linear-gradient(145deg,#51608c,#333f60);box-shadow:0 8px 16px -10px rgba(51,63,96,.7)}
  .mob-act.active svg{box-shadow:0 0 0 2px #cfe8dc,0 8px 18px -10px rgba(7,63,48,.6)}
  /* Alur 4 langkah: variasi senada */
  .ms-step:nth-child(1) .ms-ic{background:linear-gradient(145deg,#1a8a68,#0b4a38);border-color:transparent;color:#fff;box-shadow:0 6px 14px -9px rgba(11,74,56,.75)}
  .ms-step:nth-child(3) .ms-ic{background:linear-gradient(145deg,#dcb25c,#a9761c);border-color:transparent;color:#fff;box-shadow:0 6px 14px -9px rgba(169,118,28,.7)}
  .ms-step:nth-child(5) .ms-ic{background:linear-gradient(145deg,#3c7091,#224a63);border-color:transparent;color:#fff;box-shadow:0 6px 14px -9px rgba(34,74,99,.7)}
  .ms-step:nth-child(7) .ms-ic{background:linear-gradient(145deg,#7f5c94,#553a68);border-color:transparent;color:#fff;box-shadow:0 6px 14px -9px rgba(85,58,104,.7)}
}

/* ---------- MOU & e-sign pada formulir mitra ---------- */
.mou-block{margin:18px 0 14px;border:1px solid #dbe8e2;border-radius:12px;background:#f8fbf9;padding:14px}
.mou-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.mou-head h3{margin:0;font-size:13px;font-weight:800;color:#12301f}
.mou-scroll{max-height:220px;overflow-y:auto;background:#fff;border:1px solid #e6efea;border-radius:9px;padding:12px 14px;font-size:11.5px;line-height:1.75;color:#33453c;white-space:pre-wrap}
.mou-check{display:flex;gap:9px;align-items:flex-start;margin-top:11px;font-size:11.5px;line-height:1.6;color:#22382e;cursor:pointer}
.mou-check input{width:16px;height:16px;accent-color:#0f7d5c;margin-top:1px;flex:none;cursor:pointer}
.sign-block{margin:4px 0 16px;border:1px dashed #cfe3d9;border-radius:12px;background:#fff;padding:13px 14px}
.sign-label{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#4a6559;margin-bottom:7px}
.sign-preview{margin-top:9px;border-bottom:1px solid #cfe0d7;padding:6px 4px 8px;min-height:38px;font-family:'Segoe Script','Brush Script MT',cursive;font-size:22px;color:#b9c9c1;text-align:center;line-height:1.2}
.sign-preview.has-sign{color:#0d3f2f}
.sign-note{margin:9px 0 0;font-size:10.5px;line-height:1.6;color:#7a8f85}
@media(max-width:620px){.mou-scroll{max-height:180px;font-size:11px}.sign-preview{font-size:19px}}

/* ---------- unggah KTP tamu ---------- */
.kyc-block{margin:6px 0 14px;border:1px solid #dbe8e2;border-radius:12px;background:#f8fbf9;padding:13px}
.kyc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:12px;color:#12301f}
.kyc-head span{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:#fdf1ef;color:#b23b2e;padding:3px 8px;border-radius:999px}
.kyc-note{margin:0 0 10px;font-size:10.5px;line-height:1.6;color:#7a8f85}
.kyc-upload{display:flex;gap:11px;align-items:center;border:1px solid #e2ece7;background:#fff;border-radius:11px;padding:9px;margin-bottom:8px;cursor:pointer;transition:.15s}
.kyc-upload:hover{border-color:#bfdccf;box-shadow:0 3px 10px rgba(15,125,92,.08)}
.kyc-thumb{width:66px;height:50px;border-radius:8px;background:#eef4f1;display:grid;place-items:center;font-size:9px;font-weight:700;color:#7a8f85;flex:none;overflow:hidden;text-align:center;line-height:1.2;padding:2px}
.kyc-thumb.filled{background:#fff;border:1px solid #dbe8e2}
.kyc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.kyc-tx b{display:block;font-size:11.5px;color:#17352a}
.kyc-tx span{display:block;font-size:10px;color:#7a8f85;line-height:1.45;margin-top:1px}

/* ---------- admin verifikasi KTP ---------- */
.kyc-admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.kyc-card{border:1px solid #e3ece8;border-radius:13px;background:#fff;padding:12px;display:flex;flex-direction:column;gap:9px}
.kyc-photos{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.kyc-photos a{position:relative;display:block;border:1px solid #e6efea;border-radius:9px;overflow:hidden;background:#f4f8f6;aspect-ratio:4/3}
.kyc-photos img{width:100%;height:100%;object-fit:cover;display:block}
.kyc-photos a span{position:absolute;left:6px;bottom:6px;background:rgba(6,28,22,.72);color:#fff;font-size:8.5px;font-weight:700;padding:2px 6px;border-radius:5px}
.kyc-ph{aspect-ratio:4/3;border-radius:9px;background:#f4f8f6;display:grid;place-items:center;font-size:10px;color:#93a59d}
.kyc-info b{font-size:12.5px;color:#17352a}
.kyc-info .d{font-size:10.5px;color:#6b8379;margin-top:2px}
.kyc-act{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}

/* ---------- NIK ---------- */
.nik-hint{margin-top:6px;font-size:10.5px;line-height:1.55;color:#7a8f85}
.nik-hint.ok{color:#0f7d5c;font-weight:600}
.nik-hint.err{color:#b23b2e}
input[name="nik"]{letter-spacing:.06em;font-variant-numeric:tabular-nums}

/* ---------- contoh foto KTP ---------- */
.kyc-example{margin-top:10px;border:1px solid #e2ece7;border-radius:10px;background:#fff;overflow:hidden}
.kyc-example summary{display:flex;align-items:center;gap:9px;padding:8px 10px;cursor:pointer;font-size:11px;font-weight:700;color:#0f7d5c;list-style:none}
.kyc-example summary::-webkit-details-marker{display:none}
.kyc-example summary:after{content:"▾";margin-left:auto;font-size:12px;color:#7a8f85}
.kyc-example[open] summary:after{content:"▴"}
.kyc-ex-thumb{width:46px;height:31px;object-fit:cover;border-radius:6px;border:1px solid #dbe8e2;flex:none}
.kyc-ex-full{display:block;width:100%;height:auto;border-top:1px solid #eef4f1}

/* ---------- popup verifikasi identitas ---------- */
.kyc-pop{position:fixed;inset:0;z-index:240;background:rgba(7,32,25,.55);backdrop-filter:blur(4px);display:grid;place-items:center;padding:18px;animation:kycFade .18s ease}
@keyframes kycFade{from{opacity:0}to{opacity:1}}
.kyc-pop-card{position:relative;background:#fff;border-radius:20px;width:min(400px,100%);padding:26px 22px 16px;text-align:center;box-shadow:0 30px 70px -18px rgba(4,30,22,.5)}
.kyc-pop-x{position:absolute;top:9px;right:11px;border:0;background:transparent;font-size:22px;line-height:1;color:#9aa9a2;cursor:pointer;padding:3px 7px;border-radius:8px}
.kyc-pop-x:hover{background:#f1f6f3;color:#3c554b}
.kyc-pop-ic{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px}
.kyc-pop-ic svg{width:27px;height:27px}
.kyc-pop-ic.green{background:#e7f6ee;color:#0f7d5c}
.kyc-pop-ic.amber{background:#fdf3e0;color:#a97516}
.kyc-pop-ic.red{background:#fdecea;color:#b23b2e}
.kyc-pop-card h3{font-size:17px;margin:0 0 7px;color:#13322a}
.kyc-pop-card p{font-size:12.5px;line-height:1.62;color:#5d736a;margin:0 0 12px}
.kyc-pop-list{list-style:none;margin:0 0 16px;padding:11px 13px;background:#f5faf7;border-radius:11px;text-align:left;display:grid;gap:6px}
.kyc-pop-list li{font-size:11.5px;color:#3f5a4f;padding-left:17px;position:relative;line-height:1.45}
.kyc-pop-list li:before{content:"";position:absolute;left:0;top:4px;width:9px;height:9px;border-radius:50%;background:#c9e6d8;box-shadow:inset 0 0 0 2.5px #0f7d5c}
.kyc-pop-go{width:100%;justify-content:center}
.kyc-pop-later{display:block;width:100%;margin-top:8px;border:0;background:transparent;color:#7d9089;font-size:11.5px;font-weight:600;cursor:pointer;padding:6px}
.kyc-pop-later:hover{color:#0f7d5c}
@media(max-width:420px){.kyc-pop-card{padding:22px 16px 14px;border-radius:16px}}

/* ---------- login google & draf pesanan ---------- */
.gbtn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:11px 14px;border:1px solid #d8e3de;border-radius:11px;background:#fff;color:#22352e;font-size:13px;font-weight:700;cursor:pointer;transition:.15s}
.gbtn:hover{border-color:#bcd3c9;background:#f7fbf9;box-shadow:0 4px 14px -8px rgba(10,60,45,.35)}
.gbtn:disabled{opacity:.65;cursor:default}
.or-line{display:flex;align-items:center;gap:10px;margin:13px 0 15px;color:#93a59d;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.or-line:before,.or-line:after{content:"";flex:1;height:1px;background:#e6efe9}
.draft-note{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border:1px solid #cfe8db;background:#f2fbf6;border-radius:11px;margin-bottom:14px;position:relative}
.draft-ic{flex:none;width:20px;height:20px;border-radius:50%;background:#0f7d5c;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800;margin-top:1px}
.draft-note b{display:block;font-size:11.5px;color:#0f5f47;margin-bottom:2px}
.draft-note span{display:block;font-size:10.5px;line-height:1.5;color:#5d736a}
.draft-x{position:absolute;top:5px;right:7px;border:0;background:transparent;color:#8fa49b;font-size:18px;line-height:1;cursor:pointer;padding:2px 5px}
.kyc-ex-note{padding:9px 11px 11px;font-size:10.5px;line-height:1.55;color:#5d746a;background:#f8fcfa;border-top:1px solid #eef4f1}

/* ---------- banner peringatan verifikasi ---------- */
.kyc-banner{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:13px;margin:0 0 14px;position:relative;flex-wrap:wrap}
.kyc-banner.red{background:#fdf1ef;border:1px solid #f7d7d2}
.kyc-banner.amber{background:#fff9ee;border:1px solid #f4e3c4}
.kb-ic{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff}
.kyc-banner.red .kb-ic{background:#d9483b}
.kyc-banner.amber .kb-ic{background:#d99a20}
.kb-tx{flex:1;min-width:180px}
.kb-tx b{display:block;font-size:12.5px;color:#8f2a20;margin-bottom:2px}
.kyc-banner.amber .kb-tx b{color:#8a5a12}
.kb-tx span{display:block;font-size:11px;line-height:1.5;color:#6d6a63}
.kb-go{flex:none;background:#d9483b;color:#fff;font-size:11px;font-weight:700;padding:7px 13px;border-radius:9px;text-decoration:none;white-space:nowrap}
.kyc-banner.amber .kb-go{background:#c9861a}
.kb-go:hover{filter:brightness(.94)}
.kb-x{flex:none;border:0;background:transparent;color:#b08d88;font-size:19px;line-height:1;cursor:pointer;padding:0 4px;margin-left:2px}
.kb-x:hover{color:#8f2a20}
body.kyc-pop-open .kyc-banner{display:none}
@media(max-width:520px){.kb-go{order:3;width:100%;text-align:center}.kb-tx{padding-right:14px}.kb-x{position:absolute;top:5px;right:5px}}

.reg-note{background:#f3faf6;border:1px solid #d9ecdf;border-radius:10px;padding:9px 11px;font-size:10.8px;line-height:1.55;color:#4c6a5d;margin:4px 0 12px}
.reg-note b{color:#0f7d5c}
.mou-scroll{white-space:normal;max-height:320px}
.mou-scroll h3.mou-title{font-size:12px;font-weight:800;line-height:1.5;color:#0e5a45;margin:0 0 10px;text-align:center;text-transform:uppercase;letter-spacing:.2px}
.mou-scroll h4{font-size:11.5px;font-weight:800;color:#0e5a45;margin:14px 0 4px;padding-top:8px;border-top:1px solid #eef4f1}
.mou-scroll h5{font-size:11px;font-weight:700;color:#22382e;margin:10px 0 3px}
.mou-scroll p{margin:0 0 7px;text-align:justify}
#signCanvas{cursor:crosshair}

/* ---------- fasilitas + foto fasilitas ---------- */
.fac-box{margin-top:6px}
.fac-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.fac-item{display:flex;align-items:center;gap:6px;border:1px solid #e3ece8;border-radius:9px;padding:7px 9px;font-size:11px;color:#2c4a3f;background:#fff;cursor:pointer}
.fac-item:has(input:checked){border-color:#0f7d5c;background:#f2fbf6}
.fac-item input{margin:0;accent-color:#0f7d5c}
.fac-name{flex:1}
.fac-req{font-size:8.5px;font-weight:700;color:#a97516;background:#fdf3e0;border-radius:5px;padding:1px 5px;white-space:nowrap}
.fac-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px;margin-top:9px}
.fac-photos:empty{display:none}
.fac-photo{border:1px dashed #cfe0d7;border-radius:11px;padding:7px;background:#fbfdfc}
.fac-photo.filled{border-style:solid;border-color:#9fd3ba;background:#fff}
.fp-box{display:block;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#eef5f1;display:grid;place-items:center;cursor:pointer}
.fp-box img{width:100%;height:100%;object-fit:cover;display:block}
.fp-ph{font-size:10px;font-weight:700;color:#5b7a6c;text-align:center;padding:6px;line-height:1.35}
.fp-cap{font-size:9.5px;color:#4c6a5d;margin-top:5px;display:flex;align-items:center;justify-content:space-between;gap:4px;font-weight:600}
.fp-badge{font-size:8px;font-weight:700;color:#b23b2e;background:#fdeceb;border-radius:4px;padding:1px 4px}
.fac-photo.filled .fp-badge{color:#0f7d5c;background:#e7f6ee}

/* ---------- program affiliator ---------- */
.aff-intro{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 16px}
.aff-intro-item{border:1px solid #e3ece8;border-radius:11px;padding:10px;background:#f8fcfa}
.aff-intro-item b{display:block;font-size:15px;color:#0f7d5c;margin-bottom:2px}
.aff-intro-item span{font-size:10px;line-height:1.45;color:#5d736a}
.aff-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;margin:12px 0}
.aff-stat{border:1px solid #e3ece8;border-radius:12px;background:#fff;padding:12px}
.aff-stat span{display:block;font-size:10.5px;color:#6b8379;margin-bottom:3px}
.aff-stat b{font-size:17px;color:#12362b}
.aff-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:720px){.aff-grid-2{grid-template-columns:1fr}.aff-intro{grid-template-columns:1fr}}

/* ringkasan pendapatan pemilik */
.rk-hero-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.18)}
.rk-hero-stats>div{background:#0f6350;padding:12px 18px}
.rk-hero-stats span{display:block;font-size:10.5px;opacity:.82}
.rk-hero-stats b{display:block;font-size:15px;font-weight:700;margin-top:2px}
@media(max-width:640px){
  .rk-hero-stats{grid-template-columns:1fr}
  .rk-hero-stats>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px}
  .rk-hero-stats b{display:inline;margin:0;white-space:nowrap}
  .rk-hero-stats span{display:inline}
}

/* ---------- dock menu bawah (mobile, menempel di bawah) ---------- */
.dash-dock{display:none}
@media(max-width:860px){
  .dash-dock{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:105;
    padding:7px 6px calc(7px + env(safe-area-inset-bottom));
    background:#fff;border-top:1px solid rgba(14,90,69,.10);
    box-shadow:0 -8px 24px rgba(7,38,29,.10);border-radius:18px 18px 0 0}
  .dash-dock::before{content:'';position:absolute;inset:0 0 auto;height:3px;border-radius:18px 18px 0 0;
    background:linear-gradient(90deg,rgba(14,90,69,0),rgba(143,214,182,.55),rgba(231,178,60,.35),rgba(14,90,69,0));pointer-events:none}
  .dash-dock a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;
    height:54px;padding:6px 0 4px;border-radius:14px;color:#6f877d;font-size:9px;font-weight:700;
    text-decoration:none;transition:color .18s,background .18s,box-shadow .18s;overflow:visible}
  .dash-dock a svg{width:21px;height:21px;transition:transform .18s}
  .dash-dock a span{line-height:1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dash-dock a.active{color:#0b4a39;background:linear-gradient(180deg,#eaf7f0,#d8efe4);
    box-shadow:inset 0 0 0 1px rgba(14,90,69,.10)}
  .dash-dock a.active::after{content:'';position:absolute;top:-8px;left:50%;transform:translateX(-50%);
    width:22px;height:3px;border-radius:4px;background:linear-gradient(90deg,#e7b23c,#f4d58a)}
  .dash-dock a.dock-cta svg{width:44px;height:44px;padding:10px;border-radius:50%;color:#fff;margin-top:-26px;
    background:linear-gradient(145deg,#e7b23c,#c98f22);
    box-shadow:0 6px 14px rgba(201,143,34,.42),0 0 0 4px #fff;transition:transform .18s,background .18s,box-shadow .18s}
  .dash-dock a.dock-cta:active svg{transform:scale(.94)}
  .dash-dock a.dock-cta.active{background:transparent;box-shadow:none}
  .dash-dock a.dock-cta.active::after{display:none}
  .dash-dock a.dock-cta.active svg{background:linear-gradient(145deg,#12795c,#0b4a39);
    box-shadow:0 6px 14px rgba(11,74,57,.34),0 0 0 4px #fff,0 0 0 6px rgba(231,178,60,.30)}
  body.dash-mode .dash-main{padding-bottom:86px}
  body.dash-mode{padding-bottom:env(safe-area-inset-bottom)}
}

/* ---------- Pendapatan: filter tanggal + daftar ringkas ---------- */
.pd-head{align-items:center;margin-bottom:8px}
.pd-head h3{font-size:13px;letter-spacing:.06em}
.pd-head .note{font-size:10.5px;margin-top:2px}
.kpi-row.kpi-row-3{margin-bottom:12px!important}
.pd-dates{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 11px;margin-bottom:12px;box-shadow:0 1px 2px rgba(16,42,34,.03)}
.pd-dates label{display:flex;flex-direction:column;gap:4px;font-size:9px;font-weight:800;color:#658073;letter-spacing:.05em;text-transform:uppercase}
.pd-dates .input{height:33px;font-size:11.5px;min-width:138px;max-width:none;padding:0 9px}
.pd-dates .btn{height:33px;padding:0 16px;font-size:11.5px}
.pd-card{padding:0!important;margin-top:2px}
.pd-card .dash-card-head{padding:12px 16px;border-bottom:1px solid var(--line);margin:0}
.pd-count{display:inline-block;min-width:18px;padding:1px 6px;border-radius:999px;background:#eaf6f0;color:#0f7a5c;font-size:10px;font-weight:800;vertical-align:2px;text-align:center}
.pd-list{display:flex;flex-direction:column;padding:0 16px}
.pd-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid #f0f4f2}
.pd-item:first-child{border-top:0}
.pd-t{font-size:12.3px;font-weight:800;color:#16302a;line-height:1.3}
.pd-m{font-size:9.8px;color:var(--muted);margin-top:2px}
.pd-a{font-size:12.3px;font-weight:800;color:var(--green-700);text-align:right;white-space:nowrap}
.pd-s{font-size:9.5px;color:var(--muted);text-align:right;white-space:nowrap;margin-top:2px}
.pd-foot{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-top:1px solid var(--line);background:#f7fbf9;border-radius:0 0 14px 14px;font-size:10.5px;color:#4a6357}
.pd-foot b{font-size:12.5px;color:var(--green-700)}
.pd-empty{padding:16px 0;font-size:11.5px;color:var(--muted)}
.pd-more{padding:11px 0;font-size:10.5px;color:var(--muted);border-top:1px solid #f0f4f2}
@media(max-width:560px){
  .pd-head{gap:8px;margin-bottom:6px}
  .pd-head h3{font-size:12px}
  .pd-head .rk-tools{width:100%}
  .pd-head .rk-seg{width:100%;display:flex}
  .pd-head .rk-chip{flex:1;padding:6px 2px;font-size:8.6px;letter-spacing:0}
  .pd-dates{gap:6px;padding:8px 9px;margin-bottom:10px}
  .pd-dates label{flex:1 1 40%;min-width:0;font-size:8.5px}
  .pd-dates .input{width:100%;min-width:0;height:31px;font-size:11px;padding:0 6px}
  .pd-dates .btn{flex:1 1 100%;width:100%;height:31px;font-size:11px}
  .pd-card .dash-card-head{padding:11px 12px}
  .pd-list{padding:0 12px}
  .pd-item{padding:9px 0;gap:8px}
  .pd-t{font-size:11.6px}
  .pd-m{font-size:9px}
  .pd-a{font-size:11.6px}
  .pd-foot{padding:10px 12px}
}

/* KPI 3 kolom Pendapatan: nilai muat 1 baris di HP */
.kpi-row.kpi-row-3 .kpi{padding:10px 8px!important;border-radius:12px!important}
.dash-grid.kpi-row.kpi-row-3 .k-value{font-size:clamp(9.5px,2.7vw,13px)!important;letter-spacing:-.55px!important;margin-top:5px!important;white-space:nowrap!important;overflow:visible!important}
.dash-grid.kpi-row.kpi-row-3 .k-sub{font-size:8.6px!important}
@media(max-width:560px){
  .kpi-row.kpi-row-3{gap:6px!important;margin-bottom:10px!important}
  .kpi-row.kpi-row-3 .kpi{padding:9px 6px!important}
  .dash-grid.kpi-row.kpi-row-3 .k-label{font-size:7.9px!important;line-height:1.2!important}
  .dash-grid.kpi-row.kpi-row-3 .k-value{font-size:clamp(9.5px,2.7vw,12px)!important;letter-spacing:-.6px!important}
  .dash-grid.kpi-row.kpi-row-3 .k-sub{font-size:8.2px!important}
  .dash-grid.kpi-row.kpi-row-3 .k-ic{width:16px!important;height:16px!important;border-radius:5px!important}
  .dash-grid.kpi-row.kpi-row-3 .k-ic svg{width:10px!important;height:10px!important}
  /* filter tanggal jadi satu baris */
  .pd-dates{gap:5px!important;padding:7px 8px!important}
  .pd-dates label{flex:1 1 0!important;min-width:0!important;font-size:8px!important}
  .pd-dates .input{height:30px!important;font-size:10.5px!important;padding:0 4px!important}
  .pd-dates .btn{flex:0 0 78px!important;width:78px!important;height:30px!important;font-size:10px!important;padding:0!important}
}

/* filter tanggal tanpa tombol: dua kolom sama lebar */
@media(min-width:561px){.pd-dates label{flex:1 1 160px;max-width:230px}}
@media(max-width:560px){
  .pd-dates label{flex:1 1 0!important}
  .pd-dates .input{width:100%!important}
}

/* ---------- pesanan: kartu ringkas di HP ---------- */
.bk-cards{display:none}
@media(max-width:860px){
  .bk-cards{display:flex;flex-direction:column;gap:7px}
  .bk-table{display:none}
  .bk-card{border:1px solid #e3ece8;border-radius:12px;padding:9px 11px;background:#fff}
  .bk-l1{display:flex;justify-content:space-between;align-items:center;gap:8px}
  .bk-code{font-size:9.5px;color:#7d9188;font-weight:700;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bk-l2{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-top:3px}
  .bk-g b{display:block;font-size:13.5px;line-height:1.25}
  .bk-g span{font-size:10.5px;color:#7d9188}
  .bk-tot{text-align:right;font-size:13px;font-weight:800;color:#0e5a45;white-space:nowrap}
  .bk-tot span{display:block;font-size:9.5px;font-weight:600;color:#8a9d94}
  .bk-l3{display:flex;gap:6px;align-items:baseline;justify-content:space-between;font-size:10.5px;margin-top:4px;color:#33544a;font-weight:600}
  .bk-v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bk-d{white-space:nowrap;color:#7d9188;font-weight:500}
    .bk-acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:7px}
  .bk-acts .btn{height:30px;padding:0 11px;font-size:11px;display:inline-flex;align-items:center}
  .bk-sel{width:118px;height:30px;padding:0 7px;font-size:11px}
  /* header & kartu lebih ringkas di HP */
  .dash-head{gap:4px;margin-bottom:10px}
  .dash-head h1{font-size:19px;line-height:1.2}
  .dash-head .sub{font-size:11px;margin-top:2px}
  .dash-head .dash-date{display:none}
  .dash-head a.btn[href="#/"]{display:none}
  .dash-mbar{margin-bottom:6px}
}

/* ---------- rental mobil publik ---------- */
.hm-cars{margin:26px auto 38px}
.hm-cars-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.hm-cars-head h1,.hm-cars-head h2{font-size:20px;margin:0;color:#123c2e}
.hm-cars-head p{margin:4px 0 0;font-size:12.5px;color:var(--muted)}
.hm-cars-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hm-car{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(16,42,34,.04)}
.hm-car-thumb{display:block;aspect-ratio:4/3;background:#eef6f2}
.hm-car-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hm-car-ph{display:grid;place-items:center;height:100%;color:#8aa79a}
.hm-car-body{padding:11px 12px 12px;display:flex;flex-direction:column;gap:6px}
.hm-car-body h3{margin:0;font-size:13.5px;line-height:1.3}
.hm-car-body h3 a{color:#16302a;text-decoration:none}
.hm-car-chips{display:flex;flex-wrap:wrap;gap:4px}
.hm-car-chips span{font-size:9.5px;font-weight:700;color:#3f5a4e;background:#f1f6f3;border:1px solid #e0eae4;border-radius:999px;padding:2px 7px}
.hm-car-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.hm-car-foot .hm-price{font-size:14px;font-weight:800;color:var(--green-800)}
.hm-car-foot .hm-price small{font-size:10px;font-weight:600;color:var(--muted)}
.hm-car-empty{grid-column:1/-1;padding:20px;border:1px dashed var(--line);border-radius:14px;color:var(--muted);font-size:12.5px}
.car-page{padding-top:16px;padding-bottom:40px}
.car-summary{display:flex;justify-content:space-between;gap:10px;background:#f5faf7;border:1px solid #e0ece5;border-radius:10px;padding:10px 12px;margin:10px 0}
.car-summary span{display:block;font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.car-summary b{font-size:14px;color:var(--green-800)}
@media(max-width:1000px){.hm-cars-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.hm-cars-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.hm-car-body h3{font-size:12px}.hm-car-body{padding:9px 10px 10px}.hm-cars{margin:18px auto 26px}.car-page{padding-top:10px}}

/* ---------- badge terverifikasi (bawah judul, emas tanpa blok) ---------- */
.v-verif{display:inline-flex;align-items:center;gap:5px;margin:2px 0 4px;padding:0;
  background:none;border:0;border-radius:0;color:#0d6b4d;font-size:10.5px;font-weight:800;letter-spacing:.1px;line-height:1.5}
.v-verif svg{width:13px;height:13px;color:#c9922c;flex:none}
.detail-verif{display:inline-flex;align-items:center;gap:6px;background:none;border:0;border-radius:0;padding:0;
  color:#0d6b4d;font-size:11.5px;font-weight:800;margin:4px 0 6px}
.detail-verif svg{width:14px;height:14px;color:#c9922c}
@media(max-width:560px){
  .v-verif{font-size:9.5px;gap:4px}
  .v-verif svg{width:11px;height:11px}
}

/* ---------- katalog rental: kartu + filter + tombol pesan ---------- */
.hm-car-thumb{position:relative}
.car-verified{position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;gap:3px;background:rgba(255,255,255,.95);color:#0f7a5c;font-size:9px;font-weight:800;padding:3px 7px;border-radius:999px;border:1px solid rgba(15,122,92,.18);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.car-verified svg{width:10px;height:10px}
.hm-car .hm-rate{margin:1px 0 1px;font-size:10px}
.hm-car .hm-rate b{font-size:10.5px}
.hm-car .hm-rate svg{width:11px;height:11px}
.hm-rate-new span{color:#8a9c93;font-size:9.8px}
.hm-car-foot{margin-top:2px}
.car-btn{display:flex;align-items:center;justify-content:center;width:100%;height:34px;margin-top:7px;border-radius:9px;background:linear-gradient(135deg,#12795c,#0b4a39);color:#fff;font-size:12px;font-weight:800;text-decoration:none;letter-spacing:.01em;box-shadow:0 4px 10px rgba(11,74,57,.18);transition:filter .15s,transform .15s}
.car-btn:hover{filter:brightness(1.06);transform:translateY(-1px);color:#fff}
.car-pill{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;color:#0f7a5c;background:#eaf6f0;border:1px solid #cfe8db;border-radius:999px;padding:3px 8px}
.car-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.car-tools .car-search{flex:1 1 240px;max-width:360px;margin:0}
.car-chips{display:flex;gap:6px;flex-wrap:wrap}
.car-chip{border:1px solid var(--line);background:#fff;color:#3f5a4e;font-size:11px;font-weight:700;padding:7px 12px;border-radius:999px;cursor:pointer;font-family:inherit}
.car-chip.on{background:#0f7a5c;border-color:#0f7a5c;color:#fff}
.car-sort{height:34px;font-size:11.5px;min-width:150px;max-width:190px}
.car-review{padding:10px 0;border-top:1px solid #f0f4f2}
.car-review:first-of-type{border-top:0;padding-top:0}
.cr-head{display:flex;justify-content:space-between;gap:8px;font-size:12px;align-items:center}
.cr-star{color:#f0b429;font-size:11px;letter-spacing:1px;white-space:nowrap}
.car-review p{margin:4px 0 0;font-size:12px;color:#33453c;line-height:1.5}
.cr-date{font-size:10px;color:var(--muted);margin-top:3px}
@media(max-width:560px){
  .car-btn{height:32px;font-size:11px;margin-top:6px;border-radius:8px}
  .car-tools{gap:6px}
  .car-tools .car-search{flex:1 1 100%;max-width:none}
  .car-chip{font-size:10px;padding:6px 10px}
  .car-sort{flex:1 1 100%;max-width:none;height:32px}
  .hm-car .hm-rate{font-size:9.2px}
  .hm-car .hm-rate b{font-size:9.6px}
  .hm-rate-new span{font-size:8.8px}
}
.hm-car .hm-price small{margin-left:4px}
.hm-car .hm-car-chips span{white-space:nowrap}

/* harga mobil: coret kecil di atas, harga utama biru & besar */
.hm-car .hm-car-foot{display:block}
.hm-car .car-old{display:block;font-size:10px;font-weight:600;color:#94a3a0;text-decoration:line-through;line-height:1.3;margin-bottom:1px}
.hm-car .hm-price{font-size:19px!important;font-weight:800!important;color:#0f7a5c!important;letter-spacing:-.5px;line-height:1.2}
.hm-car .hm-price small{font-size:10px!important;color:#5f7d70!important;font-weight:600}
@media(max-width:560px){
  .hm-car .hm-price{font-size:17px!important}
  .hm-car .car-old{font-size:9px}
  .hm-car .hm-price small{font-size:9px!important}
}

/* ---------- hero laporan: 3 skema ---------- */
.rk-hero-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;align-items:start;padding:20px 22px 18px}
.rk-hc{padding:0 18px;border-left:1px solid rgba(255,255,255,.20)}
.rk-hc:first-child{padding-left:0;border-left:0}
.rk-hc span{display:block;font-size:9.5px;letter-spacing:1.5px;font-weight:800;opacity:.82}
.rk-hc b{display:block;font-size:19px;font-weight:800;line-height:1.25;margin-top:3px;white-space:nowrap}
.rk-hc b.big{font-size:31px}
.rk-hc i{display:block;font-style:normal;font-size:10.5px;opacity:.8;margin-top:3px}
@media(max-width:700px){
  .rk-hero-grid{grid-template-columns:1fr;gap:0;padding:18px 18px 16px}
  .rk-hc{padding:10px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.16)}
  .rk-hc:first-child{padding-top:0;border-top:0}
  .rk-hc b.big{font-size:27px}
  .rk-hc b{font-size:17px}
}

/* ---------- panel detail tanggal kalender (klik tanggal) ---------- */
.avc-dayinfo{margin-top:10px;border:1px solid #e2ece7;border-radius:14px;background:#fff;
  box-shadow:0 8px 22px rgba(16,42,34,.10);padding:12px 14px;display:flex;flex-direction:column;gap:8px;
  animation:diIn .16s ease-out}
@keyframes diIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.di-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.di-head b{display:block;font-size:13.5px;color:#12352a;line-height:1.3}
.di-head span{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.di-pill{font-size:9.5px;font-weight:800;border-radius:999px;padding:3px 9px;white-space:nowrap;letter-spacing:.02em}
.di-pill.green{background:#e8f8f0;color:#0f7a5c;border:1px solid #cfeadd}
.di-pill.red{background:#fdecea;color:#b23b2e;border:1px solid #f6cfc9}
.di-pill.grey{background:#f2f5f3;color:#5b7068;border:1px solid #e4ebe7}
.di-promo{display:inline-flex;align-items:center;gap:5px;width:fit-content;font-size:10.5px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#d6382b,#b3261a);border-radius:999px;padding:4px 10px;
  box-shadow:0 4px 10px rgba(214,58,43,.28);letter-spacing:.02em}
.di-promo svg{width:11px;height:11px}
.di-prices{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.di-was span,.di-now span{display:block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#84988e;margin-bottom:2px}
.di-was s{font-size:13px;font-weight:700;color:#9aa8a2}
.di-now b{font-size:20px;font-weight:800;color:#0f7a5c;letter-spacing:-.6px;line-height:1.1}
.di-now b i{font-style:normal;font-size:10px;font-weight:600;color:#6b8379;margin-left:2px}
.di-save{align-self:flex-start;font-size:10.5px;font-weight:800;color:#0f7a5c;background:#eef8f3;border:1px solid #d6ecdf;border-radius:8px;padding:5px 9px}
.di-note{font-size:11px;color:#7a5312;background:#fff8e8;border:1px solid #f0dfb8;border-radius:9px;padding:6px 10px}
.di-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:2px}
.di-actions .input{height:32px;font-size:11.5px;flex:1 1 180px;min-width:0}
.di-actions .btn{height:32px;font-size:11px}
@media(max-width:560px){
  .avc-dayinfo{padding:11px 12px;border-radius:13px}
  .di-now b{font-size:18px}
  .di-actions .btn{flex:1 1 auto}
}
.avc-day .hot-tag{top:3px;right:3px;font-size:7px;padding:2px 4px;border-width:1px;letter-spacing:0;box-shadow:0 1px 3px rgba(178,27,18,.35)}
.avc-day.hot .d{padding-right:16px}
.avc-day.hot .d{padding-right:0}
.avc-day.hot .s{color:#cf4433;font-weight:800}
.avc-day .hot-tag{display:none!important}

/* badge promo ringkas di kalender layar kecil */
@media(max-width:620px){
  .avc-day.hot::after{content:'−' attr(data-off) '%';position:absolute;top:2px;right:2px;z-index:2;
    background:linear-gradient(135deg,#e8412c,#b21b12);color:#fff;font-size:6.4px;font-weight:800;line-height:1;
    padding:2px 3px;border-radius:999px;border:1px solid #fff;box-shadow:0 1px 3px rgba(178,27,18,.35)}
  .avc-day.hot .d{font-size:10px}
}
@media(max-width:620px){
  .avc-day.hot::after{content:'−' attr(data-off);top:auto;bottom:2px;right:2px;font-size:6.2px;padding:1px 3px;letter-spacing:0}
  .avc-day.hot .d{font-size:10.5px;padding:0}
}

/* kalender popover: tanpa lapisan gelap di belakang */
.avc-pop{background:transparent!important;backdrop-filter:none!important}
.avc-pop-in{box-shadow:0 18px 44px rgba(9,38,29,.18)!important;border:1px solid #e2ece7}
.bb-cell:has(input[name="check_in"]),.bb-cell:has(input[name="check_out"]){cursor:pointer}

/* popover kalender di HP: bottom sheet langsung terlihat, tanpa perlu scroll */
@media(max-width:640px){
  .avc-pop{position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;
    display:flex!important;align-items:flex-end!important;justify-content:center!important;padding:0!important;
    background:transparent!important;animation:avcSheetIn .18s ease-out}
  .avc-pop-in{width:100%!important;max-width:none!important;max-height:86vh!important;overflow:auto!important;
    border-radius:18px 18px 0 0!important;border:0!important;box-shadow:0 -12px 34px rgba(9,38,29,.18)!important;
    padding:14px 13px calc(14px + env(safe-area-inset-bottom))!important}
}
@keyframes avcSheetIn{from{transform:translateY(16px);opacity:.6}to{transform:none;opacity:1}}

/* desktop: kalender langsung tampil di tengah layar (tanpa scroll) */
@media(min-width:641px){
  .avc-pop{position:fixed!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;
    padding:16px!important;background:transparent!important;animation:avcSheetIn .16s ease-out}
  .avc-pop-in{width:100%!important;max-width:430px!important;max-height:90vh!important;overflow:auto!important;
    border-radius:16px!important;border:1px solid #e2ece7!important;box-shadow:0 18px 44px rgba(9,38,29,.16)!important}
}

/* tanggal terisi: warna lebih gelap agar jelas beda */
.avc-day.red{background:linear-gradient(160deg,#b23a2c 0%,#8c2318 100%)!important;border-color:#7a1e13!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)!important}
.avc-day.red .d{color:#fff!important}
.avc-day.red .s{color:rgba(255,255,255,.88)!important}
.avc-day.red .p{color:#fff!important}
.avc-day.red:hover{border-color:#7a1e13!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 2px 8px rgba(140,35,24,.25)!important}
.avc-day.red.sel{background:linear-gradient(160deg,#b23a2c,#8c2318)!important;box-shadow:0 0 0 2px rgba(255,255,255,.7)!important}
.avc-legend .dot.red{background:#8c2318!important}
/* pastikan sheet kalender solid (tanpa efek transparan/animation compositing) */
.avc-pop{animation:none!important;opacity:1!important;mix-blend-mode:normal!important}
.avc-pop-in{background:#fff!important;opacity:1!important;isolation:isolate;backface-visibility:hidden}

/* tanggal terisi: abu tua mati (bukan merah), lebih gelap dari tanggal lewat */
.avc-day.red{background:linear-gradient(160deg,#525d57 0%,#3c4641 100%)!important;border-color:#333c38!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)!important}
.avc-day.red .d{color:#f4f7f5!important}
.avc-day.red .s{color:rgba(255,255,255,.78)!important}
.avc-day.red .p{color:rgba(255,255,255,.7)!important}
.avc-day.red:hover{border-color:#333c38!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 2px 8px rgba(40,50,46,.22)!important}
.avc-day.red.sel{background:linear-gradient(160deg,#525d57,#3c4641)!important;box-shadow:0 0 0 2px rgba(255,255,255,.55)!important}
.avc-legend .dot.red{background:#3f4a45!important}

/* tombol ajukan di kartu laporan */
.rk-ajukan{margin-top:9px;display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.55);color:#fff;border-radius:999px;padding:6px 12px;font-size:11px;
  font-weight:800;cursor:pointer;transition:background .18s,transform .18s;font-family:inherit}
.rk-ajukan:hover{background:rgba(255,255,255,.26)}
.rk-ajukan:active{transform:scale(.97)}
.rk-ajukan:disabled{opacity:.6;cursor:default}
.rk-min{color:rgba(255,255,255,.75)!important;font-size:10px!important}
@media(max-width:700px){.rk-ajukan{width:100%;justify-content:center;margin-top:8px}}

/* tanggal terisi: warna tipis seperti tanggal lewat + gembok */
.avc-day.red{background:#f2f5f3!important;border-color:#e4eae7!important;box-shadow:none!important}
.avc-day.red .d{color:#8a9791!important}
.avc-day.red .s{color:#8a9791!important;font-weight:700}
.avc-day.red .p{color:#a2ada7!important}
.avc-day.red:hover{border-color:#d7e0db!important;box-shadow:0 1px 4px rgba(40,50,46,.08)!important}
.avc-day.red.sel{background:#eceff0!important;box-shadow:0 0 0 2px rgba(120,140,130,.25)!important}
.avc-legend .dot.red{background:#b9c4be!important}

/* HP: ikon gembok untuk terisi, ikon api + diskon untuk promo */
@media(max-width:620px){
  .avc-day.red::after{content:'';position:absolute;top:3px;right:3px;width:8px;height:8px;opacity:.75;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9791' stroke-width='2.6' stroke-linecap='round'%3E%3Crect x='4' y='10' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat}
  .avc-day.red .d{padding-right:10px}
  .avc-day.hot::after{content:'−' attr(data-off) '%';padding:2px 3px 2px 10px;background-color:#e8412c!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2c1.2 3.6-1.4 5.2-2.8 6.9C7.6 10.7 6.7 12.3 6.7 14a5.3 5.3 0 0 0 10.6 0c0-1.9-.9-3.4-2.1-4.6-.4 1.4-1.2 2.2-2.2 2.6.6-2.6.1-6-1-10Z'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;background-position:2px center!important;background-size:6.5px 6.5px!important}
}
@media(max-width:620px){
  .avc-day.red::after{width:9px;height:9px;opacity:.85;top:2px;right:2px}
}

/* HOT SALE: hijau seperti tanggal tersedia, dibedakan badge api merah + harga asli & promo */
.avc-day.hot{background:#f2fbf6!important;border-color:#cfe9db!important;
  box-shadow:inset 0 0 0 1px rgba(15,122,92,.05)!important}
.avc-day.hot .d{color:#0e5c45!important}
.avc-day.hot .s{color:#cf3a2a!important;font-weight:800}
.avc-day.hot .p{color:#0f7a5c!important;font-weight:800}
.avc-day.hot .p s{color:#9aa8a2!important;font-weight:600;font-size:.9em}
.avc-day.hot:hover{border-color:#a9d6c2!important;box-shadow:0 2px 8px rgba(15,122,92,.12)!important}
@media(max-width:620px){
  .avc-day.hot::after{top:2px!important;bottom:auto!important}
  .avc-mini .avc-day.hot{min-height:60px}
  .avc-mini .avc-day.hot .p{display:flex!important;flex-direction:column;line-height:1.05;font-size:6.7px!important;overflow:visible!important}
  .avc-mini .avc-day.hot .p s{font-size:6.1px}
  .avc-mini .avc-day.hot .p b{font-size:6.9px}
}

/* HP: badge api bulat kecil, tinggi sel seragam, harga kecil 2 baris */
@media(max-width:620px){
  .avc-mini .avc-day{min-height:58px}
  .avc-day.hot::after{content:''!important;width:11px!important;height:11px!important;border-radius:50%!important;
    padding:0!important;top:2px!important;right:2px!important;bottom:auto!important;
    background-color:#e8412c!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2c1.2 3.6-1.4 5.2-2.8 6.9C7.6 10.7 6.7 12.3 6.7 14a5.3 5.3 0 0 0 10.6 0c0-1.9-.9-3.4-2.1-4.6-.4 1.4-1.2 2.2-2.2 2.6.6-2.6.1-6-1-10Z'/%3E%3C/svg%3E")!important;
    background-size:7px 7px!important;background-position:center!important;background-repeat:no-repeat!important;
    border:1px solid #fff!important;box-shadow:0 1px 2px rgba(0,0,0,.18)!important}
  .avc-day.hot .d{padding-right:12px!important}
  .avc-mini .avc-day.hot .p{font-size:6.4px!important;line-height:1.1!important}
  .avc-mini .avc-day.hot .p s{font-size:5.9px!important}
  .avc-mini .avc-day.hot .p b{font-size:6.7px!important}
}

/* ---------- modal pencairan modern ---------- */
.po-back{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(9,32,26,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .18s}
.po-back.in{opacity:1}
.po-back.out{opacity:0}
.po-sheet{width:100%;max-width:430px;background:#fff;border-radius:20px;padding:20px 20px 18px;
  box-shadow:0 30px 70px rgba(6,30,24,.34),0 2px 0 rgba(255,255,255,.6) inset;
  transform:translateY(14px) scale(.985);opacity:.6;transition:transform .22s cubic-bezier(.2,.8,.25,1),opacity .22s}
.po-back.in .po-sheet{transform:none;opacity:1}
.po-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.po-kicker{font-size:9px;letter-spacing:1.6px;font-weight:800;color:#7d9188;text-transform:uppercase}
.po-sheet h3{margin:3px 0 0;font-size:18px;color:#123f32;letter-spacing:-.2px}
.po-x{width:32px;height:32px;border-radius:50%;border:0;background:#f1f6f3;color:#5c736a;font-size:20px;line-height:1;
  cursor:pointer;transition:background .15s,color .15s}
.po-x:hover{background:#e6efe9;color:#123f32}
.po-balance{margin-top:14px;padding:12px 14px;border-radius:14px;background:linear-gradient(135deg,#0e5a45,#127a5d);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.po-balance span{font-size:10.5px;opacity:.85;letter-spacing:.3px}
.po-balance b{font-size:18px;font-weight:800;white-space:nowrap}
.po-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.po-opt{text-align:left;padding:10px 12px;border-radius:12px;border:1.5px solid #e3ece8;background:#fff;cursor:pointer;
  transition:border-color .16s,background .16s,box-shadow .16s;font-family:inherit}
.po-opt b{display:block;font-size:12.5px;color:#123f32}
.po-opt span{display:block;font-size:10.5px;color:#7d9188;margin-top:2px}
.po-opt.is-on{border-color:#0e5a45;background:#f2faf6;box-shadow:0 0 0 3px rgba(14,90,69,.08)}
.po-opt.is-on b{color:#0b4a39}
.po-field{margin-top:12px}
.po-field label{display:block;font-size:10.5px;font-weight:700;color:#476257;margin-bottom:5px}
.po-inp{display:flex;align-items:center;gap:7px;border:1.5px solid #dfe9e4;border-radius:12px;padding:9px 12px;background:#fbfdfc;transition:border-color .16s,box-shadow .16s}
.po-inp:focus-within{border-color:#0e5a45;box-shadow:0 0 0 3px rgba(14,90,69,.08);background:#fff}
.po-inp span{font-size:12.5px;color:#7d9188;font-weight:700}
.po-inp input{flex:1;border:0;outline:0;background:none;font-size:17px;font-weight:800;color:#123f32;font-family:inherit;min-width:0}
.po-inp input.bad{border-color:#b23b2e}
.po-hint{font-size:10px;color:#8a9d94;margin-top:5px}
.po-err{font-size:10.5px;color:#b23b2e;font-weight:700;margin-top:5px}
.po-note{font-size:10.5px;color:#6b857b;background:#f5f9f7;border:1px solid #e8f1ec;border-radius:10px;padding:8px 10px;margin-top:12px;line-height:1.45}
.po-acts{display:flex;gap:8px;margin-top:14px}
.po-cancel{flex:1;height:42px;border-radius:12px;border:1.5px solid #dfe9e4;background:#fff;color:#33544a;font-weight:800;font-size:12.5px;cursor:pointer;font-family:inherit}
.po-send{flex:1.6;height:42px;border-radius:12px;border:0;background:linear-gradient(135deg,#0e5a45,#127a5d);color:#fff;font-weight:800;
  font-size:12.5px;cursor:pointer;box-shadow:0 8px 18px rgba(14,90,69,.28);font-family:inherit;transition:transform .15s,opacity .15s}
.po-send:active{transform:scale(.985)}
.po-send:disabled{opacity:.7;cursor:default}
@media(max-width:560px){
  .po-back{padding:0;align-items:flex-end}
  .po-sheet{max-width:none;border-radius:22px 22px 0 0;padding:18px 16px calc(16px + env(safe-area-inset-bottom));
    transform:translateY(30px);box-shadow:0 -18px 50px rgba(6,30,24,.28)}
  .po-balance b{font-size:16.5px}
  .po-sheet h3{font-size:17px}
  .po-acts{position:sticky;bottom:0}
}

/* desktop: angka promo saja, status di baris paling bawah */
.avc-day{gap:1px}
.avc-day .s.st{font-size:8.2px;font-weight:700;color:#8ba79b;margin-top:1px}
.avc-day.green .s.st{color:#1f8f68}
.avc-day.hot .s.st{color:#1f8f68!important}
.avc-day.red .s.st{color:#9aa8a2!important}
.avc-day.closed .s.st{color:#a8802a}
.avc-day.past .s.st{opacity:.5}
.avc-day .s.hot-s{color:#cf3a2a;font-weight:800;font-size:9px;gap:2px}
.avc-day .s.hot-s svg{width:9px;height:9px;color:#e8412c}
@media(max-width:620px){
  .avc-day .s.st{display:none!important}
  .avc-day .s.hot-s{display:none!important}
}

/* angka promo lebih kecil, ikon api lebih besar */
.avc-day .s.hot-s{font-size:7.4px!important;gap:3px!important;letter-spacing:0!important}
.avc-day .s.hot-s svg{width:13px!important;height:13px!important;color:#e8412c!important;flex:none}
@media(max-width:620px){
  .avc-day.hot::after{width:15px!important;height:15px!important;background-size:10px 10px!important;top:1px!important;right:1px!important}
  .avc-day.hot .d{padding-right:16px!important}
}

/* popover: beri ruang agar harga asli & promo terlihat */
.avc-mini .avc-day{min-height:62px;padding:4px 5px}
.avc-mini .avc-day .p{font-size:8px;white-space:nowrap;overflow:visible}
.avc-mini .avc-day.hot .p{display:flex!important;flex-direction:column;align-items:flex-start;gap:0;line-height:1.08;font-size:7px!important}
.avc-mini .avc-day.hot .p s{font-size:6.4px!important;line-height:1.05}
.avc-mini .avc-day.hot .p b{font-size:7.4px!important;line-height:1.05}
.avc-day .s.hot-s svg{width:14px!important;height:14px!important;padding:1.5px!important;background:#fdeceb!important;border-radius:50%!important;box-sizing:content-box!important;color:#e8412c!important}
.avc-day .s.hot-s{font-size:7px!important;gap:2px!important;line-height:1.1!important}

/* efek jejak klik + pilihan tanggal (1 tanggal / rentang A→B) */
.avc-day{transition:transform .12s,box-shadow .18s,background .15s,border-color .15s}
.avc-day:active{transform:scale(.96)}
@keyframes avcTap{0%{box-shadow:0 0 0 0 rgba(15,122,92,.45)}100%{box-shadow:0 0 0 10px rgba(15,122,92,0)}}
.avc-day.tapped{animation:avcTap .34s ease-out}
.avc-day.sel{background:linear-gradient(160deg,#12795c,#0b5c46)!important;border-color:#0b5c46!important;box-shadow:0 4px 12px rgba(11,92,70,.28)!important}
.avc-day.sel .d{color:#fff!important}
.avc-day.sel .s,.avc-day.sel .s.st,.avc-day.sel .p,.avc-day.sel .p s,.avc-day.sel .p b{color:#fff!important}
.avc-day.sel .s.hot-s svg{background:rgba(255,255,255,.9)!important;color:#d6382b!important}
.avc-day.sel::after{filter:none}
.avc-day.sel.start,.avc-day.sel.end{box-shadow:0 4px 14px rgba(11,92,70,.34),0 0 0 2px rgba(255,255,255,.9)!important}
.avc-day.sel.start::before,.avc-day.sel.end::before{position:absolute;top:1px;left:2px;font-size:6px;font-weight:900;letter-spacing:.04em;
  color:#fff;background:rgba(0,0,0,.22);border-radius:3px;padding:0 2px;line-height:1.4}
.avc-day.sel.start::before{content:'IN'}
.avc-day.sel.end::before{content:'OUT'}
.avc-day.inrange{background:#e4f5ec!important;border-color:#b9e0cd!important;box-shadow:none!important}
.avc-day.inrange .d{color:#0e5c45!important}
.avc-day.inrange .p,.avc-day.inrange .s{color:#2a7d5f!important}

/* label IN/OUT dihapus agar tidak menutupi tanggal */
.avc-day.sel.start::before,.avc-day.sel.end::before{content:none!important;display:none!important}
.avc-day.sel{position:relative}

/* tanggal di dalam rentang ikut hijau (menandakan sudah diikat) */
.avc-day.inrange{background:linear-gradient(160deg,#1d8a67,#147153)!important;border-color:#126a4f!important;box-shadow:none!important}
.avc-day.inrange .d,.avc-day.inrange .p,.avc-day.inrange .p s,.avc-day.inrange .p b,.avc-day.inrange .s,.avc-day.inrange .s.st{color:#fff!important}
.avc-day.inrange .p s{opacity:.8}
.avc-day.inrange .s.hot-s svg{background:rgba(255,255,255,.92)!important;color:#d6382b!important}

/* checkout: dua kolom sama rata, pembayaran & tombol di kartu ringkasan */
form.flow-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:stretch;margin:0}
form.flow-layout .flow-main{height:100%;margin-bottom:0}
form.flow-layout .flow-side{position:sticky;top:16px;align-self:start;margin-bottom:0;display:flex;flex-direction:column}
form.flow-layout .flow-side .pay-block{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.pay-head{margin:0 0 8px!important}
.pay-opt{display:flex;align-items:flex-start;gap:9px;padding:8px 10px!important;border:1px solid var(--line);border-radius:10px;margin-bottom:7px;cursor:pointer;transition:.15s}
.pay-opt span{display:flex;flex-direction:column;line-height:1.25}
.pay-opt small{color:var(--muted);font-size:10.5px;font-weight:600}
.pay-opt:has(input:checked){border-color:#9ed3bd;background:#f3fbf7;box-shadow:0 0 0 2px rgba(15,122,92,.08)}
.flow-side .btn-block{margin-top:auto!important}
@media(max-width:980px){
  form.flow-layout{grid-template-columns:1fr}
  form.flow-layout .flow-side{position:static}
}
form.flow-layout{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)!important;gap:20px!important}
@media(max-width:980px){form.flow-layout{grid-template-columns:1fr!important}}

/* kartu layanan tambahan di halaman villa */
.ex-card{align-items:flex-start!important;min-width:0}
.ex-main{flex:1;min-width:0}
.ex-price{font-weight:700;color:var(--green-800);margin-top:3px;font-size:12.5px}
.ex-pesan{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:6px 11px;border-radius:999px;white-space:nowrap;
  background:#eef7f2;border:1px solid #cfe7db;color:#0b5f47;font-size:11px;font-weight:800;text-decoration:none;
  transition:background .16s,border-color .16s,transform .12s}
.ex-pesan svg{width:12px;height:12px}
.ex-pesan:hover{background:#e2f2ea;border-color:#a9d8c4}
.ex-pesan:active{transform:scale(.97)}
@media(max-width:560px){.ex-pesan{width:100%;justify-content:center}}

.ex-grid{grid-template-columns:repeat(auto-fit,minmax(205px,1fr))!important;gap:10px!important}
@media(max-width:560px){.ex-grid{grid-template-columns:1fr!important}}

.ex-flash{animation:exflash 1.7s ease}
@keyframes exflash{0%{box-shadow:0 0 0 0 rgba(14,90,69,.0)}25%{box-shadow:0 0 0 6px rgba(14,90,69,.16)}100%{box-shadow:0 0 0 0 rgba(14,90,69,0)}}

/* ===== Ringkasan pesanan gaya struk ===== */
.flow-side.receipt{background:#fff;border:1px solid #e4ebe7;border-radius:16px;padding:16px 16px 18px;box-shadow:0 10px 28px rgba(12,58,43,.09);position:relative;overflow:hidden}
.flow-side.receipt::before{content:'';position:absolute;inset:0 0 auto 0;height:5px;background:repeating-linear-gradient(90deg,#0f7a5c 0 14px,#dff0e8 14px 28px)}
.rcpt-tag{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#8fa79c;margin:6px 0 10px}
.summary-villa{gap:12px;padding-bottom:12px;border-bottom:1.5px dashed #dbe6e0;margin-bottom:6px}
.summary-villa img{width:74px;height:74px;border-radius:12px;object-fit:cover}
.summary-villa .name{font-size:19px!important;font-weight:900!important;line-height:1.22;letter-spacing:-.2px;color:#0c3a2b}
.summary-villa .meta{font-size:11.5px;color:#7c8f85}
.flow-side.receipt .bb-line{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dotted #e2eae6;font-size:12.5px}
.flow-side.receipt .bb-line>span:first-child{color:#6d8177}
.flow-side.receipt .bb-line>b{font-variant-numeric:tabular-nums;font-weight:800;color:#123f31}
.flow-side.receipt .bb-line.total{border-bottom:0;border-top:2px dashed #cfe0d7;margin-top:8px;padding:12px 0 4px;font-size:14px;font-weight:900}
.flow-side.receipt .bb-line.total span:last-child{font-size:20px;font-weight:900;color:#0f7a5c;font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.voucher-wrap{position:relative;margin:10px 0 4px}
.voucher-wrap .input{padding-right:74px!important;height:42px;font-weight:700}
.voucher-wrap .btn{position:absolute;right:4px;top:4px;height:34px;padding:0 16px;border-radius:9px;font-size:12px;font-weight:800;
  background:#0f7a5c!important;color:#fff!important;border:0;box-shadow:0 2px 6px rgba(15,122,92,.25)}
.voucher-wrap .btn:hover{background:#0b5f47!important}
.pay-block{border-top:1.5px dashed #dbe6e0!important;margin-top:14px!important;padding-top:12px!important}
.pay-head .n{background:#eaf6f0!important;color:#0f7a5c!important}
.flow-side .btn-block.btn-lg{height:46px;border-radius:11px;font-size:13.5px;font-weight:900;letter-spacing:.01em;box-shadow:0 8px 20px rgba(14,90,69,.22)}
.owner-mini{border-top:1px dashed #e2eae6;margin-top:14px;padding-top:12px}

/* ===== checkout 3 kolom: isian inti | layanan tambahan | ringkasan ===== */
form.flow-layout.flow-3col{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 372px!important;gap:16px!important;align-items:start!important}
form.flow-layout.flow-3col .flow-col{margin-bottom:0!important;height:auto!important}
form.flow-layout.flow-3col .flow-main,
form.flow-layout.flow-3col .flow-extra{min-width:0}
form.flow-layout.flow-3col .flow-side{position:sticky!important;top:16px!important;align-self:start!important}
form.flow-layout.flow-3col .flow-extra .form-note{margin-top:0}
@media(max-width:1199px) and (min-width:981px){
  form.flow-layout.flow-3col{grid-template-columns:minmax(0,1fr) 360px!important}
  form.flow-layout.flow-3col .flow-main{grid-column:1;grid-row:1}
  form.flow-layout.flow-3col .flow-extra{grid-column:1;grid-row:2}
  form.flow-layout.flow-3col .flow-side{grid-column:2;grid-row:1 / span 2}
}
@media(max-width:980px){
  form.flow-layout.flow-3col{grid-template-columns:1fr!important}
  form.flow-layout.flow-3col .flow-side{position:static!important}
}

/* ===== keranjang pesanan ===== */
.cart-link{position:relative;display:inline-flex;align-items:center;gap:6px}
.cart-badge{min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#e0412f;color:#fff;font:800 10px/17px "Plus Jakarta Sans",sans-serif;text-align:center;margin-left:-2px}
.cart-head{margin:14px 0 18px}
.cart-head h1{font-size:24px;font-weight:900;color:#0c3a2b;margin:0 0 4px}
.cart-head p{margin:0;color:#6d8177;font-size:12.5px}
.cart-list{display:flex;flex-direction:column;gap:12px;margin-bottom:40px}
.cart-item{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid #e4ebe7;border-radius:14px;padding:12px;box-shadow:0 6px 18px rgba(12,58,43,.06);flex-wrap:wrap}
.cart-item img{width:96px;height:72px;object-fit:cover;border-radius:10px;background:#eef4f1;flex:none}
.ci-body{flex:1;min-width:180px}
.ci-name{font-size:15px;font-weight:900;color:#0c3a2b}
.ci-meta{font-size:11.5px;color:#7c8f85;display:flex;align-items:center;gap:4px;margin-top:2px}
.ci-dates{font-size:12px;color:#41544b;font-weight:700;margin-top:6px}
.ci-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.ci-right b{font-size:15px;font-weight:900;color:#0f7a5c;font-variant-numeric:tabular-nums}
.ci-del{border:1px solid #f0d9d4;background:#fdf3f1;color:#c2402c;font:700 11.5px "Plus Jakarta Sans",sans-serif;border-radius:9px;padding:8px 12px;cursor:pointer}
.ci-del:hover{background:#fbe7e3}
@media(max-width:560px){
  .cart-item img{width:76px;height:60px}
  .ci-right{width:100%;justify-content:space-between}
}

/* checkout: layout lebih lega & ringkas */
.ex-label:has(input:checked){border-color:#0e5a45!important;background:#f2faf6!important;box-shadow:0 0 0 4px rgba(14,90,69,.06)}
.flow-main{padding:28px 32px!important}
.flow-side{padding:24px 28px!important}
.flow-head h3{font-size:17px!important}
.ex-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))!important}
@media(max-width:860px){
  .flow-main{padding:20px 18px!important}
  .ex-grid{grid-template-columns:1fr!important}
  .pay-block{margin-top:24px!important;padding-top:20px!important}
}

/* checkout: kalender & menu lebih ringkas */
#avcBook .avc-day{min-height:44px;padding:4px 5px;border-radius:8px}
#avcBook .avc-day .d{font-size:11px}
#avcBook .avc-day .p{display:none}
#avcBook .avc-day .s{font-size:8.6px}
.ex-menu{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* checkout: panel detail tanggal tidak perlu (info sudah ada di ringkasan) */
#avcBook .avc-action{display:none!important}
#avcBook .avc-head{margin-bottom:6px}
#avcBook .avc-legend{font-size:10px;gap:8px;margin:4px 0 8px}
#avcBook .avc-dayinfo{display:none!important}
#avcBook .avc{padding:12px}
#avcBook .avc-top{padding:0 2px 8px}

/* ===== HP: sel kalender sama seperti desktop (api + angka promo + Tersedia + harga) ===== */
@media(max-width:620px){
  .avc-mini .avc-day{min-height:66px!important;padding:3px 4px!important;gap:0!important;justify-content:flex-start!important}
  .avc-mini .avc-day .d{font-size:11px;line-height:1.05}
  .avc-day .s.hot-s{display:inline-flex!important;align-items:center;font-size:6.6px!important;gap:1px!important;line-height:1.1!important}
  .avc-day .s.hot-s svg{width:11px!important;height:11px!important;padding:0!important;background:transparent!important;border-radius:0!important}
  .avc-day .s.st{display:block!important;font-size:7px!important;line-height:1.05!important;margin-top:0!important;font-weight:700!important}
  .avc-day.hot::after{content:none!important;display:none!important}
  .avc-day.hot .d{padding-right:0!important}
  .avc-mini .avc-day .p{display:flex!important;flex-direction:column;align-items:flex-start;font-size:6.2px!important;line-height:1.02!important;white-space:nowrap;overflow:visible}
  .avc-mini .avc-day .p s{font-size:5.6px!important;line-height:1.02}
  .avc-mini .avc-day .p b{font-size:6.5px!important;line-height:1.02}
  .avc-mini .avc-day.red .d{padding-right:9px!important}
  .avc-mini .avc-day.red::after{width:8px!important;height:8px!important;top:2px!important;right:2px!important}
}

/* checkout: kalender tetap tampilkan badge harga, promo (api), dan status */
#avcBook .avc-day{min-height:54px;padding:5px 6px}
#avcBook .avc-day .p{display:block;font-size:8.6px;line-height:1.15}
#avcBook .avc-day .s{font-size:8.4px;gap:2px}
#avcBook .avc-day .s.hot-s{font-size:8px}
#avcBook .avc-day .s.hot-s svg{width:8px;height:8px}
#avcBook .avc-day .d{font-size:10.8px}
#avcBook .avc-day .p{font-size:9.2px!important}
#avcBook .avc-day .s{font-size:8.8px!important}
#avcBook .avc-day .s.hot-s{font-size:8.4px!important}
#avcBook .avc-day{min-height:56px}

/* layanan tambahan: dropdown di HP */
.ex-toggle{display:none}
@media(max-width:860px){
  .ex-intro{display:none}
  .ex-toggle{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;border:1px solid #dfe9e4;
    border-radius:12px;background:#f7fbf9;font-family:inherit;text-align:left;cursor:pointer;margin:2px 0 10px}
  .ex-toggle-ic{width:26px;height:26px;border-radius:9px;background:#e7f4ed;color:#0b5f47;display:grid;place-items:center;
    font-weight:800;font-size:16px;line-height:1;flex:none}
  .ex-toggle-tx{flex:1;min-width:0}
  .ex-toggle-tx b{display:block;font-size:12.5px;color:#123f32;font-weight:800}
  .ex-toggle-tx small{display:block;font-size:10.5px;color:#7d9188;margin-top:1px}
  .ex-toggle-ar{color:#7d9188;display:flex;transition:transform .2s}
  .ex-toggle-ar svg{width:16px;height:16px;transform:rotate(90deg)}
  .ex-toggle.open .ex-toggle-ar svg{transform:rotate(-90deg)}
}

/* HP: kartu layanan tambahan tidak terpotong */
@media(max-width:860px){
  .ex-grid .ex-label{gap:8px;padding:10px 12px}
  .ex-grid .ex-label > div[style*="flex:1 1 180px"]{flex:1 1 auto!important;min-width:0!important}
  .ex-grid .ex-label > div:nth-last-child(2){font-size:12px}
  .ex-grid .ex-label > div:last-child{flex:none;gap:4px}
  .ex-grid .ex-label input[type=number]{width:46px!important;padding:6px 4px!important;font-size:11.5px!important}
  .ex-grid .ex-label .note{font-size:9.6px}
}

/* HP: susun ulang kartu layanan (harga & jumlah di baris kedua) */
@media(max-width:860px){
  #extraBox .ex-label{flex-wrap:wrap!important;gap:8px!important;padding:10px 12px!important}
  #extraBox .ex-label > div[style*="flex:1 1 180px"]{flex:1 1 calc(100% - 34px)!important;min-width:0!important}
  #extraBox .ex-label > div:nth-last-child(2){margin-left:auto;text-align:right}
  #extraBox .ex-label > div:last-child{flex:none}
}

/* checkout 3 kolom: layanan tambahan sesempit ringkasan, data pemesan lebih lebar */
form.flow-layout.flow-3col{grid-template-columns:minmax(0,1fr) 320px 340px!important;gap:16px!important}
form.flow-layout.flow-3col .flow-extra{padding:24px 22px!important}
form.flow-layout.flow-3col .flow-extra .ex-grid{grid-template-columns:1fr!important}
@media(max-width:1199px) and (min-width:981px){
  form.flow-layout.flow-3col{grid-template-columns:minmax(0,1fr) 320px!important}
}

/* kolom layanan tambahan sempit: kartu ditumpuk 2 baris */
.flow-extra .ex-label{flex-wrap:wrap!important;gap:8px!important;padding:11px 12px!important}
.flow-extra .ex-label > div[style*="flex:1 1 180px"]{flex:1 1 calc(100% - 30px)!important;min-width:0!important}
.flow-extra .ex-label > div:nth-last-child(2){margin-left:0!important;text-align:left!important}
.flow-extra .ex-label > div:last-child{margin-left:auto!important}
.flow-extra .ex-label input[type=number]{width:52px!important}
.flow-extra .ex-price{font-size:12.5px}

/* kartu layanan: checkbox sejajar judul (kolom sempit & HP) */
.flow-extra .ex-label,#extraBox .ex-label{position:relative;flex-wrap:wrap!important;gap:8px!important;padding-left:42px!important}
.flow-extra .ex-label>input[type=checkbox],#extraBox .ex-label>input[type=checkbox]{position:absolute!important;left:14px!important;top:14px!important;margin:0!important}
.flow-extra .ex-label>div[style*="flex:1 1 180px"],#extraBox .ex-label>div[style*="flex:1 1 180px"]{flex:1 1 100%!important;min-width:0!important}
.flow-extra .ex-label>div:nth-last-child(2){margin-left:0!important;text-align:left!important}
.flow-extra .ex-label>div:last-child,#extraBox .ex-label>div:last-child{margin-left:auto!important;flex:none!important}

/* pastikan proporsi 3 kolom hanya di desktop lebar */
@media(min-width:1200px){form.flow-layout.flow-3col{grid-template-columns:minmax(0,1fr) 320px 340px!important}}
@media(max-width:1199px) and (min-width:981px){form.flow-layout.flow-3col{grid-template-columns:minmax(0,1fr) 320px!important}}
@media(max-width:980px){form.flow-layout.flow-3col{grid-template-columns:1fr!important}}

/* kartu layanan tambahan versi kompak */
.ex2-grid{display:grid;grid-template-columns:1fr;gap:7px}
.ex2-head{font-size:10px;font-weight:800;letter-spacing:.06em;color:#5b7268;text-transform:uppercase;margin:0 0 6px}
.ex2{position:relative;display:block;border:1px solid #e3ece8;border-radius:11px;padding:8px 10px 8px 34px;background:#fff;cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s}
.ex2 input[type=checkbox]{position:absolute;left:12px;top:11px;width:16px;height:16px;accent-color:#0e5a45;margin:0}
.ex2-r1{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ex2-name{font-size:12px;font-weight:800;color:#14261f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex2-price{font-size:11.5px;font-weight:800;color:#0f7a5c;white-space:nowrap;flex:none}
.ex2-price i{font-style:normal;font-weight:600;color:#7d9188;font-size:9.5px}
.ex2-r2{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
.ex2-meta{font-size:9.8px;color:#7d9188;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex2-qty{display:flex;align-items:center;gap:4px;flex:none}
.ex2-qty input{width:44px;padding:3px 2px;border:1px solid #d7e2dc;border-radius:7px;font:700 11px "Plus Jakarta Sans",sans-serif;text-align:center;background:#fff}
.ex2-qty i{font-style:normal;font-size:9.5px;color:#7d9188}
.ex2:has(input:checked){border-color:#0e5a45;background:#f2faf6;box-shadow:0 0 0 3px rgba(14,90,69,.07)}
.ex2:has(input:checked) .ex2-name{color:#0b4a39}
.ex2-name{flex:1 1 auto;min-width:0}
.ex2-meta{min-width:0;flex:1 1 auto}
.ex2-price{font-size:11px}
.ex2-price i{font-size:9px}
.ex2-grid{grid-template-columns:minmax(0,1fr)!important}
.ex2{min-width:0;max-width:100%;overflow:hidden}
.ex2-r1,.ex2-r2{min-width:0;max-width:100%}

/* ringkasan pesanan: warna beda dari kolom lain */
form.flow-layout .flow-side{background:linear-gradient(180deg,#f2faf6 0%,#fbfefc 55%,#ffffff 100%)!important;
  border:1px solid #cfe7db!important;border-top:3px solid #0e5a45!important;
  box-shadow:0 14px 34px -22px rgba(11,74,57,.45)!important}
form.flow-layout .flow-side h3{color:#0b4a39}

/* metode pembayaran: dropdown ringkas */
.pay-select-wrap{position:relative;margin-top:2px}
.pay-select{width:100%;height:46px;padding:0 38px 0 14px;border:1.5px solid #d9e6df;border-radius:11px;background:#fff;
  font-family:inherit;font-size:13px;font-weight:700;color:#123f32;appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b857b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.pay-select:focus{outline:0;border-color:#0e5a45;box-shadow:0 0 0 3px rgba(14,90,69,.09)}
.pay-select-wrap .hint{margin-top:6px;font-size:10.5px;color:#6b857b;line-height:1.45}
@media(max-width:860px){form.flow-layout{padding-bottom:96px}}

/* layanan tambahan: tampil 3 dulu + tombol lihat lebih banyak */
.ex-sec:not(.show-all) .ex-hide{display:none!important}
.ex-more{display:inline-flex;align-items:center;gap:4px;margin-top:7px;padding:6px 2px;background:none;border:0;
  color:#0f7a5c;font-family:inherit;font-size:11.5px;font-weight:800;cursor:pointer}
.ex-more:hover{text-decoration:underline}

/* laporan: 4 kolom skema */
.rk-hero-grid{grid-template-columns:1.35fr 1fr 1fr 1.15fr!important;gap:0}
.rk-hc.rk-pending b{color:#ffd98a}
@media(max-width:1180px) and (min-width:701px){
  .rk-hero-grid{grid-template-columns:1fr 1fr!important;row-gap:14px}
  .rk-hc{padding-top:0}
  .rk-hc:nth-child(3){border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.18);padding-top:12px}
  .rk-hc:nth-child(4){border-top:1px solid rgba(255,255,255,.18);padding-top:12px}
}
@media(max-width:700px){
  .rk-hero-grid{grid-template-columns:1fr!important;row-gap:0!important}
  .rk-hc{padding:10px 0 0!important;border-left:0!important;border-top:1px solid rgba(255,255,255,.18)}
  .rk-hc:first-child{padding-top:0!important;border-top:0!important}
  .rk-hc b.big{font-size:27px}
}

/* label promo di kalender */
.avc-day .promo-s{font-size:7.6px;font-weight:800;color:#9a6d10;background:#fff6e2;border:1px solid #f2e0b6;
  border-radius:4px;padding:0 3px;line-height:1.4;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avc-day:has(.promo-s){min-height:66px}
.di-promo.promo-lbl{background:#fff8e8;border:1px solid #f2e0b6;color:#9a6d10}

/* label promo menggantikan teks status di sel kalender */
.avc-day .s.promo{color:#9a6d10;background:#fff6e2;border:1px solid #f2e0b6;border-radius:4px;padding:0 3px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8.2px}
.avc-day.sel .s.promo{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35);color:#ffe6a6}
.avc-day.hot .s.promo{color:#b3261e;background:#fff1ee;border-color:#f6d3cc}
.avc-day .s.promo{white-space:normal!important;display:block;text-align:left;line-height:1.15;
  font-size:7.4px!important;padding:1px 3px;overflow:hidden;max-height:19px;word-break:break-word}
.avc-day{min-height:62px}
.avc-day.has-promo{min-height:74px}
.avc-day .p,.avc-day .s{flex:none}
.avc-day{min-height:58px}
.avc-day.has-promo{min-height:68px}
.avc-mini .avc-day.has-promo{min-height:64px}
.avc-mini .avc-day .s.promo{font-size:7px!important;max-height:17px}

/* ---------- FINAL: sel PROMO / HOT SALE harus terbaca (harga coret + harga promo) ---------- */
.avc-day.has-promo{min-height:72px!important}
.avc-mini .avc-day.has-promo{min-height:66px!important;padding:4px 4px!important}
.avc-day.has-promo .s.deal-tag{
  display:inline-flex!important;align-items:center;justify-content:center;gap:2px;
  font-size:6.6px!important;padding:1.5px 3px!important;max-height:none!important;
  white-space:nowrap!important;border-radius:5px!important;overflow:hidden;text-overflow:ellipsis;
  background:#fff3d8!important;border:1px solid #efdcb4!important;color:#8a5800!important;
}
.avc-day.hot .s.deal-tag{background:#fdecea!important;border-color:#f6cdc6!important;color:#b3261e!important}
.avc-day.has-promo .p.promo-p{
  display:flex!important;flex-direction:column!important;gap:0!important;line-height:1.05!important;
  white-space:normal!important;overflow:visible!important;
}
.avc-day.has-promo .p.promo-p s{display:block!important;font-size:6.8px!important;font-weight:600;
  color:#a8937c!important;text-decoration:line-through;line-height:1.1!important}
.avc-day.has-promo .p.promo-p b{display:block!important;font-size:9.4px!important;font-weight:800;
  color:#8a5800!important;line-height:1.15!important}
.avc-day.hot .p.promo-p b{color:#b3261e!important}
.avc-day.hot .p.promo-p s{color:#c09d97!important}
/* tanggal promo tetap jelas ketika dipilih */
.avc-day.promo.sel,.avc-day.promo.inrange{background:linear-gradient(160deg,#fff8e2,#ffeec4)!important;border-color:#d9b567!important}
.avc-day.hot.sel,.avc-day.hot.inrange{background:linear-gradient(160deg,#fff1ee,#ffdfd8)!important;border-color:#e08c7e!important}
.avc-day.promo.sel .d,.avc-day.promo.inrange .d,.avc-day.hot.sel .d,.avc-day.hot.inrange .d{color:#7a4f00!important}
.avc-day.promo.sel .p b,.avc-day.promo.inrange .p b{color:#8a5800!important}
.avc-day.hot.sel .p b,.avc-day.hot.inrange .p b{color:#b3261e!important}
.avc-day.promo.sel .p s,.avc-day.promo.inrange .p s{color:#a8937c!important}
.avc-day.hot.sel .p s,.avc-day.hot.inrange .p s{color:#c09d97!important}
.avc-day.promo.sel .s.deal-tag,.avc-day.promo.inrange .s.deal-tag{background:#fff3d8!important;color:#8a5800!important;border-color:#efdcb4!important}
.avc-day.hot.sel .s.deal-tag,.avc-day.hot.inrange .s.deal-tag{background:#fdecea!important;color:#b3261e!important;border-color:#f6cdc6!important}
.avc-day.promo.sel .s.deal-tag svg,.avc-day.promo.inrange .s.deal-tag svg{color:#8a5800!important}
.avc-day.has-promo .p.promo-p{gap:1px!important}
.avc-day.has-promo .p.promo-p s{font-size:7.4px!important;color:#a08d76!important}
.avc-day.has-promo .p.promo-p b{font-size:10px!important}
.avc-mini .avc-day.has-promo .p.promo-p s{font-size:7px!important}
.avc-mini .avc-day.has-promo .p.promo-p b{font-size:9.4px!important}
.avc-day.has-promo .s.deal-tag{font-size:7px!important;padding:2px 3px!important}
.avc:not(.avc-mini) .avc-day.has-promo{min-height:80px!important}
.avc:not(.avc-mini) .avc-day.has-promo .p.promo-p{gap:2px!important}
.avc:not(.avc-mini) .avc-day.has-promo .p.promo-p s{font-size:8px!important}
.avc:not(.avc-mini) .avc-day.has-promo .p.promo-p b{font-size:10.6px!important}
.avc:not(.avc-mini) .avc-day.has-promo .s.deal-tag{font-size:7.6px!important;padding:2px 4px!important}
/* spasi baris cukup agar harga coret & harga promo tidak bertumpuk */
.avc-day.has-promo .p.promo-p{justify-content:center!important;align-items:flex-start!important}
.avc-day.has-promo .p.promo-p s{line-height:1.5!important;font-size:7.4px!important;padding:0!important}
.avc-day.has-promo .p.promo-p b{line-height:1.3!important;font-size:10px!important;margin:0!important}
.avc-mini .avc-day.has-promo .p.promo-p s{line-height:1.45!important;font-size:6.8px!important}
.avc-mini .avc-day.has-promo .p.promo-p b{line-height:1.25!important;font-size:9.2px!important}
.avc:not(.avc-mini) .avc-day.has-promo{min-height:86px!important}
.avc-mini .avc-day.has-promo{min-height:72px!important}
.avc-day.has-promo .p.promo-p s{color:#8f7a60!important;font-size:7.8px!important}
.avc-mini .avc-day.has-promo .p.promo-p s{color:#8f7a60!important;font-size:7.2px!important}

/* ================= BERANDA VERSI HP (desain referensi) ================= */
.m-home{display:none}
@media(max-width:640px){
  .hm-desk{display:none!important}
  .m-home{display:block;background:#fff;padding-bottom:84px}
  .brand-sub{display:block;font-size:8.7px;letter-spacing:1.2px;text-transform:uppercase;color:#8A8F8F;font-weight:600;line-height:1;margin-top:3px}
  .site-header{height:68px!important;box-shadow:none!important;border-bottom:0!important}
  .site-header .header-inner{height:68px!important}

  /* slider banner HP (gambar banner penuh, teks sudah di dalam gambar) */
  .m-hero{position:relative;margin:0 8px;border-radius:12px;overflow:hidden;background:#0B3B2B;
    aspect-ratio:1280/431;box-shadow:0 4px 14px rgba(10,60,45,.10)}
  .m-hero-imgs{position:absolute;inset:0}
  .m-hero-imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .5s}
  .m-hero-imgs img.on{opacity:1}
  .m-dots{position:absolute;z-index:3;left:50%;bottom:9px;transform:translateX(-50%);display:flex;gap:6px}
  .m-dots span{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.55);transition:all .3s}
  .m-dots span.on{background:#fff;width:16px}

  /* kartu pencarian */
  .m-card{margin:12px 11px 0;background:#fff;border:1px solid #F1F1F1;border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.04);padding:14px}
  .m-card.m-search h2{margin:0 0 4px;font-size:18.4px;font-weight:700;letter-spacing:-.3px;color:#111C18}
  .m-card.m-search>p{margin:0 0 12px;font-size:8.7px;line-height:1.4;color:#6E7376}
  .m-search form{display:flex;flex-direction:column;gap:10px}
  .m-field{position:relative;display:flex;align-items:center;gap:10px;min-height:42px;padding:6px 10px;border:1px solid #EFEFEF;border-radius:8px;background:#fff}
  .m-field .m-ic{color:#123F33;display:flex;flex:none}
  .m-field .m-ic svg{width:18px;height:18px}
  .m-fv{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
  .m-lbl{font-size:8.7px;color:#8A8F8F;line-height:1.2}
  .m-fv input,.m-fv select{border:0;background:transparent;padding:0;font:600 13.6px/1.2 'Plus Jakarta Sans',sans-serif;color:#111C18;width:100%;outline:none}
  .m-fv select{appearance:none}
  .m-val{font-size:13.6px;font-weight:600;color:#111C18;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .m-row{display:grid;grid-template-columns:1.35fr 1fr;gap:10px}
  .m-date{cursor:pointer}
  .m-datepop{display:none;position:absolute;z-index:20;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid #E6EDE9;border-radius:10px;
    box-shadow:0 12px 28px rgba(12,58,43,.16);padding:10px}
  .m-datepop.open{display:block}
  .m-datepop label{display:block;font-size:9px;color:#8A8F8F;margin-bottom:6px}
  .m-datepop input{width:100%;height:34px;border:1px solid #EFEFEF;border-radius:8px;padding:0 8px;font:600 12px 'Plus Jakarta Sans',sans-serif;color:#111C18;margin-top:3px}
  .m-datepop button{width:100%;height:34px;margin-top:8px;border:0;border-radius:8px;background:#04553F;color:#fff;font:700 12px 'Plus Jakarta Sans',sans-serif}
  .m-cta{margin-top:2px;height:36px;width:100%;border:0;border-radius:8px;background:#04553F;color:#fff;font:600 13.6px/1 'Plus Jakarta Sans',sans-serif;
    display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
  .m-cta svg{width:16px;height:16px}

  /* trust strip */
  .m-trust{display:grid;grid-template-columns:repeat(4,1fr);margin:10px 11px 0;background:#fff}
  .m-trust-i{position:relative;text-align:center;padding:6px 4px}
  .m-trust-i+.m-trust-i::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:43px;background:#F0F0F0}
  .m-tic{width:42px;height:42px;border-radius:50%;background:#EAF5F1;display:grid;place-items:center;margin:0 auto 6px;color:#123F33}
  .m-tic svg{width:20px;height:20px}
  .m-trust-i b{display:block;font-size:9.7px;line-height:1.25;font-weight:600;color:#111C18}

  /* judul section */
  .m-sechead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:30px 11px 7px}
  .m-sechead h2{margin:0;font-size:17.5px;font-weight:700;letter-spacing:-.2px;color:#111C18}
  .m-all{display:inline-flex;align-items:center;gap:3px;background:#ECF7F3;color:#0A5A45;border-radius:999px;padding:7px 11px;font-size:10.7px;font-weight:600;white-space:nowrap}
  .m-all svg{width:12px;height:12px}

  /* kartu villa 2 kolom */
  .m-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 11px 20px}
  .m-villa{background:#fff;border:1px solid #F1F1F1;border-radius:10px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.04)}
  .m-vimg{position:relative;display:block;aspect-ratio:3/2;background:#eef3f1}
  .m-vimg img{width:100%;height:100%;object-fit:cover;display:block}
  .m-fav{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.12);
    display:grid;place-items:center;color:#3A4441}
  .m-fav svg{width:13px;height:13px}
  .m-vbody{padding:9px 10px 12px}
  .m-vbody h3{margin:0 0 4px;font-size:13.6px;line-height:1.2;font-weight:700;color:#111C18}
  .m-vbody h3 a{color:inherit}
  .m-vloc{display:flex;align-items:center;gap:3px;font-size:8.7px;color:#8A8F8F;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .m-vloc svg{width:10px;height:10px;flex:none}
  .m-vrate{display:flex;align-items:center;gap:3px;font-size:9.7px;color:#111C18;margin-top:3px}
  .m-vrate svg{width:11px;height:11px;color:#F5B921;flex:none}
  .m-vrate b{font-weight:700}
  .m-vrate span{color:#8A8F8F;font-weight:400}
  .m-chips{display:flex;flex-wrap:wrap;gap:4px;margin:7px 0}
  .m-chips span{display:inline-flex;align-items:center;gap:3px;background:#F3F7F6;border-radius:6px;padding:4px 6px;font-size:8.7px;font-weight:500;color:#5A6663;line-height:1}
  .m-chips svg{width:10px;height:10px}
  .m-vprice{border-top:1px solid #F0F0F0;padding-top:8px;font-size:19.4px;font-weight:700;line-height:1.1;color:#14352B;letter-spacing:-.3px}
  .m-vprice small{font-size:10px;font-weight:500;color:#8A8F8F;letter-spacing:0}
}

/* header versi HP mengikuti referensi */
.hdr-m{display:none}
@media(max-width:640px){
  .hdr-m{display:flex;align-items:center;gap:16px;margin-left:auto;margin-right:6px;color:#1B3A30}
  .hdr-m a{position:relative;display:grid;place-items:center;width:26px;height:26px}
  .hdr-m svg{width:21px;height:21px}
  .hdr-m .hdr-heart i{position:absolute;top:1px;right:1px;width:6px;height:6px;border-radius:50%;background:#D94947;display:none}
  .hdr-m .hdr-av{width:31px;height:31px;border:1px solid #E7E7E7;border-radius:50%;color:#4A5A54}
  .hdr-m .hdr-av svg{width:18px;height:18px}
  body.m-home-page .site-header .nav-toggle{display:none!important}
  body.m-home-page .site-header .header-actions{display:none!important}
  .brand-text{font-size:17px!important;line-height:1.05}
  .brand-sub{font-size:8.2px!important}
}

/* ===== dropdown catering & sewa mobil di halaman villa ===== */
.m-drop{margin:0;border:0}
.m-drop>summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:default}
.m-drop>summary::-webkit-details-marker{display:none}
.m-drop>summary::marker{content:''}
.m-dt{font-size:15px;font-weight:800;color:#14261f;letter-spacing:-.1px}
.m-dc{font-size:11px;font-weight:600;color:#7c8f85}
.m-dchev{display:none}
@media(max-width:640px){
  .m-drop{margin:14px 0 0;border:1px solid #e6ece8;border-radius:12px;background:#fff;overflow:hidden}
  .m-drop>summary{padding:12px 14px;cursor:pointer;background:#f7fbf9;gap:8px}
  .m-drop>summary:active{background:#eef6f2}
  .m-dt{font-size:13.5px}
  .m-dc{font-size:10.5px}
  .m-dchev{display:inline-flex;margin-left:auto;color:#7c8f85;transform:rotate(90deg);transition:transform .2s}
  .m-drop[open]>summary .m-dchev{transform:rotate(-90deg)}
  .m-dbody{padding:10px 12px 14px}
  .m-drop .ex-grid{margin-top:0}
  .m-drop[open]>summary{border-bottom:1px solid #eaf0ed}
}

/* kategori cepat di beranda HP */
a.m-trust-i{color:inherit;text-decoration:none}
@media(max-width:640px){
  .m-trust-i b{font-size:11px;letter-spacing:-.1px;line-height:1.15;margin-top:0}
  a.m-trust-i:active .m-tic{background:#dff0e9}
}

/* halaman katalog catering */
.cat-head{margin:14px 0 18px}
.cat-head h1{font-size:24px;font-weight:900;color:#0c3a2b;margin:0 0 4px;letter-spacing:-.3px}
.cat-head p{margin:0;font-size:12.5px;color:#6d8177}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-bottom:36px}
.cat-card{display:flex;gap:12px;background:#fff;border:1px solid #e4ebe7;border-radius:14px;padding:14px;box-shadow:0 6px 18px rgba(12,58,43,.06)}
.cat-ic{width:44px;height:44px;border-radius:12px;background:#EAF5F1;color:#123F33;display:grid;place-items:center;flex:none}
.cat-ic svg{width:22px;height:22px}
.cat-body{flex:1;min-width:0}
.cat-body h3{margin:0 0 2px;font-size:14.5px;font-weight:800;color:#0c3a2b}
.cat-sub{font-size:11px;color:#8A8F8F;display:flex;align-items:center;gap:4px}
.cat-body p{margin:6px 0 10px;font-size:12px;color:#4c5f56;line-height:1.45}
.cat-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cat-price{font-size:16px;font-weight:900;color:#0f7a5c}
.cat-price small{font-size:11px;font-weight:600;color:#7c8f85}
.cat-price span{margin-left:6px;font-size:10.5px;font-weight:700;color:#8A8F8F;background:#F3F7F6;border-radius:6px;padding:3px 6px}
@media(max-width:520px){
  .cat-grid{grid-template-columns:1fr}
  .cat-head h1{font-size:20px}
}

/* ikon kategori premium */
@media(max-width:640px){
  .m-trust{gap:2px;margin-top:14px}
  .m-trust-i{padding:6px 2px}
  .m-tic{position:relative;width:48px;height:48px;border-radius:16px;margin:0 auto 8px;
    background:linear-gradient(160deg,#ffffff 0%,#e9f5ef 62%,#dcefe6 100%);
    border:1px solid #e2efe8;
    box-shadow:0 6px 14px rgba(4,85,63,.10),0 1px 2px rgba(4,85,63,.06),inset 0 1px 0 rgba(255,255,255,.95);
    color:#04553F;transition:transform .18s ease,box-shadow .18s ease}
  .m-tic::after{content:'';position:absolute;inset:3px;border-radius:13px;border:1px solid rgba(255,255,255,.75);pointer-events:none}
  .m-tic svg{width:22px;height:22px;stroke-width:1.7;filter:drop-shadow(0 1px 0 rgba(255,255,255,.8))}
  a.m-trust-i:active .m-tic{transform:translateY(1px) scale(.97);box-shadow:0 3px 8px rgba(4,85,63,.12),inset 0 1px 0 rgba(255,255,255,.9)}
  .m-trust-i b{font-size:11px;font-weight:700;color:#12251D;letter-spacing:-.1px}
  .m-trust-i+.m-trust-i::before{height:52px;background:linear-gradient(180deg,rgba(240,240,240,0),#eef2f0,rgba(240,240,240,0))}
}

/* broadcast superadmin */
.bc-aud{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.bc-aud-btn{text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:2px}
.bc-aud-btn b{font-size:12.5px;font-weight:800;color:#12251D}
.bc-aud-btn span{font-size:11px;font-weight:700;color:#0f7a5c}
.bc-aud-btn small{font-size:10.5px;color:#8A8F8F;line-height:1.3}
.bc-aud-btn:hover{border-color:#bfe0d1;background:#fbfefc}
.bc-aud-btn.on{border-color:#0f7a5c;background:#f1faf5;box-shadow:0 0 0 2px rgba(15,122,92,.10)}

/* filter & penanda halaman Booking admin */
.ab-toggle{display:none;border:1px solid #d9e7df;background:#fff;color:#0f7a5c;border-radius:999px;padding:5px 12px;font-size:11px;font-weight:800;cursor:pointer}
.ab-toggle:hover{background:#f3faf6}
.ab-tools{margin:0 14px 14px;padding:12px 12px 10px;background:#f7fbf9;border:1px solid #e8f0eb;border-radius:12px}
.ab-filter{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:10px 8px;align-items:end}
.ab-f{display:flex;flex-direction:column;gap:4px;min-width:0}
.ab-f>span{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8a9c93;padding-left:2px}
.ab-f .input{min-width:0;height:40px;background:#fff;font-weight:600;color:#1d2f27}
.ab-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:10px;padding-top:10px;border-top:1px dashed #e3ece6}
.ab-chip{border:1px solid var(--line,#e6ece9);background:#fff;color:#3d5147;border-radius:999px;padding:6px 11px;font-size:11px;font-weight:700;cursor:pointer;transition:.15s;line-height:1.2}
.ab-chip:hover{border-color:#bfe0d1;background:#f3faf6}
.ab-chip.on{background:#0f7a5c;border-color:#0f7a5c;color:#fff}
.ab-reset{order:99;margin-left:auto;border:0;background:none;color:#0f7a5c;font-size:11px;font-weight:700;cursor:pointer;text-decoration:underline;padding:6px 2px}
.ab-marks{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.ab-marks .pill{font-size:9.5px;padding:2px 7px}
.ab-actcol{width:1%;white-space:nowrap}
.ab-empty{padding:14px;color:var(--muted,#7b8c84);font-size:12px;text-align:center}
@media(max-width:700px){
  .ab-tools{margin:0 10px 12px;padding:10px}
  .ab-toggle{display:inline-flex;align-items:center}
  .ab-filter{display:none;grid-template-columns:1fr;gap:8px}
  .ab-filter.open{display:grid}
  .ab-f .input{height:40px;font-size:12.5px}
  .ab-chip{font-size:10.5px;padding:5px 9px}
}

/* ===== Iklan mitra (dashboard + publik) ===== */
.ad-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.6fr);gap:12px}
.ad-balance{display:flex;align-items:center;justify-content:space-between;gap:14px;background:linear-gradient(135deg,#0b5c45,#0f7a5c);color:#fff;border-radius:14px;padding:16px 18px;box-shadow:0 6px 18px rgba(11,92,69,.18)}
.ad-balance .ad-lbl{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.ad-balance .ad-saldo{display:block;font-size:26px;font-weight:900;letter-spacing:-.4px;margin:2px 0 2px}
.ad-balance .ad-sub{font-size:11px;opacity:.9}
.ad-balance .btn{background:#fff;color:#0b5c45;border:0;font-weight:800;white-space:nowrap}
.ad-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ad-kpis-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ad-kpi{background:#fff;border:1px solid #e8f0eb;border-radius:12px;padding:12px 14px;min-width:0}
.ad-kpi span{display:block;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#8a9c93}
.ad-kpi b{display:block;font-size:21px;font-weight:900;color:#12251d;letter-spacing:-.3px;margin:3px 0 1px}
.ad-kpi i{font-style:normal;font-size:10.5px;color:#7b8c84}
.ad-list{display:flex;flex-direction:column;gap:10px}
.ad-item{display:flex;gap:12px;align-items:flex-start;border:1px solid #e8f0eb;border-radius:12px;padding:10px;background:#fff;flex-wrap:wrap}
.ad-thumb{width:112px;height:70px;border-radius:9px;overflow:hidden;background:#f2f6f4;display:flex;align-items:center;justify-content:center;color:#a9bcb2;flex:0 0 auto}
.ad-thumb img{width:100%;height:100%;object-fit:cover}
.ad-thumb.sm{width:64px;height:44px;border-radius:7px}
.ad-main{flex:1 1 240px;min-width:0}
.ad-title{font-size:13.5px;font-weight:800;color:#12251d;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ad-meta{font-size:11px;color:#6f8378;margin-top:2px}
.ad-note{font-size:11px;color:#a3342a;margin-top:4px}
.ad-link{display:inline-block;font-size:10.5px;color:#0f7a5c;text-decoration:underline;margin-top:4px;word-break:break-all}
.ad-act{display:flex;gap:6px;flex-wrap:wrap;flex:0 0 auto;align-items:center}
.ad-empty{padding:22px 10px;text-align:center;color:#7b8c84;font-size:12px;border:1px dashed #d9e7df;border-radius:12px}
.ad-warn{background:#fdf7ea;border:1px solid #f0e1c2;color:#8a5a12;border-radius:10px;padding:9px 12px;font-size:11.5px;margin:0 0 12px}
.ad-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.ad-upload{display:flex;gap:12px;align-items:center;margin:4px 0 12px}
.ad-up-prev{width:150px;height:84px;border-radius:10px;border:1px dashed #cfd8d2;background:#f7faf8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#93a89d;font-size:10px;overflow:hidden;flex:0 0 auto}
.ad-up-prev img{width:100%;height:100%;object-fit:cover}
.ad-settings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:10px;align-items:end}
.ad-settings label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;color:#456052}
.ad-settings .btn{align-self:end;white-space:nowrap}
.ad-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ad-card{border:1px solid #e8f0eb;border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.ad-card .ad-card-img{display:block;aspect-ratio:2/1;background:#f2f6f4;overflow:hidden}
.ad-card img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.ad-card:hover img{transform:scale(1.03)}
.ad-card-b{padding:10px 12px 12px;display:flex;flex-direction:column;gap:3px;flex:1}
.ad-card-b b{font-size:13px;line-height:1.25;color:#12251d}
.ad-card-b span{font-size:11px;color:#6f8378}
.ad-card-b .ad-by{font-size:10px;color:#93a89d;margin-top:auto;padding-top:6px}
.ad-tag{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8a5a12;background:#fdf7ea;border:1px solid #f0e1c2;border-radius:999px;padding:2px 7px;width:max-content}
.m-ads{display:flex;gap:10px;overflow-x:auto;padding:0 16px 4px;scroll-snap-type:x mandatory}
.m-ads .ad-card{flex:0 0 78%;scroll-snap-align:start}
@media(max-width:900px){
  .ad-top{grid-template-columns:1fr}
  .ad-kpis,.ad-kpis-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ad-cols{grid-template-columns:1fr}
  .ad-settings{grid-template-columns:1fr 1fr}
  .ad-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .ad-kpis,.ad-kpis-4{grid-template-columns:1fr 1fr}
  .ad-balance{padding:14px}
  .ad-balance .ad-saldo{font-size:22px}
  .ad-grid{grid-template-columns:1fr}
}
.hm-ad-head{display:flex;align-items:baseline;gap:8px;margin:0 0 10px}
.hm-ad-head h2{font-size:15px;font-weight:900;letter-spacing:-.2px;color:#12251d;margin:0}
.hm-ad-head .note{font-size:11px;color:#8a9c93}
.ad-card{cursor:pointer;transition:box-shadow .18s,transform .18s}
.ad-card:hover{box-shadow:0 8px 22px rgba(11,92,69,.10);transform:translateY(-1px)}
.ad-card:focus-visible{outline:2px solid #0f7a5c;outline-offset:2px}

/* ================= HALAMAN RENTAL MOBIL: PANEL FILTER ================= */
.car-page .breadcrumb{margin-top:14px}
.container.hm-main.car-main-page{
  width:100%!important;max-width:1220px!important;margin:0 auto!important;
  padding:18px 22px 44px!important;
  grid-template-columns:236px minmax(0,1fr)!important;column-gap:22px;
}
.car-main-page .hm-side{position:sticky;top:78px}
.car-main-page .hm-results{min-width:0}
.car-main-page .hm-filter{border:1px solid var(--hm-line,#e3e8e2)!important;border-left:1px solid var(--hm-line,#e3e8e2)!important;border-radius:14px!important;padding:16px 18px 18px!important;background:#fff}
.car-res-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 14px;flex-wrap:wrap}
.car-res-head h1{margin:0;font-size:17px;font-weight:800;letter-spacing:-.35px;color:#12251d}
.car-res-head .car-res-sub{margin:3px 0 0;font-size:11.5px;color:#7b8b83}
.car-main-page .car-sort{height:36px;font-size:11.5px;min-width:150px;max-width:190px;flex:none;margin-left:auto}
.car-main-page .hm-cars-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.car-main-page .hm-car-empty{margin-top:4px}
.car-main-page #carPriceText{white-space:nowrap}
@media(max-width:1100px){
  .car-main-page .hm-cars-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  .container.hm-main.car-main-page{
    display:flex!important;flex-direction:column;gap:14px;
    padding:12px 14px 34px!important;max-width:none!important;
  }
  .car-main-page .hm-side{position:static}
  .car-main-page .car-res-head{margin-top:2px}
  .car-main-page .car-sort{max-width:none;width:100%;margin-left:0}
  .car-page .breadcrumb{margin-top:10px}
}
@media(max-width:560px){
  .car-main-page .hm-cars-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}

/* ===== Filter rental kendaraan di beranda (di bawah filter hotel) ===== */
.sv-rent{padding:14px 0 0}
.sv-rent-card{max-width:1040px;margin:0 auto;background:#fff;border:1px solid #e2ece7;border-radius:16px;padding:12px 14px 14px;box-shadow:0 12px 26px rgba(10,52,38,.08)}
.sv-rent-head{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.sv-rent-ic{width:34px;height:34px;border-radius:10px;background:#eaf6f0;color:#0e5a45;display:grid;place-items:center;flex:none}
.sv-rent-tt{display:flex;flex-direction:column;min-width:0}
.sv-rent-tt b{font-size:13.5px;font-weight:800;color:#14261f;line-height:1.2;letter-spacing:-.1px}
.sv-rent-tt span{font-size:11px;color:#7f8f88;margin-top:1px}
.sv-rent-all{margin-left:auto;font-size:11.5px;font-weight:700;color:#0e5a45;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:3px}
.sv-rent-all:hover{text-decoration:underline}
.sv-rent-grid{display:grid;grid-template-columns:1.05fr 1.45fr .95fr .95fr auto;align-items:center;background:#fbfdfc;border:1px solid #e8f0ec;border-radius:12px;padding:5px}
.sv-rf{display:flex;align-items:center;gap:8px;padding:4px 10px;border-right:1px solid #e8f0ec;min-width:0}
.sv-rent-grid > .sv-rf:last-of-type{border-right:0}
.sv-rf-ic{color:#0e5a45;display:inline-flex;flex:none}
.sv-rf-ic svg{width:17px;height:17px}
.sv-rf > div{min-width:0;flex:1}
.sv-rf label{display:block;font-size:10px;font-weight:700;color:#8a9a94;margin-bottom:1px;letter-spacing:.1px}
.sv-rf input,.sv-rf select{width:100%;border:0;outline:0;padding:0;background:transparent;font:600 12.5px/1.4 'Plus Jakarta Sans',sans-serif;color:#173b2d;appearance:none;cursor:pointer}
.sv-rf select{cursor:pointer}
.sv-rf-dates-in{display:flex;align-items:center;gap:5px}
.sv-rf-dates-in input{font-size:11.5px;min-width:0;cursor:pointer}
.sv-rf-dates-in span{color:#9aada5;font-size:11px;flex:none}
.sv-rent-btn{height:44px;border-radius:10px;border:0;padding:0 20px;background:#0e5a45;color:#fff;font:700 12.5px 'Plus Jakarta Sans',sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:background .15s}
.sv-rent-btn:hover{background:#0a4636}
@media(max-width:960px){
  .sv-rent-card{max-width:none}
  .sv-rent-grid{grid-template-columns:1fr 1fr;gap:6px;padding:6px}
  .sv-rf{border-right:0;background:#fff;border-radius:9px;padding:6px 10px;min-height:46px}
  .sv-rent-btn{grid-column:1/-1;width:100%;justify-content:center;margin-top:2px}
}
@media(max-width:560px){
  .sv-rent-tt span{display:none}
  .sv-rent-all{font-size:11px}
  .sv-rf-dates-in input{font-size:11px}
}
/* versi HP: kartu rental di bawah kartu pencarian villa */
.m-rent{margin-top:12px}
.m-rent .m-fv input[type=date]{font-size:12.5px;padding:0;border:0;background:transparent;width:100%;font-weight:700;color:#173b2d}
.m-rent .m-fv select{font-size:12.5px}

/* Gaya untuk filter non-dropdown (chips) */
.sv-rf-opts { display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.sv-rf-opt { cursor: pointer; position: relative; }
.sv-rf-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.sv-rf-opt span { 
  display: inline-block; padding: 4px 8px; font-size: 10.5px; font-weight: 700;
  background: #f0f4f2; color: #5a6b64; border-radius: 6px; border: 1px solid #e2ece7;
  transition: all .15s; white-space: nowrap;
}
.sv-rf-opt input:checked + span { 
  background: #0e5a45; color: #fff; border-color: #0e5a45; 
}
.sv-rf-opt:hover span { background: #e2ece7; }
.sv-rf-opt input:checked:hover span { background: #0a4636; }

/* Penyesuaian grid untuk menampung chips yang lebih lebar */
@media(min-width: 961px) {
  .sv-rent-grid { grid-template-columns: minmax(140px,.9fr) minmax(206px,1.18fr) minmax(200px,1.02fr) minmax(228px,1.2fr) auto !important; }
  .sv-rent-grid { column-gap: 6px; }
  .sv-rf { padding: 4px 9px; }
  .sv-rf-opts { gap: 3px; }
  .sv-rf-opt span { padding: 4px 6px; font-size: 10px; }
}

/* Versi HP: chips lebih besar agar mudah di-tap */
.m-rf-opts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; margin-top: 4px; }
.m-rf-opt { cursor: pointer; min-width: 0; }
.m-rf-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.m-rf-opt span {
  display: block; text-align: center; padding: 7px 2px; font-size: 10.5px; font-weight: 700;
  background: #f7faf8; color: #5a6b64; border: 1px solid #e8f0ec; border-radius: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-rf-opt input:checked + span { background: #0e5a45; color: #fff; border-color: #0e5a45; }
.m-rent .m-field-chips { width: 100%; }
.m-rent .m-field-chips .m-fv { gap: 0; }

/* Dashboard Admin X */
.admx-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.admx-head h3 { margin: 0; font-size: 16px; font-weight: 850; letter-spacing: -0.02em; color: var(--green-900); }
.admx-sec { display: flex; align-items: center; gap: 12px; margin: 24px 0 12px; }
.admx-sec span { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); white-space: nowrap; }
.admx-sec i { flex: 1; height: 1px; background: var(--line); opacity: 0.6; }
.admx-grid { grid-template-columns: repeat(4, 1fr) !important; }

.kpi.kpi-tap { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; text-decoration: none; display: block; border: 0 !important; }
.kpi.kpi-tap:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0,0,0,0.12); filter: brightness(1.05); }

.tone-green { background: linear-gradient(135deg, #0b4b3a, #0f7a5c) !important; color: #fff !important; }
.tone-teal { background: linear-gradient(135deg, #0d5246, #128c7e) !important; color: #fff !important; }
.tone-gold { background: linear-gradient(135deg, #8a6c12, #c9a42f) !important; color: #fff !important; }
.tone-navy { background: linear-gradient(135deg, #0d2152, #123e8c) !important; color: #fff !important; }
.tone-red { background: linear-gradient(135deg, #7a1b1b, #c8483c) !important; color: #fff !important; }
.tone-purple { background: linear-gradient(135deg, #3d1b7a, #7e3cc8) !important; color: #fff !important; }

.kpi.tone-green .k-ic, .kpi.tone-teal .k-ic, .kpi.tone-gold .k-ic, 
.kpi.tone-navy .k-ic, .kpi.tone-red .k-ic, .kpi.tone-purple .k-ic { background: rgba(255,255,255,0.18) !important; color: #fff !important; }
.kpi.tone-green .k-label, .kpi.tone-teal .k-label, .kpi.tone-gold .k-label,
.kpi.tone-navy .k-label, .kpi.tone-red .k-label, .kpi.tone-purple .k-label { color: rgba(255,255,255,0.85) !important; }
.kpi.tone-green .k-sub, .kpi.tone-teal .k-sub, .kpi.tone-gold .k-sub,
.kpi.tone-navy .k-sub, .kpi.tone-red .k-sub, .kpi.tone-purple .k-sub { color: rgba(255,255,255,0.7) !important; }

.admx-rate { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.admx-rate-row { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; padding: 6px 8px; border-radius: 8px; transition: background 0.2s; }
.admx-rate-row:hover { background: #f5f8f6; }
.admx-rate-lb { width: 65px; font-size: 12px; color: var(--gold); display: flex; align-items: center; gap: 4px; }
.admx-rate-lb em { font-style: normal; color: var(--muted); font-size: 11px; font-weight: 700; margin-left: 2px; }
.admx-rate-bar { flex: 1; height: 8px; background: #eee; border-radius: 4px; overflow: hidden; position: relative; }
.admx-rate-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold); border-radius: 4px; }
.admx-rate b { width: 30px; text-align: right; font-size: 13px; }
.admx-rate small { font-size: 11px; color: var(--muted); width: 50px; }

@media(max-width: 1000px) { .admx-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media(max-width: 480px) { .admx-grid { grid-template-columns: 1fr !important; } }

/* header laporan rate: chips bintang rapi & tidak terpotong */
.admx-head { flex-wrap: wrap; }
.admx-head .toolbar-mini { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 100%; }
.admx-head .toolbar-mini .btn { padding: 6px 10px; font-size: 11.5px; line-height: 1; white-space: nowrap; }
@media(max-width: 700px) {
  .admx-head .toolbar-mini { justify-content: flex-start; }
  .admx-head .toolbar-mini .btn { padding: 5px 8px; font-size: 10.5px; }
}

/* Semua blok KPI bisa diklik */
.kpi.kpi-tap{position:relative;display:block;text-decoration:none;color:inherit;cursor:pointer}
.kpi.kpi-tap .k-sub{padding-right:26px}
.kpi.kpi-tap .k-go{position:absolute;right:11px;bottom:9px;width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.2);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:900;
  line-height:1;transition:transform .18s ease,background .18s ease}
.kpi.kpi-tap:hover .k-go{transform:translateX(2px);background:rgba(255,255,255,.34)}
.kpi.kpi-tap:active{transform:translateY(0) scale(.995)}
.kpi.kpi-tap:focus-visible{outline:3px solid rgba(16,122,92,.45);outline-offset:2px}

/* Filter tanggal dashboard admin */
.admx-filter{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin:0 0 14px;
  box-shadow:0 1px 2px rgba(16,42,34,.04)}
.admx-presets{display:flex;flex-wrap:wrap;gap:6px}
.admx-chip{font-size:11.5px;font-weight:700;padding:6px 11px;border-radius:999px;background:#f3f7f5;color:#4b6b5e;
  border:1px solid #e3ece7;text-decoration:none;white-space:nowrap;transition:.15s}
.admx-chip:hover{background:#e8f3ee;color:#0e5a45}
.admx-chip.on{background:#0e5a45;color:#fff;border-color:#0e5a45;box-shadow:0 4px 10px rgba(11,75,58,.22)}
.admx-dates{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.admx-dates label{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#5a6b64}
.admx-dates .input{width:142px;padding:7px 9px;font-size:12px}
@media(max-width:700px){
  .admx-filter{padding:10px}
  .admx-dates{width:100%}
  .admx-dates label{flex:1;min-width:130px}
  .admx-dates .input{width:100%}
  .admx-dates .btn{flex:1}
}

/* Histori menu (tab) di bawah header dashboard */
.dash-tabs{display:flex;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;
  padding:2px 0 10px;margin:2px 0 14px;border-bottom:1px solid var(--line);
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.dash-tabs::-webkit-scrollbar{display:none}
.dash-tab{display:inline-flex;align-items:center;gap:6px;flex:none;max-width:220px;
  padding:7px 10px;border-radius:9px;background:#f4f8f6;border:1px solid #e4ece8;
  color:#4b6b5e;font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap;
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.dash-tab span{overflow:hidden;text-overflow:ellipsis;max-width:150px}
.dash-tab svg{flex:none;opacity:.85}
.dash-tab:hover{background:#e9f3ee;color:#0e5a45;border-color:#d7e8e0}
.dash-tab.on{background:#0e5a45;border-color:#0e5a45;color:#fff;box-shadow:0 4px 10px rgba(11,75,58,.18)}
.dash-tab.on svg{opacity:1}
.dash-tab-x{width:17px;height:17px;border-radius:50%;border:0;padding:0;flex:none;cursor:pointer;
  display:grid;place-items:center;font-size:13px;line-height:1;font-weight:700;
  background:rgba(14,90,69,.09);color:#4b6b5e;transition:background .15s ease,color .15s ease}
.dash-tab-x:hover{background:#c8483c;color:#fff}
.dash-tab.on .dash-tab-x{background:rgba(255,255,255,.22);color:#fff}
.dash-tab.on .dash-tab-x:hover{background:#c8483c;color:#fff}
@media(max-width:700px){
  .dash-tabs{gap:5px;margin:0 0 10px;padding-bottom:8px}
  .dash-tab{padding:6px 9px;font-size:11.5px;max-width:180px}
  .dash-tab span{max-width:110px}
}

/* kamar & extra bed */
.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px;margin:8px 0 14px}
.room-card{border:1px solid #e2ece6;border-radius:12px;padding:11px 13px;background:#fbfdfc}
.room-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;color:#14261f}
.room-head b{font-weight:800}
.room-cap{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#5c7268;background:#eef6f1;border-radius:20px;padding:2px 8px;white-space:nowrap}
.room-line{display:flex;align-items:center;gap:5px;font-size:12px;color:#42584d;margin-top:6px}
.room-notes{font-size:11.5px;color:#6b7f76;margin-top:4px}
.extra-bed{margin-top:10px;border:1px solid #e5ddc4;background:#fffdf6;border-radius:12px;padding:12px 14px}
.extra-bed .eb-head{display:flex;align-items:center;gap:6px;font-weight:800;font-size:13px;color:#6b5320;margin-bottom:6px}
.extra-bed ul{margin:0;padding-left:18px;font-size:12.5px;color:#42584d}
.extra-bed li{margin:3px 0}
.rm-card{max-width:860px!important}
.rm-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.rm-row{border:1px solid #e2ece6;border-radius:12px;padding:10px 12px;margin-bottom:10px;background:#fbfdfc}
.rm-row-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:800;color:#5c7268;letter-spacing:.3px;text-transform:uppercase;margin-bottom:6px}
.rm-del{border:0;background:#fdeceb;color:#b23e2e;width:22px;height:22px;border-radius:50%;cursor:pointer;font-size:14px;line-height:1}
.rm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rm-grid label{font-size:10.5px;font-weight:700;color:#5c7268;display:block}
.rm-grid .input{margin-top:3px;width:100%}
.rm-wide{grid-column:1/-1}
.rm-eb{margin-top:14px;border:1px solid #e5ddc4;background:#fffdf6;border-radius:12px;padding:12px}
.rm-eb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.rm-eb-grid label{font-size:10.5px;font-weight:700;color:#6b5320;display:block}
.rm-check{display:flex!important;gap:7px;align-items:center;font-size:12px}
.rm-actions{display:flex;gap:8px;margin-top:14px}
@media(max-width:700px){.rm-grid{grid-template-columns:1fr 1fr}.rm-eb-grid{grid-template-columns:1fr}}

.rm-actions{position:sticky;bottom:-1px;background:#fff;padding:10px 0 2px;border-top:1px solid #eef3f0;margin-top:12px;z-index:2}

/* villa referral affiliator */
.aff-villa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:12px}
.aff-villa{border:1px solid #e2ece6;border-radius:14px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;display:block;transition:transform .15s,box-shadow .15s}
.aff-villa:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(16,48,36,.1)}
.aff-villa-img{height:130px;background:#eef4f0}
.aff-villa-img img{width:100%;height:100%;object-fit:cover;display:block}
.aff-villa-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:5px}
.aff-villa-body b{font-size:13px;color:#14261f}
.aff-villa-body .d{font-size:11.5px;color:#6b7f76;line-height:1.35}
.aff-villa-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.aff-villa-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed #e6efe9;padding-top:7px;margin-top:2px;font-size:11.5px;color:#5c7268}
.aff-villa-foot b{color:#12623f;font-size:12.5px}