/* _scify cookie consent styles */
/* Override Bootstrap variables for cookie consent banner to match theme */
:root {
  --bs-body-bg: #1a1a2e;
  --bs-body-color: #ffffff;
  --bs-border-color: #3984ff;
  --bs-primary: #3984ff;
  --bs-primary-rgb: 57, 132, 255;
  --clr-blue: #3984ff;
}

/* Override accordion icon colors specifically for cookie consent banner */
.cookies-consent-banner .accordion {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2341b6e6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2341b6e6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-color: #ffffff;
  --bs-accordion-bg: transparent;
  --bs-accordion-btn-color: #ffffff;
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-bg: rgba(26, 26, 46, 0.8);
  --bs-accordion-active-color: #ffffff;
}

/* Override form switch colors for cookie consent banner */
.cookies-consent-banner .form-switch .form-check-input {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2341b6e6'/%3e%3c/svg%3e");
  background-color: rgba(65, 182, 230, 0.25);
  border-color: #41b6e6;
}

.cookies-consent-banner .form-switch .form-check-input:checked {
  background-color: #3984ff;
  border-color: #3984ff;
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

.cookies-consent-banner .form-switch .form-check-input:disabled {
  background-color: rgba(65, 182, 230, 0.15);
  border-color: rgba(65, 182, 230, 0.5);
  opacity: 0.7;
}

/* The Dialog approach: Includes animations & transitions for <dialog>. */
body:has(dialog[open]) {
  overflow: hidden;
  padding-right: 0;
}

dialog.cookies-consent-banner {
  transition: opacity 0.7s ease-out, translate 0.7s ease-out;
  transition-delay: 0.1s;
}
@media (prefers-reduced-motion: no-preference) {
  dialog.cookies-consent-banner {
    translate: 0 -100dvh;
  }
}

dialog.cookies-consent-banner[open] {
  translate: 0 0;
}
@starting-style {
  @media (prefers-reduced-motion: no-preference) {
    dialog.cookies-consent-banner[open] {
      translate: 0 -100dvh;
    }
  }
}
dialog.cookies-consent-banner[open]::backdrop {
  background-color: rgba(var(--bs-dark-rgb), 50%);
  background-image: linear-gradient(rgba(var(--bs-dark-rgb), 40%), rgba(var(--bs-dark-rgb), 35%) 41.07%, rgba(var(--bs-dark-rgb), 30%) 76.05%);
}

/* The default styles for the cookie consent banner, optimised for _scify */
.cookies-consent-banner {
  --consent-spacing: 1rem;
  --consent-minimum-size: 575.98px;
  position: fixed;
  max-width: min(100dvw - var(--consent-spacing) * 2, var(--consent-minimum-size));
  inset-block-start: 50%;
  transform: translateY(-50%);
  margin: 0 auto;
  padding: var(--consent-spacing);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: 0 calc(var(--consent-spacing) * 0.5) calc(var(--consent-spacing) * 1) rgba(var(--bs-dark-rgb), 0.25);
}
.cookies-consent-banner .cookie-consent-accordion .cookie-consent-category-header {
  position: relative;
  line-height: 1;
}
.cookies-consent-banner .cookie-consent-accordion .cookie-consent-category-header .cookie-consent-switch {
  position: absolute;
  display: flex;
  align-items: center;
  gap: calc(var(--consent-spacing) * 0.75);
  inset-inline-start: calc(var(--bs-accordion-btn-padding-x) * 0.5);
  inset-block-start: calc(var(--bs-accordion-btn-padding-y) * 0.75);
  z-index: 1000;
}
.cookies-consent-banner .cookie-consent-accordion .cookie-consent-category-header .cookie-consent-switch .cookie-consent-switch-checkbox {
  margin-block-start: 0;
}
.cookies-consent-banner .cookie-consent-accordion .cookie-consent-category-header .cookie-consent-switch .cookie-consent-switch-label {
  line-height: inherit;
  user-select: none;
  opacity: 0.765;
  margin: 0;
}
.cookies-consent-banner .cookie-consent-text code {
  --bs-code-color: var(--bs-gray-600);
  margin-left: 0.25em;
}
.cookies-consent-banner .cookie-consent-text .cookie-consent-vendor-link {
  padding-inline-end: 1em;
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-size: 0.875em;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>');
}
.cookies-consent-banner .cookie-actions {
  display: flex;
  justify-content: space-between;
  margin-block-start: var(--consent-spacing);
}
.cookies-consent-banner .cookie-actions .row.row-cols-1.row-cols-md-3 {
  gap: 0;
}
.cookies-consent-banner .cookie-actions .row.row-cols-1.row-cols-md-3 .col button {
  border-radius: 0;
  min-width: unset;
  max-width: unset;
  width: unset;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: clip;
  position: relative;
}
.cookies-consent-banner .cookie-actions .row.row-cols-1.row-cols-md-3 .col button:focus-visible::after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  inset: 0;
  box-shadow: var(--bs-btn-focus-box-shadow);
}

/* @todo WIP. Integrate deeply into _scify theme (>April 2025) */
.edit-preferences {
  display: none;
}

.edit-preferences.open {
  display: block;
}

#edit-preferences-button.edit-preferences-button {
  position: fixed;
  bottom: 10px;
  left: 10px;
  z-index: 1001;
  cursor: pointer;
  min-width: 4rem;
  width: 4rem;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  border: 1px solid var(--clr-blue);
  background-color: transparent;
  text-align: center;
}

#edit-preferences-button svg {
  display: inline-block;
  max-width: inherit;
  color: var(--clr-blue);
}

.list-group-item.cookie-consent-text.list-unstyled.small.my-3.p-3 {
  border-width: 1px;
}