/* AceKing screenshot edition: secondary views and transient UI only.
   Main four screens remain the supplied screenshots. All selectors are x-prefixed. */

.x-layer,
.x-overlay,
.x-toast {
  --x-black: #090604;
  --x-ink: #170c07;
  --x-panel: #211209;
  --x-gold: #dca754;
  --x-gold-light: #f8dc9b;
  --x-gold-dark: #82502a;
  --x-line: rgba(232, 174, 88, .62);
  --x-muted: #c9b8a4;
  --x-ease: cubic-bezier(.22, 1, .36, 1);
  --x-serif: "Songti SC", "STSong", "Noto Serif SC", Georgia, serif;
  --x-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #fff3dc;
  font-family: var(--x-sans);
  -webkit-font-smoothing: antialiased;
}

.x-layer *,
.x-layer *::before,
.x-layer *::after,
.x-overlay *,
.x-overlay *::before,
.x-overlay *::after,
.x-toast *,
.x-toast *::before,
.x-toast *::after { box-sizing: border-box; }

.x-layer [hidden],
.x-overlay [hidden],
.x-toast[hidden] { display: none !important; }

.x-layer button,
.x-overlay button,
.x-layer input,
.x-overlay input,
.x-layer textarea,
.x-overlay textarea { font: inherit; }

.x-layer button,
.x-overlay button { cursor: pointer; -webkit-tap-highlight-color: transparent; }

.x-layer :is(button, a, input, textarea, select):focus-visible,
.x-overlay :is(button, a, input, textarea, select):focus-visible {
  outline: 2px solid #ffe9af;
  outline-offset: 3px;
}

.x-layer :is(button, a):disabled,
.x-overlay :is(button, a):disabled { cursor: not-allowed; opacity: .46; }

/* Full secondary page. Place directly inside the screenshot-sized phone stage. */
.x-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(ellipse 95% 40% at 55% 7%, rgba(130, 63, 16, .28), transparent 75%),
    radial-gradient(ellipse 90% 50% at 5% 90%, rgba(92, 40, 13, .17), transparent 76%),
    #070504;
  animation: x-page-enter .42s var(--x-ease) both;
}

.x-layer.x-is-leaving { pointer-events: none; animation: x-page-leave .28s ease both; }
.x-layer.x-is-backward { animation-name: x-page-back; }

.x-layer::before,
.x-sheet::before,
.x-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(135deg, transparent 0 2px, rgba(251, 183, 89, .035) 2px 3px, transparent 3px 7px),
    radial-gradient(circle at 20% 30%, rgba(253, 183, 79, .1), transparent 28%),
    radial-gradient(circle at 84% 80%, rgba(152, 67, 20, .12), transparent 36%);
  opacity: .5;
}

.x-detail-header {
  position: relative;
  z-index: 2;
  flex: none;
  min-height: 104px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 42px 54px 16px;
  border-bottom: 1px solid rgba(224, 167, 81, .24);
  background: #030303;
}

.x-detail-header h1 {
  margin: 0;
  color: #f5e8d2;
  font-family: var(--x-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .045em;
  line-height: 1.4;
  text-align: center;
}

.x-detail-back,
.x-detail-action {
  position: absolute;
  bottom: 11px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--x-gold-light);
}
.x-detail-back { left: 12px; }
.x-detail-action { right: 12px; }
.x-detail-back svg,
.x-detail-action svg { width: 20px; height: 20px; }

.x-detail-scroll {
  position: relative;
  z-index: 1;
  min-height: 0;
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding-bottom: 26px;
}
.x-detail-scroll::-webkit-scrollbar,
.x-sheet-scroll::-webkit-scrollbar { display: none; }

.x-detail-hero {
  position: relative;
  width: 100%;
  min-height: 180px;
  overflow: hidden;
  background: #160b06;
}
.x-detail-hero img { display: block; width: 100%; height: 210px; object-fit: cover; }
.x-detail-hero::after {
  content: "";
  position: absolute;
  inset: 25% 0 0;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(7, 4, 2, .82));
}
.x-detail-hero-copy { position: absolute; z-index: 1; left: 7%; right: 7%; bottom: 17px; }
.x-detail-hero-copy small { display: block; color: var(--x-gold-light); font-size: 10px; letter-spacing: .18em; }
.x-detail-hero-copy h2 { margin: 4px 0 0; font: 600 28px/1.25 var(--x-serif); letter-spacing: .06em; }

.x-detail-content { padding: 20px 18px 24px; }
.x-detail-footer,
.x-sheet-footer {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  gap: 10px;
  padding: 12px 18px max(18px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(228, 169, 83, .28);
  background: linear-gradient(#170c08, #080504);
  box-shadow: 0 -10px 25px rgba(0, 0, 0, .25);
}
.x-detail-footer > .x-button,
.x-sheet-footer > .x-button { flex: 1; }

/* Cards, data rows and form controls for voucher, wallet, order and booking views. */
.x-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--x-line);
  border-radius: 17px;
  background:
    radial-gradient(ellipse at 5% 2%, rgba(173, 88, 23, .26), transparent 43%),
    linear-gradient(135deg, #231106, #0f0805 76%);
  box-shadow: inset 0 1px 0 rgba(255, 230, 173, .13), 0 10px 25px rgba(0, 0, 0, .22);
}
.x-card > * { position: relative; z-index: 1; }
.x-card + .x-card { margin-top: 12px; }
.x-card-pad { padding: 18px; }
.x-card-title { margin: 0; color: var(--x-gold-light); font: 600 22px/1.35 var(--x-serif); letter-spacing: .04em; }
.x-eyebrow { display: block; margin-bottom: 6px; color: var(--x-gold); font-size: 10px; letter-spacing: .16em; }
.x-copy { margin: 9px 0 0; color: var(--x-muted); font-size: 12px; line-height: 1.7; }
.x-price { color: var(--x-gold-light); font-size: 28px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.x-price small { margin-right: 2px; font-size: .55em; }
.x-rule { height: 1px; margin: 15px 0; border: 0; background: linear-gradient(90deg, transparent, rgba(233, 183, 94, .7), transparent); }

.x-list { display: grid; gap: 0; }
.x-row {
  min-height: 59px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid rgba(221, 165, 85, .28);
  color: #f4e8d8;
  font-size: 13px;
}
.x-row:last-child { border-bottom: 0; }
.x-row > :first-child { flex: 1; }
.x-row strong { font-weight: 650; }
.x-row small { color: var(--x-muted); font-size: 11px; }
.x-row-value { flex: none; color: var(--x-gold-light); font-variant-numeric: tabular-nums; }
.x-row-button { width: 100%; border: 0; background: transparent; text-align: left; }
.x-row-button:active { background: rgba(220, 167, 84, .09); }

.x-field-label { display: block; margin: 17px 0 8px; color: var(--x-gold-light); font: 600 15px/1.4 var(--x-serif); }
.x-field {
  width: 100%;
  min-height: 45px;
  border: 1px solid rgba(222, 171, 93, .48);
  border-radius: 10px;
  padding: 11px 13px;
  background: #110a06;
  color: #fff3df;
  font-size: 13px;
  line-height: 1.4;
  appearance: none;
}
.x-field::placeholder { color: #958471; }
.x-field:focus { border-color: var(--x-gold-light); }
textarea.x-field { min-height: 86px; resize: vertical; }
.x-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.x-choice {
  min-height: 54px;
  display: grid;
  place-items: center;
  gap: 3px;
  border: 1px solid rgba(213, 151, 68, .43);
  border-radius: 11px;
  padding: 9px 5px;
  background: #1b0d07;
  color: #f2e4cf;
  text-align: center;
  transition: border-color .2s, background .2s, transform .2s;
}
.x-choice strong { font-size: 15px; font-weight: 650; }
.x-choice small { color: var(--x-muted); font-size: 10px; }
.x-choice[aria-pressed="true"],
.x-choice.x-is-selected {
  border-color: #f4cf82;
  background: linear-gradient(145deg, #6f3f15, #2b1509);
  color: #fff2d6;
  box-shadow: inset 0 0 0 1px rgba(255, 225, 152, .24), 0 0 15px rgba(213, 134, 35, .14);
}
.x-choice:active { transform: scale(.975); }

.x-button {
  min-height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #e9b263;
  border-radius: 999px;
  padding: 9px 18px;
  color: #1e1006;
  background: linear-gradient(180deg, #ffe5a1, #e5a950 55%, #c07b2e);
  box-shadow: inset 0 1px 0 rgba(255, 250, 219, .76), 0 4px 16px rgba(144, 69, 12, .24);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .22s var(--x-ease), filter .22s, box-shadow .22s;
}
.x-button:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 250, 219, .8), 0 7px 22px rgba(180, 92, 21, .35); }
.x-button:active { transform: scale(.965); filter: brightness(.98); }
.x-button--outline { color: var(--x-gold-light); background: linear-gradient(180deg, #231209, #0c0604); box-shadow: inset 0 0 0 1px rgba(255, 219, 142, .15); }
.x-button--quiet { border-color: rgba(228, 179, 97, .24); color: var(--x-gold-light); background: rgba(27, 15, 9, .64); box-shadow: none; }
.x-button--block { width: 100%; }
.x-button svg { width: 17px; height: 17px; }
.x-icon-button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid rgba(229, 178, 99, .55);
  border-radius: 50%;
  background: #170b06;
  color: var(--x-gold-light);
}
.x-icon-button svg { width: 17px; height: 17px; }

/* Bottom sheet: self-contained so it can sit above any of the four screenshots. */
.x-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.x-overlay.x-is-closing { pointer-events: none; }
.x-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(0, 0, 0, .69);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  animation: x-scrim-in .27s ease both;
}
.x-overlay.x-is-closing .x-scrim { animation: x-scrim-out .24s ease both; }
.x-sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 87%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #a57537;
  border-bottom: 0;
  border-radius: 23px 23px 0 0;
  background:
    radial-gradient(ellipse at 5% 0, rgba(164, 82, 24, .29), transparent 45%),
    linear-gradient(135deg, #241208, #0c0705 76%);
  box-shadow: inset 0 1px 0 rgba(255, 221, 152, .42), 0 -20px 60px rgba(0, 0, 0, .62);
  animation: x-sheet-in .4s var(--x-ease) both;
}
.x-overlay.x-is-closing .x-sheet { animation: x-sheet-out .29s ease both; }
.x-sheet > * { position: relative; z-index: 1; }
.x-sheet-handle { width: 38px; height: 4px; flex: none; margin: 10px auto 2px; border-radius: 99px; background: rgba(244, 206, 141, .65); }
.x-sheet-header { min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 18px 13px; border-bottom: 1px solid rgba(225, 172, 88, .28); }
.x-sheet-header h2 { margin: 0; color: var(--x-gold-light); font: 600 22px/1.3 var(--x-serif); letter-spacing: .04em; }
.x-sheet-header .x-icon-button { width: 31px; height: 31px; }
.x-sheet-scroll { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 18px 18px 24px; }
.x-sheet-image { display: block; width: 100%; height: 175px; border: 1px solid rgba(228, 172, 89, .42); border-radius: 12px; object-fit: cover; }
.x-sheet-title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 15px 0 6px; }
.x-sheet-title h3 { margin: 0; color: var(--x-gold-light); font: 600 23px/1.35 var(--x-serif); }
.x-sheet-title .x-price { flex: none; }
.x-sheet-subtitle { margin: 0; color: var(--x-muted); font-size: 12px; line-height: 1.6; }

/* Non-modal feedback. */
.x-toast {
  position: absolute;
  z-index: 70;
  left: 50%;
  bottom: 8%;
  max-width: calc(100% - 34px);
  border: 1px solid rgba(243, 197, 116, .68);
  border-radius: 10px;
  padding: 11px 15px;
  background: rgba(27, 13, 6, .96);
  box-shadow: 0 9px 26px rgba(0, 0, 0, .48);
  color: #fff1d6;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%, 9px);
  opacity: 0;
  animation: x-toast-in .26s var(--x-ease) forwards;
}
.x-toast.x-is-leaving { animation: x-toast-out .22s ease forwards; }
.x-spinner { width: 18px; height: 18px; border: 2px solid rgba(40, 19, 5, .25); border-top-color: #3b1e08; border-radius: 50%; animation: x-spin .8s linear infinite; }
.x-status-mark { width: 72px; height: 72px; display: grid; place-items: center; margin: 6px auto 17px; border: 1px solid var(--x-gold); border-radius: 50%; background: radial-gradient(circle, rgba(213, 151, 60, .23), rgba(20, 9, 4, .1) 70%); color: var(--x-gold-light); box-shadow: 0 0 0 9px rgba(221, 150, 55, .07); }
.x-status-mark svg { width: 34px; height: 34px; }
.x-center { text-align: center; }

@keyframes x-page-enter { from { opacity: .55; transform: translate3d(24px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes x-page-back { from { opacity: .6; transform: translate3d(-20px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes x-page-leave { to { opacity: 0; transform: translate3d(18px, 0, 0); } }
@keyframes x-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes x-scrim-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes x-sheet-in { from { opacity: .65; transform: translate3d(0, 102%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes x-sheet-out { to { opacity: .6; transform: translate3d(0, 102%, 0); } }
@keyframes x-toast-in { to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes x-toast-out { to { opacity: 0; transform: translate(-50%, 7px); } }
@keyframes x-spin { to { transform: rotate(360deg); } }

@media (max-width: 360px) {
  .x-choice-grid { gap: 6px; }
  .x-choice strong { font-size: 13px; }
  .x-detail-content,
  .x-sheet-scroll { padding-left: 14px; padding-right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .x-layer,
  .x-layer *,
  .x-overlay,
  .x-overlay *,
  .x-toast { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}