:root {
    --off-white-shade: #e8f2f8;
}

/* copy of "kusy" follows, len logickejsie meno */
.kalkPole{
width:290px;
height:200px;
float:left;
margin-left:40px;
text-align:center;
}

/* copy of "pocet_kusov" follows, len logickejsie meno */
.kalkElement{
width:100%;
height:25px;
text-align:center;
margin-top:20px;
font-weight:500;
font-size:15px;
color: var(--darker-blue);
}



/* copy of "vyber_p" follows, len logickejsie meno */
.kalkDropDownList{
width:300px;
height:auto;
overflow:auto;
margin-left:15px;
margin-top:5px;
text-align:left;
color: var(--darker-blue);
font-family:Roboto;
font-weight:500;
font-size:15px;
margin-bottom:10px;
}

.kalkRadioGroup{
margin-left:15px;
text-align:left;
font-weight:bold;
}


/* copy of "inpk, len logickejsie meno */
.kalkInputBox{
width:150px;
height:50px;
text-align:center;
font-size:30px;
font-family:Tahoma;
//background:#cbe5ef;
background: var(--off-white-shade); 
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius:7px;
border: 0px solid var(--off-blue);
color: var(--gray-neutral);

}


.cenasdph{
float:center;
font-size:13px;
margin-top:10px;
color: var(--darker-blue);
}

/* copy of "laminacia, len logickejsie meno */
.dropDownFormat{
font-family:Roboto;
font-size:13px;
//background:#cbe5ef;
border-radius:5px;
background: var(--off-white-shade);
border:1px solid var(--off-white-shade);
color: var(--gray-neutral);
}

.grid-layout {
  display: grid;
  /* 1fr (Left) | auto (Dash) | 1fr (Right) */
  grid-template-columns: 1fr auto 1fr; 
  gap: 3px 8px; /* Vertical and horizontal spacing */
  align-items: center; /* Vertical alignment */
  max-width: 400px; /* Adjust as needed */
}

/* Left Column */
#AltKsA, #AltKsB, #AltKsC {
  text-align: right;font-size:15px; font-weight:400;
}

#AltKsA b, #AltKsB b, #AltKsC b {
  font-weight: 500; 
}

/* Middle Column (the dash) */
.separator {
  text-align: center;
}

/* Right Column */
#AltKsAPrice, #AltKsBPrice, #AltKsCPrice {
  text-align: left; font-size:15px; font-weight:400;
}


.divplocha{
position: relative; 
width: 150px;
margin-left: 260px;
top: -50px;
text-align: center; 
color: var(--primary-blue);
font-size:13px;font-family:Roboto;}



/* previewMK2 - for images, AI generated */

.previewIM {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.previewIM:hover::after {
    content: attr(data-title);
    white-space: pre-wrap; /* This makes 
 actually break the line */
    position: absolute;
    top: 60%;       /* Positioned just below the image */
    left: 110%;
    transform: translateX(-50%);
    z-index: 9999;

    width: max-content;
    max-width: 250px;
    padding: 3px 8px;
    background: #ffffff;
    border: 1px solid #cccccc;
    color: #909090;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    display: block;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}


/* radio group (eg. laminacia) formatting, AI generated */

.radio-group {
    display: flex;
    flex-direction: column;
    align-items: center; /* This centers the radio + text as a unit */
    gap: 5px;
    float: right;        /* Keeps it under the dropdown */
    width: 205px;        /* Matches dropdown width exactly */
    margin-top: 0px;    /* Adds the small space below dropdown */  
}

.radio-label {
    display: flex;
    align-items: center; 
    width: 140px;        /* Set a fixed width to keep radio circles vertically aligned */
    color: var(--darker-blue);
    font-size: 13px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500; 
    cursor: pointer;
}

.radio-label input[type="radio"] {
    margin: 0 8px 0 0; /* Resets top/bottom to 0 and adds 8px to the right */
    cursor: pointer;
}