/* Időpontválasztó. Két helyen fut ugyanez a kód: a kérdőív negyedik lépésén
   és a /foglalas oldalon (lemondás, áthelyezés).

   A színek, betűk és sugarak MIND a meglévő oldal értékei — a komponens nem
   hoz saját arculatot. Az egyetlen szabadon hagyott döntés az, hogyan jelzi a
   naptár a szabad napokat: a szokásos pötty helyett a réz vonal, ami az oldal
   saját motívuma a kurzusoldalakról. */

.fg { font-family: 'Instrument Sans', sans-serif; color: #F5F5F3; min-width: 0; container-type: inline-size; }
.fg *, .fg *::before, .fg *::after { box-sizing: border-box; }
.fg button {
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.fg-naptar, .fg-savok { min-width: 0; }

.fg-racs {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

/* Üzenet-állapot: nincs naptár, tehát nincs értelme két oszlopnak sem. */
.fg-racs--egyoszlop { grid-template-columns: 1fr; }

/* --- Naptár --- */

.fg-honap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 20px;
}
.fg-honap-nev {
  font-weight: 600; font-size: 15px; letter-spacing: 0.01em;
}
.fg-lep {
  flex: none; width: 50px; height: 50px; display: grid; place-items: center;
  background: none; border: 1px solid rgba(255,255,255,0.09); border-radius: 8px;
  color: rgba(245,245,243,0.72); cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.fg-lep:disabled { opacity: 0.28; cursor: default; }
.fg-lep:focus-visible { outline: 2px solid #F0A84B; outline-offset: 3px; }

.fg-hetfej, .fg-napok {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px 4px;
}
.fg-hetfej {
  margin-bottom: 12px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em;
  color: rgba(245,245,243,0.42); text-align: center;
}

.fg-nap {
  position: relative; min-width: 0; min-height: 50px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 1px solid transparent; border-radius: 9px;
  font-family: inherit; font-size: 14px; font-variant-numeric: tabular-nums;
  color: rgba(245,245,243,0.24); cursor: default;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
/* A szabad nap jelzese KIZAROLAG a rez vonal. Keret is, vonal is ugyanazt
   mondana ketszer, es a keretes racs sulyosabb, mint amit egy naptar elbir. */
.fg-nap[data-szabad] { color: #F5F5F3; cursor: pointer; }
.fg-nap:focus-visible { outline: 2px solid #F0A84B; outline-offset: 2px; }

/* A réz vonal: szabad nap jelzése. Ugyanaz a gradiens, mint a haladásjelzőn
   és a gombokon — a komponens így az oldal szókincsét használja. */
.fg-nap[data-szabad]::after {
  content: ''; position: absolute; left: 50%; bottom: 5px;
  width: 14px; height: 2px; border-radius: 2px; transform: translateX(-50%);
  background: linear-gradient(90deg, #F0A84B, #E07B39);
}
.fg-nap[aria-pressed="true"] {
  background: linear-gradient(180deg, #F0A84B, #E07B39);
  border-color: transparent; color: #1A1206; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.fg-nap[aria-pressed="true"]::after { display: none; }

/* --- Sávok --- */

/* A savlista egyetlen oszlopnyi dontes: 1440px-en szethuzva az ido es a
   sor vege kozott ures mezo tatongana. */
.fg-savok { max-width: 420px; }

/* A nap cime a honapfejlec magassagara all be, hogy a ket oszlop egy
   vonalban induljon. */
.fg-nap-cim {
  min-height: 50px; display: flex; align-items: center;
  margin: 0 0 20px; font-size: 14px; font-weight: 600;
  color: rgba(245,245,243,0.72);
}

/* Sorok hajszálvonallal, nem külön kártyákkal: a kártyarács minden elemet
   egyformán fontosnak mutatna, itt viszont a lista egyetlen döntés. */
.fg-lista { display: flex; flex-direction: column; }
.fg-sor {
  display: flex; gap: 8px; align-items: stretch;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.fg-sor:first-child { border-top: 1px solid rgba(255,255,255,0.07); }

.fg-sav {
  flex: 1 1 auto; min-height: 50px; text-align: left;
  background: none; border: none; padding: 16px 4px;
  font-family: inherit; font-size: 15.5px; font-variant-numeric: tabular-nums;
  color: #F5F5F3; cursor: pointer;
  transition: color 0.18s, padding-left 0.18s;
}
.fg-sav:focus-visible { outline: 2px solid #F0A84B; outline-offset: -2px; border-radius: 6px; }
.fg-sor[data-valasztott] .fg-sav { flex: 0 0 40%; color: #F0A84B; font-weight: 600; }

.fg-megerosit {
  flex: 1 1 auto; min-height: 50px; margin: 7px 0;
  background: linear-gradient(180deg, #F0A84B, #E07B39);
  color: #1A1206; border: none; border-radius: 9px; padding: 0 20px;
  font-family: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
  transition: filter 0.2s, box-shadow 0.2s;
}
.fg-megerosit:disabled { filter: grayscale(0.4) brightness(0.8); cursor: default; }
.fg-megerosit:focus-visible { outline: 2px solid #F5F5F3; outline-offset: 3px; }

.fg-tovabb {
  min-height: 50px; margin-top: 16px; display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; padding: 6px 0;
  font-family: inherit; font-size: 14px; color: rgba(245,245,243,0.62); cursor: pointer;
  transition: color 0.2s;
}
.fg-tovabb:focus-visible { outline: 2px solid #F0A84B; outline-offset: 3px; border-radius: 4px; }
.fg-tovabb svg { transition: transform 0.2s; }
.fg-tovabb[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Érintés után ne maradjon egérre szánt hover-állapot. A kiválasztott
   nap narancsszínét egérrel sem írhatja felül a szürke háttér. */
@media (hover: hover) and (pointer: fine) {
  .fg-lep:hover:not(:disabled) { border-color: rgba(255,255,255,0.28); color: #F5F5F3; }
  .fg-nap[data-szabad][aria-pressed="false"]:hover { background: rgba(255,255,255,0.06); }
  .fg-sav:hover { color: #F0A84B; padding-left: 8px; }
  .fg-megerosit:hover:not(:disabled) {
    filter: brightness(1.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 10px 22px -10px rgba(224,123,57,0.55);
  }
  .fg-tovabb:hover { color: #F5F5F3; }
}

.fg-tz {
  margin: 18px 0 0; font-size: 13px; line-height: 1.5;
  color: rgba(245,245,243,0.42);
}

/* --- Állapotok --- */

.fg-uzenet {
  margin: 0 0 16px; padding: 12px 14px; border-radius: 9px;
  font-size: 14px; line-height: 1.55;
  background: rgba(224,123,57,0.10); border: 1px solid rgba(224,123,57,0.28);
  color: #F5F5F3;
}
.fg-uzenet[hidden] { display: none !important; }

.fg-vaz { display: grid; gap: 8px; }
.fg-vaz span {
  display: block; height: 44px; border-radius: 9px;
  background: rgba(255,255,255,0.045);
}
@media (prefers-reduced-motion: no-preference) {
  .fg-vaz span { animation: fgLuktet 1.6s ease-in-out infinite; }
  @keyframes fgLuktet { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
}

.fg-ures {
  margin: 0; font-size: 14.5px; line-height: 1.7; color: rgba(245,245,243,0.72);
}

@media (max-width: 767px) {
  .fg-racs { grid-template-columns: 1fr; gap: 32px; }
  .fg-naptar { max-width: 340px; }
}

/* A foglaló kártyája asztalon is lehet keskenyebb a nézetnél. */
@container (max-width: 500px) {
  .fg-racs { grid-template-columns: 1fr; gap: 32px; }
  .fg-naptar { max-width: 340px; }
}