/* ==========================================================================
   CMP — süti-beleegyezés banner + preferencia-modal stílusa

   PORTÁBLIS: minden szín/görbület/árnyék a --cmp-* CSS-változókon keresztül
   jön, ésszerű, önmagában is működő alapértékkel. Ha a befogadó projektnek
   már vannak saját design-tokenjei (mint itt: --brand, --r-lg, --shadow-lg
   a css/style.css-ben), ELÉG csak a --cmp-* változókat egyszer, egy helyen
   ezekre mappelni (lásd lent, "PROJEKT-SPECIFIKUS TÉMA" blokk) — magát a
   fájl többi részét nem kell módosítani.
   ========================================================================== */

:root{
  /* --- generikus alapértékek: bármely projektben működnek plusz beállítás nélkül --- */
  --cmp-brand:        #2563eb;
  --cmp-brand-ink:    #ffffff;
  --cmp-ink:          #14110f;
  --cmp-slate:        #6b635c;
  --cmp-line:         #e2e2e2;
  --cmp-surface:      #ffffff;
  --cmp-surface-2:    #f5f5f5;
  --cmp-radius:       14px;
  --cmp-radius-lg:    24px;
  --cmp-shadow:       0 24px 60px rgba(0,0,0,.18);
  --cmp-font:         system-ui, -apple-system, "Segoe UI", sans-serif;
  --cmp-ease:         cubic-bezier(.22,.61,.36,1);
  --cmp-z:            9999;
}

/* --- PROJEKT-SPECIFIKUS TÉMA (repistore.hu) — ha máshova viszed a modult,
   ezt a blokkot cseréld le a saját design-tokenjeidre, vagy hagyd el, és
   marad a fenti generikus alapértelmezés. --- */
:root{
  --cmp-brand:        var(--brand, #2563eb);
  --cmp-brand-ink:    #ffffff;
  --cmp-ink:          var(--ink, #14110f);
  --cmp-slate:        var(--slate, #6b635c);
  --cmp-line:         var(--line, #e2e2e2);
  --cmp-surface:      var(--white, #ffffff);
  --cmp-surface-2:    var(--paper-2, #f5f5f5);
  --cmp-radius:       var(--r, 14px);
  --cmp-radius-lg:    var(--r-lg, 24px);
  --cmp-shadow:       var(--shadow-lg, 0 24px 60px rgba(0,0,0,.18));
  --cmp-font:         var(--font-body, system-ui, sans-serif);
}

/* ---- Banner ---- */
.cmp-banner{
  position:fixed;left:24px;right:24px;bottom:24px;z-index:var(--cmp-z);
  max-width:560px;margin-inline:auto;
  background:var(--cmp-surface);border:1px solid var(--cmp-line);border-radius:var(--cmp-radius-lg);
  box-shadow:var(--cmp-shadow);padding:22px 24px;font-family:var(--cmp-font);
  transform:translateY(140%);transition:transform .5s var(--cmp-ease);
}
.cmp-banner.show{transform:none}
.cmp-banner-text h4{margin:0 0 8px;font-size:1.05rem;color:var(--cmp-ink)}
.cmp-banner-text p{margin:0 0 16px;font-size:.9rem;line-height:1.5;color:var(--cmp-slate)}
.cmp-banner-text p a{color:var(--cmp-brand)}
.cmp-banner-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---- Gombok ---- */
.cmp-btn{
  flex:1;min-width:120px;padding:11px 16px;font-size:.9rem;font-weight:600;font-family:var(--cmp-font);
  border-radius:999px;border:1px solid var(--cmp-line);cursor:pointer;background:var(--cmp-surface);color:var(--cmp-ink);
  transition:filter .15s var(--cmp-ease), background .15s var(--cmp-ease);
}
.cmp-btn:hover{filter:brightness(.97)}
.cmp-btn--primary{background:var(--cmp-brand);border-color:var(--cmp-brand);color:var(--cmp-brand-ink)}
.cmp-btn--primary:hover{filter:brightness(1.08)}
.cmp-btn--ghost{background:transparent}

/* ---- Modal overlay ---- */
.cmp-modal-overlay{
  position:fixed;inset:0;z-index:calc(var(--cmp-z) + 1);background:rgba(20,17,15,.55);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.cmp-modal-overlay.show{display:flex}
.cmp-modal{
  background:var(--cmp-surface);border-radius:var(--cmp-radius-lg);width:100%;max-width:640px;max-height:88vh;overflow:auto;
  box-shadow:var(--cmp-shadow);font-family:var(--cmp-font);
}
.cmp-modal-head{
  padding:22px 26px;border-bottom:1px solid var(--cmp-line);display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;background:var(--cmp-surface);z-index:2;
}
.cmp-modal-head h3{margin:0;font-size:1.2rem;color:var(--cmp-ink)}
.cmp-modal-close{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--cmp-line);background:var(--cmp-surface);
  display:grid;place-items:center;font-size:1rem;cursor:pointer;color:var(--cmp-ink);
}
.cmp-modal-close:hover{background:var(--cmp-ink);color:var(--cmp-surface);border-color:var(--cmp-ink)}
.cmp-modal-body{padding:26px}
.cmp-modal-intro{margin:0 0 20px;font-size:.9rem;line-height:1.55;color:var(--cmp-slate)}
.cmp-modal-foot{padding:18px 26px;border-top:1px solid var(--cmp-line);display:flex;gap:10px;flex-wrap:wrap;position:sticky;bottom:0;background:var(--cmp-surface)}

/* ---- Kategória-kártyák ---- */
.cmp-cat-list{display:flex;flex-direction:column;gap:14px}
.cmp-cat{border:1px solid var(--cmp-line);border-radius:var(--cmp-radius);padding:16px 18px;background:var(--cmp-surface-2)}
.cmp-cat-head{display:flex;align-items:center;gap:12px}
.cmp-cat-title{display:flex;align-items:center;gap:8px;font-size:.98rem;color:var(--cmp-ink)}
.cmp-tag{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--cmp-slate);background:var(--cmp-surface);border:1px solid var(--cmp-line);border-radius:999px;padding:2px 8px}
.cmp-cat-desc{margin:10px 0 0;font-size:.86rem;line-height:1.5;color:var(--cmp-slate)}

/* ---- Kapcsoló (toggle switch) ---- */
.cmp-switch{position:relative;display:inline-block;width:42px;height:24px;flex:none}
.cmp-switch input{position:absolute;z-index:1;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.cmp-switch-track{position:absolute;inset:0;background:var(--cmp-line);border-radius:999px;transition:background .15s var(--cmp-ease)}
.cmp-switch-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s var(--cmp-ease)}
.cmp-switch input:checked + .cmp-switch-track{background:var(--cmp-brand)}
.cmp-switch input:checked + .cmp-switch-track .cmp-switch-thumb{transform:translateX(18px)}
.cmp-switch input:disabled + .cmp-switch-track{background:var(--cmp-brand);opacity:.55;cursor:not-allowed}
.cmp-switch input:disabled{cursor:not-allowed}

/* ---- Süti-lista (details/summary) ---- */
.cmp-cookie-details{margin-top:12px;font-size:.85rem}
.cmp-cookie-details summary{cursor:pointer;color:var(--cmp-brand);font-weight:600}
.cmp-no-cookies{margin:10px 0 0;color:var(--cmp-slate);font-style:italic}
.cmp-cookie-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:.82rem}
.cmp-cookie-table th,.cmp-cookie-table td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--cmp-line);color:var(--cmp-slate)}
.cmp-cookie-table th{color:var(--cmp-ink);font-weight:600}

@media (max-width:520px){
  .cmp-banner{left:12px;right:12px;bottom:12px;padding:18px}
  .cmp-banner-actions{flex-direction:column}
  .cmp-btn{width:100%}
  .cmp-modal-foot{flex-direction:column}
}