/* ═══════════════════════════════════════════════════════
   Photo Vivid — Booking page
   Style giống Bestie Booth (kem/burgundy/serif mảnh)
   ═══════════════════════════════════════════════════════ */

:root {
  --bg: #f6efe4;
  --bg-card: #faf5ed;
  --burgundy: #6a1f2e;
  --burgundy-hover: #531824;
  --gold: #b08c5a;
  --text: #1a1a1a;
  --text-mute: #999;
  --border: rgba(0,0,0,.1);
  --status-free-bg: #e2efde;
  --status-free: #2e7d32;
  --status-busy-bg: #e8dfd3;
  --status-busy: #8b4513;
}

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

html, body { height: 100%; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ═══════ TOP BAR ═══════ */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.brand { display: flex; flex-direction: column; line-height: 1; }
.brand-script {
  font-family: 'Pacifico', cursive;
  font-size: 26px;
  color: var(--burgundy);
}
.brand-tag {
  font-size: 8px;
  letter-spacing: 0.3em;
  color: var(--burgundy);
  opacity: 0.75;
  text-transform: uppercase;
  margin-top: 3px;
}
.step-label {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--text-mute);
  text-transform: uppercase;
}

/* ═══════ PAGE ═══════ */
.page {
  flex: 1;
  padding: 56px 32px 80px;
  width: 100%;
  max-width: 100%;
}

.screen { display: none; }
.screen.active { display: block; animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ═══════ TITLES ═══════ */
.title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--text);
}
.subtitle {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: 36px;
}
.hello {
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}

/* ═══════ INPUTS ═══════ */
.input {
  display: block;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 18px 20px;
  font-size: 15px;
  margin-bottom: 14px;
  color: var(--text);
  font-family: inherit;
  transition: border-color .15s;
}
.input:focus { outline: none; border-color: var(--burgundy); }
.input::placeholder { color: #b0a89a; }

/* ═══════ BUTTONS ═══════ */
.btn-primary {
  display: block;
  width: 100%;
  background: var(--burgundy);
  color: #fff;
  border: none;
  padding: 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 6px;
  font-family: inherit;
  transition: background .15s;
}
.btn-primary:hover { background: var(--burgundy-hover); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

.back-link {
  display: block;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text-mute);
  text-decoration: none;
  margin-top: 36px;
  cursor: pointer;
  text-transform: uppercase;
}
.back-link:hover { color: var(--burgundy); }

/* ═══════ ROOMS ═══════ */
.room-list { margin-top: 8px; border-bottom: 1px solid var(--border); }
.room-item {
  border-top: 1px solid var(--border);
  padding: 22px 4px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  cursor: pointer;
  transition: padding-left .15s, background .15s;
}
.room-item:hover:not(.disabled) {
  padding-left: 12px;
  background: rgba(106,31,46,.02);
}
.room-info { flex: 1; min-width: 0; }
.room-name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.room-themes {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: 4px;
  word-break: break-word;
}
.room-cap {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--text-mute);
  text-transform: uppercase;
}
.room-status {
  flex-shrink: 0;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 12px;
  font-weight: 600;
  white-space: nowrap;
}
.room-status.free { background: var(--status-free-bg); color: var(--status-free); }
.room-status.busy { background: var(--status-busy-bg); color: var(--status-busy); }
.room-item.disabled { opacity: 0.65; cursor: not-allowed; }

/* ═══════ PACKAGES ═══════ */
.package-list { margin: 8px 0 28px; border-bottom: 1px solid var(--border); }
.package-item {
  border-top: 1px solid var(--border);
  padding: 22px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: padding-left .15s, background .15s;
}
.package-item:hover {
  padding-left: 12px;
  background: rgba(106,31,46,.02);
}
.package-item.active {
  border: 1px solid var(--burgundy);
  padding: 22px 14px;
  background: rgba(106,31,46,.03);
  margin: -1px 0;
  position: relative;
  z-index: 1;
}
.package-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.package-duration {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-mute);
  margin-left: 8px;
  text-transform: uppercase;
}
.package-price {
  font-size: 15px;
  font-weight: 600;
  color: var(--gold);
  white-space: nowrap;
}

/* ═══════ PACKAGE EXTRAS ═══════ */
.package-extras { display: none; }
.package-extras.show { display: block; animation: fadeIn .25s ease; }

.discount-row {
  display: flex;
  margin-bottom: 24px;
}
.input-flat {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-right: none;
  padding: 16px 20px;
  font-size: 12px;
  letter-spacing: 0.18em;
  font-family: inherit;
  color: var(--text);
  text-transform: uppercase;
}
.input-flat::placeholder { color: #b0a89a; letter-spacing: 0.22em; }
.input-flat:focus { outline: none; }
.btn-apply {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0 28px;
  font-size: 11px;
  letter-spacing: 0.22em;
  cursor: pointer;
  text-transform: uppercase;
  color: var(--text-mute);
  font-family: inherit;
  font-weight: 500;
}
.btn-apply:hover { color: var(--burgundy); }

.totals { margin-bottom: 28px; }
.total-line {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.total-line span:last-child { font-size: 14px; font-weight: 600; }
.total-line.big {
  font-size: 11px;
  letter-spacing: 0.18em;
}
.total-line.big span:last-child {
  font-size: 18px;
  font-weight: 700;
  color: var(--gold);
}

.section-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.pay-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 24px;
}
.pay-method {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 18px 12px;
  font-size: 12px;
  letter-spacing: 0.18em;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-mute);
  text-transform: uppercase;
  font-weight: 500;
  transition: all .15s;
}
.pay-method + .pay-method { border-left: none; }
.pay-method.active {
  border-color: var(--burgundy);
  color: var(--burgundy);
  font-weight: 700;
  background: rgba(106,31,46,.04);
  position: relative;
  z-index: 1;
}

/* ═══════ QR PAYMENT ═══════ */
.qr-block { text-align: center; margin-top: 16px; }
.qr-meta-label {
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: 8px;
  margin-top: 24px;
}
.qr-amount {
  font-size: 34px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.qr-content {
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text);
}
.qr-img {
  width: 280px;
  height: 280px;
  max-width: 80vw;
  max-height: 80vw;
  margin: 24px auto;
  display: block;
  background: #fff;
  padding: 12px;
  border: 1px solid var(--border);
}
.qr-hint {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: 32px;
}
.qr-expire {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.qr-expire span { color: var(--text); font-weight: 600; }
.qr-status {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--burgundy);
  margin-bottom: 32px;
}
.qr-status .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--burgundy);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
.link-danger {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text-mute);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  padding: 8px;
}
.link-danger:hover { color: #b8323c; }

/* ═══════ CASH CODE ═══════ */
.cash-block { text-align: center; margin-top: 16px; }
.cash-code {
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--burgundy);
  padding: 20px 32px;
  border: 2px dashed var(--burgundy);
  margin: 12px auto 0;
  display: inline-block;
}

/* ═══════ FOOTER ═══════ */
.footer {
  text-align: center;
  padding: 36px 16px 24px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.brand-footer { margin-bottom: 16px; }
.brand-script-lg {
  font-family: 'Pacifico', cursive;
  font-size: 26px;
  color: var(--burgundy);
  line-height: 1;
}
.brand-tag-sm {
  font-size: 8px;
  letter-spacing: 0.32em;
  color: var(--burgundy);
  opacity: 0.75;
  margin-top: 4px;
  text-transform: uppercase;
}
.social {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin: 14px 0 18px;
}
.social a {
  color: var(--burgundy);
  font-size: 18px;
  text-decoration: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(106,31,46,.2);
  transition: background .15s, color .15s;
}
.social a svg { width: 16px; height: 16px; display: block; }
.social a:hover { background: var(--burgundy); color: #fff; }
.copyright {
  font-size: 11px;
  color: var(--text-mute);
  margin-bottom: 4px;
}
.powered {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--text-mute);
  text-transform: uppercase;
  opacity: 0.7;
}

/* ═══════ RESPONSIVE ═══════ */
@media (max-width: 600px) {
  .topbar { padding: 12px 18px; }
  .brand-script { font-size: 22px; }
  .step-label { font-size: 10px; }
  .page { padding: 36px 18px 60px; }
  .title { font-size: 18px; }
  .subtitle { margin-bottom: 28px; }
  .qr-img { width: 240px; height: 240px; }
  .cash-code { font-size: 32px; padding: 16px 22px; }
  .qr-amount { font-size: 28px; }
  .pay-method { padding: 14px 6px; font-size: 11px; }
}

@media (min-width: 900px) {
  .page { padding: 64px 80px 100px; }
}