/*! custom-inputs.css v1.1 — styled checkbox & radio (FA check, persistent border, focus halo)
    - input + label (input PRED labelom, label[for] -> id inputu)
    - checkbox: square + blue FA check
    - radio:    circle + blue FA check (ako si chcel)
    - persistent border when checked, stronger on focus
    - hover, jemné animácie, dark mode, reduced motion
*/

/* ================= Vars ================= */
:root{
  --ci-size:            18px;        /* vizuálny box/kruh */
  --ci-border:          2px;
  --ci-radius-checkbox: 4px;
  --ci-radius-radio:    50%;

  --ci-leftpad:         28px;        /* padding-left na labeli */

  --ci-color-border:    #666;
  --ci-color-bg:        #fff;
  --ci-color-check:     #007bff;     /* farba fajky + border pri checked */
  --ci-color-focus:     rgba(0,123,255,.45); /* halo pri fókuse */

  --ci-duration:        .16s;        /* animácie: scale/fade/border */
}

/* Optional: automatický dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --ci-color-border:#aaa;
    --ci-color-bg:#111;
    --ci-color-check:#4da3ff;
    --ci-color-focus:rgba(77,163,255,.5);
  }
}

/* ================= Base ================= */
/* Input vizuálne skrytý, ale prístupný cez <label for> */
.checkbox-custom {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background: none !important;
  outline: none !important;
}



/* Klik plocha + miesto na ikonku vlavo */
.checkbox-custom + .checkbox-custom-label{
  position:relative;
  display:inline-block;
  cursor:pointer;
  user-select:none;
  padding-left:var(--ci-leftpad);
  line-height:calc(var(--ci-size) + 2px);
  -webkit-tap-highlight-color: transparent;
}

/* Reset starých pseudo-elementov/prekryvov z tém */
.checkbox-custom + .checkbox-custom-label::after{
  content:none !important;
  background:none !important;
  border:none !important;
}

/* Základný „box/kruh“ pred výberom */
.checkbox-custom + .checkbox-custom-label::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:var(--ci-size);
  height:var(--ci-size);
  border:var(--ci-border) solid var(--ci-color-border);
  border-radius:var(--ci-radius-checkbox); /* checkbox default */
  background:var(--ci-color-bg);
  box-sizing:border-box;
  text-align:center;
  line-height:calc(var(--ci-size) - var(--ci-border));
  font-size:0; /* zabije zblúdilé znaky z tém */
  transition:
    border-color var(--ci-duration) ease,
    box-shadow   var(--ci-duration) ease,
    transform    var(--ci-duration) ease,
    background-color var(--ci-duration) ease;
}

/* Radio už pred výberom = kruh (prebijeme staré témy) */
.checkbox-custom[type="radio"] + .checkbox-custom-label::before{
  border-radius:var(--ci-radius-radio) !important;
}

/* ================= Checked state ================= */
/* FA fajka (tucná) pre checkbox aj radio */
.checkbox-custom[type="checkbox"]:checked + .checkbox-custom-label::before,
.checkbox-custom[type="radio"]:checked    + .checkbox-custom-label::before{
  content:"\f00c";
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free","FontAwesome" !important;
  font-weight:900;
  font-size:calc(var(--ci-size) - 2px);       /* výraznejšia fajka */
  color:var(--ci-color-check);
  line-height:calc(var(--ci-size) - 4px);     /* lepšie centrovanie v boxe */
  border-color:var(--ci-color-check);
  /* PERMANENTNÝ OKRAJ pri checked (aj bez focusu) */
  box-shadow:0 0 0 2px var(--ci-color-check);
}

/* Jemné „pop“ pri toggle */
.checkbox-custom:checked + .checkbox-custom-label::before{
  transform:translateY(-50%) scale(1.04);
}
.checkbox-custom:not(:checked) + .checkbox-custom-label::before{
  transform:translateY(-50%) scale(1.00);
}

/* ================= Hover & Focus ================= */
.checkbox-custom + .checkbox-custom-label:hover::before{
  border-color:var(--ci-color-check);
}

/* Focus halo (navyše k permanentnému okraju pri checked) */
.checkbox-custom:focus + .checkbox-custom-label::before,
.checkbox-custom:focus-visible + .checkbox-custom-label::before{
  box-shadow:0 0 0 4px var(--ci-color-focus);
  outline:0;
}

/* Checked + Focus = kombinovaný efekt (halo + okraj) */
.checkbox-custom:checked:focus + .checkbox-custom-label::before,
.checkbox-custom:checked:focus-visible + .checkbox-custom-label::before{
  box-shadow:0 0 0 4px var(--ci-color-focus), 0 0 0 2px var(--ci-color-check);
}

/* ================= Reduced motion ================= */
@media (prefers-reduced-motion: reduce){
  .checkbox-custom + .checkbox-custom-label::before{
    transition:none;
  }
}

/* ================= (Volitelné) Unicode varianta =================
   Ak nechceš závisiet na Font Awesome:
   - zakomentuj FA blok vyššie a odkomentuj nižšie
-------------------------------------------------------------------
.checkbox-custom[type="checkbox"]:checked + .checkbox-custom-label::before,
.checkbox-custom[type="radio"]:checked    + .checkbox-custom-label::before{
  content:"\2713";
  font-family:inherit !important;
  font-size:calc(var(--ci-size) - 2px);
  color:var(--ci-color-check);
  line-height:calc(var(--ci-size) - 4px);
  border-color:var(--ci-color-check);
  box-shadow:0 0 0 2px var(--ci-color-check);
}
*/