/*!
 * ns_t3aa backend module styles (v12–v14).
 * Prefer TYPO3 core tokens / Bootstrap utilities; feature-card & config-tab
 * helpers live in dashboard.css.
 */

/* ── Color input ─────────────────────────────────────────── */
.form-control.form-control--color {
    height: 45px;
    min-width: 80px;
    padding: 0;
    width: 100%;
}

/* ── Widget backend preview ──────────────────────────────── */
/* v12 .sticky-md-top uses z-index:1020 and overlays content when scrolling */
.nsa-widget-preview-panel.sticky-md-top {
    position: static;
    z-index: auto;
}

.nsa-widget-preview-panel .nav.nav-tabs {
    background: none;
    justify-content: center;
}

/* Nested device tabs: class-driven only (no sticky inline display) */
.nsa-widget-preview-panel .tab-content > .tab-pane {
    display: none !important;
}

.nsa-widget-preview-panel .tab-content > .tab-pane.active {
    display: block !important;
}

.nsa-interface-preview,
.nsa-widget-trigger {
    margin-left: auto;
    margin-right: auto;
    max-width: 309px;
}

.nsa-interface-preview {
    border: 1px solid var(--typo3-state-default-bg);
    box-shadow: var(--typo3-shadow-4);
}

.nsa-widget-trigger {
    overflow: hidden;
}

.nsa-widget-trigger__icon {
    position: relative;
}

.nsa-widget-icon-desktop {
    background-color: #fff;
    border: 2px solid #e0eafe;
    border-radius: 0 0 10px 10px;
    height: 140px;
    margin-top: -1px;
}

.nsa-widget-icon-mobile {
    background-color: transparent;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTMyIDIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjRkVGRUZFIiBkPSJNMCAwaDEzMnYyMDBIMFYweiIvPjxwYXRoIGZpbGw9IiNFMEVBRkUiIGQ9Ik0wIDBoMTMydjIwMEgwVjB6bTMgOGMtMS40OSAyLjk4LTEuMTMzIDUuNjc2LTEuMTQgOS4wMDJsLS4wMSAyLjIxYy0uMDA4IDIuNDU2LS4wMSA0LjkxMi0uMDExIDcuMzY3bC0uMDE1IDUuMjY3Yy0uMDEzIDQuNzgtLjAyIDkuNTU4LS4wMjQgMTQuMzM3YTI5MDI0LjYzNiAyOTAyNC42MzYgMCAwMC0uMDM5IDM2Ljk0N2MtLjAwNCAxMC43ODEtLjAyMiAyMS41NjItLjA1IDMyLjM0My0uMDIyIDguMzI3LS4wMzMgMTYuNjU0LS4wMzQgMjQuOTgxLS4wMDEgNC45NzYtLjAwNyA5Ljk1Mi0uMDI1IDE0LjkyOC0uMDE2IDQuNjgxLS4wMTggOS4zNjItLjAxIDE0LjA0My4wMDEgMS43MTktLjAwMyAzLjQzNy0uMDEzIDUuMTU2LS4wMTMgMi4zNDUtLjAwNyA0LjY5LjAwNCA3LjAzNmwtLjAwNSAzLjk3OGMuNTE0IDQuNzA3IDIuMzEzIDcuMjEgNS4zOTIgMTAuNjg2IDQuNDc1IDIuNTgxIDguNTc4IDIuMjcgMTMuNjU4IDIuMjJsMy4yNTguMDE3YzMuNTUzLjAxMyA3LjEwNS0uMDA0IDEwLjY1OC0uMDIyYTM2NTEuOTM0IDM2NTEuOTM0IDAgMDAyMi45MzMtLjAyOSAzMTQ0LjIxIDMxNDQuMjEgMCAwMTE5LjkwNC0uMDEzYzUuMDk5LjAwNyAxMC4xOTgtLjAwMSAxNS4yOTctLjAxNCAyLjQ0Ny0uMDA0IDQuODkzLS4wMDQgNy4zNCAwIDMuNDE4LjAwMiA2LjgzNi0uMDE0IDEwLjI1NC0uMDM2bDMuMDY3LjAxNGM2LjE0OS0uMDY2IDkuNjA5LS44NDUgMTQuMzYxLTQuOTE4IDIuODctMy40NDMgMi4zOC03LjMyNSAyLjM5LTExLjU4NWwuMDEtMi4yYy4wMDgtMi40MzguMDEtNC44NzcuMDExLTcuMzE2bC4wMTUtNS4yMzhjLjAxMy00Ljc0OC4wMi05LjQ5Ni4wMjQtMTQuMjQ0bC4wMTItOC44OTVjLjAxMy05LjI3NC4wMjMtMTguNTQ4LjAyNy0yNy44MjIuMDA0LTEwLjcxMi4wMjItMjEuNDI0LjA1LTMyLjEzNS4wMjItOC4yNzcuMDMzLTE2LjU1My4wMzQtMjQuODI5LjAwMS00Ljk0NS4wMDctOS44OS4wMjUtMTQuODM0LjAxNi00LjY1LjAxOC05LjMwMS4wMS0xMy45NTJhNzk1LjE5IDc5NS4xOSAwIDAxLjAxMy01LjEyMmMuMDEzLTIuMzMuMDA3LTQuNjYtLjAwNC02Ljk5bC4wMDUtMy45NTFDMTI5LjgzOSA5LjUzOCAxMjcuNzMyIDYuMTEgMTI0IDNjLTMuNTctMS4xOS02LjgtMS4xMjUtMTAuNTEyLTEuMDk4bC0yLjIwNi4wMDVjLTIuMzI0LjAwNS00LjY0Ni4wMTgtNi45Ny4wMy0xLjU3Ni4wMDYtMy4xNTIuMDEtNC43MjguMDE0QTQ5NzAuMSA0OTcwLjEgMCAwMDg4IDJsLTIgNUg0NmwtMi01Yy00LjcxNC0uMTUtOS40MjYtLjI1OC0xNC4xNDItLjMzLTEuNjAxLS4wMy0zLjIwMy0uMDctNC44MDQtLjEyM0MxMi41ODcuODY4IDEyLjU4Ny44NjggMyA4eiIvPjwvc3ZnPg==");
    background-position: center;
    background-repeat: no-repeat;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    max-width: 150px;
    padding: 10px;
}

.nsa-wtp__icon {
    align-items: center;
    border-radius: 50%;
    color: var(--nsa-wtp-tc);
    display: inline-flex;
    height: 28px;
    justify-content: center;
    overflow: hidden;
    padding: 2px;
    position: absolute;
    transition: all 0.3s ease;
    width: 28px;
}

.nsa-wtp__icon .text {
    display: block;
    font-size: 12px;
    padding: 4px;
}

.nsa-wtp__icon svg {
    display: block;
    flex-shrink: 0;
    height: 100%;
    width: 100%;
}

.nsa-wtp__icon svg path,
.nsa-wtp__icon svg circle {
    fill: var(--nsa-wtp-tc, #fff);
}

.nsa-icon-mobile-right-bottom .nsa-wtp__icon,
.nsa-icon-desktop-right-bottom .nsa-wtp__icon {
    bottom: 15px;
    right: 15px;
}

.nsa-icon-mobile-left-top .nsa-wtp__icon,
.nsa-icon-desktop-left-top .nsa-wtp__icon {
    left: 15px;
    top: 15px;
}

.nsa-icon-mobile-right-middle .nsa-wtp__icon,
.nsa-icon-desktop-right-middle .nsa-wtp__icon,
.nsa-icon-mobile-left-middle .nsa-wtp__icon,
.nsa-icon-desktop-left-middle .nsa-wtp__icon {
    top: 50%;
    transform: translateY(-50%);
}

.nsa-icon-mobile-right-middle .nsa-wtp__icon,
.nsa-icon-desktop-right-middle .nsa-wtp__icon {
    right: 15px;
}

.nsa-icon-mobile-left-middle .nsa-wtp__icon,
.nsa-icon-desktop-left-middle .nsa-wtp__icon {
    left: 15px;
}

.nsa-icon-mobile-left-bottom .nsa-wtp__icon,
.nsa-icon-desktop-left-bottom .nsa-wtp__icon {
    bottom: 15px;
    left: 15px;
}

.nsa-icon-mobile-right-top .nsa-wtp__icon,
.nsa-icon-desktop-right-top .nsa-wtp__icon {
    right: 15px;
    top: 15px;
}

.nsa-wtp__icon.nsa-wtp__icon--text {
    border-radius: 4px;
    height: auto;
    overflow: visible;
    width: auto;
}

.nsa-wtp__icon--small {
    height: 28px;
    padding: 2px;
    width: 28px;
}

.nsa-wtp__icon--medium {
    height: 40px;
    padding: 4px;
    width: 40px;
}

.nsa-wtp__icon--medium .text {
    font-size: 13px;
    padding: 6px;
}

.nsa-wtp__icon--large {
    height: 55px;
    padding: 6px;
    width: 55px;
}

.nsa-wtp__icon--large .text {
    font-size: 14px;
    padding: 8px;
}

@media (min-width: 993px) {
    .nsa-widget-icon-desktop {
        height: 200px;
    }

    .nsa-widget-icon-mobile {
        height: 300px;
        max-width: 200px;
    }

    .nsa-widget-preview--big .nsa-interface-preview,
    .nsa-widget-preview--big .nsa-widget-trigger {
        max-width: 332px;
    }

    .nsa-widget-preview--big .nsa-widget-icon-desktop {
        height: 200px;
    }

    .nsa-widget-preview--big .nsa-widget-trigger > svg {
        height: 26px;
        width: 332px;
    }

    .nsa-widget-preview--big .nsa-widget-icon-mobile {
        height: 352px;
        max-width: 240px;
    }
}

@media (min-width: 1200px) {
    .nsa-widget-preview--big .nsa-interface-preview,
    .nsa-widget-preview--big .nsa-widget-trigger {
        max-width: 500px;
    }

    .nsa-widget-preview--big .nsa-widget-icon-desktop {
        height: 315px;
    }

    .nsa-widget-preview--big .nsa-widget-trigger > svg {
        height: 38px;
        width: 500px;
    }
}

/* ── Profile / settings selection ────────────────────────── */
.nsa-profile-cards .card-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.nsa-profile-block,
.nsa-setting-block {
    opacity: 0.3;
}

.nsa-profile-block--active,
.nsa-setting-block--active {
    opacity: 1;
}

/* ── Code highlighter (feature-customization.js) ─────────── */
.nsa-code-editor {
    background: light-dark(#333, var(--token-color-neutral-75));
    border: 1px solid #fff;
    border-radius: 4px;
    color: #fff;
    display: flex;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.5;
    max-height: 300px;
    overflow: auto;
}

.nsa-code-editor .nsa-code-line-numbers {
    background-color: light-dark(
        var(--token-color-neutral-100),
        var(--token-color-neutral-70)
    );
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 40px;
    padding-top: 8px;
    text-align: center;
}

@media (min-width: 1200px) {
    .nsa-code-editor {
        max-height: 500px;
    }
}

@media (min-width: 1400px) {
    .nsa-code-editor {
        max-height: 650px;
    }
}

.nsa-code-content {
    flex: 1;
    padding: 8px;
    white-space: pre;
}

.nsa-code-tag {
    color: #569cd6;
}

.nsa-code-attr {
    color: #9cdcfe;
}

.nsa-code-value {
    color: #ce9178;
}

.nsa-code-entity {
    color: #d7ba7d;
}

.nsa-code-comment {
    color: #6a9955;
}

/* ── Overview table wrap ─────────────────────────────────── */
@media (min-width: 993px) {
    .nsa-data-table-wrap > .form-section {
        padding: 25px;
    }
}

/* ── Module docheader ────────────────────────────────────── */
.accessibility-module-docheader .module-docheader__icon .icon {
    border-radius: 4px;
}

.accessibility-module-docheader .module-docheader__icon .icon svg > g {
    fill: var(--token-color-blue-60);
}

.accessibility-module-docheader .module-docheader__icon .icon svg path {
    opacity: 1;
}

.accessibility-module-docheader .module-docheader__icon .icon svg path:last-child {
    fill: #fff;
}

@media (min-width: 768px) {
    .accessibility-module-docheader {
        min-height: 78px !important;
    }
}

/* ── Trial / new website modals ──────────────────────────── */
.nsa-trial-modal .t3ac-modal-content {
    border: 0;
}

.nsa-trial-modal .nsa-trial-modal-content-right {
    padding: 2rem;
}

.nsa-trial-modal .nsa-trial-modal-content-right-svg svg {
    max-height: 130px;
    max-width: 130px;
}

@media (min-width: 768px) {
    .nsa-trial-modal .nsa-trial-modal-content-right-svg svg {
        max-height: 180px;
        max-width: 180px;
    }
}

@media (min-width: 992px) {
    .nsa-trial-modal .nsa-trial-modal-content-right-svg svg {
        max-height: 250px;
        max-width: 250px;
    }
}

.nsa-trial-modal .topbar-site .icon path,
.nsa-trial-modal .topbar-site .icon circle {
    fill: var(--typo3-state-primary-bg);
}

.nsa-trial-modal .nsa-trial-modal-content-right--video {
    height: 100%;
    min-height: 395px;
    position: relative;
}

@media (min-width: 993px) {
    .nsa-trial-modal .nsa-trial-modal-content-right--video {
        min-height: 530px;
    }
}

.nsa-trial-modal-content-right--video video {
    background-color: #070be6;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

@media (min-width: 768px) {
    .nsa-trial-modal-content-right--video video {
        object-fit: cover;
    }
}

.btn--upgrade.upgradeSubscriptionForm * {
    pointer-events: none;
}

/* ── Callouts ────────────────────────────────────────────── */
.callout.nsa-callout {
    background-color: light-dark(
        var(--token-color-neutral-6),
        var(--token-color-neutral-80)
    );
    border-color: light-dark(
        var(--token-color-neutral-10),
        var(--token-color-neutral-5)
    );
}

.callout.nsa-callout-free-trial {
    background-color: light-dark(
        var(--token-color-neutral-10),
        var(--token-color-neutral-75)
    );
    border-color: light-dark(
        var(--token-color-neutral-75),
        var(--token-color-neutral-5)
    );
}

/* ── Feature configuration modals ────────────────────────── */
/* Nested shell: header (outer TYPO3) + body + footer. Avoid Bootstrap
   fixed/full-viewport .modal styles so the iframe content fills cleanly. */
.ac-modal-content .t3ac-modal.modal.d-block {
    max-width: 100%;
    width: 100%;
}

html:has(.feature-config-modal),
html:has(.feature-config-modal) body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

html:has(.feature-config-modal) #saveConfigurationForm,
html:has(.feature-config-modal) body > form {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    min-height: 100%;
}

.feature-config-modal.modal {
    border: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: 100%;
    max-width: 100%;
    min-height: 100%;
    overflow: hidden;
    position: static;
    width: 100%;
    z-index: auto;
}

.feature-config-modal .t3ac-modal-content.modal-content {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    width: 100%;
}

.feature-config-modal .t3js-modal-body.modal-body {
    flex: 1 1 auto;
    height: auto;
    max-height: none;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--typo3-spacing, 1rem);
}