/* /public/assets/css/cookie.css */

/* Root visibility */
.qmk-cookie[aria-hidden="true"] { display: none; }
.qmk-cookie {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: end center;
  padding: 16px;

  /* hard override against page themes */
  color: #e7eefc !important;
}
.qmk-cookie, .qmk-cookie * { color: inherit; }

/* Backdrop */
.qmk-cookie__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

/* Panel */
.qmk-cookie__panel {
  position: relative;
  width: min(720px, 100%);
  background: #0b1220;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  overflow: hidden;

  color: #e7eefc !important;
}

/* Header */
.qmk-cookie__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.qmk-cookie__title { font-weight: 700; letter-spacing: .2px; }
.qmk-cookie__x {
  background: transparent; border: 0;
  color: #e7eefc !important;
  font-size: 18px; cursor: pointer;
  width: 36px; height: 36px; border-radius: 10px;
}
.qmk-cookie__x:hover { background: rgba(255,255,255,.06); }

/* Body */
.qmk-cookie__body { padding: 12px 16px 10px; }
.qmk-cookie__text { margin: 0 0 10px; opacity: .92; line-height: 1.35; }

/* ✅ Advanced (collapsible) */
.qmk-cookie__advanced{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  overflow: hidden;
}
.qmk-cookie__advancedSum{
  list-style: none;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
}
.qmk-cookie__advancedSum::-webkit-details-marker{ display:none; }
.qmk-cookie__advancedLabel{
  font-weight: 650;
  font-size: 13px;
  opacity: .95;
}
.qmk-cookie__advancedChev{
  opacity: .9;
  transition: transform .16s ease;
}
.qmk-cookie__advanced[open] .qmk-cookie__advancedChev{ transform: rotate(90deg); }
.qmk-cookie__advancedBody{
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.08);
}

/* Groups */
.qmk-cookie__groups { display: grid; gap: 8px; }

/* Base card */
.qmk-cookie__group {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
}

/* Fixed (essential) group */
.qmk-cookie__group--fixed { padding: 10px 12px; }
.qmk-cookie__row {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.qmk-cookie__gname { font-weight: 650; }
.qmk-cookie__gdesc { margin-top: 6px; font-size: 13px; opacity: .85; line-height: 1.35; }
.qmk-cookie__fixed { font-size: 12px; opacity: .75; }

/* Accordion groups (details/summary) */
.qmk-cookie__acc { padding: 0; overflow: hidden; }
.qmk-cookie__acc[open] .qmk-cookie__chev { transform: rotate(90deg); }

.qmk-cookie__sum{
  list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 10px 12px;
  cursor:pointer;
  user-select:none;
}
.qmk-cookie__sum::-webkit-details-marker{ display:none; }

.qmk-cookie__sum-left{
  display:flex; align-items:center; gap:10px;
  min-width: 0;
}
.qmk-cookie__chev{
  display:inline-block;
  width: 16px;
  opacity: .9;
  transform-origin: 50% 50%;
  transition: transform .16s ease;
}

.qmk-cookie__accbody{
  padding: 0 12px 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.08);
}

/* Toggle switch */
.qmk-cookie__switch { display: inline-flex; align-items: center; gap: 10px; }
.qmk-cookie__switch input { display: none; }

.qmk-cookie__slider {
  width: 46px; height: 26px; border-radius: 999px;
  background: rgba(255,255,255,.14);
  position: relative; display: inline-block;
  border: 1px solid rgba(255,255,255,.10);
}
.qmk-cookie__slider::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 999px;
  background: #e7eefc;
  transition: transform .18s ease;
}
.qmk-cookie__switch input:checked + .qmk-cookie__slider {
  background: rgba(120,200,255,.25);
  border-color: rgba(120,200,255,.35);
}
.qmk-cookie__switch input:checked + .qmk-cookie__slider::after {
  transform: translateX(20px);
}

/* Links */
.qmk-cookie__links {
  margin-top: 10px;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.qmk-cookie__link, .qmk-cookie__linkbtn {
  font-size: 13px;
  color: #e7eefc !important;
  opacity: .9;
  text-decoration: underline;
}
.qmk-cookie__linkbtn { background: transparent; border: 0; padding: 0; cursor: pointer; }

/* Footer buttons */
.qmk-cookie__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 16px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Buttons */
.qmk-cookie__btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #e7eefc !important;
  padding: 9px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 650;
  font-size: 13px;
  line-height: 1;
}
.qmk-cookie__btn:hover { background: rgba(255,255,255,.10); }
.qmk-cookie__btn:active { transform: translateY(1px); }

.qmk-cookie__btn--ghost { background: rgba(255,255,255,.04); }
.qmk-cookie__btn--primary {
  border-color: rgba(120,200,255,.35);
  background: rgba(120,200,255,.20);
}
.qmk-cookie__btn--primary:hover { background: rgba(120,200,255,.28); }

/* Small screens: compact */
@media (max-width: 520px){
  .qmk-cookie { padding: 10px; place-items: end stretch; }
  .qmk-cookie__panel { width: 100%; }
  .qmk-cookie__foot { justify-content: stretch; }
  .qmk-cookie__btn { width: 100%; }

  .qmk-cookie__text { margin-bottom: 8px; }
}

/* Focus visible */
.qmk-cookie__panel :focus-visible{
  outline: 2px solid rgba(120,200,255,.55);
  outline-offset: 2px;
}