/* „Poradíme vám" — plovoucí tlačítko + karta s telefonem (vzor cartop.cz).
   Šablona: src/View/partials/callback_widget.php, chování: assets/js/callback-widget.js */

@property --cbw-angle { syntax: "<angle>"; inherits: true; initial-value: 0turn; }

.cbw{--cbw-red:var(--orange,#d10000);position:fixed;right:56px;bottom:56px;z-index:95;
  animation:cbwFade .5s ease-in-out .6s both;transition:bottom .25s ease}
@keyframes cbwFade{from{opacity:0}to{opacity:1}}

/* Tlačítko (pilulka) */
.cbw-ring{position:relative;border-radius:9999px;display:flex;justify-content:flex-end;transition:opacity .2s ease,transform .2s ease}
.cbw.is-tucked .cbw-ring{opacity:0;transform:translateY(12px);pointer-events:none}
.cbw-ring::before{content:"";position:absolute;inset:-2px;padding:2px;z-index:-1;border-radius:inherit;pointer-events:none;
  background-image:conic-gradient(from var(--cbw-angle),transparent 0,transparent 85%,rgba(209,0,0,0) 85%,var(--cbw-red) 92.5%,rgba(209,0,0,0) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box exclude,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box exclude,linear-gradient(#fff 0 0);
  animation:cbwSpin 3s linear infinite}
@keyframes cbwSpin{to{--cbw-angle:1turn}}
.cbw-btn{display:flex;align-items:center;justify-content:flex-end;padding:8px;border-radius:9999px;background:#fefefe;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
  transition:transform .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1)}
.cbw-btn:hover{transform:scale(1.05);box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}
.cbw-btn:active{transform:scale(.95)}
.cbw-btn:focus-visible{outline:2px solid var(--cbw-red);outline-offset:3px}
.cbw-btn-t{display:block;overflow:hidden;white-space:nowrap;max-width:210px;padding:0 16px 0 8px;
  color:var(--cbw-red);font-size:16px;font-weight:700;line-height:20px;animation:cbwTextIn .6s ease-in-out 1s both}
@keyframes cbwTextIn{from{max-width:0;opacity:0;padding:0}to{max-width:210px;opacity:1;padding:0 16px 0 8px}}
.cbw.is-open .cbw-btn-t{animation:cbwTextOut .3s ease-in-out both}
@keyframes cbwTextOut{from{max-width:210px;opacity:1;padding:0 16px 0 8px}to{max-width:0;opacity:0;padding:0}}
.cbw.was-open:not(.is-open) .cbw-btn-t{animation:cbwTextBack .3s ease-in-out both}
@keyframes cbwTextBack{from{max-width:0;opacity:0;padding:0}to{max-width:210px;opacity:1;padding:0 16px 0 8px}}
.cbw-btn-ic{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--cbw-red);color:#fff}
.cbw-btn-ic svg{display:block}
.cbw-ic-close,.cbw.is-open .cbw-ic-open{display:none}
.cbw.is-open .cbw-ic-close{display:block}

/* Karta */
.cbw-panel{position:absolute;right:0;bottom:calc(100% + 16px);width:448px;max-width:calc(100vw - 32px);box-sizing:border-box;
  padding:24px;border-radius:24px;background:#fefefe;color:#1a1a1a;
  box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
  transform-origin:bottom right;transform:scale(.5);opacity:0;
  transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1)}
.cbw-panel.is-shown{transform:none;opacity:1}
.cbw-panel[hidden]{display:none}
.cbw-close{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  color:#5d6b7a;background:transparent;transition:background .15s}
.cbw-close:hover{background:#e5e7eb}
.cbw-title{margin:0 0 8px;padding-right:48px;color:#000;font-size:24px;font-weight:400;line-height:1.2;letter-spacing:.01em}
.cbw-title strong{color:var(--cbw-red);font-weight:600}
.cbw-lead{margin:0 0 16px;color:#3b4b58;font-size:16px;line-height:1.6}
.cbw-form{display:grid;gap:12px;margin:0}
.cbw-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cbw-field{position:relative}
.cbw-field input{display:block;width:100%;height:56px;box-sizing:border-box;padding:0 40px 0 16px;border:1px solid #bfcbd4;border-radius:16px;
  background:#fff;color:#262d37;font:inherit;font-size:16px;outline:none;transition:border-color .15s}
.cbw-field input::placeholder{color:#4c6172}
.cbw-field input:focus{border-color:var(--cbw-red)}
.cbw-req{position:absolute;right:24px;top:50%;transform:translateY(-50%);color:var(--cbw-red);font-size:14px;pointer-events:none}
.cbw-error{padding:8px 12px;border-radius:8px;background:#fef2f2;color:#991b1b;font-size:14px;line-height:1.4}
.cbw-error[hidden]{display:none}
.cbw-submit{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;box-sizing:border-box;
  padding:8px 32px 8px 8px;border:1px solid var(--cbw-red);border-radius:16px;background:var(--cbw-red);color:#fff;
  font-size:16px;font-weight:600;line-height:1.2;transition:background .3s}
.cbw-submit:hover{background:rgba(209,0,0,.8)}
.cbw-submit:disabled{cursor:progress;opacity:.85}
.cbw-submit-ic{position:absolute;left:8px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:32px;height:32px;
  border-radius:8px;background:#fff;color:var(--cbw-red)}
.cbw-submit.is-loading .cbw-submit-ic svg{animation:cbwPulse 1s ease-in-out infinite}
@keyframes cbwPulse{50%{opacity:.35}}

/* Poděkování */
.cbw-done{text-align:center;padding:8px 0 4px}
.cbw-done[hidden]{display:none}
.cbw-done-ic{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 14px;box-sizing:border-box;border:4px solid var(--cbw-red);
  border-radius:50%;color:var(--cbw-red)}
.cbw-done-ic svg{stroke-width:3}
.cbw-done-title{margin:0 0 8px;color:#000;font-size:30px;font-weight:600;line-height:1.2}
.cbw-done .cbw-lead{margin:0}

/* Na webu dole vyjíždějí lišty — tlačítko jde nad ně, ne přes ně. */
body:has(.compare-bar.show) .cbw{bottom:96px}

@media(max-width:1023px){
  .cbw-field input{height:48px;border-radius:12px}
  .cbw-submit{border-radius:12px;font-size:14px}
}
@media(max-width:767px){
  .cbw{right:16px;bottom:16px}
  .cbw-btn{padding:6px}
  .cbw-btn-t{font-size:15px}
  .cbw-btn-ic{width:32px;height:32px}
  .cbw-btn-ic svg{width:16px;height:16px}
  .cbw-panel{width:320px;padding:16px}
  .cbw-close{top:12px;right:12px;width:32px;height:32px}
  .cbw-close svg{width:20px;height:20px}
  .cbw-title{font-size:20px;padding-right:24px}
  .cbw-lead{font-size:14px}
  .cbw-req{right:16px;font-size:12px}
  .cbw-done-ic{width:48px;height:48px}
  .cbw-done-title{font-size:24px}
  body:has(.compare-bar.show) .cbw{bottom:90px}
}
@media(max-width:720px){
  /* Detail vozu: spodní CTA lišta (V3 .vd2-sticky po odscrollování, V1 .vehicle-mobile-cta). */
  body:has(.vd2-sticky.is-visible) .cbw,
  body:has(.vehicle-mobile-cta) .cbw{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
@media(prefers-reduced-motion:reduce){
  .cbw,.cbw-btn-t,.cbw.is-open .cbw-btn-t,.cbw.was-open:not(.is-open) .cbw-btn-t{animation:none}
  .cbw.is-open .cbw-btn-t{max-width:0;opacity:0;padding:0}
  .cbw-ring::before{animation:none;opacity:0}
  .cbw-panel{transition:none}
}
@media print{.cbw{display:none}}