/* Container & layout */
#itm-kalkulator-container { width:100%; box-sizing:border-box; }
#itm-kalkulator-row { display:flex; flex-wrap:wrap; }
#itm-kalkulator-left-column, #itm-kalkulator-right-column { box-sizing:border-box; }
#itm-kalkulator-left-column { padding:0 30px 20px 0; width:45%; }
#itm-kalkulator-right-column { background:#fff; color:#000; border-radius:10px; width:55%; padding-bottom:20px; }

/* Hide boxes */
.hidebox { display:none; margin:20px 20px 0; }
.hidebox h3 { font-size:1.6rem; font-weight:700; text-align:center; }
#itm-normal-range { font-size:2.0rem; font-weight:bold; text-align:center; color:#4338ca; }
#itm-weight-calc-message { text-align:center; }

/* Inputs */
#itm-inputs-row { display:flex; flex-wrap:wrap; margin-bottom:15px; }
#itm-weight-field, #itm-height-field { flex:1; padding:0 5px; }

/* Normalize input/select look & size across browsers (incl. date) */
#itm-kalkulator-container input[type="text"],
#itm-kalkulator-container input[type="date"],
#itm-kalkulator-container select {
    width:100%;
    height:38px;           /* <- unify visual height */
    line-height:48px;
    padding:5px 8px;
    border:1px solid #d1d5db;
    border-radius:4px;
    box-sizing:border-box;
    font: inherit;
    background:#fff;
    color:#111827;
    margin-bottom:15px;
}

/* Keep existing specific selectors (safe to retain) */
#itm-weight-field input, #itm-height-field input { width:100%; margin-bottom:15px; border-radius:4px; }

#itm-sex-age-row { display:flex; flex-wrap:wrap; }
#itm-sex-field, #itm-birthdate-field { flex:1; padding:0 5px; }
#itm-sex-field select, #itm-birthdate-field input { width:100%; margin-bottom:10px; border-radius:4px; }
.itm-note { font-size:.85em; color:#555; }

/* Make sure the date input matches height even with native UI quirks */
#itm-birthdate-input {
    height:38px;           /* match others */
    line-height:38px;
    padding:5px 8px;
    border-radius:4px;
    box-sizing:border-box;
}

/* (Optional) tame webkit date inner parts without removing icon */
#itm-birthdate-input::-webkit-datetime-edit,
#itm-birthdate-input::-webkit-datetime-edit-fields-wrapper,
#itm-birthdate-input::-webkit-datetime-edit-text,
#itm-birthdate-input::-webkit-datetime-edit-month-field,
#itm-birthdate-input::-webkit-datetime-edit-day-field,
#itm-birthdate-input::-webkit-datetime-edit-year-field {
    line-height:28px; /* keep text vertically centered */
}

/* Standard toggle */
#itm-std-toggle-row { padding:0 5px 10px; }
.itm-radio { margin-right:18px; }

/* Buttons */
#itm-buttons-row { display:flex; flex-wrap:wrap; }
#itm-buttons-row button { border-radius:4px; background:#eef2ff; color:#4338ca; margin-right:10px; }
#itm-download-pdf { background:#e0f2fe; color:#075985; }

/* Results */
#itm-bmi-result-container { padding:20px 10px 30px; background:#6366f1; border-radius:10px 10px 0 0; color:#eef2ff; text-align:center; }
#itm-bmi-result-container h3 { font-size:1.6rem; font-weight:700; padding:10px 0 0; margin:0; }
#itm-bmi-result { font-size:3rem; font-weight:bold; }
#itm-bmi-class { font-size:1.5rem; font-weight:700; }
#itm-bmi-explanation { margin-top:4px; font-size:1.2rem; }
#itm-bmi-extra { margin-top:6px; font-size:1.1rem; opacity:.95; }

/* Percentile chart */
#itm-percentile-chart { margin:12px auto 0; max-width:560px; color:#eef2ff; }

/* Errors */
.itm-error { color:#d00; font-size:1em; margin-top:5px; }

/* Mobile */
@media (max-width:760px){
  #itm-kalkulator-left-column, #itm-kalkulator-right-column { width:100%; }
  #itm-kalkulator-left-column { padding-right:0; }
}