/* The landing's own consent banner (step 3, 12.10). Legal conclusions section 3: reject as easy to see as accept on the first
   layer, nothing ticked in advance, no tag before a choice, a lasting "cookie settings" link.
   His picks after five sketch rounds (commit 59a5be9): "C לדסקטופ, למובייל B", "אפור לדחה ולבן לקבל", then the glass for reject ("1").
   - the material: the capability cards' black glass (material.css), a soft sheen at the top, the 1.2 edge catching the light at
     the top and gone towards the bottom; darker than a card's .55 (.86), since it floats over the page and the hero's white key
     smeared through it
   - phone: a card at the bottom, full width, the line, accept and reject side by side, settings a link under them
   - desktop: a slim bar at the bottom, up to 980 wide, the line on the side the text starts, the keys, settings and the X on the other
   - accept: the hero's light key (hero.css .btn-wa), lower; reject: the page's glass button (lang.css), the same size and shape
   - settings open inside the same banner, in its language (below)
   Lifted above the page's floating chat line when they would meet (banner.js). */
.ckb {
  --ckb-ink: #f4f4f5; --ckb-ink2: rgba(244,244,245,.72); --ckb-ink3: rgba(244,244,245,.5);
  --ckb-text: 'Assistant', "Secular One", sans-serif; --ckb-head: Karantina, "Secular One", sans-serif;
  position: fixed; z-index: 2147483000; box-sizing: border-box; isolation: isolate;
  inset-inline: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  margin-inline: auto; max-width: 420px; padding: 18px 18px 12px; border-radius: 22px;
  background: linear-gradient(172deg, rgba(255,255,255,.1), rgba(255,255,255,.03) 16%, rgba(255,255,255,0) 34%), #0b0c0e;
  box-shadow: 0 26px 50px -30px rgba(0,0,0,.75);
  /* 18.10: no blur, the ground solid in its own colour (~25 GPU points while shown, the look the same; his "אם זה עוזר לביצועים, מצוין") */
  color: var(--ckb-ink); font: 400 16px/1.5 var(--ckb-text); text-align: start;
  transition: opacity .3s ease, translate .35s cubic-bezier(.3,.7,.2,1), bottom .25s ease;
  animation: ckbIn .45s .25s cubic-bezier(.3,.7,.2,1) both;
}
.ckb::before {   /* the card's edge */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none; z-index: -1;
  background: linear-gradient(155deg, rgba(255,255,255,.62), rgba(255,255,255,.22) 30%, rgba(255,255,255,.05) 75%, rgba(255,255,255,0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.ckb[hidden] { display: none !important; }
.ckb.out { opacity: 0; translate: 0 18px; pointer-events: none; }
@keyframes ckbIn { from { opacity: 0; translate: 0 18px; } }
.ckb *, .ckb *::before, .ckb *::after { box-sizing: border-box; }

/* the X: closes without consent, nothing loads */
.ckb-x { position: absolute; top: 8px; inset-inline-end: 8px; width: 40px; height: 40px; border: 0; border-radius: 50%; padding: 0;
  display: grid; place-items: center; background: none; color: var(--ckb-ink3); cursor: pointer; transition: color .2s ease; }
.ckb-x svg { width: 15px; height: 15px; }
.ckb-x:hover { color: var(--ckb-ink); }

/* the line */
.ckb-line { margin: 0; padding-inline-end: 34px; color: var(--ckb-ink); text-wrap: pretty; }
.ckb.nox .ckb-line { padding-inline-end: 0; }   /* the notice outside Europe has no X (decision 22) */
.ckb a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ckb a:hover { color: var(--ckb-ink); }

/* the keys */
.ckb-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.ckb-k {
  position: relative; isolation: isolate; flex: 1 1 0; min-width: 0; height: 44px; padding: 0 18px; border: 0; border-radius: 999px;
  cursor: pointer; font: 600 16px/1 var(--ckb-text); letter-spacing: .01em; transform: translateY(0);
  color: #22262b; text-shadow: 0 1px 0 rgba(255,255,255,.8);
  background: linear-gradient(180deg, #eceee9 0%, #d6d9d2 60%, #c3c7bf 100%);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.1), 0 3px 0 #9a9e96, 0 4px 0 #676b64, 0 10px 14px -8px rgba(0,0,0,.8);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease; -webkit-tap-highlight-color: transparent;
}
.ckb-k::before { content: ""; position: absolute; z-index: -1; top: 2px; left: 4px; right: 4px; bottom: 4px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, #ffffff 0%, #f6f7f4 55%, #eef0eb 100%); box-shadow: inset 0 1px 0 #fff, 0 1px 2px -1px rgba(0,0,0,.2); }
.ckb-k:hover { transform: translateY(1.5px);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.1), 0 1.5px 0 #9a9e96, 0 2.5px 0 #676b64, 0 8px 12px -8px rgba(0,0,0,.8); }
.ckb-k:active { transform: translateY(3px); transition-duration: .05s; box-shadow: inset 0 -1px 0 rgba(0,0,0,.1), 0 0 0 #9a9e96, 0 1px 0 #676b64, 0 4px 8px -6px rgba(0,0,0,.8); }
.ckb-k:active::before { background: linear-gradient(180deg, #eef0eb 0%, #e5e7e1 100%); box-shadow: inset 0 2px 3px rgba(0,0,0,.1); }
/* reject: the page's glass button */
.ckb-k.g { color: #f4f4f5; text-shadow: none; transform: none;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 50%, rgba(255,255,255,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36), inset 0 0 0 1px rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.6), 0 8px 18px -8px rgba(0,0,0,.95);
  }   /* 18.10: no blur over the banner's own solid ground */
.ckb-k.g::before { content: none; }
.ckb-k.g:hover { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08) 50%, rgba(255,255,255,.05)); }
.ckb-k.g:active { transform: scale(.98); }
.ckb-more { flex: 1 0 100%; padding: 6px 10px; border: 0; background: none; cursor: pointer; text-align: center;
  font: 400 13px/1.45 var(--ckb-text); color: var(--ckb-ink2); text-decoration: underline; text-underline-offset: 3px; }
.ckb-more:hover { color: var(--ckb-ink); }
.ckb :focus { outline: none; }
.ckb :focus-visible { outline: 2px solid #7fd8ff; outline-offset: 3px; }
.ckb-x:focus-visible { outline-offset: -6px; }

/* the settings (his "זה חייב להיות באותה שפה של הבנר שאישרתי"): inside the same banner, the same place and width; no title, a line
   in the banner's words; each kind its name in the keys' weight and a short note at the settings link's size; save is the white
   key, back is a link like settings; the switches in the keys' two colours, a white knob on a glass track, and when on the track
   takes the light key's face and the knob the dark of its words */
.ckb-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ckb-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: center; align-content: start; }
.ckb-row b { font-weight: 600; color: var(--ckb-ink); }
.ckb-row p { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.45; color: var(--ckb-ink2); text-wrap: pretty; }
.ckb-on { font-size: 13px; color: var(--ckb-ink2); }
.ckb-sw { position: relative; width: 44px; height: 26px; flex: none; }
.ckb-sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ckb-sw span { position: absolute; inset: 0; border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 50%, rgba(255,255,255,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.6);
  transition: background .2s ease; }
.ckb-sw span::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #eef0eb 100%); box-shadow: 0 1px 0 #9a9e96, 0 2px 3px rgba(0,0,0,.6);
  transition: inset-inline-start .2s cubic-bezier(.3,.7,.2,1), background .2s ease; }
.ckb-sw input:checked + span { background: linear-gradient(180deg, #eceee9 0%, #d6d9d2 100%); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.15); }
.ckb-sw input:checked + span::after { inset-inline-start: 21px; background: #22262b; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.ckb-sw input:focus-visible + span { outline: 2px solid #7fd8ff; outline-offset: 2px; }

/* the desktop: the slim bar; open settings, the same bar grows upwards, its kinds side by side, save and back where the keys were */
@media (min-width: 900px) {
  .ckb { inset-inline: 24px; max-width: 980px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); padding-block: 12px; padding-inline: 20px 12px; }
  .ckb:not(.set) { display: flex; align-items: center; gap: 24px; }
  .ckb:not(.set) .ckb-line { flex: 1; padding: 0; }
  .ckb .ckb-btns { flex-wrap: nowrap; align-items: center; gap: 10px; margin: 0; flex: none; }
  .ckb .ckb-k { flex: none; width: 140px; height: 40px; font-size: 15px; }
  .ckb .ckb-more { flex: none; }
  .ckb:not(.set) .ckb-x { position: static; flex: none; order: 3; }
  .ckb.set { padding-block: 14px 12px; }
  .ckb.set .ckb-x { top: 4px; inset-inline-end: 4px; }
  .ckb.set .ckb-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 28px; margin-top: 12px; }
  .ckb.set .ckb-btns { justify-content: flex-end; margin-top: 14px; }
  .ckb.set .ckb-k { width: auto; min-width: 140px; padding: 0 22px; }
}

/* a short "saved" line after a choice, in the same glass */
.ckb-toast { position: fixed; z-index: 2147483000; inset-inline: 0; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  margin-inline: auto; width: max-content; max-width: calc(100vw - 32px); padding: 10px 18px; border-radius: 999px;
  background: rgba(0,0,0,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: #f4f4f5;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  font: 400 13px/1.3 'Assistant', "Secular One", sans-serif; transition: opacity .35s ease; pointer-events: none; }
.ckb-toast.out { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .ckb, .ckb-toast, .ckb-k, .ckb-sw span, .ckb-sw span::after { animation: none; transition: none; }
}