:root{--accent:#6469aa;--muted:#f0f0f0;--danger:#b00020}
*{box-sizing:border-box;font-family: 'Neue Frutiger', Outfit, Inter, Poppins,system-ui,Arial}

.ck-container{margin: 3% 10%;}
.ck-title{margin:6px 0 18px;color:#333}
.ck-grid{display:flex;gap:20px}
.ck-left{flex:1}
.ck-right{width:360px}
.ck-card{background:#fff;padding:18px;border-radius:10px;box-shadow:0 6px 18px rgba(20,20,20,0.05);margin-bottom:14px}
.ck-input{width:100%;padding:15px;border-radius:8px;border:0px;background:var(--muted);margin-top:6px;font-size: 1rem;resize: none;margin: 0 0 2% 0;}
.ck-input:focus {outline: none;background: #f3f4ff;color: var(--accent);}
.ck-textarea {width: 100%; height: 150px;}
.ck-btn{padding:12px 15px;border-radius:8px;border:1px solid #545780 !important;background: #545780;color: #f3f4ff;cursor:pointer;margin: 3% 0 0 0;font-size: 1rem;}
.ck-btn:hover{opacity:.95;color: #6469aa;background: transparent;}
.ck-btn.ck-primary{background:var(--accent);color:#fff;border:none}
.ck-btn.ck-muted{background:#fff;border:1px solid #ddd}
.ck-btn.ck-small{padding:6px 8px;font-size:0.9rem}
.ck-error{color:var(--danger);margin-top:6px;font-size:0.95rem}
.ck-suggest{background:#fff;border:1px solid #eee;border-radius:6px;margin-top:6px;max-height:160px;overflow:auto;display: grid;grid-template-columns: max-content max-content max-content;row-gap: 0.3rem;column-gap: 1.5rem;}
.order-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed #eee;}
.order-row:hover { background: #f9f9f9;}
.ck-summary .line{display:flex;justify-content:space-between;padding:6px 0}
.ck-summary .total{font-weight:700;font-size:1.15rem;margin-top:6px}
.ck-hidden {display:none;}
.ck-choice {cursor: pointer;margin: 5px 0;padding: 1%;box-sizing: border-box;transition: all 0.5s;border: 1px #d8daee solid;border-radius: 8px;box-sizing: border-box;}
.ck-choice-active {background: #f3f4ff;color: #6469aa;}
.ck-choice a {font-size: 1rem;transition: all 0.5s;}
.ck-choice:hover {color:#6469aa;transition: all 0.5s;background: #f3f4ff;}
.ck-boxing {padding: 2.5%; box-shadow: 0 5px 15px rgba(0,0,0,0.1); background: white; box-sizing: border-box; border-radius: 8px;}
.ck-flex {  display: flex;  align-items: normal;  gap: 20px; margin:2% 0; }
.ck-choice-boxes img { vertical-align: middle; }
#address-block, #date-block {padding: 2%;  border: 1px #dbdbdb solid;  box-sizing: border-box;  border-radius: 8px;  flex: 1;}
#ck-login-form {padding: 2%;  border: 1px #dbdbdb solid;  box-sizing: border-box;  border-radius: 8px;}
.ck-line, .ck-total {  display: flex;  gap: 15px;  justify-content: space-between;  border-bottom: 1px #eee solid;  box-sizing: border-box;  align-items: center;  padding: 1% 0;}
.ck-total {font-weight: bold;}
.top-pad { margin: 4% 0 0 0; border-top: 2px black solid; }
.ck-suggest-item {  cursor: pointer;  display: contents;  box-sizing: border-box;}
.ck-suggest-item div {flex:1; }
.ck-suggest-item:hover {color: #6469aa;}
.ck-personal-pickup {  margin: 5% 0 1% 0; border-bottom: 2px #eee solid;  box-sizing: border-box;  padding: 1% 0; user-select: none;}
.ck-line div:first-child { flex: 0.85; }
.ck-check, .ck-agree {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-size: 1rem;
  align-items: center;
}

.ck-check input, .ck-agree input {
//  display: none; /* skryjeme defaultný checkbox */
opacity: 0;      /* neviditeľné */
position: absolute;
top: 0;
}

/* čierny rámček */
.ck-check .custom, .ck-agree .custom {
  width: 24px;
  height: 24px;
  border: 3px solid black;
  padding: 3px; /* biely okraj */
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* obsah vnútri */
.ck-check .custom::after, .ck-agree .custom::after {
  content: "";            /* prázdne, kým nie je zaškrtnutý */
  font-size: 20px;
  line-height: 1;
  font-family: arial, Outfit, Inter;
}

/* po zaškrtnutí */
.ck-check input:checked + .custom::after,  .ck-agree input:checked + .custom::after {
  content: "×";
  color: #000;         /* možno zmeni farbu */
  font-weight: bold;
}

.ck-agree-terms { margin: 5% 0 0 0; }

.ck-agree input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    z-index: 2; /* DÔLEŽITÉ — nesmie byť pod custom prvkom */
}

.code-gift {
  color: silver;
  font-size: 0.9rem;
}

.ck-msg {
  color: red;
}

.box-buycard img {
  vertical-align: middle;
}

.ck-agree div {
  width: 95%;
  box-sizing: border-box;
  font-size: 0.9rem;
}

.ck-agree a {
  font-size: 1rem;
  color: #3737e0;
  text-decoration: underline;
  font-size: 0.9rem;
}

.button-cardpay {
  cursor: pointer;
  font: bold 1.02rem 'Ambit-Bold',Poppins, arial;
  text-decoration: none;
  text-align: center;
  color: #ffffff;
  padding: 1% 2%;
  margin: 2% 0;
  border: 2px #000 solid;
  background: #000;
  letter-spacing: 0.05rem;
  box-sizing: border-box;
  border-radius: 8px;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,.1);
}

.button-cardpay:hover {
  color:#555;
  background: none;
}

.info-order {
  display: grid;
  grid-template-columns: max-content max-content;
  grid-auto-rows: auto;
  gap: 10px;
  width: fit-content;
  box-sizing: border-box;
  margin: 2% 0;
}

.info-order div:nth-child(2n+1) {
  font-weight: bold;
}

.copy-icon {
  cursor: pointer;
  display: inline-block;
  margin-left: 10px;
  color: #555;
  font-weight: bold;
  transition: color 0.3s;
}

.copy-icon:hover {
  color: green;
}

.datebox {
  position: relative;
}

#ck-date {
  appearance: none;
  -webkit-appearance: none;
  color: #000;
}

input[type="date"]::before {
  content: "Vyberte dátum";
  color: gray;
}

input[type="date"]:focus::before {
  content: "";
}

.ck-choice-boxes {
  display: flex;
  gap: 1rem;
  align-items: center;
}


.qr {
  display: inline-block;
  border: 10px #f0f0f0 solid;
  box-sizing: border-box;
  border-radius: 0px;
}

.alert-addsess {
  color: #7c9cfc;
  background: #e9f2ff;
  padding: 2px 15px;
  margin: 0 0 5px 0;
  display: block;
  font-size: 0.85rem;
  box-sizing: border-box;
  border-radius: 15px;
}

@media (max-width:880px){
  .ck-grid{flex-direction:column}.ck-right{width:100%}
  .ck-container {margin: 3% 1%;}
  .ck-flex {  display: block; }
  .ck-suggest-item {margin: 10px 0;}
  .button-cardpay {padding: 2% 3%;}
  .ck-choice-boxes {display: block;}
  .ck-choice {padding: 3% 3%; margin: 0% 0 3% 0;}
  #address-block, #date-block {margin: 2% 0;}
  .info-order {margin: 5% 0;}
  .qr {
    display: block;
    margin: 0 auto;
    text-align: center;
    border-radius: 30px;
  }


}