/*
  CTA Stylesheet + 20 Ready-to-paste CTA templates for Bludit
  - Paste the <style> block once in your theme or page head.
  - Paste any of the HTML snippets below directly into page content.
  - Use matching custom field IDs (examples: cta_title, cta_message, cta_button_text, cta_button_url, feature_1, webinar_date, etc.)
  - All classes are namespaced and avoid IDs so you can use multiple instances without conflicts.
*/

:root{
  --cta-radius: 12px;
  --cta-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cta-color-ink: #0f1724;
  --cta-muted: #6b7280;
  --cta-transition: 180ms ease;
  --cta-shadow-sm: 0 6px 18px rgba(15,23,36,0.06);
  --cta-shadow-lg: 0 12px 40px rgba(2,6,23,0.12);

  --cta-primary-bg: #0056b3;
  --cta-primary-bg-strong: #004494;
  --cta-accent: #0b74ff;
  --cta-success: #10b981;
  --cta-cta-text: #ffffff;
  --cta-focus-ring: 3px solid rgba(11,116,255,0.18);
}

/* ====== Base CTA utilities ====== */
.cta { box-sizing: border-box; font-family: var(--cta-font); color: var(--cta-color-ink); margin: 20px auto; max-width: 980px; padding: 20px; border-radius: var(--cta-radius); text-align: center; }
.cta * { box-sizing: border-box; }

.cta__title { margin: 0 0 8px; font-weight: 700; line-height: 1.15; }
.cta__text { margin: 0 0 16px; color: var(--cta-muted); line-height: 1.5; }

/* ====== Button base (high-visibility) ====== */
.cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  min-width: 120px;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform var(--cta-transition), box-shadow var(--cta-transition), background-color var(--cta-transition), color var(--cta-transition);
  box-shadow: 0 6px 18px rgba(2,6,23,0.06);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cta__btn[role="button"], .cta__btn[role="link"] { outline: none; }

.cta__btn:focus {
  outline: none;
  box-shadow: 0 8px 28px rgba(11,116,255,0.14);
  border-radius: 10px;
}
.cta__btn:focus-visible {
  box-shadow: 0 8px 28px rgba(11,116,255,0.14);
  outline: var(--cta-focus-ring);
  outline-offset: 4px;
}

.cta__icon { width: 18px; height: 18px; display:inline-block; }

/* ====== High-contrast variants ====== */
.cta__btn--primary {
  background: var(--cta-primary-bg);
  color: var(--cta-cta-text);
  border: 1px solid rgba(0,0,0,0.06);
}
.cta__btn--primary:hover { background: var(--cta-primary-bg-strong); transform: translateY(-2px); }

.cta__btn--accent {
  background: var(--cta-accent);
  color: var(--cta-cta-text);
  border-radius: 999px;
}
.cta__btn--accent:hover { filter: brightness(.95); transform: translateY(-2px); }

.cta__btn--ghost {
  background: transparent;
  color: var(--cta-primary-bg);
  border: 2px solid var(--cta-primary-bg);
}
.cta__btn--ghost:hover { background: rgba(0,86,179,0.06); }

.cta__btn--success {
  background: var(--cta-success);
  color: var(--cta-cta-text);
}
.cta__btn--success:hover { filter: brightness(.95); }

.cta__btn--danger {
  background: #ef4444;
  color: #fff;
}
.cta__btn--danger:hover { filter: brightness(.95); }

.cta__btn--small { padding: 8px 12px; min-height: 36px; font-size: 14px; }
.cta__btn--block { display:block; width:100%; }

/* ====== Variant wrappers ====== */
.cta--primary { background: #f4f7f6; border: 2px solid #e6eef8; padding: 28px; box-shadow: var(--cta-shadow-sm); }
.cta--primary .cta__title { font-size: 22px; color: #07203a; }

.cta--gradient { background: linear-gradient(135deg,#0ea5e9 0%,#6366f1 100%); color: #fff; padding: 36px; box-shadow: var(--cta-shadow-lg); }
.cta--gradient .cta__title { font-size: 26px; }

.cta--glass { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(8px); color: #e6eef8; padding: 28px; }

.cta--split { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: center; background: #fff; border: 1px solid #eef2f7; padding: 22px; }

.cta--form { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; background: #f8fafc; padding: 18px; border-radius: 12px; border: 1px solid #e6eef8; }
.cta--form input[type="email"] { padding: 12px 14px; border-radius: 8px; border: 1px solid #d1d5db; min-width: 220px; }

.cta--trial { display:flex; gap:16px; align-items:center; padding:14px; border-radius:10px; background: linear-gradient(90deg,#f8fafc,#ffffff); border-left:6px solid var(--cta-success); }

.cta--compact { max-width: 360px; padding: 16px; border-radius: 10px; background: #ffffff; border: 1px solid #e6eef8; box-shadow: 0 6px 18px rgba(2,6,23,0.04); text-align:left; }

.cta--floating { position: relative; display:inline-block; }
.cta--floating .cta__float { position: fixed; right: 18px; bottom: 18px; z-index: 9999; box-shadow: 0 10px 30px rgba(2,6,23,0.18); border-radius: 999px; padding: 12px 18px; background: var(--cta-accent); color: #fff; font-weight:700; }

.cta--testimonial { background: linear-gradient(180deg,#ffffff,#f7fbff); border:1px solid #e6eef8; padding:20px; display:flex; gap:14px; align-items:center; }

.cta--pricing { display:grid; grid-template-columns: 1fr 1fr; gap:12px; align-items:center; padding:18px; border-radius:12px; background:#fff; border:1px solid #eef2f7; }

.cta--dev { background:#0f1724; color:#e6eef8; padding:22px; border-radius:12px; }

.cta--webinar { background: linear-gradient(90deg,#fff,#f3f7ff); border:1px solid #e6eef8; padding:20px; border-radius:12px; }

.cta--ebook { background:#fffaf6; border:1px solid #ffedd5; padding:18px; border-radius:12px; }

.cta--chat { background:#eef2ff; border:1px solid #dbeafe; padding:16px; border-radius:12px; display:flex; gap:12px; align-items:center; justify-content:space-between; }

.cta--footerbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; display:flex; justify-content:center; padding:12px 18px; background: linear-gradient(90deg,var(--cta-accent),#0b5bd6); color:#fff; }

.cta--spotlight { background: linear-gradient(135deg,#fff,#f0f9ff); padding:22px; border-radius:12px; border:1px solid #e6eef8; }

.cta--enterprise { background:#f7f9fc; border:1px solid #e6eef8; padding:24px; border-radius:12px; }

.cta--micro { display:inline-block; background:#fff; border:1px solid #eef2f7; padding:8px 12px; border-radius:999px; font-size:14px; }

.cta--onboard { background:#f8fafc; border:1px dashed #e6eef8; padding:18px; border-radius:12px; }

.cta--hero-large { display:grid; grid-template-columns: 1fr 360px; gap:24px; align-items:center; padding:36px; border-radius:16px; background: linear-gradient(180deg,#ffffff,#f7fbff); border:1px solid #e6eef8; }
.cta__illustration { max-width:100%; height:auto; border-radius:10px; }

@media (max-width: 820px) {
  .cta--split, .cta--hero-large, .cta--pricing { grid-template-columns: 1fr; text-align:center; }
  .cta--hero-large .cta__illustration { order: -1; margin-bottom:12px; }
  .cta { padding: 16px; margin: 12px; }
}

/* Utility helpers for multiple instances */
[data-cta-id] { }
.cta--floating + .cta--floating { transform: translateY(-80px); }
.cta--footerbar + .cta--footerbar { display:none; }