/**
 * Editor Visual 2.0 - Estilos do Inspector
 * Controles avançados para edição de propriedades
 */

/* ========================================
   VARIÁVEIS DO INSPECTOR
   Definidas explicitamente para isolamento
======================================== */
#mve2-editor .mve2-inspector,
#mve2-editor .mve2-inspector * {
    --mve2-bg-input: #1e1e32;
    --mve2-bg-tertiary: #121224;
    --mve2-border: #2a2a45;
    --mve2-text: #ffffff;
    --mve2-text-muted: #a0a0b0;
    --mve2-text-dim: #6a6a7a;
    --mve2-primary: #8b5cf6;
    --mve2-accent: #8b5cf6;
    --mve2-accent-light: rgba(139, 92, 246, 0.1);
    --mve2-radius: 6px;
    --mve2-radius-sm: 4px;
    --mve2-transition-fast: 0.15s ease;
    --mve2-bg-hover: #2a2a45;
}

/* Garantir backgrounds explícitos nos elementos do inspector */
#mve2-editor .mve2-inspector {
    background: #16162a !important;
}

#mve2-editor .mve2-inspector-content,
#mve2-editor .mve2-inspector-panel {
    background: #16162a !important;
}

#mve2-editor .mve2-inspector-section {
    background: transparent !important;
}

#mve2-editor .mve2-inspector-section-content {
    background: transparent !important;
}

/* ========================================
   CONTROLES DE FORMULÁRIO
======================================== */

/* Grupo de controles */
.mve2-control-group {
    margin-bottom: 16px;
}

.mve2-control-group:last-child {
    margin-bottom: 0;
}

/* Control row - items lado a lado */
.mve2-control-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.mve2-control-row .mve2-control-group {
    flex: 1;
}

.mve2-control-half {
    flex: 0 0 calc(50% - 5px) !important;
}

/* Label */
.mve2-control-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--mve2-text-muted);
}

.mve2-control-label-icon {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mve2-control-label-icon i {
    font-size: 11px;
    opacity: 0.7;
}

/* ========================================
   PRICING / FEATURES LIST
======================================== */
.mve2-features-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.mve2-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mve2-feature-item .mve2-input {
    flex: 1;
}

.mve2-feature-item .mve2-btn-icon,
.mve2-btn-sm {
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--mve2-radius);
    color: #ef4444;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.mve2-feature-item .mve2-btn-icon:hover,
.mve2-btn-sm:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
}

/* Empty message */
.mve2-empty-msg {
    color: var(--mve2-text-dim);
    font-size: 12px;
    text-align: center;
    padding: 16px;
    background: var(--mve2-bg-tertiary);
    border-radius: var(--mve2-radius);
    margin: 0;
}

/* Botão block (largura total) */
.mve2-btn-block {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--mve2-accent-light);
    border: 1px dashed var(--mve2-accent);
    border-radius: var(--mve2-radius);
    color: var(--mve2-accent);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mve2-btn-block:hover {
    background: var(--mve2-accent);
    color: white;
    border-style: solid;
}

/* Checkbox item */
.mve2-checkbox-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--mve2-bg-input);
    border: 1px solid var(--mve2-border);
    border-radius: var(--mve2-radius);
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 6px;
}

.mve2-checkbox-item:hover {
    border-color: var(--mve2-accent);
    background: var(--mve2-bg-hover);
}

.mve2-checkbox-item:last-child {
    margin-bottom: 0;
}

/* Checkbox */
.mve2-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--mve2-accent);
    cursor: pointer;
}

/* ========================================
   SLIDE / ACCORDION / TAB ITEMS
======================================== */
.mve2-slide-item,
.mve2-accordion-edit-item,
.mve2-tab-edit-item,
.mve2-form-field-item {
    background: var(--mve2-bg-input);
    border: 1px solid var(--mve2-border);
    border-radius: var(--mve2-radius);
    padding: 12px;
    margin-bottom: 10px;
}

.mve2-slide-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mve2-border);
}

.mve2-slide-item-header span {
    font-weight: 600;
    color: var(--mve2-text);
    font-size: 13px;
}

.mve2-slide-item-header .mve2-btn-icon {
    width: 28px;
    height: 28px;
}

/* ========================================
   SHARE NETWORKS
======================================== */
.mve2-share-networks {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ========================================
   PRICING CONTROLS
======================================== */
.mve2-layout-options {
    display: flex;
    gap: 8px;
}

.mve2-layout-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: var(--mve2-bg-input);
    border: 1px solid var(--mve2-border);
    border-radius: var(--mve2-radius);
    color: var(--mve2-text-muted);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mve2-layout-btn i {
    font-size: 18px;
}

.mve2-layout-btn:hover {
    border-color: var(--mve2-accent);
    color: var(--mve2-text);
}

.mve2-layout-btn.active {
    background: var(--mve2-accent-light);
    border-color: var(--mve2-accent);
    color: var(--mve2-accent);
}

/* Pricing Plans List */
.mve2-pricing-plans-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

.mve2-pricing-plan-editor {
    background: var(--mve2-bg-tertiary);
    border: 1px solid var(--mve2-border);
    border-radius: var(--mve2-radius);
    overflow: hidden;
}

.mve2-plan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--mve2-bg-input);
    border-bottom: 1px solid var(--mve2-border);
}

.mve2-plan-header.featured {
    background: var(--mve2-accent-light);
    border-bottom-color: var(--mve2-accent);
}

.mve2-plan-title {
    font-weight: 600;
    color: var(--mve2-text);
    font-size: 13px;
}

.mve2-plan-header.featured .mve2-plan-title {
    color: var(--mve2-accent);
}

.mve2-plan-actions {
    display: flex;
    gap: 6px;
}

.mve2-plan-content {
    padding: 12px;
}

.mve2-plan-content .mve2-control-group {
    margin-bottom: 10px;
}

.mve2-plan-content .mve2-control-label {
    font-size: 11px;
    margin-bottom: 4px;
}

/* Botões pequenos */
.mve2-btn-xs {
    width: 26px;
    height: 26px;
    min-width: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mve2-bg-tertiary);
    border: 1px solid var(--mve2-border);
    border-radius: var(--mve2-radius-sm);
    color: var(--mve2-text-dim);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    font-size: 11px;
}

.mve2-btn-xs:hover {
    background: var(--mve2-bg-hover);
    color: var(--mve2-text);
    border-color: var(--mve2-text-muted);
}

.mve2-btn-xs.active {
    background: var(--mve2-accent);
    border-color: var(--mve2-accent);
    color: white;
}

.mve2-btn-xs.mve2-btn-danger:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #ef4444;
}

/* Inputs pequenos */
.mve2-input-sm {
    padding: 6px 10px;
    font-size: 12px;
}

/* Color input pequeno */
.mve2-color-sm {
    width: 100%;
    height: 32px;
    padding: 2px;
    border-radius: var(--mve2-radius-sm);
}

/* Features compactas */
.mve2-features-compact {
    gap: 4px;
    margin-bottom: 8px;
}

.mve2-features-compact .mve2-feature-item {
    gap: 4px;
}

.mve2-features-compact .mve2-input {
    padding: 6px 8px;
    font-size: 11px;
}

.mve2-features-compact .mve2-btn-icon {
    width: 26px;
    height: 26px;
    min-width: 26px;
}

/* Botão block pequeno */
.mve2-btn-block-sm {
    width: 100%;
    padding: 6px 12px;
    font-size: 11px;
}

.mve2-btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

/* Empty message pequena */
.mve2-empty-sm {
    padding: 8px;
    font-size: 11px;
}

/* Input base */
.mve2-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--mve2-bg-input);
    border: 1px solid var(--mve2-border);
    border-radius: var(--mve2-radius);
    color: var(--mve2-text);
    font-size: 13px;
    outline: none;
    transition: border-color var(--mve2-transition-fast), box-shadow var(--mve2-transition-fast);
}

.mve2-input:focus {
    border-color: var(--mve2-primary);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.mve2-input::placeholder {
    color: var(--mve2-text-dim);
}

/* Input pequeno */
.mve2-input-sm {
    padding: 6px 10px;
    font-size: 12px;
}

/* Textarea */
.mve2-textarea {
    min-height: 80px;
    resize: vertical;
}

/* Select */
.mve2-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

/* ========================================
   INPUT COM UNIDADE
======================================== */
.mve2-input-unit {
    display: flex;
    align-items: stretch;
}

.mve2-input-unit .mve2-input {
    border-radius: var(--mve2-radius) 0 0 var(--mve2-radius);
    border-right: none;
}

.mve2-input-unit-select {
    min-width: 50px;
    padding: 0 8px;
    background: var(--mve2-bg-hover);
    border: 1px solid var(--mve2-border);
    border-radius: 0 var(--mve2-radius) var(--mve2-radius) 0;
    color: var(--mve2-text-muted);
    font-size: 12px;
    cursor: pointer;
    appearance: none;
    text-align: center;
}

/* ========================================
   SLIDER / RANGE
======================================== */
.mve2-slider-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mve2-slider {
    flex: 1;
    height: 4px;
    background: var(--mve2-bg-hover);
    border-radius: 2px;
    appearance: none;
    cursor: pointer;
}

.mve2-slider::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--mve2-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: transform var(--mve2-transition-fast), box-shadow var(--mve2-transition-fast);
}

.mve2-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2);
}

.mve2-slider-value {
    min-width: 50px;
    text-align: center;
    padding: 6px 8px;
    background: var(--mve2-bg-input);
    border: 1px solid var(--mve2-border);
    border-radius: var(--mve2-radius);
    font-size: 12px;
    color: var(--mve2-text);
}

/* ========================================
   COLOR PICKER
======================================== */
.mve2-color-picker {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.mve2-color-preview {
    width: 40px;
    height: 40px;
    border-radius: var(--mve2-radius);
    border: 2px solid var(--mve2-border);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.mve2-color-preview::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, #ccc 25%, transparent 25%),
                linear-gradient(-45deg, #ccc 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, #ccc 75%),
                linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
    z-index: 0;
}

.mve2-color-preview-inner {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Input de cor dentro do preview (escondido, usado como overlay) */
.mve2-color-preview .mve2-color-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.mve2-color-hex {
    flex: 1;
}

/* Cores pré-definidas */
.mve2-color-presets {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    margin-top: 12px;
}

.mve2-color-preset {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--mve2-radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform var(--mve2-transition-fast), border-color var(--mve2-transition-fast);
}

.mve2-color-preset:hover {
    transform: scale(1.1);
    border-color: white;
}

.mve2-color-preset.active {
    border-color: var(--mve2-primary);
}

/* ========================================
   BACKGROUND CONTROLS
======================================== */
.mve2-bg-type-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.mve2-bg-type-tab {
    flex: 1;
    padding: 8px;
    background: var(--mve2-bg-input);
    border: 1px solid var(--mve2-border);
    border-radius: var(--mve2-radius);
    color: var(--mve2-text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--mve2-transition-fast);
}

.mve2-bg-type-tab:hover {
    background: var(--mve2-bg-hover);
}

.mve2-bg-type-tab.active {
    background: var(--mve2-primary);
    border-color: var(--mve2-primary);
    color: white;
}

/* Gradient Controls */
.mve2-gradient-controls {
    margin-top: 12px;
}

.mve2-gradient-preview {
    width: 100%;
    height: 40px;
    border-radius: var(--mve2-radius);
    border: 1px solid var(--mve2-border);
    margin-bottom: 12px;
}

.mve2-gradient-stops {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.mve2-gradient-stop {
    flex: 1;
}

.mve2-gradient-stop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 11px;
    color: var(--mve2-text-dim);
}

/* Image Background */
.mve2-bg-image-preview {
    width: 100%;
    height: 100px;
    border-radius: var(--mve2-radius);
    border: 2px dashed var(--mve2-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: border-color var(--mve2-transition-fast);
}

.mve2-bg-image-preview:hover {
    border-color: var(--mve2-primary);
}

.mve2-bg-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mve2-bg-image-placeholder {
    text-align: center;
    color: var(--mve2-text-dim);
}

.mve2-bg-image-placeholder i {
    font-size: 24px;
    margin-bottom: 8px;
    display: block;
}

/* ========================================
   SPACING CONTROLS (Margin/Padding)
======================================== */
.mve2-spacing-control {
    position: relative;
}

.mve2-spacing-visual {
    display: grid;
    grid-template-areas:
        ". top ."
        "left center right"
        ". bottom .";
    grid-template-columns: 50px 1fr 50px;
    grid-template-rows: 36px 60px 36px;
    gap: 4px;
    margin-bottom: 12px;
}

.mve2-spacing-input {
    width: 100%;
    padding: 8px 4px;
    background: var(--mve2-bg-input);
    border: 1px solid var(--mve2-border);
    border-radius: var(--mve2-radius-sm);
    color: var(--mve2-text);
    font-size: 12px;
    text-align: center;
    outline: none;
}

.mve2-spacing-input:focus {
    border-color: var(--mve2-primary);
}

.mve2-spacing-top { grid-area: top; }
.mve2-spacing-right { grid-area: right; align-self: center; }
.mve2-spacing-bottom { grid-area: bottom; }
.mve2-spacing-left { grid-area: left; align-self: center; }

.mve2-spacing-center {
    grid-area: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mve2-bg-hover);
    border-radius: var(--mve2-radius);
    font-size: 11px;
    color: var(--mve2-text-dim);
}

/* Link toggle */
.mve2-spacing-link {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mve2-bg-panel);
    border: 1px solid var(--mve2-border);
    border-radius: 50%;
    cursor: pointer;
    font-size: 10px;
    color: var(--mve2-text-muted);
    z-index: 1;
}

.mve2-spacing-link.linked {
    background: var(--mve2-primary);
    border-color: var(--mve2-primary);
    color: white;
}

/* ========================================
   TYPOGRAPHY CONTROLS
======================================== */
.mve2-font-family-select {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.mve2-font-preview {
    flex: 1;
    padding: 10px 12px;
    background: var(--mve2-bg-input);
    border: 1px solid var(--mve2-border);
    border-radius: var(--mve2-radius);
    font-size: 14px;
    cursor: pointer;
}

.mve2-font-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mve2-bg-input);
    border: 1px solid var(--mve2-border);
    border-radius: var(--mve2-radius);
    color: var(--mve2-text-muted);
    cursor: pointer;
}

.mve2-font-btn:hover {
    background: var(--mve2-bg-hover);
    color: var(--mve2-text);
}

/* Font size & weight row */
.mve2-typography-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

/* Text alignment */
.mve2-text-align {
    display: flex;
    gap: 4px;
}

.mve2-text-align-btn {
    flex: 1;
    padding: 10px;
    background: var(--mve2-bg-input);
    border: 1px solid var(--mve2-border);
    border-radius: var(--mve2-radius);
    color: var(--mve2-text-muted);
    cursor: pointer;
    transition: all var(--mve2-transition-fast);
}

.mve2-text-align-btn:hover {
    background: var(--mve2-bg-hover);
}

.mve2-text-align-btn.active {
    background: var(--mve2-primary);
    border-color: var(--mve2-primary);
    color: white;
}

/* Text decoration */
.mve2-text-decoration {
    display: flex;
    gap: 4px;
}

.mve2-text-decoration-btn {
    flex: 1;
    padding: 8px;
    background: var(--mve2-bg-input);
    border: 1px solid var(--mve2-border);
    border-radius: var(--mve2-radius);
    color: var(--mve2-text-muted);
    font-size: 14px;
    cursor: pointer;
}

.mve2-text-decoration-btn.active {
    background: var(--mve2-bg-active);
    color: var(--mve2-text);
}

/* ========================================
   BORDER CONTROLS
======================================== */
.mve2-border-style-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.mve2-border-style-select {
    flex: 1;
}

.mve2-border-width-input {
    width: 80px;
}

/* Border radius */
.mve2-border-radius-control {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.mve2-border-radius-input-wrapper {
    position: relative;
}

.mve2-border-radius-input {
    width: 100%;
    padding: 8px;
    padding-left: 24px;
    background: var(--mve2-bg-input);
    border: 1px solid var(--mve2-border);
    border-radius: var(--mve2-radius);
    color: var(--mve2-text);
    font-size: 12px;
    text-align: center;
}

.mve2-border-radius-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--mve2-text-dim);
}

/* ========================================
   SHADOW CONTROLS
======================================== */
.mve2-shadow-preset {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.mve2-shadow-preset-btn {
    padding: 12px;
    background: var(--mve2-bg-input);
    border: 1px solid var(--mve2-border);
    border-radius: var(--mve2-radius);
    cursor: pointer;
    transition: all var(--mve2-transition-fast);
}

.mve2-shadow-preset-btn:hover {
    border-color: var(--mve2-primary);
}

.mve2-shadow-preset-btn.active {
    border-color: var(--mve2-primary);
    background: var(--mve2-bg-hover);
}

.mve2-shadow-preview {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: var(--mve2-radius);
    margin: 0 auto 8px;
}

.mve2-shadow-preset-btn span {
    display: block;
    font-size: 11px;
    color: var(--mve2-text-dim);
    text-align: center;
}

/* Shadow custom controls */
.mve2-shadow-custom {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

/* ========================================
   RESPONSIVE TOGGLE
======================================== */
.mve2-responsive-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px;
    background: var(--mve2-bg-input);
    border-radius: var(--mve2-radius-sm);
    margin-left: auto;
}

.mve2-responsive-toggle-btn {
    width: 22px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 2px;
    color: var(--mve2-text-dim);
    font-size: 10px;
    cursor: pointer;
}

.mve2-responsive-toggle-btn:hover {
    color: var(--mve2-text-muted);
}

.mve2-responsive-toggle-btn.active {
    background: var(--mve2-primary);
    color: white;
}

/* ========================================
   CSS EDITOR
======================================== */
.mve2-css-editor {
    width: 100%;
    min-height: 150px;
    padding: 12px;
    background: var(--mve2-bg-darker);
    border: 1px solid var(--mve2-border);
    border-radius: var(--mve2-radius);
    color: var(--mve2-text);
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 12px;
    line-height: 1.6;
    resize: vertical;
}

/* ========================================
   LINK CONTROL
======================================== */
.mve2-link-control {
    margin-bottom: 12px;
}

.mve2-link-input-wrapper {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.mve2-link-input {
    flex: 1;
}

.mve2-link-search-btn {
    width: 40px;
}

.mve2-link-options {
    display: flex;
    gap: 16px;
}

.mve2-link-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--mve2-text-muted);
    cursor: pointer;
}

.mve2-link-option input {
    accent-color: var(--mve2-primary);
}

/* ========================================
   SWITCH / TOGGLE
======================================== */
.mve2-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--mve2-bg-hover);
    border-radius: 12px;
    cursor: pointer;
    transition: background var(--mve2-transition-fast);
}

.mve2-switch.active {
    background: var(--mve2-primary);
}

.mve2-switch-handle {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: left var(--mve2-transition-fast);
    box-shadow: var(--mve2-shadow-sm);
}

.mve2-switch.active .mve2-switch-handle {
    left: 22px;
}

/* ========================================
   BUTTON GROUP
======================================== */
.mve2-button-group {
    display: flex;
    border-radius: var(--mve2-radius);
    overflow: hidden;
}

.mve2-button-group .mve2-btn-toggle {
    flex: 1;
    padding: 8px 12px;
    background: var(--mve2-bg-input);
    border: 1px solid var(--mve2-border);
    border-right: none;
    color: var(--mve2-text-muted);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--mve2-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mve2-button-group .mve2-btn-toggle:last-child {
    border-right: 1px solid var(--mve2-border);
}

.mve2-button-group .mve2-btn-toggle:hover {
    background: var(--mve2-bg-hover);
    color: var(--mve2-text);
}

.mve2-button-group .mve2-btn-toggle.active {
    background: var(--mve2-primary);
    border-color: var(--mve2-primary);
    color: white;
}

.mve2-button-group-item {
    flex: 1;
    padding: 8px 12px;
    background: var(--mve2-bg-input);
    border: 1px solid var(--mve2-border);
    border-right: none;
    color: var(--mve2-text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--mve2-transition-fast);
}

.mve2-button-group-item:last-child {
    border-right: 1px solid var(--mve2-border);
}

.mve2-button-group-item:hover {
    background: var(--mve2-bg-hover);
}

.mve2-button-group-item.active {
    background: var(--mve2-primary);
    border-color: var(--mve2-primary);
    color: white;
}

/* ========================================
   DIVIDER
======================================== */
.mve2-divider {
    height: 1px;
    background: var(--mve2-border);
    margin: 16px 0;
}

/* ========================================
   ACCORDION
======================================== */
.mve2-accordion-item {
    border: 1px solid var(--mve2-border);
    border-radius: var(--mve2-radius);
    margin-bottom: 8px;
    overflow: hidden;
}

.mve2-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--mve2-bg-input);
    cursor: pointer;
    transition: background var(--mve2-transition-fast);
}

.mve2-accordion-header:hover {
    background: var(--mve2-bg-hover);
}

.mve2-accordion-header span {
    font-size: 13px;
    font-weight: 500;
}

.mve2-accordion-header i {
    font-size: 12px;
    transition: transform var(--mve2-transition-fast);
}

.mve2-accordion-item.open .mve2-accordion-header i {
    transform: rotate(180deg);
}

.mve2-accordion-content {
    display: none;
    padding: 14px;
    border-top: 1px solid var(--mve2-border);
}

.mve2-accordion-item.open .mve2-accordion-content {
    display: block;
}

/* ========================================
   SELETOR DE ÍCONE
======================================== */
.mve2-icon-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: var(--mve2-bg-input);
    border: 1px solid var(--mve2-border);
    border-radius: var(--mve2-radius);
    color: var(--mve2-text);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--mve2-transition-fast);
}

.mve2-icon-selector:hover {
    border-color: var(--mve2-accent);
    background: var(--mve2-bg-hover);
}

.mve2-icon-selector i {
    font-size: 24px;
    color: var(--mve2-accent);
}

.mve2-icon-selector span {
    flex: 1;
}

/* ========================================
   CONTROLES DE GALERIA
======================================== */
.mve2-gallery-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

.mve2-gallery-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mve2-gallery-preview {
    width: 60px;
    height: 60px;
    background-size: cover;
    background-position: center;
    background-color: var(--mve2-bg-input);
    border-radius: var(--mve2-radius);
    border: 1px solid var(--mve2-border);
    flex-shrink: 0;
}

.mve2-gallery-item .mve2-input {
    flex: 1;
}

/* ========================================
   CONTROLES DE REDES SOCIAIS
======================================== */
.mve2-social-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mve2-social-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mve2-social-item i {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mve2-bg-input);
    border-radius: var(--mve2-radius);
    color: var(--mve2-accent);
    flex-shrink: 0;
}

.mve2-social-item .mve2-input {
    flex: 1;
}

/* ========================================
   CONTROLES DE ROW
======================================== */
.mve2-control-row {
    display: flex;
    gap: 12px;
}

.mve2-control-half {
    flex: 1;
    min-width: 0;
}

/* ========================================
   INPUTS VARIANTES
======================================== */
.mve2-input-small {
    padding: 8px 10px;
    font-size: 12px;
}

.mve2-color-input {
    width: 100%;
    height: 40px;
    padding: 4px;
    background: var(--mve2-bg-input);
    border: 1px solid var(--mve2-border);
    border-radius: var(--mve2-radius);
    cursor: pointer;
}

.mve2-color-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.mve2-color-input::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

/* ========================================
   CHECKBOX LABEL
======================================== */
.mve2-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--mve2-text);
}

.mve2-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--mve2-accent);
}

/* ========================================
   HELP TEXT
======================================== */
.mve2-help-text {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--mve2-text-muted);
}

/* ========================================
   BUTTON FULL WIDTH
======================================== */
.mve2-btn-full {
    width: 100%;
    justify-content: center;
}

/* ========================================
   ÍCONE ATUAL DISPLAY
======================================== */
.mve2-current-icon {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--mve2-bg-input);
    border: 1px solid var(--mve2-border);
    border-radius: var(--mve2-radius);
}

.mve2-current-icon i {
    font-size: 32px;
    color: var(--mve2-accent);
}

.mve2-current-icon span {
    font-size: 12px;
    color: var(--mve2-text-muted);
    font-family: monospace;
}

/* ========================================
   GRID DE ÍCONES INLINE
======================================== */
.mve2-icons-inline-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    max-height: 250px;
    overflow-y: auto;
    padding: 4px;
    background: var(--mve2-bg-tertiary);
    border-radius: var(--mve2-radius);
}

.mve2-icon-inline-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    background: var(--mve2-bg-input);
    border: 1px solid var(--mve2-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 16px;
    color: var(--mve2-text-secondary);
}

.mve2-icon-inline-item:hover {
    background: var(--mve2-accent-light);
    border-color: var(--mve2-accent);
    color: var(--mve2-accent);
    transform: scale(1.1);
}

.mve2-icon-inline-item.selected {
    background: var(--mve2-accent);
    border-color: var(--mve2-accent);
    color: white;
}

/* Busca de ícones */
.mve2-icon-search {
    margin-bottom: 12px;
}

/* ========================================
   CONTROLES DE GRADIENTE E BORDA (Icon Box)
======================================== */
.mve2-icon-solid-color,
.mve2-icon-gradient-colors {
    margin-top: 12px;
}

.mve2-apply-icon-gradient {
    background: linear-gradient(135deg, #8b5cf6, #06b6d4) !important;
    border: none !important;
    color: white !important;
    font-weight: 500;
}

.mve2-apply-icon-gradient:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Preview do gradiente */
.mve2-gradient-preview {
    height: 30px;
    border-radius: var(--mve2-radius);
    margin-top: 8px;
    border: 1px solid var(--mve2-border);
}

/* Control row para duas colunas */
.mve2-control-row {
    display: flex;
    gap: 12px;
}

.mve2-control-half {
    flex: 1;
    min-width: 0;
}

/* Botão pequeno secundário */
.mve2-btn-sm {
    padding: 8px 12px;
    font-size: 12px;
}

.mve2-btn-secondary {
    background: var(--mve2-bg-tertiary);
    border: 1px solid var(--mve2-border);
    color: var(--mve2-text);
}

.mve2-btn-secondary:hover {
    background: var(--mve2-bg-hover);
    border-color: var(--mve2-accent);
}

/* ========================================
   PREVIEW DE IMAGEM GRANDE
======================================== */
.mve2-image-preview-large {
    width: 100%;
    height: 150px;
    border-radius: var(--mve2-radius);
    background-color: var(--mve2-bg-tertiary);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px dashed var(--mve2-border);
    overflow: hidden;
    position: relative;
}

.mve2-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--mve2-text-muted);
    text-align: center;
    padding: 20px;
}

.mve2-image-placeholder i {
    font-size: 36px;
    margin-bottom: 12px;
    color: var(--mve2-accent);
    opacity: 0.5;
}

.mve2-image-placeholder span {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
}

.mve2-image-placeholder small {
    font-size: 11px;
    opacity: 0.7;
}

/* ========================================
   PREVIEW DE VÍDEO
======================================== */
.mve2-video-preview {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--mve2-radius);
    background-color: var(--mve2-bg-tertiary);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--mve2-border);
}

.mve2-video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mve2-video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--mve2-text-muted);
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16162a 100%);
}

.mve2-video-placeholder i {
    font-size: 48px;
    margin-bottom: 12px;
    color: #ef4444;
    opacity: 0.8;
}

.mve2-video-placeholder span {
    font-size: 12px;
    opacity: 0.7;
}

.mve2-video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.mve2-video-preview:hover .mve2-video-play-overlay {
    opacity: 1;
}

/* ========================================
   PREVIEW DO DIVISOR
======================================== */
.mve2-divider-preview {
    padding: 20px 0;
    background: var(--mve2-bg-tertiary);
    border-radius: var(--mve2-radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mve2-divider-preview-line {
    border: none;
    margin: 0;
}

/* ========================================
   GRUPO DE BOTÕES TOGGLE
======================================== */
.mve2-btn-group {
    display: flex;
    gap: 4px;
    background: var(--mve2-bg-tertiary);
    padding: 4px;
    border-radius: var(--mve2-radius);
}

.mve2-btn-toggle {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--mve2-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mve2-btn-toggle:hover {
    background: var(--mve2-bg-hover);
    color: var(--mve2-text);
}

.mve2-btn-toggle.active {
    background: var(--mve2-accent);
    color: white;
}

.mve2-btn-group-divider .mve2-btn-toggle {
    padding: 10px 8px;
}

/* ========================================
   BOTÃO APLICAR GRADIENTE
======================================== */
.mve2-btn-apply-gradient {
    width: 100%;
    margin-top: 12px;
    background: linear-gradient(135deg, #8b5cf6, #ec4899) !important;
    border: none !important;
    color: white !important;
    font-weight: 500;
    border-radius: var(--mve2-radius);
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mve2-btn-apply-gradient:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* ========================================
   HELP BOX
======================================== */
.mve2-help-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--mve2-radius);
    margin-top: 12px;
}

.mve2-help-box i {
    color: #3b82f6;
    font-size: 14px;
    margin-top: 2px;
}

.mve2-help-box span {
    font-size: 12px;
    color: var(--mve2-text-muted);
    line-height: 1.4;
}

/* ========================================
   SLIDER MELHORADO
======================================== */
.mve2-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--mve2-bg-tertiary);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.mve2-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--mve2-accent);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: transform 0.15s ease;
}

.mve2-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.mve2-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--mve2-accent);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Value display no label */
.mve2-value-display {
    color: var(--mve2-accent);
    font-weight: 600;
}

/* ========================================
   INPUT COM AÇÃO (botão ao lado)
======================================== */
.mve2-input-with-action {
    display: flex;
    gap: 8px;
}

.mve2-input-with-action .mve2-input {
    flex: 1;
}

.mve2-btn-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mve2-bg-tertiary);
    border: 1px solid var(--mve2-border);
    border-radius: var(--mve2-radius);
    color: var(--mve2-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.mve2-btn-icon:hover {
    background: var(--mve2-bg-hover);
    color: var(--mve2-text);
    border-color: var(--mve2-accent);
}

.mve2-btn-icon.mve2-btn-primary {
    background: var(--mve2-accent);
    border-color: var(--mve2-accent);
    color: white;
}

.mve2-btn-icon.mve2-btn-primary:hover {
    background: var(--mve2-accent-hover, #7c3aed);
}

/* ========================================
   CONTROLES DE COLUNA
======================================== */
.mve2-columns-preview {
    display: flex;
    gap: 4px;
    height: 40px;
    background: var(--mve2-bg-input);
    border: 1px solid var(--mve2-border);
    border-radius: var(--mve2-radius);
    padding: 6px;
    margin-bottom: 12px;
}

.mve2-column-preview-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mve2-bg-tertiary);
    border-radius: var(--mve2-radius-sm);
    color: var(--mve2-text-muted);
    font-size: 10px;
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
    min-width: 30px;
}

.mve2-column-preview-item:hover {
    background: var(--mve2-bg-hover);
    color: var(--mve2-text);
}

.mve2-column-preview-item.active {
    background: var(--mve2-accent);
    color: white;
}

.mve2-column-presets {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.mve2-column-presets .mve2-preset-btn {
    flex: 1;
    padding: 6px 8px;
    background: var(--mve2-bg-input);
    border: 1px solid var(--mve2-border);
    border-radius: var(--mve2-radius-sm);
    color: var(--mve2-text-dim);
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    transition: all 0.15s ease;
}

.mve2-column-presets .mve2-preset-btn:hover {
    background: var(--mve2-bg-hover);
    border-color: var(--mve2-accent);
    color: var(--mve2-text);
}

.mve2-column-presets .mve2-preset-btn.active {
    background: var(--mve2-accent);
    border-color: var(--mve2-accent);
    color: white;
}

.mve2-slider-with-value {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mve2-slider-with-value input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    height: 6px;
    border-radius: 3px;
    background: var(--mve2-bg-tertiary);
    outline: none;
}

.mve2-slider-with-value input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--mve2-accent);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.mve2-slider-with-value input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--mve2-accent);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.mve2-value-display {
    min-width: 45px;
    text-align: center;
    padding: 4px 8px;
    background: var(--mve2-bg-input);
    border: 1px solid var(--mve2-border);
    border-radius: var(--mve2-radius-sm);
    font-size: 11px;
    font-weight: 600;
    color: var(--mve2-text);
}

.mve2-align-buttons {
    display: flex;
    gap: 4px;
}

.mve2-align-buttons .mve2-btn-xs {
    flex: 1;
}

.mve2-column-info {
    padding: 8px 10px;
    background: var(--mve2-bg-input);
    border: 1px solid var(--mve2-border);
    border-radius: var(--mve2-radius-sm);
    margin-bottom: 12px;
}

.mve2-column-info small {
    color: var(--mve2-text-muted);
    font-size: 11px;
}

/* Botões de alinhamento de coluna */
.mve2-column-align {
    display: flex;
    gap: 4px;
}

.mve2-column-align .mve2-btn-toggle {
    flex: 1;
    min-width: 36px;
}