/* ===== Consent Banner – peruslayout ===== */
:root{
  --ckb-bg: #ffffff;
  --ckb-text: #2A2024;
  --ckb-primary: #D3B7AB;   /* Hyväksy kaikki + Modal Tallenna */
  --ckb-secondary: #E9DCD6; /* Vain välttämättömät */
  --ckb-link: #914e4a;      /* Mukauta / Peruuta */
  --ckb-btn-py: 15px;       /* yhtenäinen napin vertikaalipadding */
  --ckb-btn-px: 50px;       /* yhtenäinen napin horisontaalipadding */
}

#ckb-banner.ckb-wrap {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 2147483000;
  background: var(--ckb-bg);
  color: var(--ckb-text);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  border-radius: 16px;
  padding: 16px 20px;
  max-width: 980px;
  margin: 0 auto;
}
#ckb-banner p{ margin: 0; color: var(--ckb-text); }

#ckb-banner .ckb-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 12px;
  align-items: center; /* ✅ linkit ja napit keskitetty pystysuunnassa */
}

/* ===== Modal ===== */
#ckb-modal.ckb-modal {
  position: fixed; inset: 0;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45);
  z-index: 2147483001;
}
#ckb-modal .ckb-card{
  background: var(--ckb-bg);
  color: var(--ckb-text);
  width: min(680px, 92vw);
  border-radius: 14px; padding: 18px;
  box-shadow: 0 12px 32px rgba(0,0,0,.2);
}
#ckb-modal .ckb-row{
  display:flex; align-items:center; justify-content:space-between;
  border-top: 1px solid #EDE9E6; padding: 10px 0;
}
#ckb-modal .ckb-row:first-of-type{ border-top: 0; }

/* ✅ modaalin toimintonappirivi: pystykeskitys */
#ckb-modal .ckb-row-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  align-items:center;        /* linkki keskelle nappien kanssa */
  margin-top:12px;
}

/* ===== Nappien typografia ja mitoitus ===== */
.ckb-actions .ckb-btn,
.ckb-actions .elementor-button.ckb-primary,
.ckb-actions .elementor-button.ckb-secondary,
#ckb-modal .ckb-btn,
#ckb-modal .elementor-button.ckb-secondary,
#ckb-modal .elementor-button.ckb-link {
  font-family: var(--e-global-typography-accent-font-family, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  font-size: var(--e-global-typography-accent-font-size, 16px);
  font-weight: var(--e-global-typography-accent-font-weight, 600);
  text-transform: var(--e-global-typography-accent-text-transform, none);
  font-style: var(--e-global-typography-accent-font-style, normal);
  text-decoration: var(--e-global-typography-accent-text-decoration, none);
  line-height: var(--e-global-typography-accent-line-height, 1.2);
  letter-spacing: var(--e-global-typography-accent-letter-spacing, 0);
  word-spacing: var(--e-global-typography-accent-word-spacing, 0);
  border-style: solid;
  border-width: 1px;
  border-radius: 30px;
  padding: var(--ckb-btn-py) var(--ckb-btn-px);
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ===== Primary (Hyväksy kaikki + Modal Tallenna) ===== */
.ckb-actions .ckb-primary,
.ckb-actions .elementor-button.ckb-primary,
#ckb-modal .ckb-primary {
  background-color: var(--ckb-primary) !important;
  border-color: var(--ckb-primary) !important;
  color: #fff !important;
}
.ckb-actions .ckb-primary:hover,
.ckb-actions .ckb-primary:focus-visible,
.ckb-actions .elementor-button.ckb-primary:hover,
.ckb-actions .elementor-button.ckb-primary:focus-visible,
#ckb-modal .ckb-primary:hover,
#ckb-modal .ckb-primary:focus-visible {
  background-color: #fff !important;
  border-color: var(--ckb-primary) !important;
  color: var(--ckb-primary) !important;
  text-decoration: none !important;
}

/* ===== Secondary (Vain välttämättömät) ===== */
.ckb-actions .ckb-secondary,
.ckb-actions .elementor-button.ckb-secondary,
#ckb-modal .ckb-secondary {
  background-color: var(--ckb-secondary) !important;
  border-color: var(--ckb-secondary) !important;
  color: #fff !important;
}
.ckb-actions .ckb-secondary:hover,
.ckb-actions .ckb-secondary:focus-visible,
.ckb-actions .elementor-button.ckb-secondary:hover,
.ckb-actions .elementor-button.ckb-secondary:focus-visible,
#ckb-modal .ckb-secondary:hover,
#ckb-modal .ckb-secondary:focus-visible {
  background-color: #fff !important;
  border-color: var(--ckb-primary) !important;
  color: var(--ckb-primary) !important;
  text-decoration: none !important;
}

/* ===== “Mukauta” & “Peruuta” linkit – linjaus nappien kanssa ===== */
.ckb-actions .ckb-link,
#ckb-modal .ckb-link {
  background: transparent !important;
  border: none !important;
  color: var(--ckb-link) !important;
  border-radius: 0 !important;
  text-decoration: underline;
  display: inline-flex;          /* ✅ keskitys */
  align-items: center;           /* ✅ keskitys */
  padding: var(--ckb-btn-py) 0;  /* ✅ sama korkeus kuin napeilla (vain vertikaalipadding) */
}
.ckb-actions .ckb-link:hover,
.ckb-actions .ckb-link:focus-visible,
#ckb-modal .ckb-link:hover,
#ckb-modal .ckb-link:focus-visible {
  background: transparent !important;
  color: var(--ckb-link) !important;
  text-decoration: underline;
}

/* Footerin pelkkä linkki (ei nappi) */
.ckb-footer-link{
  color: var(--ckb-link) !important;
  text-decoration: underline;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;         /* footerissa EI kasvateta korkeutta */
  border-radius: 0 !important;
}
.ckb-footer-link:hover,
.ckb-footer-link:focus{
  color: var(--ckb-link) !important;
  text-decoration: underline;
  background: transparent !important;
}

/* ===== YouTube-gate ===== */
.yt-gate{
  position: relative;
  background: var(--ckb-bg);
  color: var(--ckb-text);
  border:1px dashed #EDE9E6;
  border-radius: 12px; padding: 20px; text-align:center;
}
.yt-gate .yt-btn{
  margin-top: 10px;
  background-color: var(--ckb-primary);
  border-color: var(--ckb-primary);
  color: #fff;
  border: 1px solid var(--ckb-primary);
  border-radius: 30px;
  padding: 12px 28px;
  cursor: pointer;
  transition: all .2s;
}
.yt-gate .yt-btn:hover,
.yt-gate .yt-btn:focus-visible{
  background: #fff;
  border-color: var(--ckb-primary);
  color: var(--ckb-primary);
}