/* Kishajó Foglalás – frontend stílus */
/* color-scheme:light => a böngésző világos felületként kezeli a foglalót: nem invertálja
   a színeket (Chrome/Edge automatikus sötét mód), és a form elemek (naptár-gombok,
   legördülők, dátumválasztó) világos, jól olvasható natív megjelenést kapnak. */
.kishajo-foglalo { max-width:760px; margin:0 auto; font-family:inherit; color:#3A3A3A; color-scheme:light; }
/* Nyelvváltó (HU/EN) a foglaló tetején */
.kishajo-nyelv-valto { text-align:right; margin:0 0 10px; font-size:.9em; color:#6b7280; }
.kishajo-nyelv-valto span { margin-right:4px; }
.kishajo-nyelv-valto a { display:inline-block; padding:2px 9px; margin-left:3px; border:1px solid #cfd6e0; border-radius:6px; text-decoration:none; color:#205393; }
.kishajo-nyelv-valto a.aktiv { background:#205393; color:#fff; border-color:#205393; font-weight:700; }
.kishajo-foglalo .kishajo-step { background:#fff; border:1px solid #e4e8ee; border-radius:12px; padding:18px 20px; margin:0 0 16px; box-shadow:0 1px 4px rgba(32,83,147,.06); }
.kishajo-foglalo h3 { display:flex; align-items:center; gap:10px; margin:.2em 0 .8em; color:#205393; font-size:1.15em; }
.kishajo-foglalo h3 span { display:inline-flex; width:28px; height:28px; border-radius:50%; background:#205393; color:#fff; align-items:center; justify-content:center; font-size:.9em; }
.kishajo-foglalo select, .kishajo-foglalo input, .kishajo-foglalo textarea { font: inherit; padding:9px 11px; border:1px solid #cfd6e0; border-radius:8px; background:#fff; color:#333; }
.kishajo-foglalo #kishajo-hajo { width:100%; }
.kishajo-foglalo textarea { width:100%; min-height:70px; margin-top:10px; }
.kishajo-cal-head { display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:10px; }
.kishajo-cal-head button { background:#205393; color:#fff; border:none; border-radius:8px; width:34px; height:34px; font-size:1.2em; cursor:pointer; line-height:1; }
.kishajo-cal { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.kishajo-dow { text-align:center; font-weight:600; color:#205393; font-size:.85em; padding:4px 0; }
/* A szám színét EXPLICIT rögzítjük (color), különben sötét böngésző-témánál a böngésző
   fehér rendszerszínt adna a fehér háttéren = láthatatlan szám. Így mindig olvasható. */
.kishajo-day { padding:10px 0; border:1px solid #dfe5ee; border-radius:8px; background:#fff; color:#3A3A3A; cursor:pointer; font: inherit; }
.kishajo-day:hover { border-color:#25A8E0; background:#eaf5fc; }
.kishajo-day.sel { background:#F06246; color:#fff; border-color:#F06246; font-weight:700; }
.kishajo-day.past { opacity:.35; cursor:not-allowed; background:#f3f4f6; }
/* Nem foglalható (zárolt) nap: áthúzott X + halvány piros háttér.
   A két átlós színátmenet adja ki az X jelölést a dátummező fölött.
   A :hover állapotot is ide vesszük, hogy az általános .kishajo-day:hover ne írja felül az X-et. */
.kishajo-day.blocked,
.kishajo-day.blocked:hover {
  cursor:not-allowed;
  color:#c0392b;
  border-color:#e7a9a0;
  background-color:#fdecea;
  background-image:
    linear-gradient(to top left,  transparent calc(50% - 0.75px), #e08a7d calc(50% - 0.75px), #e08a7d calc(50% + 0.75px), transparent calc(50% + 0.75px)),
    linear-gradient(to top right, transparent calc(50% - 0.75px), #e08a7d calc(50% - 0.75px), #e08a7d calc(50% + 0.75px), transparent calc(50% + 0.75px));
  position:relative;
}
/* Hover buborék (tooltip) a nap fölött – a data-tooltip attribútum tartalmát írja ki. */
.kishajo-day.blocked::after {
  content: attr(data-tooltip);
  position:absolute; left:50%; bottom:100%;
  transform:translateX(-50%); margin-bottom:7px;
  background:#3A3A3A; color:#fff;
  padding:5px 9px; border-radius:6px;
  font-size:.78em; font-weight:600; line-height:1.2; white-space:nowrap;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .15s ease; z-index:10;
}
/* Kis lefelé mutató nyíl a buborék aljához. */
.kishajo-day.blocked::before {
  content:""; position:absolute; left:50%; bottom:100%;
  transform:translateX(-50%); margin-bottom:1px;
  border:5px solid transparent; border-top-color:#3A3A3A;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .15s ease; z-index:10;
}
.kishajo-day.blocked:hover::after,
.kishajo-day.blocked:hover::before { opacity:1; visibility:visible; }
/* A naptár alatti, jól látható "Nem foglalható dátum" felirat (hoverkor jelenik meg). */
.kishajo-zarolt-info {
  margin:10px 0 0; padding:8px 12px;
  background:#fdecea; border:1px solid #e7a9a0; border-radius:8px;
  color:#c0392b; font-weight:600; font-size:.92em; text-align:center;
}
.kishajo-ido { margin-top:14px; padding-top:14px; border-top:1px dashed #dde3ec; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.kishajo-ido label { display:flex; flex-direction:column; gap:4px; font-size:.9em; color:#205393; font-weight:600; }
.kishajo-valasztott-nap { width:100%; margin:0 0 4px; font-weight:600; }
.kishajo-hint { width:100%; color:#F06246; margin:6px 0 0; font-size:.9em; }
.kishajo-bd { width:100%; border-collapse:collapse; }
.kishajo-bd td { padding:8px 6px; border-bottom:1px solid #eef1f5; }
.kishajo-bd td:last-child { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.kishajo-bd .kishajo-sum td { font-weight:700; border-top:2px solid #205393; color:#205393; }
.kishajo-bd .kishajo-dep td { font-weight:700; color:#F06246; font-size:1.05em; }
.kishajo-muted { color:#8a93a3; }
.kishajo-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.kishajo-grid input { width:100%; }
.kishajo-btn { margin-top:14px; background:#F06246; color:#fff; border:none; border-radius:10px; padding:13px 22px; font-size:1.05em; font-weight:700; cursor:pointer; width:100%; }
.kishajo-btn:hover { background:#d94e34; }
.kishajo-btn:disabled { background:#c7ccd4; cursor:not-allowed; }
.kishajo-ok { background:#eef9f0; border:1px solid #b6e0c0; border-radius:12px; padding:18px 22px; }
.kishajo-ok h3 { color:#1c7a3a; }
.kishajo-warn { background:#fff4f1; border:1px solid #f4c4b8; border-radius:10px; padding:12px 16px; color:#b33b22; }
@media(max-width:560px) { .kishajo-grid { grid-template-columns:1fr; } .kishajo-day { padding:8px 0; font-size:.9em; } }