/* ==========================================================================
   responsive.css – responzívna vrstva nad pôvodným test_mini.css
   Cieľ: PC = plná šírka obrazovky, mobil (hlavne iPhone/Safari) = pohodlné
   ovládanie, veľké tlačidlá, podpora "safe area" (Dynamic Island / notch).
   Načítava sa PO test_mini.css, preto používa !important na prebitie.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;      /* Safari nezväčšuje text svojvoľne */
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0.08);
  -webkit-overflow-scrolling: touch;
}
img { max-width: 100%; height: auto; }

/* Odstránenie pevných min-šírok, ktoré rozbíjali mobil ------------------- */
.otazkadiv, .otazkatextdiv, .odpoveddiv, .ways, .middiv,
.container, .container-fluid, .fullsizep {
  min-width: 0 !important;
}

/* Plná šírka celej appky (PC aj mobil) ---------------------------------- */
.top, #topdiv { width: 100% !important; }
.maindiv, #maindiv {
  width: 100% !important;
  float: none !important;
  max-width: 100% !important;
}
.container, .container-fluid, .fullsizep {
  width: 100% !important;
  max-width: 100% !important;
}

/* Odpovede – kontajner drží floaty vnútri (žiadne pretekanie) ------------ */
.answercontainer {
  width: 100% !important;
  margin: 8px 0 !important;
  overflow: hidden;
}

/* Pekné, výrazné navigačné tlačidlá ------------------------------------- */
.waybutton, input.waybutton {
  background: #143a8a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 18px !important;
  font-size: 16px !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.waybutton:active { filter: brightness(0.9); }
.ways { background: transparent !important; border: none; }

/* ======================= PC / veľké obrazovky =========================== */
@media (min-width: 769px) {
  .maindiv, #maindiv { padding: 6px 20px 40px !important; top: 40px !important; }
  /* text otázky vľavo, obrázok vpravo – využije celú šírku */
  #ottxt, #xottxt { font-size: 20px !important; }
}

/* ============================ MOBIL ==================================== */
@media (max-width: 768px) {

  /* Horný pruh: rešpektuje safe-area (Dynamic Island) */
  .top, #topdiv {
    height: auto !important;
    min-height: 34px;
    padding-top: env(safe-area-inset-top) !important;
    overflow: visible !important;
  }
  #msgdiv {
    max-width: 60% !important;
    font-size: 13px !important;
    padding-left: calc(6px + env(safe-area-inset-left)) !important;
  }
  #toprightdiv {
    width: auto !important;
    max-width: 38% !important;
    font-size: 11px !important;
    padding-right: calc(10px + env(safe-area-inset-right)) !important;
  }

  /* Hlavný obsah pod horným pruhom + bočné/spodné safe-area okraje */
  .maindiv, #maindiv {
    position: relative !important;
    top: 0 !important;
    float: none !important;
    margin-top: calc(46px + env(safe-area-inset-top)) !important;
    padding: 10px calc(10px + env(safe-area-inset-right))
             calc(24px + env(safe-area-inset-bottom))
             calc(10px + env(safe-area-inset-left)) !important;
  }

  /* Časomiera */
  #timerow { margin-bottom: 8px !important; }
  #timediv { font-size: 16px !important; padding: 0 4px; }
  #timespan { font-size: 18px !important; }
  #timebardiv { height: 26px !important; }

  /* Zoznam čísel otázok – väčšie a prehľadnejšie dlaždice */
  #questionlistdiv { padding: 2px 0 6px !important; }
  .listnrdiv {
    width: auto !important;
    min-width: 34px !important;
    padding: 7px 0 !important;
    font-size: 15px !important;
    text-align: center;
  }

  /* Stĺpce pod seba, na plnú šírku (prebíja bootstrap col-xs-*) */
  #mainrow { margin-top: 8px !important; }
  #col1, #col2, #xcol2 {
    width: 100% !important;
    float: none !important;
    min-height: 0 !important;
    padding: 6px !important;
  }

  /* Informácia o otázke */
  #questioninfodiv { font-size: 17px !important; margin-top: 6px !important; padding: 8px !important; }
  #basketdiv { font-size: 14px !important; }

  /* Text otázky + obrázok pod seba */
  #ottxt, #otobr, #xottxt, #xotobr {
    width: 100% !important;
    float: none !important;
    min-height: 0 !important;
  }
  #ottxt, #xottxt { font-size: 18px !important; line-height: 1.4; padding: 12px !important; }
  #otobr, #xotobr { padding: 6px 0 !important; text-align: center; }
  #otobr img, #xotobr img { max-width: 100% !important; max-height: 60vh !important; height: auto !important; }

  /* Odpovede A/B/C – veľký ťukací cieľ */
  .answercontainer {
    padding: 12px !important;
    margin: 8px 0 !important;
    min-height: 56px;
    font-size: 17px !important;
  }
  .answerbutton {
    width: 42px !important;
    min-width: 42px !important;
    float: left !important;
    margin: 0 12px 0 0 !important;
    padding: 8px 0 !important;
    text-align: center;
    font-size: 20px !important;
    font-weight: 700 !important;
    background: #fff !important;
    border-radius: 8px !important;
  }
  .answer {
    width: calc(100% - 56px) !important;
    float: left !important;
    padding: 4px 0 !important;
    background: transparent !important;
    font-size: 17px !important;
    line-height: 1.45;
  }

  /* Navigačné tlačidlá – veľké, dobre dostupné */
  .ways { text-align: center; padding: 6px 0 !important; }
  .ways input.waybutton, .ways .waybutton {
    display: inline-block;
    margin: 6px 4px !important;
    padding: 13px 14px !important;
    font-size: 16px !important;
    min-height: 46px;
  }
  #bprev, #bnext {
    width: 47% !important;
    float: none !important;
    vertical-align: middle;
  }

  /* Prihlasovacia obrazovka (výber jazyka) */
  .logo { width: 55% !important; max-width: 240px; }
  #maindiv center h1 { font-size: 22px !important; }
  #maindiv center img[onclick^="runTest"] {
    width: 120px !important; height: auto !important; margin: 8px !important;
  }

  /* Modálne okná na plnú šírku */
  .modal-dialog { width: 96% !important; margin: 10px auto !important; }
  #questionModal .modal-dialog { width: 96% !important; }
}

/* Veľmi úzke telefóny */
@media (max-width: 380px) {
  #ottxt, #xottxt, .answer, .answercontainer { font-size: 16px !important; }
  #bprev, #bnext { width: 46% !important; }
}