/* ============================================================================
   EVENTS IL Suite — Design System (skin layer)
   ----------------------------------------------------------------------------
   Visual-only override layer. Loads AFTER every module's own CSS and restyles
   the EXISTING component classes to one premium light-blue SaaS look.
   It changes NO markup, NO logic, NO IDs, NO shortcodes — only appearance.
   Primary: #3B82F6 (hover #2563EB) · Typeface: Heebo · RTL-first.
   ========================================================================== */

:root{
  /* Primary — modern light blue */
  --eilx-50:#eff6ff;  --eilx-100:#dbeafe; --eilx-200:#bfdbfe; --eilx-300:#93c5fd;
  --eilx-400:#60a5fa; --eilx-500:#3b82f6; --eilx-600:#2563eb; --eilx-700:#1d4ed8;
  --eilx-brand:#3b82f6;           /* primary */
  --eilx-brand-strong:#2563eb;    /* hover / active */
  --eilx-brand-soft:#eff6ff;      /* tints, active-tab bg */

  /* Neutrals */
  --eilx-ink:#0f172a; --eilx-ink-2:#334155; --eilx-muted:#64748b;
  --eilx-line:#e6eaf0; --eilx-bg:#f6f8fc; --eilx-card:#ffffff;

  /* Semantic */
  --eilx-ok:#16a34a; --eilx-ok-soft:#ecfdf5; --eilx-warn:#d97706; --eilx-warn-soft:#fffbeb;
  --eilx-err:#dc2626; --eilx-err-soft:#fef2f2; --eilx-info:#2563eb; --eilx-info-soft:#eff6ff;

  /* Type scale */
  --eilx-fs-xs:12px; --eilx-fs-sm:13px; --eilx-fs-md:14px; --eilx-fs-lg:16px;
  --eilx-fs-xl:20px; --eilx-fs-2xl:26px; --eilx-fs-3xl:32px;

  /* Radius / shadow / ring */
  --eilx-r-sm:11px; --eilx-r:16px; --eilx-r-lg:20px;
  /* Layered shadows for a refined, premium depth (Linear/Stripe feel) */
  --eilx-shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --eilx-shadow:0 1px 3px rgba(16,24,40,.04), 0 10px 28px rgba(16,24,40,.07);
  --eilx-shadow-lg:0 2px 6px rgba(16,24,40,.05), 0 24px 50px rgba(16,24,40,.12);
  --eilx-ring:0 0 0 4px rgba(59,130,246,.18);

  --eilx-font:"Heebo","Assistant",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}

/* ---------------------------------------------------------------------------
   1) Base + typography — SCOPED to the suite's own containers only, so the
   surrounding theme is never affected.
   ------------------------------------------------------------------------- */
.i8w-wrap, .eil-card, .eil-p2, .eil-container,
.i8w-eil-addon-card, .i8w-card,
.i8w-p3ib-builder, .i8w-p3ib-guest, .i8w-rsvp-visual-widget,
.i8w-p4-shell, .i8w-p4-overlay, .i8w-p4-workspace,
.i8w-p5-gift-page, .i8w-p5-dashboard,
.p6-budget-wrap{
  font-family:var(--eilx-font);
  color:var(--eilx-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.i8w-wrap *, .eil-card *, .eil-p2 *, .i8w-eil-addon-card *, .i8w-card *,
.i8w-p3ib-builder *, .i8w-p3ib-guest *, .i8w-rsvp-visual-widget *,
.i8w-p4-shell *, .i8w-p5-gift-page *, .i8w-p5-dashboard *, .p6-budget-wrap *{
  font-family:inherit;
}

/* ---------------------------------------------------------------------------
   2) Buttons — unify every module's button to the brand button system.
   ------------------------------------------------------------------------- */
.eil-btn,
.i8w-btn.i8w-btn-primary,
.p6-btn.p6-btn-save, .p6-btn.p6-btn-income, .p6-btn.p6-btn-export{
  background:var(--eilx-brand);
  color:#fff;
  border:1px solid transparent;
  border-radius:12px;
  padding:11px 18px;
  font-weight:700;
  font-size:var(--eilx-fs-md);
  line-height:1;
  cursor:pointer;
  transition:background .15s ease, box-shadow .15s ease, transform .05s ease;
}
.eil-btn:hover,
.i8w-btn.i8w-btn-primary:hover,
.p6-btn.p6-btn-save:hover, .p6-btn.p6-btn-income:hover, .p6-btn.p6-btn-export:hover{
  background:var(--eilx-brand-strong);
  color:#fff;
}
.eil-btn:active, .i8w-btn.i8w-btn-primary:active{transform:translateY(1px)}
.eil-btn:focus-visible, .i8w-btn:focus-visible, .p6-btn:focus-visible{
  outline:none; box-shadow:var(--eilx-ring);
}

/* Ghost / secondary buttons */
.eil-btn--ghost,
.p6-btn.p6-btn-secondary,
.i8w-btn:not(.i8w-btn-primary){
  background:#fff;
  color:var(--eilx-ink-2);
  border:1px solid var(--eilx-line);
  border-radius:12px;
  font-weight:700;
}
.eil-btn--ghost:hover, .p6-btn.p6-btn-secondary:hover{
  background:var(--eilx-brand-soft);
  color:var(--eilx-brand-strong);
  border-color:var(--eilx-300);
}

/* Keep semantic intent buttons readable but on-system */
.p6-btn.p6-btn-expense{background:var(--eilx-err);color:#fff;border:1px solid transparent;border-radius:12px;font-weight:700}
.p6-btn.p6-btn-expense:hover{filter:brightness(.95)}

/* Preview button in guests manager used hard #111827 !important */
.eil-preview-btn,
.eil-preview-btn:hover,
.eil-preview-btn:focus,
.eil-preview-btn.is-locked,
.eil-preview-btn[disabled]{
  background:var(--eilx-brand) !important;
  color:#fff !important;
  border-radius:10px !important;
}

/* WooCommerce-style overage button inside P1 dashboard */
.i8w-overage-pay.button.button-primary{
  background:var(--eilx-brand) !important;
  border-color:var(--eilx-brand) !important;
  color:#fff !important;
  border-radius:12px !important;
  box-shadow:none !important;
  font-weight:700 !important;
}
.i8w-overage-pay.button.button-primary:hover{background:var(--eilx-brand-strong) !important}

/* ---------------------------------------------------------------------------
   3) Cards / panels — soft, consistent surfaces.
   ------------------------------------------------------------------------- */
.eil-card,
.i8w-card,
.i8w-stat,
.i8w-eil-inline-card,
.i8w-p3ib-step, .i8w-p3ib-editor-shell, .i8w-p3ib-final-preview, .i8w-p3ib-rsvp-box,
.i8w-p3ib-preview-panel, .i8w-p3ib-fields-panel,
.p6-summary-card, .p6-budget-panel,
.i8w-p5-event-card{
  background:var(--eilx-card);
  border:1px solid var(--eilx-line);
  border-radius:var(--eilx-r);
  box-shadow:var(--eilx-shadow);
}
.i8w-card{padding:26px}
.eil-card{margin:18px 0}

/* Headings */
.i8w-card h2, .eil-card__title, .i8w-p2__table-title{
  font-weight:800; letter-spacing:-.01em; color:var(--eilx-ink);
}
.i8w-card h2{font-size:var(--eilx-fs-xl)}
.i8w-muted, .eil-card__subtitle, .eil-muted{color:var(--eilx-muted)}

/* Stat cards (P1 dashboard) */
.i8w-stat{padding:18px 18px;border-radius:var(--eilx-r)}
.i8w-stat-title{color:var(--eilx-muted);font-size:var(--eilx-fs-sm);font-weight:600}
.i8w-stat-value{font-size:var(--eilx-fs-2xl);font-weight:800;color:var(--eilx-ink)}

/* ---------------------------------------------------------------------------
   4) Forms — one input language everywhere.
   ------------------------------------------------------------------------- */
.i8w-form input,
.eil-input, .eil-select,
.i8w-eil-input, .i8w-eil-textarea,
.i8w-p3ib-field-input,
.p6-field input, .p6-field textarea, .p6-budget-search input{
  width:100%;
  border:1px solid var(--eilx-line);
  border-radius:var(--eilx-r-sm);
  background:#fff;
  color:var(--eilx-ink);
  font-size:var(--eilx-fs-md);
  padding:11px 13px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.i8w-form input:focus,
.eil-input:focus, .eil-select:focus,
.i8w-eil-input:focus, .i8w-eil-textarea:focus,
.i8w-p3ib-field-input:focus,
.p6-field input:focus, .p6-field textarea:focus, .p6-budget-search input:focus{
  outline:none;
  border-color:var(--eilx-400);
  box-shadow:var(--eilx-ring);
}
.i8w-form label, .i8w-eil-label, .p6-field label{
  color:var(--eilx-ink-2); font-weight:600; font-size:var(--eilx-fs-sm);
}

/* ---------------------------------------------------------------------------
   5) Tables — clean, with brand hover.
   ------------------------------------------------------------------------- */
.eil-table thead th, .p6-budget-table thead th{
  background:#f8fafc; color:var(--eilx-ink-2); font-weight:700;
}
.eil-table, .p6-budget-table{border-color:var(--eilx-line)}
.eil-table tbody tr:hover, .p6-budget-table tbody tr:hover{background:var(--eilx-brand-soft)}

/* ---------------------------------------------------------------------------
   6) Badges, notices, statuses.
   ------------------------------------------------------------------------- */
.eil-badge{background:var(--eilx-brand-soft);color:var(--eilx-brand-strong);font-weight:700;border-radius:999px}
.eil-notice{border-radius:var(--eilx-r)}
.eil-notice--ok,  .i8w-success, .i8w-eil-status.is-ok{background:var(--eilx-ok-soft);color:var(--eilx-ok)}
.eil-notice--err, .i8w-error,   .i8w-eil-status.is-err{background:var(--eilx-err-soft);color:var(--eilx-err)}
.i8w-success, .i8w-error{border:1px solid transparent;border-radius:var(--eilx-r);padding:12px 14px}
.i8w-success{border-color:rgba(22,163,74,.18)} .i8w-error{border-color:rgba(220,38,38,.18)}
.i8w-link{color:var(--eilx-brand-strong);text-decoration-thickness:1px;text-underline-offset:2px}
.i8w-link:hover{color:var(--eilx-700)}

/* ---------------------------------------------------------------------------
   7) Reminders (P2) — recolor the navy "selected" card to brand.
   ------------------------------------------------------------------------- */
.i8w-eil-check{border-radius:var(--eilx-r);border-color:var(--eilx-line)}
.i8w-eil-check.is-selected{
  background:var(--eilx-brand) !important;
  border-color:var(--eilx-brand) !important;
  box-shadow:0 10px 22px rgba(37,99,235,.22) !important;
}

/* ---------------------------------------------------------------------------
   8) Invitation builder (P3) — recolor counters / status / RSVP accents.
   ------------------------------------------------------------------------- */
.i8w-counter button{background:var(--eilx-brand);border-radius:10px}
.i8w-counter button:hover{background:var(--eilx-brand-strong)}
.i8w-p3ib-status.ok{background:var(--eilx-ok-soft);color:var(--eilx-ok)}
.i8w-p3ib-status.err{background:var(--eilx-err-soft);color:var(--eilx-err)}
.i8w-rsvp-visual-subtitle{color:var(--eilx-brand-strong)}
.i8w-rsvp-btn.is-active{outline-color:var(--eilx-brand) !important}

/* ---------------------------------------------------------------------------
   9) P6 budget — summary accents + profit/expense semantics on-system.
   ------------------------------------------------------------------------- */
.p6-budget-title{font-weight:800;letter-spacing:-.01em}
.p6-summary-card{border-radius:var(--eilx-r);box-shadow:var(--eilx-shadow)}
.p6-summary-approved .p6-summary-amount, .p6-summary-income .p6-summary-amount{color:var(--eilx-brand-strong)}
.p6-summary-expense .p6-summary-amount{color:var(--eilx-err)}
.p6-summary-profit  .p6-summary-amount{color:var(--eilx-ok)}

/* ---------------------------------------------------------------------------
   10) P5 credit gifts — restyle the inline-styled screens via !important
   (these screens have no class on most elements; we scope to the roots).
   ------------------------------------------------------------------------- */
.i8w-p5-gift-page h2, .i8w-p5-dashboard h2{font-weight:800;letter-spacing:-.01em}

.i8w-p5-gift-page input[type=text],
.i8w-p5-gift-page input[type=number],
.i8w-p5-gift-page textarea,
.i8w-p5-dashboard input[type=text],
.i8w-p5-dashboard form input:not([type=hidden]){
  border:1px solid var(--eilx-line) !important;
  border-radius:var(--eilx-r-sm) !important;
}
.i8w-p5-gift-page input:focus, .i8w-p5-gift-page textarea:focus,
.i8w-p5-dashboard input:focus{
  outline:none !important; border-color:var(--eilx-400) !important; box-shadow:var(--eilx-ring) !important;
}
/* Primary (enabled) buttons -> brand; disabled stay neutral */
.i8w-p5-gift-page button[type=submit],
.i8w-p5-dashboard form button[type=submit]{
  background:var(--eilx-brand) !important;
  color:#fff !important;
  border:1px solid transparent !important;
  border-radius:12px !important;
  font-weight:700 !important;
}
.i8w-p5-gift-page button[type=submit]:hover,
.i8w-p5-dashboard form button[type=submit]:hover{background:var(--eilx-brand-strong) !important}
/* Amount preset chips */
.i8w-p5-preset{border:1px solid var(--eilx-line) !important;border-radius:999px !important;font-weight:600 !important}
.i8w-p5-preset:hover{border-color:var(--eilx-300) !important;color:var(--eilx-brand-strong) !important;background:var(--eilx-brand-soft) !important}
/* Cards / table surfaces */
.i8w-p5-dashboard #i8w-p5-bank-gate,
.i8w-p5-dashboard table{border-radius:var(--eilx-r);overflow:hidden}
.i8w-p5-dashboard table thead th{background:#f8fafc !important;color:var(--eilx-ink-2) !important}
.i8w-p5-dashboard table tbody tr:hover td{background:var(--eilx-brand-soft)}
.i8w-p5-completed-badge{background:var(--eilx-brand-soft);color:var(--eilx-brand-strong)}

/* Mobile: turn the credit-gifts transactions table into readable cards
   (sender as the card title, every value labelled, blessing wraps full-width). */
@media (max-width:768px){
  .i8w-p5-dashboard .i8w-p5-gifts-table thead{display:none !important}
  .i8w-p5-dashboard .i8w-p5-gifts-table,
  .i8w-p5-dashboard .i8w-p5-gifts-table tbody,
  .i8w-p5-dashboard .i8w-p5-gifts-table tr,
  .i8w-p5-dashboard .i8w-p5-gifts-table td{display:block !important;width:100% !important}
  .i8w-p5-dashboard .i8w-p5-gifts-table tr{
    border:1px solid var(--eilx-line) !important;border-radius:14px !important;
    padding:14px !important;margin:0 0 12px !important;background:#fff !important;
    box-shadow:var(--eilx-shadow-sm) !important;
  }
  .i8w-p5-dashboard .i8w-p5-gifts-table td{
    border:0 !important;padding:7px 0 !important;
    display:flex !important;justify-content:space-between;gap:14px;align-items:baseline;
    text-align:start !important;
  }
  .i8w-p5-dashboard .i8w-p5-gifts-table td:before{
    content:attr(data-label);font-weight:700;color:var(--eilx-muted);flex:0 0 auto;
  }
  /* sender = card title */
  .i8w-p5-dashboard .i8w-p5-gifts-table td:first-child{
    font-weight:800;font-size:15px;border-bottom:1px solid var(--eilx-line) !important;
    padding-bottom:9px !important;margin-bottom:4px !important;
  }
  .i8w-p5-dashboard .i8w-p5-gifts-table td:first-child:before{display:none}
  /* blessing can be long — stack it on its own */
  .i8w-p5-dashboard .i8w-p5-gifts-table td[data-label="ברכה"]{flex-direction:column;align-items:flex-start;gap:3px}
}

/* ===========================================================================
   11) TABS — one modern tab look. Applies to (a) the generic .eilx-tabs
   component we add to new screens, (b) P3 step-nav, (c) P4 top-bar tabs.
   ========================================================================= */

/* (a) generic reusable component */
.eilx-tabs{
  display:flex; gap:6px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
  background:var(--eilx-card); border:1px solid var(--eilx-line);
  border-radius:var(--eilx-r); padding:6px; box-shadow:var(--eilx-shadow-sm);
  margin:0 0 16px;
}
.eilx-tabs::-webkit-scrollbar{display:none}
.eilx-tab{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
  border:0; background:transparent; color:var(--eilx-ink-2);
  padding:10px 16px; border-radius:10px; font-family:inherit;
  font-size:var(--eilx-fs-md); font-weight:600; cursor:pointer; white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.eilx-tab:hover{background:var(--eilx-brand-soft); color:var(--eilx-brand-strong)}
.eilx-tab.is-active{background:var(--eilx-brand); color:#fff; box-shadow:0 6px 14px rgba(37,99,235,.28)}
.eilx-tab:focus-visible{outline:none; box-shadow:var(--eilx-ring)}
.eilx-tabpanel[hidden]{display:none}
.eilx-tabpanel{animation:eilx-fade .25s ease}
@keyframes eilx-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* (b) P3 step navigator -> modern pill tabs */
.i8w-p3ib-steps-nav{
  background:var(--eilx-card); border:1px solid var(--eilx-line);
  border-radius:var(--eilx-r); padding:6px; box-shadow:var(--eilx-shadow-sm); gap:6px;
}
.i8w-p3ib-steps-nav>div{
  border:0; background:transparent; color:var(--eilx-ink-2);
  border-radius:10px; padding:10px 16px; font-weight:600; transition:.15s ease;
}
.i8w-p3ib-steps-nav>div.is-active{
  background:var(--eilx-brand); color:#fff; border-color:transparent;
  box-shadow:0 6px 14px rgba(37,99,235,.28);
}

/* (c) P4 top-bar tabs */
.i8w-top-btn.tab, .i8w-p4-topbar-actions .i8w-top-btn{
  border-radius:10px; font-weight:600; transition:.15s ease;
}
.i8w-top-btn.tab.is-active, .i8w-top-btn.tab.active,
.i8w-p4-topbar-actions .i8w-top-btn.is-active,
.i8w-p4-topbar-actions .i8w-top-btn.active{
  background:var(--eilx-brand) !important; color:#fff !important;
  border-color:transparent !important; box-shadow:0 6px 14px rgba(37,99,235,.28) !important;
}
/* P4 launch button -> brand */
.i8w-p4-launch-btn{background:var(--eilx-brand) !important;color:#fff !important;border-radius:12px !important;font-weight:700 !important}
.i8w-p4-launch-btn:hover{background:var(--eilx-brand-strong) !important}

/* ===========================================================================
   12) Responsive / mobile polish (touch-friendly, one-row tabs).
   ========================================================================= */
@media (max-width:760px){
  /* text-only tabs stay readable; the row scrolls horizontally if needed */
  .eilx-tab{padding:11px 14px}
  .i8w-card{padding:18px}
}
@media (max-width:600px){
  /* larger touch targets for primary actions */
  .eil-btn, .i8w-btn.i8w-btn-primary,
  .i8w-p5-gift-page button[type=submit], .i8w-p5-dashboard form button[type=submit]{
    min-height:46px;
  }
  .i8w-form input, .eil-input, .i8w-eil-input, .p6-field input{min-height:46px}
}

/* ===========================================================================
   13) Elegance pass — premium micro-polish (depth, motion, focus).
   ========================================================================= */
.eil-btn,
.i8w-btn.i8w-btn-primary{box-shadow:0 6px 14px rgba(37,130,246,.20)}
.eil-btn:hover,
.i8w-btn.i8w-btn-primary:hover{box-shadow:0 9px 20px rgba(37,99,235,.28)}
.eil-btn:active,
.i8w-btn.i8w-btn-primary:active{box-shadow:0 3px 8px rgba(37,99,235,.22)}

/* KPI / summary cards: gentle hover lift (Linear/Notion feel) */
.i8w-stat,
.p6-summary-card{transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease}
.i8w-stat:hover,
.p6-summary-card:hover{transform:translateY(-2px);box-shadow:var(--eilx-shadow-lg);border-color:var(--eilx-200)}

/* Cards: hairline top sheen for a crafted look */
.eil-card,
.i8w-card,
.p6-budget-panel{position:relative}

/* Inputs: smoother, larger hit area + refined placeholder */
.i8w-form input,
.eil-input,.eil-select,
.i8w-eil-input,.i8w-eil-textarea,
.i8w-p3ib-field-input,
.p6-field input,.p6-field textarea,.p6-budget-search input{min-height:44px;line-height:1.4}
.i8w-form input::placeholder,
.eil-input::placeholder,
.i8w-eil-input::placeholder,
.p6-field input::placeholder{color:#9aa6b6}

/* Links and focus consistency */
a:focus-visible,
button:focus-visible{outline:none}
.eil-table thead th{letter-spacing:.01em}

/* Selection colour on brand */
.i8w-wrap ::selection,.eil-card ::selection,.p6-budget-wrap ::selection,
.i8w-p5-dashboard ::selection,.i8w-p3ib-builder ::selection{background:var(--eilx-brand-soft);color:var(--eilx-brand-strong)}

/* ===========================================================================
   14) Elegance pass v2 — minimal & clean refresh across every area (visual only).
   The token tweaks above (softer radius + layered shadows) do the heavy lifting;
   here we add whitespace, calmer tables and more refined headings.
   ========================================================================= */

/* A touch more breathing room between stacked cards/sections */
.eilx-app .eil-card,
.eilx-app .i8w-card,
.eilx-app .i8w-eil-addon-card{margin:0 0 22px !important}

/* Headings: tighter tracking + calmer line-height for a premium read */
.i8w-card h2,.eil-card__title,.p6-budget-title,
.i8w-p5-gift-page h2,.i8w-p5-dashboard h2{letter-spacing:-.015em;line-height:1.2}
.eil-card__subtitle,.i8w-muted,.eil-muted{line-height:1.55}

/* Tables: roomier rows + a quiet, lighter header — cleaner and more legible */
.eil-table thead th,.p6-budget-table thead th{
  padding-top:14px;padding-bottom:14px;font-size:12px;letter-spacing:.02em;color:var(--eilx-muted)}
.eil-table tbody td{padding-top:13px;padding-bottom:13px}
.p6-budget-table tbody td{padding-top:13px;padding-bottom:13px}

/* KPI / summary numbers: tabular figures so columns line up crisply */
.i8w-stat-value,.p6-summary-amount,.eil-p2__statsline{font-variant-numeric:tabular-nums}