/* Web Traffic Plugin Styles - Updated with Step Flow */

/* =====================================================
   GLOBAL PAGE BACKGROUND
   ===================================================== */

:root {
  --hec-primary: #5b4beb;
  --hec-primary-700: #4a3dd8;
  --hec-indigo: #6366f1;
  --hec-accent: #00d4d4;
  --hec-bg: #ffffff;
  --hec-text: #111827;
  --hec-muted: #6b7280;
  --hec-border: #e5e7eb;
  --hec-invalid: #dc2626;

  /* Header */
  --hec-header-bg: #000000;
  --hec-header-text: #ffffff;
  --hec-header-link: rgba(255, 255, 255, 0.92);
  --hec-header-link-hover: #ca8a04;
  --hec-header-link-active: #facc15;
  --hec-header-login-bg: #dc2626;
  --hec-header-login-bg-hover: #b91c1c;
  --hec-header-indicator-bg: rgba(250, 204, 21, 0.14);
  --hec-header-indicator-border: rgba(250, 204, 21, 0.35);

  /* Promo banner */
  --hec-banner-bg: #0b1020;
  --hec-banner-border: rgba(255, 55, 158, 0.35);
  --hec-banner-shadow: rgba(0, 0, 0, 0.2);
  --hec-banner-text: #ffffff;
  --hec-banner-text-strong: rgba(255, 255, 255, 0.92);
  --hec-banner-muted: rgba(255, 255, 255, 0.9);
  --hec-banner-desc: rgba(255, 255, 255, 0.86);
  --hec-banner-pill-bg: rgba(255, 255, 255, 0.12);
  --hec-banner-pill-border: rgba(255, 255, 255, 0.18);
  --hec-banner-accent: #ff37a0;
  --hec-banner-accent-bg: rgba(255, 55, 158, 0.16);
  --hec-banner-accent-border: rgba(255, 55, 158, 0.55);
  --hec-banner-accent-text: #0b1020;
  --hec-banner-success: #20d997;
  --hec-banner-close: rgba(255, 255, 255, 0.85);

  /* Cart button */
  --cart-btn-bg: #2ecac7;
  --cart-btn-text: #ffffff;
  --cart-btn-hover-bg: #e8e8e8;
  --cart-btn-hover-text: #2ecac7;
}
body {
  background-color: #f4f4f4 !important;
}

/* =====================================================
   RESPONSIVE SAFETY (scoped to WebTraffic UI)
   ===================================================== */
.webtraffic-form,
.webtraffic-form *,
[class^="wt-"] *,
[class*=" wt-"] * {
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .webtraffic-form,
  .webtraffic-progress-header,
  .wt-proof-row,
  .wt-proof-row__bottom {
    max-width: 100%;
    min-width: 0;
  }
}

.webtraffic-form img,
[class^="wt-"] img,
[class*=" wt-"] img {
  max-width: 100%;
  height: auto;
}

/* =====================================================
   PROGRESS BAR STYLES
   ===================================================== */
.webtraffic-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 0;
  margin: 0 0 18px;
}

.webtraffic-guarantees {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-left: auto;
}

.webtraffic-guarantee-item {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.webtraffic-guarantee-item .guarantee-icon {
  color: #6b7280;
  font-size: 22px;
  line-height: 1;
}

.webtraffic-guarantee-item .guarantee-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.webtraffic-guarantee-item .guarantee-top {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #6b7280;
  text-transform: uppercase;
}

.webtraffic-guarantee-item .guarantee-bottom {
  font-size: 12px;
  font-weight: 800;
  color: #6b7280;
}

@media (max-width: 980px) {
  .webtraffic-progress-header {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 0;
  }

  .webtraffic-guarantees {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-left: 0;
    flex-wrap: wrap;
  }

  .webtraffic-guarantee-item {
    flex: 1 1 0;
    min-width: 0;
    max-width: calc(50% - 9px);
    white-space: normal;
    justify-content: flex-start;
  }

  .webtraffic-guarantee-item .guarantee-top {
    white-space: normal;
    line-height: 1.2;
  }
}

@media (max-width: 520px) {
  .webtraffic-guarantees {
    gap: 12px;
  }

  .webtraffic-guarantee-item {
    gap: 8px;
    max-width: calc(50% - 6px);
  }

  .webtraffic-guarantee-item .guarantee-icon {
    font-size: 18px;
    flex-shrink: 0;
  }

  .webtraffic-guarantee-item .guarantee-top {
    font-size: 7px;
    letter-spacing: 0.01em;
  }

  .webtraffic-guarantee-item .guarantee-bottom {
    font-size: 10px;
  }
}

.webtraffic-progress-container {
  /* Local design tokens for the progress UI */
  --wt-progress-accent: #4f46e5;
  --wt-progress-muted: #9ca3af;
  --wt-progress-circle-size: 33.6px;
  --wt-progress-active-grad-1: #ffe08a;
  --wt-progress-active-grad-2: #ffbf3c;
  --wt-progress-shadow-accent: rgba(99, 102, 241, 0.55);

  max-width: 420px;
  margin: 0;
  padding: 0;
}

.webtraffic-progress-bar {
  --wt-progress-step-gap: 56px;

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 12px;
  gap: var(--wt-progress-step-gap);
}

.webtraffic-progress-bar::before {
  content: "";
  position: absolute;
  top: calc(var(--wt-progress-circle-size) / 2);
  left: 50%;
  transform: translateX(-50%);
  width: var(--wt-progress-step-gap);
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    var(--wt-progress-accent) 0 10px,
    transparent 10px 20px
  );
  opacity: 0.55;
  border-radius: 999px;
  z-index: 0;
}

.webtraffic-progress-bar.step-1::before {
  opacity: 0.65;
}

.webtraffic-progress-bar.step-2::before {
  opacity: 0.9;
}

/* =====================================================
   SMALL STATS BADGE (between step header and Select Service)
   ===================================================== */
.wt-stats-badge-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 6px 0 18px;
}

/* Social proof row (left rating + middle badge + right join activity) */
.wt-proof-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: 6px 0 18px;
}

.wt-proof-row__top {
  display: flex;
  justify-content: center;
}

.wt-proof-row__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.wt-proof-left,
.wt-proof-right {
  display: flex;
  align-items: center;
}

.wt-proof-left {
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
}

.wt-proof-avatars {
  display: inline-flex;
  align-items: center;
}

.wt-proof-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #ffffff;
  border: 2px solid #eff0ec;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 12px;
  color: #111827;
  margin-left: -10px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
}

.wt-proof-avatar:first-child {
  margin-left: 0;
}

.wt-proof-rating {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
}

.wt-proof-stars {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  color: #2563eb;
  letter-spacing: 1px;
  font-size: 14px;
  line-height: 1;
}

.wt-proof-score {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  font-weight: 900;
  color: #111827;
}

.wt-proof-count {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  white-space: nowrap;
}

.wt-proof-right {
  justify-content: flex-end;
  min-width: 0;
}

.wt-proof-join {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 4px;
  font-weight: 550;
  font-size: 15px;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wt-proof-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35em;
  line-height: 1;
  margin: 0 6px;
  transform: translateY(1px);
}

/* Center badge inside the top row */
.wt-proof-row__top .wt-stats-badge-wrap {
  margin: 0;
}

@media (max-width: 980px) {
  .wt-proof-row__bottom {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }
  .wt-proof-left,
  .wt-proof-right {
    justify-content: center;
  }
  .wt-proof-join {
    max-width: calc(100vw - 60px);
    font-size: 12px;
  }
}

/* =====================================================
   HOMEPAGE REVIEWS SECTION (DB-backed)
   ===================================================== */
.wt-reviews-section {
  padding: 90px 20px;
  background:
    radial-gradient(
      1200px 400px at 50% 0%,
      rgba(255, 255, 255, 0.06),
      transparent
    ),
    linear-gradient(180deg, #081a33 0%, #061427 100%);
  color: #ffffff;
}

.wt-reviews-header {
  max-width: 1200px;
  margin: 0 auto 34px;
  text-align: center;
}

.wt-reviews-rating {
  display: inline-flex;
  gap: 10px;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 10px;
}

.wt-reviews-stars {
  color: #2563eb;
  letter-spacing: 2px;
  font-weight: 900;
}

.wt-reviews-score {
  font-weight: 900;
  font-size: 16px;
}

.wt-reviews-count {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
}

.wt-reviews-title {
  margin: 0;
  font-size: 42px;
  line-height: 1.1;
  font-weight: 400;
}

.wt-brand-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-weight: 900;
}

.wt-reviews-slider {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  gap: 0;
}

.wt-reviews-viewport {
  overflow: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 14px 10px;
}

.wt-reviews-track {
  display: flex;
  gap: 26px;
  align-items: stretch;
}

.wt-review-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  background: #ffffff;
  color: #111827;
  border-radius: 28px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
}

.wt-review-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.wt-review-stars .wt-star {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  margin-right: 2px;
  color: rgba(5, 150, 105, 0.25);
  background: rgba(5, 150, 105, 0.12);
  border-radius: 4px;
  font-size: 12px;
}

.wt-review-stars .wt-star.is-on {
  color: #ffffff;
  background: #15803d;
}

.wt-review-date {
  font-size: 12px;
  color: #6b7280;
  font-weight: 700;
}

.wt-review-name {
  font-size: 20px;
  font-weight: 900;
  margin: 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wt-review-msg {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  line-height: 1.6;
  /* Keep cards consistent: clamp long reviews */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: calc(1.6em * 5);
  margin-bottom: 14px;
}

.wt-review-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
  padding-top: 12px;
  margin-top: auto;
}

.wt-review-country {
  font-weight: 800;
  color: #111827;
}

.wt-review-avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.wt-reviews-arrow {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  border: none !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 42px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center;
}

.wt-reviews-arrow--left {
  grid-column: 1 / 2;
}
.wt-reviews-arrow--right {
  grid-column: 3 / 4;
}

.wt-reviews-viewport {
  grid-column: 2 / 3;
}

.wt-reviews-cta {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.wt-review-open {
  appearance: none !important;
  border: 0 !important;
  padding: 12px 22px !important;
  border-radius: 999px !important;
  background: #ff0000 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

/* =====================================================
   WHAT WE CAN DO FOR YOU (Comparison)
   ===================================================== */
.wt-compare-section {
  background: #ffffff;
  color: #0f172a;
  padding: 70px 20px;
}

/* =====================================================
   BUY WEB TRAFFIC (Heading + subtext)
   ===================================================== */
.wt-buy-traffic {
  background: #eaf6ff;
  color: #0f172a;
  padding: 58px 20px;
}

.wt-buy-traffic__inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.wt-buy-traffic__title {
  margin: 0 0 12px;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.wt-buy-traffic__accent {
  color: #1877f2;
}

.wt-buy-traffic__sub {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  color: rgba(15, 23, 42, 0.6);
}

.wt-buy-traffic__sub strong {
  color: rgba(15, 23, 42, 0.78);
  font-weight: 800;
}

.wt-buy-traffic__stats-panel {
  margin-top: 28px;
}

.wt-highlight-stats-panel {
  max-width: 720px;
  margin: 30px auto;
  padding: 22px 24px 20px;
  border: 2px solid #5b4beb;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(91, 75, 235, 0.1);
}

.wt-highlight-stats-panel__badge {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.wt-highlight-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 0;
}

.wt-highlight-stats__item {
  text-align: center;
  padding: 8px 12px;
}

.wt-highlight-stats__item--divider {
  border-left: 1px solid rgba(91, 75, 235, 0.18);
}

.wt-highlight-stats__value {
  font-size: 34px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #5b4beb;
  margin-bottom: 6px;
}

.wt-highlight-stats__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .wt-buy-traffic {
    padding: 44px 16px;
  }
  .wt-buy-traffic__title {
    font-size: 34px;
  }
  .wt-buy-traffic__sub {
    font-size: 16px;
  }

  .wt-highlight-stats-panel {
    padding: 18px 16px 16px;
  }

  .wt-highlight-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 14px;
  }

  .wt-highlight-stats__item:nth-child(odd) {
    border-left: none;
  }

  .wt-highlight-stats__item:nth-child(even) {
    border-left: 1px solid rgba(91, 75, 235, 0.18);
  }

  .wt-highlight-stats__item:nth-child(n + 3) {
    border-top: 1px solid rgba(91, 75, 235, 0.18);
    padding-top: 14px;
  }

  .wt-highlight-stats__value {
    font-size: 28px;
  }
}

@media (max-width: 520px) {
  .wt-highlight-stats {
    grid-template-columns: 1fr;
  }

  .wt-highlight-stats__item,
  .wt-highlight-stats__item--divider,
  .wt-highlight-stats__item:nth-child(even) {
    border-left: none;
  }

  .wt-highlight-stats__item + .wt-highlight-stats__item {
    border-top: 1px solid rgba(91, 75, 235, 0.18);
    padding-top: 14px;
  }
}

/* =====================================================
   REASONS (A few more reasons...)
   ===================================================== */
.wt-reasons {
  background: #ffffff;
  color: #0f172a;
  padding: 64px 20px;
}

.wt-reasons__inner {
  max-width: 1120px;
  margin: 0 auto;
}

.wt-reasons__header {
  text-align: center;
  max-width: 980px;
  margin: 0 auto 28px;
}

.wt-reasons__kicker {
  margin: 0 0 10px;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #1e2a78;
}

.wt-reasons__title {
  margin: 0 0 10px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: #1e2a78;
}

.wt-reasons__intro {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
  color: rgba(15, 23, 42, 0.62);
}

.wt-reasons__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 46px;
  row-gap: 22px;
}

.wt-reason {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 14px;
  align-items: start;
  padding: 18px 18px;
  border-radius: 14px;
  border: 1px solid #5b4beb;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.wt-reason__num {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(24, 119, 242, 0.1);
  color: #1877f2;
  font-weight: 900;
  font-size: 16px;
}

.wt-reason__title {
  font-size: 18px;
  font-weight: 900;
  color: #1e2a78;
  margin: 0 0 6px;
}

.wt-reason__desc {
  font-size: 13px;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.62);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .wt-reasons {
    padding: 48px 16px;
  }
  .wt-reasons__kicker {
    font-size: 28px;
  }
  .wt-reasons__title {
    font-size: 34px;
  }
  .wt-reasons__list {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
}

/* =====================================================
   TRAFFIC SOURCES (Multiple Website Traffic Sources)
   ===================================================== */
.wt-sources {
  padding: 74px 20px;
  color: #ffffff;
  background:
    radial-gradient(
      1200px 600px at 50% 0%,
      rgba(24, 119, 242, 0.22) 0%,
      rgba(24, 119, 242, 0) 55%
    ),
    linear-gradient(180deg, #26307d 0%, #1d255f 55%, #111a45 100%);
}

.wt-sources__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.wt-sources__header {
  text-align: center;
  max-width: 980px;
  margin: 0 auto 40px;
}

.wt-sources__title {
  margin: 0 0 10px;
  font-weight: 900;
  font-size: 44px;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.wt-sources__intro {
  margin: 0 auto;
  max-width: 920px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
}

.wt-sources__intro--2 {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.72);
}

.wt-sources__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.wt-source {
  background: linear-gradient(
    180deg,
    rgba(128, 0, 196, 0.95) 0%,
    rgba(94, 0, 162, 0.95) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 22px 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
  text-align: center;
}

.wt-source__icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.wt-source__icon svg {
  width: 30px;
  height: 30px;
}

.wt-source__icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
}

.wt-source__title {
  font-size: 18px;
  font-weight: 900;
  margin: 0 0 10px;
  color: #ffffff;
}

.wt-source__desc {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 1100px) {
  .wt-sources__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .wt-sources {
    padding: 54px 16px;
  }
  .wt-sources__title {
    font-size: 34px;
  }
  .wt-sources__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* =====================================================
   FAQ (Accordion)
   ===================================================== */
.wt-faq {
  background: #ffffff;
  color: #0f172a;
  padding: 70px 20px;
}

.wt-faq__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.wt-faq__title {
  margin: 0 0 22px;
  text-align: center;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: red;
}

.wt-faq__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.wt-faq__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.wt-faq__item {
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
  order: var(--faq-order, 0);
}

.wt-faq__q {
  list-style: none;
  cursor: pointer;
  padding: 16px 46px 16px 16px;
  font-weight: 900;
  color: #0f172a;
  position: relative;
}

.wt-faq__item > summary::-webkit-details-marker {
  display: none;
}

.wt-faq__q::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid red;
  border-bottom: 2px solid red;
  transform: translateY(-60%) rotate(45deg);
  transition:
    transform 180ms ease,
    border-color 180ms ease;
}

.wt-faq__item[open] .wt-faq__q {
  background: rgba(24, 119, 242, 0.06);
  color: #1e2a78;
}

.wt-faq__item[open] .wt-faq__q::after {
  transform: translateY(-35%) rotate(-135deg);
  border-color: red;
}

.wt-faq__a {
  padding: 0 16px 16px;
}

.wt-faq__a p {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.7;
  color: rgba(15, 23, 42, 0.7);
}

.wt-faq__a ul {
  margin: 10px 0 0 18px;
  padding: 0;
  color: rgba(15, 23, 42, 0.7);
}

.wt-faq__a li {
  margin: 6px 0;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .wt-faq {
    padding: 54px 16px;
  }
  .wt-faq__title {
    font-size: 34px;
  }
  .wt-faq__list {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .wt-faq__col {
    display: contents;
    gap: 0;
  }
}

/* =====================================================
   SIMPLE 4-STEP PROCESS
   ===================================================== */
.wt-steps {
  background: #ffffff;
  color: #0f172a;
  padding: 74px 20px;
}

.wt-steps__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.wt-steps__header {
  text-align: center;
  margin: 0 auto 26px;
  max-width: 980px;
}

.wt-steps__title {
  margin: 0 0 8px;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: red;
}

.wt-steps__sub {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.6);
}

.wt-steps__highlight {
  margin: 16px 0 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.5;
  color: #5b4beb;
}

.wt-steps__grid {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.wt-step {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 16px;
  padding: 22px 18px;
  text-align: left;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
}

.wt-step.is-active {
  background: rgba(24, 119, 242, 0.08);
  border: 2px solid rgba(24, 119, 242, 0.45);
  box-shadow: 0 18px 55px rgba(24, 119, 242, 0.12);
}

.wt-step__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.wt-step__badge,
.wt-step__num {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #1877f2;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 14px;
}

.wt-step__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
  display: grid;
  place-items: center;
}

.wt-step__icon svg {
  width: 22px;
  height: 22px;
}

.wt-step__title {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: #0f172a;
  text-align: center;
}

.wt-step__desc {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.65;
  color: rgba(15, 23, 42, 0.62);
}

.wt-step__points {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 10px 14px;
}

.wt-step__points li {
  position: relative;
  padding-left: 14px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(15, 23, 42, 0.72);
  line-height: 1.4;
}

.wt-step__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(24, 119, 242, 0.75);
}

.wt-step__features {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.wt-feature {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(15, 23, 42, 0.03);
}

.wt-feature__icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(24, 119, 242, 0.12);
  color: #1877f2;
  display: grid;
  place-items: center;
}

.wt-feature__icon svg {
  width: 18px;
  height: 18px;
}

.wt-feature__title {
  font-size: 13px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.2;
}

.wt-feature__text {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 650;
  color: rgba(15, 23, 42, 0.62);
  line-height: 1.35;
}

.wt-step__payments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}

.wt-pay {
  width: 56px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #5b4beb;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.7);
  color: rgba(15, 23, 42, 0.85);
}

.wt-pay svg {
  width: 46px;
  height: 28px;
}

.wt-pay__img {
  display: block;
  max-width: 46px;
  max-height: 28px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.wt-step__checks {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  gap: 10px;
}

.wt-step__checks li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  color: rgba(15, 23, 42, 0.72);
}

.wt-step__checkicon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #4f46e5;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 6px 14px rgba(17, 24, 39, 0.14);
  box-sizing: border-box;
}

.wt-step__checkicon i {
  font-size: 9px;
  line-height: 1;
}

.wt-step__checks--services li {
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 12px;
}

.wt-step__serviceicon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #2dd4bf;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 8px 18px rgba(45, 212, 191, 0.28);
}

.wt-step__serviceicon i {
  font-size: 16px;
  line-height: 1;
}

.wt-step__note {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 750;
  color: rgba(15, 23, 42, 0.56);
}

@media (max-width: 1100px) {
  .wt-steps__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wt-step__features {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .wt-steps {
    padding: 54px 16px;
  }
  .wt-steps__title {
    font-size: 34px;
  }
  .wt-steps__grid {
    grid-template-columns: 1fr;
  }
  .wt-step__points {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   READY TO BUY CTA
   ===================================================== */
.wt-ready {
  padding: 92px 20px;
  color: #ffffff;
  background: linear-gradient(180deg, #1d75bd 0%, #0d4e8b 100%);
}

.wt-ready__inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.wt-ready__title {
  margin: 0;
  font-size: 46px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.wt-ready__sub {
  margin: 14px auto 0;
  max-width: 780px;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
}

.wt-ready__btn {
  margin: 28px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 30px;
  border-radius: 10px;
  background: red;
  color: #ffffff;
  font-weight: 900;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.18);
}

.wt-ready__btn:hover {
  transform: translateY(-1px);
}

.wt-ready__btnArrow {
  font-size: 18px;
  line-height: 1;
}

.wt-ready__note {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

.wt-ready__live {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

.wt-ready__live .wt-stats-badge-wrap {
  margin: 0;
}

@media (max-width: 650px) {
  .wt-ready {
    padding: 66px 16px;
  }
  .wt-ready__title {
    font-size: 34px;
  }
  .wt-ready__btn {
    width: 100%;
    justify-content: center;
    max-width: 320px;
  }
}

.wt-compare-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.wt-compare-title {
  text-align: center;
  margin: 0 0 34px;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Table wrapper with center divider line */
.wt-compare-table {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
}

.wt-compare-table::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-1px);
  background: rgba(15, 23, 42, 0.16);
}

.wt-compare-table__heads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  column-gap: 60px;
  margin-bottom: 10px;
}

.wt-compare-head {
  text-align: center;
  font-size: 30px;
  font-weight: 900;
  color: #1e2a78;
}

/* Match Traffic Million-style alignment: left column ends at center, right column starts at center */
.wt-compare-head--left {
  text-align: right;
  padding-right: 34px;
}

.wt-compare-head--right {
  text-align: left;
  padding-left: 34px;
}

.wt-compare-row {
  display: grid;
  grid-template-columns: 1fr 70px 1fr;
  align-items: start;
  column-gap: 0;
  padding: 22px 0;
}

.wt-compare-cell {
  text-align: center;
  padding: 0 34px;
}

.wt-compare-cell--left {
  text-align: right;
}

.wt-compare-cell--right {
  text-align: left;
}

.wt-compare-item__title {
  font-size: 18px;
  font-weight: 900;
  color: #1e2a78;
  margin-bottom: 6px;
}

.wt-compare-item__desc {
  font-size: 13px;
  font-weight: 700;
  color: #5b6474;
  line-height: 1.55;
  max-width: 440px;
  margin: 0 auto;
}

.wt-compare-cell--left .wt-compare-item__desc,
.wt-compare-cell--left .wt-compare-item__title {
  margin-left: auto;
  margin-right: 0;
}

.wt-compare-cell--right .wt-compare-item__desc,
.wt-compare-cell--right .wt-compare-item__title {
  margin-left: 0;
  margin-right: auto;
}

.wt-compare-vs {
  border: 1px solid rgba(15, 23, 42, 0.12);
  width: auto;
  height: auto;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: rgba(15, 23, 42, 0.45);
  padding: 3px 10px;
  background: #ffffff;
  justify-self: center;
  align-self: center;
  z-index: 3;
}

.wt-compare-row--images {
  padding-top: 34px;
  padding-bottom: 10px;
  align-items: center;
}

.wt-compare-image {
  display: flex;
  justify-content: center;
  margin-top: 0;
}

.wt-compare-image img {
  max-width: 320px;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  box-shadow: 0 20px 55px rgba(15, 23, 42, 0.14);
}

@media (max-width: 900px) {
  .wt-compare-title {
    font-size: 34px;
  }
  .wt-compare-head {
    font-size: 22px;
  }

  .wt-compare-table::before {
    display: none;
  }

  .wt-compare-table__heads {
    grid-template-columns: 1fr;
    row-gap: 10px;
    margin-bottom: 14px;
  }

  .wt-compare-head--left,
  .wt-compare-head--right {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
  }

  .wt-compare-row {
    grid-template-columns: 1fr;
    row-gap: 10px;
    padding: 18px 0;
  }

  .wt-compare-vs {
    display: none;
  }

  .wt-compare-cell {
    padding: 0 12px;
  }

  .wt-compare-cell--left,
  .wt-compare-cell--right {
    text-align: center;
  }

  .wt-compare-cell--left .wt-compare-item__desc,
  .wt-compare-cell--left .wt-compare-item__title,
  .wt-compare-cell--right .wt-compare-item__desc,
  .wt-compare-cell--right .wt-compare-item__title {
    margin-left: auto;
    margin-right: auto;
  }
}

.wt-reviews-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  padding: 20px;
}

.wt-reviews-modal.is-open {
  display: flex;
}

.wt-reviews-modal__dialog {
  width: 100%;
  max-width: 520px;
  background: #ffffff;
  color: #111827;
  border-radius: 18px;
  padding: 18px;
  position: relative;
}

.wt-reviews-modal__close {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  padding: 0 !important;
  border: 1px solid rgba(220, 38, 38, 0.25) !important;
  background: rgba(254, 226, 226, 0.95) !important;
  box-shadow: 0 6px 14px rgba(17, 24, 39, 0.12) !important;
  color: #dc2626 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}

.wt-reviews-modal__close:hover {
  background: rgba(254, 226, 226, 1) !important;
  border-color: rgba(220, 38, 38, 0.35) !important;
}

.wt-reviews-modal__close:active {
  transform: scale(0.98) !important;
}

.wt-reviews-modal__close:focus {
  outline: none;
}

.wt-reviews-modal__close:focus-visible {
  box-shadow:
    0 0 0 4px rgba(84, 72, 240, 0.12),
    0 6px 14px rgba(17, 24, 39, 0.12) !important;
}

.wt-modal-title {
  margin: 0 0 4px;
  font-weight: 900;
  font-size: 20px;
}

.wt-modal-sub {
  color: #6b7280;
  font-weight: 700;
  margin-bottom: 12px;
}

.wt-review-form label {
  display: block;
  margin: 10px 0;
}

.wt-review-form label > span {
  display: block;
  font-weight: 800;
  margin-bottom: 6px;
}

.wt-review-form input,
.wt-review-form select,
.wt-review-form textarea {
  width: 100% !important;
  border: 1px solid rgba(17, 24, 39, 0.12) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  font-weight: 700 !important;
}

.wt-review-form-error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.18);
  color: #b91c1c;
  font-weight: 800;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.wt-modal-actions {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.wt-review-submit {
  appearance: none !important;
  border: 0 !important;
  padding: 12px 22px !important;
  border-radius: 999px !important;
  background: #ff0000 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.wt-review-submit.is-loading {
  opacity: 0.7;
  cursor: wait !important;
}

.wt-reviews-success-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000000;
  padding: 20px;
}

.wt-reviews-success-modal.is-open {
  display: flex;
}

.wt-reviews-success-modal__dialog {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  color: #111827;
  border-radius: 18px;
  padding: 28px 24px 24px;
  position: relative;
  text-align: center;
  border: 2px solid #5b4beb;
  box-shadow: 0 18px 40px rgba(17, 24, 39, 0.18);
}

.wt-reviews-success-modal__close {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  padding: 0 !important;
  border: 1px solid rgba(91, 75, 235, 0.25) !important;
  background: rgba(91, 75, 235, 0.08) !important;
  color: #5b4beb !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.wt-reviews-success-modal__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: rgba(91, 75, 235, 0.12);
  color: #5b4beb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

.wt-reviews-success-modal__title {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 900;
  color: #111827;
}

.wt-reviews-success-modal__message {
  margin: 0 0 18px;
  color: #6b7280;
  font-weight: 600;
  line-height: 1.55;
}

.wt-reviews-success-modal__btn {
  appearance: none !important;
  border: 0 !important;
  padding: 12px 28px !important;
  border-radius: 999px !important;
  background: #5b4beb !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  min-width: 120px;
}

.wt-reviews-success-modal__btn:hover,
.wt-reviews-success-modal__close:hover {
  opacity: 0.92;
}

@media (max-width: 768px) {
  .wt-reviews-title {
    font-size: 32px;
  }
  .wt-reviews-slider {
    grid-template-columns: 1fr;
  }
  .wt-reviews-viewport {
    grid-column: 1 / -1;
    padding: 14px 20px;
  }
  .wt-reviews-arrow {
    display: none !important;
  }
  .wt-review-card {
    flex-basis: 250px;
    padding: 16px 16px 14px;
    border-radius: 22px;
  }
  .wt-review-name {
    font-size: 18px;
  }
  .wt-review-msg {
    font-size: 13px;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    min-height: calc(1.6em * 4);
  }
  .wt-review-avatar {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 420px) {
  .wt-review-card {
    flex-basis: 230px;
    padding: 14px 14px 12px;
  }
  .wt-review-name {
    font-size: 17px;
  }
  .wt-review-stars .wt-star {
    width: 16px;
    height: 16px;
    line-height: 16px;
  }
}

.wt-stats-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #d1fae5; /* light green */
  color: #047857; /* green text */
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
}

.wt-stats-badge__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #22c55e;

  flex: 0 0 auto;
}

.wt-stats-badge__text {
  white-space: nowrap;
}

@media (max-width: 520px) {
  .wt-stats-badge {
    font-size: 13px;
    padding: 9px 14px;
    max-width: calc(100vw - 40px);
  }
  .wt-stats-badge__text {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.webtraffic-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  flex: 0 0 auto;
  width: var(--wt-progress-circle-size);
}

.webtraffic-progress-step .step-circle {
  width: var(--wt-progress-circle-size);
  height: var(--wt-progress-circle-size);
  border-radius: 50%;
  background: #f3f4f6;
  color: #9ca3af;
  border: 2px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: calc(var(--wt-progress-circle-size) * 0.45);
  margin-bottom: 4px;
  transition: all 0.3s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.webtraffic-progress-step.active .step-circle {
  background: linear-gradient(
    135deg,
    var(--wt-progress-active-grad-1),
    var(--wt-progress-active-grad-2)
  );
  color: #111827;
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow:
    4px 4px 0 var(--wt-progress-shadow-accent),
    0 10px 18px rgba(17, 24, 39, 0.14);
}

.webtraffic-progress-step.completed .step-circle {
  background: linear-gradient(
    135deg,
    var(--wt-progress-active-grad-1),
    var(--wt-progress-active-grad-2)
  );
  color: #111827;
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 14px rgba(17, 24, 39, 0.12);
}

.webtraffic-progress-step .step-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--wt-progress-muted);
  text-align: center;
  white-space: nowrap;
}

.webtraffic-progress-step.active .step-label {
  color: var(--wt-progress-accent);
}

.webtraffic-progress-step.completed .step-label {
  color: var(--wt-progress-accent);
}

/* =====================================================
   MAIN FORM CONTAINER
   ===================================================== */
.webtraffic-form {
  max-width: 720px;
  width: 100%;
  margin: auto;
  padding: 72px 20px 0;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 520px) {
  .webtraffic-form {
    padding-top: 44px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* =====================================================
   CART BAR (Home): centered status + button states
   ===================================================== */
.webtraffic-form .cart-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
}

.webtraffic-form .cart-bar .inner-cart,
.webtraffic-form .cart-bar .inner-button {
  flex: 0 0 auto;
}

.webtraffic-form .cart-bar .cart-status {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.webtraffic-form .cart-bar .cart-status {
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

.webtraffic-form .cart-bar .cart-status.wt-cart-alert--success {
  background: #dff7f7;
  color: #111827;
}

.webtraffic-form .cart-bar .cart-status.wt-cart-alert--error {
  background: #fde2e2;
  color: #111827;
}

/* When the status text is too long, enable an automatic marquee scroll for readability. */
.webtraffic-form .cart-status.wt-cart-alert--marquee {
  text-overflow: clip;
}

.webtraffic-form .cart-status.wt-cart-alert--marquee .wt-cart-alert__text {
  white-space: nowrap;
  overflow: hidden;
}

.webtraffic-form .cart-status.wt-cart-alert--marquee .wt-cart-alert__marquee {
  display: inline-block;
  padding-left: 100%;
  animation: wt-cart-marquee var(--wt-cart-marquee-duration, 12s) linear
    infinite;
}

@keyframes wt-cart-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .webtraffic-form .cart-status.wt-cart-alert--marquee .wt-cart-alert__text {
    white-space: normal;
    overflow: visible;
  }
  .webtraffic-form .cart-status.wt-cart-alert--marquee .wt-cart-alert__marquee {
    padding-left: 0;
    animation: none;
  }
}

.webtraffic-form .btn-add-to-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  user-select: none;
}

.webtraffic-form .btn-add-to-cart .btn-state {
  display: none;
}

.webtraffic-form .btn-add-to-cart.is-loading {
  pointer-events: none;
  opacity: 0.95;
}

.webtraffic-form .btn-add-to-cart.is-loading .btn-state--loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.webtraffic-form .btn-add-to-cart.is-added .btn-state--added {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.webtraffic-form .btn-add-to-cart .btn-state--added i {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(91, 75, 235, 0.9);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

@media (max-width: 768px) {
  .webtraffic-form .cart-bar .inner-button,
  .webtraffic-form .inner-button {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }

  .webtraffic-form .cart-bar .inner-button a,
  .webtraffic-form .cart-bar #add-to-cart-btn,
  .webtraffic-form .cart-bar #buy-now-btn,
  .webtraffic-form .inner-button a,
  .webtraffic-form .inner-button #add-to-cart-btn,
  .webtraffic-form .inner-button #buy-now-btn {
    width: 100%;
    flex: none;
    white-space: nowrap;
    font-size: 14px;
    text-align: center;
  }
}

@media (max-width: 520px) {
  .webtraffic-form .cart-bar {
    flex-wrap: wrap;
    gap: 12px;
  }

  .webtraffic-form .cart-bar .inner-cart {
    order: 1;
  }

  .webtraffic-form .cart-bar .cart-status {
    order: 2;
    flex: 1 1 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 14px;
    padding: 12px 14px;
  }

  .webtraffic-form .cart-bar .inner-button {
    order: 3;
  }
}

/* Large screens: allow the form to breathe on desktop/24" monitors */
@media (min-width: 1200px) {
  .webtraffic-form {
    padding-top: 64px;
  }
}

.webtraffic-form .h5-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #333;
}

.service-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.steps-progress {
  font-size: 14px;
  font-weight: 400;
  color: #999;
}

.steps-progress.all-complete {
  color: #338bd9;
  font-weight: 600;
}

/* =====================================================
   WEBSITE URL SECTION
   ===================================================== */
.website-section {
  margin-bottom: 20px;
}

.website-section .username-field {
  margin-bottom: 20px;
}

.website-section .username-field.wt-pill-input {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.website-section .username-field.wt-pill-input:focus-within {
  border-color: var(--hec-primary, #5b4beb);
  box-shadow: 0 0 0 2px rgba(84, 72, 240, 0.12);
}

.website-section .wt-pill-prefix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  background: #fff;
  flex: 0 0 auto;
}

.website-section .username-field.wt-pill-input .form-control {
  width: 100%;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
}

.website-section .username-field.wt-pill-input .form-control::placeholder {
  color: #9aa1ad;
  font-weight: 500;
}

.website-section .wt-pill-suffix {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

@media (max-width: 420px) {
  .website-section .wt-pill-suffix {
    gap: 8px;
  }

  /* Keep the pill input from overflowing on very small screens */
  .website-section .wt-loader-text {
    display: none;
  }
}

.website-section .wt-website-error {
  margin-top: -10px; /* tuck it closer to the pill input */
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.18);
  color: #b91c1c;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.website-section .wt-website-error[hidden] {
  display: none;
}

.website-section .wt-input-loader {
  display: none;
  align-items: center;
  gap: 8px;
  color: #6b7280;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.website-section .username-field.wt-pill-input.is-loading .wt-input-loader {
  display: inline-flex;
}

.website-section .wt-loader-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(84, 72, 240, 0.25);
  border-top-color: #5448f0;
  animation: wt-spin 0.9s linear infinite;
}

@keyframes wt-spin {
  to {
    transform: rotate(360deg);
  }
}

.website-section .tool-tips {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #fff;
  color: #5448f0;
  cursor: default;
  flex: 0 0 auto;
}

.website-section .username-field.wt-pill-input.wt-valid {
  border-color: var(--hec-indigo, #4f46e5);
}

.website-section .username-field.wt-pill-input.wt-invalid {
  border-color: var(--hec-invalid, #ef4444);
}

/* Keep legacy input classes functional (JS toggles these on the input) */
.website-section .form-control.valid {
  box-shadow: none;
}

.website-section .form-control.invalid {
  box-shadow: none;
}

/* Website insights card (Similarweb) */
.webtraffic-form .wt-site-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 28px;
  position: relative;
  border-radius: 16px;
  background: #fff;
  border: 1px solid red;
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03);
  --wt-site-blink-duration: 3s;
}

/* When AI chip is present, reserve space so it never overlaps content */
.webtraffic-form .wt-site-card.wt-site-card--ai {
  padding-top: 56px;
}

.webtraffic-form .wt-ai-insights-chip {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-left: 2px solid #4caf50;
  border-right: 2px solid #4caf50;
  border-bottom: 2px solid #4caf50;
  background: #fff;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.08);
  z-index: 2;
  max-width: calc(100% - 32px);
}

@media (max-width: 520px) {
  .webtraffic-form .wt-site-card.wt-site-card--ai {
    padding-top: 60px;
  }

  .webtraffic-form .wt-ai-insights-chip {
    padding: 6px 10px;
    gap: 6px;
  }

  .webtraffic-form .wt-ai-insights-chip__img {
    width: 18px;
    height: 18px;
    border-radius: 5px;
  }

  .webtraffic-form .wt-ai-insights-chip__text {
    font-size: 11px;
  }
}

.webtraffic-form .wt-ai-insights-chip__img {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  object-fit: cover;
  flex: 0 0 auto;
}

.webtraffic-form .wt-ai-insights-chip__text {
  font-size: 12px;
  font-weight: 800;
  color: #111827;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.webtraffic-form .wt-site-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.webtraffic-form .wt-site-avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: radial-gradient(
    120% 120% at 20% 20%,
    #7c3aed 0%,
    #4f46e5 55%,
    #2e2a8f 100%
  );
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  flex: 0 0 auto;
}

.webtraffic-form .wt-site-avatar span {
  line-height: 1;
}

.webtraffic-form .wt-site-identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.webtraffic-form .wt-site-handle-row {
  display: block;
  min-width: 0;
}

.webtraffic-form .wt-site-metrics-row {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-top: 6px;
  min-width: 0;
}

.webtraffic-form .wt-site-inline {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}

.webtraffic-form .wt-site-pipe {
  display: inline-block;
  margin: 0;
  padding: 0 8px;
  color: #d1d5db;
  font-weight: 800;
  line-height: 1;
}

.webtraffic-form .wt-site-inline-metric {
  font-size: 16px;
  color: #111827;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.webtraffic-form .wt-site-metric-value {
  font-weight: 800;
}

.webtraffic-form .wt-site-metric-label {
  font-weight: 500;
  color: #6b7280;
}

.webtraffic-form .wt-site-handle {
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.webtraffic-form .wt-site-title {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

/* When the site title is too long, enable an automatic marquee scroll for readability. */
.webtraffic-form .wt-site-title.wt-site-title--marquee {
  text-overflow: clip;
}

.webtraffic-form .wt-site-title .wt-site-title__text {
  display: block;
  min-width: 0;
}

.webtraffic-form .wt-site-title.wt-site-title--marquee .wt-site-title__text {
  white-space: nowrap;
  overflow: hidden;
}

.webtraffic-form .wt-site-title.wt-site-title--marquee .wt-site-title__marquee {
  display: inline-block;
  padding-left: 100%;
  animation: wt-site-title-marquee var(--wt-site-title-marquee-duration, 12s)
    linear infinite;
}

@keyframes wt-site-title-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .webtraffic-form .wt-site-title.wt-site-title--marquee .wt-site-title__text {
    white-space: normal;
    overflow: visible;
  }
  .webtraffic-form
    .wt-site-title.wt-site-title--marquee
    .wt-site-title__marquee {
    padding-left: 0;
    animation: none;
  }
}

.webtraffic-form .wt-site-metrics {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
}

.webtraffic-form .wt-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.webtraffic-form .wt-metric-value {
  font-size: 16px;
  font-weight: 800;
  color: #111827;
}

/* Visitors metric pill + badge (+100 style) */
.webtraffic-form .wt-metric--visitors .wt-metric-value {
  position: relative;
}

.webtraffic-form .wt-metric--visitors .wt-metric-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  border: 1px solid rgba(17, 24, 39, 0.08);
}

.webtraffic-form .wt-metric--visitors.wt-tier-low .wt-metric-pill {
  background: #fee2e2;
  color: #991b1b;
  animation: wt-blink-red var(--wt-site-blink-duration, 3s) ease-in-out infinite;
}

.webtraffic-form .wt-metric--visitors.wt-tier-normal .wt-metric-pill {
  background: #ffedd5;
  color: #9a3412;
  animation: wt-blink-orange var(--wt-site-blink-duration, 3s) ease-in-out
    infinite;
}

.webtraffic-form .wt-metric--visitors.wt-tier-best .wt-metric-pill {
  background: #dcfce7;
  color: #166534;
  animation: wt-blink-green var(--wt-site-blink-duration, 3s) ease-in-out
    infinite;
}

.webtraffic-form .wt-metric--visitors.wt-tier-unknown .wt-metric-pill {
  background: #fee2e2;
  color: #991b1b;
  animation: wt-blink-red var(--wt-site-blink-duration, 3s) ease-in-out infinite;
}

/* Global Rank metric pill (colored + blinking). */
.webtraffic-form .wt-metric--rank .wt-metric-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  border: 1px solid rgba(17, 24, 39, 0.08);
}

.webtraffic-form .wt-metric--rank.wt-rank-low .wt-metric-pill {
  background: #fce7f3;
  color: #9d174d;
  animation: wt-blink-pink var(--wt-site-blink-duration, 3s) ease-in-out
    infinite;
}

.webtraffic-form .wt-metric--rank.wt-rank-medium .wt-metric-pill {
  background: #ede9fe;
  color: #5b21b6;
  animation: wt-blink-purple var(--wt-site-blink-duration, 3s) ease-in-out
    infinite;
}

.webtraffic-form .wt-metric--rank.wt-rank-high .wt-metric-pill {
  background: #dbeafe;
  color: #1e40af;
  animation: wt-blink-blue var(--wt-site-blink-duration, 3s) ease-in-out
    infinite;
}

@keyframes wt-blink-green {
  0%,
  100% {
    background-color: #dcfce7;
  }
  50% {
    background-color: #bbf7d0;
  }
}

@keyframes wt-blink-orange {
  0%,
  100% {
    background-color: #ffedd5;
  }
  50% {
    background-color: #fed7aa;
  }
}

@keyframes wt-blink-red {
  0%,
  100% {
    background-color: #fee2e2;
  }
  50% {
    background-color: #fecaca;
  }
}

@keyframes wt-blink-pink {
  0%,
  100% {
    background-color: #fce7f3;
  }
  50% {
    background-color: #fbcfe8;
  }
}

@keyframes wt-blink-purple {
  0%,
  100% {
    background-color: #ede9fe;
  }
  50% {
    background-color: #ddd6fe;
  }
}

@keyframes wt-blink-blue {
  0%,
  100% {
    background-color: #dbeafe;
  }
  50% {
    background-color: #bfdbfe;
  }
}

@media (prefers-reduced-motion: reduce) {
  .webtraffic-form .wt-metric--visitors .wt-metric-pill,
  .webtraffic-form .wt-metric--rank .wt-metric-pill {
    animation: none !important;
  }
}

.webtraffic-form .wt-metric--visitors .wt-metric-badge {
  position: absolute;
  top: -14px;
  right: -10px;
  background: linear-gradient(135deg, #ffe7a7, #ffe4ac);
  color: #111827;
  font-weight: 700;
  font-size: 10px;
  padding: 4px 7px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 10px 16px rgba(17, 24, 39, 0.12);
  line-height: 1;
}

.webtraffic-form .wt-metric-label {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  margin-top: 2px;
}

.webtraffic-form .wt-metric-sep {
  width: 1px;
  height: 34px;
  background: #e5e7eb;
}

@media (max-width: 520px) {
  .webtraffic-form .wt-site-card {
    flex-direction: column;
    align-items: stretch;
    padding: 18px 16px;
    gap: 12px;
  }

  /* Outer separator between left block and metrics */
  .webtraffic-form .wt-site-card > .wt-metric-sep {
    width: 100%;
    height: 1px;
    margin: 2px 0;
  }

  .webtraffic-form .wt-site-left {
    width: 100%;
  }

  .webtraffic-form .wt-site-avatar {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  .webtraffic-form .wt-site-metrics {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
  }

  .webtraffic-form .wt-metric {
    flex: 1 1 0;
    align-items: center;
    text-align: center;
  }

  .webtraffic-form .wt-site-metrics .wt-metric-sep {
    height: 28px;
  }

  .webtraffic-form .wt-metric--visitors .wt-metric-badge {
    top: -16px;
    right: -10px;
  }

  .webtraffic-form .wt-site-handle,
  .webtraffic-form .wt-site-title {
    max-width: 100%;
  }

  .webtraffic-form .wt-site-title {
    white-space: normal;
    line-height: 1.25;
  }
}

@media (max-width: 360px) {
  .webtraffic-form .wt-site-metrics {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  .webtraffic-form .wt-site-metrics .wt-metric-sep {
    display: none;
  }
}

/* Keyword Target tags (Fiverr-like) */
.webtraffic-form .wt-keyword-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 20px 18px;
  border-radius: 12px;
  border: 1px solid #e7e9ee;
  background: #fff;
}

.webtraffic-form .wt-keyword-tags:focus-within {
  border-color: rgba(84, 72, 240, 0.55);
  box-shadow: 0 0 0 2px rgba(84, 72, 240, 0.12);
}

.webtraffic-form .wt-keyword-tags.wt-invalid,
.webtraffic-form .manual-count-input.wt-invalid .wt-keyword-tags {
  border-color: var(--hec-invalid, #dc2626) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18) !important;
}

.webtraffic-form .wt-keyword-tags.wt-invalid:focus-within,
.webtraffic-form .manual-count-input.wt-invalid .wt-keyword-tags:focus-within {
  border-color: var(--hec-invalid, #dc2626) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.22) !important;
}

.webtraffic-form .wt-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.webtraffic-form .wt-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(84, 72, 240, 0.1);
  color: #2e2a8f;
  font-size: 13px;
  font-weight: 800;
}

.webtraffic-form .wt-tag-remove {
  all: unset !important;
  appearance: none !important;
  box-sizing: border-box !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(220, 38, 38, 0.25) !important;
  background: rgba(254, 226, 226, 0.95) !important;
  box-shadow: 0 6px 14px rgba(17, 24, 39, 0.12) !important;
  color: #dc2626 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}

.webtraffic-form .wt-tag-remove:hover {
  background: rgba(254, 226, 226, 1) !important;
  border-color: rgba(220, 38, 38, 0.35) !important;
}

.webtraffic-form .wt-tag-remove:active {
  transform: scale(0.98) !important;
}

.webtraffic-form .wt-tag-remove:focus {
  outline: none;
}

.webtraffic-form .wt-tag-remove:focus-visible {
  box-shadow:
    0 0 0 4px rgba(84, 72, 240, 0.12),
    0 6px 14px rgba(17, 24, 39, 0.12) !important;
}

.webtraffic-form .wt-tag-input {
  border: 0;
  outline: 0;
  background: transparent;
  min-width: 180px;
  flex: 1 1 180px;
  font-size: 14px;
  padding: 0 !important;
  border: none !important;
  font-weight: 700;
  color: #111827;
}

/* When empty, give the placeholder enough room (avoid partial clipping next to tags). */
.webtraffic-form .wt-tag-input:placeholder-shown {
  flex: 1 1 100%;
  min-width: 220px;
}

.webtraffic-form .wt-tag-input:focus {
  box-shadow: none !important;
  border: none !important;
}

.webtraffic-form .wt-tag-input::placeholder {
  color: #9aa1ad;
  font-weight: 600;
}

/* AI lightbulb icons — slow soft blink (keyword hint, keyword tags, GEO pills) */
@keyframes wt-bulb-soft-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.28;
  }
}

.webtraffic-form i.fa-lightbulb {
  animation: wt-bulb-soft-blink 2.4s ease-in-out infinite;
  will-change: opacity;
}

@media (prefers-reduced-motion: reduce) {
  .webtraffic-form i.fa-lightbulb {
    animation: none;
    opacity: 1;
  }
}

/* GEO AI bulb */
.webtraffic-form .geo-country-pill.is-ai {
  position: relative;
}

.webtraffic-form .geo-country-pill.is-ai:not(.is-selected) {
  background: rgba(245, 158, 11, 0.08) !important;
  border-color: rgba(245, 158, 11, 0.28) !important;
}

.webtraffic-form .geo-country-pill .ai {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.16);
  color: #e0a053;
  flex: 0 0 auto;
}

/* Keyword AI bulb */
.webtraffic-form .wt-tag.is-ai {
  background: rgba(245, 158, 11, 0.12);
  color: #7a4a00;
}

.webtraffic-form .wt-tag.is-ai .wt-tag-remove {
  color: #7a4a00;
}

.webtraffic-form .wt-tag .ai {
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.16);
  color: #e0a053;
  flex: 0 0 auto;
}

.webtraffic-form .wt-ai-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.14);
  color: #7a4a00;
  font-weight: 800;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.webtraffic-form #platform-keywords-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 6px;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.35;
}

.webtraffic-form .wt-keywords-help-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
}

.webtraffic-form .wt-keywords-limit-hint {
  font-weight: 600;
  color: #6b7280;
  line-height: 1.3;
}

.webtraffic-form .wt-keywords-help-actions {
  display: inline-flex;
  align-items: center;
}

.webtraffic-form .wt-regen-ai-keywords-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: none;
  border-radius: 999px;
  background: rgb(151, 217, 151);
  color: #000;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  vertical-align: middle;
  transition:
    background 0.2s ease,
    opacity 0.2s ease;
}

@media (max-width: 768px) {
  .webtraffic-form #platform-keywords-help {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .webtraffic-form .wt-keywords-help-meta {
    width: 100%;
    align-items: center;
    gap: 8px;
  }

  .webtraffic-form .wt-ai-hint {
    white-space: normal;
    text-align: left;
  }

  .webtraffic-form .wt-keywords-help-actions {
    width: 100%;
  }

  .webtraffic-form .wt-regen-ai-keywords-btn {
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
    font-size: 13px;
  }
}

.webtraffic-form .wt-regen-ai-keywords-btn i {
  font-size: 11px;
  flex: 0 0 auto;
}

.webtraffic-form .wt-regen-ai-keywords-btn.is-loading i {
  animation: wt-regen-spin 0.8s linear infinite;
}

@keyframes wt-regen-spin {
  to {
    transform: rotate(360deg);
  }
}

.webtraffic-form .wt-regen-ai-keywords-btn:hover {
  background: #43a047;
}

.webtraffic-form .wt-regen-ai-keywords-btn:disabled,
.webtraffic-form .wt-regen-ai-keywords-btn.is-loading {
  opacity: 0.65;
  cursor: not-allowed;
}

/* =====================================================
   SERVICE CARDS WITH STEP INDICATORS
   ===================================================== */
/* Base grid (kept generic for any .services blocks) */
.webtraffic-form .services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 30px;
}

@media (max-width: 520px) {
  .webtraffic-form .services {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 18px;
  }
}

@media (max-width: 360px) {
  /* Allow the grid to fit ultra-small devices without horizontal scroll */
  .webtraffic-form .services {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .webtraffic-form .wt-tag-input {
    min-width: 120px;
    flex: 1 1 120px;
  }
}

/* FameShop-like card grid styling (scoped to the service cards area) */
.webtraffic-form .services.service-cards {
  border-radius: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  justify-content: center;
}

@media (max-width: 520px) {
  .webtraffic-form .services.service-cards {
    grid-template-columns: 1fr;
  }
}

/* Compact the service cards to fit 4-up inside the 720px form cap */
@media (min-width: 521px) {
  .webtraffic-form .services.service-cards .service {
    padding: 14px 10px;
    min-height: 74px;
  }

  .webtraffic-form .services.service-cards .details-wrapper {
    align-items: center;
    gap: 10px;
  }

  .webtraffic-form .services.service-cards .service-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .webtraffic-form .services.service-cards .service-icon i {
    font-size: 18px;
  }

  .webtraffic-form .services.service-cards .info .type {
    font-size: 15px;
    line-height: 22px;
  }
}

.webtraffic-form .services.service-cards .service {
  position: relative;
  border: 2px solid rgba(229, 231, 238, 0.8);
  border-radius: 12px;
  padding: 22px 15px;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
  background: #fff;
  min-height: 88px;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

@media (max-width: 520px) {
  .webtraffic-form .services.service-cards .service {
    padding: 16px 12px;
    min-height: 76px;
  }
}

.webtraffic-form .services.service-cards .service:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}

.webtraffic-form .services.service-cards .service.selected-service,
.webtraffic-form .services.service-cards .service.active-step {
  border-color: rgba(79, 70, 229, 0.45);
  box-shadow: 0 18px 42px rgba(79, 70, 229, 0.12);
  color: var(--hec-primary, #5b4beb);
}

.webtraffic-form .services.service-cards .service:hover {
  border-color: var(--hec-primary-700, #4a3dd8);
  box-shadow: 0 18px 42px rgba(79, 70, 229, 0.12);
  color: var(--hec-primary-700, #4a3dd8);
}

/* Mobile/touch: disable sticky hover (tap leaves :hover active on service cards). */
@media (max-width: 768px) {
  .webtraffic-form .services.service-cards .service:hover {
    transform: none;
    border-color: rgba(229, 231, 238, 0.8);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
    color: inherit;
  }

  .webtraffic-form .services.service-cards .service.active-step:hover,
  .webtraffic-form .services.service-cards .service.selected-service:hover,
  .webtraffic-form .services.service-cards .service.active-step,
  .webtraffic-form .services.service-cards .service.selected-service {
    border-color: rgba(79, 70, 229, 0.45);
    box-shadow: 0 18px 42px rgba(79, 70, 229, 0.12);
    color: var(--hec-primary, #5b4beb);
  }
}

.webtraffic-form .services.service-cards .service.active-step .info .type {
  color: var(--hec-primary-700, #4a3dd8);
}

/* .webtraffic-form .services.service-cards .service.step-completed {
  border-color: rgba(79, 70, 229, 0.35);
} */

.webtraffic-form .service input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.webtraffic-form .service label {
  cursor: pointer;
  margin: 0;
  display: block;
}

/* Step Indicator */
.step-indicator {
  position: absolute;
  top: -12px;
  left: 15px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  padding: 2px 8px;
  border-radius: 12px;
  border: 2px solid #e0e0e0;
  font-size: 12px;
  font-weight: 600;
  z-index: 2;
}

/* Hide the numeric step pill on the card grid (reference design is clean) */
.webtraffic-form .services.service-cards .step-indicator {
  display: none;
}

.service.step-completed .step-indicator {
  border-color: #338bd9;
  background: #338bd9;
  color: white;
}

.step-number {
  color: #666;
}

.service.step-completed .step-number {
  color: white;
}

.step-status .completed-icon {
  display: none;
  color: white;
}

.step-status .pending-icon {
  display: inline;
  color: #ccc;
}

.service.step-completed .step-status .completed-icon {
  display: inline;
}

.service.step-completed .step-status .pending-icon {
  display: none;
}

/* Checked Icon — matches option pill checkmark (top-right) */
.webtraffic-form .checked-icon {
  position: absolute;
  top: 12px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #4f46e5;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 6px 14px rgba(17, 24, 39, 0.14);
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(-2px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.webtraffic-form .services.service-cards .service.active-step .checked-icon,
.webtraffic-form
  .services.service-cards
  .service.selected-service
  .checked-icon {
  opacity: 1;
  transform: translateY(0);
}

.webtraffic-form .services.service-cards .service.step-error .checked-icon {
  opacity: 1;
  transform: translateY(0);
  background: #dc2626;
  border-color: rgba(255, 255, 255, 0.85);
}

/* Service Details */
.webtraffic-form .details-wrapper {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 0;
}

.webtraffic-form .services.service-cards .service-icon {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: #2dd4bf;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

@media (max-width: 520px) {
  .webtraffic-form .services.service-cards .service-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }
}

.webtraffic-form .services.service-cards .service-icon i {
  font-size: 24px;
}

@media (max-width: 520px) {
  .webtraffic-form .services.service-cards .service-icon i {
    font-size: 20px;
  }
}

.webtraffic-form .services.service-cards .service.active-step .service-icon,
.webtraffic-form
  .services.service-cards
  .service.selected-service
  .service-icon {
  background: #4f46e5;
}

.webtraffic-form .info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.webtraffic-form .info .type {
  font-size: 16px;
  font-weight: 530;
  color: #111827;
  line-height: 22px;
}

@media (max-width: 520px) {
  .webtraffic-form .info .type {
    font-size: 14px;
  }
}

/* Hide Required/Optional chips on the card grid to match the reference */
.webtraffic-form .services.service-cards .required-badge,
.webtraffic-form .services.service-cards .optional-badge {
  display: none;
}

/* Required/Optional Badges */
.required-badge,
.optional-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.required-badge {
  background: #fff3cd;
  color: #856404;
}

.optional-badge {
  background: #e2e3e5;
  color: #6c757d;
}

/* =====================================================
   SERVICE STEP SECTIONS
   ===================================================== */
.service-step-section {
  margin: 30px 0;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
}

.section-title {
  font-size: 14px !important;
  font-weight: 600;
  color: #333;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title i {
  color: #338bd9;
}

.section-badge {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.section-badge.required {
  background: #fff3cd;
  color: #856404;
}

.section-badge.optional {
  background: #e2e3e5;
  color: #6c757d;
}

.section-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
  gap: 15px;
}

/* Navigation Buttons */
.btn-next-step,
.btn-prev-step,
.btn-complete-steps {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.btn-next-step {
  background: #338bd9;
  color: white;
  margin-left: auto;
}

.btn-next-step:hover {
  background: #338bd9;
  transform: translateX(3px);
}

.btn-prev-step {
  background: #f5f5f5;
  color: #666;
  border: 1px solid #ddd;
}

.btn-prev-step:hover {
  background: #e0e0e0;
  transform: translateX(-3px);
}

.btn-complete-steps {
  background: linear-gradient(135deg, #4caf50, #66bb6a);
  color: white;
  padding: 14px 28px;
  font-size: 16px;
}

.btn-complete-steps:hover {
  background: linear-gradient(135deg, #43a047, #4caf50);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

/* =====================================================
   GEO TARGETING - COUNTRY SEARCH
   ===================================================== */
.geo-top-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  margin: 10px 0 12px;
}

.geo-top-row.is-specific {
  align-items: stretch;
}

.geo-top-row .geo-region-buttons {
  margin: 0;
  flex: 0 0 auto;
}

.geo-target-btn {
  appearance: none !important;
  border: 1px solid #e7e9ee !important;
  background: #fff !important;
  border-radius: 999px !important;
  /* Reserve right space for the close icon so active state does not reflow siblings. */
  padding: 10px 52px 10px 28px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  align-self: auto !important;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease !important;
}

.geo-target-btn::after {
  content: "×";
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  color: #dc2626;
  background: rgba(254, 226, 226, 0.95);
  border: 1px solid rgba(220, 38, 38, 0.25);
  box-shadow: 0 6px 14px rgba(17, 24, 39, 0.12);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.geo-target-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(17, 24, 39, 0.15);
}

.geo-target-btn.is-active {
  border-color: rgba(84, 72, 240, 0.55) !important;
  background: rgba(84, 72, 240, 0.08) !important  ;
  box-shadow: 0 0 0 2px rgba(84, 72, 240, 0.12);
}

.geo-target-btn.is-active::after {
  opacity: 1;
  visibility: visible;
}

.geo-target-btn.is-active:hover::after {
  background: rgba(254, 226, 226, 1);
  border-color: rgba(220, 38, 38, 0.35);
}

.geo-target-btn:focus {
  outline: none;
}

.geo-target-btn:focus-visible {
  border-color: rgba(84, 72, 240, 0.55);
  box-shadow: 0 0 0 4px rgba(84, 72, 240, 0.12);
}

.geo-target-btn:active {
  transform: translateY(0);
}

@media (max-width: 680px) {
  .geo-top-row {
    flex-direction: column;
    align-items: stretch;
  }

  .geo-target-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Extra specificity for the actual button id */
  #geo-target-specific-btn {
    width: 100% !important;
  }
}

/* Mobile GEO layout to match reference (2-column pills + full-width actions) */
@media (max-width: 520px) {
  .geo-top-row {
    gap: 14px;
  }

  /* Region pills in a neat 2-column grid */
  .geo-top-row .geo-region-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
  }

  .geo-top-row .geo-region-buttons .geo-region-item {
    width: 100%;
  }

  .geo-top-row .geo-region-buttons .geo-region-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 38px 14px 40px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  .geo-top-row .geo-region-buttons .geo-region-btn .geo-info-icon {
    right: 14px;
    width: 20px;
    height: 20px;
  }

  /* Target Specific button full width */
  .geo-top-row .geo-target-btn {
    width: 100% !important;
    padding: 14px 52px 14px 28px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  /* Target Specific Countries stays full width when rendered inside the grid */
  .geo-top-row .geo-region-buttons #geo-target-specific-btn,
  .geo-top-row #geo-target-specific-btn {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
  }

  /* Search + scroll area spacing */
  .geo-search-bar {
    margin: 0 0 14px;
  }
}

.geo-mode-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 12px;
}

.geo-mode-btn {
  appearance: none;
  border: 1px solid #e7e9ee;
  background: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 800;
  color: #111827;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.geo-mode-btn.is-active {
  border-color: rgba(84, 72, 240, 0.55);
  background: rgba(84, 72, 240, 0.06);
  box-shadow: 0 0 0 4px rgba(84, 72, 240, 0.12);
}

.geo-region-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
  align-items: stretch;
}

.geo-region-item {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.geo-region-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 240px;
  max-width: 320px;
  background: #facc15;
  color: #111827;
  border: none;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.22);
  padding: 10px 12px;
  z-index: 50;
  display: none;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.geo-region-tooltip.is-open {
  display: block;
}

.geo-region-tooltip::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 18px;
  width: 0;
  height: 0;
  background: none;
  border-width: 0 6px 6px 6px;
  border-style: solid;
  border-color: transparent transparent #facc15 transparent;
  transform: none;
}

.geo-region-tooltip-header {
  font-size: 12px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 8px;
}

.geo-region-tooltip-count {
  font-weight: 700;
  color: #111827;
  opacity: 0.75;
}

.geo-region-tooltip-empty {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
  opacity: 0.85;
  padding: 6px 0;
}

.geo-region-tooltip-list {
  max-height: 180px;
  overflow: auto;
  padding-right: 4px;
}

.geo-region-tooltip-item {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
  padding: 6px 4px;
  border-radius: 8px;
}

.geo-region-tooltip-item:hover {
  background: rgba(17, 24, 39, 0.08);
}

.geo-region-btn {
  appearance: none !important;
  border: 1px solid #e7e9ee !important;
  background: #fff !important;
  border-radius: 999px !important;
  /* Reserve left space for the selection check so active state does not reflow siblings. */
  padding: 10px 40px 10px 40px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  cursor: pointer !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  max-width: 100%;
  min-width: 0;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease !important;
}

/* When both cart + active check are visible, make room for both. */
.geo-region-btn.wt-option-in-cart.is-active {
  padding-left: 60px !important;
}

.geo-region-btn-label {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Info icon inside the button (right side) */
.geo-region-btn .geo-info-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  background: rgba(243, 244, 246, 0.9);
  border: 1px solid #e7e9ee;
}

.geo-region-btn:hover .geo-info-icon {
  border-color: rgba(17, 24, 39, 0.15);
}

.geo-region-btn.is-active .geo-info-icon {
  color: #4f46e5;
  background: rgba(84, 72, 240, 0.08);
  border-color: rgba(84, 72, 240, 0.25);
}

.geo-region-btn::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  color: #ffffff;
  background: #4f46e5;
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 6px 14px rgba(17, 24, 39, 0.14);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.geo-region-btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(84, 72, 240, 0.45) !important;
  box-shadow: 0 10px 18px rgba(17, 24, 39, 0.08) !important;
}

.geo-region-btn.is-active {
  border-color: rgba(84, 72, 240, 0.55) !important;
  background: rgba(84, 72, 240, 0.06) !important;
}

.geo-region-btn.is-active::after {
  opacity: 1;
  visibility: visible;
}

.geo-search-bar {
  margin: 0 0 12px;
}

.geo-search-input {
  position: relative;
}

.geo-search-input > i {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280 !important;
}

.geo-search-input input {
  width: 100% !important;
  border: 1px solid #e7e9ee !important;
  border-radius: 999px !important;
  padding: 12px 52px 12px 44px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  background: #fff !important;
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03) !important;
}

.geo-search-input input:focus {
  outline: none;
  border-color: rgba(84, 72, 240, 0.55);
  box-shadow: 0 0 0 4px rgba(84, 72, 240, 0.12);
}

.geo-search-clear {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(220, 38, 38, 0.25) !important;
  background: rgba(254, 226, 226, 0.95) !important;
  color: #dc2626 !important;
  box-shadow: 0 6px 14px rgba(17, 24, 39, 0.12) !important;
  cursor: pointer !important;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}

.geo-search-clear i {
  font-size: 14px;
  line-height: 1;
}

.geo-search-clear:hover {
  background: rgba(254, 226, 226, 1) !important;
  border-color: rgba(220, 38, 38, 0.35) !important;
}

.geo-search-clear:active {
  transform: translateY(-50%) scale(0.98) !important;
}

.geo-search-clear:focus {
  outline: none;
}

.geo-search-clear:focus-visible {
  box-shadow:
    0 0 0 4px rgba(84, 72, 240, 0.12),
    0 6px 14px rgba(17, 24, 39, 0.12) !important;
}

.geo-country-scroll {
  max-height: 260px;
  overflow: auto;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--hec-primary, #5b4beb);
  margin: 8px 0 14px;
}

.geo-region-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 10px 0 14px;
}

.geo-region-label {
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
}

.geo-region-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff;
  border: 1px solid #e7e9ee;
  border-radius: 999px;
  padding: 12px 44px 12px 16px;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03);
  background-image:
    linear-gradient(45deg, transparent 50%, #6b7280 50%),
    linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 13px) calc(50% - 3px);
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
}

.geo-region-select:focus {
  outline: none;
  border-color: rgba(84, 72, 240, 0.55);
  box-shadow: 0 0 0 4px rgba(84, 72, 240, 0.12);
}

.geo-country-pills {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 14px;
  margin: 0;
  width: 100%;
}

.geo-country-pill {
  position: relative !important; /* anchors cart/check pseudo-elements */
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  /* Reserve left/right space so cart + check never reflow siblings on select. */
  padding: 10px 40px 10px 40px !important;
  min-height: 40px !important;
  background: #ffffff !important;
  border: 1px solid #e7e9ee !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.geo-country-pill .flag {
  font-size: 16px;
  line-height: 1;
  margin-right: 0;
  flex-shrink: 0;
}

.geo-country-pill .geo-country-name-popover {
  position: relative;
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
  overflow: visible;
}

.geo-country-pill .geo-country-name-label {
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  text-align: center;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: clip;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.geo-country-pill .ai {
  flex-shrink: 0;
  margin-left: 0;
}

.geo-country-pill:hover {
  border-color: rgba(84, 72, 240, 0.45) !important;
  box-shadow: 0 10px 18px rgba(17, 24, 39, 0.08) !important;
  transform: translateY(-1px) !important;
}

.geo-country-pill.is-selected {
  border-color: rgba(84, 72, 240, 0.55) !important;
  background: rgba(84, 72, 240, 0.06) !important;
}
.geo-country-pill.is-selected .geo-country-name-label {
  color: #111827;
}

/* Desktop: single-line clip + fixed popover (JS-positioned) for full country name. */
@media (min-width: 769px) {
  .geo-country-pill .geo-country-name-label {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    white-space: nowrap;
    text-overflow: clip;
  }

  .geo-country-pill:hover {
    transform: none !important;
  }

  .webtraffic-form .geo-country-pill .hec-website-url-popover {
    position: fixed;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    z-index: 100010;
    opacity: 0;
    visibility: hidden;
    pointer-events: none !important;
    transform: none !important;
    transition:
      opacity 0.18s ease,
      visibility 0.18s ease;
  }

  .webtraffic-form
    .geo-country-name-popover:not(.is-open):hover
    .hec-website-url-popover,
  .webtraffic-form
    .geo-country-name-popover:not(.is-open):focus-within
    .hec-website-url-popover {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
  }

  .webtraffic-form .geo-country-name-popover.is-open .hec-website-url-popover {
    opacity: 1;
    visibility: visible;
  }

  .webtraffic-form
    .geo-country-pill
    .hec-website-url-popover.geo-country-name-popover--above::before {
    top: auto;
    bottom: -6px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-width: 6px 6px 0 6px;
    border-color: #c2b9fd transparent transparent transparent;
  }
}

@media (max-width: 768px) {
  #geo-specific-panel,
  .geo-country-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .geo-country-scroll {
    padding: 10px;
    max-height: min(320px, 52vh);
    margin-left: 0;
    margin-right: 0;
  }

  .geo-country-pills {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
  }

  .geo-country-pill {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 10px 40px 10px 14px !important;
    min-height: 44px !important;
    box-sizing: border-box;
    border-radius: 14px !important;
  }

  .webtraffic-form .geo-country-pill.wt-option-in-cart,
  .webtraffic-form .geo-country-pill.wt-option-in-cart.is-selected {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  .geo-country-pill .flag {
    flex-shrink: 0;
    margin-right: 0;
  }

  .geo-country-pill .geo-country-name-label {
    min-width: 0;
    flex: 1 1 auto;
    max-width: 100%;
    font-size: 13px;
    line-height: 1.35;
    text-align: left;
    -webkit-line-clamp: 2;
    text-overflow: clip;
  }

  .geo-country-pill .hec-website-url-popover {
    display: none !important;
  }

  .geo-country-pill .ai {
    flex-shrink: 0;
    margin-left: 4px;
  }

  .geo-country-pill:hover {
    transform: none !important;
  }

  .geo-no-countries {
    grid-column: 1 / -1;
    text-align: center;
  }
}

.geo-no-countries {
  width: 100%;
  grid-column: 1 / -1;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e7e9ee;
  color: #6b7280;
  font-weight: 600;
}

.country-search-container {
  position: relative;
  margin-bottom: 20px;
}

.search-input-wrapper {
  position: relative;
}

.search-input-wrapper .search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.search-input-wrapper input {
  width: 100%;
  padding: 15px 45px 15px 45px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.search-input-wrapper input:focus {
  outline: none;
  border-color: #338bd9;
  box-shadow: 0 0 0 3px rgba(51, 139, 217, 0.1);
}

.search-input-wrapper .clear-search {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  cursor: pointer;
  display: none;
}

.search-input-wrapper input:not(:placeholder-shown) + .clear-search {
  display: block;
}

/* Search Results Dropdown */
.search-results-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 2px solid #e0e0e0;
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 100;
  display: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.search-result-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s ease;
}

.search-result-item:hover {
  background: #f8fff9;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item .country-flag {
  font-size: 24px;
  margin-right: 12px;
}

.search-result-item .country-name {
  flex: 1;
  font-weight: 500;
  color: #333;
}

.search-result-item .country-code {
  margin-right: 12px;
  padding: 2px 8px;
  background: #f0f0f0;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
}

.search-result-item .country-tier {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.search-result-item.tier-premium .country-tier {
  background: #fff3cd;
  color: #856404;
}

.search-result-item.tier-standard .country-tier {
  background: #d1ecf1;
  color: #0c5460;
}

.search-result-item.tier-economy .country-tier {
  background: #d4edda;
  color: #155724;
}

.no-results {
  padding: 20px;
  text-align: center;
  color: #999;
}

/* Selected Countries Container */
.selected-items-container {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 15px;
  min-height: 100px;
}

.selected-items-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.selected-count {
  font-weight: 600;
  color: #333;
}

.btn-clear-all {
  background: none;
  border: none;
  color: #f44336;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.btn-clear-all:hover {
  background: #ffebee;
  border-radius: 4px;
}

.selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.selected-country-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f1f8f4;
  border: 1px solid #338bd9;
  border-radius: 20px;
  font-size: 14px;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.selected-country-tag .flag {
  font-size: 18px;
}

.selected-country-tag .name {
  font-weight: 500;
  color: #333;
}

.selected-country-tag .remove-country {
  cursor: pointer;
  color: #999;
  padding: 2px;
  transition: color 0.2s ease;
}

.selected-country-tag .remove-country:hover {
  color: #f44336;
}

.no-selection {
  color: #999;
  font-style: italic;
  text-align: center;
  padding: 20px;
}

/* Section Description */
.section-description {
  margin-bottom: 20px;
  padding: 15px;
  background: white;
  border-left: 4px solid #338bd9;
  border-radius: 4px;
}

.section-description p {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.6;

  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.selected-count {
  font-weight: 600;
  color: #333;
}

.clear-all-btn {
  background: none;
  border: none;
  color: #f44336;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}

.clear-all-btn:hover {
  text-decoration: underline;
}

.selected-items-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.selected-country-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f1f8f4;
  border: 1px solid #338bd9;
  border-radius: 20px;
  font-size: 14px;
}

.selected-country-tag .flag {
  font-size: 18px;
}

.selected-country-tag .name {
  font-weight: 500;
  color: #333;
}

.selected-country-tag .remove-country {
  cursor: pointer;
  color: #999;
  padding: 2px;
  transition: color 0.2s ease;
}

.selected-country-tag .remove-country:hover {
  color: #f44336;
}

.no-selection {
  color: #999;
  font-style: italic;
  text-align: center;
  padding: 20px;
}

/* =====================================================
   PLATFORM & DEVICE OPTIONS
   ===================================================== */
.options-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.options-grid.device-options {
  gap: 12px;
}

.platform-option,
.device-option,
.platform-suboption {
  position: relative !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 10px 34px !important;
  min-height: 40px !important;
  background: #ffffff !important;
  border: 1px solid #e7e9ee !important;
  border-radius: 999px !important;
  cursor: pointer !important;
}

.platform-option:hover,
.device-option:hover,
.platform-suboption:hover {
  border-color: rgba(17, 24, 39, 0.15) !important;
  box-shadow: 0 10px 18px rgba(17, 24, 39, 0.08) !important;
  transform: translateY(-1px) !important;
}

.platform-option.selected,
.device-option.selected,
.platform-suboption.selected {
  border-color: rgba(84, 72, 240, 0.55) !important;
  background: rgba(84, 72, 240, 0.06) !important;
}

.platform-option input,
.device-option input,
.platform-suboption input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.platform-option .option-icon,
.device-option .option-icon,
.platform-suboption .option-icon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  color: #111827;
  font-size: 12px;
  flex: 0 0 auto;
  overflow: hidden;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.platform-option .option-icon .wt-option-icon-img,
.device-option .option-icon .wt-option-icon-img,
.platform-suboption .option-icon .wt-option-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 4px;
}

.platform-option.selected .option-icon,
.device-option.selected .option-icon,
.platform-suboption.selected .option-icon {
  background: rgba(84, 72, 240, 0.1);
  color: #4f46e5;
}

.platform-option .option-name,
.device-option .option-name,
.platform-suboption .option-name {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  line-height: 1;
  white-space: nowrap;
}

/* AI GEO platform pill — “New” badge (yellow + sparkles). */
.webtraffic-form .platform-option.platform-option--has-new-badge {
  /* padding-right: 44px !important; */
  gap: 8px !important;
}

.webtraffic-form .platform-option .wt-platform-new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-left: 2px;
  padding: 4px 10px 4px 8px;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff06a 0%, #ffd833 45%, #f0c000 100%);
  color: #111827;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  flex-shrink: 0;
  pointer-events: none;
}

.webtraffic-form .platform-option .wt-platform-new-badge__icon {
  font-size: 12px;
  line-height: 1;
  color: #111827;
}

.webtraffic-form .platform-option .wt-platform-new-badge__text {
  font-size: 11px;
  font-weight: 800;
  color: #111827;
}

.webtraffic-form .platform-option.selected .wt-platform-new-badge {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 1px 3px rgba(17, 24, 39, 0.16);
}

.platform-option::after,
.device-option::after,
.visitor-count-option::after,
.platform-suboption::after,
.geo-country-pill::after {
  content: "✓";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: #4f46e5;
  border-radius: 999px;
  display: none;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 6px 14px rgba(17, 24, 39, 0.14);
  box-sizing: border-box;
  pointer-events: none;
}

.platform-option.selected::after,
.device-option.selected::after,
.visitor-count-option.selected::after,
.platform-suboption.selected::after {
  display: inline-flex;
}

/* Country pills: keep checkmark space reserved; toggle visibility only (no reflow). */
.geo-country-pill::after {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.geo-country-pill.is-selected::after {
  opacity: 1;
  visibility: visible;
}

/* =====================================================
   VISITOR COUNT SELECTION
   ===================================================== */
.visitor-count-presets {
  display: block;
  margin-bottom: 20px;
}

.visitor-count-presets .wt-visitor-count-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-bottom: 10px;
}

.visitor-count-presets .wt-visitor-count-row:last-child {
  margin-bottom: 0;
}

.visitor-count-option {
  position: relative !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: auto;
  min-width: 0;
  padding: 10px 16px !important;
  min-height: 40px !important;
  background: #ffffff !important;
  border: 1px solid #e7e9ee !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.visitor-count-option:hover {
  border-color: rgba(84, 72, 240, 0.45) !important;
  box-shadow: 0 10px 18px rgba(17, 24, 39, 0.08) !important;
  transform: translateY(-1px) !important;
}

.visitor-count-option.selected {
  border-color: rgba(84, 72, 240, 0.55) !important;
  background: rgba(84, 72, 240, 0.06) !important;
  padding-right: 40px !important;
}

.visitor-count-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.visitor-count-option .count-value {
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  line-height: 1;
  white-space: nowrap;
  margin: 0;
  margin-right: 4px;
}

.visitor-count-option .count-price {
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  line-height: 1;
  white-space: nowrap;
  margin: 0;
}

.visitor-count-option.selected .count-value {
  color: #111827;
}

.visitor-count-option .count-label {
  display: none;
}

/* Manual Count Input */
/* .manual-count-input {
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 25px;
} */

.manual-count-input label {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  font-weight: 500;
}

.manual-count-input input {
  width: 100% !important;
  padding: 12px 15px !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  transition: border-color 0.3s ease !important;
}

.manual-count-input input:focus {
  outline: none;
  border-color: #338bd9;
  box-shadow: 0 0 0 3px rgba(51, 139, 217, 0.1);
}

/* Referral URL: required / invalid (red until user enters a valid URL) */
.webtraffic-form #platform-referral-link.invalid,
.webtraffic-form .manual-count-input #platform-referral-link.invalid,
.webtraffic-form .manual-count-input.wt-invalid #platform-referral-link {
  border-color: var(--hec-invalid, #dc2626) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18) !important;
}

.webtraffic-form #platform-referral-link.invalid:focus,
.webtraffic-form .manual-count-input #platform-referral-link.invalid:focus,
.webtraffic-form .manual-count-input.wt-invalid #platform-referral-link:focus {
  border-color: var(--hec-invalid, #dc2626) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.22) !important;
}

/* Cost Breakdown */
.cost-breakdown {
  background: white;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  margin-bottom: 20px;
}

.cost-breakdown h4 {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #333;
}

.cost-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 14px;
}

.cost-row.cost-total {
  border-top: 2px solid #e0e0e0;
  margin-top: 10px;
  padding-top: 15px;
}

.cost-row .cost-label {
  color: #666;
  font-weight: 500;
}

.cost-row.cost-total .cost-label {
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.cost-row .cost-value {
  color: #333;
  font-weight: 600;
}

.cost-row.cost-total .cost-value {
  color: #338bd9;
  font-size: 20px;
  font-weight: 700;
}

/* =====================================================
   ORDER SUMMARY
   ===================================================== */
.order-summary {
  background: linear-gradient(135deg, #f8fff9, #e8f5e9) !important;
  border: 2px solid #338bd9 !important;
}

.order-summary .section-header {
  justify-content: space-between;
  align-items: center;
}

.btn-edit-selection {
  padding: 8px 16px;
  background: white;
  border: 2px solid #338bd9;
  border-radius: 8px;
  color: #338bd9;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.btn-edit-selection:hover {
  background: #338bd9;
  color: white;
}

.summary-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid rgba(76, 175, 80, 0.2);
}

.summary-item:last-child {
  border-bottom: none;
}

.summary-item.summary-total {
  background: #338bd9;
  color: white;
  padding: 20px;
  margin: 10px -25px -25px;
  border-radius: 0 0 10px 10px;
  border-bottom: none;
}

.summary-label {
  color: #666;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.summary-item.summary-total .summary-label {
  color: white;
  font-size: 18px;
  font-weight: 600;
}

.summary-value {
  font-weight: 600;
  color: #333;
  text-align: right;
  max-width: 60%;
}

.summary-item.summary-total .summary-value {
  color: white;
  font-size: 24px;
  font-weight: 700;
}

/* Validation Alert */
.validation-alert {
  background: #fff3cd;
  border: 1px solid #ffc107;
  color: #856404;
  padding: 12px 15px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  margin-bottom: 15px;
}

.validation-alert i {
  font-size: 18px;
}

/* =====================================================
   CART SECTION
   ===================================================== */
.webtraffic-form .cart-section {
  position: relative;
  background: #fff;
  border-radius: 0;
  border: 0;
  margin-top: 30px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 10px calc(50vw - 50% + 20px);
  width: auto;
  max-width: none;
  box-sizing: border-box;
}

.webtraffic-form .cart-section::before {
  display: none;
}

/* Steps Completion Status */
.steps-completion-status {
  display: flex;
  justify-content: space-around;
  padding: 15px 0;
  margin-bottom: 15px;
  border-bottom: 1px solid #e0e0e0;
  gap: 10px;
  flex-wrap: wrap;
}

.completion-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #999;
  transition: color 0.3s ease;
}

.completion-item i {
  font-size: 16px;
  color: #ddd;
  transition: color 0.3s ease;
}

.completion-item.completed {
  color: #338bd9;
}

.completion-item.completed i {
  color: #338bd9;
}

/* Inner Cart */
.webtraffic-form .cart-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: nowrap;

  /* Horizontal padding lives on .cart-section (full-bleed alignment). */
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
}

/* Status pill lives between basket and buttons */
.webtraffic-form #responses-div.cart-status {
  flex: 0 1 auto;
  max-width: 360px;
  min-width: 200px;
  border-radius: 16px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 550;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: none;
}

.webtraffic-form #responses-div.cart-status.wt-cart-alert--success {
  background: #dff7f7;
  color: #111827;
}

.webtraffic-form #responses-div.cart-status.wt-cart-alert--error {
  background: #fde2e2;
  color: #111827;
}

.webtraffic-form .inner-cart {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
}

.webtraffic-form #cart {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  cursor: pointer;
  color: var(--cart-btn-text, #ffffff);
  background: var(--cart-btn-bg, #2ecac7);
  border-radius: 12px;
  padding: 8px 18px;
  position: relative;
  box-shadow: 0 12px 24px rgba(17, 24, 39, 0.12);
}
.webtraffic-form #cart:hover {
  background: var(--cart-btn-hover-bg, #e8e8e8);
  color: var(--cart-btn-hover-text, #2ecac7);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(17, 24, 39, 0.12);
  transition: all 0.3s ease;
}

.webtraffic-form #cart .cart-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.webtraffic-form #cart i {
  font-size: 18px;
}

.webtraffic-form #cart .count {
  background: #ff3b30;
  color: #ffffff;
  border-radius: 999px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  position: absolute;
  top: -9px;
  right: -9px;
  border: 3px solid #ffffff;
  box-shadow: 0 10px 20px rgba(17, 24, 39, 0.18);
}

.webtraffic-form .amount {
  font-weight: 600;
  color: #111827;
}

.webtraffic-form .amount .title {
  color: #5b4ef7;
  font-weight: 600;
}

.webtraffic-form .amount .price {
  color: #111827;
  margin-left: 6px;
  font-size: 18px;
}

/* Validation Message */
.validation-message {
  background: #fff3cd;
  border: 1px solid #ffc107;
  color: #856404;
  padding: 12px 15px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  margin-bottom: 15px;
}

.validation-message i {
  font-size: 18px;
}

/* Inner Buttons */
.webtraffic-form .inner-button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.webtraffic-form .inner-button a {
  display: block;
  text-align: center;
  padding: 10px 16px;
  background: #338bd9;
  color: white;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
  cursor: pointer;
}

.webtraffic-form .inner-button a:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.webtraffic-form #add-to-cart-btn {
  background: #fde68a;
  color: #5b4ef7;
  box-shadow: 0 16px 26px rgba(17, 24, 39, 0.12);
}

.webtraffic-form #add-to-cart-btn:hover {
  background: #fcd34d;
  box-shadow: 0 18px 30px rgba(17, 24, 39, 0.16);
}

.webtraffic-form #buy-now-btn {
  background: #5b4ef7;
  color: #ffffff;
  box-shadow: 0 16px 26px rgba(17, 24, 39, 0.14);
}

.webtraffic-form #buy-now-btn:hover {
  background: #4f46e5;
  box-shadow: 0 18px 30px rgba(17, 24, 39, 0.18);
}

.webtraffic-form #buy-now-btn::after {
  content: "\2192";
  margin-left: 12px;
  font-weight: 900;
}

/* Disabled Buttons */
.webtraffic-form .inner-button a.disabled,
.webtraffic-form #add-to-cart-btn.disabled,
.webtraffic-form #buy-now-btn.disabled {
  background: #e0e0e0 !important;
  color: #999 !important;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
  opacity: 0.6;
}

.webtraffic-form .inner-button a.loading {
  pointer-events: none;
  opacity: 0.8;
}

@media (max-width: 520px) {
  .webtraffic-form .cart-section {
    padding-left: calc(50vw - 50% + 16px);
    padding-right: calc(50vw - 50% + 16px);
  }

  .webtraffic-form .cart-bar {
    flex-wrap: wrap;
    align-items: stretch;
    padding-left: 0;
    padding-right: 0;
  }

  .webtraffic-form #responses-div.cart-status {
    order: 2;
    flex: 1 1 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 14px;
    padding: 12px 14px;
  }
}

.webtraffic-form #responses-div .error-message {
  color: #f44336;
  background: #ffebee;
  padding: 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* =====================================================
   TOAST NOTIFICATIONS
   ===================================================== */
.webtraffic-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background: white;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 9999;
  transform: translateX(400px);
  opacity: 0;
  transition: all 0.3s ease;
  min-width: 250px;
  max-width: 400px;
}

.webtraffic-toast.show {
  transform: translateX(0);
  opacity: 1;
}

.webtraffic-toast.success {
  border-left: 4px solid #338bd9;
}

.webtraffic-toast.success i {
  color: #338bd9;
  font-size: 20px;
}

.webtraffic-toast.error {
  border-left: 4px solid #f44336;
}

.webtraffic-toast.error i {
  color: #f44336;
  font-size: 20px;
}

.webtraffic-toast span {
  flex: 1;
  color: #333;
  font-weight: 500;
  font-size: 14px;
}

/* Cart Bounce Animation */
@keyframes bounce {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.webtraffic-form #cart.bounce {
  animation: bounce 0.6s ease;
}

/* =====================================================
   MISC & UTILITIES
   ===================================================== */
.webtraffic-form .details-block {
  margin-top: 10px;
}

.webtraffic-form .website-preview {
  padding: 15px;
  background: #f1f8f4;
  border-radius: 8px;
  margin-top: 10px;
  border-left: 4px solid #338bd9;
}

.webtraffic-error {
  padding: 15px;
  background: #ffebee;
  color: #c62828;
  border-radius: 8px;
  margin: 20px 0;
}

/* =====================================================
   RESPONSIVE DESIGN
   ===================================================== */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: clip;
    max-width: 100%;
  }

  .webtraffic-form,
  .webtraffic-form .webtraffic-progress-header,
  .webtraffic-form .wt-proof-row,
  .webtraffic-form .service-section-title {
    max-width: 100%;
    min-width: 0;
  }

  .webtraffic-progress-bar {
    --wt-progress-step-gap: 48px;
  }
  .webtraffic-progress-container {
    max-width: 100%;
    width: 100%;
    padding: 12px 0;
  }

  .webtraffic-form {
    padding: 20px 15px 0;
  }

  /* Keep 4-up service cards until mobile; don't collapse at 768px */

  .webtraffic-form .services.service-cards {
    padding: 0px;
    gap: 12px;
  }
  .webtraffic-form .info .type {
    font-size: 14px;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .section-footer {
    flex-direction: column;
  }

  .btn-next-step,
  .btn-prev-step {
    width: 100%;
    justify-content: center;
  }

  .btn-next-step {
    margin-left: 0;
    order: 1;
  }

  .btn-prev-step {
    order: 2;
  }

  .platform-options-grid,
  .device-options-grid,
  .options-grid {
    display: flex;
    flex-wrap: wrap;
  }

  .visitor-count-presets {
    margin-bottom: 20px;
  }

  .steps-completion-status {
    justify-content: center;
  }

  .summary-row {
    flex-direction: column;
    gap: 5px;
  }

  .summary-value {
    max-width: 100%;
    text-align: left;
  }

  .subtotal-row {
    flex-direction: row;
  }
  .platform-option .option-name,
  .device-option .option-name,
  .platform-suboption .option-name {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .webtraffic-progress-bar {
    --wt-progress-step-gap: 42px;
  }
  .webtraffic-progress-container {
    max-width: 250px;
    padding: 10px 14px 10px;
  }

  .options-grid {
    gap: 10px;
  }

  .platform-option,
  .device-option {
    flex: 1 1 calc(50% - 10px);
    padding: 10px 40px 10px 12px;
  }

  .webtraffic-form .platform-option.platform-option--has-new-badge {
    padding-right: 44px !important;
  }

  .platform-option i,
  .device-option i,
  .platform-option .option-icon,
  .device-option .option-icon {
    font-size: 14px;
  }

  .visitor-count-presets {
    margin-bottom: 20px;
  }

  .visitor-count-option {
    padding: 10px 12px !important;
  }

  .selected-country-tag {
    font-size: 12px;
    padding: 6px 10px;
  }

  .completion-item {
    font-size: 11px;
  }

  .completion-item span {
    display: none;
  }
}

@media (max-width: 360px) {
  .webtraffic-progress-bar {
    --wt-progress-step-gap: 36px;
  }
  .webtraffic-progress-container {
    max-width: 220px;
    padding: 8px 10px 10px;
  }
}

/* Optional: Add container padding for very large screens */
@media (min-width: 1920px) {
  .webtraffic-form {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* =====================================================
   CART / CHECKOUT: Selection details (compact)
   ===================================================== */

/* Per-section rows (GEO / Platform / Device, …) open the same popover UI as before. */
.wt-cart-selection {
  display: block;
  margin-top: 0px;
  position: relative;
  overflow: visible;
}

/* Themes often set `i { font-family: inherit }`, which hides FA glyphs unless overridden. */
.wt-cart-selection i.fa-solid,
.wt-cart-selection i.fas,
.wt-cart-popover i.fa-solid,
.wt-cart-popover i.fas {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased;
}

.wt-cart-selection i.fa-brands,
.wt-cart-selection i.fab,
.wt-cart-popover i.fa-brands,
.wt-cart-popover i.fab {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased;
}

.wt-cart-selection__triggers {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  margin-top: 6px;
}

.wt-cart-selection__open {
  appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  color: var(--hec-primary) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  text-align: left !important;
}

.wt-cart-selection__open--row {
  width: 100%;
  max-width: 100%;
}

/* Bordered row tiles (checkout / cart line — matches service-card icon style) */
.wt-cart-selection__open--checkout-tile {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-sizing: border-box !important;
  color: #1f2937 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* Per-row accent borders (GEO / Platform / Device) */
.wt-cart-selection__open--checkout-tile.wt-cart-selection__open--section-geo {
  border-color: #3b82f6 !important;
}

.wt-cart-selection__open--checkout-tile.wt-cart-selection__open--section-geo:hover {
  border-color: #2563eb !important;
  text-decoration: none !important;
}

.wt-cart-selection__open--checkout-tile.wt-cart-selection__open--section-platforms {
  border-color: #8b5cf6 !important;
}

.wt-cart-selection__open--checkout-tile.wt-cart-selection__open--section-platforms:hover {
  border-color: #7c3aed !important;
  text-decoration: none !important;
}

.wt-cart-selection__open--checkout-tile.wt-cart-selection__open--section-devices {
  border-color: #f59e0b !important;
}

.wt-cart-selection__open--checkout-tile.wt-cart-selection__open--section-devices:hover {
  border-color: #d97706 !important;
  text-decoration: none !important;
}

.wt-cart-selection__open--checkout-tile:hover {
  text-decoration: none !important;
}

.wt-cart-selection__open--checkout-tile:hover .wt-cart-selection__label,
.wt-cart-selection__open--checkout-tile:hover .wt-cart-selection__value {
  text-decoration: none !important;
  color: #1f2937 !important;
}

.wt-cart-selection__row-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--hec-primary, #5b4beb);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(91, 75, 235, 0.18);
}

.wt-cart-selection__open--section-geo .wt-cart-selection__row-icon {
  background: linear-gradient(145deg, #60a5fa 0%, #3b82f6 100%);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.wt-cart-selection__open--section-platforms .wt-cart-selection__row-icon {
  background: linear-gradient(145deg, #a78bfa 0%, #8b5cf6 100%);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.wt-cart-selection__open--section-devices .wt-cart-selection__row-icon {
  background: linear-gradient(145deg, #fbbf24 0%, #f59e0b 100%);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}

.wt-cart-selection__row-icon i {
  font-size: 18px;
  line-height: 1;
  color: inherit !important;
}

.wt-cart-selection__row-icon .wt-cart-selection__icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.wt-cart-selection__row-icon .wt-cart-selection__icon-emoji {
  font-size: 18px;
  line-height: 1;
}

.wt-cart-selection__open--checkout-tile .wt-cart-selection__open-inner {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
}

.wt-cart-selection__open-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  line-height: 1.35;
  column-gap: 6px;
  row-gap: 2px;
}

.wt-cart-selection__trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 2px;
  color: inherit;
}

.wt-cart-selection__trigger-icon i {
  font-size: 15px;
  line-height: 1;
  opacity: 0.92;
}

.wt-cart-selection__trigger-icon .wt-cart-selection__icon-img {
  display: block;
}

.wt-cart-selection__th-wrap {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
}

.wt-cart-selection__th-wrap i {
  font-size: 13px;
  line-height: 1.35;
  margin-top: 2px;
  opacity: 0.88;
  flex-shrink: 0;
}

.wt-cart-selection__th-text {
  font-weight: inherit;
  min-width: 0;
}

.wt-cart-selection__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

.wt-cart-selection__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.wt-cart-selection__pill i {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.9;
}

.wt-cart-selection__pill .wt-cart-selection__icon-img {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  object-fit: contain;
  vertical-align: middle;
}

.wt-cart-selection__pill .wt-cart-selection__icon-emoji {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
}

.wt-cart-selection__pill-text {
  word-break: break-word;
}

/* Checkout Platforms popover — keyword pills (AI bulb / user keyboard; no search icon). */
.wt-cart-selection__pills--keywords .wt-cart-selection__kw-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
}

.wt-cart-selection__pill--keyword-ai .wt-cart-selection__kw-icon {
  background: rgba(245, 158, 11, 0.16);
  color: #e0a053;
}

.wt-cart-selection__pill--keyword-ai .wt-cart-selection__kw-icon i {
  color: #e0a053;
}

.wt-cart-selection__pill--keyword-user .wt-cart-selection__kw-icon {
  background: rgba(100, 116, 139, 0.14);
  color: #475569;
}

.wt-cart-selection__pill--keyword-user .wt-cart-selection__kw-icon i {
  color: #475569;
}

.wt-cart-selection__referral-val {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
}

.wt-cart-selection__referral-val .wt-cart-selection__pill-text {
  min-width: 0;
}

.wt-cart-selection__open:hover {
  text-decoration: underline !important;
}

.wt-cart-selection__open:hover .wt-cart-selection__label,
.wt-cart-selection__open:hover .wt-cart-selection__value {
  text-decoration: underline !important;
}

.wt-cart-selection__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  white-space: normal;
  text-overflow: clip;
  overflow: visible;
}

.wt-cart-selection__part {
  white-space: nowrap; /* keep "Platforms: 2" together */
}

.wt-cart-selection__sep {
  color: var(--hec-muted);
  font-weight: 800;
  padding: 0 2px;
}

.wt-cart-selection__label {
  font-weight: 600;
}

.wt-cart-selection__value {
  font-weight: 600;
}

/* Popover (in-cart small popup) */
.wt-cart-popover {
  /* Position is controlled by JS when open (ported to body). */
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  min-width: 240px;
  width: min(360px, calc(100vw - 32px));
  max-width: 360px;
  background: #ffffff;
  border: 1px solid #e7e9ee;
  border-radius: 14px;
  box-shadow: 0 18px 30px rgba(17, 24, 39, 0.12);
}

.wt-cart-popover::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 18px;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-left: 1px solid #e7e9ee;
  border-top: 1px solid #e7e9ee;
  transform: rotate(45deg);
}

/* When opening above the trigger, flip the arrow to point down. */
.wt-cart-popover.wt-cart-popover--top::before {
  top: auto;
  bottom: -6px;
  transform: rotate(225deg);
}

.wt-cart-popover[hidden] {
  display: none;
}

.wt-cart-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 6px;
  border-bottom: 0;
}

.wt-cart-popover__title {
  font-weight: 900;
  color: #111827;
  font-size: 13px;
}

/* Match checkout order table remove (×) control — hello-elementor-child checkout.css */
.wt-cart-popover__close {
  all: unset !important;
  appearance: none !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border: 1px solid rgba(220, 38, 38, 0.25) !important;
  background: rgba(254, 226, 226, 0.95) !important;
  box-shadow: 0 6px 14px rgba(17, 24, 39, 0.12) !important;
  outline: none !important;
  color: #dc2626 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}

.wt-cart-popover__close:hover {
  background: rgba(254, 226, 226, 1) !important;
  border-color: rgba(220, 38, 38, 0.35) !important;
  color: #dc2626 !important;
}

.wt-cart-popover__close:active {
  transform: scale(0.98) !important;
}

.wt-cart-popover__close:focus-visible {
  box-shadow:
    0 0 0 4px rgba(84, 72, 240, 0.12),
    0 6px 14px rgba(17, 24, 39, 0.12) !important;
}

.wt-cart-popover__body {
  padding: 6px 12px 10px;
  max-height: min(320px, 50vh);
  overflow: auto;
}

.wt-cart-selection__panel {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--hec-border);
  border-radius: 10px;
  background: var(--hec-bg);
}

.wt-cart-selection__table {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
  border: 0 !important;
}

.wt-cart-selection__th {
  width: 112px !important;
  padding: 8px 10px 8px 0 !important;
  vertical-align: top !important;
  text-align: left !important;
  color: var(--hec-muted) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.wt-cart-selection__td {
  padding: 8px 0 8px 12px !important;
  vertical-align: top !important;
  border: 0 !important;
  color: var(--hec-text) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  word-break: break-word !important;
}

/* Same breakpoint as hello-elementor-child checkout order summary (narrow phones). */
@media (max-width: 520px) {
  .wt-cart-selection__open-inner {
    flex-wrap: nowrap !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
  }

  .wt-cart-selection__triggers {
    gap: 4px !important;
  }

  .wt-cart-selection__label {
    line-height: 1.25 !important;
  }

  /* Themes often set nowrap on .product-details; allow stacked trigger rows on cart + checkout. */
  .product-details .wt-cart-selection,
  .checkout-cart-row-group .wt-cart-selection {
    white-space: normal !important;
  }
}

@media (max-width: 480px) {
  .wt-cart-selection {
    margin-top: 5px;
  }

  .wt-cart-selection__triggers {
    margin-top: 5px;
    gap: 1px;
  }

  .wt-cart-selection__open {
    font-size: 12px;
  }

  .wt-cart-selection__panel {
    padding: 8px 10px;
  }

  .wt-cart-popover {
    width: calc(100vw - 24px);
    max-width: none;
  }

  .wt-cart-selection__title {
    min-height: 0;
    gap: 4px;
  }

  .wt-cart-selection__sep {
    display: none;
  }

  .wt-cart-selection__th {
    width: 86px;
    font-size: 11px;
  }

  .wt-cart-selection__td {
    font-size: 12px;
  }
}

/* Homepage: options already in basket (cart sync) */
.website-section .wt-pill-suffix .wt-website-in-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 2px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.14);
  color: #16a34a;
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
  pointer-events: none;
}

.wt-option-in-cart {
  box-shadow: inset 0 0 0 2px rgba(34, 197, 94, 0.35);
}

/* Cart marker on the left — keeps the right-side selection checkmark clear */
.webtraffic-form .platform-option.wt-option-in-cart,
.webtraffic-form .platform-suboption.wt-option-in-cart,
.webtraffic-form .device-option.wt-option-in-cart,
.webtraffic-form .visitor-count-option.wt-option-in-cart,
.webtraffic-form .geo-target-btn.wt-option-in-cart {
  padding-left: 36px !important;
}

.webtraffic-form .platform-option.wt-option-in-cart::before,
.webtraffic-form .platform-suboption.wt-option-in-cart::before,
.webtraffic-form .device-option.wt-option-in-cart::before,
.webtraffic-form .visitor-count-option.wt-option-in-cart::before,
.webtraffic-form .geo-target-btn.wt-option-in-cart::before,
.webtraffic-form .geo-country-pill.wt-option-in-cart::before,
.webtraffic-form .geo-region-btn.wt-option-in-cart::before {
  content: "\f07a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.16);
  color: #16a34a;
  font-size: 10px;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}

/* If a region is both active and in-cart, offset the active check so it doesn't overlap the cart icon */
.webtraffic-form .geo-region-btn.wt-option-in-cart.is-active::after {
  left: 36px;
}

.webtraffic-form .geo-country-pill.wt-option-in-cart.is-selected::before {
  background: rgba(34, 197, 94, 0.16);
  color: #16a34a;
}

/* Keyword chips in basket */
.webtraffic-form .wt-tag.wt-option-in-cart {
  position: relative;
  padding-left: 26px !important;
  box-shadow: inset 0 0 0 2px rgba(34, 197, 94, 0.35);
}

.webtraffic-form .wt-tag.wt-option-in-cart::before {
  content: "\f07a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.16);
  color: #16a34a;
  font-size: 8px;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}

.webtraffic-form .wt-tag.wt-option-in-cart.is-ai::before {
  color: #16a34a;
}

/* Referral URL already in basket */
.webtraffic-form #platform-referral-link.wt-option-in-cart {
  padding-left: 36px !important;
  background-image: none;
  box-shadow: inset 0 0 0 2px rgba(34, 197, 94, 0.35);
}

.webtraffic-form
  .platform-suboption-group[data-platform="referral"]
  .manual-count-input {
  position: relative;
}

.webtraffic-form
  .platform-suboption-group[data-platform="referral"]
  .manual-count-input:has(#platform-referral-link.wt-option-in-cart)::before {
  content: "\f07a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.16);
  color: #16a34a;
  font-size: 10px;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}