/* ============================================================
   Ad Spend vs. Organic — Comparison Tool Styles
   Drop-in: <link rel="stylesheet" href="adcompare.css">
   Namespace: .adc-wrap (all rules scoped here)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
.adc-wrap {
  --adc-bg:          #ee305e;
  --adc-surface:     rgba(255,255,255,0.12);
  --adc-surface2:    rgba(255,255,255,0.18);
  --adc-border:      rgba(255,255,255,0.18);
  --adc-text:        #ffffff;
  --adc-muted:       rgba(255,255,255,0.65);
  --adc-paid:        #ffd166;
  --adc-paid-bg:     rgba(255,209,102,0.15);
  --adc-paid-border: rgba(255,209,102,0.45);
  --adc-seo:         #a8eddf;
  --adc-seo-bg:      rgba(168,237,223,0.12);
  --adc-seo-border:  rgba(168,237,223,0.4);
  --adc-radius:      12px;
  --adc-font:        'DM Sans', system-ui, sans-serif;
  --adc-mono:        'DM Mono', monospace;
  font-family: var(--adc-font);
  color: var(--adc-text);
}

/* ── Shell ─────────────────────────────────────────────────── */
.adc-wrap {
  background: var(--adc-bg);
  /*
  border-radius: 20px;
  max-width: 860px;
  */
  margin: 50px auto;
  overflow: hidden;
  box-shadow: 0 8px 48px rgba(0,0,0,0.4);
}

/* ── Header ────────────────────────────────────────────────── */
.adc-header {
  padding: 36px 40px 28px;
  border-bottom: 1px solid var(--adc-border);
}

.adc-header-tag {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--adc-muted);
  margin-bottom: 10px;
}

.adc-header h2 {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.2;
  color: var(--adc-text);
}

.adc-header p {
  font-size: 14px;
  color: var(--adc-muted);
  margin: 0;
  line-height: 1.6;
  max-width: 540px;
}

/* ── Inputs ────────────────────────────────────────────────── */
.adc-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  padding: 28px 40px;
  border-bottom: 1px solid var(--adc-border);
  background: var(--adc-surface);
}

.adc-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.adc-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--adc-muted);
}

.adc-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.adc-input-symbol {
  position: absolute;
  left: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--adc-muted);
  pointer-events: none;
  font-family: var(--adc-mono);
}

.adc-input-symbol.right {
  left: auto;
  right: 14px;
}

.adc-input {
  width: 100%;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid var(--adc-border);
  border-radius: 8px;
  padding: 11px 14px 11px 28px;
  font-family: var(--adc-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--adc-text);
  transition: border-color 0.18s;
  outline: none;
  -moz-appearance: textfield;
}

.adc-input::-webkit-inner-spin-button,
.adc-input::-webkit-outer-spin-button { -webkit-appearance: none; }

.adc-input.right-sym { padding-left: 14px; padding-right: 28px; }

.adc-input::placeholder { color: rgba(255,255,255,0.4); }

.adc-input:focus { border-color: var(--adc-seo); }

.adc-hint {
  font-size: 11px;
  color: var(--adc-muted);
  line-height: 1.4;
  opacity: 0.7;
}

/* ── Results ───────────────────────────────────────────────── */
.adc-results {
  padding: 28px 40px;
  border-bottom: 1px solid var(--adc-border);
}

.adc-results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.adc-card {
  border-radius: var(--adc-radius);
  padding: 20px 22px;
  border: 1.5px solid var(--adc-border);
  background: var(--adc-surface);
}

.adc-card.paid  { border-color: var(--adc-paid-border);  background: var(--adc-paid-bg);  }
.adc-card.seo   { border-color: var(--adc-seo-border);   background: var(--adc-seo-bg);   }

.adc-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.adc-card-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.adc-card.paid .adc-card-dot { background: var(--adc-paid); }
.adc-card.seo  .adc-card-dot { background: var(--adc-seo);  }

.adc-card-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--adc-muted);
}

.adc-card.paid .adc-card-title { color: var(--adc-paid); }
.adc-card.seo  .adc-card-title { color: var(--adc-seo);  }

.adc-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--adc-border);
}

.adc-stat-row:last-child { border-bottom: none; }

.adc-stat-row--highlight {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,0.1);
  border-bottom: none;
}

.adc-stat-row--highlight .adc-stat-label {
  font-weight: 600;
  color: var(--adc-text);
}

.adc-stat-row--muted {
  border-bottom: none;
  opacity: 0.45;
}

.adc-stat-label {
  font-size: 13px;
  color: var(--adc-muted);
}

.adc-stat-val {
  font-family: var(--adc-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--adc-text);
}

.adc-stat-val.highlight-paid { color: var(--adc-paid); font-weight: 700; }
.adc-stat-val.highlight-seo  { color: var(--adc-seo);  font-weight: 700; }

/* ── Chart ─────────────────────────────────────────────────── */
.adc-chart-wrap {
  padding: 28px 40px;
  border-bottom: 1px solid var(--adc-border);
}

.adc-chart-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--adc-muted);
  margin-bottom: 16px;
}

.adc-canvas-wrap {
  position: relative;
  width: 100%;
}

.adc-canvas-wrap canvas {
  width: 100% !important;
  height: auto !important;
  display: block;
}

.adc-chart-legend {
  display: flex;
  gap: 20px;
  margin-top: 14px;
}

.adc-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--adc-muted);
}

.adc-legend-line {
  width: 20px;
  height: 3px;
  border-radius: 99px;
}

.adc-legend-line.paid { background: #ffd166; }
.adc-legend-line.seo  { background: #a8eddf; }

/* ── Recommendation ────────────────────────────────────────── */
.adc-recommendation {
  padding: 28px 40px;
}

.adc-rec-box {
  background: var(--adc-surface);
  border-radius: var(--adc-radius);
  padding: 22px 24px;
  border: 1.5px solid var(--adc-border);
}

.adc-rec-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--adc-seo);
  margin-bottom: 8px;
}

.adc-rec-text {
  font-size: 14px;
  color: var(--adc-text);
  line-height: 1.7;
  margin: 0 0 16px;
}

.adc-rec-cta {
  display: inline-block;
  padding: 10px 22px;
  background: #ffffff;
  color: #ee305e;
  font-family: var(--adc-font);
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
}

.adc-rec-cta:hover {
  background: rgba(255,255,255,0.85);
  color: #ee305e;
}

/* ── Empty state ───────────────────────────────────────────── */
.adc-empty {
  text-align: center;
  padding: 48px 40px;
  color: var(--adc-muted);
  font-size: 14px;
  line-height: 1.6;
}

.adc-empty-icon {
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.4;
}

/* ── Disclaimer ────────────────────────────────────────────── */
.adc-disclaimer {
  font-size: 11px;
  color: var(--adc-muted);
  line-height: 1.6;
  padding: 0 40px 28px;
  opacity: 0.6;
}

@media (max-width: 640px) {
  .adc-disclaimer { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 640px) {
  .adc-header,
  .adc-inputs,
  .adc-results,
  .adc-chart-wrap,
  .adc-recommendation { padding-left: 20px; padding-right: 20px; }

  .adc-header h2 { font-size: 20px; }
  .adc-inputs { grid-template-columns: 1fr; }
  .adc-results-grid { grid-template-columns: 1fr; }
}