#flowHome{
  padding:20px 8px;
  max-width:520px;
  margin:auto;
}

/* =========================
   WIZARD
========================= */

.flow-wizard{
  font-size:12px;
  color:#aaa;
  margin-bottom:18px;
}

.flow-wizard span{
  opacity:.4;
}

.flow-wizard span.active{
  color:#111;
  font-weight:600;
  opacity:1;
}

.flow-wizard .sep{
  margin:0 6px;
}

/* =========================
   STEP
========================= */

.flow-step{ display:none; }
.flow-step.active{ display:block; }

/* =========================
   TITLE
========================= */

.flow-title{
  font-size:18px;
  font-weight:600;
  margin-bottom:4px;
}

.flow-desc{
  font-size:13px;
  color:#666;
  margin-bottom:16px;
}

/* =========================
   BUTTON
========================= */

.flow-btn{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:16px 18px;
  margin:12px 0;
  border-radius:14px;
  border:1px solid #e5e5e5;
  background:#fff;
  text-align:left;
  transition:.2s;
}

.flow-btn:hover{
  background:#f7f7f7;
  border-color:#dcdcdc;
}

.btn-icon{
  flex-shrink:0;
  width:44px;
  height:44px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f2f4f6;
  color:#333;
  font-size:22px;
}

.btn-text{
  display:flex;
  flex-direction:column;
}

.btn-title{
  font-size:15px;
  font-weight:600;
  color:#111;
}

.btn-sub{
  font-size:12px;
  color:#777;
  margin-top:2px;
}

/* =========================
   BACK BUTTON
========================= */

.flow-back{
  background:none;
  border:none;
  color:#555;
  font-size:13px;
  margin-bottom:14px;
  cursor:pointer;
}

.flow-back:hover{
  text-decoration:underline;
}

/* =========================
   STORE META
========================= */

.store-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.meta-date,
.meta-location{
  padding:6px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
}

.meta-date{
  background:#e3f2fd;
  color:#1565c0;
}

.meta-location{
  background:#f1f8e9;
  color:#2e7d32;
}

/* =========================
   STORE CARD
========================= */

.flow-store-card{
  border:1px solid #eee;
  border-radius:12px;
  padding:14px 16px;
  margin-bottom:12px;
  background:#fff;
}

.flow-store-title{
  font-weight:700;
  font-size:14px;
  margin-bottom:8px;
  color:#222;
}

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

.status-card{
  padding:14px 16px;
  border-radius:10px;
  font-size:14px;
  line-height:1.6;
  border:1px solid transparent;
  margin-bottom:8px;
}

/* 🟢 BUKA */

.status-open{
  background:#e8f5e9;
  color:#1b5e20;
  border-color:#c8e6c9;
}

/* 🟡 SEGERA BUKA */

.status-soon-open{
  background:#fff8e1;
  color:#f57f17;
  border-color:#ffe082;
}

/* 🟠 SEGERA TUTUP */

.status-soon-close{
  background:#fff3e0;
  color:#e65100;
  border-color:#ffcc80;
}

/* 🔴 TUTUP */

.status-closed{
  background:#ffebee;
  color:#b71c1c;
  border-color:#ffcdd2;
}

/* 🟣 ISTIRAHAT */

.status-break{
  background:#ede7f6;
  color:#4527a0;
  border-color:#d1c4e9;
}

.status-label{
  margin-top:10px;
  padding:10px 12px;
  border-radius:8px;
  background:rgba(255,255,255,.55);
  font-size:13px;
  line-height:1.6;
}

/* =========================
   PARTIAL CLOSE
========================= */

.partial-close-box{
  margin-top:10px;
  padding:12px 14px;
  border-radius:10px;
  background:#fff7e6;
  border:1px solid #ffd59a;
}

.partial-close-title{
  font-size:12px;
  font-weight:600;
  padding: 4px;
  color:#ffffff;
  margin:4px 0 8px;   /* 🔥 ini kuncinya */
  line-height:1.35;   /* 🔥 biar teks padat */
  background:#616161;
}

.partial-cat-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:8px;
}

.partial-cat{
  background:#fff;
  border:1px solid #ffc676;
  color:#6b4c00;
  padding:3px 8px;
  border-radius:8px;
  font-size:11px;
}

.partial-close-status{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}

.close-label{
  background:#ffb84d;
  color:#fff;
  padding:3px 8px;
  border-radius:6px;
  font-size:11px;
  font-weight:600;
}

.close-time{
  font-size:12px;
  font-weight:600;
  color:#b26a00;
}

.partial-close-note{
  font-size:13px;
  color:#6b4c00;
  line-height:1.5;
  margin-top:6px;
  padding-top:6px;
  border-top:1px dashed rgba(0,0,0,0.08);
}

/* =========================
   DATE SWITCH
========================= */

.flow-jadwal-switch{
  display:flex;
  gap:10px;
  margin-bottom:14px;
}

.jadwal-tab{
  padding:10px 16px;
  border-radius:10px;
  border:1px solid #ddd;
  background:#fff;
  cursor:pointer;
  font-weight:600;
}

.jadwal-tab.active{
  background:#2b6cff;
  color:#fff;
  border-color:#2b6cff;
}

/* =========================
   DATE PICKER
========================= */

.flow-date-picker{
  display:none;
  margin-top:10px;
}

.flow-date-picker input{
  padding:8px 10px;
  border-radius:8px;
  border:1px solid #ddd;
  font-size:14px;
}
.store-booking-label{
  font-size:11px;
  margin-left:6px;
  padding:2px 6px;
  border-radius:6px;
  font-weight:600;
}

.store-booking-label.need{
  background:#fff3cd;
  color:#8a6d3b;
}

.store-booking-label.free{
  background:#e8f5e9;
  color:#2e7d32;
}

.store-booking-btn{
  margin-left:6px;
  padding:2px 6px;
  font-size:10px;
  background:#2b6cff;
  color:#fff;
  border-radius:4px;
  text-decoration:none;
  font-weight:600;
}

.store-booking-btn:hover{
  background:#1e54d4;
}

.store-booking-info{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:2px;
  margin-bottom:10px;
  font-size:12px;
}

.store-booking-label{
  padding:2px 8px;
  border-radius:6px;
  font-size:11px;
}

.store-booking-label.need{
  background:#fff3cd;
  color:#8a6d00;
}

.store-booking-label.free{
  background:#e6f4ea;
  color:#1e7e34;
}

.store-booking-btn{
  font-size:11px;
  padding:3px 8px;
  border-radius:6px;
  background:#2b6cff;
  color:#fff;
  text-decoration:none;
}