/* 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: calc(100vw - 24px) !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;
    transition: none !important;
    /* padding/border-radius/background intentionally omitted:
       base CSS (and mobile media query) supply the correct values unchanged */
}

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

/* Custom tester margin offsets (em, set per-tester in admin).
   Left/right are applied here; top/bottom are handled in JS
   so they compose correctly with the size-based base padding. */
.mota-preview-editable {
    padding-left:  var(--mota-extra-pad-left,  0em);
    padding-right: var(--mota-extra-pad-right, 0em);
}
/* 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;
}
/* Use InterchangeVF for all toolbar and font name UI */
/* @font-face is injected via PHP in class-public.php (defaults to uploads folder) */
.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
 */

/* ─── Theme isolation reset ───
   Prevent host-theme rules (e.g. input[type="text"], button font-weight)
   from bleeding into the font-tester toolbar and its popouts. */
.mota-font-controls,
.mota-font-controls *,
.mota-font-controls input[type="text"],
.mota-font-controls input[type="range"],
.mota-font-controls input[type="color"],
.mota-font-controls input[type="checkbox"],
.mota-font-controls select,
.mota-font-controls button,
.mota-font-controls textarea {
    font-weight: normal !important;
    font-variation-settings: 'wght' 55, 'opsz' 30 !important;
    color: #2c3338 !important;
}

/* Toolbar button & text hover/active color isolation */
.mota-font-controls button:hover,
.mota-font-controls button:focus,
.mota-font-controls button:active,
.mota-font-controls select:hover,
.mota-font-controls select:focus {
    color: #2c3338 !important;
    text-decoration: none !important;
}

.mota-font-tester input[type="text"],
.mota-font-tester input[type="range"],
.mota-font-tester input[type="color"],
.mota-font-tester input[type="checkbox"],
.mota-font-tester select,
.mota-font-tester button,
.mota-font-tester textarea {
    all: revert;
    box-sizing: border-box;
    font-family: 'InterchangeVF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    font-weight: normal;
    font-variation-settings: 'wght' 55, 'opsz' 30;
    line-height: normal;
}

/* Re-apply our specific slider-value styles after the reset */
.mota-font-tester .mota-slider-value {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: #555 !important;
    font-size: 12px !important;
    width: 30px !important;
    min-width: 0 !important;
    max-width: 40px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    cursor: text !important;
    flex-shrink: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    border-radius: 0 !important;
}

.mota-font-tester .mota-slider-value:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* CSS Variables for dynamic colors and shadows */
:root {
    --shadow-color: 0, 0, 0;
}

.mota-font-tester {
    --text-color: currentColor;
    --shadow-color: 0, 0, 0;
    --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: absolute;
    top: 16px;
    cursor: pointer;
    text-decoration: none !important;
    border-bottom: none !important;
    color: inherit;
    font-size: 15px !important;
    font-variation-settings: 'wght' 55, 'opsz' 15 !important;
    z-index: 1000 !important;
    display: block;
    transition: opacity 0.2s ease, transform 0.15s ease-out, font-variation-settings 0.2s ease;
    transform: translateY(var(--family-name-offset, 0px));
}

.mota-font-family-name:hover {
    text-decoration: none;
    border-bottom: none !important;
    color: inherit;
    font-variation-settings: 'wght' 85, 'opsz' 15 !important;
}

.mota-font-family-name::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(var(--tooltip-x, 0px) + 10px);
    top: var(--tooltip-y, 0px);
    transform: translateY(calc(-100% - 8px));
    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;
    margin-bottom: 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;
}

/* Elevate any tester whose font-name tooltip is showing so it paints above the active tester */
.mota-font-tester:has(.mota-font-family-name:hover) {
    z-index: 10001 !important;
}

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

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

.mota-font-tester.not-editable,
.mota-font-tester.not-editable[data-show-menu="true"] {
    cursor: default;
}

/* 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: -81px;
    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: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

/* Font style dropdown */
.mota-font-style {
    flex: 1 1 0 !important;
    min-width: 80px !important;
    width: 0 !important;
    height: 28px !important;
    padding: 0 30px 0 12px !important;
    border: 1px solid #c3c4c7 !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #2c3338 !important;
    text-align: left !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: border-color 0.2s ease;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    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>') !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 10px 5px !important;
    margin: 0 !important;
    line-height: 28px !important;
    max-height: 28px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-indent: 0 !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    text-shadow: none !important;
    outline: none !important;
    cursor: pointer !important;
}

.mota-font-style:hover,
.mota-font-style:focus {
    border-color: var(--mid-grey) !important;
    outline: none !important;
    box-shadow: 0 0 0 1px var(--mid-grey) !important;
    background: #fff !important;
    color: #2c3338 !important;
}

.mota-font-style option {
    background: #fff !important;
    color: #2c3338 !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    font-family: 'InterchangeVF', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.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 {
    flex: 1 1 0;
    min-width: 80px;
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--border-grey);
    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 !important;
    display: block !important;
    flex: 1 1 0 !important;
    min-width: 80px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--border-grey) !important;
    border-radius: 3px !important;
}

.mota-dropdown-button {
    all: revert !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 8px !important;
    border: none !important;
    border-radius: 3px !important;
    background: #fff !important;
    background-image: none !important;
    font-size: 13px !important;
    font-family: 'InterchangeVF', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
    color: var(--dark-grey) !important;
    text-align: left !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background 0.15s ease !important;
    position: relative !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-decoration: none !important;
    text-transform: none !important;
    text-shadow: none !important;
    letter-spacing: 0.01em !important;
    line-height: 28px !important;
    height: 28px !important;
    outline: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    font-weight: normal !important;
    font-variation-settings: 'wght' 55, 'opsz' 30 !important;
}

.mota-dropdown-button:hover {
    background: var(--hover-grey) !important;
    color: var(--dark-grey) !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.mota-dropdown-button:focus {
    outline: none !important;
    box-shadow: none !important;
    background: #fff !important;
    color: var(--dark-grey) !important;
    text-decoration: none !important;
}

.mota-dropdown-button::after {
    content: '' !important;
    display: none !important;
}

.mota-custom-dropdown.open .mota-dropdown-button::after {
    display: none !important;
}


.mota-dropdown-list {
    display: none;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    width: max-content !important;
    min-width: 100% !important;
    background: rgba(255,255,255,.97) !important;
    background-image: none !important;
    border: 1px solid #c3c4c7 !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 20px rgba(var(--shadow-color), 0.18) !important;
    padding: 8px 0 !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transition: box-shadow 0.18s, background 0.18s !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(180,180,180,0.35) transparent;
    color: #2c3338 !important;
    text-shadow: none !important;
    text-transform: none !important;
    text-decoration: none !important;
    letter-spacing: 0.01em !important;
    line-height: normal !important;
    box-sizing: border-box !important;
    list-style: none !important;
}
.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 !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-family: 'InterchangeVF', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
    color: #2c3338 !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f1 !important;
    border-radius: 0 !important;
    transition: background-color 0.15s ease !important;
    text-decoration: none !important;
    text-transform: none !important;
    text-shadow: none !important;
    letter-spacing: 0.01em !important;
    line-height: normal !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    font-weight: normal !important;
    font-variation-settings: 'wght' 55, 'opsz' 30 !important;
    list-style: none !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
}

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

.mota-dropdown-item:hover,
.mota-dropdown-item.hover {
    background-color: var(--hover-grey) !important;
    background-image: none !important;
    color: #2c3338 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f1 !important;
}

.mota-dropdown-item:hover:last-child,
.mota-dropdown-item.hover:last-child {
    border-bottom: none !important;
}

.mota-dropdown-item.selected {
    background-color: var(--active-grey) !important;
    background-image: none !important;
    color: #2c3338 !important;
    font-weight: 500 !important;
    font-variation-settings: 'wght' 75, 'opsz' 30 !important;
}

/* Initial load — hide preview text until the custom font is ready, preventing FOUT */
.mota-font-tester.font-loading .mota-preview-editable {
    opacity: 0 !important;
}

/* 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 {
    background: var(--hover-grey) !important;
}

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

.mota-feature-group {
    position: relative;
}

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

.mota-button-group button:hover {
    color: #2c3338 !important;
    text-decoration: none !important;
}

.mota-button-group button.active {
    background: var(--active-grey) !important;
    color: #2c3338 !important;
}

.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:first-child {
    border-radius: 2px 0 0 2px;
}

.mota-button-group button:last-child {
    border-right: none !important;
    border-radius: 0 2px 2px 0;
}

/* Features button is not actually :last-child due to popup divs being siblings */
.mota-feature-group .mota-ot-button {
    border-right: none !important;
    border-radius: 0 2px 2px 0;
}

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

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

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

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

/* 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;
    cursor: pointer;
    font-size: 12px;
    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:first-child {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    pointer-events: none;
    z-index: 1;
    padding: 0 6px;
}

.mota-color-picker-anchor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: block;
}

/* Hide Pickr's default trigger button: we open via existing TEXT/BG buttons. */
.mota-color-picker-anchor .pcr-button {
    opacity: 0;
    width: 0;
    height: 0;
    padding: 0;
    border: 0;
}

/* When Pickr applies .pcr-button directly to the anchor element */
.mota-color-picker-anchor.pcr-button {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.mota-color-button input[type="hidden"] {
    display: none;
}

.mota-color-button:hover {
    background: var(--hover-grey) !important;
    color: #2c3338 !important;
}
/* Preserve inline color on TEXT button during hover */
.mota-color-group .mota-text-button:hover span:first-child {
    color: var(--mota-text-color) !important;
}
/* BG button hover: inline bg-color set by JS wins over hover-grey;
   filter gives subtle visual feedback without changing the color */
.mota-color-group .mota-bg-button:hover {
    filter: brightness(0.92);
}

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

/* Unified color picker popover styling (used in all browsers). */
.pcr-app.mota-color-picker-panel {
    z-index: 100030;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    box-shadow: 0 2px 20px rgba(var(--shadow-color), 0.18) !important;
    -webkit-box-shadow: 0 2px 20px rgba(var(--shadow-color), 0.18) !important;
    background: rgba(255,255,255,.97);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    padding: 8px;
}

.pcr-app.mota-color-picker-panel .pcr-interaction input {
    border-radius: 8px;
}

.pcr-app.mota-color-picker-panel.mota-color-picker-swatches {
    min-width: 0 !important;
    width: fit-content !important;
    padding: 8px !important;
}

.pcr-app.mota-color-picker-panel.mota-color-picker-swatches .pcr-selection,
.pcr-app.mota-color-picker-panel.mota-color-picker-swatches .pcr-interaction {
    display: none !important;
}

.pcr-app.mota-color-picker-panel.mota-color-picker-swatches .pcr-swatches {
    display: grid !important;
    grid-template-columns: repeat(7, 32px) !important;
    grid-template-rows: repeat(7, 32px) !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 224px !important;
}

.pcr-app.mota-color-picker-panel.mota-color-picker-swatches .pcr-swatches > button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: scale(1) !important;
    transform-origin: center center;
    transition: transform 0.08s ease-out !important;
    z-index: 1;
}

.pcr-app.mota-color-picker-panel.mota-color-picker-swatches .mota-swatch-tooltip {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -100%);
    background: rgba(255, 255, 255, 0.95) !important;
    color: #2c3338;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
    padding: 4px 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 100;
    font-family: 'InterchangeVF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif !important;
    font-size: 13px !important;
    font-variation-settings: 'wght' 55, 'opsz' 30 !important;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.pcr-app.mota-color-picker-panel.mota-color-picker-swatches .mota-swatch-tooltip.is-visible {
    opacity: 1;
}

.pcr-app.mota-color-picker-panel.mota-color-picker-swatches .pcr-swatches > button::before,
.pcr-app.mota-color-picker-panel.mota-color-picker-swatches .pcr-swatches > button::after {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    transition: box-shadow 0.08s ease-out !important;
}

.pcr-app.mota-color-picker-panel.mota-color-picker-swatches .pcr-swatches > button:hover {
    transform: scale(1.125) !important;
    border-radius: 4px !important;
    overflow: visible !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15) !important;
    filter: none !important;
    z-index: 3;
}

.pcr-app.mota-color-picker-panel.mota-color-picker-swatches .pcr-swatches > button.mota-swatch-selected {
    transform: scale(1.125) !important;
    border-radius: 4px !important;
    overflow: visible !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15) !important;
    filter: none !important;
    z-index: 2;
}

/* When hovering any OTHER swatch, suppress the selected highlight until hover ends */
.pcr-app.mota-color-picker-panel.mota-color-picker-swatches .pcr-swatches:hover > button.mota-swatch-selected:not(:hover) {
    transform: scale(1) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
    z-index: 1;
}

.pcr-app.mota-color-picker-panel.mota-color-picker-swatches .pcr-swatches > button:hover::before,
.pcr-app.mota-color-picker-panel.mota-color-picker-swatches .pcr-swatches > button:hover::after {
    border-radius: 4px !important;
}

.pcr-app.mota-color-picker-panel.mota-color-picker-swatches .pcr-swatches > button:hover::after {
    box-shadow: none !important;
}

/* Swatch button no-radius class for extra specificity */
.mota-swatch-no-radius {
    border-radius: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Target swatch buttons by element name and multiple selectors */
.pcr-swatches button,
.pcr-app .pcr-swatches button,
.mota-color-picker-panel button.pcr-button {
    border-radius: 0 !important;
}

/* Alignment is handled in JS via absolute left adjustments. */
.mota-color-picker-text.mota-color-picker-panel,
.mota-color-picker-bg.mota-color-picker-panel {
    transform: none !important;
}

/* 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 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    height: 4px !important;
    background: var(--active-grey) !important;
    border-radius: 2px !important;
    outline: none !important;
    box-shadow: none !important;
    touch-action: none !important;
    cursor: ew-resize !important;
}

.mota-slider-control input[type="range"]::-webkit-slider-runnable-track {
    height: 4px !important;
    background: var(--active-grey) !important;
    border-radius: 2px !important;
    border: none !important;
}

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

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

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

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

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

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

/* 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) !important;
    border-radius: 2px !important;
}

/* Font Preview */
.mota-font-preview {
    position: relative;
    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);
     /* JS updates vertical padding dynamically from font size.
         Keep a small fallback for first paint before JS runs. */
     padding-top: 10px;
     padding-bottom: 10px;
    padding-left: calc(50vw - 50% + 20px);
    padding-right: calc(50vw - 50% + 20px);
    box-sizing: border-box;
    transition: opacity 0.2s ease;
}

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

/* Contained background style — stays within the text area, no full-width bleed */
.mota-preview-container.mota-bg-contained {
    width: 100%;
    margin-left: 0;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 4px;
}

/* Single-line wrap style — no wrapping, horizontal scroll via wheel */
.mota-preview-editable.mota-single-line {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.mota-preview-editable.mota-single-line::-webkit-scrollbar {
    display: none;
}

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

/* Non-editable state — static text display */
.mota-font-tester.not-editable .mota-preview-editable {
    cursor: default;
    -webkit-user-select: text;
    user-select: text;
}

/* Unified hover — font name + preview behave as one block.
   Hovering either element dims text only; the background stays fully opaque.
   Keep selectors broad so it works even when show-menu is disabled. */
.mota-font-tester:not(.menu-active):not(.not-editable) .mota-preview-editable:hover,
.mota-font-tester:not(.menu-active):not(.not-editable) .mota-preview-container:hover .mota-preview-editable,
.mota-font-tester:not(.menu-active):not(.not-editable):has(.mota-font-family-name:hover) .mota-preview-editable {
    /* Override inline opacity set in JS during font transitions */
    opacity: 0.6 !important;
}

.mota-font-tester:not(.menu-active):not(.not-editable) .mota-font-family-name:hover,
.mota-font-tester:not(.menu-active):not(.not-editable):has(.mota-preview-container:hover) .mota-font-family-name {
    opacity: 1;
}

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

/* Hide trailing <br> Safari inserts inside contenteditable — prevents
   an extra empty line box from inflating the container height. */
.mota-preview-editable > br:last-child {
    display: none;
}

.mota-preview-editable {
    width: 100%;
    outline: none;
    border: none;
    background: transparent;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left:  var(--mota-extra-pad-left,  0em) !important;
    padding-right: var(--mota-extra-pad-right, 0em) !important;
    margin: 0 !important;
    /* Neutralise theme heading styles (h1–h6) so the tester's own
       inline font-size / line-height / color always take effect */
    text-transform: none !important;
    text-decoration: none !important;
    /* Clip extra space Safari adds below text in contenteditable */
    overflow: hidden;
    transition: font-family 0.2s ease-in-out,
                font-weight 0.2s ease-in-out,
                font-style 0.2s ease-in-out,
                opacity 0.28s ease-in-out !important;
}

.mota-font-family-name {
    transition: opacity 0.28s ease-in-out, transform 0.15s ease-out;
}

/* Text selection color — values set dynamically via JS custom properties
   so they always beat any theme ::selection rule regardless of source order. */
.mota-font-tester .mota-preview-editable::selection {
    color: var(--mota-selection-color, currentColor) !important;
    background-color: var(--mota-selection-bg, rgba(0,0,0,0.25)) !important;
}

.mota-font-tester .mota-preview-editable::-moz-selection {
    color: var(--mota-selection-color, currentColor) !important;
    background-color: var(--mota-selection-bg, rgba(0,0,0,0.25)) !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: 4px;
    box-shadow: 0 2px 20px rgba(var(--shadow-color), 0.18);
    z-index: 9999;
    width: 280px;
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(180,180,180,0.35) transparent;
    top: 100%;
    right: calc(50% + 1px);
    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: 4px 4px 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 {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 4px;
    border-bottom: 1px solid #f0f0f0;
}

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

.mota-variable-axis-label {
    font-size: 12px;
    font-weight: 500 !important;
    font-variation-settings: 'wght' 75, 'opsz' 30 !important;
    color: #23282d;
    white-space: nowrap;
    flex: 0 0 60px;
    text-align: left;
}

.mota-variable-axis-value {
    background: none !important;
    border: none !important;
    color: #555 !important;
    font-size: 12px !important;
    font-family: monospace !important;
    flex: 0 0 40px !important;
    text-align: right !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 40px !important;
    min-width: 0 !important;
    max-width: 40px !important;
    box-shadow: none !important;
    outline: none !important;
    -moz-appearance: textfield !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    line-height: normal !important;
    height: auto !important;
}

.mota-variable-axis-value::-webkit-inner-spin-button,
.mota-variable-axis-value::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

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

.mota-font-tester input[type="range"].mota-variable-axis-slider::-webkit-slider-runnable-track {
    height: 4px;
    background: var(--active-grey);
    border-radius: 2px;
    border: none;
}

.mota-font-tester input[type="range"].mota-variable-axis-slider::-moz-range-track {
    height: 4px;
    background: var(--active-grey);
    border-radius: 2px;
    border: none;
}

.mota-font-tester input[type="range"].mota-variable-axis-slider:focus {
    outline: none !important;
    box-shadow: none !important;
}

.mota-font-tester input[type="range"].mota-variable-axis-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px;
    height: 16px;
    margin-top: -6px;
    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);
    box-shadow: none;
}

.mota-font-tester input[type="range"].mota-variable-axis-slider::-webkit-slider-thumb:hover {
    background: rgba(250,250,250,1);
    border-color: var(--mid-grey);
}

.mota-font-tester input[type="range"].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);
    box-shadow: none;
}

.mota-font-tester input[type="range"].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) !important;
    color: white !important;
}

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

/* OpenType Features Controls */
.mota-opentype-controls {
    display: none;
    position: absolute;
    background: rgba(255,255,255,.97);
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    box-shadow: 0 2px 20px rgba(var(--shadow-color), 0.18);
    z-index: 9999;
    width: 280px;
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(180,180,180,0.35) transparent;
    top: 100%;
    left: calc(50% - 3px);
    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: 4px 4px 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;
    text-align: left !important;
}

/* OpenType Features List */
.mota-feature-list {
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(180,180,180,0.35) transparent;
    /* Right padding keeps tag bubbles clear of the scrollbar */
    padding-right: 10px;
}

.mota-feature-item {
    padding: 5px 0;
    border-bottom: 1px solid #f0f0f0;
    text-align: left !important;
}

.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;
    text-align: left !important;
}

.mota-feature-checkbox {
    margin: 0;
    flex-shrink: 0;
    width: 14px !important;
    height: 14px !important;
    accent-color: var(--dark-grey) !important;
    cursor: pointer;
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
}

.mota-feature-name {
    flex-grow: 1;
    color: #23282d;
    font-weight: 500 !important;
    font-variation-settings: 'wght' 75, 'opsz' 30 !important;
}

.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 Variable / OpenType / Feature-list panels */
.mota-variable-controls::-webkit-scrollbar,
.mota-opentype-controls::-webkit-scrollbar,
.mota-feature-list::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}

.mota-variable-controls::-webkit-scrollbar-thumb,
.mota-opentype-controls::-webkit-scrollbar-thumb,
.mota-feature-list::-webkit-scrollbar-thumb {
    background: rgba(180,180,180,0.35);
    border-radius: 6px;
}

.mota-variable-controls::-webkit-scrollbar-thumb:hover,
.mota-opentype-controls::-webkit-scrollbar-thumb:hover,
.mota-feature-list::-webkit-scrollbar-thumb:hover {
    background: rgba(120,120,120,0.35);
}

.mota-variable-controls::-webkit-scrollbar-track,
.mota-opentype-controls::-webkit-scrollbar-track,
.mota-feature-list::-webkit-scrollbar-track {
    background: transparent;
}

/* =====================================================================
   MOBILE RESPONSIVE — ≤700px
   ===================================================================== */

/* Chip popup — hidden by default; all positioning is here (outside media query)
   so the popup always renders correctly regardless of which breakpoint is active
   at the moment JS opens it. JS guard prevents it opening on wide screens.
   z-index: 10001 beats .mota-font-tester.menu-active stacking context (10000). */
.mota-chip-popup {
    display: none;
    position: fixed;
    left: 22px;
    right: 22px;
    background: rgba(255,255,255,0.97);
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    box-shadow: 0 2px 20px rgba(var(--shadow-color), 0.18);
    padding: 8px 14px;
    z-index: 10001;
    box-sizing: border-box;
}

.mota-chip-popup.open {
    display: block;
}

/* Hide mobile chips row on all screens by default */
.mota-mobile-chips-row {
    display: none !important;
}

@media (max-width: 700px) {

    /* Preview area: reduce horizontal indent so the full-bleed text uses more
       of the narrow screen. Base rule uses +20px; here we use +10px so the
       effective left/right margin from the viewport edge is ~30px instead of ~40px.
       .mota-bg-contained is excluded — it uses a fixed 20px gutter of its own. */
    .mota-preview-container:not(.mota-bg-contained) {
        padding-left:  calc(50vw - 50% + 10px) !important;
        padding-right: calc(50vw - 50% + 10px) !important;
    }

    /* Toolbar: full viewport width, lose the fixed 700px.
       top: -125px accounts for the taller 3-row mobile layout. */
    .mota-font-controls {
        width: calc(100vw - 24px) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 8px 10px 8px 10px !important;
        box-sizing: border-box !important;
        top: -125px !important;
    }

    /* Variable/OT popouts: position absolute, top:100% anchors below buttons.
       left/transform NOT set here — JS sets right-aligned position per-button. */
    .mota-variable-controls,
    .mota-opentype-controls {
        position: absolute !important;
        top: 100% !important;
        width: calc(100vw - 44px) !important;
        max-width: calc(100vw - 44px) !important;
    }

    /* Pickr color panels: let Pickr position them naturally (no override needed) */

    /* Row 1: style selector + Variable/Features — wrap freely */
    .mota-controls-row {
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 6px;
        justify-content: flex-start;
    }

    /* Style label (variable-only font): grow to fill remaining row 1 space */
    .mota-font-style-label {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
    }

    /* Native select — hidden in most cases, no need to grow */
    .mota-font-style {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        width: auto !important;
    }

    /* Custom dropdown (multiple styles): grow to fill the available row space */
    .mota-custom-dropdown {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Variable/Features buttons stay together on row 1 */
    .mota-placeholder-buttons {
        order: 2;
    }

    /* Invisible full-width spacer that forces a line break after row 1.
       flex-basis 100% means it takes a full row alone (0 height = invisible).
       order: 2 places it immediately after .mota-placeholder-buttons. */
    .mota-controls-row::after {
        content: '';
        flex: 0 0 100%;
        height: 0;
        order: 2;
    }

    /* Row 2: alignment, columns, colors — pushed to own line, spread out */
    .mota-alignment-group,
    .mota-column-group,
    .mota-color-group {
        order: 3;
        flex: 1 1 auto;
        justify-content: center;
    }

    /* Row 2: alignment buttons spread inside their group */
    .mota-alignment-group,
    .mota-column-group {
        display: flex;
    }

    .mota-alignment-group button,
    .mota-column-group button {
        flex: 1;
        /* Reduce min-width + padding so all 3 groups stay on one row until ~285px */
        min-width: 24px !important;
        padding: 0 3px !important;
    }

    /* Color buttons fill their group (group grows via flex:1 1 auto above) */
    .mota-color-group .mota-color-button {
        flex: 1;
        width: auto !important;
    }

    /* Give row 2 groups a visual separator from row 1 */
    .mota-alignment-group {
        margin-left: 0;
    }

    /* Hide desktop slider row, show mobile chip row */
    .mota-slider-row {
        display: none !important;
    }

    .mota-mobile-chips-row {
        display: flex !important;
        gap: 8px;
        margin-top: 8px;
    }

    /* Individual chip — higher specificity to beat all:revert on .mota-font-tester button */
    .mota-font-tester .mota-chip {
        flex: 1;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 5px;
        height: 28px !important;
        padding: 0 8px !important;
        background: #f5f5f5 !important;
        border: 1px solid var(--border-grey) !important;
        border-radius: 4px !important;
        cursor: pointer !important;
        font-family: 'InterchangeVF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        font-size: 13px !important;
        color: #2c3338 !important;
        white-space: nowrap !important;
        box-shadow: none !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
        line-height: 1 !important;
        text-decoration: none !important;
    }

    .mota-font-tester .mota-chip:hover,
    .mota-font-tester .mota-chip:focus {
        background: #e8e8e8 !important;
        outline: none !important;
        box-shadow: none !important;
        border-color: #bbb !important;
    }

    .mota-font-tester .mota-chip.active {
        background: #e8e8e8 !important;
        color: #2c3338 !important;
        border-color: #bbb !important;
    }

    .mota-font-tester .mota-chip.active:hover,
    .mota-font-tester .mota-chip.active:focus {
        background: #ddd !important;
        color: #2c3338 !important;
        outline: none !important;
        box-shadow: none !important;
    }

    /* Variable axis slider thumb: enlarged on mobile to match chip popup thumb */
    .mota-font-tester input[type="range"].mota-variable-axis-slider::-webkit-slider-thumb {
        width: 24px !important;
        height: 20px !important;
        margin-top: -8px !important;
    }

    .mota-font-tester input[type="range"].mota-variable-axis-slider::-moz-range-thumb {
        width: 24px !important;
        height: 20px !important;
    }

    .mota-chip-label {
        font-variation-settings: 'wght' 65, 'opsz' 30;
        opacity: 0.7;
    }

    .mota-chip-value {
        font-variation-settings: 'wght' 75, 'opsz' 30;
    }

    /* Chip popup: just a bare slider, no label */
    .mota-chip-popup-label,
    .mota-chip-popup-current {
        display: none !important;
    }

    /* Chip popup range: match desktop slider custom skewed-rectangle thumb */
    .mota-chip-popup input[type="range"] {
        width: 100%;
        display: block;
        margin: 0;
        -webkit-appearance: none;
        appearance: none;
        height: 4px;
        background: transparent;
        border-radius: 2px;
        outline: none;
        box-shadow: none;
        touch-action: none;
        cursor: pointer;
    }

    .mota-chip-popup input[type="range"]::-webkit-slider-runnable-track {
        height: 4px;
        background: rgba(220,220,220,0.7);
        border-radius: 2px;
        border: none;
    }

    .mota-chip-popup input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 24px;
        height: 20px;
        margin-top: -8px;
        background: rgba(250,250,250,0.95);
        border: 1px solid #c3c4c7;
        border-radius: 0;
        cursor: pointer;
        transform: skewX(-10deg);
        transition: background 0.2s ease, border 0.2s ease;
        box-shadow: none;
    }

    .mota-chip-popup input[type="range"]:hover::-webkit-slider-thumb {
        background: rgba(250,250,250,1);
        border-color: #6c757d;
    }

    .mota-chip-popup input[type="range"]::-moz-range-thumb {
        width: 24px;
        height: 20px;
        background: rgba(250,250,250,0.95);
        border: 1px solid #c3c4c7;
        border-radius: 0;
        cursor: pointer;
        transform: skewX(-10deg);
        transition: background 0.2s ease, border 0.2s ease;
        box-shadow: none;
    }

    .mota-chip-popup input[type="range"]:hover::-moz-range-thumb {
        background: rgba(250,250,250,1);
        border-color: #6c757d;
    }

    .mota-chip-popup input[type="range"]::-moz-range-track {
        background: rgba(220,220,220,0.7);
        border-radius: 2px;
        height: 4px;
    }
}

/* ── Gutenberg block context ─────────────────────────────────────────────
   PHP stamps .mota-in-block on the tester when the post uses the block
   editor. The shortcode lives inside a constrained column so the default
   20px text indent (which is intentional on wider regular pages) pushes
   the sample text away from the block's left edge in a way that looks wrong.

   Full-width bg:  bg already bleeds to the viewport (unchanged); strip the
                   extra +20px so sample text aligns flush with the block edge.
   Contained bg:   bg stays cropped to the column (no full-bleed change);
                   strip the 20px side padding for the same flush alignment.
   Font name:      shift it 20px left of the column edge so it maintains the
                   same position relative to the text start as on regular pages
                   (where the font name sits 20px to the left of the text). ─── */

/* Full-width bg: remove the +20px extra indent */
.mota-in-block .mota-preview-container:not(.mota-bg-contained) {
    padding-left:  calc(50vw - 50%) !important;
    padding-right: calc(50vw - 50%) !important;
}

/* Contained bg: extend 40px to the left and 20px to the right of the column.
   padding-left: 40px keeps text flush with the column left edge (40px from bg
   left edge); font name at left:-20px sits 20px inside the bg left edge. */
.mota-in-block .mota-preview-container.mota-bg-contained {
    width: calc(100% + 60px) !important;
    margin-left: -40px !important;
    padding-left: 40px !important;
    padding-right: 20px !important;
}

/* Font name: 20px left of column edge → 20px inside the extended bg left */
.mota-in-block .mota-font-family-name {
    left: -20px;
}

/* Add breathing room between a font tester section and a following paragraph section */
.large-section:has(.mota-font-tester) + .medium-section-small {
    padding-top: 1.5em;
}