.cart-content {
  display: none; /* SEMBUNYI SEJAK AWAL */
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-state h2 {
  font-size: 18px;
  margin-bottom: 8px;
}

.empty-state p {
  color: #777;
  margin-bottom: 16px;
}

.header-payment {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  display: flex;
  align-items: center;
  gap: 35%;
  padding: 12px 16px;
  margin: 0 auto;
	max-width: 420px;

  z-index: 999;           /* supaya di atas */
	background-color: #fff;
	box-shadow: 0 4px 8px #0000001a;
	border-radius: 0 0 5px 5px;
}

.header-payment h1 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  
  font-size: 22px;
  margin: 0;
  white-space: nowrap;
}

.back {
	font-size: 20px;
	z-index: 2;
  cursor: pointer;
}

.body-payment {
	padding-top: 56px;
}

.order-type{
  border:1px solid var(--primary);
  border-radius:10px;
  padding:12px;
  display:flex;
  justify-content:space-between;
  margin: 1rem;
}

.section-title-payment {
	font-size: 16px;
	margin: 1rem;
}

.menu-list-payment {
	display: flex;
	gap: 12px;
	overflow-x: auto;
  /* Firefox */
  scrollbar-width: none;

  /* IE & Edge lama */
  -ms-overflow-style: none;
  margin: 1rem;
}

/* Chrome, Safari, Edge */
.menu-list-payment::-webkit-scrollbar {
  display: none;
}

.menu-card-payment {
	background: #fff;
	border-radius: 12px;
	padding: 10px;
	min-width: 220px;
	display: flex;
	gap: 10px;
	align-items: center;
  box-shadow: 
    0 4px 12px rgba(0,0,0,0.08),
    0 1px 3px rgba(0,0,0,0.05);
  transition: transform .15s ease, box-shadow .15s ease;
  justify-content: space-between;
}

.menu-card-payment:hover{
  transform: translateY(-2px);
  box-shadow:
    0 8px 20px rgba(0,0,0,0.12),
    0 2px 6px rgba(0,0,0,0.08);
}

.menu-card-payment img {
	width: 56px;
	height: 56px;
	border-radius: 8px;
}

.menu-card-payment p {
	margin: 4px 0 0;
	font-size: 13px;
}

.add-payment {
	margin-left: auto;
	border: 1px solid var(--primary);
	background: #fff;
	color: var(--primary);
	border-radius: 50%;
	width: 28px;
	height: 28px;
}

.add-payment:hover{
	background: var(--primary);
	color: var(--bg);
}

.item-header-payment{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin: 1rem;
}
.item-header-payment h2 {
	font-size: 16px;
	margin: 0;
}
.btn-outline-payment{
  border:1px solid var(--primary);
  background:#fff;
  color:var(--primary);
  padding:6px 10px;
  border-radius:8px;
}
.btn-outline-payment:hover {
	background: var(--primary);
	color: var(--bg);
}

.item-card-payment{
  background:#fff;
  border-radius:12px;
  /*padding:14px;*/
  margin: 1rem;
}
.item-top-payment{
  display:flex;
  justify-content:space-between;
}
.item-top-payment h5 {
	font-weight: bold;
}
.edit-payment {
  border:1px solid var(--primary);
  background:#fff;
  color:var(--primary);
  padding:6px 10px;
  border-radius:8px;
}
.edit-payment:hover{
	background: var(--primary);
	color: var(--bg);
}
.item-option{
	color: var(--grey);
	margin-bottom: 1rem;
}
.item-card-payment ul{
  padding-left:18px;
  margin:10px 0;
  font-size:14px;
  color: grey;
}
.note-payment{
  color:var(--primary);
  font-size:13px;
  font-style: italic;
}
.item-bottom-payment{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.qty-payment{
  display:flex;
  gap:8px;
  align-items:center;
}
.qty-payment button{
	margin-left: auto;
	border: 1px solid var(--primary);
	background: #fff;
	color: var(--primary);
	border-radius: 50%;
	width: 28px;
	height: 28px;
}
.qty-payment button:hover {
	background: var(--primary);
	color: var(--bg);
}

.note-box-payment{
	margin: 2rem 1rem;
  padding:12px;
  background:#fff;
  border-left:4px solid var(--primary);
  border-radius:10px;
  color:var(--text);
  cursor: pointer;
}

.payment-card{
  background:#fff;
  border-radius:12px;
  padding:14px;
	border: 1px solid var(--primary);
  margin: 1rem 1rem 12rem 1rem;
}
.payment-card h3{
  margin-top:0;
  text-align: center;
}
.row-payment {
  display:flex;
  justify-content:space-between;
  padding:6px 0;
}
.muted{
  color:var(--grey);
}
.payment-text{
  color:var(--primary);
}

.bottom-bar-payment{
	background-color: #fff;
	box-shadow: 0 -4px 12px #00000026;
	border-radius: 16px 16px 0 0;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 420px;
	height: 15dvh;
	margin: 0 auto;
	z-index: 1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 16px;
}

.bottom-bar-payment span {
	font-size: 14px;
}

.bottom-bar-payment h5 {
	font-size: 20px;
	font-weight: bold;
}

.pay-btn-payment{
  background:var(--primary);
  border:none;
  color:#fff;
  padding:12px 16px;
  border-radius:10px;
  font-weight:600;
}

.pay-btn-payment:hover {
	background: var(--primary-hover);
}

.note-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100%;
  max-width: 420px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 16px;
}

.note-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}

.note-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 20px;
  /*animation: slideUp .25s ease;*/
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.note-header h3 {
  margin: 0;
  font-size: 18px;
}

.note-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
}

#noteInput {
  width: 100%;
  height: 120px;
  margin: 16px 0;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #ddd;
  resize: none;
  font-size: 14px;
}

.note-submit {
  width: 100%;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.note-submit:hover {
  background: var(--primary-hover);
}

/* default: hidden */
.note-modal {
  pointer-events: none;
}

.note-overlay {
  opacity: 0;
  transition: opacity .25s ease;
}

.note-sheet {
  transform: translateY(100%);
  transition: transform .25s ease;
}

/* visible */
.note-modal.show {
  pointer-events: auto;
}

.note-modal.show .note-overlay {
  opacity: 1;
}

.note-modal.show .note-sheet {
  transform: translateY(0);
}

.skeleton {
  animation: pulse 1.4s ease-in-out infinite;
}

.sk-title,
.sk-btn,
.sk-text,
.sk-price,
.sk-qty {
  background: #eee;
  border-radius: 6px;
}

.sk-title {
  width: 60%;
  height: 16px;
}

.sk-btn {
  width: 40px;
  height: 16px;
}

.sk-text {
  width: 80%;
  height: 12px;
  margin: 8px 0;
}

.sk-price {
  width: 80px;
  height: 16px;
}

.sk-qty {
  width: 60px;
  height: 24px;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: .4; }
  100% { opacity: 1; }
}