.kpa-widget { position: fixed; z-index: 2147482900; bottom: 22px; font-family: Arial, Helvetica, sans-serif; }
.kpa-widget.kpa-open { z-index: 2147483100; }
body.kpa-panel-active .kp-cookie-reopen { opacity: 0 !important; transform: translateY(12px) !important; pointer-events: none !important; }
.kpa-widget.kpa-right { right: 24px; }
.kpa-widget.kpa-left { left: 28px; }

/* Ako je Konplast Cookie Banner aktivan, njegov gumb ostaje iznad gumba pristupačnosti. */
body:has(#kpa-widget.kpa-left) .kp-cookie-reopen { bottom: 92px !important; }

/* Kompatibilnost s Konplast Cookie Bannerom: otvoreni cookie prozor i njegov gumb uvijek su iznad accessibility gumba. */
body .kp-cookie-root { z-index: 2147483000 !important; }
body .kp-cookie-banner { z-index: 2; }
body .kp-cookie-reopen { z-index: 1; }

.kpa-trigger {
  min-width: 230px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font: inherit;
  opacity: 1;
  transition: transform .2s ease;
}
.kpa-trigger:hover, .kpa-trigger:focus-visible { transform: translateY(-2px); outline: none; }
.kpa-trigger-icon {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kpa-accent);
  border-radius: 10px;
  background: var(--kpa-accent);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.kpa-trigger-icon svg { width: 29px; height: 29px; fill: currentColor; stroke: none; }
.kpa-trigger-label {
  width: 230px;
  box-sizing: border-box;
  text-align: center;
  padding: 12px 20px;
  border-radius: 10px;
  background: rgba(20,23,26,.82);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.24);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  white-space: nowrap;
}
.kpa-trigger:hover .kpa-trigger-label { background: rgba(20,23,26,.96); }
/* Usklađuje ukupnu širinu oba plutajuća gumba. */
body .kp-cookie-reopen-label {
  width: 230px;
  box-sizing: border-box;
  text-align: center;
}

.kpa-trigger:focus-visible .kpa-trigger-icon,
.kpa-trigger:focus-visible .kpa-trigger-label { outline: 3px solid #fff; outline-offset: 3px; }
.kpa-icon-only .kpa-trigger-label { display: none; }
.kpa-icon-only .kpa-trigger { min-width: 58px; }

.kpa-panel {
  position: absolute; bottom: 70px; width: min(360px, calc(100vw - 32px)); max-height: min(650px, calc(100vh - 110px)); overflow: auto;
  background: rgba(20,20,20,.96); color: #fff; border: 1px solid rgba(198,187,127,.72); border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.42); padding: 18px; opacity: 0; visibility: hidden;
  transform: translateY(14px) scale(.98); transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.kpa-right .kpa-panel { right: 0; }
.kpa-left .kpa-panel { left: 0; }
.kpa-widget.kpa-open .kpa-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.kpa-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.kpa-header h2 { color:#fff; font-size:1.25rem; line-height:1.2; margin:0; }
.kpa-close { background:transparent; color:#fff; border:0; font-size:28px; line-height:1; cursor:pointer; padding:2px 7px; border-radius:8px; }
.kpa-close:focus-visible { outline:2px solid var(--kpa-accent); }
.kpa-controls { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.kpa-scale-row { display:flex; align-items:center; justify-content:center; gap:8px; margin:-2px 0 10px; color:#d8d8d8; font-size:.78rem; }
.kpa-scale-status { min-width:48px; text-align:center; color:var(--kpa-accent); font-weight:700; }
.kpa-controls button, .kpa-reset {
  appearance:none; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.07); color:#fff;
  border-radius:12px; padding:12px 10px; cursor:pointer; min-height:66px; transition: border-color .18s ease, background .18s ease;
}
.kpa-controls button:hover, .kpa-controls button:focus-visible, .kpa-controls button[aria-pressed="true"] { border-color:var(--kpa-accent); background:rgba(198,187,127,.14); outline:none; }
.kpa-symbol { display:block; color:var(--kpa-accent); font-weight:700; font-size:1.1rem; margin-bottom:5px; }
.kpa-label { display:block; font-size:.82rem; line-height:1.25; }
.kpa-icon-only .kpa-label { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.kpa-reset { width:100%; min-height:auto; margin-top:12px; border-color:var(--kpa-accent); color:#111; background:var(--kpa-accent); font-weight:700; }
.kpa-reset:hover, .kpa-reset:focus-visible { filter:brightness(1.07); outline:3px solid rgba(198,187,127,.3); outline-offset:2px; }
.kpa-note { margin:12px 2px 0; color:#fff; font-size:.72rem; line-height:1.4; }

html.kpa-contrast body { background:#000!important; color:#fff!important; }
html.kpa-contrast body *:not(img):not(video):not(svg):not(path) { border-color:#fff!important; text-shadow:none!important; box-shadow:none!important; }
html.kpa-contrast body a { color:#ffeb3b!important; }
html.kpa-grayscale body { filter:grayscale(1); }
html.kpa-underline body a:not(.kpa-trigger) { text-decoration:underline!important; text-decoration-thickness:2px!important; text-underline-offset:3px!important; }
html.kpa-readable body, html.kpa-readable body *:not(i):not(.fa):not([class*="icon-"]) { font-family:Arial, Helvetica, sans-serif!important; }
html.kpa-spacing body { letter-spacing:.06em!important; word-spacing:.12em!important; line-height:1.75!important; }
html.kpa-pause *, html.kpa-pause *::before, html.kpa-pause *::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }

@media (max-width: 600px) {
  .kpa-widget { bottom:16px; }
  .kpa-widget.kpa-right { right:16px; }
  .kpa-widget.kpa-left { left:16px; }
  body:has(#kpa-widget.kpa-left) .kp-cookie-reopen { bottom: 80px !important; }
  .kpa-trigger { min-width:52px; width:52px; height:52px; }
  .kpa-trigger-icon { flex-basis:52px; width:52px; height:52px; }
  .kpa-trigger-label { display:none; }
  .kpa-panel { position:fixed; left:16px!important; right:16px!important; bottom:82px; width:auto; }
}
@media (prefers-reduced-motion: reduce) {
  .kpa-trigger, .kpa-panel, .kpa-controls button { transition:none!important; }
}