/**
 * 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-header .form-check-input {
    margin-top: .375rem;
}
.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;
    border-top: 1px solid var(--bs-border-color);
}

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

.extension-cookie .privacy-subitem .form-check-input {
    margin-top: .4375rem;
}

.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 {
    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;
}

/* 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;
}

/* 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;
}

.extension-cookie .action-button-container {
    margin-top: calc(var(--bs-gutter-y) * .75);
}

.extension-cookie .btn-save-selection,
.extension-cookie .btn-reject-all {
    width: calc(50% - calc(var(--bs-gutter-x) / 4));
    float: left;
}
.extension-cookie .btn-reject-all {
    margin-right: 0;
}
.extension-cookie .btn-accept-all {
    width: 100%;
    margin-right: 0;
    margin-top: calc(var(--bs-gutter-x) * .5);
}

.extension-cookie ul {
    padding-left: 0;
}
.extension-cookie li {
    display: inline-block;
    border: 1px solid var(--bs-border-color);
    border-radius: .25rem;
    padding: .25rem .5rem;
    margin-bottom: .25rem;
}