/* =========================================================
ESSENTIAL PRO 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 ──────────────────────────────────── */
    --eppro-primary:          #7c3aed;
    --eppro-primary-dark:     #6d28d9;
    --eppro-primary-light:    #ede9fe;
    --eppro-primary-rgb:      124, 58, 237;

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

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

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

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

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

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

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

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

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

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

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

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

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


/* =========================================================
BOX-SIZING RESET — scoped to prevent Elementor editor leakage
========================================================= */

/*
 * Direct EPP elements always get border-box — scoped strictly to
 * class names starting/containing "eppro-" to avoid touching Elementor internals.
 */
[class^="eppro-"]:not([class*="elementor-"]):not([id*="elementor"]),
[class*=" eppro-"]:not([class*="elementor-"]):not([id*="elementor"]) {
    box-sizing: border-box;
}

/*
 * Descendant reset — ONLY on the live public frontend.
 * Two guards required:
 *   1. body:not(.elementor-editor-active)   — outer WP admin editor page
 *   2. body:not(.elementor-editor-preview)  — Elementor PREVIEW iframe
 *      (the iframe body gets .elementor-editor-preview exclusively;
 *       note: .elementor-page appears on BOTH live frontend and preview,
 *       so it cannot be used as a guard — it would break live site widgets)
 */
body:not(.elementor-editor-active):not(.elementor-editor-preview) .elementor-widget-container [class^="eppro-"] *,
body:not(.elementor-editor-active):not(.elementor-editor-preview) .elementor-widget-container [class*=" eppro-"] * {
    box-sizing: border-box;
}

/*
 * Safety net: restore content-box for Elementor panel controls only.
 */
.elementor-editor-active .elementor-control *,
.elementor-editor-active .elementor-panel * {
    box-sizing: content-box;
}

/* Body scroll lock — applied by JS when mobile menu is open. */
body.eppro-menu-lock:not(.elementor-editor-active):not(.elementor-editor-preview) {
    overflow: hidden;
}


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

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

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

.eppro-fade-in.eppro-animated          { animation-name: epproFadeIn; }
.eppro-fade-in-up.eppro-animated       { animation-name: epproFadeInUp; }
.eppro-fade-in-down.eppro-animated     { animation-name: epproFadeInDown; }
.eppro-fade-in-left.eppro-animated     { animation-name: epproFadeInLeft; }
.eppro-fade-in-right.eppro-animated    { animation-name: epproFadeInRight; }
.eppro-zoom-in.eppro-animated          { animation-name: epproZoomIn; }
.eppro-slide-up.eppro-animated         { animation-name: epproSlideUp; }
.eppro-bounce-in.eppro-animated        { animation-name: epproBounceIn; }

@keyframes epproFadeIn      { from{opacity:0}                            to{opacity:1} }
@keyframes epproFadeInUp    { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes epproFadeInDown  { from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)} }
@keyframes epproFadeInLeft  { from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)} }
@keyframes epproFadeInRight { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }
@keyframes epproZoomIn      { from{opacity:0;transform:scale(.85)}       to{opacity:1;transform:scale(1)} }
@keyframes epproSlideUp     { from{opacity:0;transform:translateY(60px)} to{opacity:1;transform:translateY(0)} }
@keyframes epproBounceIn    { 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*="eppro-fade-in"],
.elementor-editor-active [class*="eppro-zoom-in"],
.elementor-editor-active [class*="eppro-slide-up"],
.elementor-editor-active [class*="eppro-bounce-in"] {
    opacity: 1 !important;
    animation: none !important;
}

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

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

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

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

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

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

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

.eppro-editor-placeholder--error .eppro-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.
========================================================= */