/* ===== Load Roboto per GOV.GR guide ===== */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

/* ===== Theme vars ===== */
:root {
  --blue: #11277B;
  --blue-light: #4D6BD9;   /* liveness bar -- a lighter step off --blue */
  --text: #ffffff;
  --label: rgba(255,255,255,0.65);
  --bg: #f3f6fb;
  --card-bg: #ffffff;
  --rule: rgba(255,255,255,0.65);
}

/* Always paint the iOS status bar area blue in PWA */
.statusbar-bleed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top);
  background: #11277B;
  z-index: 1002;        /* above header/content */
  pointer-events: none; /* don't block touches */
}



html, body {
  height: 100%;
  overflow: hidden;             /* prevent whole-page scroll */
  overscroll-behavior: none;    /* block iOS/Safari rubber-banding if supported */
}


/* ===== Reset / base ===== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  /* keep page background blue so the translucent status bar stays blue */
  background: #11277B;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; /* small-screen body size per guide */
}



@media (display-mode: standalone) {
  body::before { display: none; }
}






@media (min-width: 768px) {
  body { font-size: 19px; } /* large-screen body size per guide */
}

/* Align numeric glyphs nicely for codes/dates */
.ticket-wrapper p,
.qr-code-text {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ===== Ticket shell ===== */
.ticket-wrapper {
  width: 100%;
  max-width: 767px;
  height: 100dvh;                /* like original */
  overflow: hidden;               /* the blue area will scroll instead */
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  /* margin-top removed; statusbar-bleed now handles the notch */
  /*margin-top: env(safe-area-inset-top); /* show blue behind iOS status bar */
}
.admin-screen .ticket-wrapper { height: auto; }

/* ===== Header with QR ===== */
.ticket-wrapper .qr-header {
  background: #fff;
  /*padding: 18px 16px 10px;*/
  padding: calc(18px + env(safe-area-inset-top)) 16px 24px; /* add notch height so title isn’t hidden; bottom leaves room for the liveness bar */
  text-align: center;
  position: sticky;
  top: 0;                 /* stick to the top edge of the wrapper */
  z-index: 1001;
}


.admin-screen .ticket-wrapper .qr-header { position: static; }

.ticket-wrapper .qr-heading {
  margin: 0 0 28px;
  /* Sits between the label and the number, as in the app: measured off the
     screenshot the heading is ~0.85x the number's type size, and it is set
     light rather than bold -- the number is the only emphasised line. */
  font-size: clamp(0.9rem, 5.3vw, 1.6rem);
  color: #3a3a3a;
  font-weight: 400;
}

/* Half the viewport width on a phone, which is what a camera wants. The cap
   stops it ballooning on desktop, where the card stops growing at 767px. */
.ticket-wrapper .qr-image img,
.ticket-wrapper .qr-image svg {
  width: 50vw;
  max-width: 360px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Sized in vw so these hold their proportions on any phone. The three lines
   are NOT matched to one width -- that would need wildly different type sizes,
   since the label is 17 characters against the value's 9. Instead the type
   sizes are set close together, as in the app, and each line falls where its
   own string length puts it: the label widest, number and value narrower. */
.ticket-wrapper .qr-code-text {
  font-size: clamp(0.95rem, 6.2vw, 1.85rem);
  line-height: 1.15;
  color: #222;
  font-weight: 500;   /* medium: emphasised, but not the heavy 700 */
  margin: 18px 0 0;
}

/* ===== Ticket type, under the number on the white ===== */
.ticket-wrapper .qr-type {
  margin: 20px 0 0;
  text-align: center;
  color: #222;
  line-height: 1.3;
}

.ticket-wrapper .qr-type-label,
.ticket-wrapper .qr-type-value {
  display: block;
  font-weight: 400;
}

.ticket-wrapper .qr-type-label { font-size: clamp(0.78rem, 5vw, 1.5rem); }

.ticket-wrapper .qr-type-value {
  font-size: clamp(0.95rem, 6.3vw, 1.9rem);
  margin-top: 2px;
}

/* ===== Info (blue area) ===== */
.ticket-wrapper .info {
  background: var(--blue);
  color: var(--text);
  padding: 18px 18px 30px;
  flex: 1;
  overflow-y: auto; 
  -webkit-overflow-scrolling: touch;/* smooth momentum on iOS */
  overscroll-behavior: contain;     /* don't propagate scroll to page */
}


.ticket-wrapper .info::-webkit-scrollbar { display: none; }

.ticket-wrapper .form-field { margin-bottom: 18px; }

/* Labels — small, grey, uppercase, medium weight */
.ticket-wrapper label {
  color: var(--label);
  text-transform: uppercase;
  display: block;
  font-size: 0.85rem;  /* ~14–16px across breakpoints (guide “body small”) */
  font-weight: 400;    /* medium for clarity without looking heavy */
  letter-spacing: 0.02em;
  line-height: 1.25;
}

/* Values — larger, white, bold with thin divider */
.ticket-wrapper p {
  background: transparent;
  border-bottom: 2.0px solid #fff;
  width: 100%;
  font-size: 5.55rem;  /* visually prominent over label/body */
  line-height: 1.25;
  color: #fff;
  font-weight: 400;    /* bold per guide usage */
  letter-spacing: 0.002em;
  padding: 6px 0 10px;
  margin: 0 0 35px;         /* NEW: space before the next label */
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-height: 40px;
}

/* ΕΚΔΗΛΩΣΗ value: wrap to at most 3 lines */
#event {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;  /* max 3 lines */
  overflow: hidden;
  white-space: normal;    /* ensure wrapping */
}



/* ===== Seat grid (ΘΥΡΑ / ΤΜΗΜΑ / ΣΕΙΡΑ / ΘΕΣΗ) ===== */
/* 4 equal columns; inner gutters only; single underline */
.ticket-wrapper .seat-grid {
  display: grid;
  grid-auto-flow: column;        /* lay items as columns */
  grid-auto-columns: max-content;/* each column = just as wide as its label/value */
  justify-content: space-between;/* distribute columns between the margins */
  column-gap: 0;                 /* spacing handled by space-between now */
  border-bottom: 2.0px solid #fff; /* same as the other fields */
  border-bottom-color: #fff;
  padding-bottom: 10px;                 /* same vertical rhythm as others */
  margin-bottom: 30px;                  /* same gap to next field */
  
}


/* Each column becomes a 1-col grid sized to its content */
.ticket-wrapper .seat-grid > div {
  display: grid;
  grid-template-columns: max-content; /* width = longest of label/value */
  /* default: hug the left margin */
  justify-content: start;
  padding: 0;
}

/* Last column: hug the right margin (label’s right edge touches underline end) */
.ticket-wrapper .seat-grid > div:last-child {
  justify-content: end;
}

/* Label + value both left-aligned within that max-content column */
.ticket-wrapper .seat-grid label,
.ticket-wrapper .seat-grid p {
  justify-self: start;   /* start in that inner column */
  text-align: left;      /* so the white text starts where grey text starts */
  border: none;          /* keep only the container underline */
  width: auto;           /* no forced 100% width */
}

.ticket-wrapper .seat-grid p {
  border: none; 
  margin-bottom: 0;   /* prevent double gap */
}



/* ===== Loader ===== */
#page-loader {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
#page-loader .spinner {
  border: 6px solid #f3f3f3;
  border-top: 6px solid var(--blue);
  border-radius: 50%;
  width: 50px; height: 50px;
  animation: spin 1s linear infinite;
}
@keyframes spin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* ===== Responsive adjustments ===== */
@media (max-width: 360px) {
  .ticket-wrapper label { font-size: 1.0rem;}     /* ~14px */
  .ticket-wrapper p { font-size: 2.0rem; } /* scale down a bit */
}
@media (min-width: 400px) {
  .ticket-wrapper label { font-size: 0.85rem;letter-spacing:0.0em; }
  .ticket-wrapper p { font-size: 1.8rem; letter-spacing:-0.03em; }        /* slight bump on wider phones */
}


/* ===== Liveness bar =====
   Cosmetic. Inset above the seam between the white header and the blue
   panel, so header white frames it on both sides and below. Runs a round
   trip: left to right, then right to left. */
.ticket-wrapper .liveness {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 8px;          /* white of the header shows below and to both sides */
  height: 5px;
  border-radius: 3px;
  overflow: hidden;   /* clips the fill's ends to the rounded corners */
  pointer-events: none;
}

.ticket-wrapper .liveness span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  transform-origin: left center;
  background: var(--blue-light);
  /* linear, not an ease: a timing function is applied between every pair of
     keyframes, so any ease stalls the bar at each one instead of only at the
     ends. The turnarounds need no ease -- the bar is zero-width there. */
  animation: liveness-sweep 4.6s linear infinite;
  will-change: transform;
}

/* One cycle is a round trip: out to the right, then back to the left.
   The bar spans [p, p + 100*s] of the track, for translateX(p) scaleX(s).
   One edge is always against a wall, so the bar fills the track wall to wall
   before it drains -- it grows until the leading edge hits the far side,
   holds there completely full, then the trailing edge crosses and empties it.
   Every edge crosses at the same constant rate, which is the point: earlier
   keyframes changed speed partway and that read as a stall. Each leg is
   ~2.1s of motion plus a ~0.22s hold at full width. */
@keyframes liveness-sweep {
  /* left to right: fill from the left, hold full, drain into the right */
  0%     { transform: translateX(0%)   scaleX(0); }  /* nothing, at the left */
  22.63% { transform: translateX(0%)   scaleX(1); }  /* full, wall to wall */
  27.37% { transform: translateX(0%)   scaleX(1); }  /* HOLD, full and still */
  50%    { transform: translateX(100%) scaleX(0); }  /* drained into the right */
  /* right to left: the same, mirrored */
  72.63% { transform: translateX(0%)   scaleX(1); }  /* full again, grown leftward */
  77.37% { transform: translateX(0%)   scaleX(1); }  /* HOLD */
  100%   { transform: translateX(0%)   scaleX(0); }  /* drained into the left */
}

@media (prefers-reduced-motion: reduce) {
  .ticket-wrapper .liveness span {
    animation: none;
    transform: none;
    opacity: 0.45;
  }
}