/* =====================================================================
   Fékút-verseny – közös komponens (partials/fekut_verseny.blade.php, public/js/fekut-verseny.js)
   Használja: Téli-Nyári termeklap + /fekut-verseny, kissgumi weboldal /fekut-verseny/, ügyfélkijelző.
   Felületenként a --fv-* változókkal színezhető (hátter, kiemelés, betű); a többi alapértéke a TN-é.
   ===================================================================== */
.tnf { position: relative; isolation: isolate; overflow: hidden; border-radius: 32px; padding: 26px; color: #fff;
  background: radial-gradient(80% 60% at 15% 0%, rgba(79, 168, 232, .14), transparent 60%), radial-gradient(70% 60% at 95% 100%, rgba(61, 95, 158, .16), transparent 60%), var(--fv-hatter, var(--ej, #0D1626));
  box-shadow: var(--fv-arny, var(--arny-x, 0 40px 80px -30px rgba(11, 19, 34, .55))) }
.tnf-palya { position: relative; border-radius: 20px; overflow: hidden; background: #090D16; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) }
.tnf-svg { display: block; width: 100%; height: auto }
.tnf-auto { transition: none }
.tnf-fekfeny { transition: opacity .35s }
.tnf-fekl { opacity: 1; transition: opacity .25s }
.tnf-auto.gurul .tnf-fekfeny { opacity: 0 }
.tnf-auto.gurul .tnf-fekl { opacity: .45 }
.tnf-cel { transition: opacity .5s }
.tnf.fut .tnf-cel { opacity: 0 }
.tnf.fut .tnf-cel.kesz { opacity: 1 }
.tnf-palya.v-magas { display: none }
.tnf-skm { position: absolute; transform: translateX(-50%); font-size: 10.5px; font-weight: 700; color: #6F7A96; white-space: nowrap }
.tnf-start { position: absolute; transform: translateY(-100%); margin-left: -1px; padding-left: 9px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #B9C3DB; white-space: nowrap; border-left: 1px solid rgba(242, 245, 251, .5) }
.tnf-sav { position: absolute; left: 14px; margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: #DDE3F0; max-width: 34%; line-height: 1.2; padding: 3px 10px 3px 3px; border-radius: 9px; background: rgba(9, 13, 22, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px) }
.tnf-sav b { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; background: rgba(255, 255, 255, .12); color: #fff }
.tnf-m { position: absolute; transform: translate(var(--tx, -50%), 8px); padding: 4px 11px; border-radius: 999px; font: 800 14px/1.2 var(--fv-disp, var(--disp, system-ui, sans-serif)); letter-spacing: -.01em; white-space: nowrap;
  color: #FFD2C0; background: rgba(255, 138, 92, .16); border: 1px solid rgba(255, 138, 92, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .45s, transform .6s var(--rugo, cubic-bezier(.34, 1.56, .64, 1)) }
.tnf-m.lent { transform: translate(var(--tx, -50%), calc(-100% - 8px)) }
a.tnf-sav { text-decoration: none; transition: background .2s }
a.tnf-sav:hover, a.tnf-sav:focus-visible { background: rgba(36, 80, 143, .55) }
.tnf-savok .n a { color: inherit; text-decoration: none }
.tnf-savok .n a b { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px }
.tnf-savok .n a:hover b { text-decoration-color: #fff }
.tnf-m.jobb { color: #CFF1FF; background: rgba(79, 168, 232, .16); border-color: rgba(79, 168, 232, .5) }
.tnf.fut .tnf-m { opacity: 0 }
.tnf.fut .tnf-m.kesz { opacity: 1 }
.tnf-ujra { position: absolute; right: 40px; top: 36px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .25s, opacity .3s }
.tnf-ujra:hover { background: rgba(255, 255, 255, .2) }

.tnf-eredmeny { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 26px; align-items: center; margin-top: 24px }
.tnf-kulonbseg b { display: block; font: 800 clamp(48px, 6.4vw, 80px)/1 var(--fv-disp, var(--disp, system-ui, sans-serif)); letter-spacing: -.04em; background: var(--fv-grad, var(--grad, linear-gradient(118deg, #4FA8E8, #E4951C))); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 4px }
.tnf-kulonbseg span { display: block; margin-top: 6px; color: #B9C3DB; font-size: 15.5px; max-width: 34ch }
.tnf-kulonbseg strong { color: #fff }
.tnf-savok { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.tnf-savok li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09) }
.tnf-savok li.jobb { border-color: rgba(79, 168, 232, .45); background: rgba(79, 168, 232, .07) }
.tnf-savok .o { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font: 800 18px var(--fv-disp, var(--disp, system-ui, sans-serif)); color: #fff; background: rgba(255, 255, 255, .1) }
.tnf-savok .n { min-width: 0 }
.tnf-savok .n b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tnf-savok .n small { display: block; font-size: 12.5px; color: #8F9BBB; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tnf-savok .d { font: 800 21px var(--fv-disp, var(--disp, system-ui, sans-serif)); letter-spacing: -.02em }
.tnf-becsles { margin: 20px 0 0; font-size: 13px; color: #8F9BBB }
.tnf-becsles span { color: #fff; font-weight: 700 }
.tnf-hogyan { margin-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1) }
.tnf-hogyan summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px 0 2px; font-size: 14px; font-weight: 700; color: #DDE3F0 }
.tnf-hogyan summary::-webkit-details-marker { display: none }
.tnf-hogyan summary::before { content: ""; width: 8px; height: 8px; border: solid #8F9BBB; border-width: 0 1.8px 1.8px 0; transform: rotate(-45deg); transition: transform .35s var(--lassu, cubic-bezier(.16, 1, .3, 1)) }
.tnf-hogyan[open] summary::before { transform: rotate(45deg) }
.tnf-hogyan div { padding: 10px 0 2px; max-width: 86ch }
.tnf-hogyan p { margin: 0 0 10px; font-size: 13.5px; color: #B9C3DB }

@media (max-width: 760px) {
  .tnf { padding: 14px; border-radius: 26px }
  .tnf-palya { border-radius: 16px }
  .tnf-palya.v-szeles { display: none }
  .tnf-palya.v-magas { display: block }
  .tnf-eredmeny { grid-template-columns: 1fr; gap: 18px; margin-top: 18px; padding: 0 6px }
  .tnf-becsles, .tnf-hogyan { padding: 0 6px }
  .tnf-sav { left: 10px; margin-top: 7px; font-size: 12px; max-width: 44% }
  .tnf-savok .n b, .tnf-savok .n small { white-space: normal; overflow: visible }
  .tnf-sav b { width: 20px; height: 20px; font-size: 11px; border-radius: 6px }
  .tnf-m { font-size: 12.5px; padding: 3px 9px; transform: translate(var(--tx, -50%), 6px) }
  .tnf-m.lent { transform: translate(var(--tx, -50%), calc(-100% - 6px)) }
  .tnf-start { font-size: 10px; letter-spacing: .06em }
  .tnf-seb { display: none }
  .tnf-skm { font-size: 10px }
  .tnf-savok .d { font-size: 18px }
  .tnf-ujra { height: 28px; padding: 0 10px; font-size: 11.5px; top: 20px; right: 20px }
  .tnf-ujra svg { width: 13px; height: 13px }
}

/* ---------------------------------------------------------------- osztalyvalaszto (partials/fekut_valaszto) */
.fv-val { display: grid; gap: 10px; margin: 0 0 22px }
.fv-val-sor { display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.fv-val-nev { flex: 0 0 74px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fv-val-cimke, #4A5470) }
.fv-val-gombok { display: inline-flex; gap: 6px; padding: 4px; border-radius: 14px; background: var(--fv-val-hatter, #fff); border: 1px solid var(--fv-val-vonal, #E4E8F2) }
.fv-val-o { width: 44px; height: 40px; border-radius: 10px; display: grid; place-items: center; font: 800 17px/1 var(--fv-disp, var(--disp, system-ui, sans-serif));
  color: var(--fv-val-szoveg, #0B1224); text-decoration: none; transition: background .2s, color .2s, transform .25s var(--rugo, ease) }
.fv-val-o:hover { background: var(--fv-val-hover, #EEF2F8); transform: translateY(-1px) }
.fv-val-o.on { color: #fff; background: var(--fv-val-on, #16233D); box-shadow: 0 6px 16px -8px rgba(22, 35, 61, .7) }
/* az EU-cimke szinei a gomb aljan: A sotetzold ... E piros */
.fv-val-o { position: relative }
.fv-val-o::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 3px; border-radius: 2px; background: var(--c) }
.fv-val-o.o-a { --c: #00A651 } .fv-val-o.o-b { --c: #9ACA3C } .fv-val-o.o-c { --c: #FFCC00 } .fv-val-o.o-d { --c: #F7941D } .fv-val-o.o-e { --c: #ED1C24 }
.fv-val-ki, .fv-val-plusz { font-size: 13.5px; font-weight: 700; color: var(--fv-val-link, #24508F); text-decoration: underline; text-underline-offset: 3px }
.fv-val-plusz { justify-self: start; margin-left: 88px }
@media (max-width: 560px) {
  .fv-val-sor { gap: 8px }
  .fv-val-nev { flex-basis: 100% }
  .fv-val-o { width: 40px; height: 38px; font-size: 16px }
  .fv-val-plusz { margin-left: 0 }
}