/**
 * AKAVA ScrollTop admin interface.
 * Logical properties keep the same stylesheet natural in LTR and RTL.
 */

.akava-btt-admin {
    --akava-admin-bg: #f6f7fb;
    --akava-admin-surface: #fff;
    --akava-admin-text: #172033;
    --akava-admin-muted: #667085;
    --akava-admin-line: #dfe3ea;
    --akava-admin-primary: #2563eb;
    --akava-admin-primary-soft: #eff6ff;
    --akava-admin-radius: 16px;
    max-inline-size: 1480px;
    color: var(--akava-admin-text);
}

.akava-btt-admin *,
.akava-btt-admin *::before,
.akava-btt-admin *::after {
    box-sizing: border-box;
}

.akava-btt-admin__hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 30px;
    margin-block: 18px 22px;
    border: 1px solid #dbe6ff;
    border-radius: 20px;
    background:
        radial-gradient(circle at 90% 0, rgba(37, 99, 235, .14), transparent 36%),
        linear-gradient(135deg, #fff, #f7faff);
    box-shadow: 0 14px 40px rgba(30, 64, 175, .08);
}

.akava-btt-admin__hero h1 {
    margin: 2px 0 8px;
    font-size: clamp(24px, 2vw, 34px);
    line-height: 1.15;
    letter-spacing: -.025em;
    color: #0f172a;
}

.akava-btt-admin__hero p {
    max-inline-size: 760px;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--akava-admin-muted);
}

.akava-btt-admin__hero .akava-btt-admin__eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--akava-admin-primary);
}

.akava-btt-admin__version {
    flex: 0 0 auto;
    padding: 6px 10px;
    border: 1px solid #c8d7ff;
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    color: #3157a3;
    font-size: 12px;
    font-weight: 700;
}

.akava-btt-admin__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 370px);
    gap: 22px;
    align-items: start;
}

.akava-btt-admin__main {
    display: grid;
    gap: 18px;
}

.akava-btt-admin__sidebar {
    position: sticky;
    inset-block-start: 48px;
    display: grid;
    gap: 14px;
}

.akava-btt-card {
    padding: 24px;
    border: 1px solid var(--akava-admin-line);
    border-radius: var(--akava-admin-radius);
    background: var(--akava-admin-surface);
    box-shadow: 0 3px 12px rgba(15, 23, 42, .035);
}

.akava-btt-card__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-block-end: 18px;
    margin-block-end: 20px;
    border-block-end: 1px solid #edf0f4;
}

.akava-btt-card__heading>div:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
}

.akava-btt-card__heading h2 {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    color: #172033;
}

.akava-btt-card__heading p {
    max-inline-size: 500px;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    text-align: end;
    color: var(--akava-admin-muted);
}

.akava-btt-card__step {
    display: inline-grid;
    place-items: center;
    inline-size: 30px;
    block-size: 30px;
    border-radius: 9px;
    background: var(--akava-admin-primary-soft);
    color: var(--akava-admin-primary);
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.akava-btt-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
}

.akava-btt-fields--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.akava-btt-field {
    display: grid;
    align-content: start;
    gap: 7px;
    min-inline-size: 0;
    margin: 0;
}

.akava-btt-field--wide,
.akava-btt-colors {
    grid-column: 1 / -1;
}

.akava-btt-field>span,
.akava-btt-color>span {
    font-size: 12px;
    font-weight: 700;
    color: #344054;
}

.akava-btt-field small,
.akava-btt-toggle small,
.akava-btt-field--wide small {
    display: block;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--akava-admin-muted);
}

.akava-btt-field input[type="text"],
.akava-btt-field input[type="number"],
.akava-btt-field select {
    inline-size: 100%;
    min-block-size: 38px;
    max-inline-size: none;
    border-color: #cfd5df;
    border-radius: 8px;
}

.akava-btt-field input:focus,
.akava-btt-field select:focus {
    border-color: var(--akava-admin-primary);
    box-shadow: 0 0 0 1px var(--akava-admin-primary);
}

.akava-btt-range {
    inline-size: 100%;
    accent-color: var(--akava-admin-primary);
}

.akava-btt-field output {
    inline-size: fit-content;
    padding: 3px 7px;
    border-radius: 6px;
    background: #f2f4f7;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #475467;
}

.akava-btt-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-block-size: 64px;
    padding: 12px 14px;
    border: 1px solid #e4e7ec;
    border-radius: 11px;
    background: #fafbfc;
    cursor: pointer;
}

.akava-btt-toggle>span {
    display: grid;
    gap: 3px;
}

.akava-btt-toggle strong {
    font-size: 12px;
    color: #344054;
}

.akava-btt-toggle input {
    position: absolute;
    opacity: 0;
    inline-size: 1px;
    block-size: 1px;
}

.akava-btt-toggle i {
    position: relative;
    flex: 0 0 auto;
    inline-size: 42px;
    block-size: 24px;
    border-radius: 999px;
    background: #c8ced8;
    transition: background-color 140ms ease;
}

.akava-btt-toggle i::after {
    content: "";
    position: absolute;
    inset-block-start: 3px;
    inset-inline-start: 3px;
    inline-size: 18px;
    block-size: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .25);
    transition: transform 140ms ease;
}

.akava-btt-toggle input:checked+i {
    background: var(--akava-admin-primary);
}

.akava-btt-toggle input:checked+i::after {
    transform: translateX(18px);
}

[dir="rtl"] .akava-btt-toggle input:checked+i::after {
    transform: translateX(-18px);
}

.akava-btt-toggle input:focus-visible+i {
    outline: 3px solid rgba(37, 99, 235, .25);
    outline-offset: 2px;
}

.akava-btt-position-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    gap: 10px;
    padding: 0;
    margin: 0 0 20px;
    border: 0;
}

.akava-btt-position {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 12px 8px;
    border: 1px solid #dfe3ea;
    border-radius: 10px;
    background: #fafbfc;
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.akava-btt-position:hover,
.akava-btt-position:has(input:checked) {
    border-color: #88a8f8;
    background: var(--akava-admin-primary-soft);
}

.akava-btt-position input {
    position: absolute;
    opacity: 0;
}

.akava-btt-position input:focus-visible+.akava-btt-position__map {
    outline: 3px solid rgba(37, 99, 235, .25);
    outline-offset: 3px;
}

.akava-btt-position__map {
    position: relative;
    inline-size: 54px;
    block-size: 38px;
    border: 1px solid #cfd5df;
    border-radius: 6px;
    background: #fff;
}

.akava-btt-position__map i {
    position: absolute;
    inline-size: 9px;
    block-size: 9px;
    border-radius: 50%;
    background: var(--akava-admin-primary);
}

.akava-btt-position[data-position-option="top-start"] i {
    inset-block-start: 5px;
    inset-inline-start: 5px;
}

.akava-btt-position[data-position-option="top-end"] i {
    inset-block-start: 5px;
    inset-inline-end: 5px;
}

.akava-btt-position[data-position-option="bottom-start"] i {
    inset-block-end: 5px;
    inset-inline-start: 5px;
}

.akava-btt-position[data-position-option="bottom-end"] i {
    inset-block-end: 5px;
    inset-inline-end: 5px;
}

.akava-btt-position strong {
    font-size: 11px;
    color: #475467;
}

.akava-btt-position input:checked~strong {
    color: #194fbd;
}

.akava-btt-colors {
    display: grid;
    grid-template-columns: repeat(5, minmax(100px, 1fr));
    gap: 10px;
    padding: 14px;
    border: 1px solid #e4e7ec;
    border-radius: 11px;
    background: #fafbfc;
}

.akava-btt-color {
    display: grid;
    gap: 7px;
}

.akava-btt-color input[type="color"] {
    inline-size: 100%;
    block-size: 38px;
    padding: 3px;
    border: 1px solid #cfd5df;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.akava-btt-media {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.akava-btt-media__preview {
    display: grid;
    place-items: center;
    inline-size: 52px;
    block-size: 52px;
    border: 1px dashed #b9c0cb;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.akava-btt-media__preview:empty::before {
    content: "+";
    font-size: 22px;
    color: #98a2b3;
}

.akava-btt-media__preview img {
    max-inline-size: 100%;
    max-block-size: 100%;
    object-fit: contain;
}

.akava-btt-hooks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
    margin-block-start: 18px;
    border-radius: 10px;
    background: #f8fafc;
    color: #475467;
    font-size: 12px;
}

.akava-btt-hooks code {
    padding: 3px 7px;
    border-radius: 5px;
    background: #e9eef8;
    font-size: 11px;
}

.akava-btt-preview-card {
    padding: 18px;
}

.akava-btt-preview-card .akava-btt-card__heading {
    display: grid;
    gap: 12px;
}

.akava-btt-preview-card .akava-btt-card__heading>div:first-child {
    display: block;
}

.akava-btt-preview-card .akava-btt-card__heading p {
    margin-block-start: 4px;
    text-align: start;
}

.akava-btt-device-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 3px;
    border-radius: 9px;
    background: #eef1f5;
}

.akava-btt-device-switch__button {
    padding: 6px 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #667085;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.akava-btt-device-switch__button.is-active {
    background: #fff;
    color: #2459c4;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .12);
}

.akava-btt-preview {
    position: relative;
    inline-size: 100%;
    min-block-size: 390px;
    border: 8px solid #202634;
    border-radius: 22px;
    background: linear-gradient(#fff, #f5f7fb);
    overflow: hidden;
    transition: inline-size 180ms ease;
}

.akava-btt-preview[data-device="mobile"] {
    inline-size: min(100%, 230px);
    margin-inline: auto;
    min-block-size: 420px;
    border-radius: 30px;
}

.akava-btt-preview::before {
    content: "";
    position: absolute;
    inset-block-start: 8px;
    inset-inline-start: 50%;
    inline-size: 44px;
    block-size: 5px;
    border-radius: 999px;
    background: #d8dce4;
    transform: translateX(-50%);
}

[dir="rtl"] .akava-btt-preview::before {
    transform: translateX(50%);
}

.akava-btt-preview__page {
    display: grid;
    gap: 10px;
    padding: 54px 24px 24px;
}

.akava-btt-preview__line {
    display: block;
    inline-size: 100%;
    block-size: 8px;
    border-radius: 999px;
    background: #e6eaf0;
}

.akava-btt-preview__line--title {
    inline-size: 74%;
    block-size: 16px;
    background: #c8d2e5;
}

.akava-btt-preview__line--short {
    inline-size: 58%;
}

.akava-btt-preview-button {
    position: absolute;
    display: grid;
    place-items: center;
    inline-size: 54px;
    block-size: 54px;
    padding: 0;
    border: 0 solid #fff;
    border-radius: 999px;
    background: linear-gradient(145deg, #2563eb, #1d4ed8);
    color: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .22);
    isolation: isolate;
    cursor: default;
}

.akava-btt-preview-button[data-shape="rounded"] {
    border-radius: 16px;
}

.akava-btt-preview-button[data-shape="square"] {
    border-radius: 7px;
}

.akava-btt-preview-button[data-style="solid"] {
    background: var(--preview-start, #2563eb);
}

.akava-btt-preview-button::before,
.akava-btt-preview-button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.akava-btt-preview-button[data-style="glass"] {
    background: rgba(248, 250, 252, .2);
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--preview-start, #2563eb) 24%, rgba(255, 255, 255, .28)),
            color-mix(in srgb, var(--preview-end, #1d4ed8) 18%, rgba(255, 255, 255, .08)));
    border-width: max(1px, var(--preview-border-width, 0px));
    border-color: rgba(255, 255, 255, .48);
    box-shadow:
        0 10px 30px rgba(15, 23, 42, .2),
        0 1px 0 rgba(255, 255, 255, .32),
        inset 0 1px 0 rgba(255, 255, 255, .72),
        inset 0 -1px 0 rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(20px) saturate(1.7) brightness(1.08);
    backdrop-filter: blur(20px) saturate(1.7) brightness(1.08);
}

.akava-btt-preview-button[data-style="glass"]::before {
    inset: 1px;
    opacity: 1;
    background: linear-gradient(150deg, rgba(255, 255, 255, .68) 0%, rgba(255, 255, 255, .18) 30%, transparent 58%);
}

.akava-btt-preview-button[data-style="glass"]::after {
    opacity: 1;
    background:
        radial-gradient(circle at 26% 17%, rgba(255, 255, 255, .42), transparent 38%),
        linear-gradient(180deg, transparent 48%, rgba(15, 23, 42, .13) 100%);
}

.akava-btt-preview-button[data-style="outline"] {
    background: transparent;
    background: color-mix(in srgb, var(--preview-start, #2563eb) 7%, transparent);
    color: var(--preview-start, #2563eb);
    border-width: max(2px, var(--preview-border-width, 0px));
    border-color: currentColor;
}

.akava-btt-preview-button__icon svg,
.akava-btt-preview-button__icon img {
    display: block;
    inline-size: var(--preview-icon-size, 24px);
    block-size: var(--preview-icon-size, 24px);
}

.akava-btt-preview-button__icon img {
    object-fit: contain;
}



.akava-btt-preview-button__tooltip {
    position: absolute;
    z-index: 5;
    inline-size: max-content;
    max-inline-size: 170px;
    padding: 6px 8px;
    border-radius: 7px;
    background: #111827;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
}

.akava-btt-preview-button[data-position^="bottom-"] .akava-btt-preview-button__tooltip {
    inset-block-end: calc(100% + 8px);
}

.akava-btt-preview-button[data-position^="top-"] .akava-btt-preview-button__tooltip {
    inset-block-start: calc(100% + 8px);
}

.akava-btt-preview-button[data-position$="-start"] .akava-btt-preview-button__tooltip {
    inset-inline-start: 0;
}

.akava-btt-preview-button[data-position$="-end"] .akava-btt-preview-button__tooltip {
    inset-inline-end: 0;
}


.akava-btt-admin__actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.akava-btt-admin__actions .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 40px;
    margin: 0;
}

.akava-btt-admin__privacy-note {
    margin: 0;
    padding-inline: 8px;
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
    color: var(--akava-admin-muted);
}


.akava-btt-admin__page-title {
    margin-block: 18px 10px;
    font-size: clamp(24px, 2vw, 34px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.025em;
    color: #0f172a;
}

.akava-btt-admin>.notice,
.akava-btt-admin>.updated,
.akava-btt-admin>.error {
    margin: 12px 0 18px;
}

.akava-btt-admin__hero .akava-btt-admin__hero-title {
    max-inline-size: 760px;
    margin: 2px 0 8px;
    font-size: clamp(19px, 1.5vw, 25px);
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -.018em;
    color: #0f172a;
}

.akava-btt-review-prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-inline-size: 760px;
    margin-block-start: 18px;
    padding: 12px 14px;
    border: 1px solid #cfe0ff;
    border-radius: 14px;
    background: rgba(239, 246, 255, .72);
}

.akava-btt-review-prompt__copy {
    display: grid;
    gap: 3px;
    min-inline-size: 0;
}

.akava-btt-review-prompt__copy strong {
    font-size: 12px;
    line-height: 1.35;
    color: #173b78;
}

.akava-btt-review-prompt__copy span {
    font-size: 11px;
    line-height: 1.45;
    color: #50658a;
}

.akava-btt-review-prompt__actions,
.akava-btt-review-prompt__actions form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.akava-btt-review-prompt__actions {
    flex: 0 0 auto;
}

.akava-btt-review-prompt__actions .button {
    min-block-size: 32px;
    margin: 0;
}

.akava-btt-review-prompt__link {
    padding: 2px 4px;
    border: 0;
    background: transparent;
    color: #50658a;
    font-size: 11px;
    line-height: 1.4;
    cursor: pointer;
}

.akava-btt-review-prompt__link:hover,
.akava-btt-review-prompt__link:focus-visible {
    color: #173b78;
    text-decoration: underline;
}

.akava-btt-review-prompt__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.akava-btt-device-visibility {
    padding: 0;
    margin: 0;
    border: 0;
}

.akava-btt-device-visibility>legend {
    margin-block-end: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #344054;
}

.akava-btt-device-visibility>div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.akava-btt-device-switch {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.akava-btt-device-switch__button:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .28);
    outline-offset: 2px;
}

.akava-btt-device-panels {
    margin-block-start: 18px;
}

.akava-btt-device-panel[hidden] {
    display: none;
}

.akava-btt-fields--profile {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.akava-btt-preview[data-device="tablet"] {
    inline-size: min(100%, 310px);
    margin-inline: auto;
    min-block-size: 410px;
    border-radius: 24px;
}

.akava-btt-preview-button {
    inset-block-start: auto;
    inset-block-end: auto;
    inset-inline-start: auto;
    inset-inline-end: auto;
    transition: opacity 140ms ease;
}

.akava-btt-preview-button[data-device-enabled="0"] {
    opacity: .35;
}

.akava-btt-preview-button__motion {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: inherit;
    z-index: 1;
}

.akava-btt-preview-button__icon {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    inline-size: auto;
    block-size: auto;
    z-index: 2;
}

svg.akava-btt__svg,
.akava-btt-preview-button__icon img {
    inline-size: var(--preview-icon-size, 24px) !important;
    block-size: var(--preview-icon-size, 24px) !important;
    max-inline-size: none !important;
    max-block-size: none !important;
}

svg.akava-btt__svg,
svg.akava-btt__svg * {
    fill: none !important;
    stroke: currentColor !important;
}

svg.akava-btt-preview-button__progress[hidden],
svg.akava-btt-preview-button__progress.is-hidden {
    display: none !important;
}

svg.akava-btt-preview-button__progress {
    position: absolute;
    inset: 1px;
    inline-size: calc(100% - 2px) !important;
    block-size: calc(100% - 2px) !important;
    max-inline-size: none !important;
    max-block-size: none !important;
    z-index: 3;
    border: 0 !important;
    border-radius: 0;
    transform: rotate(-90deg);
    overflow: visible;
    pointer-events: none;
}

svg.akava-btt-preview-button__progress *,
.akava-btt-preview-button__progress-track,
.akava-btt-preview-button__progress-value {
    fill: none !important;
}

.akava-btt-preview-button__progress-track,
.akava-btt-preview-button__progress-value {
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    stroke-dashoffset: 0;
}

.akava-btt-preview-button__progress-track {
    stroke: currentColor !important;
    stroke-dasharray: none;
    opacity: .16;
}

.akava-btt-preview-button__progress-value {
    stroke: var(--preview-progress, #93c5fd) !important;
    stroke-dasharray: 0 999;
    stroke-linecap: round;
}

.akava-btt-preview-button__progress-shape--rounded,
.akava-btt-preview-button__progress-shape--square {
    display: none;
}

.akava-btt-preview-button[data-shape="rounded"] .akava-btt-preview-button__progress-shape--circle,
.akava-btt-preview-button[data-shape="square"] .akava-btt-preview-button__progress-shape--circle {
    display: none;
}

.akava-btt-preview-button[data-shape="rounded"] .akava-btt-preview-button__progress-shape--rounded,
.akava-btt-preview-button[data-shape="square"] .akava-btt-preview-button__progress-shape--square {
    display: inline;
}

.akava-btt-preview-button[data-position="top-start"] {
    inset-block-start: min(var(--preview-offset-block, 24px), 120px);
    inset-inline-start: min(var(--preview-offset-inline, 18px), 120px);
}

.akava-btt-preview-button[data-position="top-end"] {
    inset-block-start: min(var(--preview-offset-block, 24px), 120px);
    inset-inline-end: min(var(--preview-offset-inline, 18px), 120px);
}

.akava-btt-preview-button[data-position="bottom-start"] {
    inset-block-end: min(var(--preview-offset-block, 18px), 120px);
    inset-inline-start: min(var(--preview-offset-inline, 18px), 120px);
}

.akava-btt-preview-button[data-position="bottom-end"] {
    inset-block-end: min(var(--preview-offset-block, 18px), 120px);
    inset-inline-end: min(var(--preview-offset-inline, 18px), 120px);
}

#akava-btt-reset-form {
    display: none;
}

@media (max-width: 1200px) {
    .akava-btt-admin__layout {
        grid-template-columns: 1fr;
    }

    .akava-btt-admin__sidebar {
        position: static;
        grid-template-columns: minmax(280px, 420px) 1fr;
        align-items: start;
    }

    .akava-btt-admin__actions,
    .akava-btt-admin__privacy-note {
        grid-column: 2;
    }
}

@media (max-width: 900px) {

    .akava-btt-fields,
    .akava-btt-fields--compact {
        grid-template-columns: 1fr 1fr;
    }

    .akava-btt-position-grid {
        grid-template-columns: 1fr 1fr;
    }

    .akava-btt-colors {
        grid-template-columns: repeat(3, 1fr);
    }

    .akava-btt-admin__sidebar {
        grid-template-columns: 1fr;
    }

    .akava-btt-admin__actions,
    .akava-btt-admin__privacy-note {
        grid-column: auto;
    }
}

@media (max-width: 782px) {
    .akava-btt-admin {
        margin-inline-end: 10px;
    }

    .akava-btt-admin__hero,
    .akava-btt-card {
        padding: 18px;
    }

    .akava-btt-admin__hero,
    .akava-btt-card__heading {
        display: grid;
    }

    .akava-btt-card__heading p {
        text-align: start;
    }

    .akava-btt-fields,
    .akava-btt-fields--compact,
    .akava-btt-colors {
        grid-template-columns: 1fr;
    }

    .akava-btt-field--wide,
    .akava-btt-colors {
        grid-column: auto;
    }

    .akava-btt-admin__actions {
        grid-template-columns: 1fr;
    }

    .akava-btt-review-prompt,
    .akava-btt-review-prompt__actions,
    .akava-btt-review-prompt__actions form {
        align-items: flex-start;
        justify-content: flex-start;
    }

    .akava-btt-review-prompt {
        display: grid;
    }
}


@media (max-width: 900px) {

    .akava-btt-device-visibility>div,
    .akava-btt-fields--profile {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 782px) {

    .akava-btt-device-visibility>div,
    .akava-btt-fields--profile {
        grid-template-columns: 1fr;
    }
}

@media (forced-colors: active) {

    .akava-btt-device-switch__button.is-active,
    .akava-btt-position:has(input:checked) {
        border: 1px solid Highlight;
    }

    .akava-btt-preview-button {
        forced-color-adjust: none;
        color: ButtonText !important;
        background: ButtonFace !important;
        border: 2px solid ButtonText !important;
        box-shadow: none !important;
    }

    .akava-btt-preview-button__progress-value {
        stroke: Highlight !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    .akava-btt-admin *,
    .akava-btt-admin *::before,
    .akava-btt-admin *::after {
        transition-duration: .001ms;
    }
}

/* 2.2 product features */
.akava-btt-field textarea {
    inline-size: 100%;
    min-block-size: 112px;
    padding: 10px 12px;
    border-color: #cfd5df;
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    text-align: start;
    direction: ltr;
    resize: vertical;
}

.akava-btt-field textarea:focus {
    border-color: var(--akava-admin-primary);
    box-shadow: 0 0 0 1px var(--akava-admin-primary);
}

.akava-btt-feature {
    grid-column: 1 / -1;
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid #d8e3fb;
    border-radius: 14px;
    background: linear-gradient(135deg, #f8fbff, #fff);
}

.akava-btt-feature.is-enabled {
    border-color: #9bb8f8;
    box-shadow: inset 3px 0 0 var(--akava-admin-primary);
}

[dir="rtl"] .akava-btt-feature.is-enabled {
    box-shadow: inset -3px 0 0 var(--akava-admin-primary);
}

.akava-btt-feature__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 360px);
    gap: 18px;
    align-items: center;
}

.akava-btt-feature__intro>div:first-child {
    display: grid;
    gap: 5px;
}

.akava-btt-feature__intro>div:first-child strong {
    font-size: 15px;
    color: #172033;
}

.akava-btt-feature__intro>div:first-child span {
    font-size: 12px;
    line-height: 1.55;
    color: var(--akava-admin-muted);
}

.akava-btt-feature__intro .akava-btt-toggle {
    min-block-size: 70px;
}

.akava-btt-feature__label {
    padding-block-start: 14px;
    border-block-start: 1px solid #e5ebf7;
}

.akava-btt-smart-dock {
    margin-block-start: 22px;
}

.akava-btt-smart-dock__fields {
    padding-block-start: 14px;
    border-block-start: 1px solid #e5ebf7;
}

.akava-btt-smart-dock__fields.is-disabled {
    opacity: .58;
}

.akava-btt-icon-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(82px, 1fr));
    gap: 10px;
    padding: 0;
    margin: 0;
    border: 0;
}

.akava-btt-icon-grid>legend {
    grid-column: 1 / -1;
    margin-block-end: 2px;
    font-size: 12px;
    font-weight: 700;
    color: #344054;
}

.akava-btt-icon-choice {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 7px;
    min-inline-size: 0;
    padding: 11px 7px;
    border: 1px solid #dfe3ea;
    border-radius: 10px;
    background: #fafbfc;
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.akava-btt-icon-choice:hover,
.akava-btt-icon-choice:has(input:checked) {
    border-color: #88a8f8;
    background: var(--akava-admin-primary-soft);
}

.akava-btt-icon-choice input {
    position: absolute;
    opacity: 0;
    inline-size: 1px;
    block-size: 1px;
}

.akava-btt-icon-choice input:focus-visible+.akava-btt-icon-choice__icon {
    outline: 3px solid rgba(37, 99, 235, .28);
    outline-offset: 3px;
}

.akava-btt-icon-choice__icon {
    display: grid;
    place-items: center;
    inline-size: 38px;
    block-size: 38px;
    border-radius: 10px;
    background: #fff;
    color: #2459c4;
}

.akava-btt-icon-choice__icon svg,
.akava-btt-icon-choice__icon img {
    inline-size: 23px !important;
    block-size: 23px !important;
    max-inline-size: 23px !important;
    max-block-size: 23px !important;
    object-fit: contain;
}

.akava-btt-icon-choice__icon strong,
.akava-btt-icon-choice strong {
    max-inline-size: 100%;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: #475467;
    overflow-wrap: anywhere;
}

.akava-btt-state-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 3px;
    border-radius: 9px;
    background: #eef1f5;
}

.akava-btt-state-switch__button {
    padding: 6px 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #667085;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.akava-btt-state-switch__button.is-active {
    background: #fff;
    color: #2459c4;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .12);
}

.akava-btt-state-switch__button:disabled {
    opacity: .42;
    cursor: not-allowed;
}

.akava-btt-state-switch__button:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .28);
    outline-offset: 2px;
}

.akava-btt-preview-button__icon--top,
.akava-btt-preview-button__icon--return {
    transition: opacity 160ms ease, transform 180ms ease;
}

.akava-btt-preview-button__icon--return {
    opacity: 0;
    transform: translateY(-5px) scale(.86);
}

.akava-btt-preview-button[data-state="return"] .akava-btt-preview-button__icon--top {
    opacity: 0;
    transform: translateY(5px) scale(.86);
}

.akava-btt-preview-button[data-state="return"] .akava-btt-preview-button__icon--return {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.akava-btt-preview-button__return-cue {
    position: absolute;
    z-index: 6;
    inset-block-start: 50%;
    inline-size: max-content;
    min-inline-size: min(7.5rem, 60vw);
    max-inline-size: min(170px, calc(100vw - 40px));
    padding: 7px 9px;
    border-radius: 8px;
    background: #111827;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    text-align: start;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) scale(.96);
}

.akava-btt-preview-button__return-cue>span {
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.akava-btt-preview-button[data-state="return"] .akava-btt-preview-button__return-cue {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}

.akava-btt-preview-button[data-state="return"] .akava-btt-preview-button__tooltip {
    display: none;
}

.akava-btt-preview-button[data-position$="-start"] .akava-btt-preview-button__return-cue {
    inset-inline-start: calc(100% + 8px);
}

.akava-btt-preview-button[data-position$="-end"] .akava-btt-preview-button__return-cue {
    inset-inline-end: calc(100% + 8px);
}

@media (max-width: 1100px) {
    .akava-btt-icon-grid {
        grid-template-columns: repeat(4, minmax(82px, 1fr));
    }
}

@media (max-width: 782px) {
    .akava-btt-feature__intro {
        grid-template-columns: 1fr;
    }

    .akava-btt-icon-grid {
        grid-template-columns: repeat(3, minmax(78px, 1fr));
    }
}

@media (forced-colors: active) {

    .akava-btt-icon-choice:has(input:checked),
    .akava-btt-state-switch__button.is-active {
        border: 1px solid Highlight;
    }
}


.akava-btt-progress-scope {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--akava-admin-line);
    border-radius: 16px;
    background: var(--akava-admin-surface);
    background: color-mix(in srgb, var(--akava-admin-surface) 88%, transparent);
    transition: background-color 160ms ease, border-color 160ms ease;
}

.akava-btt-progress-scope.is-disabled {
    border-style: dashed;
    background: var(--akava-admin-bg);
}

.akava-btt-progress-scope [hidden] {
    display: none !important;
}

@media (max-width: 782px) {
    .akava-btt-progress-scope {
        grid-template-columns: 1fr;
    }
}


.akava-btt-developer-reference {
    margin-block-start: 18px;
    border: 1px solid var(--akava-admin-border, #d9e0ea);
    border-radius: 12px;
    background: #f8fafc;
}

.akava-btt-developer-reference>summary {
    padding: 13px 15px;
    font-weight: 700;
    cursor: pointer;
}

.akava-btt-developer-reference>summary:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .26);
    outline-offset: 2px;
}

.akava-btt-developer-reference>div {
    padding: 0 15px 15px;
    color: var(--akava-admin-muted, #667085);
}

.akava-btt-developer-reference dl {
    display: grid;
    grid-template-columns: minmax(180px, auto) 1fr;
    gap: 8px 14px;
    margin: 14px 0;
}

.akava-btt-developer-reference dt,
.akava-btt-developer-reference dd {
    margin: 0;
}

.akava-btt-developer-reference dd {
    color: #344054;
}

.akava-btt-admin__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-block: 22px 12px;
    padding-block-start: 18px;
    border-block-start: 1px solid var(--akava-admin-border, #d9e0ea);
    font-size: 12px;
    color: var(--akava-admin-muted, #667085);
}

.akava-btt-admin__footer a {
    font-weight: 650;
    text-decoration: none;
}

.akava-btt-admin__footer a:hover,
.akava-btt-admin__footer a:focus-visible {
    text-decoration: underline;
}

@media (max-width: 782px) {
    .akava-btt-developer-reference dl {
        grid-template-columns: 1fr;
    }

    .akava-btt-developer-reference dd {
        margin-block-end: 8px;
    }
}