/* EVENT360 Personal Area – Tab Navigation
 * Desktop: vertical sidebar (RTL: nav on right, content on left)
 * Mobile:  4-per-row purple circles grid
 */

/* ── Shell ──────────────────────────────────────────────────────────────── */
.i8w-area-shell {
  max-width: 100%;
  margin: 28px auto;
  padding: 0 16px;
  display: flex;
  flex-direction: row;
  gap: 0;
  direction: rtl;
  align-items: flex-start;
  box-sizing: border-box;
}

/* ── Sidebar Nav (desktop) ──────────────────────────────────────────────── */
.i8w-area-nav {
  width: 230px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 24px;
  background: #ffffff;
  border: 1px solid rgba(99,102,241,0.14);
  border-radius: 22px;
  box-shadow: 0 4px 20px rgba(99,102,241,0.10), 0 1px 4px rgba(15,23,42,0.06);
  padding: 14px 10px 14px;
  margin-left: 18px;
  overflow: hidden;
}

/* ── Logo ──────────────────────────────────────────────────────────────── */
.i8w-area-nav-logo {
  display: flex;
  justify-content: center;
  padding: 4px 6px 14px;
  border-bottom: 1px solid rgba(99,102,241,0.10);
  margin-bottom: 8px;
}

.i8w-area-nav-logo-img {
  max-width: 120px;
  max-height: 52px;
  object-fit: contain;
  display: block;
}

/* ── Nav buttons (desktop) ─────────────────────────────────────────────── */
.i8w-area-nav-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  text-align: right;
  width: 100%;
  font-family: 'Rubik', Arial, sans-serif;
  font-size: 12.8px;
  font-weight: 600;
  color: #475569; /* stronger, less-faded inactive tab text */
  transition: background 0.18s, color 0.18s, box-shadow 0.18s, border-color 0.18s, transform 0.12s;
  line-height: 1.3;
  position: relative;
  letter-spacing: 0.01em;
}

.i8w-area-nav-btn:hover:not(.is-active) {
  background: linear-gradient(135deg, rgba(99,102,241,0.07) 0%, rgba(124,58,237,0.07) 100%);
  color: #4f46e5;
  border-color: rgba(99,102,241,0.18);
}

.i8w-area-nav-btn.is-active {
  background: linear-gradient(135deg, #1e40af 0%, #4f46e5 55%, #7c3aed 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(99,102,241,0.28), inset 0 1px 0 rgba(255,255,255,0.15);
}

.i8w-area-nav-icon {
  flex-shrink: 0;
  line-height: 1;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9; /* crisper, less-faded inactive tab icon */
  transition: opacity 0.18s;
}

.i8w-area-nav-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.i8w-area-nav-btn.is-active .i8w-area-nav-icon {
  opacity: 1;
}

.i8w-area-nav-btn:hover:not(.is-active) .i8w-area-nav-icon {
  opacity: 1;
}

.i8w-area-nav-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

/* ── Settings divider ───────────────────────────────────────────────────── */
.i8w-area-nav-divider {
  height: 1px;
  background: rgba(99,102,241,0.10);
  margin: 6px 4px;
}

/* ── Content area ───────────────────────────────────────────────────────── */
.i8w-area-content { flex: 1; min-width: 0; overflow-anchor: none; }

.i8w-area-pane           { display: none; }
.i8w-area-pane.is-active { display: block; }

/* Reset inner wrappers that assume standalone page */
.i8w-area-content .i8w-wrap {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.i8w-area-content .p6-budget-wrap,
.i8w-area-content .e360gp-manager,
.i8w-area-content .i8w-p5-dashboard,
.i8w-area-content .eil-card.eil-p2,
.i8w-area-content .i8w-p4-shell,
.i8w-area-content .i8w-p3ib-builder,
.i8w-area-content .i8w-settings-card,
.i8w-area-content .i8w-eil-addon-card { margin-top: 0 !important; }

/* ── Tab start-height: remove standalone margin-top from inner cards ─────── */
/* event360-unified.css adds margin-top:14px to .e360gp-schedule-form        */
/* (same pattern as .i8w-eil-addon-card). Reset it inside the tab shell.     */
.i8w-area-content .e360gp-schedule-form { margin-top: 0 !important; }

/* ── Desktop tab heading normalization ──────────────────────────────────── */
/* Unifies every tab's main heading to 22px / 800 / #7c3aed matching the    */
/* dashboard .i8w-head h2. Selectors are made more specific than p2.css      */
/* (.eil-p2 .eil-card__title uses !important — we must beat it with context).*/
@media (min-width: 821px) {
  /* Guest management: header padding to match .i8w-head standard */
  .i8w-area-content .eil-p2 .eil-card__header {
    padding: 22px 26px 18px !important;
  }

  /* Guest management: title — more specific than .eil-p2 .eil-card__title in p2.css */
  .i8w-area-content .eil-p2 .eil-card__title {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #7c3aed !important;
    -webkit-text-fill-color: #7c3aed !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
    font-family: 'Rubik', Arial, sans-serif !important;
  }

  /* Budget manager: normalize oversized 32px title */
  .i8w-area-content .p6-budget-title {
    font-size: 22px !important;
    color: #7c3aed !important;
    -webkit-text-fill-color: #7c3aed !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
    font-family: 'Rubik', Arial, sans-serif !important;
  }
}

/* ── Guide button ────────────────────────────────────────────────────────── */
/* Injected by area-tabs.js into the gradient header band of every tab.      */
.i8w-guide-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  align-self: flex-start !important;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 9px 20px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
  margin-top: 0 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 4px 14px rgba(249,115,22,0.40), 0 1px 4px rgba(234,88,12,0.25) !important;
}
.i8w-guide-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(249,115,22,0.50), 0 2px 6px rgba(234,88,12,0.30) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
.i8w-guide-btn svg { flex-shrink: 0 !important; display: block !important; }

/* Wrapper: sits inline inside the heading element */
.i8w-guide-btn-wrap {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* p5 gifts: h2 is the gradient band — always block + RTL so chip is right-aligned */
.i8w-area-content .i8w-p5-dashboard > h2 {
  direction: rtl !important;
}

/* Guide chip: identical design on desktop AND mobile (replaces the old orange button) */
/* Hide the orange button wrapper on all screen sizes */
.i8w-guide-btn-wrap--desktop { display: none !important; }

/* Show the "הצגת מדריך" chip below the heading on all screen sizes */
.i8w-guide-btn-wrap--mobile {
  display: block !important;
  margin: 5px 0 3px !important;
}

/* Bordered chip with external-link icon */
.i8w-guide-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  direction: rtl !important;
  color: #7c3aed !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  cursor: pointer !important;
  text-decoration: none !important;
  border: 1.5px solid rgba(124, 58, 237, 0.7) !important;
  border-radius: 20px !important;
  padding: 4px 10px !important;
  background: rgba(124, 58, 237, 0.06) !important;
}
.i8w-guide-link svg {
  flex-shrink: 0 !important;
  display: block !important;
  opacity: 0.8 !important;
}

/* ── Settings card sections ─────────────────────────────────────────────── */
.i8w-settings-section {
  padding: 20px 26px 24px;
  border-bottom: 1px solid rgba(99,102,241,0.08);
}

.i8w-settings-section:last-child { border-bottom: none; }

.i8w-settings-section-title {
  font-size: 15px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
  font-family: 'Rubik', Arial, sans-serif;
}

.i8w-settings-section-sub {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 14px;
}

.i8w-settings-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 420px;
}

.i8w-settings-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin: 0 0 6px;
}

.i8w-settings-field input[type="text"],
.i8w-settings-field input[type="tel"],
.i8w-settings-field input[type="email"] {
  width: 100%;
  max-width: 100%;
  padding: 11px 14px;
  border: 1.5px solid rgba(99,102,241,0.18);
  border-radius: 12px;
  background: #fff;
  font-family: 'Rubik', Arial, sans-serif;
  font-size: 14px;
  color: #0f172a;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  direction: rtl;
  box-sizing: border-box;
}

.i8w-settings-field input[type="text"]:focus,
.i8w-settings-field input[type="tel"]:focus,
.i8w-settings-field input[type="email"]:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}

.i8w-settings-form .i8w-btn { margin-top: 14px; align-self: flex-start; }

/* ── Package upgrade grid ────────────────────────────────────────────────── */
.i8w-upgrade-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 2px;
}

.i8w-upgrade-card {
  background: #fff;
  border: 1px solid rgba(99,102,241,0.14);
  border-radius: 16px;
  padding: 16px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(99,102,241,0.07);
  transition: box-shadow 0.2s, transform 0.2s;
  font-family: 'Rubik', Arial, sans-serif;
}

.i8w-upgrade-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99,102,241,0.14);
}

.i8w-upgrade-limit {
  font-size: 14px;
  font-weight: 800;
  color: #1e293b;
  font-family: 'Rubik', Arial, sans-serif;
}

.i8w-upgrade-price {
  font-size: 22px;
  font-weight: 900;
  color: #4f46e5;
  line-height: 1.1;
}

.i8w-upgrade-note {
  font-size: 14px;
  font-weight: 700;
  color: #4f46e5;
  margin-bottom: 6px;
}

.i8w-btn-upgrade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, #1e40af 0%, #4f46e5 55%, #7c3aed 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: 'Rubik', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 16px;
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow 0.2s, transform 0.2s;
  box-shadow: 0 3px 10px rgba(99,102,241,0.25);
  margin-top: 2px;
}

.i8w-btn-upgrade:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(99,102,241,0.35);
  color: #fff;
  text-decoration: none;
}

.i8w-upgrade-footnote {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 12px;
}

/* ── Upgrade checkout ────────────────────────────────────────────────────── */
.i8w-upgrade-summary {
  background: rgba(99,102,241,0.04);
  border: 1px solid rgba(99,102,241,0.12);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 10px;
  max-width: 420px;
}

.i8w-upgrade-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 14px;
  color: #334155;
  border-bottom: 1px solid rgba(99,102,241,0.07);
}

.i8w-upgrade-summary-row:last-child { border-bottom: none; }

.i8w-upgrade-summary-total {
  margin-top: 4px;
  padding-top: 10px;
  font-weight: 700;
}

.i8w-upgrade-pay-amount {
  font-size: 20px;
  font-weight: 900;
  color: #4f46e5;
  font-family: 'Rubik', Arial, sans-serif;
}

.i8w-upgrade-form { gap: 12px; }

.i8w-settings-field { margin-bottom: 2px; }

.i8w-upgrade-form-actions { margin-top: 18px; }

.i8w-btn-upgrade-lg {
  font-size: 15px !important;
  padding: 13px 32px !important;
  border-radius: 999px !important;
}

.i8w-upgrade-back-section { padding-top: 14px !important; padding-bottom: 14px !important; }

/* ── Credentials side-by-side ────────────────────────────────────────────── */
.i8w-credentials-row {
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin-top: 12px;
  align-items: flex-start;
}

.i8w-credential-card {
  flex: 1 1 0;
  background: rgba(99,102,241,0.04);
  border: 1px solid rgba(99,102,241,0.12);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.i8w-credential-card-title {
  font-family: 'Rubik', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 2px;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .i8w-area-shell {
    flex-direction: column;
    gap: 12px;
    padding: 0;
    margin: 0 auto;
    max-width: 100%;
  }

  /* ── Mobile tab strip ─────────────────────────────────────────────────────
     width:100vw + margin-inline:calc(50%-50vw) is the standard "full-bleed"
     trick — the same pattern used in guest-portal.css for .e360gp.
     It breaks the nav out of any theme padding so it always spans the full
     screen width.
     Tab buttons use flex:1 0 calc(100vw/4):
       • Always exactly 4 tabs per row, each 25vw.
       • When ≥5 tabs the bar scrolls; the scroll-hint element below signals it. */
  .i8w-area-nav {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    position: sticky;
    top: 0;
    z-index: 50;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    border-radius: 0;
    background: #f5f4ff;
    border: none;
    border-bottom: 1px solid rgba(99,102,241,0.14);
    box-shadow: 0 2px 12px rgba(99,102,241,0.10), 0 1px 0 rgba(99,102,241,0.08);
  }

  .i8w-area-nav::-webkit-scrollbar { display: none; }

  /* Hide logo on mobile */
  .i8w-area-nav-logo { display: none; }
  .i8w-area-nav-divider { display: none; }

  .i8w-area-nav-btn {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1 0 calc(100vw / 4);
    min-width: calc(100vw / 4);
    max-width: none;
    aspect-ratio: unset;
    border-radius: 0;
    padding: 10px 4px 12px;
    font-size: 10px;
    font-weight: 600;
    background: transparent;
    color: #475569; /* stronger, less-faded inactive tab text (mobile) */
    border: none;
    text-align: center;
    line-height: 1.2;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    cursor: pointer;
    transition: color 0.20s, background 0.20s;
    box-sizing: border-box;
  }

  .i8w-area-nav-btn:active:not(.is-active) {
    background: rgba(99,102,241,0.06);
    color: #6366f1;
  }

  /* Gradient pill indicator at the bottom of the active tab */
  .i8w-area-nav-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #4f46e5, #7c3aed);
    border-radius: 3px 3px 0 0;
    transition: width 0.25s cubic-bezier(0.4,0,0.2,1);
  }
  .i8w-area-nav-btn.is-active::after { width: 40px; }

  .i8w-area-nav-btn.is-active {
    background: rgba(99,102,241,0.09);
    color: #4338ca;
    box-shadow: none;
    transition: none; /* instant purple — no fade-in delay */
  }

  .i8w-area-nav-btn:hover:not(.is-active) {
    color: #6366f1;
    background: rgba(99,102,241,0.06);
    transform: none;
  }

  /* Icon on top, label below */
  .i8w-area-nav-icon {
    order: -1;
    width: auto;
    height: auto;
    opacity: 0.72; /* crisper, less-faded inactive tab icon (mobile) */
    transition: opacity 0.20s, transform 0.20s;
    flex-shrink: 0;
  }
  .i8w-area-nav-btn.is-active .i8w-area-nav-icon {
    opacity: 1;
    transform: translateY(-1px);
  }
  .i8w-area-nav-icon svg { width: 22px; height: 22px; }
  .i8w-area-nav-label {
    font-size: 10px;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    order: 0;
    letter-spacing: 0;
    font-weight: 600;
    font-family: 'Rubik', Arial, sans-serif;
    line-height: 1.25;
  }

  /* ── Scrollbar track below the tab bar ───────────────────────────────────── */
  .i8w-tabs-scroll-hint {
    position: relative;
    width: 100%;
    height: 4px;
    background: rgba(99,102,241,0.10);
    overflow: hidden;
    flex-shrink: 0;
  }
  .i8w-tabs-scroll-hint-thumb {
    position: absolute;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #4f46e5, #7c3aed);
    border-radius: 99px;
    transition: left 0.06s linear, width 0.06s linear;
  }

  /* Content area gets full-width padding */
  .i8w-area-content { padding: 12px 12px 0; }

  /* Settings */
  .i8w-settings-section { padding: 16px 16px 18px; }
  .i8w-upgrade-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }

  /* Credential cards: stack vertically, both take full width */
  .i8w-credentials-row { flex-direction: column; gap: 12px; align-items: stretch; }
  .i8w-credential-card  { width: 100%; box-sizing: border-box; }
  .i8w-settings-form    { max-width: 100%; }

  /* Fix 1: normalize start height — zero out top margin on every pane's first child */
  .i8w-area-pane > :first-child { margin-top: 0 !important; }
  .i8w-area-content .i8w-eil-addon-card { margin-top: 0 !important; }

  /* Fix 2 & 4: collapse the gradient header so no empty purple space shows */
  .i8w-area-content .i8w-head,
  .i8w-area-content .i8w-head.i8w-eil-head {
    padding: 10px 14px 8px !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* Fix 7: budget wrap sits flush inside the tab — no white rounded card */
  .i8w-area-content .p6-budget-wrap {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

@media (max-width: 400px) {
  .i8w-area-nav-btn { flex: 1 0 calc(100vw / 4); min-width: calc(100vw / 4); padding: 8px 3px 10px; }
  .i8w-area-nav-icon svg { width: 20px; height: 20px; }
  .i8w-area-nav-label { font-size: 9px; }
  .i8w-upgrade-grid { grid-template-columns: 1fr; }
}

@media (min-width: 821px) {
  .i8w-tabs-scroll-hint { display: none !important; }
}

/* EVENT360 mobile settings spacing hotfix
 * Scope: Personal Area > Settings tab only.
 * Purpose: prevent .i8w-eil-head-main flex-basis from creating a large empty header height on mobile.
 */
@media (max-width: 820px) {
  .i8w-area-content .i8w-settings-card > .i8w-head.i8w-eil-head {
    padding: 22px 26px 18px !important;
    min-height: 0 !important;
    height: auto !important;
    align-items: flex-start !important;
  }

  .i8w-area-content .i8w-settings-card > .i8w-head.i8w-eil-head .i8w-eil-head-main {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
  }
}

/* EVENT360 mobile tab-header spacing hotfix
 * Scope: Personal Area tabs only.
 * Purpose: make the mobile spacing between each tab header and content match the tighter desktop spacing.
 */
@media (max-width: 820px) {
  .i8w-area-content .i8w-card > .i8w-head.i8w-eil-head,
  .i8w-area-content .i8w-eil-addon-card > .i8w-head.i8w-eil-head,
  .i8w-area-content [data-tab-id="invitation"] > .i8w-head.i8w-eil-head,
  .i8w-area-content [data-tab-id="meal-choices"] .i8w-card > .i8w-head.i8w-eil-head,
  .i8w-area-content [data-tab-id="settings"] > .i8w-head.i8w-eil-head {
    padding: 22px 26px 18px !important;
    min-height: 0 !important;
    height: auto !important;
    align-items: flex-start !important;
  }

  .i8w-area-content .i8w-card > .i8w-head.i8w-eil-head .i8w-eil-head-main,
  .i8w-area-content .i8w-eil-addon-card > .i8w-head.i8w-eil-head .i8w-eil-head-main,
  .i8w-area-content [data-tab-id="invitation"] > .i8w-head.i8w-eil-head .i8w-eil-head-main,
  .i8w-area-content [data-tab-id="meal-choices"] .i8w-card > .i8w-head.i8w-eil-head .i8w-eil-head-main,
  .i8w-area-content [data-tab-id="settings"] > .i8w-head.i8w-eil-head .i8w-eil-head-main {
    flex: 0 1 auto !important;
    flex-basis: auto !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .i8w-area-content .i8w-card > .i8w-head.i8w-eil-head + *,
  .i8w-area-content .i8w-eil-addon-card > .i8w-head.i8w-eil-head + *,
  .i8w-area-content [data-tab-id="invitation"] > .i8w-head.i8w-eil-head + *,
  .i8w-area-content [data-tab-id="meal-choices"] .i8w-card > .i8w-head.i8w-eil-head + *,
  .i8w-area-content [data-tab-id="settings"] > .i8w-head.i8w-eil-head + * {
    margin-top: 0 !important;
  }
}

/* EVENT360 mobile flush-to-header fix
 * Scope: only pages that contain the Event360 personal-area tabs.
 * Purpose: remove theme/page-builder top spacing above the mobile tab bar.
 */
@media (max-width: 820px) {
  html body:has(.i8w-area-shell) .site,
  html body:has(.i8w-area-shell) .site-content,
  html body:has(.i8w-area-shell) .content-area,
  html body:has(.i8w-area-shell) .site-main,
  html body:has(.i8w-area-shell) main,
  html body:has(.i8w-area-shell) article,
  html body:has(.i8w-area-shell) .entry-content,
  html body:has(.i8w-area-shell) .wp-site-blocks,
  html body:has(.i8w-area-shell) .elementor,
  html body:has(.i8w-area-shell) .elementor-section,
  html body:has(.i8w-area-shell) .elementor-container,
  html body:has(.i8w-area-shell) .elementor-widget-wrap,
  html body:has(.i8w-area-shell) .elementor-widget-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  html body:has(.i8w-area-shell) .entry-content > .i8w-area-shell:first-child,
  html body:has(.i8w-area-shell) .elementor-widget-container > .i8w-area-shell:first-child,
  html body:has(.i8w-area-shell) .i8w-area-shell {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  html body:has(.i8w-area-shell) .i8w-area-nav {
    margin-top: 0 !important;
  }
}

/* ── Mobile: heading normalization + guide button scaling ────────────────── */
@media (max-width: 820px) {
  /* Scale guide button down slightly */
  .i8w-guide-btn {
    padding: 7px 16px !important;
    font-size: 12.5px !important;
  }

  /* All tab headings: 18px / 800 / #7c3aed — uniform across every tab */
  .i8w-area-content .i8w-head h2,
  .i8w-area-content .i8w-head h3,
  .i8w-area-content .i8w-eil-head-title,
  .i8w-area-content .eil-p2 .eil-card__title,
  .i8w-area-content .e360gp-sch-head-main h3,
  .i8w-area-content .p6-budget-title,
  .i8w-area-content .i8w-p5-dashboard > h2 .i8w-p5-title-text {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #7c3aed !important;
    -webkit-text-fill-color: #7c3aed !important;
    font-family: 'Rubik', Arial, sans-serif !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 400px) {
  .i8w-area-content .i8w-head h2,
  .i8w-area-content .i8w-head h3,
  .i8w-area-content .i8w-eil-head-title,
  .i8w-area-content .eil-p2 .eil-card__title,
  .i8w-area-content .e360gp-sch-head-main h3,
  .i8w-area-content .p6-budget-title,
  .i8w-area-content .i8w-p5-dashboard > h2 .i8w-p5-title-text {
    font-size: 16px !important;
  }
}

/* ── Mobile: uniform header top padding so ALL headings start at the same height ── */
@media (max-width: 820px) {
  /* Every gradient header container gets identical padding — overrides all earlier hotfixes */
  .i8w-area-content .i8w-head,
  .i8w-area-content .i8w-head.i8w-eil-head,
  .i8w-area-content .i8w-card > .i8w-head.i8w-eil-head,
  .i8w-area-content .i8w-eil-addon-card > .i8w-head.i8w-eil-head,
  .i8w-area-content .i8w-settings-card > .i8w-head.i8w-eil-head,
  .i8w-area-content [data-tab-id="invitation"] > .i8w-head.i8w-eil-head,
  .i8w-area-content [data-tab-id="meal-choices"] .i8w-card > .i8w-head.i8w-eil-head,
  .i8w-area-content [data-tab-id="settings"] > .i8w-head.i8w-eil-head,
  .i8w-area-content .eil-card__header,
  .i8w-area-content .e360gp-sch-head,
  .i8w-area-content .p6-budget-header {
    padding: 14px 16px 12px !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* p5 gifts: h2 IS the header band — match the same padding.
   * padding-bottom: 4px so chip→subtitle gap = 3px (chip margin) + 4px + 2px (p padding-top)
   * = 9px, identical to the flex gap in other tabs (3px margin + 6px margin = 9px). */
  .i8w-area-content .i8w-p5-dashboard > h2 {
    padding: 14px 16px 4px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Inner containers: strip any top margin so heading starts exactly at padding-top */
  .i8w-area-content .i8w-eil-head-main,
  .i8w-area-content .eil-p2-header-main,
  .i8w-area-content .e360gp-sch-head-main,
  .i8w-area-content .p6-budget-title-area {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Heading elements: zero top margin */
  .i8w-area-content .i8w-head h2,
  .i8w-area-content .i8w-head h3,
  .i8w-area-content .i8w-eil-head-title,
  .i8w-area-content .eil-p2 .eil-card__title,
  .i8w-area-content .e360gp-sch-head-main h3,
  .i8w-area-content .p6-budget-title {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
  }
}

/* ── Mobile: uniform subtitle font — matches ניהול מוזמנים style ── */
@media (max-width: 820px) {
  .i8w-area-content .i8w-head .i8w-muted,
  .i8w-area-content .i8w-eil-head-sub,
  .i8w-area-content .eil-p2 .eil-card__subtitle,
  .i8w-area-content .e360gp-sch-sub,
  .i8w-area-content .p6-budget-subtitle,
  .i8w-area-content .i8w-p5-dashboard > p {
    color: #6366f1 !important;
    -webkit-text-fill-color: #6366f1 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    font-family: 'Rubik', Arial, sans-serif !important;
    margin-top: 6px !important;
    margin-bottom: 0 !important;
  }
}

/* ── Mobile: p2 header stability — pre-allocate space for JS-injected elements ──
 * initMobileHeaderReorg() and initMobileStatsToggle() run after ~300ms and add
 * the ctrl-bar + stats-toggle to the header, growing its height and pushing the
 * table down ("drops down strangely").  We pre-reserve that height via
 * padding-bottom before JS sets data-mobile-reorg-done, so the layout stays
 * stable when the JS elements appear.
 */
@media (max-width: 820px) {
  .i8w-area-content #eil_p2_root:not([data-mobile-reorg-done]) .eil-p2-header-main {
    padding-bottom: 76px !important;
  }
}

/* ── Mobile: p5 subtitle — zero top margin so gradient band has no white gap ── */
@media (max-width: 820px) {
  .i8w-area-content .i8w-p5-dashboard > p {
    margin-top: 0 !important;
  }
}

/* ── Desktop: heading margin-bottom — creates uniform spacing heading → chip ── */
@media (min-width: 821px) {
  .i8w-area-content .i8w-head h2,
  .i8w-area-content .i8w-head h3,
  .i8w-area-content .i8w-eil-head-title,
  .i8w-area-content .eil-p2 .eil-card__title,
  .i8w-area-content .e360gp-sch-head-main h3,
  .i8w-area-content .p6-budget-title {
    margin-bottom: 2px !important;
  }
}

/* ── Desktop: uniform subtitle font — matches ניהול מוזמנים style ── */
@media (min-width: 821px) {
  /* Color + font for all subtitles */
  .i8w-area-content .i8w-head .i8w-muted,
  .i8w-area-content .i8w-eil-head-sub,
  .i8w-area-content .eil-p2 .eil-card__subtitle,
  .i8w-area-content .e360gp-sch-sub,
  .i8w-area-content .p6-budget-subtitle,
  .i8w-area-content .i8w-p5-dashboard > p {
    color: #6366f1 !important;
    -webkit-text-fill-color: #6366f1 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    font-family: 'Rubik', Arial, sans-serif !important;
  }
  /* Margin normalisation for subtitles that are siblings to the chip
   * (p5 subtitle is a sibling to h2 — its spacing is handled by h2 padding) */
  .i8w-area-content .i8w-head .i8w-muted,
  .i8w-area-content .i8w-eil-head-sub,
  .i8w-area-content .eil-p2 .eil-card__subtitle,
  .i8w-area-content .e360gp-sch-sub,
  .i8w-area-content .p6-budget-subtitle {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
  }
}

/* EVENT360 v149.1 — tabs UX/UI normalization + no tab slide-down
 * Scope: personal area tabs only. Keeps functionality unchanged.
 */
.i8w-area-content,
.i8w-area-pane,
.i8w-area-pane.is-active {
  overflow-anchor: none !important;
  scroll-behavior: auto !important;
}
.i8w-area-pane,
.i8w-area-pane *,
.i8w-area-content #eil_p2_root,
.i8w-area-content #eil_p2_root * {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
}
.i8w-area-pane.is-active {
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Desktop: make every tab card/header follow the Guest Management rhythm. */
@media (min-width: 821px) {
  .i8w-area-content .i8w-card,
  .i8w-area-content .i8w-eil-addon-card,
  .i8w-area-content .i8w-settings-card,
  .i8w-area-content .eil-card.eil-p2,
  .i8w-area-content .e360gp-manager,
  .i8w-area-content .p6-budget-wrap,
  .i8w-area-content .i8w-p5-dashboard {
    border-radius: 14px !important;
    font-family: 'Rubik', Arial, sans-serif !important;
  }

  .i8w-area-content .i8w-head,
  .i8w-area-content .i8w-head.i8w-eil-head,
  .i8w-area-content .i8w-card > .i8w-head.i8w-eil-head,
  .i8w-area-content .i8w-eil-addon-card > .i8w-head.i8w-eil-head,
  .i8w-area-content .i8w-settings-card > .i8w-head.i8w-eil-head,
  .i8w-area-content [data-tab-id="invitation"] > .i8w-head.i8w-eil-head,
  .i8w-area-content [data-tab-id="meal-choices"] .i8w-card > .i8w-head.i8w-eil-head,
  .i8w-area-content [data-tab-id="settings"] > .i8w-head.i8w-eil-head,
  .i8w-area-content .eil-card__header,
  .i8w-area-content .e360gp-sch-head,
  .i8w-area-content .p6-budget-header,
  .i8w-area-content .i8w-p5-dashboard > h2 {
    padding: 22px 26px 18px !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: 14px 14px 0 0 !important;
    gap: 6px !important;
  }

  .i8w-area-content .i8w-head h2,
  .i8w-area-content .i8w-head h3,
  .i8w-area-content .i8w-eil-head-title,
  .i8w-area-content .eil-p2 .eil-card__title,
  .i8w-area-content .e360gp-sch-head-main h3,
  .i8w-area-content .p6-budget-title,
  .i8w-area-content .i8w-p5-dashboard > h2 .i8w-p5-title-text {
    font-size: 22px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: #7c3aed !important;
    -webkit-text-fill-color: #7c3aed !important;
    font-family: 'Rubik', Arial, sans-serif !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 2px !important;
  }

  .i8w-guide-btn-wrap--mobile {
    margin: 5px 0 3px !important;
  }
  .i8w-area-content .i8w-head .i8w-muted,
  .i8w-area-content .i8w-eil-head-sub,
  .i8w-area-content .eil-p2 .eil-card__subtitle,
  .i8w-area-content .e360gp-sch-sub,
  .i8w-area-content .p6-budget-subtitle,
  .i8w-area-content .i8w-p5-dashboard > p {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
  }
}

/* Mobile: same uniform UX/UI, including Guest Management, without delayed drop. */
@media (max-width: 820px) {
  .i8w-area-content .i8w-card,
  .i8w-area-content .i8w-eil-addon-card,
  .i8w-area-content .i8w-settings-card,
  .i8w-area-content .eil-card.eil-p2,
  .i8w-area-content .e360gp-manager,
  .i8w-area-content .p6-budget-wrap,
  .i8w-area-content .i8w-p5-dashboard {
    border-radius: 14px !important;
    font-family: 'Rubik', Arial, sans-serif !important;
  }

  .i8w-area-content .i8w-head,
  .i8w-area-content .i8w-head.i8w-eil-head,
  .i8w-area-content .i8w-card > .i8w-head.i8w-eil-head,
  .i8w-area-content .i8w-eil-addon-card > .i8w-head.i8w-eil-head,
  .i8w-area-content .i8w-settings-card > .i8w-head.i8w-eil-head,
  .i8w-area-content [data-tab-id="invitation"] > .i8w-head.i8w-eil-head,
  .i8w-area-content [data-tab-id="meal-choices"] .i8w-card > .i8w-head.i8w-eil-head,
  .i8w-area-content [data-tab-id="settings"] > .i8w-head.i8w-eil-head,
  .i8w-area-content .eil-card__header,
  .i8w-area-content .e360gp-sch-head,
  .i8w-area-content .p6-budget-header,
  .i8w-area-content .i8w-p5-dashboard > h2 {
    padding: 14px 16px 12px !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: 14px 14px 0 0 !important;
    gap: 6px !important;
    align-items: flex-start !important;
  }

  .i8w-area-content #eil_p2_root:not([data-mobile-reorg-done]) .eil-p2-header-main {
    padding-bottom: 0 !important;
  }

  .i8w-area-content .i8w-head h2,
  .i8w-area-content .i8w-head h3,
  .i8w-area-content .i8w-eil-head-title,
  .i8w-area-content .eil-p2 .eil-card__title,
  .i8w-area-content .e360gp-sch-head-main h3,
  .i8w-area-content .p6-budget-title,
  .i8w-area-content .i8w-p5-dashboard > h2 .i8w-p5-title-text {
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: #7c3aed !important;
    -webkit-text-fill-color: #7c3aed !important;
    font-family: 'Rubik', Arial, sans-serif !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 2px !important;
  }

  .i8w-guide-btn-wrap--mobile {
    margin: 5px 0 3px !important;
  }
  .i8w-area-content .i8w-head .i8w-muted,
  .i8w-area-content .i8w-eil-head-sub,
  .i8w-area-content .eil-p2 .eil-card__subtitle,
  .i8w-area-content .e360gp-sch-sub,
  .i8w-area-content .p6-budget-subtitle,
  .i8w-area-content .i8w-p5-dashboard > p {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
  }
}

/* EVENT360 v149.2 — final UX/UI audit for Gifts + Budget tabs
 * Scope: personal area tabs only. CSS-only; no logic changes.
 */
.i8w-area-content .i8w-p5-dashboard,
.i8w-area-content .p6-budget-wrap {
  border-radius: 14px !important;
  overflow: hidden !important;
  font-family: 'Rubik', Arial, sans-serif !important;
}

/* Make the Gifts tab header behave like the other tab headers, not like a standalone h2. */
.i8w-area-content .i8w-p5-dashboard > h2 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 14px 14px 0 0 !important;
  direction: rtl !important;
  font-family: 'Rubik', Arial, sans-serif !important;
}

/* Remove the white stripe between the Gifts guide chip and the description text. */
.i8w-area-content .i8w-p5-dashboard > p {
  margin: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  font-family: 'Rubik', Arial, sans-serif !important;
}

/* Force the Gifts guide chip to the same visible size as the rest of the tabs. */
.i8w-area-content .i8w-p5-dashboard .i8w-guide-btn-wrap--mobile,
.i8w-area-content .i8w-p5-dashboard .i8w-guide-link,
.i8w-area-content .i8w-p5-dashboard .i8w-guide-link span {
  box-sizing: border-box !important;
}
.i8w-area-content .i8w-p5-dashboard .i8w-guide-btn-wrap--mobile {
  display: block !important;
  margin: 5px 0 3px !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.i8w-area-content .i8w-p5-dashboard .i8w-guide-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 27px !important;
  padding: 4px 10px !important;
  border: 1.5px solid rgba(124, 58, 237, 0.7) !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  gap: 5px !important;
  white-space: nowrap !important;
  background: rgba(124, 58, 237, 0.06) !important;
  color: #7c3aed !important;
  -webkit-text-fill-color: #7c3aed !important;
}

/* Budget tab: cancel standalone p6 sizing so header matches Guest Management. */
.i8w-area-content .p6-budget-wrap {
  padding: 0 !important;
  background: #ffffff !important;
}
.i8w-area-content .p6-budget-header {
  margin: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 14px 14px 0 0 !important;
  font-family: 'Rubik', Arial, sans-serif !important;
}
.i8w-area-content .p6-budget-title-area {
  margin: 0 !important;
  padding: 0 !important;
}
.i8w-area-content .p6-budget-title {
  margin: 0 0 2px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  color: #7c3aed !important;
  -webkit-text-fill-color: #7c3aed !important;
}
.i8w-area-content .p6-budget-subtitle {
  margin: 6px 0 0 !important;
  color: #6366f1 !important;
  -webkit-text-fill-color: #6366f1 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
}
.i8w-area-content .p6-budget-summary-grid,
.i8w-area-content .p6-budget-panel,
.i8w-area-content .p6-budget-footer {
  margin-left: 20px !important;
  margin-right: 20px !important;
}
.i8w-area-content .p6-budget-summary-grid { margin-top: 20px !important; }
.i8w-area-content .p6-budget-footer { margin-bottom: 20px !important; }

@media (min-width: 821px) {
  .i8w-area-content .i8w-p5-dashboard > h2,
  .i8w-area-content .p6-budget-header {
    padding: 22px 26px 18px !important;
  }
  .i8w-area-content .i8w-p5-dashboard > h2 .i8w-p5-title-text,
  .i8w-area-content .p6-budget-title {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 820px) {
  .i8w-area-content .i8w-p5-dashboard > h2,
  .i8w-area-content .p6-budget-header {
    padding: 14px 16px 12px !important;
  }
  .i8w-area-content .i8w-p5-dashboard > h2 .i8w-p5-title-text,
  .i8w-area-content .p6-budget-title {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }
  .i8w-area-content .p6-budget-summary-grid,
  .i8w-area-content .p6-budget-panel,
  .i8w-area-content .p6-budget-footer {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
}

/* Keep all tab changes instant — no slide/fade/drop on tab open. */
.i8w-area-content .i8w-area-pane,
.i8w-area-content .i8w-area-pane.is-active,
.i8w-area-content .i8w-area-pane *,
.i8w-area-content #eil_p2_root,
.i8w-area-content #eil_p2_root * {
  transition-duration: 0s !important;
  animation-duration: 0s !important;
  animation-delay: 0s !important;
}
.i8w-area-content .i8w-area-pane.is-active {
  opacity: 1 !important;
  transform: none !important;
}

/* EVENT360 v149.3 — final full tab-structure audit
 * Scope: personal-area tab headers only. Visual CSS overrides; no logic changed.
 * Goal: identical header/title/chip/subtitle rhythm across desktop + mobile.
 */
.i8w-area-content .i8w-head,
.i8w-area-content .i8w-head.i8w-eil-head,
.i8w-area-content .eil-card__header,
.i8w-area-content .e360gp-sch-head,
.i8w-area-content .p6-budget-header,
.i8w-area-content .i8w-p5-dashboard > h2 {
  background: var(--e360-gradient-soft, linear-gradient(135deg,#f8f7ff 0%,#eef2ff 100%)) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 14px 14px 0 0 !important;
  direction: rtl !important;
  font-family: 'Rubik', Arial, sans-serif !important;
}

/* Force every tab's title to the same font family as the Personal Area tab. */
.i8w-area-content .i8w-head h2,
.i8w-area-content .i8w-head h3,
.i8w-area-content .i8w-eil-head-title,
.i8w-area-content .eil-p2 .eil-card__title,
.i8w-area-content .e360gp-sch-head-main h3,
.i8w-area-content .p6-budget-title,
.i8w-area-content .i8w-p5-dashboard > h2,
.i8w-area-content .i8w-p5-dashboard > h2 .i8w-p5-title-text {
  font-family: 'Rubik', Arial, sans-serif !important;
  font-style: normal !important;
  text-transform: none !important;
  color: #7c3aed !important;
  -webkit-text-fill-color: #7c3aed !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 2px !important;
}

/* The mobile guide chip must be visually identical in every tab, including Gifts. */
.i8w-area-content .i8w-guide-btn-wrap--mobile {
  display: block !important;
  margin: 5px 0 3px !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 0 !important;
}
.i8w-area-content .i8w-guide-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 4px 10px !important;
  gap: 5px !important;
  border: 1.5px solid rgba(124,58,237,0.7) !important;
  border-radius: 20px !important;
  background: rgba(124,58,237,0.06) !important;
  color: #7c3aed !important;
  -webkit-text-fill-color: #7c3aed !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}
.i8w-area-content .i8w-guide-link span,
.i8w-area-content .i8w-guide-link svg {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

/* Gifts tab: its subtitle is a sibling to h2 in PHP, so visually continue the same header band.
   This removes the desktop white strip and matches the spacing used by the rest of the tabs. */
.i8w-area-content .i8w-p5-dashboard > h2 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  margin: 0 !important;
  border-bottom: 0 !important;
}
.i8w-area-content .i8w-p5-dashboard > p {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 0 20px !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(99,102,241,0.10) !important;
  background: var(--e360-gradient-soft, linear-gradient(135deg,#f8f7ff 0%,#eef2ff 100%)) !important;
  color: #6366f1 !important;
  -webkit-text-fill-color: #6366f1 !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

/* Budget tab: make the title block behave like Guest Management title block. */
.i8w-area-content .p6-budget-header,
.i8w-area-content .p6-budget-title-area {
  display: block !important;
  text-align: right !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
.i8w-area-content .p6-budget-subtitle,
.i8w-area-content .eil-p2 .eil-card__subtitle,
.i8w-area-content .i8w-head .i8w-muted,
.i8w-area-content .i8w-eil-head-sub,
.i8w-area-content .e360gp-sch-sub {
  color: #6366f1 !important;
  -webkit-text-fill-color: #6366f1 !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  margin: 6px 0 0 !important;
}

@media (min-width: 821px) {
  .i8w-area-content .i8w-head,
  .i8w-area-content .i8w-head.i8w-eil-head,
  .i8w-area-content .eil-card__header,
  .i8w-area-content .e360gp-sch-head,
  .i8w-area-content .p6-budget-header,
  .i8w-area-content .i8w-p5-dashboard > h2 {
    padding: 22px 26px 18px !important;
  }
  .i8w-area-content .i8w-p5-dashboard > h2 {
    padding-bottom: 0 !important;
  }
  .i8w-area-content .i8w-p5-dashboard > p {
    padding: 6px 26px 18px !important;
  }
  .i8w-area-content .i8w-head h2,
  .i8w-area-content .i8w-head h3,
  .i8w-area-content .i8w-eil-head-title,
  .i8w-area-content .eil-p2 .eil-card__title,
  .i8w-area-content .e360gp-sch-head-main h3,
  .i8w-area-content .p6-budget-title,
  .i8w-area-content .i8w-p5-dashboard > h2,
  .i8w-area-content .i8w-p5-dashboard > h2 .i8w-p5-title-text {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 820px) {
  .i8w-area-content .i8w-head,
  .i8w-area-content .i8w-head.i8w-eil-head,
  .i8w-area-content .eil-card__header,
  .i8w-area-content .e360gp-sch-head,
  .i8w-area-content .p6-budget-header,
  .i8w-area-content .i8w-p5-dashboard > h2 {
    padding: 14px 16px 12px !important;
  }
  .i8w-area-content .i8w-p5-dashboard > h2 {
    padding-bottom: 0 !important;
  }
  .i8w-area-content .i8w-p5-dashboard > p {
    padding: 6px 16px 12px !important;
  }
  .i8w-area-content .i8w-head h2,
  .i8w-area-content .i8w-head h3,
  .i8w-area-content .i8w-eil-head-title,
  .i8w-area-content .eil-p2 .eil-card__title,
  .i8w-area-content .e360gp-sch-head-main h3,
  .i8w-area-content .p6-budget-title,
  .i8w-area-content .i8w-p5-dashboard > h2,
  .i8w-area-content .i8w-p5-dashboard > h2 .i8w-p5-title-text {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }
  .i8w-area-content .i8w-guide-link {
    min-height: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
    padding: 4px 10px !important;
  }
}

/* EVENT360 v149.4 — mobile tab area/frame normalization
 * Scope: mobile personal-area tabs only.
 * Goal: every tab outer area uses the exact same frame rhythm as "האזור האישי".
 * CSS-only; no PHP/JS logic changed.
 */
@media (max-width: 820px) {
  .i8w-area-content {
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .i8w-area-content .i8w-area-pane {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Normalize each tab's top-level visible frame to the Dashboard/Personal Area card. */
  .i8w-area-content .i8w-area-pane > .i8w-wrap,
  .i8w-area-content .i8w-area-pane > .i8w-card,
  .i8w-area-content .i8w-area-pane > .i8w-meal-choices-card,
  .i8w-area-content .i8w-area-pane > .i8w-settings-card,
  .i8w-area-content .i8w-area-pane > .eil-card.eil-p2,
  .i8w-area-content .i8w-area-pane > .e360gp-manager,
  .i8w-area-content .i8w-area-pane > .e360gp-schedule-form,
  .i8w-area-content .i8w-area-pane > .i8w-p3ib-builder,
  .i8w-area-content .i8w-area-pane > .i8w-p4-shell,
  .i8w-area-content .i8w-area-pane > .i8w-p5-dashboard,
  .i8w-area-content .i8w-area-pane > .p6-budget-wrap,
  .i8w-area-content .i8w-area-pane > .i8w-eil-addon-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1px solid rgba(99,102,241,0.14) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 24px rgba(99,102,241,0.10), 0 1px 4px rgba(15,23,42,0.05) !important;
    overflow: hidden !important;
  }

  /* Dashboard has .i8w-wrap > .i8w-card; keep its inner card as the same frame, not double-framed. */
  .i8w-area-content .i8w-area-pane > .i8w-wrap {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  .i8w-area-content .i8w-area-pane > .i8w-wrap > .i8w-card,
  .i8w-area-content .i8w-area-pane > .i8w-meal-choices-card > .i8w-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1px solid rgba(99,102,241,0.14) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 24px rgba(99,102,241,0.10), 0 1px 4px rgba(15,23,42,0.05) !important;
    overflow: hidden !important;
  }

  /* Remove conflicting standalone module frames inside the unified mobile tab shell. */
  .i8w-area-content .i8w-area-pane > .p6-budget-wrap,
  .i8w-area-content .i8w-area-pane > .i8w-p5-dashboard,
  .i8w-area-content .i8w-area-pane > .eil-card.eil-p2,
  .i8w-area-content .i8w-area-pane > .e360gp-manager,
  .i8w-area-content .i8w-area-pane > .e360gp-schedule-form {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Keep internal content aligned inside the normalized frame, matching Personal Area spacing. */
  .i8w-area-content .i8w-area-pane > .i8w-p5-dashboard > :not(h2):not(p),
  .i8w-area-content .i8w-area-pane > .p6-budget-wrap > :not(.p6-budget-header),
  .i8w-area-content .i8w-area-pane > .e360gp-manager > :not(.e360gp-sch-head),
  .i8w-area-content .i8w-area-pane > .e360gp-schedule-form > :not(.e360gp-sch-head),
  .i8w-area-content .i8w-area-pane > .eil-card.eil-p2 > :not(.eil-card__header) {
    box-sizing: border-box !important;
  }
}

/* EVENT360 v149.5 — schedule + seating tab structural normalization
 * Scope: schedule (לוח זמנים) and seating (סידורי הושבה) tabs, all screen sizes.
 * Goal: flush header alignment, unified card frame, no double-frame.
 * CSS-only; no PHP/JS/logic changed.
 */

/* ── A. Strip schedule form/preview card decoration ───────────────────────────
 * guest-portal.css gives .e360gp-schedule-form padding:22px 26px + border +
 * box-shadow. That pushes the header 22px below the frame top and creates a
 * double-frame when the outer .e360gp-manager already provides the card shell.
 */
.i8w-area-content .e360gp-schedule-form,
.i8w-area-content .e360gp-schedule-preview {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  margin-bottom: 0 !important;
}

/* ── B. Remove header's bottom gap ────────────────────────────────────────── */
.i8w-area-content .e360gp-sch-head {
  margin-bottom: 0 !important;
}

/* ── C. Body content padding — desktop ────────────────────────────────────── */
@media (min-width: 821px) {
  .i8w-area-content .e360gp-schedule-form > .e360gp-sch-list,
  .i8w-area-content .e360gp-schedule-form > .e360gp-sch-add-area,
  .i8w-area-content .e360gp-schedule-form > .e360gp-sch-save-row {
    padding-inline: 26px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  .i8w-area-content .e360gp-schedule-form > .e360gp-sch-list {
    padding-top: 18px !important;
  }
  .i8w-area-content .e360gp-schedule-form > .e360gp-sch-add-area {
    padding-block: 10px !important;
  }
  .i8w-area-content .e360gp-schedule-form > .e360gp-sch-save-row {
    padding-bottom: 18px !important;
  }
}

/* ── D. Body content padding — mobile ─────────────────────────────────────── */
@media (max-width: 820px) {
  .i8w-area-content .e360gp-schedule-form > .e360gp-sch-list,
  .i8w-area-content .e360gp-schedule-form > .e360gp-sch-add-area,
  .i8w-area-content .e360gp-schedule-form > .e360gp-sch-save-row {
    padding-inline: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  .i8w-area-content .e360gp-schedule-form > .e360gp-sch-list {
    padding-top: 14px !important;
  }
  .i8w-area-content .e360gp-schedule-form > .e360gp-sch-add-area {
    padding-block: 8px !important;
  }
  .i8w-area-content .e360gp-schedule-form > .e360gp-sch-save-row {
    padding-bottom: 14px !important;
  }
}

/* ── E. Desktop card frame for schedule tab outer container ───────────────── */
@media (min-width: 821px) {
  .i8w-area-content .i8w-area-pane > .e360gp-manager {
    max-width: none !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid rgba(99,102,241,0.12) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 20px rgba(99,102,241,0.10), 0 2px 8px rgba(15,23,42,0.06) !important;
    overflow: hidden !important;
  }
}

/* ── F. Desktop card frame for seating tab outer shell ────────────────────── */
@media (min-width: 821px) {
  .i8w-area-content .i8w-area-pane > .i8w-p4-shell {
    background: #ffffff !important;
    border: 1px solid rgba(99,102,241,0.12) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 20px rgba(99,102,241,0.10), 0 2px 8px rgba(15,23,42,0.06) !important;
    overflow: hidden !important;
  }
}

/* ── G. Strip seating inner header card decoration ────────────────────────── *
 * .i8w-p4-header-card is an .i8w-card inside .i8w-p4-shell. Leaving its own
 * border/shadow creates a double-frame; margin-bottom:16px creates a white gap
 * between the header and the launcher content.
 */
.i8w-area-content .i8w-p4-shell .i8w-p4-header-card {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
}

/* ── H. Header border-bottom normalization ────────────────────────────────── *
 * Mobile reference (Personal Area) has border-bottom on header → add to all.
 * Desktop reference (Guest Management) has no border-bottom → remove from all.
 */
@media (max-width: 820px) {
  .i8w-area-content .i8w-head,
  .i8w-area-content .eil-card__header,
  .i8w-area-content .e360gp-sch-head,
  .i8w-area-content .p6-budget-header {
    border-bottom: 1px solid rgba(99,102,241,0.10) !important;
  }
}
@media (min-width: 821px) {
  .i8w-area-content .i8w-head,
  .i8w-area-content .eil-card__header,
  .i8w-area-content .e360gp-sch-head,
  .i8w-area-content .p6-budget-header {
    border-bottom: none !important;
  }
}

/* ── I. Strip seating mobile-only notice double-frame ─────────────────────── *
 * .i8w-p4-mobile-only has its own gradient background + border + border-radius
 * from p4.css. Inside the unified .i8w-p4-shell card this creates a smaller
 * inset box that doesn't reach the frame edges. Strip the decoration so the
 * notice fills the shell flush, matching all other tabs.
 */
.i8w-area-content .i8w-p4-shell .i8w-p4-mobile-only {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* EVENT360 v150 — Dashboard header: centered event title, original h2 + guide
 * Desktop: 3-column grid → [h2+guide (right)] [event+badge (center)] [logout (left)]
 * Mobile: unchanged — .i8w-event-title keeps .i8w-muted class for all mobile rules.
 *         A -8px margin-top cancels the extra flex gap introduced by the new div.
 */
@media (min-width: 821px) {
  /* Switch to 3-column grid so center column is always truly centered */
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    padding: 22px 26px 18px !important;
    text-align: right !important;
    gap: 16px !important;
    position: static !important;
  }
  /* First child (h2 + injected guide link): restore original column look */
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
  }
  /* Restore h2 to original purple/bold heading */
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head h2 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #7c3aed !important;
    -webkit-text-fill-color: #7c3aed !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    margin: 0 0 2px !important;
    line-height: 1.2 !important;
  }
  /* Center section: stack event title + badge with flex column */
  .i8w-area-content [data-tab-id="dashboard"] .i8w-head-event-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
  }
  /* Event title: gradient text, beautiful */
  .i8w-area-content .i8w-head .i8w-event-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #1e40af 0%, #4f46e5 45%, #7c3aed 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: #4f46e5 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    font-family: 'Rubik', Arial, sans-serif !important;
  }
  /* Days badge inside center: bigger, warm amber color */
  .i8w-area-content [data-tab-id="dashboard"] .i8w-head-event-center .i8w-days-badge {
    margin-top: 0 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    padding: 8px 24px !important;
    background: linear-gradient(135deg, rgba(251,146,60,0.14) 0%, rgba(249,115,22,0.18) 100%) !important;
    border: 1.5px solid rgba(249,115,22,0.38) !important;
    color: #c2410c !important;
    letter-spacing: 0.01em !important;
  }
  /* Head-actions: restore static positioning, align end */
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head > .i8w-head-actions {
    position: static !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding-top: 0 !important;
  }
}

/* EVENT360 v152 — Mobile dashboard header: logout left, event title between head and cards */
@media (max-width: 820px) {
  /* Head: single row — h2+guide (right in RTL) | logout (far left via space-between) */
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
  /* h2+guide div: natural size, stays at right (start in RTL) */
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head > div:first-child {
    flex: 0 1 auto !important;
    width: auto !important;
  }
  /* Logout: far LEFT (end in RTL with space-between) */
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head > .i8w-head-actions {
    flex: 0 0 auto !important;
    width: auto !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    align-self: center !important;
  }
  /* Hide event-center while still inside .i8w-head (before JS moves it) */
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head > .i8w-head-event-center {
    display: none !important;
  }

  /* Event-center after JS moves it — luxury balloon background */
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head-event-center--moved {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px !important;
    padding: 24px 20px 20px !important;
    min-height: 105px !important;
    overflow: hidden !important;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='75' viewBox='0 0 50 75'%3E%3Cellipse cx='25' cy='26' rx='22' ry='24' fill='rgba(255,210,50,0.22)'/%3E%3Cellipse cx='15' cy='15' rx='7' ry='9' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M23,50 C21,54 31,54 29,50' fill='rgba(255,210,50,0.32)'/%3E%3Cpath d='M25,54 Q22,62 25,72' stroke='rgba(255,210,50,0.2)' stroke-width='1.3' fill='none'/%3E%3C/svg%3E") 8% 10% / 48px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='68' viewBox='0 0 45 68'%3E%3Cellipse cx='22' cy='24' rx='19' ry='21' fill='rgba(167,139,250,0.28)'/%3E%3Cellipse cx='14' cy='14' rx='6' ry='8' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M20,45 C18,49 28,49 26,45' fill='rgba(167,139,250,0.38)'/%3E%3Cpath d='M22,49 Q19,57 22,65' stroke='rgba(167,139,250,0.22)' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") 86% 4% / 43px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='60' viewBox='0 0 40 60'%3E%3Cellipse cx='20' cy='21' rx='17' ry='19' fill='rgba(244,114,182,0.24)'/%3E%3Cellipse cx='12' cy='12' rx='5' ry='7' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M18,40 C16,44 26,44 24,40' fill='rgba(244,114,182,0.34)'/%3E%3Cpath d='M20,44 Q17,52 20,57' stroke='rgba(244,114,182,0.2)' stroke-width='1.1' fill='none'/%3E%3C/svg%3E") 2% 48% / 36px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='52' viewBox='0 0 35 52'%3E%3Cellipse cx='17' cy='18' rx='14' ry='16' fill='rgba(251,191,36,0.22)'/%3E%3Cellipse cx='11' cy='11' rx='4' ry='6' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M15,34 C13,38 23,38 21,34' fill='rgba(251,191,36,0.32)'/%3E%3Cpath d='M17,38 Q14,44 17,50' stroke='rgba(251,191,36,0.2)' stroke-width='1' fill='none'/%3E%3C/svg%3E") 92% 62% / 32px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='63' viewBox='0 0 42 63'%3E%3Cellipse cx='21' cy='22' rx='18' ry='20' fill='rgba(147,197,253,0.22)'/%3E%3Cellipse cx='13' cy='13' rx='5' ry='7' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M19,42 C17,46 27,46 25,42' fill='rgba(147,197,253,0.3)'/%3E%3Cpath d='M21,46 Q18,54 21,60' stroke='rgba(147,197,253,0.2)' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") 64% 4% / 39px auto no-repeat,
      radial-gradient(circle, rgba(255,255,255,0.45) 0%, transparent 70%) 22% 88% / 5px 5px no-repeat,
      radial-gradient(circle, rgba(255,215,0,0.55) 0%, transparent 70%) 74% 82% / 5px 5px no-repeat,
      radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 70%) 48% 92% / 4px 4px no-repeat,
      radial-gradient(circle, rgba(255,215,0,0.45) 0%, transparent 70%) 33% 12% / 5px 5px no-repeat,
      radial-gradient(circle, rgba(200,180,255,0.4) 0%, transparent 70%) 56% 88% / 4px 4px no-repeat,
      linear-gradient(155deg, #312e81 0%, #3730a3 22%, #4f46e5 50%, #7c3aed 78%, #5b21b6 100%) !important;
    border-bottom: 1px solid rgba(100,60,200,0.25) !important;
  }
  /* Event title: larger, solid white with gold glow */
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head-event-center--moved .i8w-event-title {
    font-size: 22px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.30) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    font-family: 'Rubik', Arial, sans-serif !important;
  }
  /* Days badge: white text, gold border glow */
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head-event-center--moved .i8w-days-badge {
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 7px 20px !important;
    background: rgba(255,255,255,0.18) !important;
    border: 1.5px solid rgba(255,255,255,0.45) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    letter-spacing: 0.01em !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.25) !important;
    box-shadow: none !important;
  }


  /* ── Per event-type: balloon palette + days badge harmony ── */

  /* WEDDING — champagne, ivory, warm gold balloons */
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head-event-center--moved[data-event-type="wedding"] {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='75' viewBox='0 0 50 75'%3E%3Cellipse cx='25' cy='26' rx='22' ry='24' fill='rgba(255,238,160,0.42)'/%3E%3Cellipse cx='15' cy='15' rx='7' ry='9' fill='rgba(255,255,255,0.20)'/%3E%3Cpath d='M23,50 C21,54 31,54 29,50' fill='rgba(255,218,110,0.55)'/%3E%3Cpath d='M25,54 Q22,62 25,72' stroke='rgba(255,218,110,0.25)' stroke-width='1.3' fill='none'/%3E%3C/svg%3E") 8% 10% / 48px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='68' viewBox='0 0 45 68'%3E%3Cellipse cx='22' cy='24' rx='19' ry='21' fill='rgba(255,252,230,0.35)'/%3E%3Cellipse cx='14' cy='14' rx='6' ry='8' fill='rgba(255,255,255,0.20)'/%3E%3Cpath d='M20,45 C18,49 28,49 26,45' fill='rgba(255,242,195,0.48)'/%3E%3Cpath d='M22,49 Q19,57 22,65' stroke='rgba(255,242,195,0.22)' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") 86% 4% / 43px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='60' viewBox='0 0 40 60'%3E%3Cellipse cx='20' cy='21' rx='17' ry='19' fill='rgba(255,215,120,0.38)'/%3E%3Cellipse cx='12' cy='12' rx='5' ry='7' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M18,40 C16,44 26,44 24,40' fill='rgba(255,196,80,0.48)'/%3E%3Cpath d='M20,44 Q17,52 20,57' stroke='rgba(255,196,80,0.22)' stroke-width='1.1' fill='none'/%3E%3C/svg%3E") 2% 48% / 36px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='63' viewBox='0 0 42 63'%3E%3Cellipse cx='21' cy='22' rx='18' ry='20' fill='rgba(255,246,200,0.32)'/%3E%3Cellipse cx='13' cy='13' rx='5' ry='7' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M19,42 C17,46 27,46 25,42' fill='rgba(255,234,155,0.42)'/%3E%3Cpath d='M21,46 Q18,54 21,60' stroke='rgba(255,234,155,0.20)' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") 64% 4% / 39px auto no-repeat,
      radial-gradient(circle, rgba(255,215,0,0.65) 0%, transparent 70%) 22% 88% / 5px 5px no-repeat,
      radial-gradient(circle, rgba(255,255,255,0.55) 0%, transparent 70%) 74% 82% / 5px 5px no-repeat,
      radial-gradient(circle, rgba(255,232,140,0.50) 0%, transparent 70%) 48% 92% / 4px 4px no-repeat,
      radial-gradient(circle, rgba(255,215,0,0.50) 0%, transparent 70%) 33% 12% / 5px 5px no-repeat,
      radial-gradient(circle, rgba(255,248,196,0.45) 0%, transparent 70%) 56% 88% / 4px 4px no-repeat,
      linear-gradient(155deg, #312e81 0%, #3730a3 22%, #4f46e5 50%, #7c3aed 78%, #5b21b6 100%) !important;
  }
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head-event-center--moved[data-event-type="wedding"] .i8w-days-badge {
    border-color: rgba(255,255,255,0.45) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.25) !important;
    box-shadow: none !important;
  }

  /* BAR MITZVAH — royal blue + gold balloons */
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head-event-center--moved[data-event-type="bar_mitzvah"] {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='75' viewBox='0 0 50 75'%3E%3Cellipse cx='25' cy='26' rx='22' ry='24' fill='rgba(20,80,200,0.48)'/%3E%3Cellipse cx='15' cy='15' rx='7' ry='9' fill='rgba(255,255,255,0.20)'/%3E%3Cpath d='M23,50 C21,54 31,54 29,50' fill='rgba(20,80,200,0.60)'/%3E%3Cpath d='M25,54 Q22,62 25,72' stroke='rgba(80,140,255,0.30)' stroke-width='1.3' fill='none'/%3E%3C/svg%3E") 8% 10% / 48px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='68' viewBox='0 0 45 68'%3E%3Cellipse cx='22' cy='24' rx='19' ry='21' fill='rgba(255,200,0,0.42)'/%3E%3Cellipse cx='14' cy='14' rx='6' ry='8' fill='rgba(255,255,255,0.20)'/%3E%3Cpath d='M20,45 C18,49 28,49 26,45' fill='rgba(255,185,0,0.55)'/%3E%3Cpath d='M22,49 Q19,57 22,65' stroke='rgba(255,185,0,0.28)' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") 86% 4% / 43px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='60' viewBox='0 0 40 60'%3E%3Cellipse cx='20' cy='21' rx='17' ry='19' fill='rgba(40,100,220,0.40)'/%3E%3Cellipse cx='12' cy='12' rx='5' ry='7' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M18,40 C16,44 26,44 24,40' fill='rgba(40,100,220,0.52)'/%3E%3Cpath d='M20,44 Q17,52 20,57' stroke='rgba(100,160,255,0.25)' stroke-width='1.1' fill='none'/%3E%3C/svg%3E") 2% 48% / 36px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='63' viewBox='0 0 42 63'%3E%3Cellipse cx='21' cy='22' rx='18' ry='20' fill='rgba(200,158,0,0.38)'/%3E%3Cellipse cx='13' cy='13' rx='5' ry='7' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M19,42 C17,46 27,46 25,42' fill='rgba(200,158,0,0.50)'/%3E%3Cpath d='M21,46 Q18,54 21,60' stroke='rgba(255,210,0,0.22)' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") 64% 4% / 39px auto no-repeat,
      radial-gradient(circle, rgba(255,215,0,0.65) 0%, transparent 70%) 22% 88% / 5px 5px no-repeat,
      radial-gradient(circle, rgba(150,200,255,0.55) 0%, transparent 70%) 74% 82% / 5px 5px no-repeat,
      radial-gradient(circle, rgba(255,255,255,0.45) 0%, transparent 70%) 48% 92% / 4px 4px no-repeat,
      radial-gradient(circle, rgba(255,215,0,0.50) 0%, transparent 70%) 33% 12% / 5px 5px no-repeat,
      radial-gradient(circle, rgba(100,160,255,0.40) 0%, transparent 70%) 56% 88% / 4px 4px no-repeat,
      linear-gradient(155deg, #312e81 0%, #3730a3 22%, #4f46e5 50%, #7c3aed 78%, #5b21b6 100%) !important;
  }
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head-event-center--moved[data-event-type="bar_mitzvah"] .i8w-days-badge {
    border-color: rgba(255,255,255,0.45) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.25) !important;
    box-shadow: none !important;
  }

  /* BAT MITZVAH — hot pink + purple balloons */
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head-event-center--moved[data-event-type="bat_mitzvah"] {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='75' viewBox='0 0 50 75'%3E%3Cellipse cx='25' cy='26' rx='22' ry='24' fill='rgba(255,60,145,0.42)'/%3E%3Cellipse cx='15' cy='15' rx='7' ry='9' fill='rgba(255,255,255,0.20)'/%3E%3Cpath d='M23,50 C21,54 31,54 29,50' fill='rgba(255,40,130,0.55)'/%3E%3Cpath d='M25,54 Q22,62 25,72' stroke='rgba(255,100,180,0.28)' stroke-width='1.3' fill='none'/%3E%3C/svg%3E") 8% 10% / 48px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='68' viewBox='0 0 45 68'%3E%3Cellipse cx='22' cy='24' rx='19' ry='21' fill='rgba(185,75,245,0.38)'/%3E%3Cellipse cx='14' cy='14' rx='6' ry='8' fill='rgba(255,255,255,0.20)'/%3E%3Cpath d='M20,45 C18,49 28,49 26,45' fill='rgba(185,75,245,0.50)'/%3E%3Cpath d='M22,49 Q19,57 22,65' stroke='rgba(220,130,255,0.25)' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") 86% 4% / 43px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='60' viewBox='0 0 40 60'%3E%3Cellipse cx='20' cy='21' rx='17' ry='19' fill='rgba(255,120,175,0.38)'/%3E%3Cellipse cx='12' cy='12' rx='5' ry='7' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M18,40 C16,44 26,44 24,40' fill='rgba(255,100,160,0.50)'/%3E%3Cpath d='M20,44 Q17,52 20,57' stroke='rgba(255,150,200,0.25)' stroke-width='1.1' fill='none'/%3E%3C/svg%3E") 2% 48% / 36px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='63' viewBox='0 0 42 63'%3E%3Cellipse cx='21' cy='22' rx='18' ry='20' fill='rgba(220,90,255,0.32)'/%3E%3Cellipse cx='13' cy='13' rx='5' ry='7' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M19,42 C17,46 27,46 25,42' fill='rgba(220,90,255,0.44)'/%3E%3Cpath d='M21,46 Q18,54 21,60' stroke='rgba(240,160,255,0.22)' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") 64% 4% / 39px auto no-repeat,
      radial-gradient(circle, rgba(255,100,180,0.65) 0%, transparent 70%) 22% 88% / 5px 5px no-repeat,
      radial-gradient(circle, rgba(220,130,255,0.55) 0%, transparent 70%) 74% 82% / 5px 5px no-repeat,
      radial-gradient(circle, rgba(255,255,255,0.45) 0%, transparent 70%) 48% 92% / 4px 4px no-repeat,
      radial-gradient(circle, rgba(255,215,0,0.45) 0%, transparent 70%) 33% 12% / 5px 5px no-repeat,
      radial-gradient(circle, rgba(200,100,255,0.40) 0%, transparent 70%) 56% 88% / 4px 4px no-repeat,
      linear-gradient(155deg, #312e81 0%, #3730a3 22%, #4f46e5 50%, #7c3aed 78%, #5b21b6 100%) !important;
  }
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head-event-center--moved[data-event-type="bat_mitzvah"] .i8w-days-badge {
    border-color: rgba(255,255,255,0.45) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.25) !important;
    box-shadow: none !important;
  }

  /* BIRTHDAY — rainbow balloons */
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head-event-center--moved[data-event-type="birthday"] {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='75' viewBox='0 0 50 75'%3E%3Cellipse cx='25' cy='26' rx='22' ry='24' fill='rgba(255,48,60,0.42)'/%3E%3Cellipse cx='15' cy='15' rx='7' ry='9' fill='rgba(255,255,255,0.20)'/%3E%3Cpath d='M23,50 C21,54 31,54 29,50' fill='rgba(255,30,45,0.55)'/%3E%3Cpath d='M25,54 Q22,62 25,72' stroke='rgba(255,100,110,0.28)' stroke-width='1.3' fill='none'/%3E%3C/svg%3E") 8% 10% / 48px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='68' viewBox='0 0 45 68'%3E%3Cellipse cx='22' cy='24' rx='19' ry='21' fill='rgba(40,195,90,0.40)'/%3E%3Cellipse cx='14' cy='14' rx='6' ry='8' fill='rgba(255,255,255,0.20)'/%3E%3Cpath d='M20,45 C18,49 28,49 26,45' fill='rgba(30,175,75,0.52)'/%3E%3Cpath d='M22,49 Q19,57 22,65' stroke='rgba(80,230,120,0.25)' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") 86% 4% / 43px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='60' viewBox='0 0 40 60'%3E%3Cellipse cx='20' cy='21' rx='17' ry='19' fill='rgba(255,165,0,0.42)'/%3E%3Cellipse cx='12' cy='12' rx='5' ry='7' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M18,40 C16,44 26,44 24,40' fill='rgba(255,145,0,0.55)'/%3E%3Cpath d='M20,44 Q17,52 20,57' stroke='rgba(255,200,50,0.25)' stroke-width='1.1' fill='none'/%3E%3C/svg%3E") 2% 48% / 36px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='52' viewBox='0 0 35 52'%3E%3Cellipse cx='17' cy='18' rx='14' ry='16' fill='rgba(0,148,255,0.40)'/%3E%3Cellipse cx='11' cy='11' rx='4' ry='6' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M15,34 C13,38 23,38 21,34' fill='rgba(0,130,240,0.52)'/%3E%3Cpath d='M17,38 Q14,44 17,50' stroke='rgba(80,190,255,0.25)' stroke-width='1.0' fill='none'/%3E%3C/svg%3E") 92% 62% / 32px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='63' viewBox='0 0 42 63'%3E%3Cellipse cx='21' cy='22' rx='18' ry='20' fill='rgba(255,68,195,0.38)'/%3E%3Cellipse cx='13' cy='13' rx='5' ry='7' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M19,42 C17,46 27,46 25,42' fill='rgba(255,48,180,0.50)'/%3E%3Cpath d='M21,46 Q18,54 21,60' stroke='rgba(255,130,220,0.22)' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") 64% 4% / 39px auto no-repeat,
      radial-gradient(circle, rgba(255,215,0,0.65) 0%, transparent 70%) 22% 88% / 5px 5px no-repeat,
      radial-gradient(circle, rgba(255,80,80,0.55) 0%, transparent 70%) 74% 82% / 5px 5px no-repeat,
      radial-gradient(circle, rgba(255,255,255,0.45) 0%, transparent 70%) 48% 92% / 4px 4px no-repeat,
      radial-gradient(circle, rgba(0,200,255,0.50) 0%, transparent 70%) 33% 12% / 5px 5px no-repeat,
      radial-gradient(circle, rgba(80,220,100,0.40) 0%, transparent 70%) 56% 88% / 4px 4px no-repeat,
      linear-gradient(155deg, #312e81 0%, #3730a3 22%, #4f46e5 50%, #7c3aed 78%, #5b21b6 100%) !important;
  }
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head-event-center--moved[data-event-type="birthday"] .i8w-days-badge {
    border-color: rgba(255,255,255,0.45) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.25) !important;
    box-shadow: none !important;
  }

  /* BRIT / BRITA — baby blue + sky balloons */
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head-event-center--moved[data-event-type="brit"],
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head-event-center--moved[data-event-type="brita"] {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='75' viewBox='0 0 50 75'%3E%3Cellipse cx='25' cy='26' rx='22' ry='24' fill='rgba(70,185,255,0.42)'/%3E%3Cellipse cx='15' cy='15' rx='7' ry='9' fill='rgba(255,255,255,0.22)'/%3E%3Cpath d='M23,50 C21,54 31,54 29,50' fill='rgba(50,165,240,0.55)'/%3E%3Cpath d='M25,54 Q22,62 25,72' stroke='rgba(120,210,255,0.28)' stroke-width='1.3' fill='none'/%3E%3C/svg%3E") 8% 10% / 48px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='68' viewBox='0 0 45 68'%3E%3Cellipse cx='22' cy='24' rx='19' ry='21' fill='rgba(140,215,255,0.35)'/%3E%3Cellipse cx='14' cy='14' rx='6' ry='8' fill='rgba(255,255,255,0.22)'/%3E%3Cpath d='M20,45 C18,49 28,49 26,45' fill='rgba(120,200,248,0.48)'/%3E%3Cpath d='M22,49 Q19,57 22,65' stroke='rgba(180,235,255,0.22)' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") 86% 4% / 43px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='60' viewBox='0 0 40 60'%3E%3Cellipse cx='20' cy='21' rx='17' ry='19' fill='rgba(50,158,240,0.38)'/%3E%3Cellipse cx='12' cy='12' rx='5' ry='7' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M18,40 C16,44 26,44 24,40' fill='rgba(40,140,225,0.50)'/%3E%3Cpath d='M20,44 Q17,52 20,57' stroke='rgba(100,190,255,0.22)' stroke-width='1.1' fill='none'/%3E%3C/svg%3E") 2% 48% / 36px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='63' viewBox='0 0 42 63'%3E%3Cellipse cx='21' cy='22' rx='18' ry='20' fill='rgba(100,198,255,0.32)'/%3E%3Cellipse cx='13' cy='13' rx='5' ry='7' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M19,42 C17,46 27,46 25,42' fill='rgba(80,180,245,0.44)'/%3E%3Cpath d='M21,46 Q18,54 21,60' stroke='rgba(160,225,255,0.20)' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") 64% 4% / 39px auto no-repeat,
      radial-gradient(circle, rgba(255,255,255,0.60) 0%, transparent 70%) 22% 88% / 5px 5px no-repeat,
      radial-gradient(circle, rgba(100,210,255,0.55) 0%, transparent 70%) 74% 82% / 5px 5px no-repeat,
      radial-gradient(circle, rgba(255,255,255,0.45) 0%, transparent 70%) 48% 92% / 4px 4px no-repeat,
      radial-gradient(circle, rgba(180,235,255,0.50) 0%, transparent 70%) 33% 12% / 5px 5px no-repeat,
      radial-gradient(circle, rgba(100,200,255,0.40) 0%, transparent 70%) 56% 88% / 4px 4px no-repeat,
      linear-gradient(155deg, #312e81 0%, #3730a3 22%, #4f46e5 50%, #7c3aed 78%, #5b21b6 100%) !important;
  }
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head-event-center--moved[data-event-type="brit"] .i8w-days-badge,
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head-event-center--moved[data-event-type="brita"] .i8w-days-badge {
    border-color: rgba(255,255,255,0.45) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.25) !important;
    box-shadow: none !important;
  }

  /* ENGAGEMENT / PROPOSAL — rose gold + blush balloons */
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head-event-center--moved[data-event-type="engagement_party"],
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head-event-center--moved[data-event-type="proposal"] {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='75' viewBox='0 0 50 75'%3E%3Cellipse cx='25' cy='26' rx='22' ry='24' fill='rgba(215,115,85,0.44)'/%3E%3Cellipse cx='15' cy='15' rx='7' ry='9' fill='rgba(255,255,255,0.20)'/%3E%3Cpath d='M23,50 C21,54 31,54 29,50' fill='rgba(195,95,65,0.56)'/%3E%3Cpath d='M25,54 Q22,62 25,72' stroke='rgba(245,165,140,0.26)' stroke-width='1.3' fill='none'/%3E%3C/svg%3E") 8% 10% / 48px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='68' viewBox='0 0 45 68'%3E%3Cellipse cx='22' cy='24' rx='19' ry='21' fill='rgba(255,185,155,0.38)'/%3E%3Cellipse cx='14' cy='14' rx='6' ry='8' fill='rgba(255,255,255,0.20)'/%3E%3Cpath d='M20,45 C18,49 28,49 26,45' fill='rgba(240,165,135,0.50)'/%3E%3Cpath d='M22,49 Q19,57 22,65' stroke='rgba(255,210,190,0.22)' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") 86% 4% / 43px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='60' viewBox='0 0 40 60'%3E%3Cellipse cx='20' cy='21' rx='17' ry='19' fill='rgba(235,80,108,0.38)'/%3E%3Cellipse cx='12' cy='12' rx='5' ry='7' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M18,40 C16,44 26,44 24,40' fill='rgba(215,60,88,0.50)'/%3E%3Cpath d='M20,44 Q17,52 20,57' stroke='rgba(255,140,160,0.24)' stroke-width='1.1' fill='none'/%3E%3C/svg%3E") 2% 48% / 36px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='63' viewBox='0 0 42 63'%3E%3Cellipse cx='21' cy='22' rx='18' ry='20' fill='rgba(255,158,130,0.32)'/%3E%3Cellipse cx='13' cy='13' rx='5' ry='7' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M19,42 C17,46 27,46 25,42' fill='rgba(240,138,110,0.44)'/%3E%3Cpath d='M21,46 Q18,54 21,60' stroke='rgba(255,195,175,0.20)' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") 64% 4% / 39px auto no-repeat,
      radial-gradient(circle, rgba(255,215,0,0.60) 0%, transparent 70%) 22% 88% / 5px 5px no-repeat,
      radial-gradient(circle, rgba(255,180,160,0.55) 0%, transparent 70%) 74% 82% / 5px 5px no-repeat,
      radial-gradient(circle, rgba(255,255,255,0.45) 0%, transparent 70%) 48% 92% / 4px 4px no-repeat,
      radial-gradient(circle, rgba(255,215,0,0.45) 0%, transparent 70%) 33% 12% / 5px 5px no-repeat,
      radial-gradient(circle, rgba(215,115,85,0.40) 0%, transparent 70%) 56% 88% / 4px 4px no-repeat,
      linear-gradient(155deg, #312e81 0%, #3730a3 22%, #4f46e5 50%, #7c3aed 78%, #5b21b6 100%) !important;
  }
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head-event-center--moved[data-event-type="engagement_party"] .i8w-days-badge,
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head-event-center--moved[data-event-type="proposal"] .i8w-days-badge {
    border-color: rgba(255,255,255,0.45) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.25) !important;
    box-shadow: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   EVENT360 — Mobile tab names (e.g. "מתנות באשראי"): stop Samsung/Android
   text-inflation that cut them off on Galaxy, and shrink them a touch so the
   full name fits. Mobile only. Desktop untouched.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  .i8w-area-shell{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  .i8w-area-nav-label{ font-size:9.5px !important; letter-spacing:-0.1px !important; }
}
@media (max-width: 400px){
  .i8w-area-nav-label{ font-size:8.5px !important; }
}

/* EVENT360 — desktop: event title + countdown in the SAME luxury balloon card as mobile
   (a bit larger), with larger white title and countdown. Mobile design is untouched. */
@media (min-width: 821px) {
  .i8w-area-content [data-tab-id="dashboard"] .i8w-head-event-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 12px !important;
    padding: 18px 30px !important;
    min-height: 96px !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    border: 1px solid rgba(100,60,200,0.25) !important;
    box-shadow: 0 16px 40px rgba(124,58,237,.18) !important;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='75' viewBox='0 0 50 75'%3E%3Cellipse cx='25' cy='26' rx='22' ry='24' fill='rgba(255,210,50,0.22)'/%3E%3Cellipse cx='15' cy='15' rx='7' ry='9' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M23,50 C21,54 31,54 29,50' fill='rgba(255,210,50,0.32)'/%3E%3Cpath d='M25,54 Q22,62 25,72' stroke='rgba(255,210,50,0.2)' stroke-width='1.3' fill='none'/%3E%3C/svg%3E") 8% 10% / 48px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='68' viewBox='0 0 45 68'%3E%3Cellipse cx='22' cy='24' rx='19' ry='21' fill='rgba(167,139,250,0.28)'/%3E%3Cellipse cx='14' cy='14' rx='6' ry='8' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M20,45 C18,49 28,49 26,45' fill='rgba(167,139,250,0.38)'/%3E%3Cpath d='M22,49 Q19,57 22,65' stroke='rgba(167,139,250,0.22)' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") 86% 4% / 43px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='60' viewBox='0 0 40 60'%3E%3Cellipse cx='20' cy='21' rx='17' ry='19' fill='rgba(244,114,182,0.24)'/%3E%3Cellipse cx='12' cy='12' rx='5' ry='7' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M18,40 C16,44 26,44 24,40' fill='rgba(244,114,182,0.34)'/%3E%3Cpath d='M20,44 Q17,52 20,57' stroke='rgba(244,114,182,0.2)' stroke-width='1.1' fill='none'/%3E%3C/svg%3E") 2% 48% / 36px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='52' viewBox='0 0 35 52'%3E%3Cellipse cx='17' cy='18' rx='14' ry='16' fill='rgba(251,191,36,0.22)'/%3E%3Cellipse cx='11' cy='11' rx='4' ry='6' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M15,34 C13,38 23,38 21,34' fill='rgba(251,191,36,0.32)'/%3E%3Cpath d='M17,38 Q14,44 17,50' stroke='rgba(251,191,36,0.2)' stroke-width='1' fill='none'/%3E%3C/svg%3E") 92% 62% / 32px auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='63' viewBox='0 0 42 63'%3E%3Cellipse cx='21' cy='22' rx='18' ry='20' fill='rgba(147,197,253,0.22)'/%3E%3Cellipse cx='13' cy='13' rx='5' ry='7' fill='rgba(255,255,255,0.18)'/%3E%3Cpath d='M19,42 C17,46 27,46 25,42' fill='rgba(147,197,253,0.3)'/%3E%3Cpath d='M21,46 Q18,54 21,60' stroke='rgba(147,197,253,0.2)' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") 64% 4% / 39px auto no-repeat,
      radial-gradient(circle, rgba(255,255,255,0.45) 0%, transparent 70%) 22% 88% / 5px 5px no-repeat,
      radial-gradient(circle, rgba(255,215,0,0.55) 0%, transparent 70%) 74% 82% / 5px 5px no-repeat,
      radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 70%) 48% 92% / 4px 4px no-repeat,
      radial-gradient(circle, rgba(255,215,0,0.45) 0%, transparent 70%) 33% 12% / 5px 5px no-repeat,
      radial-gradient(circle, rgba(200,180,255,0.4) 0%, transparent 70%) 56% 88% / 4px 4px no-repeat,
      linear-gradient(155deg, #312e81 0%, #3730a3 22%, #4f46e5 50%, #7c3aed 78%, #5b21b6 100%) !important;
  }
  .i8w-area-content [data-tab-id="dashboard"] .i8w-head-event-center .i8w-event-title {
    font-size: 26px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.30) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    white-space: normal !important;
    font-family: 'Rubik', Arial, sans-serif !important;
  }
  .i8w-area-content [data-tab-id="dashboard"] .i8w-head-event-center .i8w-days-badge {
    font-size: 15px !important;
    font-weight: 800 !important;
    padding: 8px 22px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.18) !important;
    border: 1.5px solid rgba(255,255,255,0.45) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    letter-spacing: 0 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.25) !important;
    box-shadow: none !important;
    white-space: normal !important;
    line-height: 1.5 !important;
    max-width: 520px !important;
  }
  /* Keep the personal-area title + logout at the top (like the other tabs), even though
     the event-center balloon card beside them is taller. */
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head {
    align-items: start !important;
  }
  /* Same title→guide-chip gap as the other tabs (their titles use margin:0, so only the
     chip's own top margin spaces them — the h2's extra bottom margin is removed). */
  .i8w-area-content [data-tab-id="dashboard"] > .i8w-card > .i8w-head h2 {
    margin: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   EVENT360 — Personal-area header ABOVE the tabs.
   Visual-only styling: compact purple-light header, text on right, logo on left.
   ════════════════════════════════════════════════════════════════════════════ */
.i8w-area-userbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: rtl;
  gap: 18px;
  max-width: 100%;
  margin: 14px auto 0;
  padding: 14px 22px;
  min-height: 82px;
  overflow: hidden;
  background: linear-gradient(135deg, #f6f1ff 0%, #efe8ff 52%, #fbf9ff 100%);
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: 21px;
  box-shadow: 0 8px 20px rgba(91, 33, 182, 0.08), 0 1px 7px rgba(15, 23, 42, 0.035);
  box-sizing: border-box;
  font-family: 'Rubik', Arial, sans-serif;
}
.i8w-area-userbar::before {
  display: none !important;
  content: none !important;
}
.i8w-area-userbar::after {
  display: none !important;
  content: none !important;
}
.i8w-area-userbar + .i8w-area-shell { margin-top: 20px !important; }
.i8w-pa-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  text-align: right;
  flex: 1 1 auto;
}
.i8w-area-user-greet {
  display: block;
  font-size: clamp(18px, 1.55vw, 24px);
  line-height: 1.18;
  font-weight: 900;
  color: #3b1677;
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.i8w-area-user-sub {
  display: block;
  margin-top: 4px;
  font-size: 12.8px;
  line-height: 1.35;
  font-weight: 650;
  color: #6d5b83;
}
.i8w-pa-logo-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  min-width: 172px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.i8w-pa-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 180px;
  max-height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(59, 22, 119, 0.08));
  transform: none;
}

.i8w-pa-kicker,
.i8w-pa-note,
.i8w-area-user-ico { display: none !important; }

@media (max-width: 820px) {
  .i8w-area-userbar {
    margin: 12px 0 0;
    padding: 11px 13px;
    min-height: 72px;
    border-radius: 18px;
    gap: 10px;
  }
  .i8w-area-userbar::before { display: none !important; content: none !important; }
  .i8w-area-userbar + .i8w-area-shell { margin-top: 28px !important; }
  .i8w-pa-copy { text-align: right; flex: 1 1 auto; }
  .i8w-area-user-greet {
    font-size: 16.5px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .i8w-area-user-sub { margin-top: 3px; font-size: 11.2px; line-height: 1.3; }
  .i8w-pa-logo-wrap {
    min-width: 104px;
    padding: 0;
  }
  .i8w-pa-logo {
    max-width: 102px;
    max-height: 36px;
    transform: none;
  }
}



/* =====================================================================
   EVENT360 targeted mobile spacing fix — personal header to tabs
   Scope: mobile only. Adds clean vertical air between the greeting/logo
   header and the tabs, without changing desktop or any plugin logic.
   ===================================================================== */
@media (max-width: 820px) {
  html body:has(.i8w-area-userbar) .i8w-area-userbar {
    margin-bottom: 18px !important;
  }

  html body:has(.i8w-area-userbar) .i8w-area-userbar + .i8w-area-shell {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* =====================================================================
   EVENT360 targeted UI fixes — logo vertical centering + bigger desktop greeting
   Scope: personal-area header only. CSS-only; no logic/functionality changes.
   ===================================================================== */
.i8w-area-userbar {
  align-items: center !important;
}
.i8w-pa-logo-wrap {
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
}
.i8w-pa-logo {
  display: block !important;
  margin-top: auto !important;
  margin-bottom: auto !important;
}
@media (min-width: 821px) {
  .i8w-area-user-greet {
    font-size: clamp(24px, 2.2vw, 34px) !important;
    line-height: 1.12 !important;
  }
}
@media (max-width: 820px) {
  .i8w-pa-logo-wrap {
    align-self: stretch !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* =====================================================================
   EVENT360 final precision fix — visual logo centering + stronger desktop greeting
   Notes: logo image was trimmed from transparent canvas so the visible mark sits
   exactly in the middle of the header. CSS below is visual-only.
   ===================================================================== */
html body .i8w-area-userbar .i8w-pa-logo-wrap {
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
html body .i8w-area-userbar .i8w-pa-logo {
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 !important;
  transform: none !important;
}
@media (min-width: 821px) {
  html body .i8w-area-userbar .i8w-area-user-greet {
    font-size: 40px !important;
    line-height: 1.08 !important;
    font-weight: 950 !important;
    letter-spacing: -0.04em !important;
  }
}
@media (max-width: 820px) {
  html body .i8w-area-userbar .i8w-pa-logo-wrap {
    min-height: 50px !important;
  }
}

/* =====================================================================
   EVENT360 final fine-tune — mobile logo smaller + desktop greeting larger
   Requested fixes only. CSS-only; no logic/functionality changes.
   ===================================================================== */
@media (max-width: 820px) {
  html body .i8w-area-userbar .i8w-pa-logo-wrap {
    min-width: 86px !important;
    min-height: 44px !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html body .i8w-area-userbar .i8w-pa-logo {
    width: auto !important;
    height: auto !important;
    max-width: 88px !important;
    max-height: 26px !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 !important;
    transform: none !important;
  }
}

@media (min-width: 821px) {
  html body .i8w-area-userbar .i8w-area-user-greet {
    font-size: clamp(46px, 3.8vw, 62px) !important;
    line-height: 1.02 !important;
    font-weight: 950 !important;
    letter-spacing: -0.045em !important;
  }
}


/* EVENT360 desktop greeting hierarchy adjustment */
@media (min-width:821px){
  html body .i8w-area-userbar .i8w-area-user-greet{
    font-size: clamp(40px,3vw,52px) !important;
    line-height:1.05 !important;
  }
  html body .i8w-area-userbar .i8w-area-user-sub{
    font-size: clamp(20px,1.6vw,28px) !important;
    line-height:1.25 !important;
    font-weight:700 !important;
  }
}

/* EVENT360 final typography balance fix — requested only
   Mobile: slightly larger greeting + subtitle, subtitle a bit bolder.
   Desktop: slightly smaller first greeting line. CSS-only; no logic changes. */
@media (max-width: 820px) {
  html body .i8w-area-userbar .i8w-area-user-greet {
    font-size: 18px !important;
    line-height: 1.18 !important;
    font-weight: 950 !important;
  }
  html body .i8w-area-userbar .i8w-area-user-sub {
    font-size: 12.4px !important;
    line-height: 1.32 !important;
    font-weight: 750 !important;
  }
}

@media (min-width: 821px) {
  html body .i8w-area-userbar .i8w-area-user-greet {
    font-size: clamp(36px, 2.65vw, 46px) !important;
    line-height: 1.06 !important;
  }
}

/* EVENT360 mobile personal-area header visibility fix — targeted only.
   Adds safe top breathing room so the greeting/logo header is fully visible on mobile. */
@media (max-width: 820px) {
  html body .i8w-area-userbar {
    margin-top: max(26px, calc(env(safe-area-inset-top, 0px) + 18px)) !important;
  }
}

/* EVENT360 requested precision fixes — send invitation logo + personal greeting size.
   Visual CSS only; no plugin logic/functionality changed. */
html body .i8w-area-userbar .i8w-pa-logo-wrap {
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 0 !important;
}
html body .i8w-area-userbar .i8w-pa-logo {
  object-fit: contain !important;
  object-position: center center !important;
  margin: auto 0 !important;
}
@media (min-width: 821px) {
  html body .i8w-area-userbar .i8w-pa-logo-wrap {
    min-width: 148px !important;
  }
  html body .i8w-area-userbar .i8w-pa-logo {
    max-width: 136px !important;
    max-height: 42px !important;
  }
  html body .i8w-area-userbar .i8w-area-user-greet {
    font-size: clamp(32px, 2.35vw, 40px) !important;
    line-height: 1.08 !important;
  }
  html body .i8w-area-userbar .i8w-area-user-sub {
    font-size: clamp(17px, 1.25vw, 23px) !important;
    line-height: 1.24 !important;
    font-weight: 700 !important;
  }
}
@media (max-width: 820px) {
  html body .i8w-area-userbar .i8w-pa-logo-wrap {
    min-width: 86px !important;
    min-height: 44px !important;
  }
  html body .i8w-area-userbar .i8w-pa-logo {
    max-width: 88px !important;
    max-height: 26px !important;
  }
  html body .i8w-area-userbar .i8w-area-user-greet {
    font-size: 16.5px !important;
    line-height: 1.18 !important;
  }
  html body .i8w-area-userbar .i8w-area-user-sub {
    font-size: 11.6px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
  }
}


/* EVENT360 desktop logo enlargement */
@media (min-width: 1025px){
  html body .i8w-area-userbar .i8w-pa-logo-wrap{
    min-width:180px !important;
  }
  html body .i8w-area-userbar .i8w-pa-logo{
    max-width:170px !important;
    max-height:52px !important;
    width:auto !important;
    height:auto !important;
  }
}


/* EVENT360 global mobile input zoom fix
   Purpose: prevent iOS Safari/Chrome mobile auto-zoom when focusing any editable field.
   Logic untouched. */
@media screen and (max-width: 900px) {
  html, body {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  textarea,
  select,
  .event360 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  .event360 textarea,
  .event360 select,
  [class^="eil-"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  [class*=" eil-"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  [class^="eil-"] textarea,
  [class*=" eil-"] textarea,
  [class^="eil-"] select,
  [class*=" eil-"] select,
  [class^="p6-"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  [class*=" p6-"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  [class^="p6-"] textarea,
  [class*=" p6-"] textarea,
  [class^="p6-"] select,
  [class*=" p6-"] select {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }
}


/* ── Settings screen — desktop layout tidy-up (mobile is untouched) ──────────
   Only affects the account-settings card on desktop (≥821px): equal-height
   credential cards, primary buttons aligned on a common bottom baseline, and a
   uniform spacing rhythm — so the desktop view reads clean, aligned and
   balanced. Same colours, same components, same behaviour; layout only. */
@media (min-width: 821px) {
  /* Username + password cards: equal height so their bottoms line up. */
  .i8w-area-content .i8w-settings-card .i8w-credentials-row { align-items: stretch; }

  /* Let the inner form fill the card height so its button can sit on the
     bottom baseline (matches the password card below). */
  .i8w-area-content .i8w-settings-card .i8w-credential-card .i8w-settings-form { flex: 1 1 auto; max-width: 100%; }
  .i8w-area-content .i8w-settings-card .i8w-credential-card .i8w-settings-form .i8w-btn { margin-top: auto; }

  /* Password-card button (not inside a form): compact + pinned to the same
     baseline as the other cards' buttons, instead of stretching full width. */
  .i8w-area-content .i8w-settings-card .i8w-credential-card > .i8w-btn { align-self: flex-start; margin-top: auto; }

  /* Notification-email card: keep the same spacing rhythm as the credentials
     row above it. */
  .i8w-area-content .i8w-settings-card .i8w-settings-section > .i8w-credential-card { margin-top: 12px; }
}