/* ========= ÖVERLAY ========= */
.cookie-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9998;
}
.cookie-overlay.active{display:block;}

.cookie-banner[aria-hidden="true"]{display:none;}
.cookie-banner[aria-hidden="false"]{display:block;}

/* ========= MODAL ========= */
.cookie-modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:420px;max-width:90vw;background:#fff;color:#333;
  border-radius:14px;box-shadow:0 6px 24px rgba(0,0,0,.25);
  padding:20px;z-index:9999;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* ========= TABBAR ========= */
.tab-nav{display:flex;justify-content:space-around;margin:-20px -20px 10px;border-bottom:2px solid #e0e0e0;}
.tab-btn{flex:1;background:none;border:none;padding:14px 8px;font-weight:600;cursor:pointer;}
.tab-btn.active{color:#00963b;border-bottom:3px solid #00963b;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ========= KNAPPAR ========= */
.consent-buttons{display:flex;gap:8px;margin-top:10px;}
.consent-buttons button{
  flex:1 1 0;border:none;border-radius:4px;padding:12px 0;font-size:.92em;font-weight:600;cursor:pointer;
}
#btn-reject{background:#9e9e9e;color:#fff;}
#btn-select{background:#f5f5f5;color:#00963b;}
#btn-allow {background:#00963b;color:#fff;}

/* ========= KATEGORIER / TOGGLES ========= */
.pref-category{margin:18px 0;}
.pref-category label{font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;}
.category-desc{font-size:.88em;color:#555;margin:4px 0 0 52px;}
.pref-category.necessary label{opacity:.6;cursor:default;}

.consent-toggle{opacity:0;position:absolute;}
.consent-toggle+span{position:relative;padding-left:52px;line-height:1.4;}
.consent-toggle+span::before{
  content:"";position:absolute;left:0;top:2px;width:44px;height:22px;background:#ccc;border-radius:11px;transition:.3s;
}
.consent-toggle+span::after{
  content:"";position:absolute;left:2px;top:4px;width:18px;height:18px;background:#fff;border-radius:50%;box-shadow:0 0 2px rgba(0,0,0,.4);transition:.3s;
}
.consent-toggle:checked+span::before{background:#00963b;}
.consent-toggle:checked+span::after{transform:translateX(22px);}

/* ========= COOKIELISTA ========= */
.cookie-list table{width:100%;border-collapse:collapse;font-size:.86em;}
.cookie-list th,.cookie-list td{border:1px solid #ddd;padding:6px 8px;text-align:left;}
.cookie-list th{background:#f0f0f0;}

/* ========= SPRÅK & INFO ========= */
.language-switcher{display:flex;justify-content:center;gap:12px;margin-top:14px;flex-wrap:wrap;}
.lang-btn{background:none;border:none;cursor:pointer;padding:4px 6px;}
.lang-btn.active{font-weight:600;text-decoration:underline;}
.consent-info{font-size:.78em;color:#444;margin-top:14px;word-break:break-all;text-align:center;}

/* ========= ÅTERÖPPNINGS‑KNAPP ========= */
.cookie-reopen{
  position:fixed;
  bottom:18px;        /* din tidigare position */
  left:18px;
  z-index:9999;
  width:46px;
  height:46px;
  border:0;           /* ingen ram – bilden har egen form */
  border-radius:50%;
  background:url('/cookiesymbole.png') center/80% no-repeat;
  cursor:pointer;
  font-size:0;        /* döljer 🍪‑emojin utan att ändra HTML */
  line-height:0;
}
.cookie-reopen:hover{
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}


/* ========= MOBIL  ≤ 480 px  (centrerad & 64 % hög) ========= */
@media (max-width:480px){

  .cookie-modal{
    top:10vh;                     /* 18 % från toppen  →  64 % hög */
    left:50%;                     /* centrera horisontellt */
    transform:translateX(-50%);
    width:92vw;                   /* luft vid sidorna */
    height:70vh;                  /* totalhöjd */
    max-width:none;
    border-radius:18px;           /* rundade alla hörn */
    padding:18px 20px;
    display:flex;flex-direction:column;background:#fff;
  }

  .cookie-overlay{background:rgba(0,0,0,.65);}   /* mörkare backdrop */

  /* Tabbar fix i toppen */
  .tab-nav{
    flex:0 0 auto;margin:-18px -20px 12px;border-bottom:1px solid #e0e0e0;
  }
  .tab-btn{padding:14px 6px;font-size:.95em;}

  /* Skrollbart innehåll */
  .tab-panel{flex:1 1 auto;overflow-y:auto;padding-right:4px;}

  /* Text & kategorier */
  #consent-message{font-size:1em;margin-bottom:10px;}
  .pref-category{margin:16px 0;}
  .category-desc{margin-left:0;font-size:.9em;}

  /* Knapprad längst ned */
  .consent-buttons{
    margin-top:auto;gap:8px;padding-top:12px;
  }
  .consent-buttons button{padding:14px 0;font-size:1.02em;font-weight:700;}

  /* Språk & info */
  .language-switcher{gap:14px;margin-top:12px;}
  .consent-info{font-size:.85em;margin-top:10px;text-align:center;}

  /* Större switchar (samma som innan) */
  .consent-toggle+span::before{width:50px;height:26px;}
  .consent-toggle+span::after{width:20px;height:20px;top:3px;}
  .consent-toggle:checked+span::after{transform:translateX(24px);}
}