/* ===== SUCCESS POPUP MODAL ===== */
#successModal {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 20px;
}
#successModal.open { display: flex; }

.sm-box {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.09);
  width: 100%; max-width: 440px;
  overflow: hidden;
  animation: smZoomIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}
@keyframes smZoomIn {
  from { opacity:0; transform:scale(0.8); }
  to   { opacity:1; transform:scale(1); }
}

/* Colored top bar */
.sm-top {
  padding: 28px 28px 20px;
  text-align: center;
  position: relative;
}
.sm-top::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.sm-top.type-booking::before { background: linear-gradient(90deg,var(--accent),#f5a342); }
.sm-top.type-order::before   { background: linear-gradient(90deg,#22c55e,#4ade80); }

.sm-icon {
  width: 72px; height: 72px; border-radius: 50%;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: #fff;
  animation: smIconPop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
}
@keyframes smIconPop {
  from { transform: scale(0) rotate(-45deg); }
  to   { transform: scale(1) rotate(0deg); }
}
.sm-top.type-booking .sm-icon { background: linear-gradient(135deg,var(--accent),#f5a342); box-shadow: 0 8px 30px rgba(232,128,10,0.4); }
.sm-top.type-order   .sm-icon { background: linear-gradient(135deg,#22c55e,#4ade80); box-shadow: 0 8px 30px rgba(34,197,94,0.4); }

.sm-title { font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700; color:#111111; margin-bottom:6px; }
.sm-subtitle { font-size:12px; color:rgba(0,0,0,0.5); }

/* ID box */
.sm-id-box {
  margin: 0 28px 0;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: 10px; padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
}
.sm-id-label { font-size:10px; color:rgba(0,0,0,0.45); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:4px; }
.sm-id-value { font-family:'Playfair Display',serif; font-size:1.3rem; font-weight:800; letter-spacing:2px; }
.type-booking .sm-id-value { color:var(--accent); }
.type-order   .sm-id-value { color:#22c55e; }
.sm-id-copy {
  background:none; border:1px solid rgba(0,0,0,0.12); color:rgba(0,0,0,0.45);
  padding:6px 12px; border-radius:6px; cursor:pointer; font-size:11px;
  transition:all 0.2s; font-family:sans-serif;
}
.sm-id-copy:hover { border-color:var(--accent); color:var(--accent); }

/* Details */
.sm-details { padding:16px 28px; display:flex; flex-direction:column; gap:8px; }
.sm-detail-row {
  display:flex; align-items:center; gap:10px;
  font-size:12px; color:rgba(0,0,0,0.6);
}
.sm-detail-row i { width:16px; text-align:center; font-size:12px; }
.sm-detail-row strong { color:#111111; margin-left:auto; }

/* Actions */
.sm-actions { padding:16px 28px 24px; display:flex; flex-direction:column; gap:8px; }
.sm-track-btn {
  width:100%; padding:13px; border-radius:8px; border:none; cursor:pointer;
  font-family:sans-serif; font-size:13px; font-weight:700; letter-spacing:0.5px;
  display:flex; align-items:center; justify-content:center; gap:9px;
  transition:all 0.25s; text-decoration:none;
}
.type-booking .sm-track-btn { background:var(--accent); color:#fff; }
.type-booking .sm-track-btn:hover { background:#f5a342; transform:translateY(-2px); }
.type-order   .sm-track-btn { background:#22c55e; color:#000; }
.type-order   .sm-track-btn:hover { background:#4ade80; transform:translateY(-2px); }
.sm-close-btn {
  width:100%; padding:10px; border-radius:8px;
  background:rgba(0,0,0,0.04); border:1px solid rgba(0,0,0,0.09);
  color:rgba(0,0,0,0.5); cursor:pointer; font-size:12px;
  transition:all 0.2s; font-family:sans-serif;
}
.sm-close-btn:hover { background:rgba(0,0,0,0.08); color:#111111; }