/* Sticky toolbar class for scroll-triggered sticky */
.mota-font-controls.mota-sticky-toolbar {
    position: fixed !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 700px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 20px rgba(var(--shadow-color), 0.18) !important;
    margin: 0 !important;
    z-index: 3000 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    display: block !important;
    padding: 10px 22px 14px 12px !important;
    border-radius: 4px !important;
    background: rgba(255,255,255,.97) !important;
    transition: none !important;
}

/* Ensure dropdowns within sticky toolbar are visible */
.mota-font-controls.mota-sticky-toolbar .mota-dropdown-list {
    z-index: 3001 !important;
}

/* Show i-beam cursor when hovering over editable text */
.mota-preview-editable,
.mota-preview-editable:focus,
.mota-preview-editable:hover {
    cursor: text !important;
}
/* Force webkit color swatch backgrounds to transparent white */
input[type="color"]::-webkit-color-swatch-wrapper,
input[type="color"]::-webkit-color-swatch {
    background: rgba(255,255,255,.97) !important;
    border: none !important;
    box-shadow: none !important;
}

/* Force entire iris/wp color picker to always render in light mode */
.mota-font-controls .wp-picker-container,
.mota-font-controls .wp-picker-holder,
.mota-font-controls .iris-picker,
.mota-font-controls .iris-picker-inner,
.mota-font-controls .iris-border,
.mota-font-controls .iris-square,
.mota-font-controls .iris-square-inner,
.mota-font-controls .iris-strip,
.mota-font-controls .iris-slider,
.mota-font-controls .iris-slider-offset,
.mota-font-controls .iris-palette,
.mota-font-controls .iris-palette-container,
.mota-font-controls .iris-palette-row,
.mota-font-controls .iris-swatch,
.mota-font-controls .iris-hex,
.mota-font-controls .wp-color-result,
.mota-font-controls .wp-color-result-text {
    color-scheme: light !important;
    color: #1d2327 !important;
    background-color: #fff !important;
    border-color: #8c8f94 !important;
}

.mota-font-controls .iris-picker,
.mota-font-controls .iris-border {
    box-shadow: 0 3px 6px rgba(0,0,0,0.15) !important;
}

.mota-font-controls .iris-palette,
.mota-font-controls .iris-palette-container,
.mota-font-controls .iris-palette-row,
.mota-font-controls .iris-swatch {
    background: #fff !important;
    border: none !important;
    box-shadow: none !important;
}

.mota-font-controls .iris-hex {
    background: #fff !important;
    color: #1d2327 !important;
    border: 1px solid #8c8f94 !important;
}

input[type="color"],
.iris-picker,
.iris-border,
.wp-picker-holder {
    background: rgba(255,255,255,.97) !important;
}
@font-face {
    font-family: 'InterchangeVF';
    src: url('../../interface_fonts/Interchange.woff2') format('woff2');
    font-weight: 1 999;
    font-stretch: 75% 125%;
    font-style: normal;
}

/* Use InterchangeVF for all toolbar and font name UI */
.mota-font-controls,
.mota-font-controls *,
.mota-font-style-label,
.mota-font-family-name,
.mota-dropdown-button,
.mota-dropdown-list,
.mota-dropdown-item {
    font-family: 'InterchangeVF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-variation-settings: 'wght' 55, 'opsz' 30;
    letter-spacing: 0.01em;
    font-size: 13px !important;
}
/**
 * Font Tester styles for Mota Font Manager
 */

/* CSS Variables for dynamic colors and shadows */
.mota-font-tester {
    --text-color: currentColor;
    --shadow-color: currentColor;
    --light-grey: #f8f9fa;
    --mid-grey: #6c757d;
    --dark-grey: #495057;
    --border-grey: #dee2e6;
    --hover-grey: rgba(230,230,230,0.5);
    --active-grey: rgba(220,220,220,0.7);
    /* Tooltip variables */
    --tooltip-x: 0px;
    --tooltip-y: 0px;
    --tooltip-shadow-color: rgba(0, 0, 0, 0.2);
}

/* Font Family Name Tooltip */
.mota-font-family-name {
    position: relative;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    font-size: 20px !important;
    font-variation-settings: 'wght' 75, 'opsz' 40 !important;
    z-index: 1000 !important;
    /* Full-bleed background that matches the preview container color */
    display: block;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-top: 12px;
    padding-bottom: 4px;
    padding-left: calc(50vw - 50% + 20px);
    padding-right: calc(50vw - 50% + 20px);
    box-sizing: border-box;
    background-color: var(--mota-bg-color, transparent);
    transition: opacity 0.2s ease;
}

.mota-font-family-name:hover {
    text-decoration: none;
    color: inherit;
}

.mota-font-family-name::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(var(--tooltip-x, 0px) + 10px);
    top: calc(var(--tooltip-y, 0px) + 50px);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 14px !important;
    font-family: 'InterchangeVF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-variation-settings: 'wght' 55, 'opsz' 30;
    letter-spacing: 0.01em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    z-index: 999999 !important;
    transition: opacity 0.2s ease;
    box-shadow: 0 2px 8px var(--tooltip-shadow-color);
    font-weight: normal;
    line-height: 1.2;
}

.mota-font-family-name:hover::after {
    opacity: 1;
}

/* Ensure tooltip appears above other elements */
.mota-font-family-name:hover {
    z-index: 999999 !important;
}

/* Font Tester Container */
.mota-font-tester {
    position: relative;
    z-index: 1;
    margin-top: 0 !important;
}

/* When a font tester is active, give it higher z-index than inactive ones */
.mota-font-tester.menu-active {
    z-index: 10000;
}

/* Ensure inactive font testers stay below active ones */
.mota-font-tester:not(.menu-active) {
    z-index: 1;
}

/* Control visibility of edit menu */
.mota-font-tester[data-show-menu="false"] {
    cursor: text;
}

.mota-font-tester[data-show-menu="true"] {
    cursor: pointer;
}

/* Font Controls Container */
.mota-font-controls {
    display: block;
    position: absolute;
    background: rgba(255,255,255,.97);
    border: 1px solid var(--border-grey);
    border-radius: 4px;
    box-shadow: 0 2px 20px rgba(var(--shadow-color), 0.18);
    padding: 10px 12px 9px 12px;
    z-index: 2000;
    max-width: none !important;
    width: 700px !important;
    min-width: 700px !important;
    left: 50%;
    top: -79px;
    transform: translate(-50%, 0);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.6s ease-out, visibility 0.6s ease-out;
    box-sizing: border-box;
}

/* Show controls only when menu is enabled AND active */
.mota-font-tester[data-show-menu="true"].menu-active .mota-font-controls,
.mota-font-tester.menu-active[data-show-menu="true"] .mota-font-controls {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    transition: opacity 0.15s ease-in, visibility 0.15s ease-in;
}

/* Hide menu completely when disabled (no animation needed) */
.mota-font-tester[data-show-menu="false"] .mota-font-controls {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Top row controls */
.mota-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

/* Font style dropdown */
.mota-font-style {
    min-width: 140px;
    height: 28px;
    padding: 0 30px 0 12px;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    background: #fff;
    color: #2c3338;
    text-align: left;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s ease;
    appearance: none; /* Remove default arrow */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 10 5"><path fill="%236c757d" d="M0 0l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.mota-font-style:hover,
.mota-font-style:focus {
    border-color: var(--mid-grey);
    outline: none;
    box-shadow: 0 0 0 1px var(--mid-grey);
}

.mota-font-style,
.mota-font-style option {
    font-size: 12px !important;
    font-family: 'InterchangeVF', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Font style static label (for single font styles) */
.mota-font-style-label {
    min-width: 140px;
    height: 28px;
    padding: 0 12px;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    background: #fff;
    /* font-size: 12px !important; */
    font-family: 'InterchangeVF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: #2c3338;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    cursor: default;
}

/* Ensure hidden select in single style scenario is completely invisible */
.mota-font-style-label + .mota-font-style {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Enhanced hover states for font options */
.mota-font-style option:hover {
    background-color: var(--hover-grey);
    color: var(--dark-grey);
}

/* Custom Dropdown Styles */
.mota-custom-dropdown {
    position: relative;
    display: inline-block;
    min-width: 180px;
}

.mota-dropdown-button {
    width: 100%;
    min-width: 140px;
    padding: 7px 30px 7px 12px;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    background: #fff;
    font-size: 12px;
    font-family: 'InterchangeVF', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
    color: #2c3338;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mota-dropdown-button:hover {
    border-color: var(--mid-grey);
}

.mota-dropdown-button:focus {
    outline: none;
    border-color: var(--mid-grey);
    box-shadow: 0 0 0 1px var(--mid-grey);
}

.mota-dropdown-button::after {
    content: '▼';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--mid-grey);
    transition: transform 0.2s ease;
}

.mota-custom-dropdown.open .mota-dropdown-button::after {
    transform: translateY(-50%) rotate(180deg);
}


.mota-dropdown-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255,255,255,.97);
    border: 1px solid #c3c4c7;
    border-radius: 8px;
    box-shadow: 0 2px 20px rgba(var(--shadow-color), 0.18);
    max-height: 80vh;
    min-width: 180px;
    padding: 8px 0;
    overflow-y: auto;
    z-index: 9999; /* Higher than everything */
    margin-top: 4px;
    transition: box-shadow 0.18s, background 0.18s;
    scrollbar-width: thin;
    scrollbar-color: rgba(180,180,180,0.35) transparent;
}
.mota-dropdown-list::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}
.mota-dropdown-list::-webkit-scrollbar-thumb {
    background: rgba(180,180,180,0.35);
    border-radius: 6px;
}
.mota-dropdown-list::-webkit-scrollbar-thumb:hover {
    background: rgba(120,120,120,0.35);
}
.mota-dropdown-list::-webkit-scrollbar-track {
    background: transparent;
}
.mota-custom-dropdown.open .mota-dropdown-list {
    display: block;
}

.mota-dropdown-item {
    padding: 5px 12px;
    cursor: pointer;
    font-size: 12px;
    font-family: 'InterchangeVF', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
    color: #2c3338;
    border-bottom: 1px solid #f0f0f1;
    transition: background-color 0.15s ease;
}

.mota-dropdown-item:last-child {
    border-bottom: none;
}

.mota-dropdown-item:hover {
    background-color: var(--hover-grey);
}

.mota-dropdown-item.selected {
    background-color: var(--active-grey);
    font-weight: 500;
}

.mota-dropdown-item.hover {
    background-color: var(--hover-grey);
}

/* Loading state for font changes */
.mota-font-tester.loading .mota-preview-editable {
    transition: opacity 0.15s ease-out;
}

/* Smooth font transitions */
.mota-preview-editable {
    transition: font-family 0.15s ease-out,
                font-weight 0.15s ease-out,
                font-style 0.15s ease-out,
                opacity 0.15s ease-out;
}

/* Visual feedback during font preview - only highlight dropdown, no border on preview area */
.mota-font-tester.font-previewing .mota-custom-dropdown .mota-dropdown-button {
    border-color: var(--mid-grey);
    box-shadow: 0 0 0 1px var(--mid-grey);
}

/* Button groups */
.mota-button-group {
    display: flex;
    border: 1px solid var(--border-grey);
    border-radius: 3px;
    overflow: hidden;
}

.mota-button-group button {
    background: #fff;
    border: none;
    border-right: 1px solid var(--border-grey);
    padding: 0 6px;
    cursor: pointer;
    font-size: 11px;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
}

.mota-alignment-button svg {
    fill: var(--mid-grey);
    transition: fill 0.2s ease;
}

.mota-alignment-button:hover svg {
    fill: var(--dark-grey);
}

.mota-alignment-button.active svg {
    fill: var(--dark-grey);
}

.mota-button-group button:last-child {
    border-right: none;
}

.mota-button-group button.active {
    background: var(--active-grey);
}

/* Placeholder Buttons */
.mota-placeholder-buttons {
    display: flex;
    justify-content: center;
    min-width: fit-content;
    position: relative; /* For OpenType popup positioning */
}

/* Variable and OpenType buttons (inside button-group) */
.mota-feature-group .mota-var-button,
.mota-feature-group .mota-ot-button {
    padding: 0 8px;
    font-size: 12px;
    color: var(--dark-grey);
}

.mota-var-button:hover,
.mota-ot-button:hover {
    background: var(--hover-grey);
}

/* Apply hover style to alignment and column buttons */
.mota-alignment-button:hover,
.mota-column-button:hover {
    background: var(--hover-grey);
}

/* VAR greyed out when font has no variable axes */
.mota-var-button.disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* Color controls (grouped) */
.mota-color-group .mota-color-button {
    position: relative;
    background: #fff;
    border: none;
    border-right: 1px solid var(--border-grey);
    border-radius: 0;
    padding: 0 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    width: 52px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease;
}

.mota-color-group .mota-color-button:last-child {
    border-right: none;
}

.mota-color-button span {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
    z-index: 1;
}

.mota-color-button input[type="color"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    opacity: 0;
    background: rgba(255,255,255,.97) !important;
}

.mota-color-button:hover {
    background: var(--hover-grey);
}

.mota-color-button:active {
    transform: translateY(0);
}

/* Slider row — three equal sections */
.mota-slider-row {
    display: flex;
    align-items: center;
    gap: 26px;
}

.mota-slider-control {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.mota-slider-label {
    font-size: 12px;
    color: #333;
    white-space: nowrap;
    flex-shrink: 0;
}

.mota-slider-value {
    background: none;
    border: none;
    color: #555;
    font-size: 12px;
    width: 30px;
    text-align: left;
    padding: 0;
    margin: 0;
    cursor: text;
    flex-shrink: 0;
}

.mota-slider-value:focus {
    outline: none;
}

.mota-slider-control input[type="range"] {
    flex: 1;
    min-width: 0;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--active-grey);
    border-radius: 2px;
    outline: none;
    box-shadow: none;
}

/* Webkit slider thumb (Chrome, Safari, Edge) */
.mota-slider-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 16px;
    background: rgba(250,250,250,0.95);
    border: 1px solid #c3c4c7;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;
    transform: skewX(-10deg);
    box-shadow: none;
}
.mota-slider-control input[type="range"]:hover::-webkit-slider-thumb {
    background: rgba(250,250,250,1);
    border-color: var(--mid-grey);
}

/* Firefox */
.mota-slider-control input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 16px;
    background: rgba(250,250,250,0.95);
    border: 1px solid #c3c4c7;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;
    transform: skewX(-10deg);
    box-shadow: none;
}
.mota-slider-control input[type="range"]:hover::-moz-range-thumb {
    background: rgba(250,250,250,1);
    border-color: var(--mid-grey);
}

/* IE/Edge */
.mota-slider-control input[type="range"]::-ms-thumb {
    width: 20px;
    height: 16px;
    background: rgba(250,250,250,0.95);
    border: 1px solid #c3c4c7;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;
    transform: skewX(-10deg);
    box-shadow: none;
}
.mota-slider-control input[type="range"]:hover::-ms-thumb {
    background: rgba(250,250,250,1);
    border-color: var(--mid-grey);
}

/* Remove default focus outline for all browsers */
.mota-slider-control input[type="range"]:focus {
    outline: none;
    box-shadow: none;
}

/* Remove Firefox inner border */
.mota-slider-control input[type="range"]::-moz-focus-outer {
    border: 0;
}

/* Track color for Firefox */
.mota-slider-control input[type="range"]::-moz-range-track {
    background: var(--active-grey);
    border-radius: 2px;
    height: 4px;
}

/* Track color for IE/Edge */
.mota-slider-control input[type="range"]::-ms-fill-lower,
.mota-slider-control input[type="range"]::-ms-fill-upper {
    background: var(--active-grey);
    border-radius: 2px;
}

/* Font Preview */
.mota-font-preview {
    margin: 0 !important;
}

.mota-preview-container {
    /* Expand background to full viewport width while keeping text at its original width.
       margin-left shifts the box to the viewport left edge; padding-left/right compensate
       so the content area remains exactly as wide as it was at 100% of the parent. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: calc(50vw - 50% + 20px);
    padding-right: calc(50vw - 50% + 20px);
    box-sizing: border-box;
    overflow: hidden;
    transition: opacity 0.2s ease;
}

.mota-preview-container {
    transition: opacity 0.2s ease;
    opacity: 1;
}

/* Remove any blue borders or focus styling from preview area */
.mota-preview-container,
.mota-preview-editable {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.mota-preview-container:focus,
.mota-preview-editable:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Unified hover — font name + preview behave as one block.
   Hovering either element dims both, so they feel like a single band.
   :has() is used to reach "upward" when hovering the preview container.
   The background fades to 0.75; the text fades further to 0.5. */
.mota-font-tester[data-show-menu="true"]:not(.menu-active) .mota-preview-container:not(:focus-within):hover,
.mota-font-tester[data-show-menu="true"]:not(.menu-active):has(.mota-font-family-name:hover) .mota-preview-container:not(:focus-within) {
    opacity: 0.6;
}

.mota-font-tester[data-show-menu="true"]:not(.menu-active) .mota-preview-container:not(:focus-within):hover .mota-preview-editable,
.mota-font-tester[data-show-menu="true"]:not(.menu-active):has(.mota-font-family-name:hover) .mota-preview-container:not(:focus-within) .mota-preview-editable {
    opacity: 0.6;
}

.mota-font-tester[data-show-menu="true"]:not(.menu-active) .mota-font-family-name:hover,
.mota-font-tester[data-show-menu="true"]:not(.menu-active):has(.mota-preview-container:not(:focus-within):hover) .mota-font-family-name {
    opacity: 0.6;
}

/* Maintain full opacity when menu is active or being edited */
.mota-font-tester.menu-active .mota-preview-container,
.mota-font-tester .mota-preview-container:focus-within {
    opacity: 1 !important;
}

.mota-preview-editable {
    width: 100%;
    outline: none;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    transition: font-family 0.2s ease-in-out,
                font-weight 0.2s ease-in-out,
                font-style 0.2s ease-in-out;
}

/* Text selection color */
.mota-preview-editable::selection {
    color: currentColor;
    background-color: rgb(from currentColor r g b / 25%);
    -webkit-text-fill-color: currentColor;
}

.mota-preview-editable::-moz-selection {
    color: currentColor;
    background-color: rgb(from currentColor r g b / 25%);
    -webkit-text-fill-color: currentColor;
}

/* Make sure selection color overrides any page defaults */
.mota-font-tester .mota-preview-editable::selection {
    color: currentColor !important;
    background-color: rgb(from currentColor r g b / 25%) !important;
    -webkit-text-fill-color: currentColor !important;
}

.mota-font-tester .mota-preview-editable::-moz-selection {
    color: currentColor !important;
    background-color: rgb(from currentColor r g b / 25%) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Multi-column support */
.mota-preview-container.mota-preview-columns-1 .mota-preview-editable {
    column-count: 1;
    -webkit-column-count: 1;
    -moz-column-count: 1;
}

.mota-preview-container.mota-preview-columns-2 .mota-preview-editable {
    column-count: 2;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-gap: 20px;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
}

.mota-preview-container.mota-preview-columns-3 .mota-preview-editable {
    column-count: 3;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-gap: 20px;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
}

.mota-preview-container.mota-preview-columns-4 .mota-preview-editable {
    column-count: 4;
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-gap: 20px;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
}

/* Actions */
.mota-font-actions {
    display: none;
    position: absolute;
    bottom: -45px;
    right: 0;
    background: white;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid var(--border-grey);
    box-shadow: 0 2px 4px rgba(from var(--shadow-color) r g b / 0.1);
}

.mota-font-actions button {
    padding: 8px 15px;
    background: var(--dark-grey);
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
}

.mota-font-actions button:hover {
    background: var(--mid-grey);
}

.mota-font-actions button.secondary {
    background: var(--light-grey);
    color: var(--dark-grey);
    border: 1px solid var(--border-grey);
}

.mota-font-actions button.secondary:hover {
    background: var(--hover-grey);
}

.mota-font-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Loading State - COMPLETELY DISABLED to prevent persistent loading indicators */
.mota-font-tester.loading::after,
.mota-font-tester.loading::before,
.mota-font-tester::after,
.mota-font-tester::before {
    display: none !important;
    content: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* Additional loading state overrides */
.mota-font-tester.loading,
.mota-font-tester[data-loading="true"],
.mota-font-tester[aria-busy="true"] {
    position: relative;
}

.mota-font-tester.loading *,
.mota-font-tester[data-loading="true"] *,
.mota-font-tester[aria-busy="true"] * {
    animation: none !important;
    transform: none !important;
}

/* Disable any spinning animations globally within font testers */
.mota-font-tester *[class*="spin"],
.mota-font-tester *[class*="rotate"],
.mota-font-tester *[class*="loading"] {
    animation: none !important;
    transform: none !important;
}

/* Error State */
.mota-font-tester.font-error .mota-preview-container {
    border: 1px solid #d63638;
}

.mota-font-tester.font-error::before {
    content: '⚠️ Font loading failed';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    text-align: center;
    color: #d63638;
    font-size: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Font Link */
.mota-font-link {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-grey);
}

.mota-font-link a {
    display: inline-block;
    padding: 8px 15px;
    background: var(--dark-grey);
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    font-size: 14px;
}

.mota-font-link a:hover {
    background: var(--mid-grey);
}

/* Font Link dialog */
.mota-link-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.mota-link-dialog-content {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    max-width: 600px;
    width: 90%;
}

.mota-link-dialog-header {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.mota-link-dialog-header h3 {
    margin: 0;
}

.mota-link-dialog-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 20px;
    color: #333;
}

.mota-link-dialog-body {
    margin-bottom: 15px;
}

.mota-link-dialog-footer {
    text-align: right;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.mota-link-dialog-footer button {
    padding: 8px 15px;
    background: var(--dark-grey);
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    margin-left: 10px;
}

.mota-link-dialog-footer button.secondary {
    background: var(--light-grey);
    color: var(--dark-grey);
    border: 1px solid var(--border-grey);
}

/* Variable Font Controls Popout */
.mota-variable-controls {
    display: none;
    position: absolute;
    background: rgba(255,255,255,.97);
    border: 1px solid #c3c4c7;
    border-radius: 8px;
    box-shadow: 0 2px 20px rgba(var(--shadow-color), 0.18);
    z-index: 9999;
    width: 280px;
    max-height: 400px;
    overflow-y: auto;
    top: 100%;
    left: 0;
    transition: box-shadow 0.18s, background 0.18s;
    font-family: 'InterchangeVF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    letter-spacing: 0.01em;
}

.mota-variable-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
    position: sticky;
    top: 0;
}

.mota-variable-header h4 {
    margin: 0;
    font-size: 14px !important;
    font-family: 'InterchangeVF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-variation-settings: 'wght' 75, 'opsz' 35;
    letter-spacing: 0.01em;
    color: #23282d;
}

.mota-variable-content {
    padding: 4px 8px 8px;
}

.mota-variable-axis {
    padding: 7px 4px;
    border-bottom: 1px solid #f0f0f0;
}

.mota-variable-axis:last-child {
    border-bottom: none;
}

.mota-variable-axis-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.mota-variable-axis-label {
    font-size: 13px;
    font-weight: 600;
    color: #23282d;
}

.mota-variable-axis-value {
    font-size: 12px;
    font-family: monospace;
    color: var(--dark-grey);
    background: var(--hover-grey);
    padding: 2px 6px;
    border-radius: 3px;
    min-width: 40px;
    text-align: center;
}

.mota-variable-axis-slider-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
}

.mota-variable-axis-min,
.mota-variable-axis-max {
    font-size: 11px;
    color: #666;
    font-family: monospace;
    flex-shrink: 0;
}

.mota-variable-axis-slider {
    flex: 1;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--active-grey);
    border-radius: 2px;
    outline: none;
    margin: 0;
}

.mota-variable-axis-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 16px;
    background: rgba(250,250,250,0.95);
    border-radius: 0;
    border: 1px solid #c3c4c7;
    cursor: pointer;
    transition: background 0.2s ease, border 0.2s ease;
    transform: skewX(-10deg);
}

.mota-variable-axis-slider::-webkit-slider-thumb:hover {
    background: rgba(250,250,250,1);
    border-color: var(--mid-grey);
}

.mota-variable-axis-slider::-moz-range-thumb {
    width: 20px;
    height: 16px;
    background: rgba(250,250,250,0.95);
    border-radius: 0;
    border: 1px solid #c3c4c7;
    cursor: pointer;
    transition: background 0.2s ease, border 0.2s ease;
    transform: skewX(-10deg);
}

.mota-variable-axis-slider::-moz-range-thumb:hover {
    background: rgba(250,250,250,1);
    border-color: var(--mid-grey);
}

/* VAR button active state */
.mota-var-button.active {
    background: var(--dark-grey);
    color: white;
}

/* OT/Features button active state */
.mota-ot-button.active {
    background: var(--dark-grey);
    color: white;
}

/* OpenType Features Controls */
.mota-opentype-controls {
    display: none;
    position: absolute;
    background: rgba(255,255,255,.97);
    border: 1px solid #c3c4c7;
    border-radius: 8px;
    box-shadow: 0 2px 20px rgba(var(--shadow-color), 0.18);
    z-index: 9999;
    width: 280px;
    max-height: 400px;
    overflow-y: auto;
    top: 100%;
    left: 22px;
    transition: box-shadow 0.18s, background 0.18s;
    font-family: 'InterchangeVF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-variation-settings: 'wght' 65, 'opsz' 35;
    letter-spacing: 0.01em;
}

.mota-opentype-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
    position: sticky;
    top: 0;
}

.mota-opentype-header h4 {
    margin: 0;
    font-size: 14px !important;
    font-family: 'InterchangeVF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-variation-settings: 'wght' 75, 'opsz' 35;
    letter-spacing: 0.01em;
    color: #23282d;
}

.mota-opentype-content {
    padding: 8px;
}

/* OpenType Features List */
.mota-feature-list {
    max-height: 300px;
    overflow-y: auto;
    /* Right padding keeps tag bubbles clear of the scrollbar */
    padding-right: 10px;
}

.mota-feature-item {
    padding: 5px 0;
    border-bottom: 1px solid #f0f0f0;
}

.mota-feature-item:last-child {
    border-bottom: none;
}

.mota-feature-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.4;
    gap: 8px;
}

.mota-feature-checkbox {
    margin: 0;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    accent-color: #495057;
    cursor: pointer;
}

.mota-feature-name {
    flex-grow: 1;
    color: #23282d;
    font-weight: 500;
}

.mota-feature-tag {
    background: #f1f1f1;
    color: #666;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: normal;
    flex-shrink: 0;
}

.mota-feature-label:hover .mota-feature-tag {
    background: #e1e1e1;
}

/* Loading and error states */
.mota-loading-features,
.mota-no-features {
    text-align: center;
    padding: 20px;
    color: #666;
    font-style: italic;
}

.mota-loading-features {
    color: #0073aa;
}

/* Custom scrollbar for OpenType controls */
.mota-opentype-controls::-webkit-scrollbar {
    width: 6px;
}

.mota-opentype-controls::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.mota-opentype-controls::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.mota-opentype-controls::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}