/* =========================================================
ELEMENTS POWER PACK — GLOBAL SHARED CSS v1.1
Only variables, box-sizing reset, and shared utility rules.
Widget-specific styles live in widgets/{name}/assets/css/style.css
and are loaded on-demand via get_style_depends().
========================================================= */


/* =========================================================
GLOBAL DESIGN SYSTEM — EPP v1.3
One source of truth for all 14 widgets.
========================================================= */

:root {

    /* ── Brand Colors ──────────────────────────────────── */
    --epp-primary:          #7c3aed;
    --epp-primary-dark:     #6d28d9;
    --epp-primary-light:    #ede9fe;
    --epp-primary-rgb:      124, 58, 237;

    --epp-secondary:        #06b6d4;
    --epp-secondary-dark:   #0891b2;
    --epp-secondary-light:  #cffafe;

    --epp-accent:           #f59e0b;
    --epp-accent-dark:      #d97706;
    --epp-accent-light:     #fef3c7;

    --epp-success:          #10b981;
    --epp-success-light:    #d1fae5;
    --epp-success-text:     #065f46;
    --epp-success-border:   #a7f3d0;
    --epp-danger:           #ef4444;
    --epp-danger-light:     #fee2e2;
    --epp-danger-text:      #991b1b;
    --epp-danger-border:    #fecaca;
    --epp-warning:          #f59e0b;
    --epp-warning-light:    #fef3c7;

    /* ── Neutrals ──────────────────────────────────────── */
    --epp-white:            #ffffff;
    --epp-gray-50:          #f9fafb;
    --epp-gray-100:         #f3f4f6;
    --epp-gray-200:         #e5e7eb;
    --epp-gray-300:         #d1d5db;
    --epp-gray-400:         #9ca3af;
    --epp-gray-500:         #6b7280;
    --epp-gray-600:         #4b5563;
    --epp-gray-700:         #374151;
    --epp-gray-800:         #1f2937;
    --epp-gray-900:         #111827;

    /* ── Typography Scale ──────────────────────────────── */
    --epp-font:             inherit;
    --epp-text-xs:          11px;
    --epp-text-sm:          13px;
    --epp-text-base:        15px;
    --epp-text-md:          17px;
    --epp-text-lg:          20px;
    --epp-text-xl:          24px;
    --epp-text-2xl:         30px;
    --epp-text-3xl:         38px;
    --epp-font-normal:      400;
    --epp-font-medium:      500;
    --epp-font-semibold:    600;
    --epp-font-bold:        700;
    --epp-leading-tight:    1.2;
    --epp-leading-snug:     1.4;
    --epp-leading-normal:   1.6;
    --epp-leading-relaxed:  1.75;

    /* ── Spacing Scale (8px grid) ──────────────────────── */
    --epp-space-1:          4px;
    --epp-space-2:          8px;
    --epp-space-3:          12px;
    --epp-space-4:          16px;
    --epp-space-5:          20px;
    --epp-space-6:          24px;
    --epp-space-8:          32px;
    --epp-space-10:         40px;
    --epp-space-12:         48px;
    --epp-space-16:         64px;

    /* ── Border Radius Scale ───────────────────────────── */
    --epp-radius-sm:        4px;
    --epp-radius:           8px;
    --epp-radius-md:        10px;
    --epp-radius-lg:        14px;
    --epp-radius-xl:        20px;
    --epp-radius-full:      9999px;

    /* ── Shadow Scale ──────────────────────────────────── */
    --epp-shadow-xs:        0 1px 2px rgba(0,0,0,.06);
    --epp-shadow-sm:        0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    --epp-shadow:           0 4px 12px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
    --epp-shadow-md:        0 8px 24px rgba(0,0,0,.10), 0 3px 8px rgba(0,0,0,.06);
    --epp-shadow-lg:        0 16px 40px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.06);
    --epp-shadow-colored:   0 8px 24px rgba(var(--epp-primary-rgb), .22);
    --epp-shadow-inner:     inset 0 2px 6px rgba(0,0,0,.06);

    /* ── Transitions ───────────────────────────────────── */
    --epp-transition-fast:  .15s ease;
    --epp-transition:       .22s ease;
    --epp-transition-slow:  .4s ease;

    /* ── Focus Ring ────────────────────────────────────── */
    --epp-focus-ring:       0 0 0 3px rgba(var(--epp-primary-rgb), .25);
    --epp-focus-ring-color: rgba(var(--epp-primary-rgb), .25);

    /* ── Component Defaults ────────────────────────────── */
    --epp-input-bg:         #ffffff;
    --epp-input-color:      var(--epp-gray-800);
    --epp-input-border:     var(--epp-gray-200);
    --epp-input-placeholder:var(--epp-gray-400);
    --epp-btn-bg:           var(--epp-primary);
    --epp-btn-color:        #ffffff;
    --epp-card-bg:          #ffffff;
    --epp-card-border:      var(--epp-gray-200);
}


/* =========================================================
BOX-SIZING RESET — all 14 widget wrappers
========================================================= */

.epp-btn-wrapper, .epp-faq-pro, .dtfaq-wrapper,
.epp-testimonial-wrapper, .epp-form-wrap,
.epp-mega-menu-wrap, .epp-slider-wrap,
.epp-search-wrap, .epp-breadcrumbs-wrap,
.epp-tabs-wrap, .epp-pricing-wrap,
.epp-gallery-pro-wrap, .epp-pg-wrap,
.epp-cd-wrapper, .epp-ah-wrap,
.epp-off-canvas-wrapper, .epp-stats-counters-wrapper,
.epp-before-after-container, .epp-logo-grid-wrapper {
    box-sizing: border-box;
}

.epp-btn-wrapper *, .epp-faq-pro *, .dtfaq-wrapper *,
.epp-testimonial-wrapper *, .epp-form-wrap *,
.epp-mega-menu-wrap *, .epp-slider-wrap *,
.epp-search-wrap *, .epp-breadcrumbs-wrap *,
.epp-tabs-wrap *, .epp-pricing-wrap *,
.epp-gallery-pro-wrap *, .epp-pg-wrap *,
.epp-cd-wrapper *, .epp-ah-wrap *,
.epp-off-canvas-wrapper *, .epp-stats-counters-wrapper *,
.epp-before-after-container *, .epp-logo-grid-wrapper * {
    box-sizing: inherit;
}


/* Body scroll lock — applied by JS when mobile menu is open */
body.epp-menu-lock{overflow:hidden;}

/* =========================================================
ENTRANCE ANIMATIONS — powered by IntersectionObserver in
frontend.js. Classes are set via epp_entrance_animation control.
========================================================= */

[class*="epp-fade-in"],
[class*="epp-zoom-in"],
[class*="epp-slide-up"],
[class*="epp-bounce-in"] {
    opacity: 0;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.4,0,.2,1);
    animation-duration: var(--epp-entrance-duration, 600ms);
    animation-delay: var(--epp-entrance-delay, 0ms);
}

.epp-animated { animation-play-state: running; }

.epp-fade-in.epp-animated          { animation-name: eppFadeIn; }
.epp-fade-in-up.epp-animated       { animation-name: eppFadeInUp; }
.epp-fade-in-down.epp-animated     { animation-name: eppFadeInDown; }
.epp-fade-in-left.epp-animated     { animation-name: eppFadeInLeft; }
.epp-fade-in-right.epp-animated    { animation-name: eppFadeInRight; }
.epp-zoom-in.epp-animated          { animation-name: eppZoomIn; }
.epp-slide-up.epp-animated         { animation-name: eppSlideUp; }
.epp-bounce-in.epp-animated        { animation-name: eppBounceIn; }

@keyframes eppFadeIn      { from{opacity:0}                            to{opacity:1} }
@keyframes eppFadeInUp    { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes eppFadeInDown  { from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)} }
@keyframes eppFadeInLeft  { from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)} }
@keyframes eppFadeInRight { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }
@keyframes eppZoomIn      { from{opacity:0;transform:scale(.85)}       to{opacity:1;transform:scale(1)} }
@keyframes eppSlideUp     { from{opacity:0;transform:translateY(60px)} to{opacity:1;transform:translateY(0)} }
@keyframes eppBounceIn    { 0%{opacity:0;transform:scale(.3)} 50%{opacity:1;transform:scale(1.05)} 70%{transform:scale(.95)} 100%{opacity:1;transform:scale(1)} }

/* Editor: always show (no animation in edit mode) */
.elementor-editor-active [class*="epp-fade-in"],
.elementor-editor-active [class*="epp-zoom-in"],
.elementor-editor-active [class*="epp-slide-up"],
.elementor-editor-active [class*="epp-bounce-in"] {
    opacity: 1 !important;
    animation: none !important;
}

/* =========================================================
SHARED UTILITY
========================================================= */
.epp-editor-placeholder {
    padding: var(--epp-space-10,40px) var(--epp-space-5,20px);
    text-align: center;
    color: var(--epp-gray-400,#9ca3af);
    font-size: var(--epp-text-sm,14px);
    border: 2px dashed var(--epp-gray-200,#e5e7eb);
    border-radius: var(--epp-radius,8px);
}

/* =========================================================
NOTE: All widget-specific rules have been moved to
widgets/{name}/assets/css/style.css and are loaded
on-demand. Only global shared rules live here.
========================================================= */