/* TK úpravy 2025-09-03 */
.existing-licence-buttons {display: grid; grid-template-columns: 1fr 1fr; gap: var(--unit); justify-items: center;}
#content .existing-licence-buttons > a.payment {min-width: 400px;}

.prices-grid {display: grid; grid-template-columns: 1fr; grid-auto-rows: auto;}
.prices-grid > div:first-of-type {border-top: 1px solid var(--lightGrayHover);}
.prices-grid > div {border-bottom: 1px solid var(--lightGrayHover); padding-top: 12px; padding-bottom: 12px;}

@media (max-width: 800px) {
  #content .existing-licence-buttons > a.payment {width: 100%; min-width: 0;}  
  .existing-licence-buttons {grid-template-columns: 1fr;}
}

#content .systemBox{ 
  border: 2px solid var(--lightGray);
  background-color: #f3f6f9;
  background-color: var(--lightGray);
  background-color: white;
  border-radius:10px;    
  margin-right: 5px;
  margin-top: 10px;  
  margin-bottom: 20px;  
  display:inline-block;
  text-align: center;  
  padding:20px 5px;
  position: relative;
  vertical-align: top;
  cursor:pointer;
  width: 160px;  

  display: inline-flex;  
  justify-content: center;
  align-items: center;
  flex-direction: column;  
}

#content .systemBox.year{ 
  min-height: 35px;
  width: 110px;
}

#content .systemBox.user{   
  min-height: 160px;
}

#content .systemBox.system{   
  min-height: 200px;  
}

#content .systemBox:hover{ 
  border: 2px solid #00baf7;
}

#content .systemBox img{ 
  display:inline-block;
  height:100px;
}

#content .systemBox h2{ 
  margin:0px;
  font-size: 18px;
}

#content .systemBox.selected{
  border: 2px solid #00baf7;
}

#content .payment {position: relative;}

#content .systemBox.selected::after,
#content .payment.licence-chooser.selected::after
{
  content: "✔";
  background-color: #0BB9F3;
  background-color: var(--blue);
  width: 48px;
  height: 48px;
  border-radius: 48px;
  font-size: 24px;
  line-height: 48px;
  color:white;
  text-align: center; 
  position: absolute;
  bottom:-24px;
  left:61px;
}

#content .payment.licence-chooser.selected::after {right: -24px; bottom: -24px; left: auto;}

#content .systemBox.year.selected::after{
  left:36px;
}

#content .uctenka{   
  padding:0px;  
  width: 280px;   
  display:inline-block;
  text-align: right;       
}
#content .uctenka p{ 
  margin: 0px;
  font-size: 18px;
}
#content .uctenka .discountDesc{
  color: #FFA000;
  color: var(--orange);
}
#content .uctenka h2{ 
  margin: 0px;
  font-size: 26px;
  text-align: right;  
}

@media screen and (max-width: 550px) {

  #content .systemBox.system,#content .systemBox.user{   
    width: 100px; 
    width: 30%; 
    border-radius:10px;    
    margin-right: 5px;
    margin-top: 10px;  
    margin-bottom: 20px;  
    display:inline-block;
    text-align: center;  
    padding:10px 5px;
    min-height: 160px;  
   }

  #content .systemBox.selected::after{
    left:26px;
  }

  #content .systemBox h2{ 
    margin:0px;
    font-size: 16px;
  }

  #content .systemBox.year{   
    min-height: 35px;  
    margin-right: 2px;
    margin-left: 0px;
    width: 90px;
    width: 30%; 
  }

  #content .systemBox.year p{ 
    font-size: 14px;
  }

  #content .systemBox.year.selected::after{  
    left:23px;
  }

} /* mobilesekce  */

/* PAYMENT TLACITKA */
#content .payment{   
  width: 60%;
  min-width: 350px;
  min-height: 60px;  
  padding:10px 20px;
  margin-bottom: 5px;  
  margin-top: 5px;  
  text-align: left;  

  border: 2px solid var(--lightGray);
  background-color: #f3f6f9;
  background-color: white;
  border-radius:10px;          
  display:inline-block;
  text-align: center;  
  cursor:pointer;  

  display: inline-flex;  
  justify-content: space-between;
  align-items: center;  
  color:var(--blue);
}

#content .payment:hover{ 
  border: 2px solid #00baf7;
  text-decoration: none;
}

#content .payment.selected{
  border: 2px solid #00baf7;
}

@media screen and (max-width: 550px) {
  #content .payment:hover{ 
    border: 2px solid var(--lightGray);
  }
}