/* ell-consent.css — animacja wejścia, okno zgody, kłódka i panel ustawień.
   Wzór: nps2g.com (animacja wejścia) i kudelski-lichtenberg.com (okno zgody, kłódka),
   kolory i kształty z palety ELL (ell-site.css). Markup okna buduje js/ell-consent.js. */

/* ── Animacja wejścia (tylko przed zgodą) ──────── */
#ell-loader{position:fixed;inset:0;z-index:9999;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;transition:opacity .4s ease,visibility .4s ease;animation:ell-out .4s 2.6s forwards}
@keyframes ell-out{to{opacity:0;visibility:hidden}}
#ell-loader.fade-out{opacity:0;visibility:hidden;pointer-events:none}
.ell-zgoda #ell-loader,.no-js #ell-loader{display:none}
.ell-rel{width:150px;height:150px;overflow:visible}
.ell-rel .orbit{fill:none;stroke:var(--sand-deep);stroke-width:.3}
.ell-rel .ring{fill:none;stroke-width:.55}
.ell-rel .ring-a{stroke:var(--forest)}
.ell-rel .ring-b{stroke:var(--clay)}
.ell-rel .lens{fill:var(--sage);transform-box:view-box;transform-origin:20px 20px;animation:ell-lens 2.4s ease-in-out infinite}
.ell-rel .spin{transform-box:view-box}
.ell-rel .spin-a{transform-origin:15px 20px;animation:ell-spin 3.2s linear infinite}
.ell-rel .spin-b{transform-origin:25px 20px;animation:ell-spin 4.1s linear infinite reverse}
.ell-rel .spin-o{transform-origin:20px 20px;animation:ell-spin 7s linear infinite}
.ell-rel .dot-a{fill:var(--forest)}
.ell-rel .dot-b{fill:var(--clay)}
.ell-rel .dot-o{fill:var(--sage)}
@keyframes ell-spin{to{transform:rotate(360deg)}}
@keyframes ell-lens{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.7;transform:scale(1.08)}}
.ell-loader-label{font:600 .72rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--forest);animation:ell-blink 1.8s ease-in-out infinite}
@keyframes ell-blink{0%,100%{opacity:.8}50%{opacity:.3}}
.ell-progress{width:150px;height:1px;background:var(--sand-deep);overflow:hidden;margin-top:-.4rem}
.ell-progress span{display:block;width:40%;height:100%;background:linear-gradient(90deg,transparent,var(--clay),transparent);animation:ell-sweep 1.8s ease-in-out infinite}
@keyframes ell-sweep{from{transform:translateX(-100%)}to{transform:translateX(350%)}}

/* ── Tło i okno zgody ──────────────────────────── */
/* Bez przyciemnienia i bez blokady: strona, telefon i numery kryzysowe są dostępne od razu */
#ell-cookie-overlay{position:fixed;left:0;right:0;bottom:0;z-index:9998;display:flex;justify-content:flex-end;padding:16px;pointer-events:none;animation:ell-fade .35s ease}
#ell-cookie-overlay.hidden{display:none}
@keyframes ell-fade{from{opacity:0}to{opacity:1}}
#ell-cookie-modal{background:var(--paper);border-top:3px solid var(--clay);border-radius:20px;box-shadow:0 18px 50px rgba(27,43,36,.28);width:100%;max-width:520px;max-height:min(70vh,560px);pointer-events:auto;overflow-y:auto;color:var(--ink);font:400 1rem/1.6 var(--sans);animation:ell-up .35s ease}
@keyframes ell-up{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}

.ell-c-head{display:flex;align-items:center;gap:.7rem;padding:1.1rem 1.5rem 0}
.ell-c-head svg{width:34px;height:34px;flex-shrink:0}
.ell-c-head b{display:block;font:500 1.12rem/1.15 var(--serif);color:var(--forest-deep)}
.ell-c-head small{display:block;font-size:.78rem;color:var(--muted);letter-spacing:.04em}

.ell-tabs{display:flex;border-bottom:1px solid var(--sand-deep);margin:.8rem 1.5rem 0}
.ell-tab{background:none;border:0;cursor:pointer;font:600 .88rem/1 var(--sans);color:var(--muted);padding:.6rem 1rem .75rem;position:relative;transition:color .2s}
.ell-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--clay);transform:scaleX(0);transition:transform .2s}
.ell-tab:hover{color:var(--forest-deep)}
.ell-tab.active{color:var(--forest)}
.ell-tab.active::after{transform:scaleX(1)}

.ell-panel{display:none;padding:1rem 1.5rem .3rem}
.ell-panel.active{display:block}
.ell-panel h3{font:400 1.25rem/1.2 var(--serif);color:var(--forest-deep);margin:0 0 .7rem}
.ell-panel p{font-size:.88rem;line-height:1.55;color:var(--muted);margin:0 0 .6rem}

.ell-cat{border:1px solid var(--sand-deep);border-radius:var(--r);background:#fff;margin-bottom:.6rem;overflow:hidden}
.ell-cat-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1rem;cursor:pointer;user-select:none}
.ell-cat-head:hover{background:var(--sand)}
.ell-cat-label{display:flex;align-items:center;gap:.6rem;font-weight:600;font-size:.93rem;color:var(--forest-deep)}
.ell-cat-icon{width:17px;height:17px;fill:none;stroke:var(--clay);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ell-cat-always{font-size:.72rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.ell-cat-body{display:none;padding:.2rem 1rem .9rem;font-size:.85rem;color:var(--muted);line-height:1.55;border-top:1px solid var(--sand-deep)}
.ell-cat-body.open{display:block}
.ell-cat-body table{width:100%;border-collapse:collapse;margin-top:.7rem;font-size:.78rem}
.ell-cat-body th{text-align:left;padding:.35rem .5rem;background:var(--sand);color:var(--muted);font-weight:600;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase}
.ell-cat-body td{padding:.35rem .5rem;border-bottom:1px solid var(--sand-deep);vertical-align:top}
.ell-cat-body tr:last-child td{border-bottom:0}

.ell-toggle{position:relative;width:40px;height:23px;flex-shrink:0}
.ell-toggle input{position:absolute;opacity:0;width:0;height:0}
.ell-toggle span{position:absolute;inset:0;background:var(--sand-deep);border-radius:23px;cursor:pointer;transition:background .25s}
.ell-toggle span::before{content:"";position:absolute;width:17px;height:17px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .25s}
.ell-toggle input:checked+span{background:var(--forest)}
.ell-toggle input:checked+span::before{transform:translateX(17px)}
.ell-toggle input:focus-visible+span{outline:3px solid var(--clay);outline-offset:2px}

.ell-c-actions [hidden]{display:none!important}
#ell-cookie-modal:focus{outline:none}
.ell-c-actions{display:flex;flex-wrap:wrap;gap:.6rem;padding:.5rem 1.5rem 1.2rem}
.ell-c-actions .btn,.ell-drawer-actions .btn{flex:1;justify-content:center;min-width:130px;padding:12px 16px;font-size:.88rem;cursor:pointer}

/* ── Kłódka (lewy dolny róg) ───────────────────── */
#ell-lock{position:fixed;left:14px;bottom:14px;z-index:9997;display:none;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--forest-deep);border:1px solid rgba(255,255,255,.18);box-shadow:0 6px 22px rgba(27,43,36,.35);cursor:pointer;transition:background .2s,transform .2s,bottom .25s}
#ell-lock.visible{display:flex}
#ell-lock:hover{background:var(--forest);transform:scale(1.08)}
#ell-lock svg{width:21px;height:21px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── Panel ustawień po zgodzie ─────────────────── */
#ell-drawer{position:fixed;left:14px;bottom:14px;z-index:9999;display:none;width:380px;max-width:calc(100vw - 28px);background:var(--paper);border-top:3px solid var(--clay);border-radius:var(--r);box-shadow:0 12px 40px rgba(27,43,36,.3);animation:ell-up .25s ease}
#ell-drawer.open{display:block}
.ell-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.1rem .7rem;border-bottom:1px solid var(--sand-deep)}
.ell-drawer-head span{font:500 1.05rem/1.2 var(--serif);color:var(--forest-deep)}
.ell-drawer-close{background:none;border:0;cursor:pointer;color:var(--muted);font-size:1.1rem;line-height:1;padding:.2rem .35rem}
.ell-drawer-close:hover{color:var(--forest-deep)}
.ell-state{padding:.9rem 1.1rem .4rem}
.ell-state p{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 .5rem}
.ell-state-row{display:flex;align-items:center;gap:.5rem;font-size:.9rem;margin-bottom:.3rem}
.ell-state-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.ell-state-dot.on{background:var(--forest)}
.ell-state-dot.off{background:var(--sand-deep)}
.ell-drawer-actions{display:flex;gap:.5rem;padding:.6rem 1.1rem 1.1rem}
.ell-drawer-actions .btn{min-width:0;padding:12px 14px;font-size:.86rem}

@media (max-width:640px){
  body:has(.callbar.show) #ell-lock{bottom:84px}
  #ell-cookie-overlay{padding:8px;transition:bottom .25s}
  body:has(.callbar.show) #ell-cookie-overlay{bottom:68px}
  #ell-cookie-modal{max-height:62vh;border-radius:16px}
  .ell-c-head{display:none}
  .ell-tabs{margin:.4rem 1rem 0}
  .ell-panel{padding:.8rem 1rem .2rem}
  .ell-panel h3{display:none}
  .ell-tab{padding-left:.7rem;padding-right:.7rem}
  .ell-c-actions{padding:.4rem 1rem 1rem}
  .ell-c-actions .btn{min-width:0;padding:11px 10px;font-size:.84rem}
}