/* "In your area" promo: side tab that slides in after a few seconds and opens only on click */
.ww-tab {
  position: fixed; right: 0; top: 38%; z-index: 90;
  transform: translateX(120%); transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.ww-tab.show { transform: translateX(0); }
.ww-tab button {
  writing-mode: vertical-rl; transform: rotate(180deg);
  background: #7c3aed; color: #fff; cursor: pointer;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: 0.4px;
  padding: 18px 11px; border: 3px solid #141414; border-left: 0; border-radius: 0 14px 14px 0;
  box-shadow: -4px 4px 0 #141414;
}
.ww-tab button:hover { background: #5b21b6; }
.ww-tab .ww-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #c9aeff;
  margin-bottom: 8px; animation: wwPulse 1.8s ease-in-out infinite;
}
@keyframes wwPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.ww-panel {
  position: fixed; right: 16px; top: 50%; z-index: 91; width: min(360px, calc(100vw - 32px));
  transform: translate(calc(100% + 40px), -50%); transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
  background: #fff; border: 3px solid #141414; border-radius: 22px; box-shadow: 8px 8px 0 #141414;
  padding: 30px 24px 22px; text-align: center; font-family: 'Nunito', 'Segoe UI', Helvetica, Arial, sans-serif;
}
.ww-panel.open { transform: translate(0, -50%); }
.ww-panel .promo-close {
  position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 22px;
  font-weight: 800; color: #999; cursor: pointer; line-height: 1; padding: 4px 8px;
}
.ww-panel .promo-close:hover { color: #141414; }
.ww-panel .promo-badge {
  display: inline-block; background: #7c3aed; color: #fff; font-family: 'Baloo 2', sans-serif;
  font-weight: 800; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 6px 16px; border-radius: 20px; margin-bottom: 12px;
}
.ww-panel .promo-title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 36px; line-height: 1.1; color: #d81e1e; margin-bottom: 4px; }
.ww-panel .promo-sub { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 15px; color: #141414; margin-bottom: 14px; }
.ww-panel .promo-urgent {
  background: #fdeaea; border: 2px dashed #d81e1e; border-radius: 12px; padding: 9px 12px;
  color: #b91414; font-weight: 800; font-size: 14px; line-height: 1.4; margin-bottom: 16px;
}
.ww-panel .promo-code-box { background: #fff8e1; border: 3px dashed #d81e1e; border-radius: 14px; padding: 12px 14px; margin-bottom: 16px; }
.ww-panel .lead-txt { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 14px; color: #141414; }
.ww-panel .code-big { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 36px; line-height: 1.05; color: #d81e1e; letter-spacing: 3px; margin: 2px 0; }
.ww-panel .off-txt { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 17px; color: #141414; }
.ww-panel .promo-btns { display: flex; flex-direction: column; gap: 10px; }
.ww-panel .promo-btns a {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 16px; padding: 13px 18px;
  border-radius: 40px; border: 3px solid #141414; box-shadow: 4px 4px 0 #141414; text-decoration: none;
}
.ww-panel .promo-btns .p-quote { background: #7c3aed; color: #fff; }
.ww-panel .promo-btns .p-call { background: #fff; color: #141414; }
.ww-panel .promo-btns svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.ww-panel .promo-fine { margin-top: 12px; font-size: 11.5px; color: #999; font-weight: 600; }

@media (max-width: 600px) {
  .ww-tab { top: auto; bottom: 16px; right: 16px; transform: translateY(160%); }
  .ww-tab.show { transform: translateY(0); }
  .ww-tab button {
    writing-mode: horizontal-tb; transform: none; border: 3px solid #141414; border-radius: 30px;
    box-shadow: 3px 3px 0 #141414; padding: 10px 16px; font-size: 14px;
  }
  .ww-tab .ww-dot { margin: 0 6px 1px 0; }
  .ww-panel { top: auto; bottom: 0; right: 0; left: 0; width: auto; border-radius: 22px 22px 0 0; box-shadow: 0 -6px 0 #141414; transform: translateY(110%); }
  .ww-panel.open { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .ww-tab, .ww-panel { transition: none; } .ww-tab .ww-dot { animation: none; } }
