/* ================================== */
/* css/pdf-watermark.css
/* Page-specific styles for Watermark
/* Theme: Cyan/Blue
/* ================================== */

/* 1. Tabs */
.wm-tab {
    color: var(--text-secondary);
    background: transparent;
}
.wm-tab:hover {
    color: var(--text-primary);
    background: rgba(0,0,0,0.05);
}
.wm-tab.active {
    background: white;
    color: #06b6d4; /* cyan-500 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
body.dark .wm-tab.active {
    background: #374151; /* gray-700 */
    color: #22d3ee; /* cyan-400 */
}

/* 2. Position Grid Buttons */
.pos-btn {
    background-color: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: all 0.2s ease;
}

body.dark .pos-btn {
    background-color: var(--bg-secondary-hover);
}

.pos-btn:hover {
    border-color: #06b6d4; /* cyan-500 */
    color: #06b6d4;
    background-color: rgba(6, 182, 212, 0.05);
}

/* Selected/Active State */
.pos-btn.active {
    background: linear-gradient(135deg, #06b6d4, #2563eb); /* cyan-500 to blue-600 */
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

/* 3. Gradient Border Input Box (Theme: Cyan) */
.input-gradient-wrap {
    padding: 2px;
    border-radius: 0.6rem;
    background: linear-gradient(to bottom right, #06b6d4, #2563eb);
    transition: all 0.3s ease;
}
.input-gradient-wrap:focus-within {
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.5);
}

/* Standard Input Styles */
.input-gradient-wrap input:not([type="color"]) {
    width: 100%;
    border: none !important;
    outline: none !important;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--bg-primary); 
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: 'Poppins', sans-serif;
}
body.dark .input-gradient-wrap input:not([type="color"]) {
     background-color: var(--bg-secondary-hover);
}

/* 4. Live Preview Overlay */
.watermark-overlay {
    position: absolute;
    z-index: 50;
    pointer-events: none; /* Let clicks pass */
    transform-origin: center center;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
}

.watermark-overlay img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Page Card relative positioning */
#watermarkPagePreview .page-card .relative {
    position: relative;
    overflow: hidden; /* Keep watermark inside */
}