/* klaro-custom.css — repositions & restyles the Klaro consent notice
   to match the bottom-left dark banner style used on ilios.ekt.gr */

.klaro .cookie-notice {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  left: auto !important;
  top: auto !important;
  max-width: 380px !important;
  width: calc(100% - 40px) !important;
  border-radius: 6px !important;
  background: #2b2b2b !important;
  color: #e8e8e8 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
  padding: 18px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.klaro .cookie-notice p,
.klaro .cookie-notice .cn-body p {
  color: #e8e8e8 !important;
}

/* "Επιλογή" / learn-more link — orange, like the EIE brand accent */
.klaro .cookie-notice .cn-learn-more,
.klaro .cookie-notice a {
  color: #f0a500 !important;
  text-decoration: underline;
}

.klaro .cookie-notice .cn-buttons {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px !important;
}

.klaro .cn-buttons button {
  border-radius: 4px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  border: none !important;
  cursor: pointer;
}

/* Decline all — neutral grey */
.klaro .cn-buttons .cm-btn-decline,
.klaro .cn-buttons .cn-decline {
  background: #5a5a5a !important;
  color: #fff !important;
}

/* Accept all / OK — green, like "Είμαι εντάξει!" */
.klaro .cn-buttons .cm-btn-accept,
.klaro .cn-buttons .cn-ok {
  background: #2e9e5b !important;
  color: #fff !important;
}

.klaro .cn-buttons .cm-btn-accept:hover,
.klaro .cn-buttons .cn-ok:hover {
  background: #268049 !important;
}

.klaro .cn-buttons .cm-btn-decline:hover,
.klaro .cn-buttons .cn-decline:hover {
  background: #444 !important;
}

/* Consent settings modal (opens on "Επιλογή") — keep readable dark theme too */
.klaro .cookie-modal .cm-modal {
  border-radius: 6px !important;
}

/* Mobile: full-width bar instead of floating box */
@media (max-width: 480px) {
  .klaro .cookie-notice {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: calc(100% - 20px) !important;
    max-width: none !important;
  }
}