/**

 * VoxFor Mega Menu Admin Styles

 * Version: 2.2.0

 * Author: VoxFor Team

 */



/* Base Admin Styles */

.voxfor-mega-menu-admin {

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

}



.voxfor-mega-menu-admin .wp-heading-inline {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

}



.voxfor-mega-menu-admin .wp-heading-inline i {

    font-size: 28px;

    color: #2563eb;

}



/* Admin Header & Navigation */

.voxfor-admin-header {

    background: #fff;

    border: 1px solid #e5e7eb;

    border-radius: 8px;

    margin-bottom: 20px;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

}



.voxfor-admin-nav {

    display: flex;

    border-bottom: none;

}



.voxfor-admin-nav .nav-tab {

    background: transparent;

    border: none;

    border-bottom: 3px solid transparent;

    border-radius: 0;

    margin: 0;

    padding: 15px 20px;

    font-weight: 500;

    transition: all 0.3s ease;

}



.voxfor-admin-nav .nav-tab:hover {

    background: #f9fafb;

    color: #2563eb;

}



.voxfor-admin-nav .nav-tab-active {

    background: #f9fafb;

    border-bottom-color: #2563eb;

    color: #2563eb;

    font-weight: 600;

}



/* Dashboard Grid */

.voxfor-dashboard-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 20px;

    margin-top: 20px;

}



.voxfor-dashboard-card {

    background: #fff;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

    transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.voxfor-dashboard-card:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);

}



.voxfor-dashboard-card.full-width {

    grid-column: 1 / -1;

}



.voxfor-dashboard-card .card-header {

    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);

    padding: 16px 20px;

    border-bottom: 1px solid #e5e7eb;

}



.voxfor-dashboard-card .card-header h3 {

    margin: 0;

    font-size: 16px;

    font-weight: 600;

    color: #1f2937;

    display: flex;

    align-items: center;

    gap: 8px;

}



.voxfor-dashboard-card .card-header h3 i {

    color: #2563eb;

}



.voxfor-dashboard-card .card-content {

    padding: 20px;

}



/* Stats Grid */

.stats-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    text-align: center;

}



.stat-item {

    padding: 10px;

}



.stat-number {

    font-size: 32px;

    font-weight: 700;

    color: #2563eb;

    margin-bottom: 4px;

}



.stat-label {

    font-size: 14px;

    color: #6b7280;

    font-weight: 500;

}



/* Locations List */

.locations-list {

    margin-bottom: 20px;

}



.location-item {

    padding: 10px 0;

    border-bottom: 1px solid #f3f4f6;

}



.location-item:last-child {

    border-bottom: none;

}



.location-item label {

    display: flex;

    align-items: center;

    gap: 10px;

    cursor: pointer;

    font-weight: 500;

}



.location-key {

    color: #6b7280;

    font-size: 12px;

    font-weight: 400;

}



/* Quick Actions */

.quick-actions {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 15px;

}



.quick-action-btn {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 15px;

    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);

    border: 1px solid #e5e7eb;

    border-radius: 8px;

    text-decoration: none;

    color: #374151;

    font-weight: 500;

    transition: all 0.3s ease;

}



.quick-action-btn:hover {

    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);

    border-color: #2563eb;

    color: #1d4ed8;

    text-decoration: none;

    transform: translateY(-1px);

}



.quick-action-btn i {

    font-size: 16px;

}



/* Menus Table */

.menus-table-wrapper {

    overflow-x: auto;

}



.menus-table-wrapper table {

    border-radius: 8px;

    overflow: hidden;

}



.menus-table-wrapper th {

    background: #f9fafb;

    font-weight: 600;

    color: #374151;

}



.menu-description {

    font-size: 13px;

    color: #6b7280;

    margin-top: 4px;

}



.location-badge {

    background: #dbeafe;

    color: #1d4ed8;

    padding: 2px 8px;

    border-radius: 12px;

    font-size: 12px;

    font-weight: 500;

}



.no-location {

    color: #9ca3af;

    font-style: italic;

}



.mega-count {

    background: #10b981;

    color: white;

    padding: 2px 8px;

    border-radius: 12px;

    font-size: 12px;

    font-weight: 500;

}



.no-mega {

    color: #9ca3af;

}



.actions {

    white-space: nowrap;

}



.actions .button {

    margin-right: 5px;

}



/* Help Links */

.help-links {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.help-link {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px;

    background: #f9fafb;

    border: 1px solid #e5e7eb;

    border-radius: 6px;

    text-decoration: none;

    color: #374151;

    transition: all 0.2s ease;

}



.help-link:hover {

    background: #f3f4f6;

    border-color: #d1d5db;

    text-decoration: none;

}



/* Plugin Info */

.plugin-info {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.info-item {

    display: flex;

    justify-content: space-between;

    padding: 8px 0;

    border-bottom: 1px solid #f3f4f6;

}



.info-item:last-child {

    border-bottom: none;

}



/* Menu Builder Styles */

.voxfor-mega-menu-builder {

    background: #f9fafb;

    margin: 0 -20px -10px -2px;

    padding: 20px;

    min-height: calc(100vh - 32px);

}



.voxfor-builder-content {

    max-width: 1400px;

    margin: 0 auto;

}



.voxfor-builder-header {

    background: #fff;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    padding: 20px;

    margin-bottom: 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

}



.menu-selector {

    display: flex;

    align-items: center;

    gap: 15px;

}



.menu-selector label {

    font-weight: 600;

    color: #374151;

}



.menu-selector select {

    min-width: 200px;

    padding: 8px 12px;

    border-radius: 6px;

    border: 1px solid #d1d5db;

}



.builder-actions {

    display: flex;

    gap: 10px;

}



.builder-actions .button {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 16px;

    border-radius: 6px;

    font-weight: 500;

}



.builder-actions .button i {

    font-size: 14px;

}



/* Builder Main Layout */

.voxfor-builder-main {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    min-height: 600px;

}



/* Menu Tree Panel */

.voxfor-menu-tree-panel,

.voxfor-item-editor-panel {

    background: #fff;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

}



.panel-header {

    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);

    padding: 16px 20px;

    border-bottom: 1px solid #e5e7eb;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.panel-header h3 {

    margin: 0;

    font-size: 16px;

    font-weight: 600;

    color: #1f2937;

}



.panel-actions {

    display: flex;

    gap: 10px;

}



.panel-actions .button-link {

    font-size: 13px;

    text-decoration: none;

    color: #2563eb;

    padding: 4px 8px;

    border-radius: 4px;

    transition: background 0.2s ease;

}



.panel-actions .button-link:hover {

    background: rgba(37, 99, 235, 0.1);

}



/* Menu Tree Container */

.menu-tree-container {

    padding: 20px;

    max-height: 500px;

    overflow-y: auto;

}



.sortable-tree {

    min-height: 100px;

}



.empty-menu {

    text-align: center;

    padding: 40px 20px;

    color: #6b7280;

}



/* Menu Items Drag and Drop Styles */

.menu-items-container {

    min-height: 100px;

    padding: 20px;

    background: #f9f9f9;

    border: 2px dashed #d0d5dd;

    border-radius: 8px;

    position: relative;

}



.menu-items-container:not(:empty) {

    background: #fff;

    border: 1px solid #e5e7eb;

    border-style: solid;

}



/* Empty State */

.empty-state {

    text-align: center;

    padding: 40px 20px;

    color: #6b7280;

}



.empty-state .dashicons {

    font-size: 48px;

    opacity: 0.5;

    margin-bottom: 15px;

}



.empty-state p {

    margin: 0;

    font-size: 16px;

    font-weight: 500;

}



/* Menu Item Styles */

.menu-item {

    background: #fff;

    border: 1px solid #e5e7eb;

    border-radius: 6px;

    margin-bottom: 8px;

    position: relative;

    transition: all 0.2s ease;

    cursor: move;

}



.menu-item:hover {

    border-color: #2563eb;

    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);

}



.menu-item.selected {

    border-color: #2563eb;

    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);

}



.menu-item.ui-sortable-helper {

    transform: rotate(2deg);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

    z-index: 1000;

}



.menu-item-handle {

    display: flex;

    align-items: center;

    padding: 12px 15px;

    gap: 10px;

    cursor: move;

}



.drag-handle {

    color: #9ca3af;

    cursor: move;

    display: flex;

    align-items: center;

    font-size: 16px;

    padding: 2px;

}



.drag-handle:hover {

    color: #2563eb;

}



.drag-handle:active {

    color: #1d4ed8;

}



.item-icon {

    color: #6b7280;

    font-size: 16px;

}



.item-title {

    flex-grow: 1;

    font-weight: 500;

    color: #374151;

    font-size: 14px;

}



.item-badge {

    background: #f3f4f6;

    color: #6b7280;

    font-size: 11px;

    padding: 2px 6px;

    border-radius: 4px;

    font-weight: 500;

}



.mega-indicator {

    background: #9c27b0;

    color: #fff;

    font-size: 10px;

    padding: 2px 6px;

    border-radius: 4px;

    font-weight: 600;

    text-transform: uppercase;

}



.item-controls {

    display: flex;

    gap: 4px;

    opacity: 0;

    transition: opacity 0.2s ease;

}



.menu-item:hover .item-controls {

    opacity: 1;

}



.item-controls button {

    background: none;

    border: none;

    color: #6b7280;

    padding: 4px;

    border-radius: 4px;

    cursor: pointer;

    transition: all 0.2s ease;

    font-size: 14px;

}



.item-controls button:hover {

    background: #f3f4f6;

    color: #374151;

}



.item-delete:hover {

    background: #fee2e2;

    color: #dc2626;

}



/* Sortable Placeholder */

.menu-item-placeholder {

    background: #e0e7ff !important;

    border: 2px dashed #2563eb !important;

    border-radius: 6px !important;

    height: 50px !important;

    margin-bottom: 8px !important;

    position: relative !important;

    opacity: 0.7 !important;

}



.menu-item-placeholder:before {

    content: "Drop item here";

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    color: #2563eb;

    font-size: 12px;

    font-weight: 500;

}



/* Sortable States */

.ui-sortable-sorting .menu-item:not(.ui-sortable-helper):not(.menu-item-placeholder) {

    opacity: 0.8;

}



.ui-sortable-sorting .menu-item-placeholder {

    display: block !important;

}



/* Drag and drop feedback */

.menu-item.ui-sortable-helper {

    background: #fff;

    border-color: #2563eb;

    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.2);

    transform: rotate(2deg);

    z-index: 9999;

}



.menu-item.ui-sortable-helper .item-controls {

    opacity: 0;

}



/* Nested menu items support */

.menu-item-children {

    padding-left: 30px;

    margin-top: 5px;

}



.has-children > .menu-item-handle {

    border-left: 3px solid #2563eb;

}



/* Item Editor Panel */

.item-editor-container {

    padding: 20px;

    max-height: 500px;

    overflow-y: auto;

}



.placeholder-content {

    text-align: center;

    padding: 40px 20px;

    color: #6b7280;

}



.placeholder-icon i {

    font-size: 48px;

    color: #d1d5db;

    margin-bottom: 16px;

}



.placeholder-content h3 {

    margin-bottom: 8px;

    color: #374151;

}



/* Editor Sections */

.editor-section {

    margin-bottom: 30px;

    padding-bottom: 20px;

    border-bottom: 1px solid #f3f4f6;

}



.editor-section:last-child {

    border-bottom: none;

}



.editor-section h4 {

    margin: 0 0 16px 0;

    font-size: 14px;

    font-weight: 600;

    color: #374151;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.field-group {

    margin-bottom: 16px;

}



.field-group label {

    display: block;

    margin-bottom: 6px;

    font-weight: 500;

    color: #374151;

}



.field-group input,

.field-group select,

.field-group textarea {

    width: 100%;

    padding: 8px 12px;

    border: 1px solid #d1d5db;

    border-radius: 6px;

    transition: border-color 0.2s ease;

}



.field-group input:focus,

.field-group select:focus,

.field-group textarea:focus {

    outline: none;

    border-color: #2563eb;

    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);

}



.field-group .description {

    margin-top: 4px;

    font-size: 13px;

    color: #6b7280;

}



/* Icon Input Wrapper */

.icon-input-wrapper {

    display: flex;

    gap: 8px;

}



.icon-input-wrapper input {

    flex: 1;

}



.icon-input-wrapper .button {

    white-space: nowrap;

}



/* Mega Settings */

#mega-settings {

    background: #f9fafb;

    border: 1px solid #e5e7eb;

    border-radius: 8px;

    padding: 16px;

    margin-top: 12px;

}



/* Editor Actions */

.editor-actions {

    display: flex;

    gap: 10px;

    padding-top: 20px;

    border-top: 1px solid #f3f4f6;

}



/* Modal Styles */

.voxfor-modal {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.5);

    z-index: 100000;

    display: flex;

    align-items: center;

    justify-content: center;

}



.voxfor-modal-content {

    background: #fff;

    border-radius: 12px;

    width: 90%;

    max-width: 800px;

    max-height: 90%;

    overflow: hidden;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);

}



.voxfor-modal-header {

    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);

    padding: 20px;

    border-bottom: 1px solid #e5e7eb;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.voxfor-modal-header h3 {

    margin: 0;

    font-size: 18px;

    font-weight: 600;

    color: #1f2937;

}



.voxfor-modal-close {

    background: none;

    border: none;

    font-size: 24px;

    cursor: pointer;

    color: #6b7280;

    padding: 0;

    width: 30px;

    height: 30px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.2s ease;

}



.voxfor-modal-close:hover {

    background: #f3f4f6;

    color: #374151;

}



.voxfor-modal-body {

    padding: 20px;

    max-height: 400px;

    overflow-y: auto;

}



.voxfor-modal-footer {

    background: #f9fafb;

    padding: 20px;

    border-top: 1px solid #e5e7eb;

    display: flex;

    gap: 10px;

    justify-content: flex-end;

}



/* Add Item Tabs */

.add-item-tabs {

    width: 100%;

}



.tab-nav {

    display: flex;

    border-bottom: 1px solid #e5e7eb;

    margin-bottom: 20px;

}



.tab-button {

    background: none;

    border: none;

    padding: 12px 20px;

    cursor: pointer;

    font-weight: 500;

    color: #6b7280;

    border-bottom: 2px solid transparent;

    transition: all 0.2s ease;

}



.tab-button:hover {

    color: #374151;

}



.tab-button.active {

    color: #2563eb;

    border-bottom-color: #2563eb;

}



.tab-panel {

    display: none;

}



.tab-panel.active {

    display: block;

}



.search-box {

    margin-bottom: 16px;

}



.search-box input {

    width: 100%;

    padding: 10px 12px;

    border: 1px solid #d1d5db;

    border-radius: 6px;

    font-size: 14px;

}



.items-list {

    max-height: 300px;

    overflow-y: auto;

    border: 1px solid #e5e7eb;

    border-radius: 6px;

}



.items-list .item {

    padding: 10px 12px;

    border-bottom: 1px solid #f3f4f6;

    cursor: pointer;

    transition: background 0.2s ease;

}



.items-list .item:hover {

    background: #f9fafb;

}



.items-list .item:last-child {

    border-bottom: none;

}



.items-list .item.selected {

    background: #eff6ff;

    color: #2563eb;

}



/* Preview Modal */

.voxfor-preview-modal .voxfor-modal-content {

    max-width: 1200px;

    max-height: 95%;

}



.voxfor-preview-modal .voxfor-modal-body {

    padding: 0;

    max-height: none;

}



.preview-container {

    background: #f9fafb;

    padding: 20px;

    min-height: 400px;

}



#menu-preview {

    background: #fff;

    border-radius: 8px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    padding: 20px;

}



/* Loading States */

.loading {

    opacity: 0.6;

    pointer-events: none;

}



.loading::after {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    width: 20px;

    height: 20px;

    margin: -10px 0 0 -10px;

    border: 2px solid #e5e7eb;

    border-top-color: #2563eb;

    border-radius: 50%;

    animation: spin 1s linear infinite;

}



@keyframes spin {

    to {

        transform: rotate(360deg);

    }

}



/* Responsive Design */

@media (max-width: 1200px) {

    .voxfor-builder-main {

        grid-template-columns: 1fr;

        gap: 15px;

    }

    

    .voxfor-menu-tree-panel,

    .voxfor-item-editor-panel {

        max-height: none;

    }

    

    .menu-tree-container,

    .item-editor-container {

        max-height: 400px;

    }

}



@media (max-width: 768px) {

    .voxfor-mega-menu-builder {

        padding: 10px;

        margin: 0 -10px -10px -2px;

    }

    

    .voxfor-dashboard-grid {

        grid-template-columns: 1fr;

    }

    

    .stats-grid {

        grid-template-columns: 1fr;

    }

    

    .quick-actions {

        grid-template-columns: 1fr;

    }

    

    .voxfor-builder-header {

        flex-direction: column;

        gap: 15px;

        align-items: stretch;

    }

    

    .builder-actions {

        flex-wrap: wrap;

    }

    

    .menu-selector {

        flex-direction: column;

        align-items: stretch;

        gap: 10px;

    }

    

    .menu-selector select {

        min-width: auto;

    }

    

    .voxfor-modal-content {

        width: 95%;

        margin: 0 10px;

    }

    

    .icon-input-wrapper {

        flex-direction: column;

    }

    

    .editor-actions {

        flex-direction: column;

    }

    

    .tab-nav {

        overflow-x: auto;

        white-space: nowrap;

    }

}



/* Form Actions */

.form-actions {

    margin-top: 16px;

    padding-top: 16px;

    border-top: 1px solid #f3f4f6;

}



/* No Menus State */

.no-menus {

    text-align: center;

    padding: 40px 20px;

    color: #6b7280;

}



/* WordPress Menu Item Fields Enhancement */

.voxfor-mega-menu-options {

    background: #f9fafb;

    border: 1px solid #e5e7eb;

    border-radius: 6px;

    padding: 15px;

    margin-top: 10px;

}



.voxfor-mega-menu-options .description-thin {

    width: calc(50% - 5px);

    display: inline-block;

    vertical-align: top;

    margin-right: 10px;

}



.voxfor-mega-menu-options .description-thin:nth-child(even) {

    margin-right: 0;

}



/* Success/Error Messages */

.notice.voxfor-notice {

    border-left: 4px solid #2563eb;

    background: #eff6ff;

    border-radius: 0 6px 6px 0;

}



.notice.voxfor-notice.notice-success {

    border-left-color: #10b981;

    background: #f0fdf4;

}



.notice.voxfor-notice.notice-error {

    border-left-color: #ef4444;

    background: #fef2f2;

}



/* Utility Classes */

.text-center {

    text-align: center;

}



.text-right {

    text-align: right;

}



.mb-0 {

    margin-bottom: 0 !important;

}



.mt-20 {

    margin-top: 20px;

}



.hidden {

    display: none !important;

}



.flex {

    display: flex;

}



.items-center {

    align-items: center;

}



.justify-between {

    justify-content: space-between;

}



.gap-10 {

    gap: 10px;

}



/* Drag handle visibility */

.menu-item .drag-handle {

    display: flex !important;

    align-items: center;

    color: #9ca3af;

    cursor: move;

    font-size: 16px;

    padding: 2px;

    margin-right: 10px;

}



.menu-item .drag-handle:hover {

    color: #2563eb;

}



.menu-item .drag-handle .dashicons {

    font-size: 16px;

    width: 16px;

    height: 16px;

}



/* Ensure menu items are properly styled */

.menu-items-container .menu-item {

    background: #fff !important;

    border: 1px solid #e5e7eb !important;

    border-radius: 6px !important;

    margin-bottom: 8px !important;

    position: relative !important;

    transition: all 0.2s ease !important;

    cursor: move !important;

    display: block !important;

}



.menu-items-container .menu-item .menu-item-handle {

    display: flex !important;

    align-items: center !important;

    padding: 12px 15px !important;

    gap: 10px !important;

    cursor: move !important;

}



/* Force visibility of drag handles */

.menu-items-container .menu-item .drag-handle {

    opacity: 1 !important;

    visibility: visible !important;

    display: flex !important;

}



/* Debug styling to make items more visible */

.menu-items-container:not(:empty) {

    background: #fff !important;

    border: 1px solid #e5e7eb !important;

    border-style: solid !important;

    padding: 10px !important;

}



/* Make sure sortable placeholder is visible */

.menu-item-placeholder {

    background: #e0e7ff !important;

    border: 2px dashed #2563eb !important;

    border-radius: 6px !important;

    height: 50px !important;

    margin-bottom: 8px !important;

    position: relative !important;

    opacity: 0.7 !important;

    display: block !important;

}



.menu-item-placeholder:before {

    content: "Drop item here" !important;

    position: absolute !important;

    top: 50% !important;

    left: 50% !important;

    transform: translate(-50%, -50%) !important;

    color: #2563eb !important;

    font-size: 12px !important;

    font-weight: 500 !important;

}



/* Import/Export Styles */

.voxfor-dashboard-card .import-export-section {

    border-top: 1px solid #e5e7eb;

    padding-top: 15px;

    margin-top: 15px;

}



.voxfor-dashboard-card .import-export-section:first-child {

    border-top: none;

    padding-top: 0;

    margin-top: 0;

}



.voxfor-dashboard-card .import-export-section h4 {

    color: #374151;

    font-size: 14px;

    font-weight: 600;

    margin: 0 0 8px 0;

    display: flex;

    align-items: center;

    gap: 6px;

}



.voxfor-dashboard-card .import-export-section h4 .dashicons {

    font-size: 16px;

    width: 16px;

    height: 16px;

    color: #6b7280;

}



.voxfor-dashboard-card .import-export-section .description {

    color: #6b7280;

    font-size: 13px;

    line-height: 1.4;

    margin: 0 0 12px 0;

}



#export-menus, #import-menus {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background: #f8fafc;

    border: 1px solid #d1d5db;

    color: #374151;

    padding: 8px 16px;

    border-radius: 6px;

    font-size: 13px;

    font-weight: 500;

    transition: all 0.2s ease;

    cursor: pointer;

}



#export-menus:hover, #import-menus:hover:not(:disabled) {

    background: #e5e7eb;

    border-color: #9ca3af;

    color: #1f2937;

}



#export-menus:active, #import-menus:active:not(:disabled) {

    background: #d1d5db;

    transform: translateY(1px);

}



#export-menus:disabled, #import-menus:disabled {

    background: #f9fafb;

    border-color: #e5e7eb;

    color: #9ca3af;

    cursor: not-allowed;

}



#export-menus .dashicons, #import-menus .dashicons {

    font-size: 14px;

    width: 14px;

    height: 14px;

}



#import-file {

    display: block;

    width: 100%;

    padding: 8px 12px;

    border: 2px dashed #d1d5db;

    border-radius: 6px;

    background: #f9fafb;

    font-size: 13px;

    color: #6b7280;

    transition: all 0.2s ease;

    cursor: pointer;

}



#import-file:hover {

    border-color: #9ca3af;

    background: #f3f4f6;

}



#import-file:focus {

    outline: none;

    border-color: #2563eb;

    background: #fff;

}



#import-export-messages {

    font-size: 13px;

}



#import-export-messages .notice {

    margin: 0;

    padding: 12px 16px;

    border-radius: 6px;

    border-left-width: 4px;

}



#import-export-messages .notice.notice-success {

    background: #ecfdf5;

    border-left-color: #10b981;

    color: #065f46;

}



#import-export-messages .notice.notice-error {

    background: #fef2f2;

    border-left-color: #ef4444;

    color: #991b1b;

}



#import-export-messages .notice p {

    margin: 0;

    font-size: 13px;

}



#import-export-messages .notice strong {

    font-weight: 600;

}



/* Loading state for import/export buttons */

#export-menus.loading, #import-menus.loading {

    position: relative;

    color: transparent;

    pointer-events: none;

}



#export-menus.loading::after, #import-menus.loading::after {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    width: 16px;

    height: 16px;

    margin: -8px 0 0 -8px;

    border: 2px solid #d1d5db;

    border-top-color: #6b7280;

    border-radius: 50%;

    animation: spin 1s infinite linear;

}



/* Responsive adjustments for import/export */

@media (max-width: 768px) {

    .voxfor-dashboard-card .import-export-section h4 {

        font-size: 13px;

    }

    

    #export-menus, #import-menus {

        width: 100%;

        justify-content: center;

        margin: 5px 0;

    }

    

    #import-file {

        margin: 10px 0;

    }

}



/* Success animation */

@keyframes successPulse {

    0% { transform: scale(1); }

    50% { transform: scale(1.05); }

    100% { transform: scale(1); }

}



.import-export-success {

    animation: successPulse 0.3s ease-in-out;

}

/* Menu Item Type Badges */
.item-type-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
    vertical-align: middle;
}

.dropdown-badge {
    background-color: #0073aa;
    color: white;
}

.mega-badge {
    background-color: #d63638;
    color: white;
}

/* Different background colors for different menu item types */
.menu-item-editor {
    border-left: 4px solid #ddd; /* Default for regular menu items */
}

.menu-item-editor.dropdown {
    border-left: 4px solid #0073aa;
}

.menu-item-editor.mega-menu {
    border-left: 4px solid #d63638;
}

/* Dropdown sub-items styles */
.dropdown-subitems {
    margin-top: 15px;
    padding: 15px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
}

.dropdown-subitems h4 {
    margin: 0 0 15px 0;
    font-size: 14px;
    font-weight: 600;
    color: #0073aa;
}

.subitem {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 10px;
}

.subitem-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.subitem-title {
    flex-grow: 1;
    font-weight: 500;
}

.delete-subitem {
    background: #dc3545;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
}

.delete-subitem:hover {
    background: #c82333;
}

/* Settings page inline style replacements */
.settings-field-group-spacing {
    margin-top: 20px;
}

.settings-file-input-spacing {
    margin-bottom: 10px;
}

.settings-messages-spacing {
    margin-top: 15px;
}

.settings-form-actions {
    margin-top: 20px;
    padding: 20px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
}