/* ============================================================
   Spacejeux — check-ticket.css (check-ticket.php)
   ============================================================ */

/* ---------- CHECKER ---------- */
.ct-checker { background: var(--white); padding-block: 48px; }
.ct-checker__inner {
  display: grid; grid-template-columns: 1fr 480px; gap: 80px; align-items: center;
}
.ct-checker__left { display: grid; gap: 28px; }
.ct-checker__head { display: grid; gap: 8px; }
.ct-checker__head h1 { font-size: 36px; font-weight: 700; line-height: 1.2; }
.ct-checker__head p { font-size: 16px; line-height: 1.5; color: var(--slate-700); }

.ct-form {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px;
  box-shadow: var(--shadow-card);
  display: grid; gap: 8px;
}
.ct-form__label { font-size: 14px; font-weight: 600; color: var(--ink); }
.ct-form__row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ct-form__input {
  flex: 1 1 240px; min-width: 0; height: 42px; padding-inline: 16px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 14px; color: var(--ink); background: var(--white); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ct-form__input::placeholder { color: var(--slate-400); }
.ct-form__input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13,148,136,.12); }
.ct-form__row .btn { height: 44px; }
.ct-form__scan { color: var(--slate-700); padding-inline: 16px; }

.ct-checker__foot { display: grid; gap: 12px; justify-items: start; }
.ct-checker__foot p { font-size: 12px; line-height: 1.4; color: var(--slate-500); }

/* checker output (shared component classes set by main.js) */
.ticket-result {
  margin-top: 8px; padding: 12px 16px; border-radius: var(--radius);
  font-size: 14px; line-height: 1.5;
  background: var(--bg-soft); border: 1px solid var(--border); color: var(--slate-700);
}
.ticket-result--win  { background: var(--success-bg); border-color: #a7f3d0; color: #065f46; }
.ticket-result--lose { background: var(--bg-soft); }
.ticket-result--error{ background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

/* verification sequence card */
.ct-verify {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 32px;
  min-height: 340px;
  display: grid; gap: 24px; align-content: center;
}
.ct-verify__eyebrow {
  text-align: center; font-size: 11px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--slate-500);
}
.ct-verify__flow { display: flex; align-items: center; justify-content: center; gap: 16px; }
.ct-verify__arrow { color: var(--slate-300); display: inline-flex; }
.ct-step { display: grid; gap: 12px; justify-items: center; width: 110px; }
.ct-step__label { font-size: 12px; font-weight: 600; color: var(--ink); text-align: center; }
.ct-step__visual {
  width: 64px; height: 80px; position: relative;
  display: grid; place-items: center;
}
.ct-step__visual--ticket {
  background: var(--bg-soft); border: 1.5px solid var(--slate-400); border-radius: 4px;
  display: grid; align-content: center; justify-items: center; gap: 4px; padding: 10px;
}
.ct-step__visual--ticket i {
  display: block; width: 40px; height: 2px; background: var(--slate-300); border-radius: 1px;
}
.ct-step__visual--ticket i.short { width: 28px; }
.ct-step__barcode { display: flex; gap: 2px; margin-top: 2px; align-items: flex-end; height: 10px; }
.ct-step__barcode b { display: block; height: 10px; background: var(--slate-400); }
.ct-step__barcode b:nth-child(1) { width: 2px; }
.ct-step__barcode b:nth-child(2) { width: 1px; }
.ct-step__barcode b:nth-child(3) { width: 3px; }
.ct-step__barcode b:nth-child(4) { width: 1.5px; }
.ct-step__visual--scanner { background: #f0fdfa; border: 1.5px solid var(--teal); border-radius: 6px; }
.ct-step__visual--scanner .corner {
  position: absolute; width: 8px; height: 8px; border: 1px solid var(--teal);
}
.ct-step__visual--scanner .tl { top: 12px; left: 6px; }
.ct-step__visual--scanner .tr { top: 12px; right: 6px; }
.ct-step__visual--scanner .bl { bottom: 12px; left: 6px; }
.ct-step__visual--scanner .br { bottom: 12px; right: 6px; }
.ct-step__laser {
  position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; margin-top: -1px;
  background: var(--teal);
}
.ct-step__visual--result { background: #ecfdf5; border: 1.5px solid var(--success-bg); border-radius: 6px; }
.ct-step__check {
  width: 32px; height: 32px; border-radius: 50%;
  background: #10b981; color: var(--white);
  display: grid; place-items: center;
}

@media (max-width: 1100px) {
  .ct-checker__inner { grid-template-columns: 1fr; gap: 40px; }
  .ct-verify { max-width: 520px; }
}
@media (max-width: 720px) {
  .ct-checker { padding-block: 40px; }
  .ct-checker__inner { gap: 24px; }
  .ct-checker__left { gap: 24px; }
  .ct-checker__head h1 { font-size: 28px; }
  .ct-checker__head p { font-size: 14px; }
  .ct-form { padding: 16px; gap: 12px; }
  .ct-form__label { font-size: 13px; }
  .ct-form__row { flex-direction: column; align-items: stretch; gap: 8px; }
  .ct-form__input { flex-basis: auto; height: 41px; padding-inline: 14px; font-size: 13px; }
  .ct-form__row .btn { height: 42px; width: 100%; }
  .ct-verify { padding: 16px; min-height: 0; gap: 16px; }
  .ct-verify__flow { justify-content: space-between; gap: 0; }
  .ct-step { width: 90px; gap: 8px; }
  .ct-step__label { font-size: 11px; }
  .ct-step__visual { width: 48px; height: 60px; }
  .ct-step__visual--ticket { padding: 8px; gap: 3px; }
  .ct-step__visual--ticket i { width: 30px; }
  .ct-step__visual--ticket i.short { width: 20px; }
  .ct-step__barcode { display: none; }
  .ct-step__visual--scanner .corner { display: none; }
  .ct-step__check { width: 24px; height: 24px; }
  .ct-step__check svg { width: 12px; height: 12px; }
}

/* ---------- HOW TO CHECK ---------- */
.ct-how { background: var(--bg-soft); padding-block: 64px 30px; }
.ct-how__title { font-size: 32px; font-weight: 700; line-height: 1.2; margin-bottom: 40px; }
.ct-how__steps { display: flex; align-items: flex-start; }
.ct-how-step { flex: 1 1 0; min-width: 0; display: grid; gap: 16px; justify-items: center; }
.ct-how-step__badge {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--white); border: 1.5px solid var(--teal);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--teal);
}
.ct-how-step__content { display: grid; gap: 6px; justify-items: center; text-align: center; }
.ct-how-step__content h3 { font-size: 18px; font-weight: 700; line-height: 1.3; }
.ct-how-step__content p { font-size: 14px; line-height: 1.4; color: var(--slate-500); }
.ct-how__connector { flex: none; width: 48px; height: 48px; display: grid; place-items: center; }
.ct-how__connector::before { content: ''; width: 32px; border-top: 1.5px solid var(--slate-300); }

@media (max-width: 720px) {
  .ct-how { padding-block: 32px; }
  .ct-how__title { font-size: 24px; margin-bottom: 20px; }
  .ct-how__steps { flex-direction: column; align-items: stretch; gap: 16px; }
  .ct-how-step { gap: 12px; justify-items: start; }
  .ct-how-step__content { justify-items: start; text-align: left; }
  .ct-how__connector { display: none; }
}

/* ---------- BEFORE YOU CHECK ---------- */
.ct-info { background: var(--bg-soft); border-block: 1px solid var(--bg-legal); padding-block: 24px 60px; }
.ct-info h2 {
  font-family: var(--font-sans); font-size: 16px; font-weight: 600;
  line-height: 1.3; color: var(--ink);
}
.ct-info p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--slate-500); }

@media (max-width: 720px) {
  .ct-info { padding-block: 24px 32px; }
}

/* ---------- PLAY BRIGHT ---------- */
.ct-pb { background: var(--bg-tint); padding-block: 80px; }
.ct-pb__head { max-width: 680px; display: grid; gap: 12px; margin-bottom: 48px; }
.ct-pb__head h2 { font-size: 40px; font-weight: 700; line-height: 1.1; }
.ct-pb__head p { font-size: 16px; line-height: 1.5; color: var(--slate-700); }

.ct-help {
  position: relative; overflow: hidden;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: center;
  padding-left: 38px;
  margin-bottom: 48px;
}
.ct-help::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--teal);
}
.ct-help__content { display: grid; gap: 16px; padding-block: 24px; }
.ct-help__content h3 { font-size: 24px; font-weight: 700; }
.ct-help__content > p { font-size: 15px; line-height: 1.6; color: var(--slate-700); }
.ct-help__phone { display: flex; align-items: center; gap: 12px; }
.ct-help__phone-icon {
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--teal); color: var(--white);
  display: grid; place-items: center;
}
.ct-help__phone a { font-size: 18px; font-weight: 700; color: var(--ink); }
.ct-help__call { padding-inline: 30px; font-weight: 700; }

/* support illustration */
.ct-support {
  position: relative; align-self: stretch; min-height: 220px;
  border-radius: var(--radius-lg);
  background-image: radial-gradient(circle, rgba(217,226,235,.45) 1px, transparent 1.2px);
  background-size: 24px 24px; background-position: 11px 11px;
}
.ct-support__line {
  position: absolute; left: 68px; right: 68px; top: 90px; height: 2px;
  background: rgba(9,162,159,.25); border-radius: 1px;
}
.ct-node { position: absolute; display: grid; justify-items: center; width: 92px; text-align: center; }
.ct-node--1 { left: 22px; top: 50px; }
.ct-node--2 { left: 114px; top: 50px; }
.ct-node--3 { right: 24px; top: 42px; }
.ct-node__num { font-size: 9px; color: rgba(9,162,159,.55); margin-bottom: 4px; }
.ct-node__circle {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--white); border: 1px solid rgba(97,128,163,.25);
  display: grid; place-items: center; color: rgba(28,42,74,.6);
}
.ct-node__circle--accent {
  width: 48px; height: 48px;
  border: 1.5px solid rgba(9,162,159,.5); color: #09a29f;
  box-shadow: 0 0 0 6px rgba(9,162,159,.06), 0 0 0 12px rgba(9,162,159,.04);
}
.ct-node__title {
  margin-top: 10px; font-size: 8px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; color: #1c2a4a;
}
.ct-node__title.accent { color: #09a29f; }
.ct-node__sub { font-size: 7.5px; color: rgba(97,128,163,.75); }

@media (max-width: 1100px) {
  .ct-help { grid-template-columns: 1fr; padding: 0 24px 24px 38px; }
  .ct-support { align-self: auto; width: 100%; max-width: 360px; }
}
@media (max-width: 720px) {
  .ct-pb { padding-block: 40px; }
  .ct-pb__head { gap: 8px; margin-bottom: 24px; }
  .ct-pb__head h2 { font-size: 28px; line-height: 1.2; }
  .ct-pb__head p { font-size: 14px; }
  .ct-help { padding: 20px; gap: 0; margin-bottom: 24px; }
  .ct-help::before { display: none; }
  .ct-help__content { padding: 0; gap: 12px; }
  .ct-help__content h3 { font-size: 20px; }
  .ct-help__content > p { font-size: 13px; line-height: 1.5; }
  .ct-help__phone { gap: 8px; }
  .ct-help__phone a { font-size: 16px; }
  .ct-help__call { width: 100%; height: 42px; }
  .ct-support { display: none; }
}