/* Klaro consent banner styling */
.klaro {
  --klaro-primary-color: #1d1d1b;
  --klaro-button-bg: #1d1d1b;
  --klaro-button-border-hover: 1px solid var(--klaro-primary-color);
  --klaro-button-text: #ffffff;
  --klaro-button-secondary-bg: #ffffff;
  --klaro-button-secondary-text: #1d1d1b;
  --klaro-dialog-focus-outline: none;
  --klaro-dialog-focus-box-shadow:
    0 0 2px 0 rgba(0, 0, 0, 0.1),
    0 4px 6px 0 rgba(0, 0, 0, 0.2),
    5px 5px 10px 0 rgba(0, 0, 0, 0.19);
  --klaro-link-decoration: solid;
  --klaro-link-decoration-line: underline;
  --font-size: 16px;

  font-family: "Open Sans", Arial, sans-serif;
  color: var(--klaro-primary-color);

  .cookie-notice a.cm-link.cn-learn-more,
  .cm-services .cm-caret a {
    text-decoration: none;
  }

  .cookie-notice:not(.cookie-modal-notice) {
    .cn-body p {
      text-align: center;
    }

    .cn-body .cn-ok {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;

      a.cn-learn-more {
        order: 2;
        text-decoration: underline;
        color: var(--klaro-primary-color);

        &:hover {
          text-decoration: none;
        }
      }

      .cn-buttons {
        order: 1;
        display: flex;
        justify-content: center;
        gap: 0.75rem;

        button {
          font-family: "Open Sans", Arial, sans-serif;
          font-size: 16px;
          border-radius: 25px;
          background-color: var(--klaro-button-secondary-bg);
          color: var(--klaro-button-secondary-text);
          border: 1px solid var(--klaro-button-secondary-text);

          &:hover {
            text-decoration: underline;
          }

          &.cm-btn-success {
            order: 1;
          }
          &:not(.cm-btn-success) {
            order: 2;
          }

          &.cm-btn-success {
            background-color: var(--klaro-button-bg);
            color: var(--klaro-button-text);

            &:hover {
              background-color: var(--klaro-button-secondary-bg);
              color: var(--klaro-button-secondary-text);
              border: 1px solid var(--klaro-button-secondary-text);
            }
          }
        }
      }
    }
  }
}

@media (min-width: 1024px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    bottom: 10px;
    right: 20px;
    width: calc(100% - 40px);
    border-radius: 4px;
    box-shadow:
      0 4px 6px 0 rgba(0, 0, 0, 0.2),
      5px 5px 10px 0 rgba(0, 0, 0, 0.19);
  }

  .klaro .cookie-notice:not(.cookie-modal-notice):focus,
  .klaro .cookie-notice:not(.cookie-modal-notice):focus-visible {
    box-shadow:
      0 0 2px 0 rgba(0, 0, 0, 0.1),
      0 4px 6px 0 rgba(0, 0, 0, 0.2),
      5px 5px 10px 0 rgba(0, 0, 0, 0.19),
      0 0 0 10px rgba(1, 1, 1, 0);
  }
}