/* =====================================================================
   NEW ROMA BOXING TEAM – formularz w stylu szkła
   Wczytaj PO newroma-hero-form.css (nadpisuje jego sekcję 2).
   ===================================================================== */

/* ---------------------------------------------------------------
   0. POPRAWKA CZYTELNOŚCI: jaśniejsza czerwień w nagłówku
   --------------------------------------------------------------- */
.hero h1 [data-i18n="hero_title_2"],
.hero h1 .bg-blood,
.hero h1 .accent,
.hero h1 .red {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #e3202f !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.7), 0 0 24px rgba(227,32,47,.30) !important;
}

/* ---------------------------------------------------------------
   1. ŚWIATŁO ZA KARTĄ: podbita poświata i głębia
   --------------------------------------------------------------- */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(34% 56% at 70% 50%, rgba(200,0,26,.38), transparent 75%),
    radial-gradient(24% 34% at 82% 16%, rgba(255,185,115,.20), transparent 72%);
}

/* ---------------------------------------------------------------
   2. KARTA SZKLANA: wzmocniony połysk i szklane krawędzie
   --------------------------------------------------------------- */
.hero-form {
  position: relative !important;
  isolation: isolate !important;
  border: 0 !important;
  border-radius: 10px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.07) 38%, rgba(255,255,255,.02) 70%, rgba(255,255,255,.06) 100%),
    rgba(14,9,9,.42) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) brightness(1.08) !important;
  backdrop-filter: blur(20px) saturate(1.4) brightness(1.08) !important;
  box-shadow:
    0 30px 70px rgba(0,0,0,.60),
    0 0 50px rgba(200,0,26,.22),
    0 1px 0 rgba(255,255,255,.25) inset,
    0 2px 14px rgba(255,255,255,.06) inset !important;
  color: #f5f0f0 !important;
  color-scheme: dark;
}

/* szklana krawędź: jasny gradient zamiast jednolitej obwódki */
.hero-form::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(145deg,
    rgba(255,255,255,.75) 0%, rgba(255,255,255,.20) 28%,
    rgba(255,255,255,.06) 60%, rgba(255,255,255,.45) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.hero-form p,
.hero-form .form-lead {
  color: rgba(245,240,240,.92) !important;
}

/* ---------------------------------------------------------------
   3. POLA: szkło w szkle (spójne dla wszystkich pól) + ciemnoczerwone opcje po kliknięciu
   --------------------------------------------------------------- */
.hero-form input,
.hero-form select,
.hero-form textarea {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 6px !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.30), 0 1px 0 rgba(255,255,255,.08) !important;
  color: #f5f0f0 !important;
  color-scheme: dark !important;
}
.hero-form input::placeholder,
.hero-form textarea::placeholder {
  color: rgba(255,255,255,.55) !important;
}
.hero-form input:focus,
.hero-form select:focus,
.hero-form textarea:focus {
  outline: none !important;
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.65) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(200,0,26,.38) !important;
}

/* TYLKO lista rozwijana po kliknięciu (opcje do wyboru) ma kolor ciemnej czerwieni */
.hero-form select option,
select#goal option,
select option {
  background-color: #380d14 !important;
  color: #ffffff !important;
}
.hero-form select option:hover,
.hero-form select option:focus,
.hero-form select option:checked,
select#goal option:checked {
  background-color: #c8001a !important;
  color: #ffffff !important;
}
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 6px !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.30), 0 1px 0 rgba(255,255,255,.08) !important;
  color: #f5f0f0 !important;
}
.hero-form input::placeholder,
.hero-form textarea::placeholder {
  color: rgba(255,255,255,.55) !important;
}
.hero-form input:focus,
.hero-form select:focus,
.hero-form textarea:focus {
  outline: none !important;
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.65) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(200,0,26,.38) !important;
}

/* Chrome/Safari autouzupełnianie nie może zalać pól żółtym/niebieskim */
.hero-form input:-webkit-autofill,
.hero-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f5f0f0 !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(40,28,28,.92) inset !important;
  caret-color: #fff !important;
  transition: background-color 9999s ease-out 0s !important;
}

/* ---------------------------------------------------------------
   4. PRZYCISK GŁÓWNY: czerwony, z blaskiem i górnym odbłyskiem
   --------------------------------------------------------------- */
.hero-form .btn-submit {
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(200,0,26,.38), 0 1px 0 rgba(255,255,255,.32) inset !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}
.hero-form .btn-submit:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.08) !important;
  box-shadow: 0 12px 30px rgba(200,0,26,.48), 0 1px 0 rgba(255,255,255,.35) inset !important;
}

/* ---------------------------------------------------------------
   5. PRZYCISKI SPOŁECZNOŚCIOWE: szklane pigułki
   --------------------------------------------------------------- */
.hero-form .flex.items-center.justify-center.gap-3 a,
.hero-form .social a,
.hero-form .socials a {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 6px !important;
  color: #f5f0f0 !important;
  transition: background .2s, border-color .2s !important;
}
.hero-form .flex.items-center.justify-center.gap-3 a:hover,
.hero-form .social a:hover,
.hero-form .socials a:hover {
  background: rgba(255,255,255,.15) !important;
  border-color: rgba(255,255,255,.35) !important;
}

/* separator wewnątrz karty */
.hero-form hr,
.hero-form .border-t {
  border-color: rgba(255,255,255,.10) !important;
}

/* ---------------------------------------------------------------
   6. TELEFON I OSOBY WRAŻLIWE NA PRZEZROCZYSTOŚĆ
   --------------------------------------------------------------- */
@media (max-width:700px){
  .hero-form {
    -webkit-backdrop-filter: blur(14px) saturate(1.25) !important;
    backdrop-filter: blur(14px) saturate(1.25) !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05)),
      rgba(14,9,9,.65) !important;
    box-shadow:
      0 20px 50px rgba(0,0,0,.60),
      0 0 35px rgba(200,0,26,.18),
      0 1px 0 rgba(255,255,255,.20) inset !important;
  }
  .hero::after {
    background: radial-gradient(65% 32% at 50% 70%, rgba(200,0,26,.28), transparent 72%) !important;
  }
}
@media (prefers-reduced-transparency:reduce){
  .hero-form {
    background: rgba(22,15,15,.96) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .hero-form {
    background: rgba(22,15,15,.94) !important;
  }
}


/* ---------------------------------------------------------------
   KONTRAST PÓL FORMULARZA I WŁASNY SELECT CHEVRON
   --------------------------------------------------------------- */
.hero::after { pointer-events: none !important; }

.hero-form :is(input, select, textarea) {
  background: rgba(10, 8, 8, .55) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  color: #fff !important;
}
.hero-form ::placeholder {
  color: rgba(255, 255, 255, .62) !important;
}

.hero-form :is(input, select, textarea):focus-visible {
  outline: 2px solid #ff4a5a !important;
  outline-offset: 2px !important;
  border-color: #ff4a5a !important;
}

.hero-form select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 38px !important;
}

@supports not (backdrop-filter: blur(1px)) {
  .hero-form { background: rgba(18, 14, 14, .92) !important; }
}

.container { max-width: 1112px; margin-inline: auto; }