/* ============================================================
   Cee Jay Elementor Widgets — widgets.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* Fonts */
.font-serif { font-family: 'Playfair Display', serif !important; }

/* Fade-in animations (reused from theme) */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.21, 0.47, 0.32, 0.98),
                transform 0.8s cubic-bezier(0.21, 0.47, 0.32, 0.98);
}
.fade-in.visible      { opacity: 1; transform: translateY(0); }
.fade-in-delay-1      { transition-delay: 0.1s; }
.fade-in-delay-2      { transition-delay: 0.2s; }
.fade-in-delay-3      { transition-delay: 0.3s; }
.fade-in-delay-4      { transition-delay: 0.4s; }

/* Portfolio hover overlay */
.cj-portfolio-item:hover img    { transform: scale(1.05); }
.cj-portfolio-item:hover .cj-overlay { opacity: 1 !important; }

/* Filter button active state */
.cj-filter-btn.active {
    background: #ffffff !important;
    color: #000000 !important;
}

/* Form input focus */
.ceejay-form input:focus,
.ceejay-form select:focus,
.ceejay-form textarea:focus {
    border-color: #ffffff !important;
    background: #1a1a1a !important;
    box-shadow: 0 0 0 1px #ffffff;
}

/* Elementor editor — make widgets visible in canvas */
.elementor-editor-active .fade-in {
    opacity: 1 !important;
    transform: none !important;
}