/**
 * AumCreate Theme Admin Styles
 *
 * @package    AumCreate
 * @author     AumCreate <aumcreate@gmail.com>
 * @license    GPL-2.0+
 * @link       https://aumcreate.com
 * @copyright  2025 AumCreate
 * @since      1.0.0
 */

/* ==========================================================================
   #GLOBAL ADMIN STYLE OVERRIDES
   ========================================================================== */
/**
 * Remove left padding from WordPress admin content area
 */
.toplevel_page_aumcreate-settings #wpcontent {
    padding-left: 0;
}

.nav-tab.aum-tab-disabled{
  pointer-events: none;
  opacity: .45;
}

/* ==========================================================================
   #MAIN SETTINGS CONTAINER
   ========================================================================== */
/**
 * Main settings wrapper styling
 */
.aumcreate-settings-wrap {
    margin: 0;
    background: #fff;
    padding: 20px 30px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   #TAB NAVIGATION
   ========================================================================== */
/**
 * Tab navigation styling for settings sections
 */
.nav-tab-wrapper {
    margin: 20px 0;
    border-bottom: 1px solid #ccc;
}

.nav-tab {
    padding: 10px 15px;
    margin-right: 5px;
    background: #f5f5f5;
    border: 1px solid #ccc;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    text-decoration: none;
    color: #555;
    font-weight: 600;
}

.nav-tab-active {
    background: #fff;
    border-bottom-color: #fff;
    margin-bottom: -1px;
    color: #e8501a;
}

.notice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ==========================================================================
   #SETTINGS SECTIONS
   ========================================================================== */
/**
 * Styling for individual settings sections
 */
.settings-section {
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

.settings-section:last-child {
    border-bottom: none;
}

/* ==========================================================================
   #FORM TABLE ENHANCEMENTS
   ========================================================================== */
/**
 * Improved styling for WordPress form tables
 */
.form-table th {
    width: 200px;
    padding-left: 10px;
}

.form-table td {
    padding: 15px 10px;
}

/* ==========================================================================
   #COLOR PICKER STYLES
   ========================================================================== */
/**
 * Custom styling for WordPress color picker
 */
.wp-picker-container {
    vertical-align: middle;
}

.wp-picker-input-wrap {
    display: inline-block;
    margin-left: 10px;
}

.wp-color-picker {
    width: 100px !important;
}/* Installation status messages */
.install-status {
    margin-top: 5px;
    font-size: 13px;
    min-height: 18px;
}

.install-status.success {
    color: #46b450;
}

.install-status.error {
    color: #dc3232;
}

.plugin-info a.loading {
    background: none !important;
    border: none;
}

.plugin-info a.loading:focus,
.plugin-info a.loading:active {
    background: none !important;
    border: none !important;
}

/* ==========================================================================
   #THEME MODE SETTINGS
   ========================================================================== */
/**
 * Styling for theme mode selection
 */
.form-table td fieldset label.aum-modes-label {
    margin-right: 10px !important;
}

/* ==========================================================================
   #COLOR SETTINGS GROUP
   ========================================================================== */
/**
 * Layout for grouped color settings
 */
.color-settings-group {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 24px;
    max-width: 860px;
}

.color-settings-group .color-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.color-settings-group .color-field label {
    font-weight: 600;
    font-size: 12px;
    color: #3c434a;
    white-space: nowrap;
}

.color-settings-group .wp-picker-container {
    width: 100%;
    position: relative;
    /* Height is determined by the button only */
    display: flex;
    flex-direction: column;
}

.color-settings-group .color-field .wp-picker-container .wp-color-result.button {
    width: 100% !important;
    box-sizing: border-box;
    flex-shrink: 0;
}

.color-settings-group .wp-picker-container .wp-picker-input-wrap {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 9999;
    background: #fff;
    white-space: nowrap;
}

.color-settings-group .wp-picker-container .wp-picker-holder {
    position: absolute;
    top: calc(100% + 32px);
    left: 0;
    z-index: 9998;
}

.color-field .wp-picker-container .wp-color-result.button {
    margin: 0 !important;
}

.aum-alpha-color-picker {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-top: 6px;
}

.aum-alpha-color-picker .color-preview {
    width: 30px;
    height: 30px;
    border-radius: 3px;
    border: 1px solid #ddd;
    cursor: pointer;
}

.aum-alpha-color-picker .alpha-slider {
    position: absolute;
    top: 35px;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    border-radius: 3px;
}

.aum-alpha-color-picker .alpha-slider .slider-handle {
    position: absolute;
    top: -3px;
    width: 6px;
    height: 16px;
    background: #fff;
    border: 1px solid #999;
    border-radius: 3px;
    cursor: ew-resize;
}

.custom-colors-list {
    margin-bottom: 20px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #fff;
    padding: 15px;
}

.custom-color-item {
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #f9f9f9;
    position: relative;
}

.custom-color-item:last-child {
    margin-bottom: 0;
}

.color-field {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.color-field label {
    font-weight: 600;
    margin-right: 10px;
}

.color-field input[type="text"] {
    flex: 1;
    max-width: 300px;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    height: 32px;
}

.aum-color-picker-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
    vertical-align: middle;
}

.aum-color-preview {
    width: 30px;
    height: 30px;
    border-radius: 3px;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 10px;
}

.aum-color-preview:hover {
    border-color: #999;
}

.aum-color-picker-popup {
    position: absolute;
    z-index: 9999;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    display: none;
    left: 0;
    top: 40px;
}

.aum-color-picker-main {
    display: flex;
    margin-bottom: 15px;
    gap: 10px;
}

.aum-color-spectrum {
    width: 200px;
    height: 150px;
    position: relative;
    cursor: crosshair;
    border-radius: 3px;
    overflow: hidden;
    background:
        linear-gradient(to bottom, transparent, rgba(0, 0, 0, 1)),
        linear-gradient(to right, white, hsl(var(--current-hue), 100%, 50%));
}

.aum-color-hue-slider {
    width: 25px;
    height: 150px;
    cursor: ns-resize;
    position: relative;
    border-radius: 3px;
    overflow: hidden;
}

.aum-color-hue-slider .aum-color-handle {
    left: 50%;
    top: 0%;
    transform: translate(-50%, -50%);
}

.aum-color-alpha-slider {
    width: 100%;
    height: 25px;
    margin-bottom: 15px;
    cursor: ew-resize;
    position: relative;
    border-radius: 3px;
    overflow: hidden;
    background: linear-gradient(to right, rgba(0, 0, 0, 0), currentColor);
}

.aum-color-alpha-slider .aum-color-handle {
    left: 0%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.aum-color-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
}

.aum-color-controls {
    display: flex;
    gap: 8px;
    flex-direction: column;
    align-items: center;
}

.aum-color-controls input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
    height: 36px;
}

.aum-color-controls input:focus {
    border-color: #e8501a;
    box-shadow: 0 0 0 1px #e8501a;
    outline: none;
}

.remove-custom-color {
    position: absolute;
    right: 15px;
    bottom: 15px;
    background: #dc3232;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
}

.remove-custom-color:hover {
    background: #a00;
}

.add-custom-color {
    margin-top: 10px;
    background: #e8501a;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 3px;
    cursor: pointer;
}

.add-custom-color:hover {
    background: #c23f12;
}

.description {
    margin-top: 10px;
    color: #666;
    font-style: italic;
    font-size: 13px;
}

@media (max-width: 782px) {
    .color-field {
        flex-direction: column;
        align-items: flex-start;
    }

    .color-field label {
        width: 100%;
        margin-bottom: 5px;
    }

    .aum-color-picker-popup {
        left: -100px;
    }

    .aum-color-spectrum {
        width: 180px;
    }
}

/* ==========================================================================
   #LOGO UPLOAD AREA
   ========================================================================== */
/**
 * Styling for logo upload/preview components
 */
.logo-upload-wrapper {
    margin-bottom: 15px;
}

.logo-preview {
    margin-top: 10px;
}

.logo-preview img {
    max-height: 100px;
    display: block;
    border: 1px solid #ddd;
    padding: 2px;
    background: #fff;
}

.logo-remove-button {
    margin-left: 5px !important;
}

.dark-logo-preview img {
    background-color: #555;
}

/* ==========================================================================
   #TOGGLE SWITCH COMPONENT
   ========================================================================== */
/**
 * Custom toggle switch styling
 */
.aum-toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    margin-right: 10px;
}

.aum-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.aum-toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.aum-toggle-switch .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
}

.aum-toggle-switch input:checked+.slider {
    background-color: #e8501a;
}

.aum-toggle-switch input:focus+.slider {
    box-shadow: 0 0 1px #e8501a;
}

.aum-toggle-switch input:checked+.slider:before {
    transform: translateX(26px);
}

.aum-toggle-switch .slider.round {
    border-radius: 24px;
}

.aum-toggle-switch .slider.round:before {
    border-radius: 50%;
}

/* ==========================================================================
   #RESPONSIVE ADJUSTMENTS
   ========================================================================== */
/**
 * Mobile responsive styles
 */
@media (max-width: 782px) {
    .form-table th {
        width: 100%;
        display: block;
        padding: 5px 0;
    }

    .form-table td {
        display: block;
        padding: 5px 0 15px;
    }
}

.default-avatar-library {
    max-width: 800px;
}

.avatar-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 15px 0;
}

.avatar-item {
    width: 60px;
    height: 60px;
    cursor: pointer;
    border: 2px solid #ddd;
    border-radius: 50%;
    padding: 2px;
    transition: border-color 0.3s ease;
}

.avatar-item:hover {
    border-color: #e8501a;
}

.avatar-item.selected {
    border-color: #e8501a;
    box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.3);
}

.avatar-item img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.current-avatar-preview {
    margin: 15px 0;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.current-avatar-preview img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid #e8501a;
    object-fit: cover;
}

.carousel-item {
    transition: border-color 0.3s ease;
}
.carousel-item:hover {
    border-color: #e8501a !important;
}
.carousel-image-item {
    position: relative;
    transition: transform 0.3s ease;
}
.carousel-image-item:hover {
    transform: scale(1.05);
}
.remove-carousel-image {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.carousel-image-item:hover .remove-carousel-image {
    opacity: 1;
}

.ui-state-highlight {
    height: 110px;
    width: 110px;
    border: 2px dashed #ccc;
    background: #f7f7f7;
}
.carousel-sortable-item.ui-sortable-helper {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transform: rotate(2deg);
}
.carousel-sortable-item:hover {
    border-color: #e8501a;
}

/* Re-point the WordPress admin accent colour to the brand. admin.css loads
   ONLY on this settings page, so this recolours checkboxes, radios, focus
   rings, links and secondary buttons here without affecting the rest of wp-admin. */
:root,
body.wp-admin {
    --wp-admin-theme-color: #e8501a !important;
    --wp-admin-theme-color-darker-10: #d6471a !important;
    --wp-admin-theme-color-darker-20: #c23f12 !important;
}

/* Links/buttons that hard-code the WP blue (colors.min.css) rather than the var. */
.aumcreate-settings-wrap .wp-core-ui .button,
.aumcreate-settings-wrap .wp-core-ui .button:hover,
.aumcreate-settings-wrap .wp-core-ui .button:focus {
    color: #e8501a !important;
    border-color: #e8501a !important;
}

/* Brand-orange accent for WordPress-core buttons + nav tabs.
   admin.css loads only on this settings page, so these are page-scoped. */
.button-primary,
.button-primary:focus {
    background: #e8501a !important;
    border-color: #c23f12 !important;
    color: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.button-primary:hover {
    background: #c23f12 !important;
    border-color: #c23f12 !important;
}

.nav-tab-active,
.nav-tab-active:focus,
.nav-tab-active:hover {
    color: #e8501a !important;
    box-shadow: inset 0 -2px 0 #e8501a;
}

.wp-core-ui .button-primary.disabled,
.wp-core-ui .button-primary:disabled {
    background: #f3b39c !important;
    border-color: #f3b39c !important;
    color: #fff !important;
}

/* ==========================================================================
   #AML SKIN — match the AumLang / AumViso plugin admin design (cards, tabs,
   branded header). Chrome only: NO field name/id or save-logic changes.
   Scoped to .aumcreate-settings-wrap so it never leaks to other admin pages.
   ========================================================================== */
.aumcreate-settings-wrap.aml-app {
    --aml-brand: #e8501a;
    --aml-brand-dark: #c23f12;
    --aml-ink: #1d2327;
    --aml-muted: #646970;
    --aml-faint: #8c8f94;
    --aml-line: #e4e4e7;
    /* Let the grey wp-admin background show through so cards pop. */
    background: transparent;
    box-shadow: none;
    padding: 0;
    /* Full width like the original page (don't cap it), with a right gap. */
    margin: 0 22px 0 0;
    max-width: none;
}

.toplevel_page_aumcreate-settings #wpcontent { padding-left: 20px; }
.aumcreate-settings-wrap.aml-app .dashicons { line-height: 1; }

/* Header */
.aumcreate-settings-wrap .aml-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0 22px;
}
.aumcreate-settings-wrap .aml-logo {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--aml-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex: 0 0 auto;
}
.aumcreate-settings-wrap .aml-logo .dashicons { font-size: 26px; width: 26px; height: 26px; }
.aumcreate-settings-wrap .aml-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    color: var(--aml-ink);
}
.aumcreate-settings-wrap .aml-badge {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--aml-brand-dark);
    background: #fce6dc;
    padding: 2px 9px;
    border-radius: 20px;
}
.aumcreate-settings-wrap .aml-subtitle { margin: 2px 0 0; color: var(--aml-muted); font-size: 13px; }

/* Tabs — underline style like the plugins */
.aumcreate-settings-wrap .nav-tab-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid var(--aml-line);
    margin: 0 0 20px;
    padding: 0;
}
.aumcreate-settings-wrap .nav-tab {
    background: transparent;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: 9px 9px 0 0;
    margin: 0 0 -1px;
    padding: 10px 15px;
    font-size: 13px;
    font-weight: 600;
    color: var(--aml-muted);
    transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.aumcreate-settings-wrap .nav-tab:hover { color: var(--aml-ink); background: #faf6f4; }
.aumcreate-settings-wrap .nav-tab-active,
.aumcreate-settings-wrap .nav-tab-active:hover,
.aumcreate-settings-wrap .nav-tab-active:focus {
    background: transparent;
    color: var(--aml-brand-dark) !important;
    border-bottom-color: var(--aml-brand);
    box-shadow: none;
}

/* Sections → cards */
.aumcreate-settings-wrap .settings-section {
    background: #fff;
    border: 1px solid var(--aml-line);
    border-radius: 14px;
    padding: 6px 22px 18px;
    margin: 0 0 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.aumcreate-settings-wrap .settings-section > h2 {
    font-size: 15px;
    font-weight: 600;
    color: var(--aml-ink);
    margin: 0;
    padding: 16px 0 4px;
}

/* Form-table rows inside cards */
.aumcreate-settings-wrap .form-table { margin-top: 4px; }
.aumcreate-settings-wrap .form-table tr { border-top: 1px solid var(--aml-line); }
.aumcreate-settings-wrap .form-table tr:first-child { border-top: 0; }
.aumcreate-settings-wrap .form-table th {
    width: 230px;
    padding: 18px 14px 18px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--aml-ink);
    vertical-align: top;
}
.aumcreate-settings-wrap .form-table td { padding: 16px 0; }
.aumcreate-settings-wrap .form-table .description { color: var(--aml-muted); }

/* Inputs — rounded to match the plugins */
.aumcreate-settings-wrap .form-table input[type="text"],
.aumcreate-settings-wrap .form-table input[type="url"],
.aumcreate-settings-wrap .form-table input[type="number"],
.aumcreate-settings-wrap .form-table input[type="email"],
.aumcreate-settings-wrap .form-table select,
.aumcreate-settings-wrap .form-table textarea {
    border-radius: 8px;
}
.aumcreate-settings-wrap .form-table input[type="text"]:focus,
.aumcreate-settings-wrap .form-table input[type="url"]:focus,
.aumcreate-settings-wrap .form-table input[type="number"]:focus,
.aumcreate-settings-wrap .form-table select:focus,
.aumcreate-settings-wrap .form-table textarea:focus {
    border-color: var(--aml-brand);
    box-shadow: 0 0 0 1px var(--aml-brand);
}

/* Save button row sits below the cards */
.aumcreate-settings-wrap p.submit { margin: 4px 0 24px; padding: 0; }

/* Import/Export tab — card each block (it's custom HTML, not a settings-section) */
.aumcreate-settings-wrap .aumcreate-import-export > div {
    background: #fff;
    border: 1px solid var(--aml-line);
    border-radius: 14px;
    padding: 16px 22px;
    margin: 0 0 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.aumcreate-settings-wrap .aumcreate-import-export > hr { display: none; }
.aumcreate-settings-wrap .aumcreate-import-export h2 {
    font-size: 15px;
    font-weight: 600;
    color: var(--aml-ink);
    margin: 0 0 8px;
}

/* Plugins-required notice — align radius with the card system */
.aumcreate-settings-wrap .aum-plugins-notice { border-radius: 14px; }

/* ==========================================================================
   #FONT PICKER
   --------------------------------------------------------------------------
   A dropdown whose rows are drawn in their own faces, plus a live sample.
   `.afp-ready` is added by font-picker.js, so with no JS the native <select>
   stays visible and everything below simply never appears.
   ========================================================================== */

.aumcreate-settings-wrap .aum-fontpick { position: relative; max-width: 420px; }

.aumcreate-settings-wrap .aum-fontpick.afp-ready > .aum-font-select { display: none; }

/* ── Trigger ── */
.aumcreate-settings-wrap .afp-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    color: var(--aml-ink);
}
.aumcreate-settings-wrap .afp-trigger:hover { border-color: #b9b9bd; }
.aumcreate-settings-wrap .afp-trigger:focus-visible,
.aumcreate-settings-wrap .afp-trigger[aria-expanded="true"] {
    outline: none;
    border-color: var(--aml-brand);
    box-shadow: 0 0 0 1px var(--aml-brand);
}
.aumcreate-settings-wrap .afp-trigger-label {
    font-size: 17px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aumcreate-settings-wrap .afp-caret {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--aml-muted);
    border-bottom: 1.5px solid var(--aml-muted);
    transform: translateY(-2px) rotate(45deg);
}

/* ── Panel ── */
.aumcreate-settings-wrap .afp-panel {
    position: absolute;
    z-index: 100;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    min-width: 320px;
    background: #fff;
    border: 1px solid var(--aml-line);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    overflow: hidden;
}
.aumcreate-settings-wrap .afp-search-wrap { padding: 10px; border-bottom: 1px solid var(--aml-line); }
.aumcreate-settings-wrap .afp-search {
    width: 100%;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid #dcdcde;
    border-radius: 6px;
    font-size: 13px;
}
.aumcreate-settings-wrap .afp-search:focus {
    border-color: var(--aml-brand);
    box-shadow: 0 0 0 1px var(--aml-brand);
}

.aumcreate-settings-wrap .afp-offline {
    padding: 8px 12px;
    background: #fcf6ee;
    border-bottom: 1px solid var(--aml-line);
    color: #8a6d3b;
    font-size: 12px;
    line-height: 1.5;
}

.aumcreate-settings-wrap .afp-list { max-height: 360px; overflow-y: auto; padding: 6px; }

.aumcreate-settings-wrap .afp-group {
    padding: 10px 8px 4px;
    color: var(--aml-faint);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.aumcreate-settings-wrap .afp-row {
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--aml-ink);
    /* The point of the whole component: 20px so the letterforms are actually legible. */
    font-size: 20px;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* `display:block` above outranks the UA sheet's `[hidden]{display:none}` — filtering needs this back. */
.aumcreate-settings-wrap .afp-row[hidden],
.aumcreate-settings-wrap .afp-group[hidden] { display: none; }
.aumcreate-settings-wrap .afp-row:hover { background: #f6f7f7; }
.aumcreate-settings-wrap .afp-row:focus-visible { outline: none; background: #f0f0f1; box-shadow: inset 0 0 0 1px var(--aml-brand); }
.aumcreate-settings-wrap .afp-row.is-selected { background: #fdf0ea; color: var(--aml-brand-dark); }

.aumcreate-settings-wrap .afp-empty { padding: 16px 12px; color: var(--aml-muted); font-size: 13px; }

/* ── Sample ── */
.aumcreate-settings-wrap .aum-font-preview {
    margin-top: 10px;
    padding: 14px 16px;
    background: #fbfbfc;
    border: 1px solid var(--aml-line);
    border-radius: 10px;
    color: var(--aml-ink);
}
/* Regular weight on purpose: a 700 face would cost 2.5x the bytes for one line. */
.aumcreate-settings-wrap .aum-font-preview .afp-big { font-size: 34px; line-height: 1.2; font-weight: 400; }
.aumcreate-settings-wrap .aum-font-preview .afp-line { margin-top: 6px; font-size: 16px; line-height: 1.5; }
/* Only rendered when the site is written in a non-Latin script — see font_sample_locale(). */
.aumcreate-settings-wrap .aum-font-preview .afp-locale { margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--aml-muted); }