@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,700;1,800&display=swap');

:root {
  --background-color: #0752a3;
  --background-color-light: #0752a3cc;
  --background-color-extra-light: #0752a3eb;
  --gradient-color1: #2CECBE;
  --gradient-color2: #FDDE00;
  --gradient-color3: #FC2291;
  --color-teal: #11BF95;
  --white: #ffffff;
  --card-radius: 16px;
  --text-dark: #1a1a1a;
  --text-muted: #888;
}

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

body {
  font-family: 'Montserrat', -apple-system, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--background-color);
}

/* ── BACKGROUND ─────────────────────────────────── */
.background {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url('https://img.qromo.io/img/vue/order-background.png');
  background-repeat: repeat;
  background-size: 430px;
  opacity: 0.2;
}

.background-after {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 80%);
}

/* ── LAYOUT ─────────────────────────────────────── */
main {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 16px 60px;
}

.page-content {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ── TYPOGRAPHY ──────────────────────────────────── */
h1 {
  color: var(--white);
  font-size: 22px;
  font-weight: 800;
  font-style: italic;
  text-align: center;
  line-height: 1.2;
}

/* ── WHITE CARDS ─────────────────────────────────── */
.order-white-content {
  background: var(--white);
  border-radius: var(--card-radius);
  padding: 14px 16px;
  width: 100%;
}

/* ── GLASS CARDS (blue) ──────────────────────────── */
.main-card.card-glass {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 0;
  overflow: hidden;
}

.card-header-container {
  padding: 9px 16px;
  background: rgba(255, 255, 255, 0.4);
}

.card-header-container .title h2 {
  color: #3d3d3d;
  font-size: 18px;
  font-weight: 800;
  font-style: italic;
}

.card-body-container {
  padding: 0 16px 16px;
}

/* ── ORDER HEADER ────────────────────────────────── */
.order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
}

.order-header .bold {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
}

.order-header p:last-child {
  font-size: 14px;
  color: var(--text-muted);
}

/* ── STATUS MESSAGE (glass + bordo teal, solo a ordine evaso) ── */
.order-messages {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--gradient-color1);
  border-radius: var(--card-radius);
  padding: 12px 14px;
  width: 100%;
  animation: fadeUp 0.35s ease both;
}

.order-messages .message {
  font-size: 15px;
  color: var(--white);
  line-height: 1.5;
  font-weight: 500;
}

.hidden { display: none !important; }

/* ── ORDER SUMMARY EXPLAIN ───────────────────────── */
.order-summary-explain {
  color: var(--white);
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }

/* ── LIST CONTAINER ──────────────────────────────── */
.list-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 14px;
}

.list-item {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* ── TICKET COMPONENT ────────────────────────────── */
.ticket-container {
  width: 100%;
}

.ticket {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 170px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

/* Colored sides */
.ticket-side {
  display: flex;
  flex-direction: column;
  width: 25px;
  flex-shrink: 0;
}

/* Sinistra: colore in ping-pong teal ↔ giallo ↔ rosa, sempre attivo */
.ticket-left {
  color: var(--gradient-color1);
}

.ticket-left.animated {
  animation: ticketColor 3.5s linear infinite alternate;
}

@keyframes ticketColor {
  0%   { color: var(--gradient-color1); }
  50%  { color: var(--gradient-color2); }
  100% { color: var(--gradient-color3); }
}

/* Destra: bianca fino al bordo, con notch scuro */
.ticket-right {
  color: var(--white);
}

.ticket-piece {
  flex: 1;
  background: currentColor;
}

/* Il foro del notch lascia vedere lo sfondo della card dietro al ticket */
.ticket-svg-container {
  width: 25px;
  height: 68px;
  flex-shrink: 0;
  display: block;
  background: transparent;
}

.ticket-svg-container svg {
  display: block;
}

.ticket-svg-container svg path.fill {
  fill: currentColor;
}

/* Mirror the right side SVG (notch sul bordo esterno destro) */
.ticket-right .ticket-svg-container {
  transform: scaleX(-1);
}

/* Area contenuto bianca */
.ticket-content {
  flex: 1;
  background: white;
  position: relative;
  display: flex;
  align-items: stretch;
  cursor: pointer;
}

/* Bordo arrotondato interno: teal di default, rosa a ordine evaso */
.ticket-content-radius {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  margin: 10px;
  border: 1.5px solid var(--gradient-color1);
  border-radius: 12px;
  position: relative;
  z-index: 1;
  transition: border-color 0.3s ease;
}

.ticket.loading .ticket-content-radius,
.ticket.redeemed .ticket-content-radius {
  border-color: var(--gradient-color3);
}

/* Ticket pages: transizione con scorrimento verticale verso l'alto */
.ticket-page {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  gap: 8px;
  opacity: 1;
}

.ticket-page.visible {
  display: flex;
}

/* La pagina entrante scende in posizione mentre compare */
.ticket-page.enter {
  animation: pageEnter 0.26s ease both;
}

/* La pagina uscente scorre verso il basso mentre svanisce */
.ticket-page.leave {
  animation: pageLeave 0.16s ease both;
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pageLeave {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(18px); }
}

.ticket.loading .ticket-page {
  display: none;
}

.ticket-page.page-item > p {
  font-size: 24px;
  font-weight: 700;
  color: #444444;
}

.ticket-page.page-go-staff {
  gap: 45px;
}

.go-staff-wrap {
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
}

.go-staff-p {
  font-size: 22px;
  font-weight: 700;
  color: var(--gradient-color3);
  cursor: pointer;
}

/* Sottolineatura disegnata a mano: si traccia da sinistra a destra */
.hand-underline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 13px;
  overflow: visible;
}

.hand-underline path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

/* Si traccia da sinistra a destra e, appena completa, riparte da capo in loop */
.page-go-staff.visible .hand-underline path {
  animation: drawUnderline 0.8s ease-out infinite;
}

@keyframes drawUnderline {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

.product-p {
  font-size: 18px;
  font-weight: 700;
  color: #555555;
}

.ticket-page.page-confirm {
  gap: 14px;
}

.ticket-page.page-confirm > p {
  font-size: 20px;
  font-weight: 700;
  color: var(--gradient-color3);
}

.button-container {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}

/* X decorativa (corre lungo il bordo interno): compare solo a ordine
   evaso, insieme alla scritta del prodotto. Nascosta durante il loader. */
.x-container {
  position: absolute;
  inset: 32px;
  pointer-events: none;
  z-index: 2;
  display: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.ticket.redeemed .x-container {
  display: block;
  opacity: 1;
}

/* ── LOADER QROMO (3 quadrati QR in orbita) ──────── */
.ticket-loader {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.ticket.loading .ticket-loader {
  display: flex;
}

.loader-box {
  position: relative;
  width: 46px;
  height: 46px;
}

.loader-square {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: 4.5px solid var(--background-color);
  border-radius: 6px;
  animation: loaderOrbit 1.4s ease infinite;
}

.loader-square::after {
  content: '';
  position: absolute;
  inset: 2.5px;
  background: var(--background-color);
  border-radius: 2.5px;
}

.loader-square:nth-child(2) { animation-delay: -0.35s; }
.loader-square:nth-child(3) { animation-delay: -0.7s; }

@keyframes loaderOrbit {
  0%, 4%   { transform: translate(0, 0); }
  25%, 29% { transform: translate(26px, 0); }
  50%, 54% { transform: translate(26px, 26px); }
  75%, 79% { transform: translate(0, 26px); }
  100%     { transform: translate(0, 0); }
}

/* ── BASE BUTTONS ────────────────────────────────── */
.base-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  border-radius: 50px;
  cursor: pointer;
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  background: var(--background-color);
  color: var(--white);
  text-decoration: none;
  transition: opacity 0.2s;
  user-select: none;
}

.base-button:active { opacity: 0.75; }

.base-button .button-inner,
.base-button .btn-text {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inverted + outline: pillola trasparente con alone teal, testo più grande
   e leggermente più sottile (effetto "sfondato" come nell'originale) */
.base-button.inverted.outline {
  background: transparent;
  border: 1.5px solid var(--gradient-color1);
  color: var(--gradient-color1);
  padding: 6px 24px;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 0 10px rgba(44, 236, 190, 0.3);
  text-shadow: 0 0 6px rgba(44, 236, 190, 0.45);
}

/* Plain outline (white cards): transparent with primary border */
.base-button.outline {
  background: transparent;
  border: 1.5px solid var(--background-color);
  color: var(--background-color);
  padding: 8px 18px;
  font-size: 14px;
}

.base-button.button-negative {
  background: var(--background-color);
  color: var(--gradient-color1);
  width: 94px;
  height: 76px;
  padding: 0;
  border-radius: 14px;
  font-size: 20px;
  font-weight: 600;
}

.base-button.button-positive.outline {
  background: var(--white);
  border: 1.5px solid var(--gradient-color3);
  color: var(--gradient-color3);
  width: 94px;
  height: 76px;
  padding: 0;
  border-radius: 14px;
  font-size: 20px;
  font-weight: 600;
}

.order-button {
  display: flex;
  width: fit-content;
  margin: 48px auto 28px;
}

/* ── QR SECTION ──────────────────────────────────── */
.qr-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  text-align: center;
}

.qrcode {
  background: white;
  padding: 12px;
  border-radius: 12px;
  display: inline-block;
  line-height: 0;
}

.qrcode img,
.qrcode canvas {
  display: block;
  width: 180px !important;
  height: 180px !important;
}

.qrcode svg {
  display: block;
  width: 180px !important;
  height: 180px !important;
}

.qr-warning {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  text-align: center;
  line-height: 1.5;
  font-weight: 500;
}

.color-white { color: var(--white); }

/* ── FEEDBACK (white card) ───────────────────────── */
.feedbacks-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.title-dark h2 {
  font-size: 16px;
  font-weight: 700;
  font-style: italic;
  color: var(--text-dark);
}

.stars-container {
  display: flex;
  gap: 4px;
}

.star {
  font-size: 24px;
  color: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: color 0.15s;
  user-select: none;
  display: flex;
  align-items: center;
}

/* ── RECEIPT (white card) ────────────────────────── */
.receipt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ade-text p {
  font-size: 16px;
  font-weight: 700;
  font-style: italic;
  color: var(--text-dark);
}

/* ── FORM PAGE ───────────────────────────────────── */
.form-card-glass {
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--card-radius);
  padding: 20px;
  width: 100%;
}

.form-group { margin-bottom: 14px; }

.form-group label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.form-group input {
  width: 100%;
  padding: 13px 14px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-family: inherit;
  font-weight: 600;
  color: var(--text-dark);
  outline: none;
  background: white;
  transition: box-shadow 0.2s;
}

.form-group input:focus {
  box-shadow: 0 0 0 3px rgba(44, 236, 190, 0.45);
}

.btn-form {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px;
  border-radius: 50px;
  border: none;
  background: var(--gradient-color1);
  color: #0752a3;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 4px;
}

.btn-form:active { opacity: 0.8; }

/* ── NOTIFICATION ────────────────────────────────── */
.notification {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 200;
  background: rgba(26, 26, 26, 0.92);
  color: white;
  padding: 12px 24px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  white-space: nowrap;
}

.notification.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.notification.success-bg { background: #22c55e; }

/* ── ANIMATIONS ──────────────────────────────────── */
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp  {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-content > * { animation: fadeUp 0.4s ease both; }
.page-content > *:nth-child(1) { animation-delay: 0.00s; }
.page-content > *:nth-child(2) { animation-delay: 0.06s; }
.page-content > *:nth-child(3) { animation-delay: 0.12s; }
.page-content > *:nth-child(4) { animation-delay: 0.18s; }
.page-content > *:nth-child(5) { animation-delay: 0.24s; }
.page-content > *:nth-child(6) { animation-delay: 0.30s; }
.page-content > *:nth-child(7) { animation-delay: 0.36s; }

@media (min-width: 520px) {
  main { padding: 60px 24px 72px; }
  h1 { font-size: 26px; }
}