:root {
  --brand: #e3001c;
  --brand-dark: #c70016;
  --text-light: #f5f5f5;
  --text-muted: #f5f5f5;
  --bg-dark: #0b0c10;
  --bg-card: #16171d;
  --valid: #19c37d;
  --invalid: #ff4d4d;
}

* { box-sizing: border-box; }
body {
  background: linear-gradient(180deg, #0b0c10 0%, #15171d 100%);
  color: var(--text-light);
  font-family: "Poppins", sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Background spotlights */
.hero-bg { position: fixed; inset: 0;
  background:
    radial-gradient(1000px 600px at 20% 10%, rgba(227,0,28,0.18), transparent 70%),
    radial-gradient(800px 400px at 80% 90%, rgba(255,255,255,0.12), transparent 70%),
    linear-gradient(180deg, #0b0c10 0%, #1a1b20 100%);
  z-index: 0;
}
.spotlight { position:absolute; width:60vw; height:60vw; filter:blur(100px); opacity:.25; border-radius:50%; mix-blend-mode:screen; }
.spotlight.s1 { top: 25%; left:10%; background: rgba(227,0,28,0.35); }
.spotlight.s2 { top: 70%; left:80%; background: rgba(255,255,255,0.1); }
.spotlight.s3 { top: 50%; left:50%; background: rgba(227,0,28,0.2); }

/* Container / Card */
.registration-wrapper { position: relative; z-index: 1; }
.registration-card {
  max-width: 900px;
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  backdrop-filter: blur(12px);
  color: var(--text-light);
  box-shadow: 0 25px 80px rgba(0,0,0,0.6);
  transition: transform .35s ease, box-shadow .35s ease;
}
.registration-card:hover { transform: translateY(-3px); box-shadow: 0 35px 100px rgba(0,0,0,0.8); }

.title-gradient {
  background: linear-gradient(90deg, #fff, #ffd9de 60%, #fff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Progress */
.progress-container { display:flex; justify-content:space-between; position:relative; margin-bottom: 16px; }
.progress-line { position:absolute; top:25%; left:0; width:100%; height:3px; background: rgba(255,255,255,0.1); border-radius:2px; overflow:hidden; }
.progress-line-fill { position:absolute; top:0; left:0; height:3px; width:0%; background: var(--brand); box-shadow: 0 0 15px rgba(227,0,28,0.8); border-radius:2px; transition: width .45s cubic-bezier(.2,.7,.2,1); }
.progress-step { text-align:center; z-index:2; width:33%; color: var(--text-light); }
.progress-step .circle {
  width:46px; height:46px; margin:0 auto; border-radius:50%; background: rgba(255,255,255,0.12);
  color:#fff; line-height:46px; font-weight:600; border:1px solid rgba(255,255,255,0.2);
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}
.progress-step.active .circle { background: var(--brand); box-shadow: 0 0 18px rgba(227,0,28,0.75); transform: scale(1.08); }

/* Inputs */
.form-floating > .form-control, .form-floating > .form-select {
  background: transparent; color:#f5f5f5;
  border: none; border-bottom: 2px solid rgba(255,255,255,0.2); border-radius: 0; padding-left:0; box-shadow:none;
  transition: border-color .25s ease, background .25s ease;
}
.form-floating > label { color: rgba(255,255,255,0.65); }
.form-floating > .form-control:focus, .form-floating > .form-select:focus { border-bottom-color: var(--brand); box-shadow:none; }
.form-control::placeholder { color: transparent; }

/* Valid/Invalid states */
.form-control.is-valid, .form-select.is-valid { border-bottom-color: var(--valid) !important; box-shadow: 0 2px 8px rgba(25,195,125,.25); }
.form-control.is-invalid, .form-select.is-invalid { border-bottom-color: var(--invalid) !important; box-shadow: 0 2px 8px rgba(255,77,77,0.25); animation: shake .2s ease-in-out; }
.invalid-feedback { display:none; color:#ff8080; font-size:.85rem; margin-top:4px; animation: fadeIn .3s ease; }
.show-feedback { display:block !important; }

@keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-2px);} 75%{transform:translateX(2px);} }
@keyframes fadeIn { from {opacity:0; transform: translateY(-3px);} to {opacity:1; transform: translateY(0);} }

/* Buttons */
.btn-primary { background-color: var(--brand); border:none; border-radius:10px; padding:10px 24px; font-weight:600; color:#fff; box-shadow:0 8px 20px rgba(227,0,28,0.35); transition: transform .15s ease, box-shadow .2s ease; }
.btn-primary:hover { background-color: var(--brand-dark); transform: translateY(-1px); }
.btn-outline-primary { border-color: var(--brand); color: var(--brand); }
.btn-outline-primary:hover { background: var(--brand); color:#fff; }
.btn-secondary { border-radius:10px; color:#fff; }
.btn-success { background: linear-gradient(90deg, #18c17a, #14a96a); border:none; border-radius:12px; font-weight:600; }
.btn-success:hover { filter: brightness(1.05); }

/* Steps & actions */
.step { display:none; animation: fadeIn .4s ease; }
.step.active { display:block; }
.wizard-actions { position: relative; }
@media (max-width: 576px) { .wizard-actions .btn { width:100%; } }

/* Children accordion */
.child-form {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  animation: fadeInChild 0.4s ease;
}

@keyframes fadeInChild {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.accordion-button { background: rgba(255,255,255,0.06) !important; color:#fff; }
.accordion-button:not(.collapsed) { color:#fff; background: rgba(227,0,28,0.12) !important; }
.accordion-button:focus { box-shadow: none; }

/* Address suggestions */
.address-suggestions {
  position:absolute; top: calc(100% + 2px); left:0; right:0; z-index:1000;
  background:#1f2025; border:1px solid rgba(255,255,255,0.1); border-top:none; border-radius:0 0 10px 10px; max-height:240px; overflow-y:auto;
}
.suggestion-item { padding:10px 12px; cursor:pointer; color:#f2f2f2; }
.suggestion-item:hover { background: rgba(227,0,28,0.2); }

/* Consents */
.consent-card { background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); }
.password-hint { color:#d6d6d6; }

/* THANK YOU SCREEN */
.thankyou-screen {
  animation: fadeIn .6s ease forwards;
}
.checkmark-svg {
  width: 100px;
  height: 100px;
  stroke-width: 3;
  stroke: #19c37d;
  stroke-miterlimit: 10;
  box-shadow: 0 0 20px rgba(25,195,125,0.4);
  border-radius: 50%;
  display: inline-block;
}
.checkmark-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #19c37d;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark-check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
/* === FORM TRANSITION ANIMATIONS === */
.form-exit {
  animation: formFadeOut .5s ease forwards;
}
.form-enter {
  animation: formFadeIn .6s ease .3s forwards;
}

@keyframes formFadeOut {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.96);
    filter: blur(4px);
  }
}

@keyframes formFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.94);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}
/* === UPLOAD POLJA (tamna tema) === */
.upload-group input[type="file"] {
  background-color: #1e1e1e !important;
  border: 1px solid #444 !important;
  color: #ddd !important;
  padding: 0.6rem;
  border-radius: 10px;
  width: 100%;
  font-size: 0.95rem;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.upload-group input[type="file"]:hover {
  border-color: var(--brand);
}

.upload-group input[type="file"]::file-selector-button {
  background-color: var(--brand);
  color: #fff;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.25s;
  font-weight: 500;
}

.upload-group input[type="file"]::file-selector-button:hover {
  background-color: var(--brand-dark);
}

.upload-group .form-label {
  font-size: 0.95rem;
  color: var(--text-light);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.upload-group .form-label i {
  font-size: 0.9rem;
  opacity: 0.8;
  cursor: help;
}

.upload-group .text-success {
  font-size: 0.9rem;
  vertical-align: middle;
}

/* ✅ Hover efekti na tooltip ikonu */
.upload-group .form-label i:hover {
  color: var(--brand);
  opacity: 1;
  transition: color 0.2s ease;
}
/* === Klub logo styling === */
.club-logo {
  max-width: 100px;
  height: auto;
  display: block;
  margin: 0 auto 1rem auto;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
  transition: transform 0.3s ease, filter 0.3s ease;
}

.club-logo:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}