/* =========================================================
ELEMENTS POWER PACK — GLOBAL SHARED CSS v1.7
Design tokens, box-sizing reset, animations, shared utilities.
Widget-specific styles live in widgets/{name}/style.css
and are loaded on-demand via get_style_depends().
========================================================= */


/* =========================================================
GLOBAL DESIGN SYSTEM — EPP v1.7
One source of truth for all 46 active 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-error:            #ef4444;
    --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-xl:        0 24px 48px rgba(0,0,0,.16), 0 8px 20px rgba(0,0,0,.08);
    --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-base:  .22s ease;
    --epp-transition:       .22s ease;
    --epp-transition-slow:  .4s ease;

    /* ── Easing ──────────────────────────────────────────── */
    --epp-ease-out:         cubic-bezier(0, 0, .2, 1);
    --epp-ease-in:          cubic-bezier(.4, 0, 1, 1);
    --epp-ease-in-out:      cubic-bezier(.4, 0, .2, 1);
    --epp-ease-bounce:      cubic-bezier(.68, -.55, .265, 1.55);

    /* ── Z-Index Scale ───────────────────────────────────── */
    --epp-z-base:           1;
    --epp-z-dropdown:       100;
    --epp-z-sticky:         200;
    --epp-z-fixed:          300;
    --epp-z-overlay:        400;
    --epp-z-modal:          500;
    --epp-z-popover:        600;
    --epp-z-tooltip:        700;

    /* ── 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 46 active widget elements
========================================================= */

[class^="epp-"],
[class*=" epp-"],
[class^="epp-"] *,
[class*=" epp-"] * {
    box-sizing: border-box;
}


/* 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);
}

.epp-editor-placeholder--warning {
    background: #fffbeb;
    border-color: #fcd34d;
}

.epp-editor-placeholder--error {
    background: #fff8f8;
    border-color: #fca5a5;
}

.epp-editor-placeholder__icon {
    width: 36px;
    height: 36px;
    margin: 0 auto 12px;
    display: block;
}

.epp-editor-placeholder__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--epp-gray-700, #475569);
}

.epp-editor-placeholder__desc {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--epp-gray-500, #64748b);
}

.epp-editor-placeholder--warning .epp-editor-placeholder__title {
    color: #92400e;
}

.epp-editor-placeholder--error .epp-editor-placeholder__title {
    color: #dc2626;
}

/* =========================================================
NOTE: All widget-specific rules live in
widgets/{name}/assets/css/style.css and are loaded
on-demand via get_style_depends(). Only global shared
rules, design tokens, and resets live here.
========================================================= */