/**
 * Cookie Banner Styles
 * For TYPO3 v13+ | Bootstrap 5 compatible
 */

.extension-cookie { /* fixes the basic margin */
    margin: 0 !important;
    padding: 0 !important;
}

.extension-cookie .intro-text {
    margin-bottom: var(--bs-gutter-y);
}

/* Accordion Header Styling */
.extension-cookie .accordion-item .accordion-header {
    position: relative;
    display: flex;
    align-items: center;   
    padding: calc(var(--bs-accordion-btn-padding-y) * .5) var(--bs-accordion-btn-padding-x);
}

.extension-cookie .accordion-item .accordion-header .accordion-button {
    padding: 0;
}
.extension-cookie .accordion-item .accordion-header .form-check {
    margin: 0;
    font-size: var(--bs-font-size-small);
    font-weight: var(--bs-font-weight-bold);
}
.extension-cookie .accordion-item .accordion-body {
    padding-bottom: 0.5rem;
}

/* Privacy Subitem Styling */
.extension-cookie .privacy-subitem {
    position: relative;
    margin-top: .5rem;
    padding-top: .5rem;
    /* The same soft line as the accordion around it (2.17.4; before the full border colour, almost black) */
    border-top: var(--bs-accordion-border-width) var(--bs-accordion-border-style) hsl(from var(--bs-accordion-border-color) h s l / var(--bs-accordion-border-opacity));
}

.extension-cookie .privacy-subitem .form-switch {
    font-size: var(--bs-font-size-extra-small);
    font-weight: var(--bs-font-weight-bold);
}

/* Switch and label centred on one line (2.17.4): before, fixed margins that fitted only one font size */
.extension-cookie .form-switch {
    display: flex;
    align-items: center;
    /* The space Bootstrap leaves between switch and label (padding 2.5em, switch 2em) */
    gap: .5em;
}
.extension-cookie .form-switch .form-check-input {
    margin-top: 0;
}

.extension-cookie .privacy-subitem summary {
    position: absolute;
    top: 0.5rem;
    right: 0;
}

.extension-cookie .privacy-subitem-detail summary {
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
}

.extension-cookie details{
    margin-bottom: 0rem;
}

.extension-cookie .privacy-subitem-detail summary::-webkit-details-marker,
.extension-cookie .privacy-subitem-detail summary::marker {
    display: none !important;
}

.extension-cookie .privacy-subitem-detail summary .accordion-icon {
    padding-left: 4rem;
}
.extension-cookie .privacy-subitem-detail summary .accordion-icon:hover {
    color: var(--bs-primary-base)
}
/* Icon Type: Chevron - Rotation Animation */
.extension-cookie .privacy-subitem-detail summary .accordion-icon svg {
  transition: transform 0.2s ease-in-out;
  opacity: .5;
  width: calc(var(--bs-accordion-btn-icon-width) * 0.85);
  height: calc(var(--bs-accordion-btn-icon-width) * 0.85);
}

@media (prefers-reduced-motion: reduce) {
    .extension-cookie .accordion-button .accordion-icon svg,
  .extension-cookie .privacy-subitem-detail summary .accordion-icon svg {
    transition: none;
  }
}
.extension-cookie .accordion-button.collapsed .accordion-icon svg {
    transform: rotate(0);
}

.extension-cookie .accordion-button .accordion-icon svg {
    transform: rotate(-180deg);
    transition: transform 0.2s ease-in-out;
}

.extension-cookie .privacy-subitem-detail[open] summary .accordion-icon svg {
    transform: rotate(-180deg);
}
.extension-cookie .privacy-subitem {
    padding-left: 1rem;
    padding-right: 1rem;
}
.extension-cookie .privacy-subitem-content {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: var(--bs-font-size-extra-small);
    line-height: var(--bs-line-height-extra-small);
}

.privacy-subitem-content h5,
.content-privacy h5 {
    text-transform: none;
    font-size: var(--bs-font-size-extra-small);
}

.privacy-subitem-content h5:first-child {
    margin-top: 0;
}

.privacy-subitem-content p {
    margin-bottom: 1rem;
}

/* Imprint · privacy policy below the buttons (2.6.16): small and quiet, but always there */
.privacy-legal-links {
    margin: calc(var(--bs-gutter-y) * 0.5) 0 0;
    font-size: var(--bs-font-size-extra-small);
    text-align: center;
    color: var(--bs-muted);
}

/* Cookie Banner Launcher Button */

.privacy-button {
    position: fixed;
    bottom: var(--bs-gutter-y);
    left: var(--bs-gutter-x);
    transition: all 0.2s ease;
    box-shadow: var(--bs-box-shadow-sm);
    z-index: 1040;
}

.privacy-button.hidden {
    display: none !important;
}


/* Modal Customizations */
#cookieBannerModal.modal.show {
    display: block;
}
#cookieBannerModal .modal-content {
    border: none;
}
/* Room above and below that grows with the height of the window (2.6.2): top-aligned, not centred – a
   centred dialog would jump when a category opens. 1rem on small phones, about 8% of the height on laptops,
   at most 6rem on tall screens. Only the block margin: sideways Bootstrap's margin stays (auto from 576px). */
#cookieBannerModal .modal-dialog {
    margin-block: clamp(1rem, 8svh, 6rem);
}

/* Modal Backdrop */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100vw;
    height: 100vh;
    background-color: #000;
}

.modal-backdrop.show {
    opacity: 0.5;
}

/* Manual Backdrop for always-visible modal */
#cookieBannerModal::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: block;
}

#cookieBannerModal.modal-hidden {
    display: none !important;
}

#cookieBannerModal.modal-hidden::before {
    display: none;
}

/* Form Check Switch Enhancements */
.form-check-switch .form-check-input {
    cursor: pointer;
}

.form-check-switch .form-check-input:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.form-check-switch .form-check-label {
    cursor: pointer;
}

.form-check-switch .form-check-input:disabled + .form-check-label {
    cursor: not-allowed;
    opacity: 0.7;
}

/* Buttons: Save over the full width, Reject and Accept below side by side – a grid with its own gap (2.6.0).
   Reject and Accept look the same (2.17.4): rejecting must be as easy and as visible as accepting (OLG Köln
   6 U 80/23, VG Hannover 10 A 5385/22, EDPB cookie banner taskforce, EDÖB guide). Before, Accept was a wide
   primary button and Reject a small tonal one. */
.extension-cookie .action-button-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--bs-gutter-y) * .5);
    margin-top: calc(var(--bs-gutter-y) * .75);
}
.extension-cookie .action-button-container .btn {
    margin: 0;
}
.extension-cookie .btn-save-selection {
    grid-column: 1 / -1;
}

/* Service descriptions in the privacy policy (section 12): the tags smaller than the policy's text, lists with
   space below */
.content-privacy .privacy-subitem-content li {
    font-size: var(--bs-font-size-small);
    padding: 0rem .5rem !important;
}
.content-privacy .privacy-subitem-content ul {
    margin-bottom: calc(var(--bs-gutter-y) * 0.5);
}

.content-privacy h4 {
    margin-top: calc(var(--bs-gutter-y) * 1.5);
    margin-bottom: .5rem;
}

/* Lists as small tags – in the banner and in the service descriptions of the privacy policy (section 12) */
.extension-cookie ul,
.content-privacy .privacy-subitem-content ul {
    padding-left: 0;
}
.extension-cookie li,
.content-privacy .privacy-subitem-content li {
    display: inline-block;
    border: 1px solid var(--bs-border-color);
    border-radius: .25rem;
    padding: .25rem .5rem;
    margin-bottom: .25rem;
}

/* Notice bar of the Swiss opt-out with bar (cookiebanner.mode 3, 2.4.0): quiet, at the bottom, blocks nothing.
   A floating panel in the style of the framework (surface, radius, large shadow with hairline ring). */
.cookie-notice-bar {
  position: fixed;
  inset-inline: var(--bs-gutter-x, 1rem);
  bottom: var(--bs-gutter-y, 1rem);
  z-index: 1045;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  max-width: 48rem;
  margin-inline: auto;
  padding: .75rem 1rem;
  color: var(--bs-body-color);
  background: var(--bs-element-bg, var(--bs-body-bg));
  border-radius: var(--bs-border-radius, .5rem);
  box-shadow: 0 0 0 1px hsl(from var(--bs-body-color) h s l / .08), var(--bs-box-shadow-lg, 0 10px 25px -5px rgb(0 0 0 / .15));
  font-size: var(--bs-font-size-small, .875rem);
}
.cookie-notice-bar[hidden] {
  display: none;
}
.cookie-notice-text {
  flex: 1 1 18rem;
  margin: 0;
}
.cookie-notice-actions {
  display: flex;
  gap: .5rem;
}

/* External content of an HTML element until consent, or blocked (2.9.0, EmbedGuardProcessor) */
.cookiebanner26-embed {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    padding: 1.5rem;
    border: 1px dashed currentColor;
    border-radius: var(--bs-border-radius, .375rem);
}
.cookiebanner26-embed p {
    margin: 0;
}