/* Add Watermark Tool - Custom Styles */

/* Position Grid */
.position-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.position-btn {
    padding: 0.75rem;
    border: 2px solid #dee2e6;
    border-radius: 0.375rem;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.position-btn:hover {
    border-color: #052c65;
    background-color: #f8f9ff;
}

.position-btn.active {
    border-color: #052c65;
    background-color: #e6f0ff;
    font-weight: 600;
}

[data-bs-theme="dark"] .position-btn {
    background: #212529;
    border-color: #495057;
    color: #e9ecef;
}

[data-bs-theme="dark"] .position-btn:hover {
    border-color: #052c65;
    background-color: #1a1d29;
}

[data-bs-theme="dark"] .position-btn.active {
    border-color: #052c65;
    background-color: #0a1628;
}

/* Canvas wrapper */
.canvas-wrapper {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

canvas {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
}

/* Download button styling */
#downloadLink {
    color: white !important;
    text-decoration: none !important;
}

#downloadLink[href]:not([href="#"]):not([href=""]) {
    display: inline-block !important;
}

/* Auto-resize textarea */
.auto-resize-textarea {
    overflow: hidden;
    resize: none;
    min-height: 38px;
}

/* Responsive */
@media (max-width: 768px) {
    .position-grid {
        gap: 0.25rem;
    }

    .position-btn {
        padding: 0.5rem;
        font-size: 0.75rem;
    }
}