/* wa-bridge.css — стилевой мост под оформление сайта (deepseek/deepseek-v4-pro). Не редактировать руками. */
:root {
  --bg-dark: #f2efef;
  --bg-dark-2: #e9e9e9;
  --bg-card: #ffffff;
  --text-white: #747474;
  --text-muted: #bfbfbf;
  --border: #e0dede;
  --accent: #1e5f3a;
}

.wa-embed {
  font-family: Ubuntu, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-white);
  background: #ffffff;
  max-width: 100%;
  box-sizing: border-box;
}

.wa-embed *,
.wa-embed *::before,
.wa-embed *::after {
  box-sizing: inherit;
}

/* --- Typography --- */
.wa-embed h1,
.wa-embed h2,
.wa-embed h3,
.wa-embed h4,
.wa-embed h5,
.wa-embed h6 {
  color: #333333;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.5em;
}

.wa-embed h1 {
  font-size: clamp(24px, 5vw, 28px);
}

.wa-embed h2 {
  font-size: 20px;
  margin-top: 24px;
}

.wa-embed h3 {
  font-size: 16px;
  margin-top: 20px;
}

.wa-embed p {
  margin: 0 0 16px;
}

.wa-embed a {
  color: #333333;
  text-decoration: underline;
}

.wa-embed a:hover {
  color: var(--accent);
  text-decoration: none;
}

/* --- Hero / Intro (compact for mobile) --- */
.wa-embed .hero,
.wa-embed [class*="hero"] {
  padding: 12px;
  background: var(--bg-dark);
  border-bottom: 1px solid var(--border);
}

.wa-embed .hero h1 {
  margin-bottom: 8px;
}

.wa-embed .hero p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 12px;
}

/* --- Cards (operator list) --- */
.wa-embed .operator-list,
.wa-embed [class*="operator"] {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  padding: 0;
  list-style: none;
}

.wa-embed .card,
.wa-embed [class*="card"] {
  flex: 1 1 280px;
  max-width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wa-embed .card img,
.wa-embed .card svg {
  max-width: 120px;
  height: auto;
  margin-bottom: 12px;
}

.wa-embed .card .rating {
  font-size: 18px;
  font-weight: 700;
  color: #333333;
  margin-bottom: 4px;
}

.wa-embed .card .offer {
  font-size: 14px;
  color: var(--text-muted);
  margin: 8px 0;
}

.wa-embed .card .terms {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* --- CTA buttons (host style) --- */
.wa-embed .cta,
.wa-embed .cta-button,
.wa-embed a.cta,
.wa-embed [class*="cta"] {
  display: inline-block;
  background: var(--accent);
  color: #ffffff;
  text-decoration: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  padding: 10px 20px;
  border-radius: 4px;
  border: none;
  margin-top: auto;
  transition: background 0.2s;
}

.wa-embed .cta:hover,
.wa-embed .cta-button:hover,
.wa-embed a.cta:hover,
.wa-embed [class*="cta"]:hover {
  background: #164d2e;
  color: #ffffff;
}

/* --- Stat tiles --- */
.wa-embed .stat-tile,
.wa-embed [class*="stat"] {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 16px;
  text-align: center;
  border-radius: 0;
}

/* --- Tables --- */
.wa-embed table,
.wa-embed .comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  border: 1px solid var(--border);
}

.wa-embed th,
.wa-embed td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  font-size: 14px;
  text-align: left;
}

.wa-embed th {
  background: var(--bg-dark);
  color: #333333;
  font-weight: 700;
}

/* --- FAQ --- */
.wa-embed .faq dt {
  font-weight: 700;
  color: #333333;
  margin-top: 16px;
  cursor: pointer;
}

.wa-embed .faq dd {
  margin: 4px 0 16px 0;
  color: var(--text-muted);
}

/* --- Legal block (muted, separated) --- */
.wa-embed .legal,
.wa-embed [class*="legal"] {
  border-top: 1px solid var(--border);
  margin-top: 40px;
  padding-top: 20px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.wa-embed .legal a,
.wa-embed [class*="legal"] a {
  color: var(--text-muted);
  text-decoration: underline;
}

.wa-embed .legal a:hover,
.wa-embed [class*="legal"] a:hover {
  color: #333333;
}

/* --- Images & media --- */
.wa-embed img,
.wa-embed svg {
  max-width: 100%;
  height: auto;
}

/* --- Responsive help (no fixed widths, no overflow) --- */
.wa-embed .comparison-table {
  overflow-x: auto;
  display: block;
}

.wa-embed .comparison-table table {
  min-width: 600px;
}

/* --- Ensure list starts within first screen (no extra margin/padding) --- */
.wa-embed .operator-list,
.wa-embed [class*="operator"] {
  margin-top: 12px;
}

/* --- Generic containers (prose sections) --- */
.wa-embed section,
.wa-embed .prose {
  padding: 12px 0;
}