/* ============================================================
   RANI SALON — Design System
   ============================================================ */
:root{
  --pink:#ec1e79; --pink-600:#d6166b; --pink-700:#b80f59;
  --grad-start:#ff4d9e; --grad-end:#e10870;
  --ink:#2b2433; --ink-soft:#5b5563; --muted:#8c8696;
  --line:#f6d6e6; --line-soft:#f3e2ec;
  --card:#ffffff;
  --ring:rgba(236,30,121,.16);
  --ok:#1f9d57; --ok-bg:#e6f7ee; --ok-bd:#bfe9cf;
  --warn:#b3791c; --warn-bg:#fff2d8; --warn-bd:#f3dca6;
  --info:#2563c9; --info-bg:#dcebff;
  --proc:#6d28d9; --proc-bg:#ece1ff;
  --danger:#d33; --danger-bg:#fde4e6;
  --radius:18px; --radius-sm:12px;
  --shadow:0 10px 34px rgba(220,60,130,.10);
  --shadow-sm:0 3px 16px rgba(220,60,130,.07);
  --sidebar-w:248px;
  --font:'Poppins',-apple-system,'Segoe UI',sans-serif;
  /* CSS-only pink background base */
  --bg-base:#fbc8db;
  --bg-light:#fddde9;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family:var(--font);
  color:var(--ink);
  /* Pure CSS pink gradient background — no image file */
  background:
    radial-gradient(ellipse 65% 45% at 5% 5%,  rgba(255,120,180,.28) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 95% 5%,  rgba(255,160,200,.18) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 50% 95%, rgba(255,100,170,.20) 0%, transparent 60%),
    radial-gradient(ellipse 55% 35% at 80% 60%, rgba(255,180,210,.22) 0%, transparent 50%),
    linear-gradient(160deg, #fddde9 0%, #fbc8db 40%, #f9c0d6 70%, #fddde9 100%);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  overflow-x:hidden;
}

a{text-decoration:none;color:inherit}
img{max-width:100%}
.bi{line-height:1}

/* ============================================================
   CSS-ONLY BACKGROUND DECORATIONS (no image)
   blobs + sparkle stars + leaf stems
   ============================================================ */
.rs-bg{position:relative;min-height:100vh}
.bg-layer{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}

/* Wave blobs */
.bg-blob{position:absolute}
.blob-tl{top:0;left:0;width:55%;height:auto;opacity:1}
.blob-br{bottom:0;right:0;width:55%;height:auto;opacity:1}

/* Sparkle 4-pointed stars */
.bg-sparkle{position:absolute;width:20px;height:20px}
.sp1{top:6%;  left:5%;  width:22px;height:22px}
.sp2{top:12%; right:28%;width:16px;height:16px}
.sp3{top:42%; left:22%; width:14px;height:14px}
.sp4{top:70%; right:8%; width:18px;height:18px}
.sp5{top:82%; left:38%; width:12px;height:12px}

/* Leaf stems — fixed on sides, tall enough to fill screen height */
.bg-leaf{position:absolute}
.leaf-l{left:-18px;top:70px;width:110px;height:calc(100vh - 70px);min-height:500px}
.leaf-r{right:-18px;top:70px;width:110px;height:calc(100vh - 70px);min-height:500px}

.rs-deco{display:none}

/* logo */
.rs-logo{display:block;object-fit:contain}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:none;cursor:pointer;
  font-family:var(--font);font-weight:700;font-size:.92rem;border-radius:12px;padding:.7rem 1.4rem;transition:.15s;line-height:1.1}
.btn-pink{background:linear-gradient(135deg,var(--grad-start),var(--grad-end));color:#fff;box-shadow:0 8px 20px rgba(230,20,110,.28)}
.btn-pink:hover{filter:brightness(1.05);transform:translateY(-1px);color:#fff}
.btn-outline{background:#fff;color:var(--pink);border:1.6px solid var(--pink)}
.btn-outline:hover{background:#fff0f6}
.btn-ghost{background:rgba(255,255,255,.8);color:var(--pink);border:1.6px solid var(--line)}
.btn-ghost:hover{border-color:var(--pink)}
.btn-soft{background:#fde9f2;color:var(--pink)}
.btn-block{width:100%}
.btn-lg{padding:.85rem 1.6rem;font-size:1rem}
.btn-sm{padding:.42rem .8rem;font-size:.8rem;border-radius:9px}
.btn-green{background:linear-gradient(135deg,#27c06a,#149a52);color:#fff}
.btn-danger-soft{background:#fde4e6;color:#d33;border:1.5px solid #f6c9ce}
.toolbar-right .btn-pink{
    height:35px;
    padding:0 18px;
    font-size:11px;
    border-radius:5px;
    font-weight:700;
}
.table-card .rs-table thead th{
    font-size:13px;
    font-weight:800;
    padding:18px 18px;
}
.btn-walkin{
    height:35px;
    padding:0 22px;
    font-size:12px;
    border-radius:10px;
    font-weight:700;
}

.aksi-col{
    text-align:center;
    width:120px;
}

.aksi-btn-group{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
}
/* ---- Forms ---- */
.field{margin-bottom:1rem}
.field label,.lbl{display:block;font-weight:700;color:#3a3340;font-size:.92rem;margin-bottom:.4rem}
.help{font-size:.8rem;color:var(--pink);margin-top:.35rem}
.help.muted{color:var(--muted)}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap .ico{position:absolute;left:14px;color:var(--pink);font-size:1.05rem;pointer-events:none}
.input-wrap .eye{position:absolute;right:12px;color:var(--pink);background:none;border:none;cursor:pointer;font-size:1.1rem;padding:4px}
.inp{width:100%;height:40px;border:2.5px solid #f6bfd7;border-radius:8px;padding:0 16px;font-size:15px;background:#fff; }
.input-wrap .inp{padding-left:44px}
.input-wrap.has-eye .inp{padding-right:44px}
.inp::placeholder{color:#b9b3c0}
.inp:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 4px var(--ring)}
textarea.inp{resize:vertical;min-height:84px}
select.inp{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    min-width: 150px; /* perlebar dropdown */
    padding: 12px 45px 12px 16px; /* atas kanan bawah kiri */

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23ec1e79' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 15px) center;
    background-size: 14px;
}
.chk{display:flex;align-items:center;gap:.55rem;font-weight:600;color:#3a3340;cursor:pointer;padding:.2rem 0}
.chk input{width:18px;height:18px;accent-color:var(--pink);cursor:pointer}
.suffix-input{display:flex;align-items:stretch;border:1.6px solid var(--line);border-radius:12px;overflow:hidden}
.suffix-input .inp{border:none;border-radius:0}
.suffix-input .sfx{display:flex;align-items:center;padding:0 14px;background:#fbeaf2;color:var(--pink);font-weight:700;font-size:.85rem}

/* ---- Alerts ---- */
.banner{display:flex;gap:.9rem;align-items:flex-start;border-radius:14px;padding:1rem 1.2rem;margin-bottom:1.1rem}
.banner .b-ico{font-size:1.6rem;flex:none;line-height:1}
.banner-error{background:#fde7ef;border:1px solid #f7c4d8}
.banner-error .b-ico,.banner-error b{color:var(--pink)}
.banner-error span{color:#c43b6a}
.banner-ok{background:var(--ok-bg);border:1px solid var(--ok-bd);color:#157a43}
.banner-ok .b-ico{color:var(--ok)}
.alert-inline{border-radius:12px;padding:.7rem 1rem;font-size:.9rem;margin-bottom:1rem}
.alert-ok{background:var(--ok-bg);color:#157a43;border:1px solid var(--ok-bd)}
.alert-bad{background:var(--danger-bg);color:#b23;border:1px solid #f3c2c8}
.alert-warn{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-bd)}

/* ---- Badges ---- */
.badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.74rem;font-weight:700;padding:.28rem .65rem;border-radius:999px}
.b-aktif,.b-selesai{background:var(--ok-bg);color:#157a43}
.b-aktif .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block}
.b-menunggu{background:var(--warn-bg);color:var(--warn)}
.b-dikonfirmasi{background:var(--info-bg);color:var(--info)}
.b-diproses{background:var(--proc-bg);color:var(--proc)}
.b-dibatalkan{background:var(--danger-bg);color:#c0392b}
.b-paket{background:#fdeaf3;color:var(--pink)}

/* ---- Tables ---- */
.rs-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #f4d6e4;border-radius:0px;overflow:hidden;}
.rs-table thead th{
    background:#fff5fa;
    color:var(--pink);
    font-size:14px;
    font-weight:700;
    padding:16px 18px;
    border-bottom:1px solid #f4d6e4;
    vertical-align:middle;
    white-space:nowrap;
}
.rs-table tbody td{
    padding:12px 18px;
    border-top:1px solid #f6e4ec;
    font-size:15px;
    line-height:1.6;
    vertical-align:middle;
    text-align:left;
}

/* =========================================================
   TABEL DAFTAR LAYANAN
========================================================= */

.layanan-table{
    width:100%;
    table-layout:fixed;
    border-collapse:collapse;
}

/* Isi tabel */
.layanan-table tbody td{
    vertical-align:middle;
    font-size:12px;
}

/* =========================================================
   PEMBAGIAN LEBAR KOLOM
========================================================= */
/* 1. Nama Layanan */
.layanan-table th:nth-child(1),
.layanan-table td:nth-child(1){
    width:17%;
}

/* 2. Kategori */
.layanan-table th:nth-child(2),
.layanan-table td:nth-child(2){
    width:11%;
}

/* 3. Durasi */
.layanan-table th:nth-child(3),
.layanan-table td:nth-child(3){
    width:10%;
}

/* 4. Produk & Harga */
.layanan-table th:nth-child(4),
.layanan-table td:nth-child(4){
    width:16%;
}

/* 5. Bisa Bersamaan */
.layanan-table th:nth-child(5),
.layanan-table td:nth-child(5){
    width:26%;
}

/* 6. Status */
.layanan-table th:nth-child(6),
.layanan-table td:nth-child(6){
    width:10%;
}

/* 7. Aksi */
.layanan-table th:nth-child(7),
.layanan-table td:nth-child(7){
    width:10%;
}


/* =========================================================
   NAMA LAYANAN
========================================================= */
.layanan-table td:nth-child(1){
    text-align:left;
    padding-left:55px;
    padding-right:5px;
    font-weight:700;
    font-size:12px;
}
/* =========================================================
   KATEGORI
========================================================= */
.layanan-table th:nth-child(2){
    text-align:left;
    padding-left:10px !important;
    font-size:12px;
}

.layanan-table td:nth-child(2){
    text-align:center;
    padding-left:0px;
    padding-right:50px;
    font-size:12px;
}


/* =========================================================
   DURASI
========================================================= */
.layanan-table th:nth-child(3){
    text-align:left;
    padding-left:5px !important;
    font-size:12px;
}

.layanan-table td:nth-child(3){
    text-align:left;
    padding-left:5px;
    padding-right:20px;
    font-size:12px;
    white-space:nowrap;
    color:#000!important
}


/* =========================================================
   PRODUK & HARGA
========================================================= */

.layanan-table th:nth-child(4),
.layanan-table td:nth-child(4){
    text-align:left !important;
    padding-left:0px !important;
    padding-right:25px;
    font-size:12px !important;
    vertical-align:middle;
}

.layanan-table td:nth-child(4) div{
    margin:3px 0;
    line-height:1.45;
    white-space:nowrap;
}

.layanan-table td:nth-child(4) b{
    font-weight:700;
}


/* =========================================================
   BISA BERSAMAAN
========================================================= */

.layanan-table th:nth-child(5){
    text-align:left;
    padding-left:0px !important;
    padding-right:40px !important;
    font-size:12px;
    white-space:nowrap;
}

.layanan-table td:nth-child(5){
    text-align:left;
    padding-left:0px;
    padding-right:40px;
    padding-top:14px;
    padding-bottom:14px;

    font-size:12px;
    line-height:1.65;

    vertical-align:middle;

    /* Jangan potong kata */
    white-space:normal;
    word-break:normal;
    overflow-wrap:break-word;

    /* Jangan italic supaya lebih mudah dibaca */
    font-style:normal;
    color:#40353c;
}


/* =========================================================
   AGAR DAFTAR LAYANAN BERSAMAAN LEBIH TERATUR
========================================================= */

.layanan-table td:nth-child(5){
    max-width:0;
}


/* =========================================================
   STATUS
========================================================= */

.layanan-table th:nth-child(6){
    text-align:left;
    padding-left:20px !important;
    font-size:12px;
}

.layanan-table td:nth-child(6){
    text-align:center;
    padding-left:0px;
    padding-right:80px;
    font-size:12px;
    white-space:nowrap;
}


/* =========================================================
   AKSI
========================================================= */

.layanan-table th:nth-child(7){
    text-align:center;
    font-size:12px;
}

.layanan-table td:nth-child(7){
    text-align:center;
    padding-left:5px;
    padding-right:10px;
    font-size:12px;
}

.layanan-table td:last-child .flex{
    display:flex;
    justify-content:center !important;
    align-items:center;
    gap:8px;
}


/* =========================================================
   BADGE KATEGORI
========================================================= */

.layanan-table .badge{
    min-width:85px;
    justify-content:center;
    font-size:12px;
}


/* =========================================================
   TINGGI & JARAK BARIS
========================================================= */

.layanan-table tbody tr{
    height:auto;
}

.layanan-table tbody td{
    padding-top:16px;
    padding-bottom:16px;
}


/* =========================================================
   KHUSUS KOLOM BISA BERSAMAAN
   Memberikan jarak visual antar daftar
========================================================= */

.layanan-table td:nth-child(5) br{
    line-height:1.8;
}

.booking-table{
    width:100%;
    table-layout:fixed;
}

/* No */
.booking-table th:nth-child(1),
.booking-table td:nth-child(1){
    width:4%;
    text-align:center;
    Font-size:12px;
    font-weight:700;
}

/* Pelanggan */
.booking-table th:nth-child(2),
.booking-table td:nth-child(2){
    width:12%;
    text-align:left;
    padding-left:25px !important;
}

/* Layanan */
.booking-table th:nth-child(3),
.booking-table td:nth-child(3){
    width:10%;
    text-align:left;
    padding-left:25px !important;
}

/* Capster */
.booking-table th:nth-child(4),
.booking-table td:nth-child(4){
    width:8%;
    text-align:center;
    padding-left:10px !important;
}

/* Tanggal */
.booking-table th:nth-child(5),
.booking-table td:nth-child(5){
    width:5%;
    text-align:center !important;
    padding-left:25px !important;
}

/* Total */
.booking-table th:nth-child(6),
.booking-table td:nth-child(6){
    width:9%;
    text-align:left;
    padding-left:60px !important;
}

/* Status */
.booking-table th:nth-child(7),
.booking-table td:nth-child(7){
    width:5%;
    text-align:center;
    padding-left:0px !important;
}

/* Tipe */
.booking-table th:nth-child(8),
.booking-table td:nth-child(8){
    width:5%;
    text-align:center;
    padding-left:0px !important;
}
/* Aksi */
.booking-table th:nth-child(9),
.booking-table td:nth-child(9){
    width:11%;
    text-align:center;
    padding-left:0px !important;
}
.booking-table td{
    line-height:1.45;
    vertical-align:middle;
}
.booking-table td:last-child .flex{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
}
.booking-duration-notice{
    display:flex;
    align-items:flex-start;
    gap:12px;
    width:100%;
    margin:0 0 14px;
    padding:12px 15px;
    border:1px solid #f6b5d2;
    border-radius:9px;
    background:#fff4f8;
    color:#8f2859;
    box-sizing:border-box;
    font-style:italic;
}

.booking-duration-notice > i{
    font-size:14px;
    color:#ec1e79;
    margin-top:2px;
    flex-shrink:0;
}

.booking-duration-selected{
    display:block;
    margin-top:.35rem;
    color:#ec1e79;
    font-weight:800;
}

.booking-duration-content{
    display:flex;
    flex-direction:column;
    gap:5px;
    line-height:1.5;
}

#bookingDurationText{
    font-size:12px;
}

#bookingDurationSelected{
    font-size:12px;
    color:#ec1e79;
}

.booking-duration-content span{
    display:block;

    color:#293654;
    font-weight:700;
}

.booking-duration-content b{
    display:block;

    color:#ec1e79;
    font-weight:800;
}

/*Header Khusus Stok Produk*/
.stok-table thead th{
    padding:16px 18px;
    vertical-align:middle;
    white-space:nowrap;
}

/* Nama Produk */
.stok-table thead th:nth-child(1){
    width:3%;
    text-align:left;
    padding-left:95px;
}

/* Layanan */
.stok-table thead th:nth-child(2){
    width:3%;
    text-align:center;
    
}

/* Stok Awal */
.stok-table thead th:nth-child(3){
    width:5%;
    text-align:center;
}

/* Minimal */
.stok-table thead th:nth-child(4){
    width:5%;
    text-align:center;
}

/* Sisa */
.stok-table thead th:nth-child(5){
    width:5%;
    text-align:left;
}

/* Takaran */
.stok-table thead th:nth-child(6){
    width:10%;
    text-align:left;
    padding-left:0px;
}

/* Status */
.stok-table thead th:nth-child(7){
    width:5%;
    text-align:center;
    padding-left:5px;
}
/* Aksi */
.stok-table thead th:nth-child(8){
    width:5%;
    text-align:center;
    padding-right:10px;
}
/* ==========================
   Isi Khusus Stok Produk
========================== */

/* Nama Produk */
.stok-table tbody td:nth-child(1){
    width:3%;
    text-align:left;
    padding-left:24px;
}

/* Layanan */
.stok-table tbody td:nth-child(2){
    width:3%;
    text-align:center;
    padding-left:0;
    color:#000!important
}

/* Stok Awal */
.stok-table tbody td:nth-child(3){
    width:5%;
    text-align:center;
    padding-left:0;
    color:#000!important
}

/* Minimal */
.stok-table tbody td:nth-child(4){
    width:5%;
    text-align:center;
    padding-left:0;
    color:#000!important
}

/* Sisa */
.stok-table tbody td:nth-child(5){
    width:5%;
    text-align:left;
    padding-left:5;
}

/* Takaran */
.stok-table tbody td:nth-child(6){
    width:10%;
    text-align:left;
    padding-left:0px;
    line-height:1.5;
}

/* Status */
.stok-table tbody td:nth-child(7){
    width:5%;
    text-align:center;
    padding-left:5px;
}

/* Aksi */
.stok-table tbody td:nth-child(8){
    width:5%;
    text-align:center;
    padding-right:10px;
}
.cell-ico{width:40px;height:40px;border-radius:50%;background:#fde9f2;display:inline-flex;align-items:center;justify-content:center;color:var(--pink);font-size:1.1rem;flex:none}

/* ---- Footer ---- */
.rs-foot{text-align:center;color:#000!important;font-size:.8rem;padding:1.4rem 0 1rem;position:relative;z-index:1}
.rs-footer2{
    text-align:center;
    color:#000;
    font-size:.8rem;
    padding:1rem 0 1rem;
    position:relative;
    z-index:1;
    transform:translateX(110px);
}

/* ============================================================
   AUTH pages
   ============================================================ */
.auth-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2.2rem 1rem;position:relative;z-index:1}
.auth-card{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:22px;box-shadow:var(--shadow);width:100%;max-width:480px;padding:2rem 2.1rem;position:relative;z-index:1}
.auth-head{margin-bottom:1.4rem}
.rs-brand{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center}
.rs-brand .name{font-weight:800;font-size:2.3rem;letter-spacing:1px;color:var(--pink);line-height:1;margin:.4rem 0 0}
.rs-brand .tagline{font-weight:700;color:#36303f;font-size:1.05rem}
.rs-brand .sub{color:var(--muted);font-size:.85rem}

/* ============================================================
   CUSTOMER NAVBAR — full width, white frosted
   ============================================================ */
.c-nav{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 2px 18px rgba(220,60,130,.09);
  position:sticky;top:0;z-index:100;
  width:100%;
}
.c-nav .inner{
  width:100%;
  padding:.7rem 2rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.c-nav .brand{display:flex;align-items:center;gap:.55rem;font-weight:800;color:var(--pink);font-size:1.2rem;letter-spacing:.4px}
.c-nav .brand .rs-logo{width:36px;height:36px}
.c-nav .menu{display:flex;align-items:center;gap:.2rem}
.c-nav .menu a{padding:.45rem .85rem;border-radius:10px;font-weight:600;color:#4a434f;font-size:.9rem;transition:.15s}
.c-nav .menu a:hover{color:var(--pink)}
.c-nav .menu a.active{
  background:linear-gradient(135deg,var(--grad-start),var(--grad-end));
  color:#fff;padding:.45rem 1.1rem;
  box-shadow:0 4px 12px rgba(230,20,110,.3);
}
.c-nav .sep{width:1px;height:22px;background:var(--line);margin:0 .5rem}
.c-nav .login-btn{
  border:1.6px solid var(--pink);color:var(--pink);border-radius:10px;
  padding:.4rem .95rem;font-weight:700;font-size:.88rem;
  display:inline-flex;gap:.4rem;align-items:center;
  background:transparent;transition:.15s;
}
.c-nav .login-btn:hover{background:#fff0f6}
.c-nav .user{position:relative}
.c-nav .user .u-btn{display:inline-flex;align-items:center;gap:.5rem;color:var(--pink);font-weight:700;cursor:pointer;background:none;border:none;font-family:var(--font);font-size:.92rem}
.c-nav .user .u-btn .av{width:30px;height:30px;border-radius:50%;background:#fde9f2;display:inline-flex;align-items:center;justify-content:center}
.c-nav .dropdown{position:absolute;right:0;top:140%;background:#fff;border-radius:14px;box-shadow:var(--shadow);min-width:210px;padding:.5rem;display:none;z-index:50}
.c-nav .dropdown.open{display:block}
.c-nav .dropdown a{display:flex;align-items:center;gap:.6rem;padding:.65rem .8rem;border-radius:10px;color:#4a434f;font-weight:600;font-size:.9rem}
.c-nav .dropdown a:hover{background:#fdeef5}
.c-nav .dropdown a.danger{color:var(--pink)}
.c-nav .burger{display:none;background:none;border:none;color:var(--pink);font-size:1.5rem;cursor:pointer}

/* ============================================================
   CUSTOMER PAGE WRAPPER — full width, proper padding
   ============================================================ */
.c-page{max-width:1400px;margin:0 auto;padding:2rem 3%;display:grid;grid-template-columns:1fr;gap:2rem;position:relative;z-index:1}

/* ============================================================
   BERANDA HERO
   ============================================================ */
.hero{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:2.5rem;
  align-items:center;
  background:linear-gradient(135deg, rgba(255,77,158,.08) 0%, rgba(255,160,200,.06) 100%);
  padding:3rem 3.5rem;
  border-radius:24px;
  margin-bottom:1rem;
  box-shadow:0 8px 32px rgba(236,30,121,.08);
  position:relative;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  top:-40%;
  right:-10%;
  width:450px;
  height:450px;
  background:radial-gradient(circle, rgba(255,200,220,.15) 0%, transparent 70%);
  border-radius:50%;
  z-index:0;
}

.hero .h-text{
  position:relative;
  z-index:1;
}

.hero .h-text h1{
  font-size:2.8rem;
  font-weight:800;
  color:var(--pink);
  margin:0 0 .6rem;
  letter-spacing:-1px;
}

.hero .h-text h3{
  font-size:1.3rem;
  color:var(--ink-soft);
  margin:0 0 1rem;
  font-weight:600;
}

.hero .h-text p{
  color:#7a737f;
  font-size:1rem;
  line-height:1.7;
  margin:0;
}

.hero .h-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:1;
}

.hero .h-logo .rs-logo{
  width:280px;
  height:280px;
  filter:drop-shadow(0 20px 40px rgba(236,30,121,.12));
}
/* ============================================================
   BERANDA CARDS
   ============================================================ */
/* White card — Tentang & Keunggulan */
.card{background:#fff;border-radius:20px;box-shadow:0 6px 24px rgba(0,0,0,.06);padding:2.5rem 3rem;position:relative;z-index:1;border:1px solid rgba(255,255,255,.6)}
.tentang-wrap{display:flex;gap:2rem;align-items:flex-start}
.t-ico{width:70px;height:70px;min-width:70px;background:linear-gradient(135deg,#ff4d9e 0%,#e10870 100%);border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:2.2rem;color:#fff;box-shadow:0 10px 30px rgba(236,30,121,.25)}
.card-title{color:var(--pink);font-weight:800;font-size:1.4rem;margin:0 0 .8rem;letter-spacing:.5px}
.card-body{color:#6a636e;font-size:1.05rem;line-height:1.8;margin:0}
/* Keunggulan grid */
.keung-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.keung-item{background:linear-gradient(135deg,rgba(255,200,220,.05) 0%,rgba(255,240,250,.1) 100%);padding:2rem;border-radius:16px;border:1px solid rgba(255,160,200,.2);transition:.3s;display:flex;flex-direction:column;gap:1rem}
.keung-item:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(236,30,121,.12);border-color:rgba(236,30,121,.3);background:linear-gradient(135deg,rgba(255,200,220,.1) 0%,rgba(255,240,250,.15) 100%)}
.keung-ico{width:60px;height:60px;background:#fde9f2;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--pink);font-size:1.8rem}
.keung-item h6{color:var(--pink);font-weight:700;font-size:1.1rem;margin:0 0 .4rem}
.keung-item p{color:#8c8696;font-size:.95rem;margin:0;line-height:1.5}
/* Jam & Kontak: 2 kartu putih berdampingan */
.jk-row{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
.jk-card{background:linear-gradient(135deg,#fff9fc 0%,#fff 100%);border:1.5px solid #f3e2ec;border-radius:18px;padding:2.2rem 2.5rem;display:flex;gap:1.8rem;align-items:flex-start;transition:.25s;position:relative;z-index:1;overflow:hidden}
.jk-card::before{content:"";position:absolute;top:-50%;right:-20%;width:300px;height:300px;background:radial-gradient(circle,rgba(255,77,158,.06) 0%,transparent 70%);border-radius:50%;z-index:0}
.jk-card *{position:relative;z-index:1}
.jk-ico{width:70px;height:70px;min-width:70px;background:linear-gradient(135deg,rgba(255,77,158,.15) 0%,rgba(255,160,200,.1) 100%);border:2px solid rgba(236,30,121,.2);border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--pink);font-size:2rem}
.jk-title{color:var(--pink);font-weight:800;font-size:1.1rem;margin-bottom:.6rem;letter-spacing:.5px}
.jk-body{color:#6a636e;font-size:.95rem;line-height:1.6}
.jk-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(236,30,121,.1);border-color:#f0c8d8}
/* legacy kept */
.card-pink{background:rgba(253,221,238,.65);border-radius:16px;padding:1.4rem 1.8rem;margin-top:.9rem;box-shadow:0 2px 14px rgba(220,60,130,.06);position:relative;z-index:1}
.jk-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.jk-item{display:flex;gap:.9rem;align-items:flex-start}
/* Legacy helpers kept for other pages */
.info-card{background:rgba(255,255,255,.93);border-radius:16px;box-shadow:var(--shadow-sm);padding:1.4rem 1.6rem;position:relative;z-index:1}
.mt-lg{margin-top:1.2rem}.mt{margin-top:.8rem}.mb{margin-bottom:.8rem}
.icon-circle{width:40px;height:40px;border-radius:50%;background:#fde9f2;color:var(--pink);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex:none}
.sec-title{color:var(--pink);font-weight:800;font-size:.95rem;margin:0 0 .5rem;letter-spacing:.3px;text-transform:uppercase}
.sec-body{color:var(--ink-soft);font-size:.88rem;line-height:1.75;margin:0}
.section-divider{border:none;border-top:1px solid rgba(236,30,121,.1);margin:1.3rem 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.info-row{display:flex;gap:.9rem;align-items:flex-start}
.sub-title{color:var(--pink);font-weight:800;font-size:.88rem;margin:0 0 .25rem;letter-spacing:.2px;text-transform:uppercase}
.sub-body{color:var(--ink-soft);font-size:.85rem;line-height:1.75}

/* ============================================================
   SERVICE / LAYANAN
   ============================================================ */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.svc{background:rgba(255,255,255,.93);border-radius:16px;box-shadow:var(--shadow-sm);padding:1.2rem;display:flex;flex-direction:column;gap:.55rem}
.svc .top{display:flex;gap:.9rem;align-items:flex-start}
.svc .ico{width:52px;height:52px;border-radius:50%;background:#fde9f2;color:var(--pink);display:flex;align-items:center;justify-content:center;font-size:1.35rem;flex:none}
.svc h5{margin:0;color:var(--ink);font-weight:800;font-size:1rem}
.svc .desc{color:var(--muted);font-size:.82rem;margin:.1rem 0 0}
.svc .price{color:var(--pink);font-size:.88rem;margin-top:.2rem;font-weight:800}
.pkg-band{background:rgba(255,240,247,.9);border-radius:16px;padding:1.2rem;margin-top:1.4rem}
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.pkg{background:#fff;border-radius:14px;box-shadow:var(--shadow-sm);padding:1.1rem}
.pkg .ph{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.pkg .gi{width:40px;height:40px;border-radius:50%;background:#fde9f2;color:var(--pink);display:flex;align-items:center;justify-content:center;flex:none}
.pkg h6{margin:0;font-weight:800;color:var(--ink)}
.pkg ul{margin:.3rem 0 .8rem;padding-left:1.1rem;color:var(--ink-soft);font-size:.84rem}
.pkg ul li{margin:.1rem 0}

/* ============================================================
   BOOKING
   ============================================================ */
.slots{display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem;margin:.4rem 0}
.slot{border:2px solid var(--ok-bd);border-radius:10px;padding:.45rem;text-align:center;cursor:pointer;background:#fff;font-size:.82rem;font-weight:700;color:#2c2735}
.slot small{display:block;font-weight:500;font-size:.66rem;color:var(--ok)}
.slot.full{border-color:#f3c4d2;color:#c98aa0;cursor:not-allowed}
.slot.full small{color:#d98aa6}
.slot.session-used:not(.full){background:#fff6fb;border-color:var(--pink);box-shadow:0 6px 14px rgba(236,30,121,.1)}
.slot.sel{background:#1f9d57;border-color:#1f9d57;color:#fff}
.slot.sel small{color:#d6ffe6}
.slot input{display:none}
.booking-duration-reminder{
    display:flex;
    align-items:flex-start;
    gap:.65rem;
    margin:.8rem 0 1rem;
    padding:.8rem .95rem;
    border:1px solid #f7bfd8;
    border-radius:10px;
    background:#fff6fb;
    color:#4a3440;
    font-size:.70rem;
    font-weight:700;
    line-height:1.45;
    font-style:italic;
}
.booking-duration-reminder i{
    color:var(--pink);
    font-size:0.8rem;
    margin-top:.1rem;
}
.booking-duration-reminder span,
.booking-duration-reminder b{
    display:block;
}
.booking-duration-reminder b{
    color:var(--pink);
    margin-top:.18rem;
}
.summary .row{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0}
.summary .line{border:none;border-top:1px dashed var(--line);margin:.6rem 0}
.summary .lbl-ico{display:flex;align-items:center;gap:.5rem;color:#4a434f;font-weight:600}
.tracker{display:flex;justify-content:space-between;gap:.4rem;margin-top:1rem}
.tracker .step{flex:1;text-align:center;position:relative}
.tracker .step .dot{width:46px;height:46px;border-radius:50%;border:2px solid #d9d4de;color:#b7b2be;display:flex;align-items:center;justify-content:center;margin:0 auto .5rem;background:#fff;font-size:1.1rem;position:relative;z-index:2}
.tracker .step.done .dot{border-color:var(--pink);color:var(--pink);background:#fff}
.tracker .step.active .dot{background:var(--pink);border-color:var(--pink);color:#fff}
.tracker .step::before{content:"";position:absolute;top:23px;left:-50%;width:100%;height:2px;background:#e2dce6;z-index:1}
.tracker .step:first-child::before{display:none}
.tracker .step.done::before,.tracker .step.active::before{background:var(--pink)}
.tracker .step h6{margin:0;font-weight:800;font-size:.86rem;color:var(--ink)}
.tracker .step p{margin:.15rem 0 0;font-size:.72rem;color:var(--muted)}
.booking-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:12px;
    margin-bottom:15px;
}

.b-kategori{
    background:#fce7f3;
    color:#ec4899;
    border-radius:999px;
    padding:6px 12px;
    font-weight:700;
}

.booking-actions .btn{
    width:auto !important;
}

.booking-design-page{
    max-width:1540px;
    margin:0 auto;
    padding:0 0 1.8rem;
}

.booking-title-card{
    position:relative;
    overflow:hidden;
    min-height:60px;
    display:flex;
    align-items:center;
    padding:0 28px;
    margin-bottom:1.6rem;
    border-radius:13px;
    background:rgba(255,255,255,.88);
    box-shadow:0 10px 28px rgba(236,30,121,.06);
}

/* Efek memudar di sisi kanan */
.booking-title-card.blur-right::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:60%;
    height:100%;

    background:radial-gradient(
        ellipse at right center,
        rgba(255,190,220,.55),
        rgba(255,230,242,.20),
        transparent
    );

    filter:blur(40px);
    pointer-events:none;
}

.booking-title-card.blur-right::after{
    content:"";
    position:absolute;

    right:-80px;
    top:-30px;

    width:320px;
    height:220px;

    background:radial-gradient(
        circle,
        rgba(255,180,215,.45),
        transparent 75%
    );

    filter:blur(45px);

    pointer-events:none;
}

.booking-title-card h1{
    margin:0;
    color:var(--pink);
    font-size:1.5rem;
    font-weight:800;
}

.booking-design-heading{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin:.1rem 0 1.4rem;
    text-align:center;
}

.booking-design-heading h2{
    margin:0;
    color:var(--pink);
    font-size:1.35rem;
    font-weight:800;
    letter-spacing:0;
}

.booking-design-heading span{
    width:52px;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,transparent,var(--pink));
}

.booking-design-heading span:last-child{
    background:linear-gradient(90deg,var(--pink),transparent);
}

.booking-design-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:1.6rem;
    align-items:start;
}

.booking-main-card,
.booking-summary-card,
.booking-info-card,
.booking-detail-card,
.booking-payment-card{
    background:rgba(255,255,255,.92);
    border:1.8px solid rgba(246,214,230,.78);
    border-radius:18px;
    box-shadow:0 12px 34px rgba(236,30,121,.08);
}

.booking-info-card,
.booking-detail-card,
.booking-payment-card{
    margin-bottom:22px;
    overflow:hidden;
}

.booking-detail-card table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}

.booking-detail-card .rs-table{
    width:100%;
    border:2px solid rgba(246,214,230,.86);
    border-radius:10px;
    overflow:hidden;
    border-collapse:separate;
    border-spacing:0;
    background:#fff;
}

.booking-detail-card thead th{
    padding:16px 18px;
    font-size:.88rem;
    font-weight:700;
    color:var(--pink);
    background:#fff6fa;
}

.booking-detail-card tbody td{
    padding:16px 18px;
    vertical-align:middle;
    color:#2f2d41;
    font-weight:500;
}

.booking-detail-card .rs-table tbody td{
    font-size:12px;
    font-weight:600;
    color:#2f2d41;
    padding:18px 20px;
    vertical-align:middle;
}

.booking-detail-card .rs-table thead th{
    font-size:14px;
    font-weight:900;
    padding:18px 20px;
    vertical-align:middle;
}

.booking-detail-card th:nth-child(1),
.booking-detail-card td:nth-child(1){
    width:24%;
}

.booking-detail-card th:nth-child(2),
.booking-detail-card td:nth-child(2){
    width:22%;
}

.booking-detail-card th:nth-child(3),
.booking-detail-card td:nth-child(3){
    width:28%;
}

.booking-detail-card th:nth-child(4),
.booking-detail-card td:nth-child(4){
    width:16%;
}

.booking-detail-card th:nth-child(5),
.booking-detail-card td:nth-child(5){
    width:10%;
}

.booking-main-card{
    overflow:hidden;
}

.booking-form-section{
    padding:1.6rem 1.8rem;
    border-bottom:1.6px solid rgba(246,214,230,.85);
}

.booking-form-section:last-child{
    border-bottom:0;
}

.booking-form-section h3,
.booking-summary-card h3,
.booking-info-card h3{
    margin:0 0 .8rem;
    display:flex;
    align-items:center;
    gap:.5rem;
    color:var(--pink);
    font-size:1rem;
    font-weight:800;
}

.booking-detail-card h3,
.booking-payment-card h3{
    display:flex;
    align-items:center;
    gap:.5rem;
    margin-top:0.2rem;
    margin-bottom:0.5rem;
    padding:1rem 1.8rem 0rem;
    color:var(--pink);
    font-size:1rem;
    font-weight:980;
}

.booking-detail-summary{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin:10px 2px 15px;
    padding:14px 20px;

    border:1px solid #f5d8e7;
    border-radius:10px;
    background:#fff8fc;
}

.booking-detail-summary>div{

display:flex;

align-items:center;

gap:12px;
font-size:14px;
font-weight:600;

color:#2f2d41;

}

.booking-detail-summary span{
font-size:14px;
font-weight:700;

color:#2f2d41;

margin-left:8px;

}

.booking-detail-summary i{

font-size:15px;

color:var(--pink);

}

.booking-picker{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 140px;
    gap:1rem;
    align-items:center;
    margin:0 22px;
}

.booking-picker .btn{
    height:35px;
    padding:0 20px;
    font-size:12px;
    font-weight:600;
    border-radius:5px;
}

.booking-table-wrap{
    margin:20px 22px 0;
    border:1.6px solid rgba(246,214,230,.86);
    border-radius:5px;
    overflow:hidden;
    background:#fff;
}

.booking-table-wrap2{
    margin:20px 22px 0;
    overflow-x:auto;
}

.booking-items-table{
    margin:0;
}

.booking-items-table thead th{
    background:#fff0f7;
    color:var(--pink);
    font-size:.86rem;
    padding:.80rem 1rem;
}

.booking-items-table tbody td{
    padding:1rem;
    vertical-align:middle;
}
.booking-items-table thead th:nth-child(1){
    text-align:left;
    padding-left:40px;
}

.booking-items-table thead th:nth-child(2){
    text-align:left;
    padding-left:30px;
}

.booking-items-table thead th:nth-child(3){
    text-align:left;
    padding-left:60px;
}

.booking-items-table thead th:nth-child(4){
    text-align:center;
    padding-left:30px;
}
.booking-cell1{
    padding-left: 30px; /* ubah sesuai kebutuhan, misalnya 20px, 30px, 40px */
}
.booking-cell2{
    padding-left: 20px; /* ubah sesuai kebutuhan, misalnya 20px, 30px, 40px */
}
.booking-cell3{
    padding-left: 50px; /* ubah sesuai kebutuhan, misalnya 20px, 30px, 40px */
}

/* Geser isi kolom, header tetap */
.detail-cell-layanan{
    margin-left:50px;
}

.detail-cell-produk{
    margin-left:20px;
}

.detail-cell-kategori{
    margin-left:30px;
}

.detail-cell-harga{
    margin-left:-25px;
}
.btn-reference {
    background: #fff0f7;
    color: #ec4899;
    border: 1px solid #f7bfd8;
}

.btn-reference:hover {
    background: #ec4899;
    color: #fff;
    border-color: #ec4899;
}
.rs-table2{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    border:1px solid #f4d6e4;
    border-radius:18px;
    overflow:hidden;
}

.rs-table2 thead th{
    text-align:center;
}

.rs-table2 thead th span{
    display:inline-block;
}

/* Geser masing-masing judul */
.rs-table2 thead th:nth-child(1) span{
    transform:translateX(-53px);
}

.rs-table2 thead th:nth-child(2) span{
    transform:translateX(-60px);
}

.rs-table2 thead th:nth-child(3) span{
    transform:translateX(-75px);
}

.rs-table2 thead th:nth-child(4) span{
    transform:translateX(-70px);
}

.rs-table2 tbody td{
    padding:18px 20px;
    border-top:1px solid #f6e4ec;
    font-size:13px;
    font-weight:700;
    vertical-align:middle;
}
/* =========================================
   POPUP GAMBAR REFERENSI FULLSCREEN
   ========================================= */

#popupReferensiPenuh {
    position: fixed !important;

    /* mulai setelah sidebar admin */
    top: 0;
    left: 250px;

    width: calc(100vw - 250px);
    height: 100vh;

    display: none;

    padding: 115px;
    box-sizing: border-box;

    background: rgba(20, 20, 20, .60);

    z-index: 99999 !important;

    align-items: center;
    justify-content: center;
}


/* =========================================
   KOTAK UTAMA POPUP
   ========================================= */

#popupReferensiPenuh .referensi-fullscreen {
    position: relative;

    width: 100%;
    height: 94vh;

    margin: 0;
    padding: 0;

    background: #111;

    border-radius: 18px;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    box-shadow:
        0 20px 60px rgba(0,0,0,.45);

    box-sizing: border-box;
}


/* =========================================
   BAGIAN ATAS PUTIH
   ========================================= */

#popupReferensiPenuh .referensi-fullscreen-header {
    position: relative;

    flex: 0 0 52px;

    width: 100%;
    height: 52px;

    padding: 0 18px;

    background: #fff;

    border-bottom: 1px solid #eeeeee;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    box-sizing: border-box;

    z-index: 5;
}


/* =========================================
   TOMBOL X
   ========================================= */

#popupReferensiPenuh .referensi-fullscreen-close {
    width: 37px;
    height: 37px;

    padding: 0;

    border: 1px solid #f3c4da;

    background: #fff;

    color: var(--pink);

    border-radius: 9px;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;

    box-shadow: none;

    transition:
        background .15s ease,
        transform .15s ease;
}

#popupReferensiPenuh .referensi-fullscreen-close:hover {
    background: #fff0f7;
    transform: scale(1.04);
}


/* =========================================
   AREA GAMBAR HITAM
   ========================================= */

#popupReferensiPenuh .referensi-fullscreen-body {
    position: relative;

    flex: 1 1 auto;

    width: 100%;
    min-height: 0;

    padding: 24px;

    background: #111;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: auto;

    box-sizing: border-box;
}


/* =========================================
   GAMBAR
   ========================================= */

#popupReferensiPenuh .referensi-fullscreen-body img {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    border-radius: 8px;

    box-shadow:
        0 8px 35px rgba(0,0,0,.45);
}


/* =========================================
   GAMBAR PADA POPUP REFERENSI AWAL
   ========================================= */

.referensi-image-link {
    position: relative;

    display: block;

    cursor: zoom-in;

    text-decoration: none;

    overflow: hidden;

    border-radius: 10px;
}

.referensi-image-link img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: cover;
}


/* =========================================
   HINT ZOOM
   ========================================= */

.referensi-zoom-hint {
    position: absolute;

    left: 10px;
    right: 10px;
    bottom: 10px;

    padding: 7px 10px;

    border-radius: 8px;

    background: rgba(0,0,0,.68);

    color: #fff;

    font-size: 12px;
    font-weight: 600;

    text-align: center;

    opacity: 0;

    transform: translateY(5px);

    transition: .2s ease;

    pointer-events: none;
}

.referensi-image-link:hover .referensi-zoom-hint {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 768px) {

    #popupReferensiPenuh {
        left: 0;

        width: 100vw;

        padding: 10px;
    }

    #popupReferensiPenuh .referensi-fullscreen {
        width: 100%;
        height: 96vh;

        border-radius: 14px;
    }

    #popupReferensiPenuh .referensi-fullscreen-header {
        flex-basis: 58px;
        height: 58px;

        padding: 0 12px;
    }

    #popupReferensiPenuh .referensi-fullscreen-close {
        width: 40px;
        height: 40px;
    }

    #popupReferensiPenuh .referensi-fullscreen-body {
        padding: 15px;
    }
}

.referensi-modal {
    width: min(850px, 92vw);
    max-height: 85vh;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
}

.referensi-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid #f4d6e4;
}

.referensi-modal-header h2 {
    margin: 0;
    color: #ec4899;
    font-size: 1.15rem;
    font-weight: 800;
}

.referensi-modal-header h2 i {
    margin-right: .4rem;
}

.referensi-close {
    width: 36px;
    height: 36px;
    border: 1px solid #f5c5d9;
    background: #fff0f7;
    color: #ec4899;
    border-radius: 8px;
    cursor: pointer;
}

.referensi-close:hover {
    background: #ec4899;
    color: #fff;
}

.referensi-gallery {
    padding: 1.4rem;
    max-height: 60vh;
    overflow-y: auto;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.referensi-item {
    border: 1px solid #f4d6e4;
    border-radius: 12px;
    padding: .7rem;
    background: #fff;
}

.referensi-number {
    font-weight: 700;
    color: #7b8195;
    font-size: .85rem;
    margin-bottom: .5rem;
}

.referensi-item a {
    display: block;
}

.referensi-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 9px;
    display: block;
    cursor: zoom-in;
    transition: transform .2s ease;
}

.referensi-item img:hover {
    transform: scale(1.02);
}

.referensi-modal-footer {
    padding: .9rem 1.4rem;
    border-top: 1px solid #f4d6e4;
    display: flex;
    justify-content: flex-end;
}
.booking-empty-row td{
    text-align:center;
    color:var(--muted);
    font-weight:600;
}

.booking-row-actions{
    display:flex;
    gap:.65rem;
    flex-wrap:wrap;
}
.booking-row-actions2{
    display:flex;
    gap:.65rem;
    flex-wrap:wrap;
    margin-left:70px;
}

.booking-info-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:26px 70px;
    align-items:start;
}

.booking-info-item{
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding-bottom:16px;
    border-bottom:1.5px solid #f6d9e8;
}

.booking-info-item i{
    width:40px;
    height:40px;
    border-radius:10px;
    background:#ffe3ef;
    color:var(--pink);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    flex-shrink:0;
}

.booking-info-item small{
    display:block;
    color:#444448;
    font-size:.88rem;
    font-weight:500;
    margin-bottom:2px;
}

.booking-info-item b{
    display:block;
    color:#2f2d41;
    font-size:1rem;
    font-weight:700;
}

.payment-summary{

    background:#fff;

    border:1.6px solid rgba(246,214,230,.75);

    border-radius:14px;

    padding:18px 24px;

    margin:18px;

}

.payment-total-label{

    color:#2f2d41;

    font-size:1.05rem;
    font-weight:700;
    margin-top:3;
    margin-bottom:8px;

}

.payment-total-value{

    font-size:22px;

    font-weight:800;

    color:var(--pink);

    line-height:1;

}

.payment-divider{

    height:1px;

    background:#ebebeb;

    margin:18px 18px 20px;

}

.payment-title{
    margin:0 25px 10px;
    font-size:1.05rem;
    font-weight:700;
    color:#2f2d41;
}
.payment-option{

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:10px 16px;

    height:74px;

    border:2px solid #f7d6e6;
    border-radius:14px;

    background:#fff;

    cursor:pointer;

    transition:.2s;
}

.payment-option>div{
    flex:1;
    margin-left:14px;
}

.payment-option div div:first-child{
    font-size:15px;
    font-weight:700;
}

.payment-option div div:last-child{
    font-size:13px;
    color:#7b7b8d;
    margin-top:2px;
    font-weight:500;
}

.payment-option i{
    font-size:20px;
    color:var(--pink);
    margin-left:auto;
}

.payment-summary h2{

    margin-top:8px;

    color:#ff2f82;

    font-size:42px;

}

.payment-method-section{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:16px;

    margin:0 22px 20px;

}

.payment-method-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

}

.booking-field-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem 1.5rem;
}

.booking-field-grid .field,
.booking-form-section > .field{
    margin-bottom:1rem;
}

.booking-form-section label span{
    color:var(--muted);
    font-style:italic;
    font-weight:600;
}

.booking-date-row{
    display:grid;
    grid-template-columns:minmax(180px,240px) auto;
    gap:1rem;
    align-items:center;
}

.booking-date-note{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    font-weight:800;
    font-size:.75rem;
}

.booking-date-note.is-ready{
    color:#16a34a;
}

.booking-date-note.is-full{
    color:#dc2626;
}

.booking-slot-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(86px,1fr));
    gap:.9rem;
}

.booking-design-page .slot-card {
    min-height: 45px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .16rem;

    border: 2px solid #9bd9ad;
    border-radius: 6px;
    background: #fff;
    color: #24324d;

    cursor: pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease !important;

    box-sizing: border-box;
}

.booking-design-page .slot-card input {
    display: none;
}

/* HOVER */
.booking-design-page .slot-card:not(.slot-full):hover {
    cursor: pointer !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 18px rgba(32,164,88,.25) !important;
}

.booking-design-page .slot-card.slot-hampir{
    border-color:#f0b35d;
}

.booking-design-page .slot-card.slot-session-used:not(.slot-full){
    border:2px solid #20a458 !important;
    background:#20a458 !important;
    color:#ffffff !important;
    cursor:pointer;
    transition:.15s ease;
    box-sizing:border-box;
}

.booking-design-page .slot-card.slot-full{
    border-color:#ff9fc3;
    background:#fff5f9;
    color:#ff2f74;
    cursor:not-allowed;
}

.booking-design-page .slot-card.slot-sel{
    border:2px solid #20a458 !important;
    background:#20a458 !important;
    color:#ffffff !important;
    box-shadow:none;
    transform:none;
    cursor:pointer;
    transition:.15s ease;
    box-sizing:border-box;
}
.booking-design-page .slot-card.slot-sel .slot-time,
.booking-design-page .slot-card.slot-session-used .slot-time{
    color:#ffffff !important;
    font-weight:800 !important;
}

.booking-design-page .slot-card.slot-sel .slot-status,
.booking-design-page .slot-card.slot-session-used .slot-status{
    color:#ffffff !important;
    font-weight:800 !important;
}

.booking-design-page .slot-card.slot-sel .slot-status i{
    color:#ffffff !important;
}
.booking-design-page .slot-card.slot-sel:hover,
.booking-design-page .slot-card.slot-session-used:hover{
    cursor:pointer;
    transform:translateY(-1px);
    box-shadow:0 6px 14px rgba(32,164,88,.18);
}

.booking-design-page .slot-time{
    font-size:.68rem;
    font-weight:800;
}

.booking-design-page .slot-status{
    font-size:.65rem;
    font-weight:800;
    color:#16a34a;
}

.booking-design-page .slot-hampir .slot-status{
    color:#d97706;
}

.booking-design-page .slot-full .slot-status{
    color:#ff2f74;
}

.booking-form-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:0px;
}

.booking-form-actions .btn{
    min-width:150px;
}

.btn-simpan-edit{
    min-width:280px;      /* sesuaikan jika masih kurang */
    height:35px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-right:10px;
    transform:translateX(-14px);


    white-space:nowrap;   /* agar tulisan tidak turun */
}

.booking-side-panel{
    display:flex;
    flex-direction:column;
    gap:1.35rem;
    position:sticky;
    top:20px;
}

.booking-summary-card,
.booking-info-card{
    padding:1.5rem;
}

.booking-summary-title{
    color:#24324d;
    font-weight:800;
    margin-bottom:.4rem;
}

.booking-summary-items{
    display:flex;
    flex-direction:column;
    gap:.95rem;
}

.booking-summary-item{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    color:#24324d;
}

.booking-summary-item small{
    display:block;
    margin-top:.18rem;
    color:#7f86a3;
    font-size:.10rem;
    font-weight:600;
}

.booking-summary-item > b{
    white-space:nowrap;
}

.booking-empty-summary{
    color:var(--muted);
    font-size:.90rem;
    font-style:italic;
    font-weight:600;
}

.booking-summary-divider{
    border-top:2px solid #ffb5cf;
    margin:1.25rem 0 1rem;
}

.booking-summary-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    color:#24324d;
    font-weight:800;
    font-size:14px;
    margin:.30rem 0;
}

.booking-summary-row span{
    display:inline;
    align-items:center;
    gap:.45rem;
}

.booking-summary-row b{
    color:#24324d;
    text-align:right;
}

.booking-duration-notice{
    align-items:flex-start;
    gap:.45rem;
    margin:.65rem 0;
    padding:.68rem .78rem;
    border:1px solid #f7bfd8;
    border-radius:8px;
    background:#fff6fb;
    color:#4a3440;
    font-size:.78rem;
    font-weight:750;
    line-height:1.45;
}

.booking-info-card ol{
    margin:.2rem 0 0;
    padding-left:1rem;
    color:#24324d;
    font-weight:650;
    font-size:14px;
}

.booking-info-card li{
    margin:.40rem 0;
}

@media(max-width:1180px){
    .booking-design-layout{
        grid-template-columns:1fr;
    }

    .booking-side-panel{
        position:static;
    }
}

@media(max-width:760px){
    .booking-title-card{
        min-height:64px;
        padding:0 18px;
    }

    .booking-title-card h1{
        font-size:1.45rem;
    }

    .booking-picker,
    .booking-field-grid,
    .booking-date-row{
        grid-template-columns:1fr;
    }

    .booking-form-section{
        padding:1.2rem;
    }

    .booking-form-actions{
        flex-direction:column-reverse;
    }

    .booking-form-actions .btn{
        width:100%;
    }
}
/* ============================================================
   ADMIN layout
   ============================================================ */
body.a-body{
  background:#fff4f9 !important;
  background-image:none !important;
}
.a-body{background:#fff4f9;min-height:100vh}
.a-sidebar{position:fixed;top:0;left:0;width:var(--sidebar-w);height:100vh;background:#fff;box-shadow:2px 0 24px rgba(220,60,130,.06);padding:1.4rem 1rem;z-index:60;display:flex;flex-direction:column}
.a-sidebar .brand{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding-bottom:1.2rem;border-bottom:1px solid var(--line);margin-bottom:1rem}
.a-sidebar .brand .name{font-weight:800;color:var(--pink);letter-spacing:1px;font-size:1.1rem}
.a-sidebar .nav{display:flex;flex-direction:column;gap:.25rem;flex:1}
.a-sidebar .nav a{display:flex;align-items:center;gap:.8rem;padding:.7rem .9rem;border-radius:12px;color:#5b5563;font-weight:600;font-size:.95rem}
.a-sidebar .nav a .bi{font-size:1.15rem}
.a-sidebar .nav a:hover{background:#fdeef5;color:var(--pink)}
.a-sidebar .nav a.active{background:#fde4f0;color:var(--pink)}
.a-main{margin-left:var(--sidebar-w);padding:12px 25px 20px;position:relative;min-height:100vh;background:#fff4f9}
.a-deco{position:absolute;top:0;right:0;width:340px;height:230px;overflow:hidden;pointer-events:none;z-index:0;
  background:radial-gradient(260px 150px at 90% -10%, #ffd9ea, transparent 60%)}
.a-topbar{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:34px;

}

.page-title-area{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.page-title-area h1{

    margin:0;

    font-size:3rem;

    font-weight:800;

    color:var(--pink);

    line-height:1;

}

.page-subtitle{
    margin:0;
    font-size:1rem;
    line-height:1.7;
    color:#5e6278;
    max-width:720px;
}

.page-subtitle .subtitle-main{
    display:block;
    font-size:2.1rem;
    font-weight:700;
    color:#23263a;
    margin-bottom:10px;
}

.page-subtitle .subtitle-desc{
    display:block;
    font-size:1rem;
    color:#62657b;
}

.topbar-user{
    display:flex;
    align-items:center;
    gap:14px;
    background:#fff;
    padding:12px 18px;
    border-radius:16px;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
}

.topbar-user small{

    display:block;

    color:#8d8d8d;

    font-size:.75rem;

}
.a-topbar h1{color:var(--pink);font-weight:800;margin:0;font-size:1.7rem}
.a-topbar p{color:var(--ink-soft);margin:.4rem 0 0;font-size:.92rem;max-width:680px}
.a-content{position:relative;z-index:1}
.stat-grid{display:grid;gap:1rem;margin-bottom:1rem}
.stat-grid.c3{grid-template-columns:repeat(3,1fr)}
.stat-grid.c4{grid-template-columns:repeat(4,1fr)}
.stat-grid.c5{grid-template-columns:repeat(5,1fr)}
.stat{background:#fff;border:2.3px solid #f4d6e4;border-radius:18px;box-shadow:0 8px 20px rgba(236,30,121,.05);padding:1.2rem 1.3rem}
.table-card{
    border-radius:8px;
    box-shadow:0 8px 20px rgba(236,30,121,.05);
    background:#fff;
    overflow:hidden;
    padding:0;
}
.stat .st-top{display:flex;align-items:center;gap:1rem}
.stat .st-ico{width:60px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex:none}
.stat .st-label{font-size:.90rem;font-weight:800}
.stat .st-val{font-weight:700;font-size:1.2rem;margin-top:.1rem}
.stat .st-sub{color:var(--muted);font-size:.78rem;margin-top:.35rem}
.stat.center{text-align:center}
.stat.center .st-ico{margin:0 auto .6rem}
.trend-up{color:var(--ok);font-weight:700;font-size:.8rem}
.tabs{display:flex;gap:1.4rem;border-bottom:1px solid var(--line);margin-bottom:1.3rem}
.tabs a{padding:.7rem .2rem;font-weight:700;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs a.active{color:var(--pink);border-color:var(--pink)}
.toolbar{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.toolbar .grow{flex:1}
.search{position:relative;flex:1;min-width:200px}
.search .bi{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--pink)}
.search .inp{padding-left:42px}
.info-box{background:#fff6fa;border-radius:14px;padding:1.1rem 1.2rem}
.info-box h6{color:var(--pink);font-weight:800;display:flex;gap:.5rem;align-items:center;margin:0 0 .6rem}
.info-box ol,.info-box ul{margin:0;padding-left:1.2rem;color:var(--ink-soft);font-size:.85rem}
.info-box li{margin:.25rem 0;font-size:.79rem;font-weight:600}
.prog{height:8px;border-radius:99px;background:#eee;overflow:hidden;margin:.5rem 0}
.prog > span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2bbf6b,#19a157)}
.prog.low > span{background:linear-gradient(90deg,#ffb43d,#f59218)}
.rank-row{display:grid;grid-template-columns:30px 150px 1fr 56px;align-items:center;gap:.6rem;padding:.35rem 0}
.rank-bar{height:10px;border-radius:99px;background:#efeafe}
.rank-bar > span{display:block;height:100%;border-radius:99px;background:#7c4dff}
.medal{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;color:#fff}
.m1{background:#f5b81a}.m2{background:#b9c0cc}.m3{background:#cd7f47}
.modal-back{position:fixed;inset:0;background:rgba(60,20,40,.45);display:flex;align-items:center;justify-content:center;z-index:200;padding:1rem}
.modal-card{background:#fff;border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.3);max-width:440px;width:100%;padding:2rem;text-align:center}
.modal-card .m-ico{width:84px;height:84px;border-radius:50%;background:#fde9f2;color:var(--pink);display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 1rem}
.modal-card h3{color:var(--pink);font-weight:800;margin:0 0 .3rem}
.modal-card p{color:var(--ink-soft);margin:0 0 1.4rem}
.modal-actions{display:flex;gap:.8rem;justify-content:center}

/* helpers */
.flex{display:flex}.between{justify-content:space-between}.center{align-items:center}
.gap{gap:.6rem}.gap-lg{gap:1rem}.wrap{flex-wrap:wrap}
.text-pink{color:var(--pink)}.text-muted{color:#3d3f45;font-weight:500;font-style: italic;}.fw7{font-size:13px;font-weight:950}.fw8{font-weight:950}.fw9{font-size:12px;font-weight:950}
.right{text-align:right}.small{font-size:.82rem;color:#000!important;font-weight:430}
.layout-2col{display:grid;grid-template-columns:1fr 330px;gap:1.2rem;align-items:start}
.layout-side{display:grid;grid-template-columns:1.4fr 1fr;gap:1.2rem;align-items:start}
.forgot-password{font-size:.75rem !important;color:#2f2c2c!important;font-style: italic;text-decoration: underline;font-weight:430;padding-top: 0px!important;padding-bottom: 0px!important;}
.daftar{font-size:13px;font-weight:950;text-decoration: underline}
/* ---- Section heading ---- */
.rs-heading{display:flex;align-items:center;gap:18px;justify-content:center}
.rs-heading h2{color:var(--pink);font-weight:800;letter-spacing:1px;margin:0;font-size:1.7rem;text-align:center;text-transform:uppercase}
.rs-heading .line{height:2px;flex:1;max-width:120px;background:linear-gradient(90deg,transparent,var(--pink))}
.rs-heading .line:last-child{background:linear-gradient(90deg,var(--pink),transparent)}
.rs-diamond{text-align:center;color:var(--pink);letter-spacing:6px;font-size:.8rem;margin:.1rem 0 1.2rem}
.rs-card{background:rgba(255,255,255,.93);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.6rem;position:relative;z-index:1}
.rs-card.soft{box-shadow:var(--shadow-sm)}
.card-title-pink{margin-top:0;padding:3px 3px;border-bottom:1px solid #f4d6e4;color:var(--pink);font-weight:700;margin:0 0 0rem;display:flex;align-items:center;gap:.5rem}

/* ============================================================
   HOMEPAGE IMPROVEMENTS - Wider Layout & Better Spacing
   ============================================================ */
.c-page{
  max-width:1400px;
  margin:0 auto;
  padding:2rem 3%;
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
}

/* ---- TENTANG CARD ---- */
.card{
  background:#fff;
  border-radius:20px;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
  padding:2.5rem 3rem;
  position:relative;
  z-index:1;
  border:1px solid rgba(255,255,255,.6);
}

.tentang-wrap{
  display:flex;
  gap:2rem;
  align-items:flex-start;
}

.t-ico{
  width:70px;
  height:70px;
  min-width:70px;
  background:linear-gradient(135deg, #ff4d9e 0%, #e10870 100%);
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.2rem;
  color:#fff;
  box-shadow:0 10px 30px rgba(236,30,121,.25);
}

.card-title{
  color:var(--pink);
  font-weight:800;
  font-size:1.4rem;
  margin:0 0 .8rem;
  letter-spacing:.5px;
}

.card-body{
  color:#6a636e;
  font-size:1.05rem;
  line-height:1.8;
  margin:0;
}

/* ---- KEUNGGULAN SECTION ---- */
.card .card-title{
  margin-bottom:0.2rem;
}

.keung-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
}

.keung-item{
  background:linear-gradient(135deg, rgba(255,200,220,.05) 0%, rgba(255,240,250,.1) 100%);
  padding:2rem;
  border-radius:16px;
  border:1px solid rgba(255,160,200,.2);
  transition:.3s;
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.keung-item:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 30px rgba(236,30,121,.12);
  border-color:rgba(236,30,121,.3);
  background:linear-gradient(135deg, rgba(255,200,220,.1) 0%, rgba(255,240,250,.15) 100%);
}

.keung-item h6{
  color:var(--pink);
  font-weight:700;
  font-size:1.1rem;
  margin:0 0 .1rem;
}

.keung-item p{
  color:#8c8696;
  font-size:.95rem;
  margin:0;
  line-height:1.5;
  color:#4e4848!important
}

/* ---- JAM & KONTAK ROW ---- */
.jk-row{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2rem;
}

.jk-card{
  background:linear-gradient(135deg, #fff9fc 0%, #fff 100%);
  border:1.5px solid #f3e2ec;
  border-radius:18px;
  padding:2.2rem 2.5rem;
  display:flex;
  gap:1.8rem;
  align-items:flex-start;
  transition:.25s;
  position:relative;
  z-index:1;
  overflow:hidden;
}

.jk-card::before{
  content:"";
  position:absolute;
  top:-50%;
  right:-20%;
  width:300px;
  height:300px;
  background:radial-gradient(circle, rgba(255,77,158,.06) 0%, transparent 70%);
  border-radius:50%;
  z-index:0;
}

.jk-card *{
  position:relative;
  z-index:1;
}

.jk-ico{
  width:70px;
  height:70px;
  min-width:70px;
  background:linear-gradient(135deg, rgba(255,77,158,.15) 0%, rgba(255,160,200,.1) 100%);
  border:2px solid rgba(236,30,121,.2);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--pink);
  font-size:2rem;
}

.jk-title{
  color:var(--pink);
  font-weight:800;
  font-size:1.1rem;
  margin-bottom:.6rem;
  letter-spacing:.5px;
}

.jk-body{
  color:#4e4848!important;
  font-size:.95rem;
  line-height:1.6;
}

.jk-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(236,30,121,.1);
  border-color:#f0c8d8;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .svc-grid,.pkg-grid{grid-template-columns:repeat(2,1fr)}
  .stat-grid.c4,.stat-grid.c5{grid-template-columns:repeat(2,1fr)}
  .layout-2col,.layout-side{grid-template-columns:1fr}
  .c-page{padding:1.8rem 2% 2rem;gap:1.8rem}
  .keung-grid{grid-template-columns:repeat(2,1fr)}
  .jk-row{grid-template-columns:1fr}
  .card{padding:2rem 2.2rem}
}

@media(max-width:860px){
  .a-sidebar{transform:translateX(-100%);transition:.25s}
  .a-sidebar.open{transform:none}
  .a-main{margin-left:0}
  .c-nav .inner{padding:.65rem 1.2rem}
  .c-nav .menu{display:none}
  .c-nav .burger{display:block}
  .c-nav .menu.open{display:flex;position:absolute;top:58px;left:0;right:0;flex-direction:column;background:rgba(255,255,255,.97);padding:1rem;box-shadow:var(--shadow);z-index:99}
  .c-page{padding:0 1.2rem 2rem;gap:1.4rem}
  .hero{flex-direction:column;text-align:center;padding:2rem 1.5rem;gap:1.5rem}
  .hero .h-logo .rs-logo{width:160px;height:160px}
  .keung-grid,.jk-row,.jk-grid,.grid2{grid-template-columns:1fr}
  .hero{flex-direction:column;padding:1.8rem 1.2rem;gap:1rem;min-height:auto}
  .hero .h-text h1{font-size:2.2rem}
  .card{padding:1.5rem 1.5rem}
  .tentang-wrap{gap:1.5rem;flex-direction:column;text-align:center}
  .t-ico{margin:0 auto}
  .jk-card{gap:1.2rem;padding:1.8rem 1.5rem}
}

@media(max-width:640px){
  .svc-grid,.pkg-grid,.stat-grid.c3,.stat-grid.c4,.stat-grid.c5{grid-template-columns:1fr}
  .slots{grid-template-columns:repeat(4,1fr)}
  .rs-heading h2{font-size:1.25rem}
  .hero .h-text h1{font-size:2rem}
  .hero .h-text h3{font-size:1.1rem}
  .c-page{padding:.8rem .8rem 1.5rem;gap:1.2rem}
  .a-main{padding:1.2rem}
  .card{padding:1.2rem 1rem}
  .card-title{font-size:1.15rem}
  .keung-item{padding:1.5rem;gap:.8rem}
  .keung-ico{width:50px;height:50px;font-size:1.4rem}
  .jk-card{padding:1.4rem;gap:1rem}
  .jk-ico{width:55px;height:55px;font-size:1.6rem}
}

/* ============================================================
   CUSTOMER UI ALIGNMENT WITH APPROVED MOCKUP
   ============================================================ */
body:not(.a-body){
  background:#fde7f1 url("../img/bg-pink.png") center top/cover fixed no-repeat;
  font-size:13px;
}
body:not(.a-body) .bg-layer{display:none}
body:not(.a-body) .rs-bg{min-height:100vh}

.c-nav{
  background:transparent;
  box-shadow:none;
  padding:.72rem 1.1rem 0;
}
.c-nav .inner{
  max-width:1120px;
  margin:0 auto;
  border:1px solid rgba(242,144,185,.34);
  border-radius:8px;
  background:rgba(255,255,255,.96);
  box-shadow:0 4px 16px rgba(236,30,121,.06);
  padding:.58rem .85rem;
}
.c-nav .brand{
  font-size:1.08rem;
  letter-spacing:.2px;
}
.c-nav .brand .rs-logo{width:34px!important;height:34px!important}
.c-nav .menu a{
  border-radius:5px;
  font-size:.76rem;
  padding:.38rem .66rem;
}
.c-nav .menu a.active{
  border-radius:5px;
  padding:.4rem .78rem;
  background:#f20572;
  box-shadow:none;
}
.c-nav .login-btn{
  border-radius:5px;
  font-size:.78rem;
  padding:.34rem .72rem;
  background:#fff;
}
.c-nav .user .u-btn{font-size:.78rem}
.c-nav .user .u-btn .av{width:26px;height:26px}
.c-nav .dropdown{
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 12px 30px rgba(220,60,130,.12);
}

.c-page{
  max-width:1120px;
  padding:1.18rem 1.1rem 1.5rem;
  gap:1rem;
}
.rs-heading{gap:12px}
.rs-heading h2{
  font-size:1.35rem;
  letter-spacing:.3px;
  line-height:1.2;
}
.rs-heading .line{max-width:82px}
.rs-diamond{
  color:#f20572;
  font-size:.7rem;
  letter-spacing:4px;
  margin:.1rem 0 .95rem;
}

.card,
.rs-card,
.info-card,
.svc,
.pkg,
.pkg-band,
.jk-card{
  border-radius:8px;
  border:1px solid rgba(242,144,185,.25);
  box-shadow:0 5px 18px rgba(236,30,121,.07);
}
.rs-card{padding:1.25rem}
.card{padding:1.3rem 1.55rem}
.info-card{padding:.82rem .95rem}
.card-title,
.card-title-pink{
  font-size:.92rem;
  letter-spacing:.2px;
  margin-bottom:.65rem;
}

.sec-body,
.sub-body{font-size:.78rem;line-height:1.65}
.card-body{font-size:.77rem;line-height:1.68;color:#4e4848!important}
.hero{
  /* Logo kiri, teks kanan — sesuai desain referensi */
  grid-template-columns:.55fr 1fr;
  grid-template-areas:"logo text";
  gap:1.5rem;
  min-height:220px;
  margin:0;
  padding:2rem 3rem 2rem 2rem;
  border-radius:10px;
  border:1px solid rgba(242,144,185,.28);
  background:#fde3ed url("../img/bg-hero.png") center/cover no-repeat;
  box-shadow:0 5px 18px rgba(236,30,121,.06);
  align-items:center;
}
.hero::before{display:none}
.hero .h-logo{
  grid-area:logo;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero .h-text{
  grid-area:text;
  text-align:right;
}
.hero .h-text h1{
  font-size:2.6rem;
  letter-spacing:.5px;
  margin-bottom:.3rem;
  font-weight:800;
  color:var(--pink);
}
.hero .h-text h3{
  font-size:1rem;
  color:#3a3340;
  margin-bottom:.5rem;
  font-weight:700;
}
.hero .h-text p{
  font-size:.82rem;
  color:#6a5f72;
  max-width:380px;
  margin:0 0 0 auto;
  line-height:1.65;
}
.hero .h-logo .rs-logo{
  width:160px;
  height:160px;
  filter:drop-shadow(0 8px 20px rgba(236,30,121,.15));
}

.tentang-wrap{gap:1.1rem}
.t-ico{
  width:54px;
  height:54px;
  min-width:54px;
  border-radius:50%;
  font-size:1.55rem;
}
.keung-grid{gap:.75rem}
.keung-item{
  flex-direction:row;
  align-items:center;
  gap:.75rem;
  padding:.9rem;
  border-radius:8px;
  background:#fff7fb;
  box-shadow:none;
}
.keung-item:hover{
  transform:none;
  box-shadow:0 6px 18px rgba(236,30,121,.08);
}
.keung-ico{
  width:35px;
  height:35px;
  border-radius:50%;
  font-size:1.15rem;
  flex:none;
}
.keung-item h6{font-size:.8rem;margin:0 .1rem}
.keung-item p{font-size:.68rem;line-height:1.45}
.jk-row{gap:.85rem}
.jk-card{
  padding:1rem 1.15rem;
  gap:.8rem;
  background:rgba(255,255,255,.95);
}
.jk-card::before{display:none}
.jk-ico{
  width:44px;
  height:44px;
  min-width:44px;
  border-radius:50%;
  font-size:1.1rem;
}
.jk-title{font-size:.8rem;margin-bottom:.2rem}
.jk-body{font-size:.72rem;line-height:1.55}

.auth-wrap{
  justify-content:flex-start;
  padding:2.1rem 1rem 1rem;
}
.auth-head{margin-bottom:1rem}
.rs-brand .name{
  font-size:1.68rem;
  letter-spacing:.4px;
}
.rs-brand .tagline{font-size:.78rem}
.rs-brand .sub{font-size:.64rem}
.auth-card{
  max-width:430px;
  border-radius:8px;
  padding:1.28rem 1.42rem;
  border:1px solid rgba(242,144,185,.32);
  box-shadow:0 8px 26px rgba(236,30,121,.09);
}
.auth-card .rs-heading h2{font-size:.92rem}
.field{margin-bottom:.78rem}
.field label,.lbl{font-size:.74rem;margin-bottom:.28rem}
.inp{
  border-radius:5px;
  padding:.62rem .78rem;
  font-size:.74rem;
}
.input-wrap .inp{padding-left:2.28rem}
.input-wrap .ico{
  left:.78rem;
  font-size:.88rem;
}
.input-wrap .eye{
  right:.55rem;
  font-size:.92rem;
}
.help{font-size:.65rem;margin-top:.25rem}
.btn{
  border-radius:5px;
  font-size:.73rem;
  padding:.6rem 1rem;
}
.btn-sm{font-size:.66rem;padding:.36rem .62rem}
.btn-lg{font-size:.78rem;padding:.68rem 1rem}
.banner{
  border-radius:6px;
  padding:.8rem .9rem;
  font-size:.72rem;
}
.banner .b-ico{font-size:1.35rem}
.alert-inline{
  border-radius:6px;
  font-size:.72rem;
  padding:.65rem .8rem;
}

.svc-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.78rem;
}
.svc{
  padding:.9rem;
  gap:.45rem;
  background:rgba(255,255,255,.96);
}
.svc .ico{
  width:42px;
  height:42px;
  font-size:1.08rem;
}
.svc h5{font-size:.78rem}
.svc .desc{font-size:.64rem;color:#4e4848!important;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden;}
.svc .price{font-size:.69rem}
.pkg-band{
  margin-top:.95rem;
  padding:.9rem;
  background:rgba(255,245,250,.92);
}
.pkg-band .rs-heading h2{font-size:1.05rem}
.pkg-grid{gap:.78rem}
.pkg{padding:.88rem}
.pkg .gi{
  width:34px;
  height:34px;
}
.pkg h6{font-size:.78rem}
.pkg ul{font-size:.66rem}

.layout-2col{
  grid-template-columns:minmax(0,1fr) 300px;
  gap:.9rem;
}
.layout-side{
  grid-template-columns:1.15fr .85fr;
  gap:1rem;
}
.rs-table thead th{
  font-size:.67rem;
  padding:.65rem .76rem;
}
.rs-table tbody td{
  font-size:.7rem;
  padding:.72rem .76rem;
}
.slots{
  grid-template-columns:repeat(6,1fr);
  gap:.42rem;
}
.slot{
  border-radius:6px;
  padding:.42rem .3rem;
  font-size:.66rem;
}
.slot small{font-size:.55rem}
.summary .row{
  font-size:.7rem;
  padding:.42rem 0;
}
.info-box{
  border-radius:8px;
  padding:.85rem .95rem;
}
.info-box h6{font-size:.90rem}
.info-box ol,
.info-box ul,
.info-box p{
  font-size:.66rem;
  line-height:1.55;
}
.tracker .step .dot{
  width:40px;
  height:40px;
  font-size:.95rem;
}
.tracker .step::before{top:20px}
.tracker .step h6{font-size:.68rem}
.tracker .step p{font-size:.58rem}

.account-profile-grid{
  display:grid;
  grid-template-columns:170px minmax(0,1fr);
  gap:1rem;
  align-items:start;
}
.account-photo-panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.55rem;
  text-align:center;
}
.account-photo{
  width:96px;
  height:96px;
  border-radius:50%;
  background:#fff center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--pink);
  font-size:2.2rem;
  border:2px solid var(--line);
  box-shadow:0 5px 16px rgba(236,30,121,.08);
}
.account-submit{
  min-width:154px;
  margin-left:auto;
  display:flex;
}
.password-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 230px;
  gap:1rem;
  align-items:start;
}
.password-tips{
  border:1px solid var(--line);
  border-radius:8px;
  padding:.85rem;
  background:#fff9fc;
}
.password-tips ol{
  margin:.45rem 0 .75rem;
  padding-left:1rem;
  color:var(--ink-soft);
  font-size:.66rem;
  line-height:1.55;
}
.password-tips .info-box{
  padding:.72rem;
  background:#fff;
}

.logout-preview{
  filter:blur(.2px);
}
.logout-muted{
  opacity:.46;
  min-height:300px;
}
.modal-back{
  background:rgba(250,204,226,.62);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.modal-card{
  border-radius:8px;
  border:1px solid rgba(242,144,185,.35);
  box-shadow:0 22px 70px rgba(125,35,75,.18);
}
.logout-card{max-width:430px}
.modal-card .m-ico{
  width:64px;
  height:64px;
  font-size:1.7rem;
}
.modal-card h3{font-size:1rem}
.modal-card p{font-size:.72rem}

.rs-foot{
  color:#706876;
  font-size:.68rem;
  padding:.85rem 0 .9rem;
}

@media(max-width:1024px){
  .c-page{max-width:900px}
  .layout-2col,
  .layout-side,
  .password-grid{grid-template-columns:1fr}
}

@media(max-width:860px){
  .c-nav{padding:.55rem .7rem 0}
  .c-nav .inner{padding:.5rem .65rem}
  .c-nav .menu.open{
    top:54px;
    left:.7rem;
    right:.7rem;
    border:1px solid var(--line);
    border-radius:8px;
  }
  .hero{grid-template-columns:1fr;padding:1.5rem;text-align:center}
  .svc-grid,.pkg-grid,.keung-grid,.jk-row{grid-template-columns:1fr}
  .account-profile-grid{grid-template-columns:1fr}
  .account-submit{width:100%;margin-left:0}
}

@media(max-width:640px){
  body:not(.a-body){font-size:12px;background-attachment:scroll}
  .c-page{padding:.85rem .75rem 1.1rem}
  .auth-wrap{padding:1.2rem .8rem .8rem}
  .auth-card{padding:1.05rem}
  .hero{min-height:0;padding:1.25rem}
  .hero .h-text h1{font-size:1.75rem}
  .hero .h-text h3{font-size:.82rem}
  .slots{grid-template-columns:repeat(3,1fr)}
  .modal-card{padding:1.4rem}
}

/* Final customer-home guard: keeps localhost from rendering the uncached wide layout. */
body:not(.a-body) .c-nav{
  background:transparent!important;
  box-shadow:none!important;
  padding:.72rem 1.1rem 0!important;
}
body:not(.a-body) .c-nav .inner{
  width:100%!important;
  max-width:1120px!important;
  margin:0 auto!important;
  border:1px solid rgba(242,144,185,.34)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 4px 16px rgba(236,30,121,.06)!important;
}
body:not(.a-body) .c-page{
  width:100%!important;
  max-width:1120px!important;
  margin:0 auto!important;
  padding:1.18rem 1.1rem 1.5rem!important;
  gap:.85rem!important;
}
body:not(.a-body) .hero{
  position:relative!important;
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  gap:1.4rem!important;
  min-height:0!important;
  margin:0!important;
  padding:1.5rem 2.5rem!important;
  border-radius:18px!important;
  border:1px solid rgba(242,144,185,.30)!important;
  background:linear-gradient(115deg,#f6a8c8 0%,#fbc4dc 42%,#fde6f0 100%)!important;
  box-shadow:0 10px 30px rgba(236,30,121,.10)!important;
  overflow:hidden!important;
}
/* diagonal sheen, like the reference */
body:not(.a-body) .hero::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(120deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 38%)!important;
  pointer-events:none!important;
  z-index:0!important;
}
body:not(.a-body) .hero > *{position:relative!important;z-index:1!important}

/* sparkles */
body:not(.a-body) .hero .hero-spark{position:absolute!important;z-index:1!important;line-height:0!important;pointer-events:none!important}
body:not(.a-body) .hero .hero-spark svg path{fill:#fff!important}
body:not(.a-body) .hero .sp-a{top:24px;left:18px}
body:not(.a-body) .hero .sp-b{top:30px;right:24%}
body:not(.a-body) .hero .sp-c{bottom:30px;left:18%}
body:not(.a-body) .hero .sp-d{bottom:46px;right:14%}
body:not(.a-body) .hero .sp-e{top:50%;left:8%}
body:not(.a-body) .hero .sp-f{top:54%;right:7%}

/* logo badge — glossy white circle */
body:not(.a-body) .hero .h-logo{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
body:not(.a-body) .hero .logo-badge{
  display:grid!important;
  place-items:center!important;
  width:110px!important;
  height:110px!important;
  padding:0px!important;
  border-radius:50%!important;
  background:
  radial-gradient(120% 120% at 30% 22%,
  #FCDCE8 0%,
  #F8C9DB 55%,
  #F5B8D1 100%)!important;
  box-shadow:
  0 18px 34px rgba(236,30,121,.22),
  0 4px 10px rgba(236,30,121,.14),
  inset 0 2px 4px rgba(255,255,255,.9)!important;
}

body:not(.a-body) .hero .logo-badge .rs-logo{
  width:100px!important;
  height:100px!important;
  border-radius:50%!important;
  object-fit:cover!important;
}

/* wordmark */
body:not(.a-body) .hero .h-text{
  text-align:center!important;
}
body:not(.a-body) .hero .h-text h1{
  font-size:2rem!important;
  font-weight:800!important;
  letter-spacing:.5px!important;
  line-height:1.02!important;
  color:#ec1078!important;
  margin:0 0 0rem!important;
}
body:not(.a-body) .hero .h-text h3{
  font-size:1.10rem!important;
  font-weight:700!important;
  color:#3a3340!important;
  margin:0 0 0rem!important;
}
body:not(.a-body) .hero .h-text p{
  font-size:.75rem!important;
  font-weight:500!important;
  color:#7c6f80!important;
  max-width:700px!important;
  margin:0 !important;
  line-height:1.6!important;
  color:#4e4848!important
}
body:not(.a-body) .c-page > .card,
body:not(.a-body) .jk-card,
body:not(.a-body) .svc,
body:not(.a-body) .pkg,
body:not(.a-body) .rs-card{
  background:rgba(255,255,255,.96)!important;
  border:1px solid rgba(242,144,185,.25)!important;
  border-radius:8px!important;
  box-shadow:0 5px 18px rgba(236,30,121,.07)!important;
}
body:not(.a-body) .c-page > .card{
  padding:1.18rem 1.35rem!important;
}
body:not(.a-body) .tentang-wrap{
  display:flex!important;
  gap:1rem!important;
  align-items:center!important;
}
body:not(.a-body) .t-ico,
body:not(.a-body) .keung-ico,
body:not(.a-body) .jk-ico{
  background:#f20572!important;
  color:#fff!important;
  border-radius:50%!important;
  box-shadow:0 8px 18px rgba(236,30,121,.18)!important;
}
body:not(.a-body) .t-ico{
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  font-size:1.35rem!important;
}
body:not(.a-body) .keung-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:.75rem!important;
}
body:not(.a-body) .keung-item{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:.72rem!important;
  padding:.82rem!important;
  background:#fff7fb!important;
  border:1px solid rgba(242,144,185,.22)!important;
  border-radius:8px!important;
  box-shadow:none!important;
}
body:not(.a-body) .jk-row{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:.85rem!important;
}

@media(max-width:860px){
  body:not(.a-body) .c-nav{padding:.55rem .7rem 0!important}
  body:not(.a-body) .c-page{padding:.85rem .75rem 1.1rem!important}
  body:not(.a-body) .hero{
    gap:1.1rem!important;
    padding:1.9rem 1.4rem!important;
  }
  body:not(.a-body) .hero .h-text h1{font-size:2.4rem!important}
  body:not(.a-body) .hero .h-text h3{font-size:1rem!important}
  body:not(.a-body) .hero .h-text p{font-size:.85rem!important}
  body:not(.a-body) .hero .h-text p br{display:none!important}
  body:not(.a-body) .hero .logo-badge{width:140px!important;height:140px!important;padding:11px!important}
  body:not(.a-body) .hero .logo-badge .rs-logo{width:118px!important;height:118px!important}
  body:not(.a-body) .hero .sp-e,
  body:not(.a-body) .hero .sp-f{display:none!important}
  body:not(.a-body) .keung-grid,
  body:not(.a-body) .jk-row{grid-template-columns:1fr!important}
  body:not(.a-body) .tentang-wrap{align-items:flex-start!important}
}

.btn-back-report{
    display:inline-flex;
    align-items:center;
    gap:.4rem;

    padding:.4rem 1rem;

    background:#fff;
    color:var(--pink);

    border:1px solid #f7c9dc;
    border-radius:6px;

    font-size:.80rem;
    font-weight:600;
    text-decoration:none;
}

.slot.full{
    background:#ffe5e5;
    border-color:#dc3545;
    cursor:not-allowed;
}

.slot.full small{
    color:#dc3545;
    font-weight:600;
}

.slot.full:hover{
    transform:none;
}

.modal-overlay{
    position:fixed;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.15);

    z-index:9999;
}

.logout-modal{
    width:480px;
    background:#fff;
    border-radius:24px;
    padding:40px;
    text-align:center;
    animation:popup .25s ease;
}

.logout-icon{
    width:90px;
    height:90px;
    margin:auto;
    border-radius:50%;
    background:#FDE8F2;
    color:#ec2d7c;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:42px;
    margin-bottom:20px;
}

.logout-actions{
    margin-top:28px;
    display:flex;
    justify-content:center;
    gap:16px;
}

@keyframes popup{
    from{
        transform:scale(.9);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}
.report-card-text{
    text-align:left;
}

.report-card-title{
    font-size:1.30rem;
    font-weight:800;
    margin-bottom:4px;
}
.page-title-card{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    max-width:1220px;

    padding:0px 24px;
    min-height:63px;
    margin-bottom:10px;

    border-radius:13px;
    overflow:hidden;

    background:#fff;

    box-shadow:
        0 8px 24px rgba(236,30,121,.08);
}

.page-title-card::before{
    content:"";
    position:absolute;

    top:-20%;
    right:-8%;

    width:55%;
    height:140%;

    background:radial-gradient(
        ellipse at right center,
        rgba(255,175,215,.85) 0%,
        rgba(255,200,228,.60) 30%,
        rgba(255,225,240,.35) 60%,
        rgba(255,245,250,.12) 82%,
        rgba(255,255,255,0) 100%
    );

    filter:blur(45px);

    pointer-events:none;
}
/* Header Judul Laporan */
.report-head{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:calc(100% - 190px);

    padding:0px 24px;
    min-height:63px;
    margin-bottom:18px;

    border-radius:13px;
    overflow:hidden;

    background:#fff;

    box-shadow:
        0 8px 24px rgba(236,30,121,.08);
}

.report-header{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:0px;
}

.report-export{
    width:160px;
    height:40px;
    margin-left:auto;
    margin-bottom:0px;

    flex-shrink:0;
}

/* Efek memudar di sisi kanan */
.report-head.blur::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:80%;
    height:100%;
    filter:blur(50px);

    background:radial-gradient(
    ellipse at right center,
    rgba(255,185,220,.60) 0%,
    rgba(255,210,232,.40) 65%,
    rgba(255,235,245,.20) 100%,
    rgba(255,255,255,0) 140%
);
    pointer-events:none;
}

/* Tambahan glow */
.report-head.blur::after{
    content:"";
    position:absolute;
    right:-120px;
    top:-70px;

    width:320px;
    height:220px;

    background:
        radial-gradient(circle,
            rgba(255,190,220,.35),
            transparent 72%);

    pointer-events:none;
}

/* Supaya isi berada di atas efek */
.report-head>*{
    position:relative;
    z-index:2;
}

.report-title{
    margin:0;
    font-size:1.5rem;
    font-weight:800;
    color:#ec1e79;
    line-height:1.2;
}

.report-back{
    padding:10px 18px;
}

.report-export{
    margin-top:10px;
    padding:10px 18px;
    align-self:flex-start;
}

.report-filter{
    display:flex;
    align-items:flex-end;
    gap:0px;
    flex-wrap:wrap;
    margin:22px 0 28px;
}

.filter-date{
    width:260px;
}

.filter-year{
    width:260px;
}

.filter-action{
    display:flex;
    align-items:flex-end;
}

.filter-action .btn{
    height:50px;
    min-width:120px;
}

.btn-filter{
    height:40px;
    min-width:120px;
    padding:0 22px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.report-filter .field{
    margin:0;
}

.report-filter label{
    display:block;
    margin-bottom:8px;
    font-weight:700;
}

.report-filter .inp{
    width:100%;
}

.report-stat-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-bottom:18px;
}

.report-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:22px;
}

.report-icon{
    width:68px;
    height:68px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
}

.report-icon.pink{
    background:#fde9f2;
    color:#ff2f7a;
}

.report-icon.blue{
    background:#eaf2ff;
    color:#3b82f6;
}

.report-icon.green{
    background:#e8fbef;
    color:#22c55e;
}

.report-icon.orange{
    background:#fff3df;
    color:#f59e0b;
}

.blue-text{
    color:#2563eb;
}

.green-text{
    color:#16a34a;
}

.orange-text{
    color:#f59e0b;
}

.red-text{
    color:#dc2626;
}

@media(max-width:1200px){
    .report-stat-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:700px){
    .report-stat-grid{
        grid-template-columns:1fr;
    }
}

.report-layout{
    display:grid;
    grid-template-columns:1.55fr .85fr;
    gap:18px;
    margin-top:16px;
}

.report-page{
    margin-top:-8px;
}

.report-left{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.report-right{
    display:flex;
    flex-direction:column;
    gap:22px;
    position:sticky;
    top:20px;
}

@media(max-width:1200px){
    .report-layout{
        grid-template-columns:1fr;
    }
}

.report-method{
    padding:18px 22px;
}

.method-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-top:12px;
}

.method-item{
    display:flex;
    align-items:center;
    gap:14px;
}

.method-icon{
    width:50px;
    height:50px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}

.method-icon.tunai{
    background:#fde9f2;
    color:#ff2f7a;
}

.method-icon.transfer{
    background:#eef4ff;
    color:#3b82f6;
}

.method-total{
    font-size:18px;
    font-weight:700;
    margin-top:1.2px;
}

@media(max-width:700px){
.method-grid{
grid-template-columns:1fr;
}
}

.money-input{
    display:flex;
    align-items:center;
    width:100%;
    height:40px;
    border:1px solid #f6bfd2;
    border-radius:4px;
    background:#fff;
    overflow:hidden;
}

.money-input span{
    width:58px;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff5f9;
    color:var(--pink);
    font-size:14px;
    font-weight:700;
    border-right:1px solid #f6bfd2;
    flex-shrink:0;
}

.money-input input{
    flex:1;
    height:100%;
    border:none;
    outline:none;
    padding:0 14px;
    font-size:14px;
    background:transparent;
    box-shadow:none;
}

.money-input input:focus{
    outline:none;
    box-shadow:none;
}

.money-input input::-webkit-outer-spin-button,
.money-input input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}

.money-input input[type=number]{
    -moz-appearance:textfield;
}

.report-right .field{
    margin-bottom:18px;
}

.report-save{
    margin-top:8px;
    height:48px;
    font-size:15px;
    font-weight:700;
}

.report-form-card{
    padding:22px;
}

.report-table-title{
    display:flex;
    align-items:center;
    gap:25px;

    padding:18px 22px;

    font-size:15px;
    font-weight:700;

    color:#EC1E79;

    background:linear-gradient(
        90deg,
        rgba(236,30,121,.08),
        rgba(236,30,121,.02)
    );

    border-bottom:2px solid #F7D5E5;

    letter-spacing:.2px;
}

.report-table-title i{
    font-size:20px;
    color:#EC1E79;
}

.report-expense-table{
    margin-top:12px;
}

.report-expense-table th{
    font-size:14px;
}

.report-expense-table td{
    vertical-align:middle;
}

.report-empty{
    text-align:center;
    color:#999;
    padding:28px;
}

.report-info{
    padding:22px;
}

.report-info-body{
    margin-top:16px;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.info-item{
    display:flex;
    gap:12px;
    align-items:flex-start;
    line-height:1.7;
    color:#4e4848!important;
    font-size:14px;
}

.info-number{
    width:24px;
    height:24px;
    border-radius:50%;
    background:#fde9f2;
    color:var(--pink);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:700;
    flex-shrink:0;
}

.report-filter{
    display:flex;
    align-items:flex-end;
    gap:16px;
}

.filter-date{
    margin-bottom:0;
}

.filter-date .inp{
    height:42px;
}

.filter-action{
    display:flex;
    align-items:center;
    height:42px;   /* Samakan dengan tinggi input tanggal */
}

.filter-action .btn{
    height:30px;
    padding:0 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-size:13px;
    border-radius:4px;
    line-height:1;
}

.report-bottom-back{
    display:flex;
    justify-content:flex-start;
    margin-top:-45px;
}

.btn-back-report{
    min-width:205px;
}

.subtitle-main{
    font-weight:650;
    color:#2d2d2d;
    font-size:20px;
    padding-left:18px;
}

.subtitle-desc{
    font-weight:500;
    color:#7b7b7b;
    font-size:14px;
    padding-left:18px;
}

.modal-confirm{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.35);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.modal-confirm.show{
    display:flex;
}

.modal-box{
    width:420px;
    background:#fff;
    border-radius:22px;
    padding:28px;
    text-align:center;
    box-shadow:0 20px 45px rgba(0,0,0,.15);
}

.modal-icon{
    width:72px;
    height:72px;
    margin:auto;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
}

.modal-icon.pink{
    background:#fde9f2;
    color:#ec1e79;
}

.modal-action{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:24px;
}

/* ===========================
   LAPORAN STOK PRODUK
=========================== */
.report-stock-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin:24px 0;
    flex-wrap:wrap;
}

.stock-search{
    position:relative;
    width:330px;
}

.stock-search i{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    color:#ff2b7a;
    font-size:15px;
}

.stock-search input{
    width:100%;
    height:40px;
    border:3px solid #f5c6d8;
    border-radius:10px;
    padding:0 18px 0 46px;
    background:#fff;
    outline:none;
}

.report-stock-toolbar select{
    width:240px;
}

.stock-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.stock-item{
    background:#fff;
    border:3px solid #f6d4e3;
    border-radius:18px;
    padding:18px 20px;
    box-shadow:0 8px 20px rgba(236,30,121,.05);
    min-height:220px;      /* sebelumnya ±300px */
}

.stock-top{
    display:flex;
    gap:16px;
    align-items:center;
}

.stock-icon{
    width:64px;
    height:64px;
    border-radius:16px;
    font-size:24px;
}

.stock-info{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.stock-info h4{
    font-size:17px;
    margin-bottom:8px;
}

.stock-info div{
    font-size:15px;
    line-height:1.6;
}

.stock-progress{
    margin-top:16px;
}

.stock-bar{
    height:9px;
    background:#ededed;
    border-radius:30px;
}

.stock-bar span{
    border-radius:30px;
}

.stock-progress strong{
    display:block;
    text-align:right;
    margin-top:5px;
    color:#6c7293;
}

.stock-footer{
    margin-top:-5px;
}

.stock-badge{
    padding:6px 14px;
    font-size:13px;
}

.stock-badge.aman{
    background:#e8f8ed;
    color:#16964a;
}

.stock-badge.menipis{
    background:#fff4df;
    color:#d08400;
}

.stock-badge.habis{
    background:#ffe6e6;
    color:#d33;
}

.stock-photo{
    width:92px;
    height:92px;
    border-radius:18px;
    background:#fff;
    overflow:hidden;
    border:2px solid #f3dbe5;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-shrink:0;
}

.stock-photo img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.stock-no-photo{
    font-size:34px;
    color:#d4d4d4;
}

.stock-percent{
    margin-top:8px;
    text-align:right;
    font-size:14px;
    font-weight:700;
    color:#6c7293;
}

.product-cell{
    display:flex;
    align-items:center;
    gap:14px;
}

.product-image{
    width:56px;
    height:56px;
    border-radius:14px;
    background:#fff;
    border:1px solid #f6d8e5;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    flex-shrink:0;
}

.product-image img{
    width:90%;
    height:90%;
    object-fit:contain;
}

.product-name{
    font-weight:700;
    color:#23243a;
}

/* ===========================
   FORM PRODUK BARU
=========================== */
.produk-form-layout{
    display:grid;
    grid-template-columns:2fr 380px;
    gap:28px;
    align-items:start;
}

.produk-form-left{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.produk-form-right{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.info-list{
    margin:12px 0 0;
    padding-left:20px;
}

.info-list li{
    font-size:13px;
    margin-bottom:10px;
    line-height:1.5;
    font-weight:500;
}

.sample-list{
    margin:12px 0 0;
    padding-left:20px;
}

.sample-list li{
    font-size:13px;
    margin-bottom:10px;
    line-height:1.5;
    font-weight:500;
}

@media(max-width:1200px){
.produk-form-layout{
grid-template-columns:1fr;
}
}

.produk-info-grid{
    display:grid;
    grid-template-columns:260px 1fr;
    gap:40px;
    margin-top:20px;
}

.produk-upload{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.upload-preview{
    width:220px;
    height:170px;
    border:2px dashed #f6bdd5;
    border-radius:18px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:15px 0;
    overflow:hidden;
}

.upload-preview img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.upload-preview i{
    font-size:70px;
    color:#f38ab8;
}

.status-radio{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:5px;
}

.status-radio label{
    display:flex;
    align-items:center;
    gap:5px;
    font-weight:700;
}

/* ===========================
   CARD INFORMASI STOK
=========================== */
.stok-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px 28px;
    margin-top:18px;
}

.stok-grid .field{
    margin:0;
}

.stok-grid label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
}

.suffix-input{
    position:relative;
    display:flex;
}

.suffix-input .inp{
    padding-right:62px;
}

.sfx{
    position:absolute;
    top:0;
    right:0;
    bottom:0;

    width:58px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#FFEAF2;
    color:#FF2F73;

    font-weight:700;
    font-size:.9rem;

    border-left:1px solid #F8C7D8;
    border-radius:0 12px 12px 0;

    box-sizing:border-box;
    pointer-events:none;
}

.stok-grid select.inp{
    padding-right:42px;
}

@media(max-width:768px){
    .stok-grid{
        grid-template-columns:1fr;
    }
}

/* ============================
   TAKARAN LAYANAN
============================ */

.takaran-header,
.takaran-row{

    display:grid;

    grid-template-columns:
        2fr
        1.3fr
        1fr
        90px;

    gap:18px;

    align-items:center;

}

.takaran-header{
    font-size:14px;

    font-weight:700;

    margin-bottom:8px;

    color:#24304b;

}

.takaran-row{
    margin-bottom:15px;
}

.center{
    text-align:center;
}

#btnTambahTakaran{
    margin-top:10px;
}

.produk-header{
    margin-bottom:15px;
}

.produk-title{
    text-align:center;
    margin-top:0px;
    margin-bottom:20px;
}

.produk-title h2{
    color:#ff2f73;
    font-size:20px;
    font-weight:700;
    margin-bottom:8px;
}

.title-divider{

    width:120px;

    height:3px;

    background:#ffd0df;

    margin:auto;

    border-radius:20px;

    position:relative;

}

.title-divider::after{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:#ff5b95;

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

}

.produk-wrapper{
    padding:0;
    background:transparent;
    border:none;
    box-shadow:none;
}

.produk-page{
    margin-top:20px;
}

.stock-report-card{
    background:#fff;
    border:2px solid #f8c9d8;
    border-radius:15px;

    padding:0px 20px 20px;
}

.dashboard-card{
    position:relative;
    overflow:hidden;
    min-height:150px;
}

.dashboard-head{
    display:flex;
    align-items:flex-start;
    gap:16px;
}

.dashboard-icon{
    width:50px;
    height:50px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.4rem;
}

.dashboard-icon.pink{
    background:#ffe7f1;
    color:#ff2f73;
}

.dashboard-desc{
  font-style: italic;
    margin-top:3px;
    color:#2b2a2a;
    font-size:.92rem;
    font-weight:400;
}

.dashboard-footer{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:3px;
}

.growth{
    color:#18b24a;
    font-weight:700;
}

.compare{

    color:#666;

    font-size:.82rem;

}

.booking-warning{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:18px;
    padding:6px 12px;
    background:#fff3d9;
    color:#f59b00;
    border-radius:8px;
    font-size:.7rem;
    font-weight:600;
}

.btn-booking{
    z-index:10;
    position:absolute;
    right:24px;
    margin-top:20px;          /* sebelumnya 22px */
    padding:6px 16px;
    font-size:.70rem;     /* tulisan lebih kecil */
    font-weight:600;
    border:2px solid #ffc1d8;
    border-radius:5px;
    color:#ff2f73;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:6px;
    line-height:1;
}

.btn-booking:hover{

    background:#fff3f8;

}

.dashboard-card::after{

    content:"";

    position:absolute;

    right:0;

    bottom:0;

    width:120px;

    height:70px;

    background:url("../img/card-line.png") no-repeat;

    background-size:contain;

    opacity:.18;

}

.table-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px 26px;
    border-bottom:1px solid #f6dbe7;
    background:#fff;
}

.toolbar-right{
    display:flex;
    align-items:center;
    gap:12px;
}

.toolbar-filter{
    display:flex;
    align-items:center;
    gap:12px;
}

.table-title{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--pink);
    font-size:1rem;
    font-weight:700;
    line-height:1;
}

.table-title i{
    font-size:1.3rem;
}

.table-title span{
    position:relative;
}

.table-title::after{
    display:none;
}

/* SEARCH */

.search-box{
    position:relative;
}

.search-box input{
    width:230px;
    height:38px;

    padding:0 16px 0 40px;

    border:1.8px solid #f6d8e5;
    border-radius:5px;

    font-family:'Poppins',sans-serif;
    font-size:11px;
    font-weight:500;
    color:#4b5563;

    transition:.25s;
    font-style: italic;
}

.search-box input::placeholder{
    color:#5f667b;
    font-size:11px;
    font-weight:500;
}

.search-box input:focus{
    border-color:#ec1e79;
    box-shadow:0 0 0 3px rgba(236,30,121,.08);
}

.search-box i{
    position:absolute;
    left:15px;
    top:50%;
    transform:translateY(-50%);

    color:#ec1e79;
    font-size:15px;
}

/* FILTER */

.toolbar-filter select{

    width:180px;
    height:38px;

    padding:0 36px 0 14px;

    border:1.8px solid #f6d8e5;
    border-radius:5px;

    font-family:'Poppins',sans-serif;
    font-size:11px;
    font-weight:500;
    color:#5f667b;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background:#fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' stroke='%23ec1e79' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 14px center;

    cursor:pointer;
}

.toolbar-filter select:focus{
    border-color:#ec1e79;
    box-shadow:0 0 0 3px rgba(236,30,121,.08);
}

.rank-item{
    display:flex;
    gap:18px;
    align-items:flex-start;

    padding:22px 24px;
    border-bottom:1px solid #f3dce5;
}

.rank-item:last-child{
    border-bottom:none;
}

.rank-no{
    width:38px;
    height:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    font-weight:700;
    color:#fff;
    flex-shrink:0;
}

.rank-content{
    flex:1;
}

.rank-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:8px;
}

.rank-name{
    font-size:18px;
    font-weight:700;
    color:#172b4d;
    line-height:1.2;
}

.rank-category{
    font-size:13px;
    color:#8b8b8b;
    margin-top:2px;
}

.rank-percent{
    font-size:18px;
    font-weight:700;
    color:#ff3d86;
}

.rank-info{
    display:flex;
    gap:22px;
    margin:10px 0 12px;
    flex-wrap:wrap;
}

.rank-stat{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    color:#666;
}

.rank-stat i{
    font-size:14px;
    color:#666;
}

.rank-progress{
    height:8px;
    border-radius:999px;
    background:#ededed;
    overflow:hidden;
}

.rank-progress-fill{
    height:100%;
    border-radius:999px;
}

/* =========================================================
   CARD RANKING
========================================================= */
.report-ranking{
    width:100%;
    padding:0 !important;
    overflow:hidden;
}

/* =========================================================
   JUDUL TABEL
========================================================= */
.report-ranking .report-table-title{
    display:flex;
    align-items:center;
    gap:14px;
    min-height:50px;
    padding:18px 28px;
    font-size:15px;
    font-weight:700;
    color:#ed1b72;
    background:#fff;
    border-bottom:1px solid #f4d2e1;
    box-sizing:border-box;
}

.report-ranking .report-table-title i{
    flex:none;
    font-size:20px;
    color:#ff1f78;
}

/* =========================================================
   TABEL
========================================================= */
.report-ranking .ranking-table{
    width:100%;
    table-layout:fixed;
    border-collapse:collapse;
    border-spacing:0;
    margin:0;
}

/* =========================================================
   HEADER
========================================================= */
.report-ranking .ranking-table thead th{
    height:50px;
    padding:13px 14px;
    background:#fff6fa;
    color:#ed1b72;
    font-size:14px;
    font-weight:700;
    line-height:1.3;
    vertical-align:middle;
    border-bottom:1px solid #f3d4e1;
    box-sizing:border-box;
}

/* =========================================================
   ISI TABEL TOTAL
========================================================= */
.report-ranking .ranking-table tbody td{
    height:50px;
    padding:13px 14px;
    font-size:13px;
    font-weight:700;
    color:#25243a;
    line-height:1.4;
    vertical-align:middle;
    border-bottom:1px solid #f2dce5;
    box-sizing:border-box;
}

/* =========================================================
   LEBAR KOLOM + ALIGNMENT
========================================================= */
/* NO */
.report-ranking .ranking-table th:nth-child(1),
.report-ranking .ranking-table td:nth-child(1){
    width:70px;
    text-align:center;
}

/* NAMA LAYANAN */
.report-ranking .ranking-table th:nth-child(2),
.report-ranking .ranking-table td:nth-child(2){
    width:215px;
    text-align:left;
}

/* KATEGORI */
.report-ranking .ranking-table th:nth-child(3),
.report-ranking .ranking-table td:nth-child(3){
    width:115px;
    text-align:left;
}

/* JUMLAH DIGUNAKAN */
.report-ranking .ranking-table th:nth-child(4),
.report-ranking .ranking-table td:nth-child(4){
    width:330px;
    text-align:left;
}

/* TOTAL PENDAPATAN */
.report-ranking .ranking-table th:nth-child(5),
.report-ranking .ranking-table td:nth-child(5){
    width:190px;
    text-align:center !important;
}

/* RATA-RATA */
.report-ranking .ranking-table th:nth-child(6),
.report-ranking .ranking-table td:nth-child(6){
    width:135px;
    text-align:center;
};

/* PERSENTASE */
.report-ranking .ranking-table th:nth-child(7),
.report-ranking .ranking-table td:nth-child(7){
    width:100px;
    text-align:center;
}

/* =========================================================
   RANKING / MEDAL
========================================================= */
.rank-col{
    text-align:center !important;
}

.rank-medal{
    position:relative;
    width:30px;
    height:38px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
}

.rank-medal i{
    position:absolute;
    font-size:35px;
    line-height:2;
}

.rank-medal span{
    position:relative;
    z-index:2;
    margin-top:-5px;
    font-size:13px;
    font-weight:700;
    color:#000!important
}

/* GOLD */
.rank-medal.gold i{
    color:#f4b41a;
}

/* SILVER */
.rank-medal.silver i{
    color:#b8c2d1;
}

/* BRONZE */
.rank-medal.bronze i{
    color:#de8740;
}

/* RANKING 4, 5, 6, dst */
.rank-number{
    font-size:13px;
    font-weight:700;
    color:#000;
    text-align:center;
}

/* =========================================================
   NAMA LAYANAN
========================================================= */
.rank-service{
    font-size:13px;
    font-weight:700;
    color:#16244a;
    line-height:1.35;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* =========================================================
   KATEGORI
========================================================= */
.badge-kategori{
    display:inline-block;
    font-size:13px;
    font-weight:600;
    color:#25243a;
    white-space:nowrap;
}

/* =========================================================
   JUMLAH DIGUNAKAN
========================================================= */
.usage-col{
    text-align:left !important;
}

.usage-cell{
    width:100%;
    display:flex;
    align-items:center;
    gap:14px;
}

.usage-value{
    flex:none;
    width:20px;
    font-size:13px;
    font-weight:700;
    color:#25243a;
    text-align:right;
}


/* PROGRESS BAR */
.usage-bar{
    flex:1;
    min-width:0px !important;
    height:8px;
    background:#e9e9e9;
    border-radius:20px;
    overflow:hidden;
}

.usage-fill{
    height:100%;
    min-width:0;
    background:#6d4cff;
    border-radius:20px;
    transition:width .3s ease;
}


/* =========================================================
   TOTAL PENDAPATAN
========================================================= */
.total-col{
    text-align:right !important;
}

.pink-text{
    font-size:13px;
    font-weight:700;
    color:#ed1b72 !important;
    white-space:nowrap;
}

/* =========================================================
   RATA-RATA
========================================================= */
.average-col{
    font-size:13px !important;
    font-weight:700 !important;
    color:#25243a !important;
    text-align:center !important;
    white-space:nowrap;
}

/* =========================================================
   PERSENTASE
========================================================= */
.percentage-col{
    text-align:center !important;
    font-size:13px !important;
    color:#25243a !important;
    white-space:nowrap;
}

.percentage-col b{
    font-weight:700;
}


/* =========================================================
   BARIS TERAKHIR
========================================================= */
.report-ranking .ranking-table tbody tr:last-child td{
    border-bottom:none;
}


/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:1200px){

    .report-ranking{
        overflow-x:auto !important;
    }

    .report-ranking .ranking-table{
        min-width:1250px;
    }

}


/* =========================================================
   TABLET / LAYAR KECIL
========================================================= */

@media (max-width:768px){

    .report-ranking .report-table-title{
        min-height:60px;

        padding:16px 20px;

        font-size:17px;
    }

    .report-ranking .report-table-title i{
        font-size:22px;
    }

}

/* ===========================
   LAYANAN ADMIN
=========================== */
.layanan-list-card{
    padding:0;
    overflow:hidden;
}

.layanan-toolbar{
    padding:18px 22px;
}

.layanan-filter-form{
    margin:0;
}

.layanan-filter-form .search-box input{
    width:260px;
    height:44px;
    border-color:#f7c5da;
    border-radius:8px;
}

.layanan-filter-form select{
    width:190px;
    height:44px;
    border-color:#f7c5da;
    border-radius:8px;
}

.service-design-page{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.service-title-card{
    min-height:84px;
    width:100%;
    display:flex;
    align-items:center;
    padding:0 34px;
    border-radius:0 0 16px 16px;
    background:rgba(255,255,255,.78);
    box-shadow:0 8px 24px rgba(236,30,121,.05);
    overflow:hidden;
    position:relative;
}

.service-title-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(100deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.5) 54%,rgba(255,221,236,.8) 100%);
    pointer-events:none;
}

.service-title-card h1{
    position:relative;
    z-index:1;
    margin:0;
    color:var(--pink);
    font-size:2rem;
    font-weight:800;
}

.service-back-btn{
    width:max-content;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-left:12px;
    padding:0 24px;
    border:2px solid #f7aac8;
    border-radius:8px;
    color:var(--pink);
    background:rgba(255,255,255,.72);
    font-weight:800;
}

.service-back-btn i{
    font-size:1.2rem;
}

.service-design-heading{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin:-4px 0 8px;
}

.service-design-heading span{
    width:64px;
    height:2px;
    background:linear-gradient(90deg,transparent,#ffc1d8);
}

.service-design-heading span:last-child{
    background:linear-gradient(90deg,#ffc1d8,transparent);
}

.service-design-heading h2{
    margin:0;
    color:var(--pink);
    font-size:1.35rem;
    font-weight:800;
    letter-spacing:.3px;
}

.service-design-form{
    margin-bottom:15px;
}

.service-design-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 420px;
    gap:26px;
    align-items:start;
}

.service-main-card,
.service-side-card{
    background:rgba(255,255,255,.92);
    border:1px solid rgba(255,255,255,.9);
    border-radius:16px;
    box-shadow:0 12px 30px rgba(236,30,121,.07);
}

.service-main-card{
    padding:28px 32px;
}

.service-field-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px 30px;
}

.service-field-grid .field,
.service-main-card > .field{
    margin-bottom:24px;
}

.service-main-card label,
.service-side-card h3{
    color:#1f2b4d;
}

.status-check-group{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-height:40px;
    justify-content:center;
}

.status-check-group label{
    display:flex;
    align-items:center;
    gap:9px;
    margin:0;
    color:#24324d;
    font-size:.70rem;
    font-weight:700;
    cursor:pointer;
}

.status-check-group input,
.service-together-option input,
.service-mode-card input{
    width:13px;
    height:13px;
    accent-color:var(--pink);
}

.service-price-mode{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin:2px 0 20px;
}

.service-mode-card{
    display:flex;
    align-items:flex-start;
    gap:12px;
    min-height:68px;
    margin:0;
    padding:10px 13px;
    border:2px solid #f8d3e4;
    border-radius:10px;
    background:#fff;
    cursor:pointer;
    transition:.18s ease;
}

.service-mode-card:has(input:checked){
    border-color:var(--pink);
    background:#fff3f8;
    box-shadow:0 8px 18px rgba(236,30,121,.08);
}

.service-mode-card b{
    display:block;
    color:#1f2b4d;
    font-size:.80rem;
    margin-bottom:3px;
}

.service-mode-card small{
    display:block;
    color:#737994;
    font-size:.60rem;
    line-height:1.5;
    font-weight:600;
    font-style:italic;
}

.service-base-price{
    padding:14px 16px;
    border:1.6px solid #f7d5e4;
    border-radius:10px;
    background:#fff8fc;
}

.service-base-price.is-dynamic{
    border-color:#f5a8c7;
    background:#fff2f8;
}

.suffix-input .sfx.prefix{
    left:0;
    right:auto;
    border-left:0;
    border-right:1px solid #F8C7D8;
    border-radius:12px 0 0 12px;
}

.suffix-input .sfx.prefix + .inp{
    padding-left:72px;
    padding-right:16px;
}

.service-products-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:10px;
}

.service-products-head .lbl{
    margin:0;
    color:#1f2b4d;
}
.service-products-head .dess{
    margin:0;
    color:#737994;
    font-size:.73rem;
    font-weight:550;
    font-style:italic;
}

.service-product-table{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.service-product-row{
    display:grid;
    grid-template-columns:minmax(180px,1.3fr) minmax(150px,.8fr) 74px;
    gap:18px;
    align-items:center;
}

.service-product-header{
    min-height:40px;
    gap:0;
    border-radius:8px;
    background:#fff2f8;
    color:var(--pink);
    font-weight:800;
    font-size:.75rem;
    text-align:left;
}

.service-product-header div{
    padding:0 10px;
}

.service-icon-btn{
    width:46px;
    height:46px;
    padding:0;
    justify-self:center;
    border-radius:8px;
}

.service-add-product{
    margin-top:16px;
    min-width:158px;
    height:39px;
    border-color:#f7aac8;
    border-radius:8px;
}

.service-side-panel{
    display:flex;
    flex-direction:column;
    gap:16px;
    position:sticky;
    top:18px;
}

.service-side-card{
    padding:24px;
}

.service-side-card h3{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 3px;
    font-size:13px;
    font-weight:800;
}

.service-side-card p{
    margin:0 0 15px;
    color:#4d5878;
    font-size:.65rem;
    line-height:1.8;
    font-weight:650;
    font-style: italic;
}

.service-side-search{
    position:relative;
    margin-bottom:16px;
}

.service-side-search i{
    position:absolute;
    left:17px;
    top:45%;
    transform:translateY(-50%);
    color:var(--pink);
    font-size:1rem;
    z-index:1;
}

.service-side-search .inp{
    padding-left:50px;
}

.service-together-list{
    display:flex;
    flex-direction:column;
    gap:6px;
    max-height:300px;
    overflow:auto;
    padding-right:6px;
}

.service-together-option{
    display:flex;
    align-items:center;
    gap:10px;
    color:#1f2b4d;
    font-size:.70rem;
    font-weight:750;
    cursor:pointer;
}
.harga-input-group{
    display:flex;
    align-items:center;
    width:170px;
    height:40px;
    border:2px solid #f5b6d0;
    border-radius:8px;
    overflow:hidden;
    background:#fff;
}

.harga-prefix{
    width:48px;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;

    background:#fff5fa;
    color:#ec4b93;
    font-weight:700;
    font-size:15px;

    border-right:2px solid #f5b6d0;
}

.harga-final{
    flex:1;
    border:none;
    outline:none;
    background:transparent;

    padding:0 14px;

    font-size:14px;
    font-weight:750;
    color:#333;

    text-align:left;
}

.harga-final::-webkit-outer-spin-button,
.harga-final::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}

.harga-final{
    appearance:textfield;
}

.service-side-warning{
    margin-top:10px;
    color:var(--pink);
    font-size:.70rem;
    font-weight:800;
    font-style: italic;
}

.service-info-card ol{
    margin:10px 0 0;
    padding-left:18px;
    color:#24324d;
    font-size:.75rem;
    line-height:1.8;
    font-weight:750;
}
.service-info-card h3{
    font-size:.85rem;
    margin-bottom: 1px;
}

.service-info-card li{
    margin:3px 0;
}

.service-form-actions{
    display:grid;
    grid-template-columns:.95fr 1.35fr;
    gap:18px;
}

.service-form-actions .btn{
    height:35px;
    border-radius:8px;
    font-size:.75rem;
}

@media(max-width:1240px){
    .service-design-layout{
        grid-template-columns:1fr;
    }

    .service-side-panel{
        position:static;
    }
}

@media(max-width:820px){
    .layanan-toolbar,
    .toolbar-right,
    .layanan-filter-form{
        align-items:stretch;
        flex-direction:column;
    }

    .layanan-filter-form .search-box input,
    .layanan-filter-form select,
    .toolbar-right .btn-pink{
        width:100%;
    }

    .service-title-card{
        min-height:68px;
        padding:0 20px;
    }

    .service-title-card h1{
        font-size:1.45rem;
    }

    .service-main-card,
    .service-side-card{
        padding:20px;
    }

    .service-field-grid,
    .service-price-mode,
    .service-product-row,
    .service-form-actions{
        grid-template-columns:1fr;
    }

    .service-product-header{
        display:none;
    }

    .service-icon-btn{
        width:100%;
    }
}

/* Badge Kategori */
.badge{
    display:inline-flex;
    min-width:0px;
    padding:0px;
    border: none;
    border-radius: 0;
    font-size:.70rem;
    font-weight:700;
    background: transparent !important;
}

/* Rambut */
.kat-rambut{
    background:#E8F7EC;
    color:#16A34A;
}

/* Wajah */
.kat-wajah{
    background:#FFEAF3;
    color:#EC4899;
}

/* Tubuh */
.kat-tubuh{
    background:#FFF4E5;
    color:#F59E0B;
}

/* Kuku & Tangan */
.kat-kuku{
    background:#EEF2FF;
    color:#4F46E5;
}

/* Lainnya */
.kat-lainnya{
    background:#F3F4F6;
    color:#6B7280;
}

/* ==============================
   TABEL RINCIAN LAYANAN BOOKING
   ============================== */

.booking-detail-table-wrap {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.booking-detail-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0;
}

/* Semua sel */
.booking-detail-table th,
.booking-detail-table td {
    padding: 16px 24px;
    vertical-align: middle;
}

/* ==============================
   HEADER
   ============================== */
.booking-detail-table thead th {
    background: #fff5f9;
    color: #ec1e79;
    font-weight: 800;
    font-size: .78rem;
    border-bottom: 1px solid var(--line);
}

/* Layanan → kiri */
.booking-detail-table thead th:nth-child(1) {
    text-align: left;
}

/* Produk → tengah */
.booking-detail-table thead th:nth-child(2) {
    text-align: center;
}

/* Harga → kanan */
.booking-detail-table thead th:nth-child(3) {
    text-align: right;
}

/* ==============================
   ISI TABEL
   ============================== */

.booking-detail-table tbody td {
    color: #2f2a2a;
    font-size: .75rem;
    border-bottom: 0;
}

/* Layanan → kiri */
.booking-detail-table tbody td:nth-child(1) {
    text-align: left;
}

/* Produk → tengah */
.booking-detail-table tbody td:nth-child(2) {
    text-align: center;
    font-weight: 600;
}

/* Harga → kanan */
.booking-detail-table tbody td:nth-child(3) {
    text-align: right;
    white-space: nowrap;
}

/* ==============================
   POSISI KOLOM
   ============================== */

/* Header & isi Layanan */
.booking-detail-table th:nth-child(1),
.booking-detail-table td:nth-child(1) {
    text-align: left;
    padding-left: 80px;
}

/* Header & isi Produk */
.booking-detail-table th:nth-child(2),
.booking-detail-table td:nth-child(2) {
    text-align: center;
}

/* Header & isi Harga */
.booking-detail-table th:nth-child(3){
    text-align: right;
    padding-right: 95px;
}
.booking-detail-table td:nth-child(3) {
    text-align: right;
    padding-right: 85px;
}
/* ==============================
   MOBILE
   ============================== */

@media (max-width: 600px) {

    .booking-detail-table th,
    .booking-detail-table td {
        padding: 13px 12px;
        font-size: .80rem;
    }
}

/* =================================
   UPLOAD REFERENSI GAMBAR
   ================================= */

.reference-upload {
    border: 2px dashed var(--line);
    border-radius: 14px;
    padding: 1.4rem;
    text-align: center;
    background: #fff;
    transition: .2s ease;
}

.reference-upload.has-image {
    border-color: #ec1e79;
    background: #fffafd;
}

.reference-preview {
    width: 90px;
    height: 90px;
    margin: 0 auto .7rem;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--line);
    font-size: 2.5rem;
    background: #fff;
}

.reference-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.reference-file-name {
    margin-bottom: .7rem;
    font-size: .85rem;
    color: #4e4848;
    word-break: break-word;
}

.reference-button {
    cursor: pointer;
}

.reference-format {
    margin-top: .6rem;
}

.account-photo-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex-wrap: nowrap;
    margin-top: 10px;
}

.account-photo-actions .btn {
    padding: 6px 5px;
    font-size: .60rem;
    min-height: 26px;
}

.account-photo-actions .btn i {
    font-size: .75rem;
}

.btn-danger-soft {
    background: #fff0f0;
    color: #d9363e;
    border: 1px solid #f3b8bd;
}

.btn-danger-soft:hover {
    background: #d9363e;
    color: #fff;
    border-color: #d9363e;
}
/* =================================
   MODAL HAPUS FOTO PROFIL
   ================================= */

.delete-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(43, 31, 37, .55);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity .2s ease, visibility .2s ease;
}

.delete-modal.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.delete-modal-box {
    width: min(420px, calc(100% - 32px));
    background: #fff;

    border-radius: 18px;
    padding: 28px 30px 24px;

    text-align: center;

    box-shadow: 0 18px 50px rgba(0, 0, 0, .18);

    transform: translateY(10px) scale(.97);
    transition: transform .2s ease;
}

.delete-modal.show .delete-modal-box {
    transform: translateY(0) scale(1);
}

/* Icon */
.delete-modal-icon {
    width: 58px;
    height: 58px;

    margin: 0 auto 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #fff0f1;
    color: #d9363e;

    font-size: 1.5rem;
}

.delete-modal-box h3 {
    margin: 0 0 8px;

    color: #332d2f;
    font-size: 1.15rem;
    font-weight: 800;
}

.delete-modal-box p {
    margin: 0 auto;

    max-width: 330px;

    color: #6f6669;
    font-size: .9rem;
    line-height: 1.6;
}

/* =================================
   TOMBOL MODAL
   ================================= */

.delete-modal-actions {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-top: 22px;
}

.delete-modal-actions .btn {
    flex: 1;
    min-width: 0;

    justify-content: center;
}

/* Batal */
.btn-cancel {
    background: #f5f5f5;
    color: #5f575a;

    border: 1px solid #ddd;

    box-shadow: none;
}

.btn-cancel:hover {
    background: #eaeaea;
}

/* Hapus */
.btn-delete {
    background: #d9363e;
    color: #fff;

    border: 1px solid #d9363e;

    box-shadow: 0 6px 15px rgba(217, 54, 62, .18);
}

.btn-delete:hover {
    background: #bd2931;
    border-color: #bd2931;
}

/* =========================================
   RINGKASAN STATISTIK LAYANAN
   ========================================= */
.layanan-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;

    margin: 28px 0 22px;
}

.layanan-summary-card {
    display: flex;
    align-items: center;
    gap: 14px;

    min-height: 100px;
    padding: 18px 20px;

    background: #fff;

    border: 1.7px solid #f3c9dc;
    border-radius: 16px;

    box-shadow: 0 5px 16px rgba(236, 30, 121, .05);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.layanan-summary-card:hover {
    transform: translateY(-2px);

    box-shadow: 0 9px 22px rgba(236, 30, 121, .10);
}


/* ICON */
.layanan-summary-icon {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    font-size: 1.35rem;
}


/* ICON WARNA */
.icon-total {
    background: #ffe5f0;
    color: #ec1e79;
}

.icon-category {
    background: #f0e8ff;
    color: #8b5cf6;
}

.icon-active {
    background: #e6f8ee;
    color: #249b5c;
}

.icon-inactive {
    background: #ffe9e9;
    color: #d84a4a;
}


/* CONTENT */

.layanan-summary-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.layanan-summary-content span {
    color: #28232A;
    font-size: .90rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.layanan-summary-content strong {
    color: #28232A;
    font-size: 1.40rem;
    font-weight: 800;
    line-height: 1.10;
}

@media (max-width: 1100px) {
    .layanan-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .layanan-summary-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 20px;
    }

    .layanan-summary-card {
        min-height: 90px;
        padding: 15px 16px;
    }

    .layanan-summary-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        font-size: 1.15rem;
    }

    .layanan-summary-content strong {
        font-size: 1.35rem;
    }
}

/* =========================================
   STAT CARD BOOKING
   Icon kiri - teks kanan
   ========================================= */

.booking-stat-grid {
    align-items: stretch;
}

.booking-stat-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;

    gap: 16px;

    padding: 20px 22px;

    text-align: left !important;
}


/* ICON */

.booking-stat-card .booking-icon {
    width: 58px;
    height: 58px;

    min-width: 58px;

    margin: 0 !important;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    font-size: 1.45rem;
}


/* WARNA ICON */

.booking-icon.total {
    background: #fde9f2;
    color: var(--pink);
}

.booking-icon.waiting {
    background: #fff2d8;
    color: #b3791c;
}

.booking-icon.process {
    background: #ece1ff;
    color: #6d28d9;
}

.booking-icon.complete {
    background: #e7f7ee;
    color: #1f9d57;
}

.booking-icon.cancelled {
    background: #fde4e6;
    color: #c0392b;
}


/* TEKS */

.booking-stat-info {
    display: flex;
    flex-direction: column;

    justify-content: center;

    min-width: 0;
}

.booking-stat-info .st-label {
    color: #28232a;

    font-size: .88rem;
    font-weight: 700;

    line-height: 1.25;

    margin: 0 0 5px;
}

.booking-stat-info .st-val {
    color: #28232a;

    font-size: 1.45rem;
    font-weight: 800;

    line-height: 1;
}
@media (max-width: 900px) {
    .booking-stat-card {
        padding: 16px;
        gap: 12px;
    }

    .booking-stat-card .booking-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
        border-radius: 14px;
    }

    .booking-stat-info .st-label {
        font-size: .8rem;
    }

    .booking-stat-info .st-val {
        font-size: 1.3rem;
    }
}

/* =========================================
   STAT CARD STOK PRODUK
   Icon kiri - teks kanan
   ========================================= */

.stock-stat-grid {
    align-items: stretch;
}

.stock-stat-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;

    gap: 16px;

    padding: 20px 22px;

    text-align: left !important;
}


/* ICON */

.stock-stat-card .stock-icon {
    width: 58px;
    height: 58px;

    min-width: 58px;

    margin: 0 !important;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    font-size: 1.45rem;
}


/* WARNA ICON */

.stock-icon.total {
    background: #fde9f2;
    color: var(--pink);
}

.stock-icon.stock {
    background: #dcebff;
    color: #2563c9;
}

.stock-icon.safe {
    background: #e7f7ee;
    color: #1f9d57;
}

.stock-icon.warning {
    background: #fff2d8;
    color: #b3791c;
}

.stock-icon.empty {
    background: #ffe5e5;
    color: #dc3545;
}


/* INFORMASI */

.stock-stat-info {
    display: flex;
    flex-direction: column;

    justify-content: center;

    min-width: 0;
}

.stock-stat-info .st-label {
    color: #28232a;

    font-size: .88rem;
    font-weight: 700;

    line-height: 1.25;

    margin: 0 0 5px;
}

.stock-stat-info .st-val {
    color: #28232a;

    font-size: 1.45rem;
    font-weight: 800;

    line-height: 1;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .stock-stat-card {
        padding: 16px;
        gap: 12px;
    }

    .stock-stat-card .stock-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
        border-radius: 14px;
    }

    .stock-stat-info .st-label {
        font-size: .8rem;
    }

    .stock-stat-info .st-val {
        font-size: 1.3rem;
    }
}

/* =========================================
   TABEL RINCIAN PENDAPATAN HARIAN
   ========================================= */
.daily-income-table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
}

/* Semua cell menggunakan padding yang sama */
.daily-income-table th,
.daily-income-table td {
    vertical-align: middle !important;
    box-sizing: border-box !important;
}


/* =========================================
   HEADER
   ========================================= */
.daily-income-table thead th {
    background: #fff5f9 !important;
    color: #ec1e79 !important;

    font-size: .80rem !important;
    font-weight: 800 !important;

    padding-top: 13px !important;
    padding-bottom: 13px !important;

    border-bottom: 1px solid var(--line) !important;
}


/* =========================================
   ISI
   ========================================= */

.daily-income-table tbody td {
    color: #28232a !important;

    font-size: .75rem !important;
    font-weight: 500 !important;

    padding-top: 11px !important;
    padding-bottom: 11px !important;

    border-bottom: 1px solid var(--line) !important;
}


/* =========================================
   KOLOM 1 - LAYANAN
   ========================================= */

.daily-income-table th:nth-child(1),
.daily-income-table td:nth-child(1) {
    width: 34% !important;

    text-align: left !important;

    padding-left: 48px !important;
    padding-right: 20px !important;
}


/* =========================================
   KOLOM 2 - METODE PEMBAYARAN
   ========================================= */

.daily-income-table th:nth-child(2){
    width: 30% !important;

    text-align: left !important;

    padding-left: 75px !important;
    padding-right: 0px !important;
}
.daily-income-table td:nth-child(2) {
    width: 30% !important;

    text-align: center !important;

    padding-left: 50px !important;
    padding-right: 10px !important;
}


/* =========================================
   KOLOM 3 - TOTAL
   ========================================= */

.daily-income-table th:nth-child(3),
.daily-income-table td:nth-child(3) {
    width: 36% !important;

    text-align: center !important;

    padding-left: 65px !important;
    padding-right: 0px !important;

    white-space: nowrap !important;
}


/* Harga dibuat tebal */
.daily-income-table tbody td:nth-child(3) {
    font-weight: 700 !important;
}

/* =========================================
   TABEL PENGELUARAN HARIAN
   ========================================= */
.report-expense-table {
    width: 100%;
    table-layout: fixed;
}

/* =========================
   KOLOM KETERANGAN
   ========================= */
.report-expense-table th:nth-child(1),
.report-expense-table td:nth-child(1) {
    width: auto;
    text-align: left !important;
    padding-left: 48px !important;
    padding-right: 20px !important;
}


/* NOMINAL */
.report-expense-table th:nth-child(2),
.report-expense-table td:nth-child(2) {
    width: 170px !important;
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 270px !important;
    white-space: nowrap !important;
}


/* AKSI */
.report-expense-table th:nth-child(3),
.report-expense-table td:nth-child(3) {
    width: 150px !important;
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 80px !important;
    white-space: nowrap !important;
}


/* =========================
   TULISAN HEADER
   ========================= */
.report-expense-table thead th {
    color: #ec1e79 !important;
    font-size: 0.80rem !important;
    font-weight: 800 !important;
}


/* =========================
   TULISAN ISI KOLOM
   ========================= */
.report-expense-table tbody td {
    color: #211c1e;
    font-size: 0.75rem;
    font-weight: 500;
    vertical-align: middle;
}


/* Keterangan */
.report-expense-table tbody td:nth-child(1) {
    font-size: 0.75rem;
    font-weight: 500;
}


/* Nominal */
.report-expense-table tbody td:nth-child(2) {
    font-size: 0.75rem;
    font-weight: 700;
}


/* Aksi */
.report-expense-table tbody td:nth-child(3) {
    font-size: 0.75rem;
}


/* Form tombol */
.report-expense-table td form {
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* =========================================
   RINGKASAN METODE PEMBAYARAN
   KHUSUS LAPORAN BULANAN
   ========================================= */

.report-method .method-grid {
    gap: 28px;
}

.report-method .method-item {
    gap: 14px;
    align-items: center;
}

.report-method .method-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    font-size: 1.35rem;
}

.report-method .method-item .fw7 {
    font-size: 0.8rem;
    line-height: 1.2;
}

.report-method .method-total {
    font-size: 1.10rem;
    line-height: 1.2;
    margin-top: 5px;
    white-space: nowrap;
}

/* =====================================================
   TABEL RINCIAN PENDAPATAN BULANAN
   ===================================================== */
.report-monthly-income-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

/* HEADER */
.report-monthly-income-table thead th {
    font-size: 15px;
    font-weight: 800;
    color: #ed1b7b;
    background: #fff5f9;
    padding: 10px 16px;
    vertical-align: middle;
}

/* ISI */
.report-monthly-income-table tbody td {
    color: #28232a;
    font-size: .75rem;
    font-weight: 500;
    padding: 16px;
    vertical-align: middle;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* TANGGAL */
.report-monthly-income-table th:nth-child(1),
.report-monthly-income-table td:nth-child(1) {
    width: 18%;
    text-align: left;
    padding-left: 40px !important;
}

/* LAYANAN */
.report-monthly-income-table th:nth-child(2),
.report-monthly-income-table td:nth-child(2) {
    width: 27%;
    text-align: left;
    padding-left: 65px !important;
}

/* METODE PEMBAYARAN */
.report-monthly-income-table th:nth-child(3){
    width: 25%;
    text-align: center;
    padding-left: 25px !important;
}
.report-monthly-income-table td:nth-child(3) {
    width: 38%;
    text-align: center;
    padding-left: 5px !important;
}

/* TOTAL */
.report-monthly-income-table th:nth-child(4),
.report-monthly-income-table td:nth-child(4) {
    width: 20%;
    text-align: center;
    padding-right: 30px !important;
}

/* Nominal jangan sampai pecah menjadi 2 baris */
.report-monthly-income-table td:nth-child(4) {
    white-space: nowrap;
}

/* Header Total tetap sejajar dengan nominal */
.report-monthly-income-table th:nth-child(4) {
    white-space: nowrap;
}

/* =========================================
   RINGKASAN PENGELUARAN BULANAN
   ========================================= */
/* ISI */
.report-expense-monthly tbody td {
    color: #28232a;
    font-size: .75rem;
    font-weight: 500;
    padding: 16px;
    vertical-align: middle;
}
/* Lebar kolom */
.report-expense-monthly table {
    width: 100%;
    table-layout: fixed;
}

/* Kolom Tanggal */
.report-expense-monthly th:nth-child(1),
.report-expense-monthly td:nth-child(1) {
    width: 120px;
    text-align: left;
    padding-left: 30px !important;
}

/* Kolom Keterangan */
.report-expense-monthly th:nth-child(2),
.report-expense-monthly td:nth-child(2) {
    width: auto;
    text-align: left;
    padding-left: 40px !important;
}

/* Kolom Nominal */
.report-expense-monthly th:nth-child(3),
.report-expense-monthly td:nth-child(3) {
    width: 150px;
    text-align: center;
    padding-right: 25px !important;
    white-space: nowrap;
}

/* ==============================
   AKSI FOTO PRODUK
============================== */

.produk-photo-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:0px;
    flex-wrap:wrap;
}

.produk-photo-actions .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:30px;
    padding:0px 14px;
    border-radius:8px;
    font-size:.70rem;
    font-weight:700;
    cursor:pointer;
    text-decoration:none;
}

/* Tombol Ubah Foto */
.produk-photo-actions .btn-soft{
    background:#ffeaf3;
    color:#ec2380;
    border:1px solid #ffd0e2;
}

.produk-photo-actions .btn-soft:hover{
    background:#ffdce9;
}

/* Tombol Hapus Foto */
.produk-photo-actions .btn-danger-soft{
    background:#fff0f0;
    color:#ef4444;
    border:1px solid #ffcaca;
}

.produk-photo-actions .btn-danger-soft:hover{
    background:#ffe1e1;
}

/* Keterangan format */
.produk-upload > small{
    display:block;
    margin-top:8px;
    text-align:center;
    font-size:.80rem;
    color:#3d3f45;font-weight:550;font-style: italic;
}

/* =========================================================
   LAPORAN STOK PRODUK - REDESIGN
========================================================= */
.stock-report-kicker{
    display:flex;
    align-items:center;
    gap:.45rem;
    color:#e91e63;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:.35rem;
}

.stock-report-kicker i{
    font-size:.9rem;
}

.stock-report-subtitle{
    margin:.3rem 0 0;
    color:#7d7480;
    font-size:.88rem;
}

.stock-stat-card{
    min-height:96px;
    display:flex;
    align-items:center;
    gap:1rem;
}

.stock-service-stat{
    grid-column:span 1;
}

.purple-text{
    color:#8b5cf6 !important;
}

.report-icon.purple{
    background:#f2eaff;
    color:#8b5cf6;
}

/* =========================================================
   MAIN STOCK CARD
========================================================= */
.stock-main-card{
    padding:0 !important;
    overflow:hidden;
    background:#fff;
}

.stock-toolbar-new{
    padding:0rem 1.4rem 1rem;
    display:flex;
    align-items:center;
    gap:.8rem;
    border-bottom:1px solid #f4dce7;
    background:#fff;
}

.stock-search-new{
    position:relative;
    flex:1;
    max-width:520px;
}

.stock-search-new i{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    color:#ec1e79;
    font-size:1rem;
    pointer-events:none;
}

.stock-search-new input{
    width:100%;
    height:40px;
    padding:0 0 0 45px;
    border:1.8px solid #f2c6d9;
    border-radius:10px;
    outline:none;
    background:#fff;
    font-size:.8rem;
    transition:.2s ease;
}

.stock-search-new input:focus{
    border-color:#ec1e79;
    box-shadow:0 0 0 4px rgba(236,30,121,.07);
}

.stock-filter{
    min-width:180px;
    height:40px;
    border-radius:10px !important;
    border:1.8px solid #f2c6d9 !important;
    background:#fff;
}

/* =========================================================
   GRID
========================================================= */
.stock-grid-new{
    padding:0rem 1.35rem 1.35rem;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.15rem;
}

/* =========================================================
   PRODUCT CARD
========================================================= */
.stock-item-new{
    position:relative;
    background:#fff;
    border:2px solid #f4d6e4;
    border-radius:10px;
    padding:1rem;
    min-width:0;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.stock-item-new:hover{
    transform:translateY(-2px);
    border-color:#efb8d0;
    box-shadow:0 10px 26px rgba(236,30,121,.08);
}

/* =========================================================
   PRODUCT HEADER
========================================================= */
.stock-product-head{
    display:flex;
    align-items:flex-start;
    gap:1rem;
}

.stock-photo-new{
    width:108px;
    height:108px;
    flex:0 0 108px;
    border:1.8px solid #f3d2df;
    border-radius:18px;
    overflow:hidden;
    background:#fafafa;
    display:flex;
    align-items:center;
    justify-content:center;
}

.stock-photo-new img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.stock-no-photo{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#d8a9bd;
    background:#fff7fa;
    font-size:1.8rem;
}

.stock-info-new{
    min-width:0;
    flex:1;
}

.stock-product-title{
    display:flex;
    align-items:center;
    gap:.5rem;
    margin-bottom:.60rem;
}

.stock-product-title h4{
    margin:0;
    font-size:1.08rem;
    font-weight:800;
    color:#17131a;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.stock-status-dot{
    width:8px;
    height:8px;
    flex:0 0 8px;
    border-radius:50%;
}

.stock-status-dot.aman{
    background:#16a34a;
}

.stock-status-dot.menipis{
    background:#f59e0b;
}

.stock-status-dot.habis{
    background:#ef4444;
}

/* =========================================================
   QUANTITY
========================================================= */
.stock-quantity-row{
    display:flex;
    gap:1.8rem;
}

.stock-quantity{
    display:flex;
    flex-direction:column;
    gap:.05rem;
}

.stock-quantity span{
    color:#000;
    font-size:.85rem;
    font-weight:600;
}

.stock-quantity strong{
    color:#242024;
    font-size:.9rem;
}

.stock-quantity strong.aman-quantity{
    color:#15803d;
}

.stock-quantity strong.menipis-quantity{
    color:#d97706;
}

.stock-quantity strong.habis-quantity{
    color:#dc2626;
}


/* =========================================================
   PROGRESS
========================================================= */
.stock-progress-new{
    margin-top:0rem;
}

.stock-bar-row{
    display:flex;
    align-items:center;
    gap:.7rem;
    width:100%;
}

.stock-bar-new{
    flex:1;
    width:auto;
    height:9px;
    background:#eeeeee;
    border-radius:999px;
    overflow:hidden;
}

.stock-bar-new span{
    display:block;
    height:100%;
    border-radius:999px;
}

.stock-percent-new{
    flex:0 0 auto;
    min-width:30px;
    text-align:right;
    color:#716875;
    font-size:.90rem;
    font-weight:800;
    color:#000!important;
    transform:translateY(-3px)
}

.stock-progress-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:.45rem;
}

.stock-progress-top span{
    color:#827782;
    font-size:.72rem;
    font-weight:600;
}

.stock-progress-top strong{
    font-size:.78rem;
    color:#716875;
}

.stock-bar-new{
    width:100%;
    height:8px;
    background:#f0eeee;
    border-radius:999px;
    overflow:hidden;
}

.stock-bar-new span{
    display:block;
    height:100%;
    border-radius:999px;
    transition:width .3s ease;
}


/* =========================================================
   SERVICE INFO
========================================================= */
.stock-service-box{
    margin-top:0.1rem;
    padding:.8rem .85rem;
    background:#fff8fb;
    border:2px solid #f0bfd2;
    border-radius:10px;
    min-height:68px;
}

.stock-service-title{
    display:flex;
    align-items:center;
    gap:.45rem;
    color:#9b5675;
    font-size:.75rem;
    font-weight:700;
    margin-bottom:.60rem;
}

.stock-service-title i{
    color:#ec1e79;
    font-size:.83rem;
}

.stock-service-list{
    display:flex;
    flex-wrap:wrap;
    gap:.4rem;
}

.service-chip{
    display:inline-flex;
    align-items:center;
    padding:.2rem .55rem;
    border-radius:990px;
    background:#fff;
    border:1px solid #f2c6d9;
    color:#8d3f61;
    font-size:.65rem;
    font-weight:700;
    line-height:1.2;
}

.stock-no-service{
    display:flex;
    align-items:center;
    gap:.4rem;
    color:#4e4848!important;
    font-size:.7rem;
    font-style:italic;
}

.stock-no-service i{
    color:#4e4848;
}

/* =========================================================
   FOOTER CARD
========================================================= */
.stock-footer-new{
    margin-top:0.8rem;
    padding-top:.85rem;
    border-top:1px solid #f4e5eb;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.5rem;
}

.stock-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:31px;
    padding:.35rem .75rem;
    border-radius:8px;
    font-size:.7rem;
    font-weight:700;
}

.stock-badge.aman{
    color:#067a3d;
    background:#c8f0d8;
}

.stock-badge.menipis{
    color:#b45309;
    background:#fff5df;
}

.stock-badge.habis{
    color:#dc2626;
    background:#ffeded;
}

.stock-service-count{
    display:flex;
    align-items:center;
    gap:.35rem;
    color:#000!important;
    font-size:.68rem;
    font-weight:600;
}

.stock-service-count i{
    color:#ec1e79;
}


/* =========================================================
   EMPTY RESULT
========================================================= */

.stock-empty-result{
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.25rem;
    padding:3rem 1rem;
    color:#8d818a;
}

.stock-empty-result i{
    font-size:2rem;
    color:#e8bfd0;
    margin-bottom:.3rem;
}

.stock-empty-result strong{
    color:#625963;
    font-size:.9rem;
}

.stock-empty-result span{
    font-size:.75rem;
}


/* =========================================================
   WARNING PRODUK TIDAK TERDAFTAR
========================================================= */

.stock-warning-card{
    margin-top:1.2rem;
    padding:1rem 1.15rem;
    display:flex;
    align-items:flex-start;
    gap:.9rem;
    border:1.5px solid #f5d28b;
    background:#fffaf0;
    border-radius:15px;
}

.stock-warning-icon{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#fff0c9;
    color:#d97706;
}

.stock-warning-content{
    min-width:0;
}

.stock-warning-content strong{
    display:block;
    color:#8a5a08;
    font-size:.85rem;
}

.stock-warning-content p{
    margin:.25rem 0 .65rem;
    color:#9a7b42;
    font-size:.74rem;
}

.stock-warning-list{
    display:flex;
    flex-wrap:wrap;
    gap:.4rem;
}

.stock-warning-list span{
    padding:.3rem .55rem;
    border-radius:7px;
    background:#fff;
    border:1px solid #f2d99f;
    color:#8a620f;
    font-size:.7rem;
    font-weight:600;
}


/* =========================================================
   HISTORY
========================================================= */
.stock-history-card{
    margin-top:1rem;
    overflow:hidden;
    border-radius:15px;
}

/* ================================
   HEADER CARD
================================ */
.stock-history-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1rem 1.35rem;
    min-height:50px;
}

.stock-history-title > div{
    display:flex;
    align-items:center;
    gap:.55rem;
}

.stock-history-title > div i{
    color:#ec1971;
    font-size:1rem;
}

.stock-history-title span{
    color:#ec1971;
    font-weight:800;
}

.stock-history-title small{
    color:#806b77;
    font-size:.8rem;
    font-weight:600;
}


/* ================================
   WRAPPER
================================ */

.stock-history-table-wrap{
    width:100%;
    overflow-x:auto;
}


/* ================================
   TABLE
================================ */

.stock-history-table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}


/* ================================
   HEADER + ISI
================================ */

.stock-history-table th,
.stock-history-table td{
    padding:0rem 0rem;
    vertical-align:middle;
    text-align:left;
}


/* ================================
   HEADER
================================ */
.stock-history-table thead th{
    background:#fff6fa;
    color:#ec1971;
    font-size:.82rem;
    font-weight:800;
    height:45px;
    white-space:nowrap;
}


/* ================================
   BARIS
================================ */

.stock-history-table tbody tr{
    height:45px;
}

.stock-history-table tbody td{
    border-top:1px solid #f5dfe8;
    color:#29232a;
    font-size:.82rem;
}


/* ================================
   HOVER
================================ */

.stock-history-table tbody tr:hover{
    background:#fffafd;
}


/* ================================
   LEBAR KOLOM
================================ */
/* Waktu */
.stock-history-table th:nth-child(1){
    width:20%;
    padding-left:2.5rem !important;
    text-align:center;
}
.stock-history-table td:nth-child(1){
    width:20%;
    padding-left:4.5rem !important;
    color:#000!important;
    font-size:.8rem !important;
    font-weight:500;
}

/* Produk */
.stock-history-table th:nth-child(2),
.stock-history-table td:nth-child(2){
    width:15%;
    padding-left:.8rem;
    text-align:center!important;
}

/* Perubahan */
.stock-history-table th:nth-child(3),
.stock-history-table td:nth-child(3){
    width:16%;
    padding-left:2rem !important;
    text-align:center;
}

/* Sisa */
.stock-history-table th:nth-child(4){
    width:15%;
    padding-left:5rem !important;
    text-align:center;
}
.stock-history-table td:nth-child(4){
    width:15%;
    padding-left:4.5rem !important;
    text-align:center;
}

/* Layanan */
.stock-history-table th:nth-child(5){
    width:30%;
    padding-left:4rem !important;
    padding-right:3rem !important;
    text-align:center;
}
.stock-history-table td:nth-child(5){
    width:30%;
    padding-left:7rem;
    padding-right:1rem;
    text-align:center;
}



/* ================================
   WAKTU
================================ */
.history-time{
    color:#746574 !important;
    white-space:nowrap;
    font-size:.8rem !important;
}


/* ================================
   PRODUK
================================ */
.history-product{
    text-align:left !important;
}

.history-product strong{
    font-weight:600;
    color:#000!important
}


/* ================================
   PERUBAHAN
================================ */

.stock-history-change{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:76px;
    padding:.4rem .65rem;
    border-radius:8px;
    font-size:.78rem;
    font-weight:600;
    white-space:nowrap;
}

.stock-history-change.minus{
    color:#dc2626;
    background:#fff0f1;
}

.stock-history-change.plus{
    color:#15803d;
    background:#eaf8ef;
}


/* ================================
   SISA STOK
================================ */

.history-stock{
    font-weight:600;
    color:#211c22;
    white-space:nowrap;
}


/* ================================
   LAYANAN
================================ */

.history-service{
    display:flex;
    align-items:center;
    gap:.55rem;
}

.history-service > i{
    flex:none;
    color:#ec1971;
    font-size:1rem;
}

.history-service > div{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:.4rem;
}

.history-service strong{
    color:#000!important;
    font-weight:600;
}

.history-service span{
    display:inline-flex;
    align-items:center;
    padding:.22rem .6rem;
    border:1px solid #efbfd2;
    border-radius:999px;
    background:#fff8fb;
    color:#9a5373;
    font-size:.73rem;
    font-weight:700;
}


/* ================================
   TIDAK ADA LAYANAN
================================ */

.history-no-service{
    color:#aaa0a6;
}
/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1200px){

    .stock-grid-new{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

@media(max-width:850px){

    .stock-toolbar-new{
        flex-wrap:wrap;
    }

    .stock-search-new{
        max-width:none;
        flex:1 1 100%;
    }

    .stock-filter{
        flex:1;
        min-width:0;
    }

}

@media(max-width:700px){

    .stock-grid-new{
        grid-template-columns:1fr;
        padding:1rem;
    }

    .stock-item-new{
        padding:.9rem;
    }

    .stock-photo-new{
        width:90px;
        height:90px;
        flex-basis:90px;
    }

}

@media(max-width:500px){

    .stock-product-head{
        align-items:flex-start;
    }

    .stock-photo-new{
        width:78px;
        height:78px;
        flex-basis:78px;
    }

    .stock-quantity-row{
        gap:.8rem;
    }

    .stock-filter{
        flex:1 1 100%;
    }

}

/* =========================================================
   TABEL DAFTAR LAYANAN - BOOKING PELANGGAN
   KHUSUS HALAMAN PELANGGAN
========================================================= */
.customer-booking-services{
    width:100%;
    margin:0 0 1.5rem;
}
.customer-service-table-wrap{
    width:100%;
    overflow-x:auto;
    border:1.5px solid #f3c9dc;
    border-radius:5px;
    background:#fff;
}
/* =========================================================
   TABLE
========================================================= */
.customer-service-table{
    width:100%;
    min-width:710px;
    border-collapse:separate;
    border-spacing:0;
    table-layout:fixed;
}


/* =========================================================
   HEADER
========================================================= */

.customer-service-table thead th{
    height:48px;
    padding:0 20px;

    background:#fff5f9;
    border-bottom:1px solid #f3d7e4;

    color:#ec1971;
    font-size:12px;
    font-weight:800;

    text-align:left;
    vertical-align:middle;
    white-space:nowrap;
}


/* Lebar kolom */
.customer-service-table .customer-col-service{
    width:30%;
}

.customer-service-table .customer-col-product{
    width:25%;
}

.customer-service-table .customer-col-price{
    width:22%;
}

.customer-service-table .customer-col-action{
    width:23%;
    text-align:center;
}


/* =========================================================
   BARIS
========================================================= */

.customer-service-table tbody tr{
    background:#fff;
    transition:background .18s ease;
}

.customer-service-table tbody tr:hover{
    background:#fffafd;
}


/* =========================================================
   CELL
========================================================= */

.customer-service-table tbody td{
    padding:16px 18px;
    border-bottom:1px solid #f3dfe8;

    font-size:11px;
    color:#29232a;

    vertical-align:middle;
}

.customer-service-table tbody tr:last-child td{
    border-bottom:none;
}


/* =========================================================
   NAMA LAYANAN
========================================================= */

.customer-service-name-cell{
    text-align:left;
}

.customer-service-name{
    color:#211c22;
    font-size:11px;
    font-weight:800;
    line-height:1.35;
}

.customer-service-duration{
    display:flex;
    align-items:center;
    gap:5px;

    margin-top:5px;

    color:#8c7280;
    font-size:11px;
    font-weight:600;
}

.customer-service-duration i{
    color:#ec1971;
    font-size:11px;
}


/* =========================================================
   PRODUK
========================================================= */

.customer-service-product-cell{
    text-align:left;
}

.customer-product-name{
    color:#3f3038;
    font-weight:600;
}

.customer-product-size{
    display:inline-flex;
    align-items:center;

    margin-left:6px;
    padding:3px 8px;

    border:1px solid #efbfd2;
    border-radius:999px;

    background:#fff7fa;
    color:#9b5574;

    font-size:11px;
    font-weight:700;
}

.customer-product-empty{
    color:#aaa0a6;
}


/* =========================================================
   HARGA
========================================================= */

.customer-service-price-cell{
    text-align:left;
}

.customer-service-price{
    color:#211c22;
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
}


/* =========================================================
   AKSI
========================================================= */

.customer-service-action-cell{
    text-align:center;
}

.customer-service-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
}


/* Tombol umum */
.customer-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    min-width:72px;
    height:25px;

    padding:0 12px;

    border:1.5px solid #f2b7ce;
    border-radius:7px;

    background:#fff;

    color:#ec1971;

    font-family:inherit;
    font-size:10px;
    font-weight:700;

    text-decoration:none;
    cursor:pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.customer-btn i{
    font-size:10px;
}


/* Edit */

.customer-btn-edit:hover{
    background:#fff1f7;
    border-color:#ec1971;
}


/* Hapus */

.customer-btn-delete{
    background:#fff;
    color:#e54861;
    border-color:#f1bdc7;
}

.customer-btn-delete:hover{
    background:#fff2f3;
    border-color:#e54861;
}


/* Form hapus */

.customer-delete-form{
    display:inline-flex;
    margin:0;
}


/* =========================================================
   KOSONG
========================================================= */

.customer-service-empty td{
    padding:28px 20px !important;
}

.customer-empty-content{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    color:#96838d;
    font-size:12px;
}

.customer-empty-content i{
    color:#ec1971;
    font-size:16px;
}

.customer-empty-link{
    color:#ec1971;
    font-weight:800;
    text-decoration:none;
}

.customer-empty-link:hover{
    text-decoration:underline;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:768px){

    .customer-service-table{
        min-width:680px;
    }

    .customer-service-table thead th,
    .customer-service-table tbody td{
        padding-left:13px;
        padding-right:13px;
    }

    .customer-service-actions{
        justify-content:flex-start;
    }

    .customer-btn{
        min-width:68px;
        padding:0 9px;
    }
}

body.pelanggan-page {
    zoom: 1.10;
}

/* =========================================================
   WARNA STATUS JAM BOOKING PELANGGAN
   Sama seperti tampilan halaman admin
   ========================================================= */

/* TERSEDIA */
.slot.slot-ready {
    border: 2px solid #8eddb2 !important;
    background: #ffffff !important;
    color: #111827 !important;
}

.slot.slot-ready .slot-time {
    color: #111827 !important;
}

.slot.slot-ready .slot-status {
    color: #16a34a !important;
    font-weight: 700;
}

/* HAMPIR PENUH */
.slot.slot-hampir {
    border: 2px solid #f5a623 !important;
    background: #fffdf8 !important;
    color: #111827 !important;
}

.slot.slot-hampir .slot-time {
    color: #111827 !important;
}

.slot.slot-hampir .slot-status {
    color: #f59e0b !important;
    font-weight: 800;
}

/* PENUH */
.slot.slot-full {
    border: 2px solid #f39ac2 !important;
    background: #fff5f9 !important;
    color: #111827 !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

.slot.slot-full .slot-time {
    color: #6b7280 !important;
    font-style: italic;
    font-weight: 800;
}

.slot.slot-full .slot-status {
    color: #ec1e79 !important;
    font-weight: 800;
}

.slot.slot-full .slot-status i {
    font-size: .75rem;
    margin-right: 2px;
}

/* Jangan biarkan radio bawaan mengubah warna slot */
.slot.slot-full input {
    display: none !important;
}

/* =========================================================
   JAM DIPILIH + JAM OTOMATIS TERPAKAI
   HIJAU SOLID
   ========================================================= */

.slot.slot-sel,
.slot.slot-session-used {
    border: 2px solid #20a458 !important;
    background: #20a458 !important;
    color: #ffffff !important;
}

.slot.slot-sel .slot-time,
.slot.slot-session-used .slot-time {
    color: #ffffff !important;
    font-weight: 800 !important;
}

.slot.slot-sel .slot-status,
.slot.slot-session-used .slot-status {
    color: #ffffff !important;
    font-weight: 800 !important;
}

.slot.slot-sel .slot-status i,
.slot.slot-session-used .slot-status i {
    color: #ffffff !important;
}
/* =========================================================
   HOVER JAM PELANGGAN
   ========================================================= */

.slots .slot:not(.slot-full) {
    cursor: pointer !important;
    transition:
        transform .15s ease,
        box-shadow .15s ease !important;
    box-sizing: border-box;
}

.slots .slot:not(.slot-full):hover {
    cursor: pointer !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 7px 16px rgba(32,164,88,.22) !important;
}

/* Hover khusus jam yang sudah dipilih/terpakai */
.slots .slot.slot-sel:hover,
.slots .slot.slot-session-used:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 18px rgba(32,164,88,.30) !important;

    border-color: #20a458 !important;
    background: #20a458 !important;
}

/* =========================================================
   SLOT JAM BOOKING ADMIN
   Tampilan dibuat lebih jelas seperti halaman pelanggan
   ========================================================= */

.booking-slot-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

/* Kotak jam */
.booking-slot-grid .slot-card {
    position: relative;
    min-height: 35px;
    padding: 8px 2px;
    border-radius: 8px;
    border: 2px solid #b8e8cd;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: .15s ease;
    box-sizing: border-box;
}

/* Hilangkan radio bawaan */
.booking-slot-grid .slot-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* JAM */
.booking-slot-grid .slot-time {
    display: block;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    color: #111827;
    margin-bottom: 0px;
}

/* STATUS */
.booking-slot-grid .slot-status {
    display: block;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
}

/* =========================================================
   TERSEDIA
   ========================================================= */

.booking-slot-grid .slot-card.slot-ready {
    border-color: #82dca9;
    background: #fff;
}

.booking-slot-grid .slot-card.slot-ready .slot-status {
    color: #159447;
}

/* =========================================================
   HAMPIR PENUH
   ========================================================= */

.booking-slot-grid .slot-card.slot-hampir {
    border-color: #f59e0b;
    background: #fffdf8;
}

.booking-slot-grid .slot-card.slot-hampir .slot-status {
    color: #e88a00;
}

/* =========================================================
   PENUH
   ========================================================= */

.booking-slot-grid .slot-card.slot-full {
    border-color: #f28ab6;
    background: #fff7fa;
    cursor: not-allowed;
}

.booking-slot-grid .slot-card.slot-full .slot-time {
    color: #6b7280;
    font-style: italic;
}

.booking-slot-grid .slot-card.slot-full .slot-status {
    color: #ec1e79;
}

/* =========================================================
   JAM DIPILIH + JAM OTOMATIS TERPAKAI
   HIJAU SOLID
   ========================================================= */

.booking-slot-grid .slot-card.slot-sel,
.booking-slot-grid .slot-card.slot-session-used {
    border: 2px solid #20a458 !important;
    background: #20a458 !important;
    color: #ffffff !important;
}

.booking-slot-grid .slot-card.slot-sel .slot-time,
.booking-slot-grid .slot-card.slot-session-used .slot-time {
    color: #ffffff !important;
    font-weight: 800 !important;
}

.booking-slot-grid .slot-card.slot-sel .slot-status,
.booking-slot-grid .slot-card.slot-session-used .slot-status {
    color: #ffffff !important;
    font-weight: 800 !important;
}

.booking-slot-grid .slot-card.slot-sel .slot-status i,
.booking-slot-grid .slot-card.slot-session-used .slot-status i {
    color: #ffffff !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .booking-slot-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .booking-slot-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .booking-slot-grid .slot-card {
        min-height: 58px;
    }

    .booking-slot-grid .slot-time {
        font-size: 14px;
    }

    .booking-slot-grid .slot-status {
        font-size: 11px;
    }
}

.customer-service-header {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.customer-service-header-main {
    flex: 1;
    min-width: 0;
}

.customer-bersama {
    flex: 0 1 58%;
    max-width: 850px;

    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-content: center;

    gap: 6px;
    flex-wrap: wrap;

    margin-left: auto;
}

.customer-bersama-many {
    align-self: flex-start;
}

.customer-bersama-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 4px 11px;

    border: 2px solid #f3b7d1;
    border-radius: 15px;

    background: #fff;
    color: #d92d7a;

    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;

    white-space: nowrap;
    box-sizing: border-box;
}

@media (max-width: 900px) {

    .customer-service-header {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .customer-bersama {
        flex: 1 1 100%;
        width: 100%;
        max-width: none;

        justify-content: flex-start;

        margin-left: 0;
        margin-top: 8px;
    }
}

.payment-option {
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.payment-option:hover {
  border-color: var(--pink) !important;
  background: #fef0f7;
}

.payment-option input[type="radio"]:checked + .payment-label-text {
  color: var(--pink);
}

.payment-option input:checked ~ * {
  color: var(--pink);
}

.payment-option input:checked ~ i {
  color: var(--pink);
}

.booking-duration-above-slots{
    display:flex;
    align-items:flex-start;
    gap:.75rem;
    margin:0 0 1rem;
    padding:.8rem 1rem;
    border:1px solid #f3b0c9;
    background:#fff3f8;
    border-radius:12px;
    color:#4a3540;
    font-size:.88rem;
    line-height:1.45;
}

.booking-duration-above-slots > i{
    flex:0 0 auto;
    color:#ec1e79;
    font-size:1.15rem;
    margin-top:.05rem;
}

.booking-duration-above-slots > div{
    flex:1;
    min-width:0;
}

.booking-duration-above-slots span{
    font-weight:700;
}

.booking-duration-above-slots[style*="display:none"]{
    display:none !important;
}
/* =========================================================
   PENCARIAN DATA PELANGGAN - KHUSUS
   Tidak mengubah layout booking lainnya
   ========================================================= */

.customer-search-section {
    /* mengikuti booking-form-section */
}

.customer-search-row {
    width: 100%;
}

.customer-search-field {
    width: 100%;
}

.customer-search-input {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.customer-search-input .inp {
    flex: 1;
    width: auto;
    min-width: 0;
}

.customer-search-input .btn {
    margin-top: 0;
    flex: 0 0 auto;
    white-space: nowrap;
}

.customer-lookup-status {
    min-height: 0px;
    margin-top: .45rem;
    font-size: .75rem;
    font-weight: 600;
    font-style: italic;
}

.customer-lookup-status.is-found {
    color: #16a34a;
}

.customer-lookup-status.is-new {
    color: #d97706;
}

.customer-lookup-status.is-error {
    color: #dc2626;
}

/* =========================================================
   GALERI HASIL PERAWATAN
   CSS khusus, tidak mengubah komponen pelanggan lain
   ========================================================= */
.gallery-page{gap:1rem}
.gallery-intro{
    display:flex;
    align-items:center;
    gap:1.2rem;
    padding:1rem 1rem;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(242,144,185,.28);
}
.gallery-intro-icon{
    width:30px;height:40px;flex:0 0 55px;
    display:flex;align-items:center;justify-content:center;
    border-radius:10px;
    background:#fde9f2;
    color:var(--pink);
    font-size:1.65rem;
}
.gallery-intro h1{margin:0 0 0;color:var(--pink);font-size:1rem;font-weight:800}
.gallery-intro p{margin:0;color:#716a76;font-size:.88rem}
.gallery-filter{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.gallery-filter-btn{
    border:1px solid #f3c7da;
    background:#fff;
    color:#5d5560;
    border-radius:999px;
    padding:.42rem .85rem;
    font:600 .78rem var(--font);
    cursor:pointer;
    transition:.18s ease;
}
.gallery-filter-btn:hover{color:var(--pink);border-color:#f29ac0}
.gallery-filter-btn.active{background:#f20572;color:#fff;border-color:#f20572;box-shadow:0 4px 12px rgba(236,30,121,.18)}
.gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1rem;
}
.gallery-card{
    background:#fff;
    border:1px solid rgba(242,144,185,.25);
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 5px 18px rgba(220,60,130,.07);
    cursor:pointer;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
    outline:none;
}
.gallery-card:hover,.gallery-card:focus-visible{transform:translateY(-4px);box-shadow:0 12px 28px rgba(220,60,130,.13);border-color:#f1b1cd}
.gallery-image-wrap{position:relative;aspect-ratio:4/3;background:#fdeef5;overflow:hidden}
.gallery-image-wrap img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .3s ease}
.gallery-card:hover .gallery-image-wrap img{transform:scale(1.035)}
.gallery-image-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(236,30,121,.0);opacity:0;transition:.2s ease}
.gallery-image-overlay span{background:rgba(255,255,255,.94);color:var(--pink);padding:.45rem .75rem;border-radius:999px;font-size:.75rem;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.gallery-card:hover .gallery-image-overlay,.gallery-card:focus-visible .gallery-image-overlay{opacity:1;background:rgba(236,30,121,.16)}
.gallery-card-body{padding:.75rem .85rem .9rem}
.gallery-category{display:inline-block;color:var(--pink);font-size:.68rem;font-weight:700;margin-bottom:.22rem}
.gallery-card-body h3{margin:0;color:#3e3742;font-size:.86rem;font-weight:800;line-height:1.35}
.gallery-empty,.gallery-empty-filter{padding:3rem 1.5rem;text-align:center;background:rgba(255,255,255,.96);border:1px solid rgba(242,144,185,.25);border-radius:18px;color:#716a76}
.gallery-empty-icon,.gallery-empty-filter i{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;background:#fde9f2;color:var(--pink);font-size:1.65rem}
.gallery-empty h2{margin:0 0 .4rem;color:var(--pink);font-size:1.1rem}
.gallery-empty p{margin:0;font-size:.86rem}
.gallery-lightbox{position:fixed;inset:0;background:rgba(32,18,27,.84);display:none;align-items:center;justify-content:center;padding:1.2rem;z-index:1000}
.gallery-lightbox.open{display:flex}
.gallery-lightbox-content{max-width:min(94vw,1000px);max-height:92vh;position:relative;display:flex;flex-direction:column;align-items:center}
.gallery-lightbox-content img{display:block;max-width:100%;max-height:78vh;object-fit:contain;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.35);background:#fff}
.gallery-lightbox-caption{width:100%;box-sizing:border-box;margin-top:.7rem;padding:.7rem .9rem;border-radius:10px;background:rgba(255,255,255,.95);display:flex;flex-direction:column;gap:.15rem}
.gallery-lightbox-caption span{font-size:.7rem;color:var(--pink);font-weight:700}
.gallery-lightbox-caption strong{font-size:.9rem;color:#3e3742}
.gallery-lightbox-close{position:fixed;top:1rem;right:1rem;width:42px;height:42px;border:0;border-radius:50%;background:#fff;color:var(--pink);font-size:1.05rem;cursor:pointer;z-index:1001}
.gallery-image-error{display:none}

/* Admin gallery */
.gallery-admin-layout{display:grid;grid-template-columns:minmax(300px,.75fr) minmax(0,1.5fr);gap:1.2rem}
.gallery-admin-card{padding:1.25rem 1.35rem}
.gallery-admin-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.gallery-admin-heading h2{margin:0;color:var(--pink);font-size:1rem;font-weight:800;display:flex;align-items:center;gap:.45rem}
.gallery-admin-heading p{margin:.25rem 0 0;color:#77717a;font-size:.78rem}
.gallery-upload-form{display:flex;flex-direction:column;gap:.85rem}
.gallery-admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.gallery-upload-note{display:block;margin-top:.35rem;color:#8b838e;font-size:.72rem}
.gallery-admin-grid-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.gallery-admin-item{overflow:hidden;border:1px solid #f0d6e2;border-radius:13px;background:#fff}
.gallery-admin-item>img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#fdeef5}
.gallery-admin-item-body{padding:.65rem}
.gallery-admin-item-body span{display:block;color:var(--pink);font-size:.66rem;font-weight:700;margin-bottom:.15rem}
.gallery-admin-item-body strong{display:block;color:#403843;font-size:.78rem;line-height:1.35;margin-bottom:.55rem}
.gallery-delete-btn{background:#fff0f4;color:#d81b63;border:1px solid #f2bdd2}
.gallery-admin-empty{min-height:220px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:.25rem;color:#817984}
.gallery-admin-empty i{font-size:2rem;color:var(--pink);margin-bottom:.3rem}
.gallery-admin-empty strong{color:#514953;font-size:.9rem}
.gallery-admin-empty span{font-size:.75rem}

@media(max-width:1024px){
    .gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .gallery-admin-layout{grid-template-columns:1fr}
}
@media(max-width:860px){
    .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
    .gallery-intro{padding:1rem;align-items:flex-start}
    .gallery-intro-icon{width:48px;height:48px;flex-basis:48px;font-size:1.35rem}
    .gallery-grid{grid-template-columns:1fr 1fr;gap:.7rem}
    .gallery-card-body{padding:.6rem .65rem .75rem}
    .gallery-card-body h3{font-size:.78rem}
    .gallery-admin-grid{grid-template-columns:1fr}
    .gallery-admin-grid-list{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){
    .gallery-grid,.gallery-admin-grid-list{grid-template-columns:1fr}
}

/* =========================================================
   EDIT GALERI
   Khusus halaman admin galeri
   ========================================================= */

.gallery-admin-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.gallery-admin-item-actions form {
    margin: 0;
}

.gallery-edit-btn {
    border: 1px solid #f7b4d2;
    background: #fff;
    color: #ec1976;
}

.gallery-edit-btn:hover {
    background: #fff0f7;
    border-color: #ec1976;
}

.gallery-edit-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.gallery-edit-modal.is-open {
    display: flex;
}

.gallery-edit-overlay {
    position: absolute;
    inset: 0;
    background: rgba(40, 20, 30, .45);
}

.gallery-edit-dialog {
    position: relative;
    z-index: 2;
    width: min(720px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
    padding: 26px;
}

.gallery-edit-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.gallery-edit-header h2 {
    margin: 0 0 6px;
}

.gallery-edit-header p {
    margin: 0;
}

.gallery-edit-close {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #fff0f7;
    color: #ec1976;
    cursor: pointer;
    flex: 0 0 auto;
}

.gallery-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.gallery-edit-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
}

.gallery-edit-cancel {
    background: #fff;
    border: 1px solid #f4b5d1;
    color: #ec1976;
}

.gallery-edit-cancel:hover {
    background: #fff0f7;
}

.gallery-modal-open {
    overflow: hidden;
}

@media (max-width: 700px) {

    .gallery-edit-grid {
        grid-template-columns: 1fr;
    }

    .gallery-edit-dialog {
        padding: 20px;
    }

    .gallery-edit-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .gallery-edit-actions .btn {
        width: 100%;
    }

}

/* =========================================================
   CAPSTER - ADMIN
   CSS KHUSUS, TIDAK MENGUBAH LAYOUT BOOKING/GALERI
   ========================================================= */

.capster-admin-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:1.2rem;
}

.capster-admin-card{
    min-width:0;
}

.capster-admin-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1.2rem;
}

.capster-admin-heading h2{
    margin:0 0 .35rem;
    color:var(--pink);
    font-size:1.2rem;
    font-weight:800;
}

.capster-admin-heading h2 i{
    margin-right:.4rem;
}

.capster-admin-heading p{
    margin:0;
    color:var(--muted);
    font-size:.9rem;
    line-height:1.55;
}

.capster-admin-list{
    display:grid;
    gap:1rem;
}

.capster-admin-item{
    display:grid;
    grid-template-columns:54px minmax(0,1fr) auto;
    align-items:start;
    gap:1rem;
    padding:1rem;
    border:1px solid #f4c8dc;
    border-radius:16px;
    background:#fff;
}

.capster-admin-item-icon{
    width:54px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fdeaf3;
    color:var(--pink);
    font-size:1.4rem;
}

.capster-admin-item-main{
    min-width:0;
}

.capster-admin-item-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    margin-bottom:.6rem;
}

.capster-admin-item-title strong{
    display:block;
    color:#342b35;
    font-size:1rem;
    font-weight:800;
}

.capster-all-badge{
    display:inline-flex;
    align-items:center;
    margin-top:.3rem;
    padding:.25rem .55rem;
    border-radius:999px;
    background:#e9f9ef;
    color:#16834a;
    font-size:.72rem;
    font-weight:700;
}

.capster-skill-list{
    display:flex;
    flex-wrap:wrap;
    gap:.4rem;
}

.capster-skill-tag{
    display:inline-flex;
    align-items:center;
    padding:.3rem .55rem;
    border-radius:999px;
    background:#fff2f8;
    border:1px solid #f6c6dc;
    color:#d91b70;
    font-size:.75rem;
    font-weight:600;
}

.capster-skill-all{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    color:#16834a;
    font-size:.82rem;
    font-weight:600;
}

.capster-no-skill{
    color:var(--muted);
    font-size:.82rem;
}

.capster-admin-item-actions{
    display:flex;
    align-items:center;
}

.capster-edit-btn{
    border:1px solid #f4b5d1;
    background:#fff;
    color:var(--pink);
}

.capster-edit-btn:hover{
    background:#fff0f7;
    border-color:var(--pink);
}

.capster-admin-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.45rem;
    padding:3rem 1rem;
    color:var(--muted);
    text-align:center;
}

.capster-admin-empty i{
    color:var(--pink);
    font-size:2rem;
}

.capster-admin-empty strong{
    color:#403640;
}

.capster-edit-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.capster-edit-modal.is-open{
    display:flex;
}

.capster-edit-overlay{
    position:absolute;
    inset:0;
    background:rgba(40,20,30,.45);
}

.capster-edit-dialog{
    position:relative;
    z-index:2;
    width:min(780px,100%);
    max-height:calc(100vh - 40px);
    overflow-y:auto;
    padding:26px;
    background:#fff;
    border-radius:18px;
    box-shadow:0 20px 60px rgba(0,0,0,.18);
}

.capster-edit-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1.4rem;
}

.capster-edit-header h2{
    margin:0 0 .35rem;
    color:var(--pink);
    font-size:1.2rem;
    font-weight:800;
}

.capster-edit-header p{
    margin:0;
    color:var(--muted);
    font-size:.85rem;
}

.capster-edit-close{
    width:38px;
    height:38px;
    border:0;
    border-radius:50%;
    background:#fff0f7;
    color:var(--pink);
    cursor:pointer;
    flex:0 0 auto;
}

.capster-all-toggle{
    display:flex;
    align-items:flex-start;
    gap:.7rem;
    margin-top:1.1rem;
    padding:.9rem 1rem;
    border:1px solid #f3c0d7;
    border-radius:12px;
    background:#fff8fb;
    cursor:pointer;
}

.capster-all-toggle input{
    margin-top:.2rem;
    accent-color:var(--pink);
}

.capster-all-toggle span{
    display:flex;
    flex-direction:column;
    gap:.2rem;
}

.capster-all-toggle strong{
    color:#342b35;
    font-size:.88rem;
}

.capster-all-toggle small{
    color:var(--muted);
    font-size:.75rem;
}

.capster-skills-editor{
    margin-top:1rem;
    padding:1rem;
    border:1px solid #f2c5d9;
    border-radius:14px;
    background:#fff;
}

.capster-skills-editor.is-disabled{
    opacity:.55;
}

.capster-skills-editor-heading{
    display:flex;
    flex-direction:column;
    gap:.2rem;
    margin-bottom:.8rem;
}

.capster-skills-editor-heading strong{
    color:#403640;
    font-size:.9rem;
}

.capster-skills-editor-heading span{
    color:var(--muted);
    font-size:.75rem;
}

.capster-skill-checkbox-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.5rem;
}

.capster-skill-checkbox{
    display:flex;
    align-items:center;
    gap:.55rem;
    min-height:42px;
    padding:.55rem .65rem;
    border:1px solid #f2d2e1;
    border-radius:10px;
    background:#fff;
    cursor:pointer;
    transition:.15s ease;
}

.capster-skill-checkbox:hover{
    background:#fff5f9;
    border-color:#ef9fc2;
}

.capster-skill-checkbox input{
    accent-color:var(--pink);
}

.capster-skill-checkbox span{
    color:#4a4149;
    font-size:.8rem;
    font-weight:600;
}

.capster-edit-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:.7rem;
    margin-top:1.2rem;
}

.capster-edit-cancel{
    border:1px solid #f2b7d2;
    background:#fff;
    color:var(--pink);
}

.capster-edit-cancel:hover{
    background:#fff0f7;
}

.capster-modal-open{
    overflow:hidden;
}

@media (max-width:700px){

    .capster-admin-item{
        grid-template-columns:44px minmax(0,1fr);
    }

    .capster-admin-item-icon{
        width:44px;
        height:44px;
        font-size:1.1rem;
    }

    .capster-admin-item-actions{
        grid-column:1 / -1;
        justify-content:flex-end;
    }

    .capster-skill-checkbox-grid{
        grid-template-columns:1fr;
    }

    .capster-edit-dialog{
        padding:20px;
    }

    .capster-edit-actions{
        flex-direction:column-reverse;
        align-items:stretch;
    }

    .capster-edit-actions .btn{
        width:100%;
    }

}


/* =========================================================
   PILIH CAPSTER - BOOKING PELANGGAN
   CSS KHUSUS, TIDAK MENGUBAH SLOT BOOKING LAIN
   ========================================================= */

.capster-booking-field{
    margin-top:1rem;
}
.capster-booking-field > label{
    display:block;
    margin-bottom:.15rem;
    font-weight:800;
    font-size:13px
}

.capster-booking-hint{
    margin:.30rem 0 .5rem;
    color:#000;
    font-size:.73rem;
    line-height:1.5;
    font-style:italic;
}

.customer-capster-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.7rem;
}

.customer-capster-card{
    position:relative;
    display:grid;
    grid-template-columns:34px minmax(0,1fr) 20px;
    align-items:center;
    gap:.5rem;
    min-height:34px;
    padding:.55rem .7rem;
    border:2px solid #f3bfd6;
    border-radius:10px;
    background:#fff;
    cursor:pointer;
    transition:.15s ease;
}

.customer-capster-card:hover{
    border-color:var(--pink);
    background:#fff8fb;
}

.customer-capster-card input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.customer-capster-card:has(input:checked){
    border-color:var(--pink);
    background:#fff0f7;
    box-shadow:0 5px 16px rgba(236,30,121,.10);
}

.customer-capster-avatar{
    width:26px;
    height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fde7f1;
    color:var(--pink);
    font-size:.85rem;
}

.customer-capster-info{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:.15rem;
}

.customer-capster-info strong{
    color:#3f3740;
    font-size:.86rem;
    font-weight:800;
}

.customer-capster-info small{
    color:var(--muted);
    font-size:.7rem;
    line-height:1.35;
}

.customer-capster-check{
    color:#d8c5cf;
    font-size:1rem;
}

.customer-capster-card:has(input:checked)
.customer-capster-check{
    color:var(--pink);
}

.capster-booking-status{
    min-height:20px;
    margin-top:.55rem;
    font-size:.78rem;
    font-weight:600;
}

.capster-booking-status.is-ready{
    color:#16a34a;
}

.capster-booking-status.is-error{
    color:#dc2626;
}

@media (max-width:700px){

    .customer-capster-grid{
        grid-template-columns:1fr;
    }

}

/* =========================================================
   BERANDA PELANGGAN - INTERAKTIF
   CSS KHUSUS BERANDA
   Tidak mengubah komponen booking/layanan/galeri lain
   ========================================================= */

/* =========================
   CTA BOOKING
   ========================= */

.home-booking-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;
    padding:1.35rem 1.5rem;
    border-radius:12px;
    background:linear-gradient(135deg,#fff1f7 0%,#ffe4f0 100%);
    border:1px solid #f3bfd6;
    box-shadow:0 6px 20px rgba(236,30,121,.08);
    transition:.2s ease;
}

.home-booking-cta:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 26px rgba(236,30,121,.12);
}

.home-booking-cta-content{
    display:flex;
    align-items:center;
    gap:1rem;
}

.home-booking-cta-icon{
    width:48px;
    height:48px;
    min-width:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    color:var(--pink);
    font-size:1.35rem;
    box-shadow:0 5px 15px rgba(236,30,121,.10);
}

.home-section-kicker{
    display:block;
    color:var(--pink);
    font-size:.66rem;
    font-weight:800;
    letter-spacing:.7px;
    margin-bottom:.2rem;
}

.home-booking-cta h2{
    margin:0;
    color:#3f3740;
    font-size:1.05rem;
    font-weight:800;
}

.home-booking-cta p{
    margin:.2rem 0 0;
    color:#050;
    font-size:.75rem;
    font-style: italic;
}

.home-booking-btn{
    white-space:nowrap;
}

.home-booking-btn{
    position:relative;
    overflow:hidden;
    transition:
        transform .2s ease,
        box-shadow .2s ease;

    animation:bookingPulse 1.2s ease-in-out infinite;
}

@keyframes bookingPulse{
    0%,100%{
        transform:scale(1);
        box-shadow:0 5px 15px rgba(236,30,121,.18);
    }

    50%{
        transform:scale(1.06);
        box-shadow:0 10px 30px rgba(236,30,121,.45);
    }
}
/* =========================
   SECTION
   ========================= */

.home-section{
    background:#fff;
    border:1px solid rgba(242,144,185,.25);
    border-radius:12px;
    padding:1.35rem;
    box-shadow:0 5px 18px rgba(236,30,121,.07);
}

.home-section-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1rem;
}

.home-section-heading h2{
    margin:0;
    color:#3f3740;
    font-size:1.15rem;
    font-weight:800;
}

.home-section-heading p{
    margin:.25rem 0 0;
    color:#050;
    font-size:.75rem;
    line-height:1.5;
    font-style:italic;
}

.home-see-all{
    flex:none;
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    color:var(--pink);
    font-size:.75rem;
    font-weight:800;
    text-decoration:none;
    transition:.15s ease;
}

.home-see-all:hover{
    gap:.55rem;
    color:#d80c68;
}


/* =========================
   LAYANAN
   ========================= */

.home-service-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.8rem;
}

.home-service-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:.7rem;
    border:2.5px solid #f1d6e2;
    border-radius:10px;
    background:#fff;
    overflow:hidden;
    transition:.2s ease;
}

.home-service-card:hover{
    transform:translateY(-4px);
    border-color:#ef8fba;
    box-shadow:0 10px 24px rgba(236,30,121,.11);
}

.home-service-icon{
    width:34px;
    height:34px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fde9f2;
    color:var(--pink);
    font-size:.95rem;
    margin-bottom:.45rem;
}

.home-service-content p{
    margin:0;
    min-height:30px;
    color:#4e4848;
    font-size:.70rem;
    line-height:1.4;
}
.home-service-top{
    display:flex;
    align-items:center;
    gap:.6rem;
    min-height:34px;
    margin-bottom:.45rem;
}

.home-service-title{
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:.05rem;
}

.home-service-title .home-service-category{
    display:block;
    margin:0;
    color:var(--pink);
    font-size:.65rem;
    font-weight:700;
    line-height:1.2;
}

.home-service-title h3{
    margin:0;
    color:#3f3740;
    font-size:.8rem;
    font-weight:800;
    line-height:1.25;
}
.home-service-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.5rem;
    margin-top:.45rem;
    padding-top:.4rem;
    border-top:1px solid #f4e3eb;
}

.home-service-meta span{
    color:#4e4848;
    font-size:.62rem;
    font-weight:750;
}

.home-service-meta span i{
    color:var(--pink);
    margin-right:.15rem;
}

.home-service-meta strong{
    color:var(--pink);
    font-size:.70rem;
}

.home-service-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.3rem;
    margin-top:.65rem;
    padding:.42rem .55rem;
    border-radius:7px;
    background:#fff1f7;
    color:var(--pink);
    text-decoration:none;
    font-size:.66rem;
    font-weight:800;
    transition:.15s ease;
}

.home-service-link:hover{
    background:var(--pink);
    color:#fff;
}


/* =========================
   GALERI
   ========================= */

.home-gallery-section{
    background:linear-gradient(180deg,#fff 0%,#fffafd 100%);
}

.home-gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:.7rem;
}

.home-gallery-card{
    display:block;
    overflow:hidden;
    border:1px solid #f1d6e2;
    border-radius:10px;
    background:#fff;
    text-decoration:none;
    transition:.2s ease;
}

.home-gallery-card:hover{
    transform:translateY(-4px);
    border-color:#ef8fba;
    box-shadow:0 10px 24px rgba(236,30,121,.11);
}

.home-gallery-image{
    position:relative;
    overflow:hidden;
    aspect-ratio:16/9;
    background:#fdeef5;
}

.home-gallery-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:.3s ease;
}

.home-gallery-card:hover .home-gallery-image img{
    transform:scale(1.05);
}

.home-gallery-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(226,20,111,.48);
    opacity:0;
    transition:.2s ease;
}

.home-gallery-card:hover .home-gallery-overlay{
    opacity:1;
}

.home-gallery-overlay span{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    padding:.4rem .65rem;
    border-radius:7px;
    background:#fff;
    color:var(--pink);
    font-size:.65rem;
    font-weight:800;
}

.home-gallery-caption{
    padding:.55rem .65rem .65rem;
}

.home-gallery-caption span{
    display:block;
    color:var(--pink);
    font-size:.6rem;
    font-weight:700;
    margin-bottom:.12rem;
}

.home-gallery-caption strong{
    display:block;
    color:#3f3740;
    font-size:.75rem;
    line-height:1.35;
}


/* =========================
   EMPTY
   ========================= */

.home-empty{
    min-height:120px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.35rem;
    color:#817984;
    font-size:.72rem;
}

.home-empty i{
    color:var(--pink);
    font-size:1.6rem;
}


/* =========================
   FINAL CTA
   ========================= */

.home-final-cta{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;
    overflow:hidden;
    padding:1.6rem 1.7rem;
    border-radius:12px;
    background:linear-gradient(135deg,#ec1e79 0%,#f94b9d 100%);
    color:#fff;
    box-shadow:0 10px 28px rgba(236,30,121,.2);
}

.home-final-cta::after{
    content:"";
    position:absolute;
    width:190px;
    height:190px;
    border-radius:50%;
    right:-70px;
    top:-90px;
    background:rgba(255,255,255,.12);
}

.home-final-cta > div:not(.home-final-cta-decoration),
.home-final-cta > a{
    position:relative;
    z-index:1;
}

.home-final-cta > div:not(.home-final-cta-decoration) > span{
    display:block;
    font-size:.62rem;
    font-weight:800;
    letter-spacing:.7px;
    margin-bottom:.25rem;
    opacity:.9;
}

.home-final-cta h2{
    margin:0;
    font-size:1.15rem;
    font-weight:800;
}

.home-final-cta p{
    margin:.25rem 0 0;
    font-size:.72rem;
    line-height:1.5;
    opacity:.9;
}

.home-final-cta .btn{
    background:#fff;
    color:var(--pink);
    box-shadow:none;
    white-space:nowrap;
}

.home-final-cta .btn:hover{
    background:#fff7fb;
}

.home-final-cta-decoration{
    position:absolute;
    right:130px;
    bottom:-20px;
    font-size:5rem;
    color:rgba(255,255,255,.12);
}


/* =========================
   RESPONSIVE
   ========================= */

@media(max-width:900px){

    .home-service-grid,
    .home-gallery-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

@media(max-width:650px){

    .home-booking-cta,
    .home-final-cta{
        flex-direction:column;
        align-items:flex-start;
    }

    .home-booking-btn{
        width:100%;
    }

    .home-section-heading{
        align-items:flex-start;
        flex-direction:column;
    }

    .home-see-all{
        margin-top:-.2rem;
    }

    .home-service-grid,
    .home-gallery-grid{
        grid-template-columns:1fr;
    }

    .home-gallery-image{
        aspect-ratio:16/10;
    }

}

.capster-add-btn{
    display:flex;
    align-items:center;
    gap:.4rem;
    white-space:nowrap;
    padding:.65rem 1rem;
}

@media (max-width:700px){
    .capster-admin-heading{
        flex-direction:column;
        align-items:flex-start;
    }

    .capster-add-btn{
        width:100%;
        justify-content:center;
    }
}

.capster-admin-item-actions{
    display:flex;
    align-items:center;
    gap:.5rem;
    flex-shrink:0;
}

.capster-delete-btn{
    border:1px solid #f3b4c9;
    background:#fff;
    color:#e11d48;
}

.capster-delete-btn:hover{
    background:#fff1f5;
    border-color:#e11d48;
    color:#be123c;
}

.capster-delete-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:1rem;
}

.capster-delete-modal.is-open{
    display:flex;
}

.capster-delete-overlay{
    position:absolute;
    inset:0;
    background:rgba(45,25,38,.45);
    backdrop-filter:blur(3px);
}

.capster-delete-dialog{
    position:relative;
    z-index:1;
    width:min(420px,100%);
    padding:2rem;
    background:#fff;
    border:1px solid #f4c4d7;
    border-radius:18px;
    box-shadow:0 20px 60px rgba(70,30,50,.2);
    text-align:center;
    animation:capsterDeletePop .18s ease-out;
}

.capster-delete-icon{
    width:58px;
    height:58px;
    margin:0 auto 1rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fff0f4;
    color:#e11d48;
    font-size:1.4rem;
}

.capster-delete-dialog h2{
    margin:0 0 .5rem;
    color:#302735;
    font-size:1.2rem;
    font-weight:800;
}

.capster-delete-dialog p{
    margin:.4rem 0;
    color:#6f6570;
    line-height:1.5;
}

.capster-delete-dialog p strong{
    color:#e11d73;
}

.capster-delete-dialog small{
    display:block;
    margin-top:.7rem;
    color:#9a8d96;
    line-height:1.5;
}

.capster-delete-actions{
    display:flex;
    justify-content:center;
    gap:.7rem;
    margin-top:1.5rem;
}

.capster-delete-cancel{
    min-width:100px;
    border:1px solid #e8cbd7;
    background:#fff;
    color:#665b63;
}

.capster-delete-cancel:hover{
    background:#fff7fa;
}

.capster-delete-confirm{
    min-width:110px;
    border:1px solid #e11d48;
    background:#e11d48;
    color:#fff;
}

.capster-delete-confirm:hover{
    background:#be123c;
}

@keyframes capsterDeletePop{

    from{
        opacity:0;
        transform:scale(.92) translateY(8px);
    }

    to{
        opacity:1;
        transform:scale(1) translateY(0);
    }

}

.capster-status-toggle{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    padding:.45rem .75rem;
    border-radius:8px;
    border:1px solid;
    background:#fff;
    font-weight:700;
    cursor:pointer;
    transition:.2s ease;
}

.capster-status-toggle.is-active{
    color:#16803c;
    border-color:#b7e4c7;
    background:#effbf3;
}

.capster-status-toggle.is-inactive{
    color:#dc2626;
    border-color:#f5b7c8;
    background:#fff1f4;
}

.capster-status-toggle:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(0,0,0,.06);
}

.capster-status-badge{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    margin-top:.35rem;
    padding:.25rem .55rem;
    border-radius:999px;
    font-size:.72rem;
    font-weight:800;
}

.capster-status-badge.is-active{
    color:#15803d;
    background:#eaf8ef;
}

.capster-status-badge.is-inactive{
    color:#dc2626;
    background:#fff0f3;
}
/* ============================================================
   ADMIN - HP CHROME "MODE DESKTOP"
   Chrome mobile desktop-mode biasanya memberi viewport 900-1100px,
   jadi layout admin diberi kanvas desktop agar tabel/form tidak gepeng.
   ============================================================ */
body.a-body{
    width:100%;
    min-width:0;
    min-height:100vh !important;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
}

body.a-body .a-main,
body.a-body .a-content,
body.a-body .a-topbar,
body.a-body .stat,
body.a-body .table-card,
body.a-body .page-title-card{
    min-width:0;
    box-sizing:border-box;
}

body.a-body .a-main{
    flex:1 0 auto;
    width:auto;
    max-width:100%;
    min-height:0 !important;
}

body.a-body .table-card{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

body.a-body .table-card .rs-table{
    min-width:720px;
}

body.a-body .table-card canvas{
    max-width:100%;
}

body.a-body .rs-footer2{
    flex:0 0 auto;
    transform:none;
    margin-left:var(--sidebar-w);
}

@media (min-width:861px) and (max-width:1100px){
    html{
        overflow-x:auto;
    }

    body.a-body{
        width:100%;
        min-width:1180px !important;
        min-height:100vh !important;
        display:flex;
        flex-direction:column;
        overflow-x:auto !important;
    }

    body.a-body .a-sidebar{
        width:min(78vw,248px) !important;
        height:100vh !important;
        max-height:100vh !important;
        transform:translateX(-100%);
        transition:.25s ease;
        padding:1.1rem .9rem !important;
        overflow-y:auto;
    }

    body.a-body .a-sidebar.open{
        transform:none;
    }

    body.a-body #aBurger{
        display:block !important;
        margin-bottom:.75rem;
    }

    body.a-body .a-main{
        flex:1 0 auto;
        margin-left:0 !important;
        width:1180px !important;
        min-width:1180px !important;
        min-height:0 !important;
        max-width:none !important;
        padding:16px 18px 14px !important;
        overflow:visible;
    }

    body.a-body .a-content{
        width:100%;
    }

    body.a-body .a-topbar{
        display:block;
        margin-bottom:18px !important;
    }

    body.a-body .page-title-card,
    body.a-body .booking-title-card,
    body.a-body .report-head{
        width:100% !important;
        max-width:100% !important;
        min-height:56px;
        padding:0 16px;
    }

    body.a-body .a-topbar h1,
    body.a-body .page-title-area h1,
    body.a-body .booking-title-card h1,
    body.a-body .report-title{
        font-size:1.45rem !important;
        line-height:1.2 !important;
    }

    body.a-body .a-topbar p,
    body.a-body .page-subtitle{
        max-width:100%;
        font-size:.78rem !important;
        line-height:1.5 !important;
    }

    body.a-body .subtitle-main,
    body.a-body .page-subtitle .subtitle-main{
        padding-left:0;
        font-size:1rem !important;
        line-height:1.35;
        margin-bottom:3px !important;
    }

    body.a-body .subtitle-desc,
    body.a-body .page-subtitle .subtitle-desc{
        padding-left:0;
        font-size:.74rem !important;
        line-height:1.45;
    }

    body.a-body .stat-grid,
    body.a-body .report-stat-grid{
        gap:.75rem !important;
    }

    body.a-body .stat-grid.c3,
    body.a-body .stat-grid.c4,
    body.a-body .stat-grid.c5,
    body.a-body .report-stat-grid{
        grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important;
    }

    body.a-body .stat{
        padding:1rem !important;
        border-radius:12px !important;
    }

    body.a-body .dashboard-card{
        min-height:0;
    }

    body.a-body .dashboard-head{
        gap:10px;
    }

    body.a-body .dashboard-icon,
    body.a-body .booking-stat-card .booking-icon,
    body.a-body .stock-stat-card .stock-icon,
    body.a-body .report-icon{
        width:44px;
        height:44px;
        min-width:44px;
        border-radius:11px;
        font-size:1.1rem;
    }

    body.a-body .stat .st-label,
    body.a-body .booking-stat-info .st-label,
    body.a-body .stock-stat-info .st-label{
        font-size:.76rem !important;
        line-height:1.35 !important;
    }

    body.a-body .stat .st-val,
    body.a-body .booking-stat-info .st-val,
    body.a-body .stock-stat-info .st-val{
        font-size:1.15rem !important;
        line-height:1.2 !important;
        overflow-wrap:anywhere;
    }

    body.a-body .dashboard-desc,
    body.a-body .compare,
    body.a-body .growth{
        font-size:.72rem !important;
        line-height:1.45 !important;
        overflow-wrap:anywhere;
    }

    body.a-body .btn-booking{
        position:static;
        margin-top:12px;
        width:100%;
        justify-content:center;
    }

    body.a-body .table-card{
        overflow-x:auto !important;
        -webkit-overflow-scrolling:touch;
    }

    body.a-body .table-toolbar,
    body.a-body .toolbar-right,
    body.a-body .toolbar-filter,
    body.a-body .layanan-toolbar,
    body.a-body .layanan-filter-form,
    body.a-body .report-filter{
        align-items:center;
        flex-direction:row;
        flex-wrap:wrap;
    }

    body.a-body .table-toolbar{
        gap:14px;
        padding:16px !important;
    }

    body.a-body .toolbar-right,
    body.a-body .toolbar-filter{
        width:auto;
        gap:10px;
    }

    body.a-body .search-box input,
    body.a-body .toolbar-filter select{
        width:auto !important;
        min-width:190px;
    }

    body.a-body .search-box{
        flex:1 1 230px;
    }

    body.a-body .search-box input{
        width:100% !important;
    }

    body.a-body .toolbar-right .btn,
    body.a-body .toolbar-right .btn-pink{
        width:auto !important;
        min-width:150px;
    }

    body.a-body .toolbar-filter .inp,
    body.a-body .filter-date,
    body.a-body .filter-year,
    body.a-body .filter-action,
    body.a-body .filter-action .btn{
        width:auto !important;
    }

    body.a-body .booking-design-layout{
        grid-template-columns:minmax(0,1fr) 340px !important;
    }

    body.a-body .service-design-layout{
        grid-template-columns:minmax(0,1fr) 390px !important;
    }

    body.a-body .produk-form-layout{
        grid-template-columns:minmax(0,1fr) 350px !important;
    }

    body.a-body .report-layout,
    body.a-body .layout-2col,
    body.a-body .layout-side{
        grid-template-columns:minmax(0,1.45fr) minmax(300px,.8fr) !important;
    }

    body.a-body .booking-side-panel,
    body.a-body .service-side-panel,
    body.a-body .report-right{
        position:sticky !important;
    }

    body.a-body .layanan-table{
        min-width:1120px !important;
    }

    body.a-body .booking-table{
        min-width:1240px !important;
    }

    body.a-body .stok-table{
        min-width:1120px !important;
    }

    body.a-body .daily-income-table,
    body.a-body .report-expense-table{
        min-width:840px !important;
    }

    body.a-body #popupReferensiPenuh{
        left:0;
        width:100vw;
        padding:14px;
    }

    body.a-body .rs-footer2{
        flex:0 0 auto;
        width:1180px;
        margin-left:0;
        padding:.65rem 0 .8rem;
    }
}

@media (hover:none) and (pointer:coarse) and (min-width:861px) and (max-width:1180px){
    html{
        overflow-x:auto;
    }

    body.a-body{
        min-width:1180px !important;
        min-height:100vh !important;
        display:flex;
        flex-direction:column;
        overflow-x:auto !important;
    }

    body.a-body .a-sidebar{
        width:min(78vw,248px) !important;
        height:100vh !important;
        max-height:100vh !important;
        transform:translateX(-100%);
        transition:.25s ease;
        padding:1.1rem .9rem !important;
        overflow-y:auto;
    }

    body.a-body .a-sidebar.open{
        transform:none;
    }

    body.a-body #aBurger{
        display:block !important;
        margin-bottom:.75rem;
    }

    body.a-body .a-main{
        flex:1 0 auto;
        margin-left:0 !important;
        width:1180px !important;
        min-width:1180px !important;
        min-height:0 !important;
        max-width:none !important;
    }

    body.a-body .stat-grid.c3,
    body.a-body .report-stat-grid{
        grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) !important;
    }

    body.a-body .stat-grid.c4,
    body.a-body .stat-grid.c5{
        grid-template-columns:repeat(auto-fit,minmax(205px,1fr)) !important;
    }

    body.a-body .booking-field-grid,
    body.a-body .service-field-grid,
    body.a-body .service-price-mode,
    body.a-body .stok-grid,
    body.a-body .method-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    body.a-body .produk-info-grid{
        grid-template-columns:240px minmax(0,1fr) !important;
    }

    body.a-body .booking-design-layout{
        grid-template-columns:minmax(0,1fr) 340px !important;
    }

    body.a-body .service-design-layout{
        grid-template-columns:minmax(0,1fr) 390px !important;
    }

    body.a-body .produk-form-layout{
        grid-template-columns:minmax(0,1fr) 350px !important;
    }

    body.a-body .report-layout,
    body.a-body .layout-2col,
    body.a-body .layout-side{
        grid-template-columns:minmax(0,1.45fr) minmax(300px,.8fr) !important;
    }

    body.a-body .booking-side-panel,
    body.a-body .service-side-panel,
    body.a-body .report-right{
        position:sticky !important;
    }

    body.a-body .booking-picker{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) 140px !important;
        margin:0 22px;
    }

    body.a-body .booking-title-card,
    body.a-body .booking-form-section,
    body.a-body .service-main-card,
    body.a-body .service-side-card,
    body.a-body .report-form-card,
    body.a-body .report-info{
        padding:18px !important;
    }

    body.a-body .service-product-row,
    body.a-body .takaran-header,
    body.a-body .takaran-row{
        grid-template-columns:minmax(180px,1.3fr) minmax(150px,.8fr) 74px !important;
    }

    body.a-body .takaran-header{
        grid-template-columns:minmax(180px,1.3fr) minmax(150px,.8fr) 74px !important;
    }

    body.a-body .service-product-header,
    body.a-body .takaran-header{
        display:grid;
    }

    body.a-body .upload-preview{
        width:100%;
        max-width:240px;
    }

    body.a-body .table-card .rs-table{
        min-width:1040px;
    }

    body.a-body .layanan-table,
    body.a-body .stok-table{
        min-width:1120px !important;
    }

    body.a-body .booking-table{
        min-width:1240px !important;
    }

    body.a-body .rs-footer2{
        flex:0 0 auto;
        width:1180px;
        margin-left:0;
        padding:.65rem 0 .8rem;
    }
}