/* Alertă de preț doar cu email (static/js/price-watch.js). Banda de sus = tema „verde-roșu” a barei site-ului
   (static/css/header-themes.css) și antetul emailului de alertă, ca omul să recunoască același brand și în mail. */
.pw-sheet {
  position: fixed;
  right: 18px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 136px);
  z-index: 66;
  width: min(400px, calc(100vw - 36px));
  /* Cu alegerea pretului (4 variante) foaia e inalta: nu iese din ecran, se deruleaza in ea. */
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - env(safe-area-inset-bottom, 0px) - 150px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(17, 17, 17, .1);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(17, 17, 17, .22), 0 2px 8px rgba(17, 17, 17, .06);
  font-family: 'DM Sans', sans-serif;
}
.pw-sheet[hidden] { display: none; }
.pw-sheet { scrollbar-width: none; }
.pw-sheet::-webkit-scrollbar { display: none; }

/* Cat timp scrii pe telefon (price-watch.js, setTyping): ramane doar ce trebuie, ca foaia sa incapa
   deasupra tastaturii fara bara de derulare. La inchiderea tastaturii revine tot. */
.pw-chosen { display: none; }
.pw-sheet.is-typing .pw-band { padding-top: 10px; padding-bottom: 9px; }
.pw-sheet.is-typing .pw-logo { font-size: 16px; }
.pw-sheet.is-typing .pw-tagline,
.pw-sheet.is-typing .pw-trust,
.pw-sheet.is-typing .pw-foot { display: none; }
.pw-sheet.is-typing .pw-body { padding-top: 12px; padding-bottom: 12px; }
.pw-sheet.is-typing.is-target #pw-desc { display: none; }
.pw-sheet.is-typing[data-typing="email"] .pw-targets { display: none; }
.pw-sheet.is-typing[data-typing="email"] .pw-chosen:not(:empty) {
  display: block;
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: #faf8f5;
  color: #111;
  font-size: 13px;
  font-weight: 700;
}
.pw-sheet.is-typing[data-typing="amount"] .pw-target:not(.pw-target-custom) { display: none; }
.pw-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px 10px 18px;
  background: radial-gradient(60% 260% at 100% 0%, rgba(31, 122, 85, .42), transparent 70%),
              radial-gradient(45% 240% at 0% 100%, rgba(179, 58, 50, .26), transparent 70%), #0d0e0f;
}
.pw-brand { display: flex; flex-direction: column; gap: 3px; }
.pw-logo {
  color: #fff;
  font-family: 'Syne', sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1;
}
.pw-tagline {
  color: rgba(255, 255, 255, .62);
  font-family: 'Syne', sans-serif;
  font-size: 7.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
/* inline, ca sa nu preia stilul de titlu al lui `.pw-copy strong` */
.pw-copy .pw-saved-text { display: inline; color: #b33a32; font-size: inherit; line-height: inherit; font-weight: 700; }
.pw-close {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
}
.pw-close .material-symbols-outlined { font-size: 17px; }
.pw-body { padding: 14px 18px 8px; }
.pw-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}
.pw-icon {
  color: var(--sale, #b33a32);
  font-size: 22px;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.pw-copy strong {
  display: block;
  color: #111;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
.pw-copy p {
  margin: 4px 0 0;
  color: #6f675f;
  font-size: 12px;
  line-height: 1.45;
}
/* Alegerea pretului din clopotel */
.pw-targets {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.pw-targets[hidden] { display: none; }
.pw-target {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 10px 12px;
  border: 1px solid rgba(17, 17, 17, .14);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.pw-target:has(input:checked) { border-color: #111; box-shadow: inset 0 0 0 1px #111; background: #faf8f5; }
.pw-target > input { margin: 0; accent-color: #111; }
.pw-target-label { color: #111; font-size: 13.5px; font-weight: 700; }
.pw-target-note { color: #8a8178; font-size: 12px; }
.pw-custom { display: none; align-items: center; gap: 6px; width: 100%; padding-left: 22px; color: #6f675f; font-size: 13px; }
.pw-target-custom:has(input:checked) .pw-custom { display: flex; }
.pw-custom input {
  width: 110px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(17, 17, 17, .2);
  border-radius: 999px;
  font: 16px 'DM Sans', sans-serif;
}
.pw-sheet.is-done .pw-targets { display: none; }
.pw-form input[hidden] { display: none; }
.pw-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.pw-form input {
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  padding: 0 16px;
  border: 1px solid rgba(17, 17, 17, .18);
  border-radius: 999px;
  background: #fff;
  color: #111;
  font: 16px 'DM Sans', sans-serif; /* sub 16px, iOS mărește pagina la atingere */
}
.pw-form input:focus { outline: none; border-color: #111; box-shadow: 0 0 0 3px rgba(17, 17, 17, .07); }
.pw-form input.is-invalid { border-color: var(--sale, #b33a32); }
.pw-form button {
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: #111;
  color: #fff;
  cursor: pointer;
  font: 700 14px 'DM Sans', sans-serif;
  letter-spacing: .01em;
}
.pw-form button:disabled { opacity: .55; cursor: default; }
.pw-error {
  margin: 6px 6px 0;
  color: var(--sale, #b33a32);
  font-size: 12px;
}
/* Garantiile: un singur rand subtire (foaia ramane scurta ca sa incapa deasupra tastaturii) */
.pw-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  margin: 10px 0 0;
  padding: 7px 6px;
  border: 1px solid #ece6de;
  border-radius: 999px;
  background: #faf8f5;
  list-style: none;
}
.pw-trust li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #4f4841;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.pw-trust svg { flex: 0 0 auto; width: 11px; height: 11px; color: #2d6a2d; }
.pw-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 4px;
}
.pw-later,
.pw-foot a {
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: #8a8178;
  cursor: pointer;
  font: 500 12px 'DM Sans', sans-serif;
  text-decoration: underline;
}
.pw-sheet.is-done .pw-form,
.pw-sheet.is-done .pw-trust,
.pw-sheet.is-done .pw-foot,
.pw-sheet.is-done .pw-error { display: none; }
.pw-sheet.is-done .pw-icon { color: #2d6a2d; }

@media (max-width: 767px) {
  .pw-sheet {
    right: 10px;
    width: calc(100vw - 20px);
  }
}