/* Footer */
.editor-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: rgba(0, 0, 0, var(--opacity-heavy));
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, var(--opacity-light));
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 var(--space-xl);
    gap: var(--space-md);
}

/* Editor buttons use .btn .btn-md from theme.css */
/* Custom glassmorphism secondary button for editor footer */
.editor-footer .btn-secondary {
    background: rgba(255, 255, 255, var(--opacity-light));
    backdrop-filter: blur(10px);
    color: white;
    border: 1px solid rgba(255, 255, 255, var(--opacity-medium));
}

.editor-footer .btn-secondary:hover {
    background: rgba(255, 255, 255, var(--opacity-medium));
}

/* Notification */
.editor-notification {
    position: fixed;
    top: var(--space-lg);
    right: var(--space-lg);
    background: var(--color-success);
    color: white;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    z-index: 10001;
    animation: slideIn 0.3s ease;
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    box-shadow: 0 var(--space-sm) var(--space-xl) rgba(0, 0, 0, var(--opacity-strong));
}

.editor-notification.error {
    background: var(--color-error);
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Template Element Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(100vh);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-100vh);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* Element Bounding Boxes */
.canvas-element.with-bounds {
    border: var(--space-xs) dashed var(--color-info-50);
    box-sizing: border-box;
}

.canvas-element.with-bounds.selected {
    border-color: var(--color-info-80);
}

/* Alignment Guides */
.alignment-guide {
    position: absolute;
    display: none;
    pointer-events: none;
    z-index: 100;
    transition: opacity 0.15s ease;
}

.alignment-guide.vertical {
    width: 1px;
    height: 100%;
    top: 0;
    background: repeating-linear-gradient(
        to bottom,
        var(--color-info-cyan) 0,
        var(--color-info-cyan) var(--space-sm),
        transparent var(--space-sm),
        transparent var(--space-md)
    );
    box-shadow: 0 0 var(--space-xs) var(--color-cyan-60);
}

.alignment-guide.horizontal {
    height: 1px;
    width: 100%;
    left: 0;
    background: repeating-linear-gradient(
        to right,
        var(--color-info-cyan) 0,
        var(--color-info-cyan) var(--space-sm),
        transparent var(--space-sm),
        transparent var(--space-md)
    );
    box-shadow: 0 0 var(--space-xs) var(--color-cyan-60);
}

/* Resize Handles */
.resize-handles {
    position: absolute;
    inset: calc(-1 * var(--space-sm));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.canvas-element.selected .resize-handles,
.canvas-element:hover .resize-handles {
    opacity: 1;
    pointer-events: auto;
}

.resize-handle {
    position: absolute;
    background: rgba(255, 255, 255, var(--opacity-near-full));
    border: 1px solid rgba(255, 255, 255, var(--opacity-strong));
    backdrop-filter: blur(4px);
    box-shadow:
        0 var(--space-xs) var(--space-sm) rgba(0, 0, 0, var(--opacity-light)),
        0 0 0 1px var(--color-info-20),
        inset 0 1px 0 rgba(255, 255, 255, var(--opacity-heavy));
    z-index: 101;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.resize-handle.corner {
    width: var(--radius-md);
    height: var(--radius-md);
    border-radius: var(--radius-full);
}

.resize-handle.edge {
    background: rgba(255, 255, 255, var(--opacity-solid));
    opacity: 0.6;
}

.resize-handle:hover {
    background: var(--color-info-95);
    border-color: rgba(255, 255, 255, var(--opacity-near-full));
    box-shadow:
        0 var(--space-xs) var(--space-md) var(--color-info-40),
        0 0 0 var(--space-xs) var(--color-info-30),
        inset 0 1px 0 rgba(255, 255, 255, var(--opacity-solid));
    transform: scale(1.3);
    opacity: 1;
}

/* Corner handles */
.resize-handle.nw {
    top: 0;
    left: 0;
    cursor: nw-resize;
}

.resize-handle.ne {
    top: 0;
    right: 0;
    cursor: ne-resize;
}

.resize-handle.se {
    bottom: 0;
    right: 0;
    cursor: se-resize;
}

.resize-handle.sw {
    bottom: 0;
    left: 0;
    cursor: sw-resize;
}

/* Edge handles */
.resize-handle.n {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--space-xl);
    height: var(--space-xs);
    border-radius: var(--radius-sm);
    cursor: n-resize;
}

.resize-handle.n:hover {
    transform: translateX(-50%) scale(1.3);
}

.resize-handle.e {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--space-xs);
    height: var(--space-xl);
    border-radius: var(--radius-sm);
    cursor: e-resize;
}

.resize-handle.e:hover {
    transform: translateY(-50%) scale(1.3);
}

.resize-handle.s {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--space-xl);
    height: var(--space-xs);
    border-radius: var(--radius-sm);
    cursor: s-resize;
}

.resize-handle.s:hover {
    transform: translateX(-50%) scale(1.3);
}

.resize-handle.w {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--space-xs);
    height: var(--space-xl);
    border-radius: var(--radius-sm);
    cursor: w-resize;
}

.resize-handle.w:hover {
    transform: translateY(-50%) scale(1.3);
}

/* Element Delete Button */
.element-delete-btn {
    position: absolute;
    top: calc(-1 * var(--space-md));
    left: calc(-1 * var(--space-md));
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-rose-20);
    backdrop-filter: blur(20px);
    border: var(--space-xs) solid var(--color-rose-40);
    color: var(--color-rose-500);
    font-size: var(--font-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.element-delete-btn:hover {
    background: var(--color-rose-40);
    border-color: var(--color-rose-80);
    transform: scale(1.2);
    box-shadow: 0 0 var(--space-lg) var(--color-rose-50);
}

/* Responsive */
@media (max-width: 1400px) {
    .editor-container {
        grid-template-columns: 280px 1fr 320px;
    }
}

@media (max-width: 1200px) {
    .editor-container {
        grid-template-columns: 1fr;
    }

    .editor-left-panel,
    .editor-right-panel {
        display: none;
    }
}