/* Samtyckesrutan för marknadsföringscookies (Google Ads). ENDA källan.
 *
 * Laddas av app.html med <link> och av sekundärsidorna via @import i
 * shared.css, samma mönster som help.css, topbar-account.css och
 * auth-modal.css. Duplicera aldrig reglerna i en sidas eget style-block.
 *
 * Rutan visas BARA när det finns marknadsföringsspårning att samtycka till,
 * alltså när Google Ads-id:t är ifyllt i consent.js. Besöksstatistiken är
 * cookiefri och ligger utanför det här.
 */

#samtycke {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 9000;
  display: none;
  gap: 16px;
  align-items: center;
  max-width: 780px;
  margin: 0 auto;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #C3DCDB;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(16, 42, 60, .18);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text, #1A2535);
}

#samtycke.visa { display: flex; }

#samtycke p { margin: 0; flex: 1; }

#samtycke a {
  color: var(--accent2, #51a7a3);
  text-decoration: underline;
}

/* Staplade med Godkänn överst. Ordningen sitter i markupen och inte i CSS, så
   tab-ordningen följer den lästa ordningen. */
.samtycke-knappar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

/* Godkänn och neka har SAMMA storlek med flit. Att avvisa ska vara precis lika
   lätt som att godkänna, annars är samtycket inte giltigt. Skillnad i färg,
   ordning och ring är tillåten så länge båda är fullstora knappar i första
   lagret; skillnad i tillgänglighet är det inte. */
.samtycke-knappar button {
  min-width: 168px;
  padding: 10px 16px;
  border-radius: 10px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
}

/* Ringen ligger UTANFÖR knappen och tar därför ingen plats i layouten, till
   skillnad från en bredare border. Första lagret är vitt mot rutans egen
   bakgrund och blir en glipa, så ringen läser sig som avsiktlig i stället för
   som en tjock kant. */
#samtyckeJa {
  background: var(--accent2, #51a7a3);
  color: #fff;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(81, 167, 163, .32);
}

#samtyckeJa:hover {
  filter: brightness(1.07);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(81, 167, 163, .5);
}

#samtyckeNej {
  background: #fff;
  border-color: #C3DCDB;
  color: var(--text, #1A2535);
}

#samtyckeNej:hover { background: #F1F8F8; }

/* Under 700 px staplas texten över knapparna, och knapparna delar bredden
   lika. Sida vid sida klämdes texten till en smal spalt på telefon. */
/* Under 700 px staplas texten över knapparna, och knapparna går ut i full
   bredd. `flex:1` vore fel här: knappraden är numera en kolumn, så den skulle
   fördela HÖJD mellan knapparna i stället för bredd. */
@media (max-width: 700px) {
  #samtycke {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    font-size: 13px;
  }
  .samtycke-knappar button { min-width: 0; width: 100%; }
}