/* booking.html (the patient's own booking) */
.top .btn { margin-left: auto; }
.manage-wrap { padding: 48px 0 80px; max-width: 560px; }
.ticket { padding: 32px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ticket h1 { font-size: clamp(34px, 6vw, 46px); line-height: 1.05; margin: 10px 0 10px; }
.t-line { color: var(--ink-2); margin: 0 0 22px; font-size: 18px; }
.ticket .msg { color: var(--warn); }
.ticket .ok { color: #1F6B48; }
.t-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.btn.ghost.danger-ghost { color: var(--warn); }
.btn.ghost.danger-ghost.confirm { background: var(--warn); color: #fff; box-shadow: none; }
.ticket .fine { margin: 14px 0 0; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font: 500 13px/1.2 var(--f-mono); background: var(--mint); color: var(--teal); }
.badge.cancelled { background: var(--warn-bg); color: var(--warn); }
.made-up-note { margin: 20px 4px 0; font-size: 14px; color: var(--ink-2); text-align: center; }
@media (max-width: 480px) { .ticket { padding: 24px 18px; } .t-actions { grid-template-columns: minmax(0, 1fr); } .manage-wrap { padding-top: 24px; } }