/* =========================================================
   Racetime — Registration UI (Light Theme, Accessible)
   Clean, aligned, responsive, high-contrast
   ========================================================= */

/* ------------------ Design tokens ------------------ */
:root{
  --bg:#f3f4f6;
  --panel:#ffffff;
  --panel-2:#f1f5f9;
  --text:#0f172a;
  --muted:#374151;
  --line:#d1d5db;

  --brand:#0d6efd;
  --brand-hover:#0b5ed7;

  --danger:#ef4444;
  --ok:#22c55e;
  --warning:#f59e0b;

  --radius:12px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(0,0,0,.05);
  --shadow-soft:0 6px 18px rgba(0,0,0,.08);

  --fs-xxl:1.75rem;
  --fs-xl:1.25rem;
  --fs-lg:1.06rem;
  --fs-md:.98rem;
  --fs-sm:.92rem;

  --gutter:20px;
  --gutter-lg:24px;
}

/* ------------------ Base / reset ------------------ */
*{ box-sizing:border-box }
html,body{ height:100% }
html{ font-size:16px }
body {
  margin: 0;

  /* Image in back + white translucent overlay */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
    url('../../img/miltos_keri2.jpg');
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center, center;
  background-attachment: fixed, fixed;

  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  font-size: clamp(15px, 1.6vw, 17px);
  -webkit-font-smoothing: antialiased;
}

@supports (text-rendering:optimizeLegibility){
  body{ text-rendering:optimizeLegibility }
}

/* ------------------ Layout ------------------ */
.container{
  max-width:1100px;
  margin:40px auto 80px;
  padding:0 var(--gutter);
}

.page-header{
  background:var(--panel);
  padding:28px 24px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}
.page-header h1{
  margin:0 0 8px 0;
  font-size:clamp(1.4rem, 2.8vw, var(--fs-xxl));
  letter-spacing:.2px;
  color:var(--text);
}
.page-header .meta{
  margin:0;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.event-logo{
  max-width:150px;
  margin-left:auto;
  display:block;
  align-self:center;
}

/* ------------------ Cards & sections ------------------ */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow-soft);
}
section{ margin-bottom:24px }
section h2{
  font-size:var(--fs-xl);
  margin:0 0 12px 0;
  color:#0f172a;
}

/* ------------------ Alerts ------------------ */
.alert{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 18px 12px;
  background:var(--panel);
  margin:18px 0 22px;
  box-shadow:var(--shadow);
}
.alert h3{ margin:0 0 8px 0; font-size:var(--fs-lg); color:var(--text) }
.alert ul{ margin:0; padding-left:18px; color:var(--text) }
.alert-error{
  border-color: color-mix(in oklab, var(--danger) 25%, var(--line));
  background:#fff7f7;
}

/* ------------------ Grid ------------------ */
.grid{ display:grid; gap:16px; }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }

/* ------------------ Form ------------------ */
:where(input:not([type="radio"],[type="checkbox"],[type="range"],[type="file"]),
       select,
       textarea){
  background:#ffffff;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px;
  outline:none;
  transition:border .15s ease, box-shadow .15s ease, background .15s ease;
  min-height:44px;
}
textarea{ min-height:110px; resize:vertical }
input::placeholder{ color:#9ca3af }
:where(input:not([type="radio"],[type="checkbox"],[type="range"],[type="file"]),
       select,
       textarea):focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(13,110,253,.15);
  background:#fff;
}
:where(input:not([type="radio"],[type="checkbox"],[type="range"],[type="file"]),
       select)[disabled]{ opacity:.6; cursor:not-allowed }

form label{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:10px;
  font-size:var(--fs-md);
  color:var(--text);
}

.dim{ font-size:var(--fs-sm); color:var(--muted) }
.link-muted{ color:var(--muted); text-decoration:none }
.link-muted:hover{ color:var(--text) }

/* Radios & checkboxes */
input[type="radio"],
input[type="checkbox"]{
  padding:0;
  margin:0 .5rem 0 0;
  border:0;
  background:transparent;
  inline-size:auto;
  block-size:auto;
  min-height:auto;
  accent-color:var(--brand);
  vertical-align:middle;
}

/* ------------------ Price section ------------------ */
.pricebox{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:16px;
  background:var(--panel-2);
  margin:.75rem 0;
}
.pricebox.soldout{ opacity:.6; pointer-events:none; }
.pricebox-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
}
.remain{ font-size:.9rem; color:var(--muted) }

.price-list{ list-style:none; padding-left:0; margin:.5rem 0 0 0; }
.price-list li{ margin:.4rem 0; }

/* Price option card */
.price-list li label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.6rem;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 16px;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .06s ease;
  cursor:pointer;
  min-height:52px;
  box-shadow:var(--shadow);
  position:relative;
}

/* Hide native radio visually in the card */
.price-list li label input[type="radio"]{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none;
}

/* Remove any pseudo radios */
.price-list li label::before,
.price-list li label::after{ content:none !important; display:none !important; }

/* Hover */
.price-list li label:hover{
  background:#f8fafc;
  border-color: color-mix(in oklab, var(--brand) 25%, var(--line));
}

/* Selected */
.price-list li label:has(input[type="radio"]:checked){
  background:#e9f2ff;
  border-color: var(--brand);
  box-shadow:
    0 0 0 4px rgba(13,110,253,.10),
    0 6px 14px rgba(13,110,253,.08);
  transform: translateY(-1px);
}

/* Focus */
.price-list li label:has(input[type="radio"]:focus-visible){
  outline: 3px solid rgba(13,110,253,.35);
  outline-offset: 2px;
}

/* Disabled price */
.price-list li input[disabled] ~ * { opacity:.6; }
.price-list li input[disabled] ~ strong,
.price-list li input[disabled] ~ .remain,
.price-list li input[disabled] ~ .dim { cursor:not-allowed; }

/* ------- State tags ------- */
.tag{
  display:inline-block;
  padding:.25rem .6rem;
  border-radius:999px;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.2px;
  text-transform:uppercase;
}
.activetag{
  display:inline-block;
  padding:.25rem .6rem;
  border-radius:999px;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.2px;
  text-transform:uppercase;
  background:rgba(34,197,94,.10);
  border:1px solid rgba(22,163,74,.55);
  color:#166534;
}
.soldtag{
  background:rgba(239,68,68,.08);
  border:1px solid rgba(185,28,28,.6);
  border-radius:999px;
  color:#991b1b;
  font-weight:700;
  text-transform:uppercase;
  padding:.28rem .65rem;
  display:inline-block;
}
.closedtag{
  background:rgba(245,158,11,.10);
  border:1px solid rgba(180,83,9,.55);
  color:#92400e;
  font-weight:700;
  text-transform:uppercase;
  padding:.28rem .65rem;
  border-radius:999px;
}

/* ------------------ Payment section ------------------ */
.payment-section{
  margin-top:1.25rem;
  padding:16px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--panel-2);
  box-shadow:var(--shadow);
}
.payment-section h2{
  margin:0 0 .75rem 0;
  color:#0f172a;
  font-size:var(--fs-xl);
}

/* Payment options layout */
.pay-grid,
.radio-group{
  display:grid;
  grid-template-columns:repeat(3, minmax(160px,1fr));
  gap:12px;
}
@media (max-width:880px){
  .pay-grid, .radio-group{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .pay-grid, .radio-group{ grid-template-columns:1fr; }
}

/* Option card */
.pay-grid .radio-row,
.radio-group .radio-row{
  border:1px solid var(--line);
  background:#ffffff;
  border-radius:10px;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .08s ease;
  box-shadow:var(--shadow);
}
.pay-grid .radio-row:hover,
.radio-group .radio-row:hover{
  background:#f8fafc;
  border-color: color-mix(in oklab, var(--brand) 25%, var(--line));
}

/* Label + control alignment */
.pay-grid .radio-row > label,
.radio-group .radio-row > label{
  display:flex;
  align-items:center;
  gap:.6rem;
  cursor:pointer;
  user-select:none;
  font-size:var(--fs-md);
  color:var(--text);
  padding:12px 14px;
}

/* Radios inside payment grid */
.pay-grid input[type="radio"],
.radio-group input[type="radio"]{
  margin:0 .5rem 0 0;
  accent-color:var(--brand);
  transform:scale(1.0);
}

@supports selector(:has(*)){
  .pay-grid .radio-row:has(input[type="radio"]:checked),
  .radio-group .radio-row:has(input[type="radio"]:checked){
    background:#eef5ff;
    border-color:var(--brand);
    box-shadow:0 0 0 4px rgba(13,110,253,.10);
  }
  .pay-grid .radio-row:has(input[type="radio"]:checked) > label,
  .radio-group .radio-row:has(input[type="radio"]:checked) > label{
    color:var(--text);
    font-weight:700;
    letter-spacing:.2px;
  }
}
.pay-grid .radio-row:focus-within,
.radio-group .radio-row:focus-within{
  outline:3px solid rgba(13,110,253,.55);
  outline-offset:2px;
}

/* Disabled payments */
.pay-grid input[disabled] ~ * ,
.radio-group input[disabled] ~ * ,
.pay-grid .radio-row[aria-disabled="true"],
.radio-group .radio-row[aria-disabled="true"]{
  opacity:.55;
  cursor:not-allowed;
  filter:grayscale(30%);
}

/* ------------------ Waiver “button” style ------------------ */
.waiver-button{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  margin:.5rem 0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  font-size:var(--fs-md);
  color:var(--text);
}
.waiver-button input[type="checkbox"]{
  appearance:auto;
  -webkit-appearance:auto;
  width:16px;
  height:16px;
  margin:0;
  flex-shrink:0;
  vertical-align:middle;
  accent-color:var(--brand);
}
.waiver-button label{
  margin:0;
  padding:0;
  line-height:1.4;
  font-weight:400;
  cursor:pointer;
}
.waiver-button label a{
  color:var(--text);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
}
.waiver-button input[type="checkbox"]:focus-visible{
  outline:2px solid rgba(13,110,253,.55);
  outline-offset:2px;
}
.waiver-icon{ display:none !important; }
.waiver-button + .waiver-button{ margin-top:.35rem; }

/* ------------------ Buttons ------------------ */
.btn{
  appearance:none;
  border:none;
  border-radius:12px;
  padding:12px 18px;
  background:var(--brand);
  color:white;
  font-weight:700;
  letter-spacing:.2px;
  cursor:pointer;
  position:relative;
  transition:transform .06s ease, filter .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:0 6px 14px rgba(13,110,253,.25);
  min-height:44px;
}
.btn:hover{ background:var(--brand-hover); filter:none }
.btn:active{ transform:translateY(1px) }
.btn[disabled]{ opacity:.65; cursor:not-allowed; }
.btn.btn-lg{
  font-size:1.08rem;
  padding:.9rem 2.2rem;
  border-radius:12px;
}

/* Submit button loading/disabled state */
.btn[disabled],
.btn:disabled {
  opacity: 0.6;
  filter: grayscale(0.5);
  cursor: not-allowed;
  pointer-events: none;
}
.btn.loading { position: relative; padding-right:32px; }
.btn.loading::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .btn.loading::after { animation: none; }
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ------------------ Form actions ------------------ */
.form-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin-top:28px;
  border-top:1px solid var(--line);
  padding-top:20px;
}
.actions-row{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin-top:12px;
}
.actions-row .btn{
  font-size:1.03rem;
  padding:.85rem 2rem;
  border-radius:12px;
  box-shadow:0 6px 14px rgba(13,110,253,.25);
}
.actions-row .tag.link-muted{
  font-size:.94rem;
  color:var(--muted);
  transition:color .2s ease;
}
.actions-row .tag.link-muted:hover{ color:var(--text) }

/* Mobile CTA */
@media (max-width:520px){
  .actions-row{ flex-wrap:wrap }
  .btn{ width:100% }
  .back-link{ width:100%; text-align:center }
}

/* ------------------ Utilities ------------------ */
.hidden{ display:none }
.radio-row{ margin:.25rem 0 }

/* Optional: dim entire form while submitting */
form.is-submitting { opacity: 0.85; }
form.is-submitting * { pointer-events: none; }

/* ------------------ Accessibility ------------------ */
:focus-visible{
  outline:3px solid rgba(13,110,253,.7);
  outline-offset:2px;
}
label input[type="checkbox"]{
  width:auto; height:auto; padding:0; margin-right:6px; accent-color:var(--brand);
}

/* ------------------ Tables ------------------ */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:12px;
  background:#fff;
}
th, td{
  text-align:left;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  color:var(--text);
}
th{ color:#0f172a; font-weight:700; background:#f8fafc }
tr:last-child td{ border-bottom:none }

/* ------------------ Responsive ------------------ */
@media (max-width:1024px){
  .container{ padding:0 calc(var(--gutter) - 2px); }
}
@media (max-width:880px){
  .grid-2, .grid-3{ grid-template-columns:1fr; }
  .page-header{ padding:22px 18px }
  .card{ padding:20px }
}
@media (max-width:520px){
  :root{ --gutter:16px }
  .page-header h1{ font-size:1.45rem }
  section h2{ font-size:1.05rem }
  .price-list li label{ padding:12px 14px }
  .actions-row{ width:100%; justify-content:space-between }
  .btn{ width:100% }
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ---------- Header box layout ---------- */
.header-box{
  display:grid;
  grid-template-columns: 164px 1fr;
  gap:16px;
  align-items:center;
	margin-bottom: 10px;
}
.header-media{
  display:flex;
  align-items:center;
  justify-content:center;
}
.event-logo-lg{
  width:100%;
  max-width:160px;
  height:auto;
  object-fit:contain;
  border-radius:10px;
  box-shadow:var(--shadow);
}

/* Right side */
.header-body{ display:flex; flex-direction:column; gap:8px; }
.header-title{ margin:0; font-size:clamp(1.4rem, 2.8vw, var(--fs-xxl)); }

.meta-rows{
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  margin-top:2px;
}
.meta-item{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:var(--fs-md);
}
.meta-ico{
  width:18px; height:18px;
  flex:0 0 18px;
  color:var(--muted);
}
.date-sep{ margin:0 .35rem; }

/* Share buttons */
.share-row{
  display:flex;
  gap:10px;
  margin-top:8px;
}
.btn-share{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  background:#fff;
  color:var(--text);
  box-shadow:var(--shadow);
  transition:background .2s ease, border-color .2s ease, transform .06s ease;
}
.btn-share:hover{ background:#f8fafc; border-color: color-mix(in oklab, var(--brand) 25%, var(--line)); }
.btn-share:active{ transform:translateY(1px); }
.btn-share-ico{ width:18px; height:18px; }

@media (max-width:720px){
  .header-box{ grid-template-columns: 96px 1fr; gap:12px; }
  .event-logo-lg{ max-width:96px; }
}
@media (max-width:520px){
  .header-box{ grid-template-columns: 1fr; }
  .header-media{ justify-content:flex-start; }
  .event-logo-lg{ max-width:120px; }
  .share-row{ flex-wrap:wrap; }
}

/* Centered header body */
.header-centered .header-body{
  align-items:center;
  text-align:center;
}

/* One-line meta (location + date) */
.meta-inline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:4px;
}
.meta-inline .meta-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:var(--fs-md);
}
.meta-inline .dot{ color:var(--muted); opacity:.8; }

/* Share: icons only, centered; caption below */
.share-icons{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:10px;
}
.btn-icon{
  width:42px; height:42px;
  display:inline-flex;
  align-items:center; justify-content:center;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  text-decoration:none;
  transition:background .2s ease, border-color .2s ease, transform .06s ease;
}
.btn-icon:hover{ background:#f8fafc; border-color: color-mix(in oklab, var(--brand) 25%, var(--line)); }
.btn-icon:active{ transform:translateY(1px); }
.btn-icon svg{ width:20px; height:20px; }

.share-caption{
  margin-top:6px;
  font-weight:700;
  letter-spacing:.2px;
  color:var(--muted);
}

@media (max-width:520px){
  .meta-inline{ justify-content:center; }
}

/* Centered, stacked header in each price box */
.pricebox-head--center{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
  padding-bottom:4px;
}

/* Big, prominent distance name (category name) */
.distance-name{
  margin:2px 0 4px 0;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight:800;
  letter-spacing:.2px;
  color:var(--text);
}

/* Small lines above the title */
.pb-start,
.pb-distance{
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* Badge row under the title */
.pb-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}

/* Hide per-price remaining counters */
.price-list .remain{ display:none !important; }

/* ===== Order Summary: two boxes side-by-side (stack on mobile) ===== */
#total-summary{
  display:flex !important;
  flex-direction:row;
  align-items:stretch;
  gap:24px;
  padding:0;
}

/* Left: totals box */
#total-summary .summary-left{
  flex:1 1 auto;
  background:#fff;
 /* border:1px solid var(--line); */
  border-radius:var(--radius-sm);
  padding:18px 20px;
  box-shadow:var(--shadow);
}
#total-summary .summary-left h3{ margin:0 0 8px; }
#total-summary #total-lines{ margin:2px 0 8px; }
#total-summary #total-amount{ font-size:1.15rem; font-weight:800; }

/* Right: discount box */
#total-summary .summary-right{
  flex:0 0 360px;
  background:#fff;
/*  border:1px solid var(--line); */
  border-radius:var(--radius-sm);
  padding:18px 20px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Input + button on the same row */
#total-summary .summary-right .discount-row{
  display:flex;
  gap:10px;
  align-items:center;
}
#total-summary .summary-right label{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0;
  flex:1 1 auto;
}
#total-summary .summary-right input[type="text"]{
  width:100%;
  min-height:44px;
}
#total-summary .summary-right .btn{
  flex:0 0 auto;
  height:44px;
  padding:10px 16px;
}
#discount_msg{
  text-align:right;
  min-height:1.2em;
}

/* Stack on small screens */
@media (max-width: 720px){
  #total-summary{ flex-direction:column; gap:12px; }
  #discount_msg{ text-align:left; }
}