@import url('./checkout.css');

:root{
  --bg:#f4e7d8;
  --surface:#fffaf4;
  --surface-strong:#fff;
  --text:#3f2b20;
  --text-soft:#866a58;
  --line:rgba(207,158,96,.34);
  --primary:#ffd400;
  --primary-hover:#f0c500;
  --gold-soft:#5f4219;
  --gold-pale:#fff4ca;
}

body{
  background:
    radial-gradient(circle at 16% 8%, rgba(255,255,255,.72), transparent 30%),
    radial-gradient(circle at 84% 10%, rgba(255,212,0,.18), transparent 27%),
    linear-gradient(180deg,#f8eddf 0%,#f1e2d0 52%,#ead7bf 100%);
  color:var(--text);
}

.checkout-card{
  background:linear-gradient(180deg,#fffaf4 0%,#fff6ec 100%);
  border:1px solid rgba(207,158,96,.42);
  box-shadow:0 26px 64px rgba(117,75,42,.14), inset 0 1px 0 rgba(255,255,255,.92);
  padding-top:22px;
}

/* Horní hlavička (comfyovi layout, laska styl) */
.co-header{
  text-align:center;
  margin-bottom:18px;
}

.co-brand{
  display:inline-block;
  margin:0 0 14px;
  color:#3f2b20;
  font-size:clamp(22px, 5.5vw, 28px);
  font-weight:800;
  letter-spacing:.02em;
  text-decoration:none;
  line-height:1.15;
}

.co-brand:hover{
  color:#b98525;
}

.co-social-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  max-width:100%;
  margin:0 auto 12px;
  padding:8px 14px 8px 10px;
  border-radius:999px;
  background:linear-gradient(180deg,#fff8ef 0%,#fff1dc 100%);
  border:1px solid rgba(207,158,96,.38);
  box-shadow:0 8px 20px rgba(117,75,42,.08);
}

.co-avatars{
  display:flex;
  flex-shrink:0;
}

.co-avatar{
  display:block;
  flex-shrink:0;
  width:28px;
  height:28px;
  margin-left:-8px;
  border:2px solid #fffaf4;
  border-radius:999px;
  overflow:hidden;
  background:#ead7bf;
}

.co-avatar img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.co-avatars .co-avatar:first-child{
  margin-left:0;
}

.co-social-text{
  margin:0;
  color:#4a3328;
  font-size:13px;
  font-weight:600;
  line-height:1.25;
  text-align:left;
}

.co-social-text strong{
  color:#3f2b20;
  font-weight:800;
}

.co-trust-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px 10px;
  margin:0;
  color:#866a58;
  font-size:12px;
  font-weight:600;
  line-height:1.35;
}

.co-trust-sep{
  color:rgba(207,158,96,.65);
  font-weight:400;
}

.co-order-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:0;
  padding:14px 0 12px;
  border-top:1px solid rgba(207,158,96,.28);
  border-bottom:1px solid rgba(207,158,96,.28);
}

.co-order-toggle{
  margin:0;
  padding:0;
  border:0;
  background:none;
  color:#5f4219;
  font-size:14px;
  font-weight:700;
  text-align:left;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}

.co-order-toggle:hover{
  color:#b98525;
}

.co-order-total{
  margin:0;
  text-align:right;
  line-height:1.1;
}

.co-order-total strong{
  display:block;
  color:#2f2117;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.02em;
}

.co-order-total-eur{
  display:block;
  margin-top:2px;
  color:#866a58;
  font-size:11px;
  font-weight:600;
}

.co-order-summary{
  margin-bottom:16px;
  padding:12px 0 4px;
}

.co-order-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:7px 0;
  color:#4a3328;
  font-size:13px;
  font-weight:600;
  line-height:1.35;
}

.co-order-row.is-muted{
  color:#866a58;
  font-weight:500;
}

.co-order-row.is-muted del{
  color:#a0806c;
}

.co-order-row.is-discount{
  color:#1e6f38;
}

.co-order-row.is-total{
  margin-top:4px;
  padding-top:10px;
  border-top:1px dashed rgba(207,158,96,.35);
  font-size:14px;
}

.co-order-row.is-total strong{
  color:#2f2117;
  font-size:16px;
}

.bank-eur{
  color:#866a58;
  font-size:0.92em;
  font-weight:600;
}

.field-group label{
  color:#b98525;
}

.pay-method-panel{
  margin:0 0 14px;
}

.pay-method-unavailable{
  margin:0 0 12px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(207,158,96,.42);
  background:#fff8ef;
  color:#6d4e3f;
  font-size:13px;
  line-height:1.45;
}

.pay-method-unavailable strong{
  display:block;
  margin-bottom:4px;
  color:#3f2b20;
}

.pay-method-icon-card{
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.11 0-2 .89-2 2v12c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4V8h16v10zm-6-6h-2v2h2v-2z'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.11 0-2 .89-2 2v12c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4V8h16v10zm-6-6h-2v2h2v-2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.pay-method-icon-apple{
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M16.365 1.43c0 1.14-.46 2.27-1.18 3.08-.79.9-2.1 1.6-3.24 1.5-.14-1.09.5-2.26 1.22-3.05.8-.86 2.2-1.53 3.2-1.53zM20.5 17.2c-.55 1.25-.82 1.8-1.54 2.9-1 1.5-2.4 3.37-4.14 3.39-1.55.02-1.95-1-3.62-1-1.67 0-2.12 1.01-3.67.98-1.74-.03-3.07-1.78-4.07-3.27-2.8-4.07-3.1-11.14 1.36-11.14 1.55 0 2.6 1.03 3.62 1.03 1 0 2.87-1.27 4.84-1.08.82.03 3.13.33 4.6 2.49-.12.07-2.75 1.6-2.72 4.77.03 3.8 3.33 5.06 3.37 5.08z'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M16.365 1.43c0 1.14-.46 2.27-1.18 3.08-.79.9-2.1 1.6-3.24 1.5-.14-1.09.5-2.26 1.22-3.05.8-.86 2.2-1.53 3.2-1.53zM20.5 17.2c-.55 1.25-.82 1.8-1.54 2.9-1 1.5-2.4 3.37-4.14 3.39-1.55.02-1.95-1-3.62-1-1.67 0-2.12 1.01-3.67.98-1.74-.03-3.07-1.78-4.07-3.27-2.8-4.07-3.1-11.14 1.36-11.14 1.55 0 2.6 1.03 3.62 1.03 1 0 2.87-1.27 4.84-1.08.82.03 3.13.33 4.6 2.49-.12.07-2.75 1.6-2.72 4.77.03 3.8 3.33 5.06 3.37 5.08z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.pay-method-icon-google{
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M12 11.2v3.2h4.5c-.4 2-2.3 3.4-4.5 3.4-2.7 0-4.9-2.2-4.9-4.9S9.3 8 12 8c1.2 0 2.3.4 3.1 1.2l2.4-2.4C16.5 5.4 14.3 4.5 12 4.5 7.6 4.5 4 8.1 4 12.5S7.6 20.5 12 20.5c3.6 0 6.6-2.6 6.6-6.3 0-.4 0-.8-.1-1.2H12z'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M12 11.2v3.2h4.5c-.4 2-2.3 3.4-4.5 3.4-2.7 0-4.9-2.2-4.9-4.9S9.3 8 12 8c1.2 0 2.3.4 3.1 1.2l2.4-2.4C16.5 5.4 14.3 4.5 12 4.5 7.6 4.5 4 8.1 4 12.5S7.6 20.5 12 20.5c3.6 0 6.6-2.6 6.6-6.3 0-.4 0-.8-.1-1.2H12z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.payment-shell{
  margin-top:0;
}

.form-intro{
  margin-top:24px;
}

.form-kicker{
  color:#b98525;
}

.form-kicker::before{
  background:linear-gradient(180deg,#e8bf83 0%,#d9a15c 54%,#c88943 100%);
  box-shadow:0 6px 14px rgba(190,122,49,.22);
}

.form-title{
  color:#3f2b20;
}

.summary-price{
  color:#2f2117;
}

.field-group input{
  color:#4a3328;
  background:#fff;
  border:1px solid rgba(207,158,96,.34);
}

.field-group input:focus{
  border-color:#ffd400;
  box-shadow:0 0 0 4px rgba(255,212,0,.2);
}

.trust-inline span + span{
  border-left:1px solid rgba(207,158,96,.28);
}

.trust-inline span::before{
  background:#b98548;
}

.trust-inline b{
  color:#4c3322;
}

.trust-inline em,
.cta-note,
.checkout-help,
.payment-step-head{
  color:#8b6c55;
}

.payment-step-head span{
  color:#b98525;
}

.payment-shell,
.bank-panel-inner,
.bank-qr-box,
.bank-details{
  background:#fffdf9;
  border-color:rgba(207,158,96,.32);
}

.loader-spinner,
.button-spinner{
  border:2px solid rgba(255,212,0,.24);
  border-top-color:#ffd400;
}

.bank-method-row{
  background:#fffdf9;
  color:#4b3324;
  border:1px solid rgba(207,158,96,.32);
}

.bank-method-icon,
.bank-method-arrow{
  background:#c08a41;
}

.bank-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  align-items:stretch;
}

.bank-qr-box,
.bank-details{
  min-width:0;
}

.bank-qr-box{
  width:100%;
  margin:0;
  padding:6px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.bank-details{
  padding:10px 11px;
  gap:8px;
}

.bank-row{
  padding-bottom:8px;
}

.bank-label{
  font-size:10px;
}

.bank-value{
  font-size:12px;
  line-height:1.35;
  word-break:break-word;
}

.bank-value-note{
  line-height:1.4;
}

@media(max-width:400px){
  .bank-grid{
    gap:8px;
  }

  .bank-qr-box{
    padding:5px;
  }

  .bank-details{
    padding:8px 9px;
    gap:6px;
  }

  .bank-row{
    padding-bottom:6px;
  }

  .bank-label{
    font-size:9px;
  }

  .bank-value{
    font-size:11px;
  }
}

.submit-button{
  border:1px solid rgba(207,158,96,.5);
  border-radius:14px;
  background:linear-gradient(180deg,#e8bf83 0%,#d9a15c 54%,#c88943 100%);
  color:#fffaf2;
  box-shadow:0 12px 24px rgba(190,122,49,.28), inset 0 -2px 0 rgba(91,50,19,.12), inset 0 1px 0 rgba(255,255,255,.35);
  text-shadow:0 1px 0 rgba(91,50,19,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.submit-button:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 16px 32px rgba(190,122,49,.34), inset 0 -2px 0 rgba(91,50,19,.14), inset 0 1px 0 rgba(255,255,255,.38);
}

.cta-note{
  margin-top:10px;
}

.co-checkout-reviews{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.co-checkout-review{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;
  padding:10px 12px;
  border:1px solid rgba(207,158,96,.28);
  border-radius:12px;
  background:rgba(255,255,255,.55);
}

.co-review-avatar{
  flex-shrink:0;
  width:40px;
  height:40px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(207,158,96,.35);
}

.co-review-body{
  min-width:0;
  flex:1;
}

.co-review-meta{
  margin:0 0 4px;
  font-size:12px;
  line-height:1.3;
  color:#6d4e3f;
}

.co-review-meta strong{
  color:#3f2b20;
  font-weight:700;
}

.co-review-stars{
  color:#c88943;
  letter-spacing:.04em;
}

.co-review-text{
  margin:0;
  font-size:12px;
  line-height:1.4;
  color:#5a4030;
}

.checkout-divider{
  background:rgba(207,158,96,.28);
}

.form-message.is-error{
  color:#7c2d22;
}

.form-message.is-success{
  color:#1e6f38;
}

.trust-inline span:nth-child(3)::before{
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 495.317 495.317' fill='black'%3E%3Cpath d='M495.103 333.198c-1.933-9.851-19.004-96.612-23.221-109.279-10.139-30.455-34.498-65.125-65.159-92.742-31.879-28.713-64.908-45.181-90.62-45.181H65.991c-12.962 0-23.508 10.546-23.508 23.508v36.938H25.165c-6.351 0-11.5 5.149-11.5 11.5s5.149 11.5 11.5 11.5h17.317v27.432H11.5c-6.351 0-11.5 5.149-11.5 11.5 0 6.351 5.149 11.5 11.5 11.5h30.982v115.537c0 12.962 10.546 23.507 23.508 23.507h28.672c4.287 28.488 28.926 50.401 58.59 50.401 29.664 0 54.303-21.913 58.589-50.401h105.484c4.286 28.488 28.926 50.401 58.59 50.401 29.664 0 54.303-21.913 58.589-50.401h37.304c12.963 0 23.509-10.545 23.509-23.507 0-.743-.072-1.484-.214-2.214zM448.743 227.476l-118.502-.001V111.052c41.981 11.275 100.169 67.129 118.502 116.424zM153.253 386.32c-19.99 0-36.254-16.263-36.254-36.254 0-19.99 16.264-36.253 36.254-36.253 19.99 0 36.253 16.263 36.253 36.253 0 19.991-16.262 36.254-36.253 36.254zm222.663 0c-19.99-.001-36.254-16.264-36.254-36.254 0-19.99 16.264-36.253 36.254-36.253s36.253 16.263 36.253 36.253c0 19.991-16.263 36.254-36.253 36.254zm95.324-50.401h-37.791c-6.361-25.861-29.736-45.105-57.533-45.105s-51.173 19.244-57.534 45.105H210.786c-6.361-25.861-29.736-45.105-57.533-45.105-27.797 0-51.173 19.244-57.534 45.105H65.991c-.28 0-.508-.228-.508-.507V219.875h140.934c6.351 0 11.5-5.149 11.5-11.5 0-6.351-5.149-11.5-11.5-11.5H65.482v-27.432h64.87c6.351 0 11.5-5.149 11.5-11.5s-5.149-11.5-11.5-11.5h-64.87v-36.938c0-.28.228-.508.508-.508h241.251v129.978c0 6.351 5.148 11.5 11.5 11.5l135.955.001c4.904 22.361 11.63 58.202 17.356 84.734.116.534-.218.709-.812.709z'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 495.317 495.317' fill='black'%3E%3Cpath d='M495.103 333.198c-1.933-9.851-19.004-96.612-23.221-109.279-10.139-30.455-34.498-65.125-65.159-92.742-31.879-28.713-64.908-45.181-90.62-45.181H65.991c-12.962 0-23.508 10.546-23.508 23.508v36.938H25.165c-6.351 0-11.5 5.149-11.5 11.5s5.149 11.5 11.5 11.5h17.317v27.432H11.5c-6.351 0-11.5 5.149-11.5 11.5 0 6.351 5.149 11.5 11.5 11.5h30.982v115.537c0 12.962 10.546 23.507 23.508 23.507h28.672c4.287 28.488 28.926 50.401 58.59 50.401 29.664 0 54.303-21.913 58.589-50.401h105.484c4.286 28.488 28.926 50.401 58.59 50.401 29.664 0 54.303-21.913 58.589-50.401h37.304c12.963 0 23.509-10.545 23.509-23.507 0-.743-.072-1.484-.214-2.214zM448.743 227.476l-118.502-.001V111.052c41.981 11.275 100.169 67.129 118.502 116.424zM153.253 386.32c-19.99 0-36.254-16.263-36.254-36.254 0-19.99 16.264-36.253 36.254-36.253 19.99 0 36.253 16.263 36.253 36.253 0 19.991-16.262 36.254-36.253 36.254zm222.663 0c-19.99-.001-36.254-16.264-36.254-36.254 0-19.99 16.264-36.253 36.254-36.253s36.253 16.263 36.253 36.253c0 19.991-16.263 36.254-36.253 36.254zm95.324-50.401h-37.791c-6.361-25.861-29.736-45.105-57.533-45.105s-51.173 19.244-57.534 45.105H210.786c-6.361-25.861-29.736-45.105-57.533-45.105-27.797 0-51.173 19.244-57.534 45.105H65.991c-.28 0-.508-.228-.508-.507V219.875h140.934c6.351 0 11.5-5.149 11.5-11.5 0-6.351-5.149-11.5-11.5-11.5H65.482v-27.432h64.87c6.351 0 11.5-5.149 11.5-11.5s-5.149-11.5-11.5-11.5h-64.87v-36.938c0-.28.228-.508.508-.508h241.251v129.978c0 6.351 5.148 11.5 11.5 11.5l135.955.001c4.904 22.361 11.63 58.202 17.356 84.734.116.534-.218.709-.812.709z'/%3E%3C/svg%3E");
}

@media(max-width:560px){
  .co-social-pill{
    padding:7px 12px 7px 8px;
  }

  .co-social-text{
    font-size:12px;
  }

  .co-order-toggle{
    font-size:13px;
  }

  .co-order-total strong{
    font-size:20px;
  }

  .trust-inline{
    grid-template-columns:repeat(3, 1fr);
  }
  .trust-inline span{
    padding:0 5px;
    font-size:10px;
  }
}