/* Platform pages (registration, landing, gym finder) - light deep blue theme
   matching the welcome intro. Scoped to body.tf-theme so the gyms' own app
   (management, kiosk, per-gym setup) keeps its look. */

body.tf-theme {
  --tf-ink: #f8fbff;
  --tf-muted: #b9d4ff;
  --tf-accent: #38bdf8;
  --tf-accent-2: #22d3ee;
  --tf-deep: #1e3a8a;
  --tf-card: rgba(148, 197, 255, 0.08);
  --tf-card-border: rgba(165, 210, 255, 0.28);
  --tf-input: rgba(5, 13, 38, 0.6);
  min-height: 100vh;
  margin: 0;
  color: var(--tf-ink);
  background:
    radial-gradient(ellipse 70% 50% at 15% 0%, rgba(59, 130, 246, 0.14), transparent 60%),
    radial-gradient(ellipse 60% 45% at 100% 100%, rgba(14, 165, 233, 0.11), transparent 60%),
    linear-gradient(160deg, #071a4a 0%, #040e2a 45%, #020718 75%, #01040d 100%);
  background-attachment: fixed;
  padding: 0 16px 3rem;
}

/* ---- hero ------------------------------------------------------------------ */
.tf-hero { max-width: 980px; margin: 0 auto; padding: 2.4rem 0 1.6rem; text-align: center; }
.tf-hero-emblem { width: 92px; height: 92px; margin: 0 auto 0.6rem; display: block;
  filter: drop-shadow(0 10px 30px rgba(56, 189, 248, 0.45)); }
.tf-hero-emblem .tf-h-ring2 { transform-box: fill-box; transform-origin: center; animation: tf-h-spin 14s linear infinite; }
.tf-hero-emblem .tf-h-belt { animation: tf-h-float 4s ease-in-out infinite; }
.tf-hero-kicker { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.28em;
  text-transform: uppercase; color: #bae6fd; padding: 0.3rem 0.8rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(186, 230, 253, 0.35); }
.tf-hero h1 { margin: 0.7rem 0 0.4rem; font-size: clamp(1.9rem, 5vw, 2.9rem); font-weight: 800; line-height: 1.1;
  background: linear-gradient(180deg, #ffffff 30%, #a5f3fc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tf-hero p { margin: 0 auto; max-width: 52ch; color: var(--tf-muted); font-size: 1.05rem; }
.tf-hero-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; margin-top: 1.1rem; }
.tf-hero-tags span { font-size: 0.8rem; font-weight: 600; padding: 0.3rem 0.75rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(165, 210, 255, 0.3); color: #e0f2fe; }

/* ---- layout & cards ------------------------------------------------------------ */
.tf-theme .portal-wide { max-width: 980px; margin: 0 auto; }
.tf-theme .portal-header { display: none; }
.tf-theme #setupForm { counter-reset: tf-step; }
.tf-theme .setup-block {
  counter-increment: tf-step;
  position: relative;
  background: var(--tf-card);
  border: 1px solid var(--tf-card-border);
  border-radius: 18px;
  padding: 1.5rem 1.6rem;
  margin-bottom: 1.1rem;
  box-shadow: 0 18px 50px rgba(3, 12, 48, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.tf-theme .setup-block:focus-within {
  border-color: rgba(125, 211, 252, 0.75);
  box-shadow: 0 22px 60px rgba(3, 12, 48, 0.45), 0 0 0 1px rgba(125, 211, 252, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.tf-theme .setup-block h2 {
  display: flex; align-items: center; gap: 0.7rem;
  font-size: 1.08rem; font-weight: 700; color: #ffffff;
  border-bottom: 1px solid rgba(165, 210, 255, 0.2);
  padding-bottom: 0.75rem; margin: 0 0 1.1rem;
}
.tf-theme .setup-block h2::before {
  content: counter(tf-step);
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-size: 0.85rem; font-weight: 800; color: #04163f;
  background: linear-gradient(135deg, #a5f3fc, #38bdf8);
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.5);
}
/* the gym-address card is the hero step */
.tf-theme .tf-address-block { border-color: rgba(125, 211, 252, 0.6);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(255, 255, 255, 0.07)); }
.tf-theme .tf-address-block #gymSlug { font-size: 1.15rem; font-weight: 700; padding: 0.8rem 1rem; }

/* ---- form controls -------------------------------------------------------------- */
.tf-theme label { color: #d6e6ff; font-weight: 600; font-size: 0.88rem; }
.tf-theme .hint { color: #9fbbe6; }
.tf-theme a { color: #7dd3fc; }
.tf-theme a:hover { color: #bae6fd; }
.tf-theme input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
.tf-theme select,
.tf-theme textarea {
  background: var(--tf-input);
  color: #ffffff;
  border: 1px solid rgba(147, 197, 253, 0.32);
  border-radius: 11px;
  padding: 0.65rem 0.85rem;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.tf-theme input::placeholder, .tf-theme textarea::placeholder { color: #7f9bc7; }
.tf-theme input:focus, .tf-theme select:focus, .tf-theme textarea:focus {
  outline: none; border-color: #7dd3fc; background: rgba(9, 27, 74, 0.75);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.28);
}
.tf-theme input[type=file] { color: #d6e6ff; }
.tf-theme input[type=file]::file-selector-button {
  margin-right: 0.75rem; padding: 0.45rem 0.9rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(165, 210, 255, 0.45); background: rgba(255, 255, 255, 0.12); color: #fff;
}
.tf-theme select option { background: #1e3a8a; color: #fff; }

/* martial arts / payment pills */
.tf-theme .checkbox-grid { gap: 0.5rem; }
.tf-theme .checkbox-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.8rem; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(165, 210, 255, 0.22);
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.tf-theme .checkbox-item:hover { transform: translateY(-1px); border-color: rgba(125, 211, 252, 0.55); }
.tf-theme .checkbox-item:has(input:checked) {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.32), rgba(37, 99, 235, 0.3));
  border-color: #7dd3fc; box-shadow: 0 6px 18px rgba(14, 116, 233, 0.3);
}
.tf-theme .checkbox-item input { accent-color: #38bdf8; }

/* ---- buttons -------------------------------------------------------------------- */
.tf-theme .btn-primary {
  border: none; border-radius: 14px; color: #04163f; font-weight: 800; letter-spacing: 0.02em;
  background: linear-gradient(135deg, #a5f3fc 0%, #38bdf8 45%, #3b82f6 100%);
  box-shadow: 0 12px 30px rgba(56, 189, 248, 0.45);
  transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
}
.tf-theme .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.05);
  box-shadow: 0 16px 38px rgba(56, 189, 248, 0.6); }
.tf-theme .btn-primary:active { transform: translateY(0); }
.tf-theme .btn-outline { border-radius: 14px; color: #fff; border: 1px solid rgba(165, 210, 255, 0.5);
  background: rgba(255, 255, 255, 0.08); }
.tf-theme #setupForm > .btn-lg {
  position: sticky; bottom: 14px; z-index: 5; margin-top: 0.6rem; padding: 1.05rem; font-size: 1.1rem;
}

/* ---- messages ------------------------------------------------------------------- */
.tf-theme .flash { border-radius: 12px; padding: 0.8rem 1rem; margin: 0 auto 1rem; max-width: 980px; }
.tf-theme .flash.error { background: rgba(239, 68, 68, 0.18); border: 1px solid rgba(252, 165, 165, 0.55); color: #fee2e2; }
.tf-theme .flash.success { background: rgba(34, 197, 94, 0.18); border: 1px solid rgba(134, 239, 172, 0.55); color: #dcfce7; }

/* ---- small cards (landing, gym finder, done) --------------------------------------- */
.tf-theme .portal-card {
  margin: 0 auto; background: var(--tf-card); border: 1px solid var(--tf-card-border); border-radius: 20px;
  padding: 2rem; box-shadow: 0 18px 50px rgba(3, 12, 48, 0.35); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.tf-theme .portal-card h1 { color: #fff; }
.tf-theme code { background: rgba(9, 27, 74, 0.6); color: #a5f3fc; padding: 0.15rem 0.45rem; border-radius: 6px; }

/* ---- entrance animation (after the intro) ------------------------------------------- */
body.tf-theme.tf-animate:not(.tf-revealed) .tf-hero,
body.tf-theme.tf-animate:not(.tf-revealed) .setup-block { opacity: 0; }
body.tf-theme.tf-revealed .tf-hero { animation: tf-up 0.7s cubic-bezier(.2, .9, .3, 1) both; }
body.tf-theme.tf-revealed .setup-block { animation: tf-up 0.6s cubic-bezier(.2, .9, .3, 1) both; }
body.tf-theme.tf-revealed .setup-block:nth-of-type(1) { animation-delay: 0.10s; }
body.tf-theme.tf-revealed .setup-block:nth-of-type(2) { animation-delay: 0.16s; }
body.tf-theme.tf-revealed .setup-block:nth-of-type(3) { animation-delay: 0.22s; }
body.tf-theme.tf-revealed .setup-block:nth-of-type(4) { animation-delay: 0.28s; }
body.tf-theme.tf-revealed .setup-block:nth-of-type(n+5) { animation-delay: 0.34s; }

@keyframes tf-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes tf-h-spin { to { transform: rotate(360deg); } }
@keyframes tf-h-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

@media (max-width: 640px) {
  .tf-theme .setup-block { padding: 1.15rem 1rem; border-radius: 16px; }
  .tf-hero { padding-top: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  body.tf-theme * { animation: none !important; transition: none !important; }
  body.tf-theme .tf-hero, body.tf-theme .setup-block { opacity: 1 !important; }
}

/* file pickers inherit a dark box from app.css */
.tf-theme input[type=file] {
  background: var(--tf-input); border: 1px dashed rgba(147, 197, 253, 0.45); border-radius: 11px; padding: 0.55rem;
}
.tf-theme .preview-box { background: rgba(9, 27, 74, 0.35); border-color: rgba(147, 197, 253, 0.35); border-radius: 12px; }

.tf-hero-login { margin-top: 1rem !important; font-size: 0.95rem; }

/* Sign-up: the gym's own address (app.trainfit.gr/<slug>) */
.tf-address-row { display: flex; align-items: center; gap: 0.35rem; }
.tf-address-row input { flex: 1; min-width: 0; }
.tf-address-host { white-space: nowrap; opacity: 0.8; font-weight: 600; }
.tf-address-status { font-size: 0.85rem; min-height: 1.2em; margin-top: 0.3rem; }
.tf-address-status.ok { color: #4ade80; }
.tf-address-status.bad { color: #fca5a5; }
@media (max-width: 480px) { .tf-address-row { flex-wrap: wrap; } .tf-address-row input { flex-basis: 100%; } }