/* --- ESTILOS GERAIS DO MODAL DO EDITOR --- */
.modal-editor-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(5px);
    z-index: 99999; display: none; align-items: center; justify-content: center;
    font-family: Arial, sans-serif;
}

.modal-editor-content {
    background: #1a1a1a; width: 90%; max-width: 900px;
    height: 85vh; border-radius: 10px; border: 1px solid #8B4513;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

.editor-header {
    background: #111; padding: 15px 20px; display: flex;
    justify-content: space-between; align-items: center; border-bottom: 1px solid #333;
}
.editor-header h3 { color: #f39c12; margin: 0; display: flex; align-items: center; gap: 10px; }
.btn-fechar-editor { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; }
.btn-fechar-editor:hover { color: #e74c3c; }

.editor-body { display: flex; flex: 1; overflow: hidden; }

/* --- ÁREA DE PREVIEW (ESQUERDA) --- */
.editor-preview-container {
    flex: 2; background: #000; display: flex; align-items: center; justify-content: center;
    padding: 20px; position: relative; overflow: hidden;
}

#imgPreviewEditor {
    max-width: 100%; max-height: 100%; object-fit: contain;
    transition: filter 0.1s ease; position: relative; z-index: 2;
}

/* Molduras usando CSS Avançado */
.moldura-classica { border: 15px solid #fff; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); }
.moldura-dourada { border: 15px ridge #d4af37; padding: 5px; background: #fff; }
.moldura-vintage { border: 20px groove #4a3b32; border-radius: 10px; }
.moldura-festa { border: 15px dashed #ff4757; padding: 5px; background: #ffa502; }

/* Texturas / Overlays */
.camada-textura {
    position: absolute; top: 20px; left: 20px; right: 20px; bottom: 20px;
    pointer-events: none; z-index: 3; display: none;
}
.overlay-luz { display: block; background: radial-gradient(circle at top left, rgba(255,255,255,0.4) 0%, transparent 50%); }
.overlay-granulacao { display: block; background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.15"/%3E%3C/svg%3E'); }
.overlay-vignette { display: block; box-shadow: inset 0 0 100px rgba(0,0,0,0.9); }

/* Texto do Cartão - Agora Arrastável */
.texto-cartao-display {
    position: absolute; 
    top: 80%; /* Posição inicial */
    left: 50%; 
    transform: translate(-50%, -50%);
    z-index: 10; 
    font-weight: bold; 
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8); 
    white-space: nowrap; /* Impede a quebra automática para facilitar o arraste */
    cursor: grab; /* Ícone de mãozinha */
    user-select: none; /* Impede que o texto seja "selecionado" como num Word */
    touch-action: none; /* Super importante para o toque no celular funcionar liso */
    border: 1px dashed transparent;
    padding: 5px;
}
.texto-cartao-display:active {
    cursor: grabbing; /* Mão fechada ao segurar */
    border: 1px dashed rgba(255,255,255,0.5); /* Mostra uma caixinha enquanto arrasta */
}

/* --- ÁREA DE CONTROLES (DIREITA) --- */
.editor-controls { flex: 1; background: #111; padding: 20px; overflow-y: auto; border-left: 1px solid #333; }

.editor-tabs { display: flex; gap: 5px; margin-bottom: 20px; border-bottom: 2px solid #333; }
.tab-btn {
    flex: 1; background: transparent; border: none; color: #888; padding: 10px 5px;
    cursor: pointer; font-weight: bold; font-size: 12px; transition: 0.3s;
}
.tab-btn.active { color: #f39c12; border-bottom: 2px solid #f39c12; }

.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.3s; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.control-group { margin-bottom: 15px; }
.control-group label { display: block; color: #ccc; font-size: 12px; margin-bottom: 5px; }
.control-group input[type="range"] { width: 100%; cursor: pointer; accent-color: #8B4513; }

.btn-reset, .btn-preset {
    background: #222; color: #fff; border: 1px solid #444; padding: 8px 12px;
    border-radius: 5px; cursor: pointer; width: 100%; transition: 0.3s; font-size: 12px;
}
.btn-reset:hover { background: #333; }
.btn-preset:hover { border-color: #f39c12; color: #f39c12; }

.btn-baixar-edicao {
    background: linear-gradient(90deg, #8B4513, #d35400); color: #fff; border: none;
    padding: 15px; width: 100%; border-radius: 5px; cursor: pointer; font-size: 16px;
    font-weight: bold; display: flex; justify-content: center; align-items: center; gap: 10px; transition: 0.3s;
}
.btn-baixar-edicao:hover { transform: scale(1.02); box-shadow: 0 5px 15px rgba(211, 84, 0, 0.4); }

@media (max-width: 768px) {
    .editor-body { flex-direction: column; }
    .editor-preview-container { flex: 1; min-height: 250px; }
    .editor-controls { flex: 2; border-left: none; border-top: 1px solid #333; }
}

/* --- NOVAS MOLDURAS (Mega Expansão) --- */
.moldura-polaroid { border: 15px solid #fff; border-bottom-width: 60px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); background: #fff; }
.moldura-cinema { border-top: 40px solid #000; border-bottom: 40px solid #000; }
.moldura-elegante { border: 12px double #e0e0e0; padding: 4px; background: #fff; }
.moldura-neon-azul { border: 6px solid #0ff; box-shadow: 0 0 20px #0ff, inset 0 0 20px #0ff; }
.moldura-neon-rosa { border: 6px solid #f0f; box-shadow: 0 0 20px #f0f, inset 0 0 20px #f0f; }
.moldura-madeira { border: 20px solid #3e2723; border-style: inset; }

/* --- NOVAS TEXTURAS (Mega Expansão) --- */
.overlay-luz-quente { display: block; background: radial-gradient(circle at top right, rgba(255,140,0,0.5) 0%, transparent 60%); }
.overlay-luz-fria { display: block; background: radial-gradient(circle at bottom left, rgba(0,150,255,0.4) 0%, transparent 60%); }
.overlay-scanlines { display: block; background: repeating-linear-gradient(to bottom, transparent, transparent 3px, rgba(0,0,0,0.15) 3px, rgba(0,0,0,0.15) 6px); }
.overlay-nevoeiro { display: block; background: linear-gradient(to top, rgba(255,255,255,0.6) 0%, transparent 50%); }
.overlay-persiana { display: block; background: repeating-linear-gradient(to right, transparent, transparent 20px, rgba(0,0,0,0.2) 20px, rgba(0,0,0,0.2) 40px); }