/* Standalone styles for /demo_smart_banner/ — self-contained ad-format demo page.
   Not part of the main site design system (no site.css / inner.css). */

:root { --clickio-red:#dd4242; --ink:#2b2f38; }

*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:#fff; -webkit-font-smoothing:antialiased;
}
img { display:block; max-width:100%; }

/* ---- Top bar: back link + device switcher ---- */
.demo-topbar {
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:108px; padding:24px 16px; background:#fff;
}
.demo-back {
  position:absolute; left:36px; top:0; bottom:0; margin:auto;
  display:flex; align-items:center; height:36px; z-index:5;
}
.demo-back img { width:36px; height:36px; }
.demo-tabs { display:flex; align-items:center; justify-content:center; gap:24px; }
.demo-tab { width:60px; height:60px; padding:0; border:0; background:none; position:relative; }
.demo-tab:not(.is-active) { cursor:pointer; }
.demo-tab img { width:60px; height:60px; }
.demo-tab .icon-active { display:none; }
.demo-tab.is-active .icon-active { display:block; }
.demo-tab.is-active .icon-inactive { display:none; }

/* ---- Mockup stage (device previews) ---- */
.demo-stage { background:#fff; padding:0 0 8px; }
.demo-mockup { display:none; margin:0 auto; }
.demo-mockup img { width:100%; margin:0 auto; }
.demo-mockup--desktop img { max-width:1425px; }
.demo-mockup--mobile img { max-width:420px; }
body[data-device="desktop"] .demo-mockup--desktop { display:block; }
body[data-device="mobile"]  .demo-mockup--mobile  { display:block; }

@media (max-width:960px) {
  .demo-tab--desktop { display:none; }
  .demo-mockup--desktop { display:none !important; }
  .demo-mockup--mobile  { display:block !important; }
}

/* ---- Footer CTA ---- */
.demo-cta {
  background-image:linear-gradient(272.88deg,#cf3a41 3%,#341f71 86%,#300957 100%);
  color:#fff; text-align:center; padding:56px 20px;
}
.demo-cta h2 { margin:0 0 28px; font-size:45px; font-weight:800; line-height:1.15; }
.demo-cta__actions { display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; }
.demo-cta__or { font-size:16px; font-weight:500; }
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:213px; height:55px; padding:0 24px; border-radius:30px;
  font-size:14px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  text-decoration:none; color:#fff; transition:opacity .15s;
}
.btn:hover { opacity:.9; }
.btn--primary { background:var(--clickio-red); border:1px solid transparent; }
.btn--ghost { background:transparent; border:1px solid #fff; }

@media (max-width:600px) {
  .demo-back { left:16px; }
  .demo-cta h2 { font-size:32px; }
  .demo-cta__actions { flex-direction:column; gap:14px; }
  .btn { width:100%; max-width:320px; }
}