/*
 * Event360 Core – Unified Luxury Frontend Styles
 * © INFINITY8WEB | EVENT360
 *
 * Loaded at priority 999 (last) — overrides all module styles.
 * Design philosophy: Linear.app × Stripe Dashboard × Notion — ultra-premium SaaS.
 */

/* ══════════════════════════════════════════════════════════════════════════
   § 0  FONT IMPORT
   ══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap');

/* ══════════════════════════════════════════════════════════════════════════
   § 1  DESIGN SYSTEM TOKENS
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Core palette ─────────────────────────────────────────────────────── */
  --e360-navy:        #0f1729;
  --e360-primary:     #1e40af;
  --e360-primary-mid: #2563eb;
  --e360-accent:      #6366f1;
  --e360-violet:      #7c3aed;
  --e360-gold:        #d97706;
  --e360-gold-light:  #fef3c7;

  /* ── Gradients ────────────────────────────────────────────────────────── */
  --e360-gradient:        linear-gradient(135deg, #1e40af 0%, #4f46e5 50%, #7c3aed 100%);
  --e360-gradient-soft:   linear-gradient(135deg, #eff6ff 0%, #eef2ff 50%, #f5f3ff 100%);
  --e360-gradient-dark:   linear-gradient(135deg, #0f1729 0%, #1e1b4b 100%);
  --e360-gradient-gold:   linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
  --e360-gradient-green:  linear-gradient(135deg, #059669 0%, #10b981 100%);
  --e360-gradient-red:    linear-gradient(135deg, #dc2626 0%, #f43f5e 100%);

  /* ── Glass surfaces ───────────────────────────────────────────────────── */
  --e360-glass:           rgba(255,255,255,0.85);
  --e360-glass-border:    rgba(255,255,255,0.6);

  /* ── Backgrounds & surfaces ──────────────────────────────────────────── */
  --e360-bg:              #f0f4ff;
  --e360-surface:         #ffffff;
  --e360-surface-raised:  rgba(255,255,255,0.95);

  /* ── Borders ─────────────────────────────────────────────────────────── */
  --e360-border:          rgba(99,102,241,0.12);
  --e360-border-strong:   rgba(99,102,241,0.22);

  /* ── Typography ──────────────────────────────────────────────────────── */
  --e360-text:            #0f172a;
  --e360-text-secondary:  #334155;
  --e360-muted:           #64748b;

  /* ── Shadows (multi-layer for depth) ─────────────────────────────────── */
  --e360-shadow-xs:   0 1px 2px rgba(15,23,42,0.05);
  --e360-shadow-sm:   0 2px 8px rgba(99,102,241,0.08), 0 1px 3px rgba(15,23,42,0.05);
  --e360-shadow:      0 4px 20px rgba(99,102,241,0.10), 0 2px 8px rgba(15,23,42,0.06);
  --e360-shadow-lg:   0 8px 40px rgba(99,102,241,0.14), 0 4px 16px rgba(15,23,42,0.08);
  --e360-shadow-xl:   0 20px 60px rgba(99,102,241,0.18), 0 8px 24px rgba(15,23,42,0.10);
  --e360-shadow-glow: 0 0 0 3px rgba(99,102,241,0.15), 0 4px 20px rgba(99,102,241,0.20);

  /* ── Radius scale ────────────────────────────────────────────────────── */
  --e360-radius-xs:   8px;
  --e360-radius-sm:   12px;
  --e360-radius:      18px;
  --e360-radius-lg:   24px;
  --e360-radius-xl:   32px;

  /* ── Spring-like transitions ─────────────────────────────────────────── */
  --e360-transition:       0.2s cubic-bezier(0.34,1.56,0.64,1);
  --e360-transition-fast:  0.15s cubic-bezier(0.4,0,0.2,1);
  --e360-transition-slow:  0.35s cubic-bezier(0.4,0,0.2,1);

  /* Legacy aliases (keep for backward compat) */
  --e360-blue:        var(--e360-primary-mid);
  --e360-blue-dark:   var(--e360-primary);
  --e360-blue-light:  #eff6ff;
  --e360-purple:      var(--e360-violet);
  --e360-purple-dark: #6d28d9;
  --e360-purple-light:#f5f3ff;
}

/* ══════════════════════════════════════════════════════════════════════════
   § 2  KEYFRAME ANIMATIONS
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes e360FadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes e360FadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes e360ScaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes e360SlideRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes e360SlideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes e360Shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

@keyframes e360Pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.3); }
  50%      { box-shadow: 0 0 0 8px rgba(99,102,241,0); }
}

@keyframes e360Ripple {
  0%   { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   § 3  GLOBAL RTL RESET & FONT APPLICATION
   ══════════════════════════════════════════════════════════════════════════ */

.eil-card,
.e360gp,
.i8w-p4-shell,
.i8w-p3ib-builder,
.i8w-p3ib-guest,
.i8w-rsvp-visual-widget,
.p6-budget-wrap,
.i8w-p5-gift-page,
.i8w-p5-dashboard,
.i8w-p2-addon-wrap,
.event360-package-builder,
.event360-cpb-wrap {
  font-family: 'Rubik', Arial, sans-serif !important;
  direction: rtl !important;
  color: var(--e360-text) !important;
  font-size: 15px;
  box-sizing: border-box;
}

.eil-card *,
.e360gp *,
.i8w-p4-shell *,
.i8w-p3ib-builder *,
.i8w-p3ib-guest *,
.i8w-rsvp-visual-widget *,
.p6-budget-wrap *,
.i8w-p5-gift-page *,
.i8w-p5-dashboard *,
.i8w-p2-addon-wrap *,
.event360-package-builder *,
.event360-cpb-wrap * {
  font-family: 'Rubik', Arial, sans-serif !important;
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════════════
   § 4  CARDS  (.eil-card)
   ══════════════════════════════════════════════════════════════════════════ */

.eil-card {
  background: var(--e360-surface) !important;
  border: 1px solid var(--e360-border) !important;
  border-radius: var(--e360-radius-lg) !important;
  box-shadow: var(--e360-shadow) !important;
  transition: box-shadow var(--e360-transition), transform var(--e360-transition) !important;
  overflow: hidden !important;
  animation: e360FadeUp 0.3s cubic-bezier(0.4,0,0.2,1) both !important;
}

.eil-card:hover {
  box-shadow: var(--e360-shadow-lg) !important;
  transform: translateY(-2px) !important;
}

.eil-card__header {
  background: var(--e360-gradient-soft) !important;
  padding: 22px 26px 16px !important;
  border-bottom: 1px solid var(--e360-border) !important;
}

.eil-card__title {
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  background: var(--e360-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin: 0 0 4px !important;
}

.eil-card__subtitle {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--e360-muted) !important;
  margin: 0 !important;
}

.eil-card__body {
  padding: 20px 26px 26px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   § 5  BUTTONS
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Primary gradient button ─────────────────────────────────────────────── */
.eil-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: var(--e360-gradient) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  padding: 11px 24px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 14px rgba(99,102,241,0.30), 0 1px 3px rgba(15,23,42,0.12) !important;
  transition: transform var(--e360-transition), box-shadow var(--e360-transition), opacity var(--e360-transition-fast) !important;
}

.eil-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(99,102,241,0.38), 0 2px 8px rgba(15,23,42,0.14) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.eil-btn:active {
  transform: scale(0.97) translateY(0) !important;
  box-shadow: 0 2px 8px rgba(99,102,241,0.22) !important;
}

/* ── Ghost button ────────────────────────────────────────────────────────── */
.eil-btn--ghost {
  background: var(--e360-glass) !important;
  color: var(--e360-accent) !important;
  border: 1.5px solid var(--e360-border-strong) !important;
  box-shadow: var(--e360-shadow-xs) !important;
  backdrop-filter: blur(8px) !important;
}

.eil-btn--ghost:hover {
  background: var(--e360-gradient) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 20px rgba(99,102,241,0.30) !important;
}

/* ── Guest portal buttons ────────────────────────────────────────────────── */
.e360gp-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: transform var(--e360-transition), box-shadow var(--e360-transition) !important;
  text-decoration: none !important;
  padding: 10px 22px !important;
  border: none !important;
}

.e360gp-btn:not(.secondary):not(.waze):not(.calendar) {
  background: var(--e360-gradient) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(99,102,241,0.30) !important;
}

.e360gp-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(99,102,241,0.38) !important;
  text-decoration: none !important;
}

.e360gp-btn:active { transform: scale(0.97) !important; }

.e360gp-save-btn,
.e360gp-rsvp-change {
  background: var(--e360-gradient) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  padding: 11px 26px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(99,102,241,0.30) !important;
  transition: transform var(--e360-transition), box-shadow var(--e360-transition) !important;
}

.e360gp-save-btn:hover,
.e360gp-rsvp-change:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 26px rgba(99,102,241,0.40) !important;
}

.e360gp-save-btn:active,
.e360gp-rsvp-change:active { transform: scale(0.97) !important; }

/* ── P4 & i8w buttons ────────────────────────────────────────────────────── */
.i8w-btn,
.i8w-p4-launch-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--e360-gradient) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 11px 24px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(99,102,241,0.28) !important;
  transition: transform var(--e360-transition), box-shadow var(--e360-transition) !important;
  text-decoration: none !important;
}

.i8w-btn:hover,
.i8w-p4-launch-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(99,102,241,0.38) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.i8w-btn:active,
.i8w-p4-launch-btn:active { transform: scale(0.97) !important; }

/* ── RSVP Yes / No buttons ───────────────────────────────────────────────── */
.i8w-rsvp-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  min-width: 150px !important;
  height: 56px !important;
  cursor: pointer !important;
  transition: transform var(--e360-transition), box-shadow var(--e360-transition) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.20) !important;
  letter-spacing: 0.02em !important;
}

.i8w-rsvp-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 32px rgba(0,0,0,0.26) !important;
}

.i8w-rsvp-btn:active { transform: scale(0.97) translateY(0) !important; }

.i8w-rsvp-btn-yes {
  background: var(--e360-gradient-green) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(5,150,105,0.35) !important;
}

.i8w-rsvp-btn-yes:hover {
  box-shadow: 0 10px 30px rgba(5,150,105,0.45) !important;
}

.i8w-rsvp-btn-no {
  background: var(--e360-gradient-red) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(220,38,38,0.35) !important;
}

.i8w-rsvp-btn-no:hover {
  box-shadow: 0 10px 30px rgba(220,38,38,0.45) !important;
}

/* ── Counter +/- buttons ─────────────────────────────────────────────────── */
.i8w-counter {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  justify-content: center !important;
}

.i8w-counter button {
  background: var(--e360-gradient) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 3px 10px rgba(99,102,241,0.28) !important;
  transition: transform var(--e360-transition), box-shadow var(--e360-transition) !important;
  padding: 0 !important;
}

.i8w-counter button:hover {
  transform: scale(1.12) !important;
  box-shadow: 0 6px 18px rgba(99,102,241,0.40) !important;
}

.i8w-counter button:active { transform: scale(0.95) !important; }

/* ── P6 Budget income/expense buttons ────────────────────────────────────── */
.p6-btn-income {
  background: var(--e360-gradient-green) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-weight: 700 !important;
  padding: 9px 20px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(5,150,105,0.28) !important;
  transition: transform var(--e360-transition), box-shadow var(--e360-transition) !important;
}

.p6-btn-income:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(5,150,105,0.38) !important;
}

.p6-btn-expense {
  background: var(--e360-gradient-red) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-weight: 700 !important;
  padding: 9px 20px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(220,38,38,0.28) !important;
  transition: transform var(--e360-transition), box-shadow var(--e360-transition) !important;
}

.p6-btn-expense:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(220,38,38,0.38) !important;
}

.p6-btn-income:active,
.p6-btn-expense:active { transform: scale(0.97) !important; }

/* ── P3 builder buttons ──────────────────────────────────────────────────── */
.i8w-p3ib-btn,
.i8w-p3ib-submit-btn,
.i8w-p3ib-next-btn,
.i8w-p3ib-prev-btn {
  background: var(--e360-gradient) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 10px 22px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(99,102,241,0.28) !important;
  transition: transform var(--e360-transition), box-shadow var(--e360-transition) !important;
}

.i8w-p3ib-btn:hover,
.i8w-p3ib-submit-btn:hover,
.i8w-p3ib-next-btn:hover,
.i8w-p3ib-prev-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(99,102,241,0.38) !important;
}

.i8w-p3ib-prev-btn {
  background: var(--e360-glass) !important;
  color: var(--e360-accent) !important;
  border: 1.5px solid var(--e360-border-strong) !important;
  box-shadow: var(--e360-shadow-xs) !important;
}

.i8w-p3ib-prev-btn:hover {
  background: var(--e360-gradient) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   § 6  INPUTS & FORMS
   ══════════════════════════════════════════════════════════════════════════ */

.eil-input,
.eil-card input[type="text"],
.eil-card input[type="email"],
.eil-card input[type="number"],
.eil-card input[type="tel"],
.eil-card input[type="password"],
.eil-card input[type="date"],
.eil-card input[type="time"],
.eil-card select,
.eil-card textarea,
.e360gp input[type="text"],
.e360gp input[type="email"],
.e360gp input[type="number"],
.e360gp input[type="tel"],
.e360gp input[type="date"],
.e360gp input[type="time"],
.e360gp select,
.e360gp textarea,
.i8w-p3ib-builder input[type="text"],
.i8w-p3ib-builder input[type="email"],
.i8w-p3ib-builder input[type="number"],
.i8w-p3ib-builder select,
.i8w-p3ib-builder textarea,
.i8w-p3ib-field-input,
.p6-budget-wrap input[type="text"],
.p6-budget-wrap input[type="email"],
.p6-budget-wrap input[type="number"],
.p6-budget-wrap input[type="date"],
.p6-budget-wrap select,
.p6-budget-wrap textarea,
.i8w-p2-addon-wrap input[type="text"],
.i8w-p2-addon-wrap input[type="email"],
.i8w-p2-addon-wrap input[type="number"],
.i8w-p2-addon-wrap select,
.i8w-p2-addon-wrap textarea {
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--e360-text) !important;
  background: #ffffff !important;
  border: 1.5px solid var(--e360-border) !important;
  border-radius: var(--e360-radius-sm) !important;
  padding: 11px 16px !important;
  width: 100% !important;
  direction: rtl !important;
  transition: border-color var(--e360-transition-fast), box-shadow var(--e360-transition-fast) !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.eil-input:focus,
.eil-card input:focus,
.eil-card select:focus,
.eil-card textarea:focus,
.e360gp input:focus,
.e360gp select:focus,
.e360gp textarea:focus,
.i8w-p3ib-builder input:focus,
.i8w-p3ib-builder select:focus,
.i8w-p3ib-builder textarea:focus,
.i8w-p3ib-field-input:focus,
.p6-budget-wrap input:focus,
.p6-budget-wrap select:focus,
.p6-budget-wrap textarea:focus,
.i8w-p2-addon-wrap input:focus,
.i8w-p2-addon-wrap select:focus,
.i8w-p2-addon-wrap textarea:focus {
  border-color: var(--e360-accent) !important;
  box-shadow: 0 0 0 4px rgba(99,102,241,0.12) !important;
  outline: none !important;
}

.eil-input::placeholder,
.eil-card input::placeholder,
.e360gp input::placeholder,
.i8w-p3ib-builder input::placeholder,
.p6-budget-wrap input::placeholder,
.i8w-p2-addon-wrap input::placeholder {
  color: var(--e360-muted) !important;
  font-weight: 400 !important;
}

/* Label styling */
.eil-card label,
.e360gp label,
.i8w-p3ib-builder label,
.p6-budget-wrap label,
.i8w-p2-addon-wrap label {
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--e360-text-secondary) !important;
  display: block !important;
  margin-bottom: 6px !important;
}

/* Textarea */
.eil-card textarea,
.e360gp textarea,
.i8w-p3ib-builder textarea,
.p6-budget-wrap textarea,
.i8w-p2-addon-wrap textarea {
  resize: vertical !important;
  min-height: 90px !important;
  line-height: 1.6 !important;
}

/* Select arrow */
.eil-card select,
.e360gp select,
.i8w-p3ib-builder select,
.p6-budget-wrap select,
.i8w-p2-addon-wrap select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left 14px center !important;
  padding-left: 36px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   § 7  TABLES  (.eil-table)
   ══════════════════════════════════════════════════════════════════════════ */

.eil-table-wrap {
  border-radius: var(--e360-radius) !important;
  overflow: hidden !important;
  border: 1px solid var(--e360-border) !important;
  box-shadow: var(--e360-shadow-sm) !important;
}

.eil-table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-radius: var(--e360-radius) !important;
  overflow: hidden !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  direction: rtl !important;
}

.eil-table thead th {
  background: var(--e360-gradient-soft) !important;
  color: var(--e360-primary) !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 13px 16px !important;
  text-align: right !important;
  border-bottom: 1px solid var(--e360-border-strong) !important;
  white-space: nowrap !important;
}

.eil-table tbody tr {
  border-bottom: 1px solid var(--e360-border) !important;
  transition: background var(--e360-transition-fast) !important;
}

.eil-table tbody tr:hover {
  background: rgba(99,102,241,0.04) !important;
}

.eil-table tbody tr:nth-child(even) {
  background: rgba(240,244,255,0.5) !important;
}

.eil-table tbody tr:nth-child(even):hover {
  background: rgba(99,102,241,0.06) !important;
}

.eil-table tbody tr:last-child {
  border-bottom: none !important;
}

.eil-table td {
  padding: 13px 16px !important;
  font-size: 14px !important;
  color: var(--e360-text-secondary) !important;
  text-align: right !important;
  vertical-align: middle !important;
}

/* Mobile card transformation */
@media (max-width: 640px) {
  .eil-table-mobile-cards thead { display: none !important; }
  .eil-table-mobile-cards tbody tr {
    display: block !important;
    background: var(--e360-surface) !important;
    border-radius: var(--e360-radius-sm) !important;
    border: 1px solid var(--e360-border) !important;
    box-shadow: var(--e360-shadow-sm) !important;
    margin-bottom: 10px !important;
    padding: 4px 0 !important;
  }
  .eil-table-mobile-cards td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid var(--e360-border) !important;
    padding: 10px 14px !important;
  }
  .eil-table-mobile-cards td:last-child { border-bottom: none !important; }
  .eil-table-mobile-cards td::before {
    content: attr(data-label) !important;
    font-weight: 700 !important;
    color: var(--e360-muted) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   § 8  BADGES & NOTICES
   ══════════════════════════════════════════════════════════════════════════ */

.eil-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  border-radius: 999px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  padding: 4px 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.eil-badge--primary {
  background: rgba(99,102,241,0.12) !important;
  color: var(--e360-accent) !important;
}

.eil-badge--success {
  background: #ecfdf5 !important;
  color: #065f46 !important;
}

.eil-badge--warning {
  background: #fffbeb !important;
  color: #92400e !important;
}

.eil-badge--danger {
  background: #fef2f2 !important;
  color: #991b1b !important;
}

/* Notices */
.eil-notice {
  border-radius: var(--e360-radius-sm) !important;
  padding: 14px 18px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-right: 4px solid !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  margin-bottom: 12px !important;
  line-height: 1.5 !important;
}

.eil-notice--ok {
  background: #ecfdf5 !important;
  color: #065f46 !important;
  border-right-color: #10b981 !important;
}

.eil-notice--warn {
  background: #fffbeb !important;
  color: #92400e !important;
  border-right-color: #f59e0b !important;
}

.eil-notice--err {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border-right-color: #f43f5e !important;
}

/* P5 / P3 completed badges */
.i8w-p5-completed-badge,
.i8w-complete-badge {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 14px !important;
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid rgba(16,185,129,0.25) !important;
}

/* P6 type pills */
.p6-type-income {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  background: #ecfdf5 !important;
  color: #047857 !important;
}

.p6-type-expense {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  background: #fef2f2 !important;
  color: #991b1b !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   § 9  GUEST PORTAL  (.e360gp-*)
   ══════════════════════════════════════════════════════════════════════════ */

.e360gp {
  background: var(--e360-bg) !important;
  min-height: 100vh;
  padding: 20px 0 !important;
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.e360gp-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  background: var(--e360-glass) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: 0 !important;
  border: 1px solid var(--e360-glass-border) !important;
  box-shadow: var(--e360-shadow) !important;
  padding: 8px !important;
  margin-bottom: 20px !important;
}

.e360gp-tab {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: 0 !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 9px 18px !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  color: var(--e360-text-secondary) !important;
  background: transparent !important;
  transition: all var(--e360-transition) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

.e360gp-tab + .e360gp-tab {
  border-right: 1px solid var(--e360-border) !important;
}

.e360gp-tab:hover:not(.is-active):not(.is-disabled) {
  background: rgba(99,102,241,0.07) !important;
  border-color: var(--e360-border) !important;
  color: var(--e360-accent) !important;
  transform: translateY(-1px) !important;
}

.e360gp-tab.is-active {
  background: var(--e360-gradient) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px rgba(99,102,241,0.32), 0 2px 6px rgba(15,23,42,0.12) !important;
  animation: e360Pulse 2.5s ease-in-out infinite !important;
}

.e360gp-tab.is-disabled {
  opacity: 0.38 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* ── Panels ───────────────────────────────────────────────────────────────── */
.e360gp-panels {
  background: var(--e360-surface) !important;
  border-radius: var(--e360-radius-xl) !important;
  border: 1px solid var(--e360-border) !important;
  box-shadow: var(--e360-shadow-lg) !important;
  overflow: hidden !important;
}

.e360gp-panel {
  padding: 28px !important;
  animation: e360FadeUp 0.28s cubic-bezier(0.4,0,0.2,1) both !important;
  display: none !important;
}

.e360gp-panel.is-active {
  display: block !important;
}

/* ── Attendee cards ───────────────────────────────────────────────────────── */
.e360gp-attendee {
  background: var(--e360-surface) !important;
  border-radius: var(--e360-radius-lg) !important;
  border: 1px solid var(--e360-border) !important;
  box-shadow: var(--e360-shadow-sm) !important;
  overflow: hidden !important;
  transition: transform var(--e360-transition), box-shadow var(--e360-transition) !important;
  margin-bottom: 14px !important;
}

.e360gp-attendee:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--e360-shadow) !important;
}

.e360gp-attendee-head {
  background: var(--e360-gradient-soft) !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--e360-border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--e360-text) !important;
}

/* ── Inline RSVP messages ────────────────────────────────────────────────── */
.e360gp-rsvp-inline-msg {
  border-radius: var(--e360-radius-sm) !important;
  padding: 10px 16px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-right: 4px solid !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  margin-top: 10px !important;
}

.e360gp-rsvp-inline-msg.ok {
  background: #ecfdf5 !important;
  color: #166534 !important;
  border-right-color: #10b981 !important;
}

.e360gp-rsvp-inline-msg.err {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border-right-color: #f43f5e !important;
}

/* ── Schedule ────────────────────────────────────────────────────────────── */
.e360gp-schedule-item {
  background: var(--e360-glass) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: var(--e360-radius-sm) !important;
  border: 1px solid var(--e360-glass-border) !important;
  padding: 14px 18px !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  transition: transform var(--e360-transition), box-shadow var(--e360-transition) !important;
  animation: e360SlideIn 0.22s cubic-bezier(0.4,0,0.2,1) both !important;
}

.e360gp-schedule-item:hover {
  transform: translateX(-4px) !important;
  box-shadow: var(--e360-shadow) !important;
}

.e360gp-schedule-time {
  background: var(--e360-gradient) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 6px 14px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-shadow: 0 3px 10px rgba(99,102,241,0.28) !important;
}

/* ── Food menu ───────────────────────────────────────────────────────────── */
.e360gp-food-group {
  background: var(--e360-surface) !important;
  border-radius: var(--e360-radius-lg) !important;
  border: 1px solid var(--e360-border) !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
  box-shadow: var(--e360-shadow-xs) !important;
}

.e360gp-food-group-header {
  background: var(--e360-gradient-soft) !important;
  padding: 12px 18px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--e360-primary) !important;
  border-bottom: 1px solid var(--e360-border) !important;
}

.e360gp-food-options {
  padding: 12px !important;
  display: grid !important;
  gap: 8px !important;
}

.e360gp-food-option {
  background: var(--e360-surface) !important;
  border-radius: var(--e360-radius-sm) !important;
  border: 1.5px solid var(--e360-border) !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  transition: border-color var(--e360-transition-fast), box-shadow var(--e360-transition-fast), background var(--e360-transition-fast) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.e360gp-food-option:hover {
  border-color: var(--e360-accent) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.10) !important;
  background: rgba(99,102,241,0.03) !important;
}

.e360gp-food-option.is-selected {
  border-color: var(--e360-accent) !important;
  background: rgba(99,102,241,0.06) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15) !important;
  font-weight: 700 !important;
  color: var(--e360-accent) !important;
}

/* ── Place/venue card ────────────────────────────────────────────────────── */
.e360gp-place-card {
  background: var(--e360-surface) !important;
  border-radius: var(--e360-radius-lg) !important;
  border: 1px solid var(--e360-border) !important;
  box-shadow: var(--e360-shadow) !important;
  overflow: hidden !important;
}

.e360gp-place-card-media {
  position: relative !important;
  overflow: hidden !important;
}

.e360gp-place-card-media img {
  border-radius: 0 !important;
  transition: transform var(--e360-transition-slow) !important;
  display: block !important;
  width: 100% !important;
}

.e360gp-place-card-media:hover img {
  transform: scale(1.04) !important;
}

.e360gp-place-rating {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: var(--e360-gradient-gold) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 10px rgba(217,119,6,0.35) !important;
}

.e360gp-place-card-body {
  padding: 20px 22px !important;
}

.e360gp-place-card-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--e360-text) !important;
  margin-bottom: 8px !important;
}

.e360gp-review {
  background: var(--e360-bg) !important;
  border-radius: var(--e360-radius-sm) !important;
  border: 1px solid var(--e360-border) !important;
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
}

/* Waze / calendar / main action buttons */
.e360gp-btn.waze {
  background: linear-gradient(135deg, #00b0d8 0%, #00c8f4 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0,176,216,0.32) !important;
}

.e360gp-btn.calendar {
  background: var(--e360-gradient-dark) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(15,23,42,0.28) !important;
}

.e360gp-btn.waze:hover,
.e360gp-btn.calendar:hover {
  transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   § 10  P3 INVITATION BUILDER  (.i8w-p3ib-*)
   ══════════════════════════════════════════════════════════════════════════ */

.i8w-p3ib-builder {
  background: var(--e360-bg) !important;
}

/* Steps nav */
.i8w-p3ib-steps-nav {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  padding: 8px !important;
  background: var(--e360-glass) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: var(--e360-radius-xl) !important;
  border: 1px solid var(--e360-glass-border) !important;
  box-shadow: var(--e360-shadow) !important;
  margin-bottom: 20px !important;
}

.i8w-p3ib-steps-nav > div,
.i8w-p3ib-step-tab {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  border-radius: 999px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 18px !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  color: var(--e360-text-secondary) !important;
  transition: all var(--e360-transition) !important;
}

.i8w-p3ib-steps-nav > div:hover:not(.is-active),
.i8w-p3ib-step-tab:hover:not(.is-active) {
  background: rgba(99,102,241,0.07) !important;
  border-color: var(--e360-border) !important;
  color: var(--e360-accent) !important;
  transform: translateY(-1px) !important;
}

.i8w-p3ib-steps-nav > div.is-active,
.i8w-p3ib-step-tab.is-active {
  background: var(--e360-gradient) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(99,102,241,0.30) !important;
}

/* Step containers */
.i8w-p3ib-step {
  background: var(--e360-surface) !important;
  border-radius: var(--e360-radius-xl) !important;
  border: 1px solid var(--e360-border) !important;
  box-shadow: var(--e360-shadow) !important;
  padding: 28px !important;
  animation: e360FadeUp 0.28s cubic-bezier(0.4,0,0.2,1) both !important;
}

/* Design grid cards */
.i8w-p3ib-design-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: 12px !important;
}

/* Desktop: exactly 4 design cards per row (mobile/tablet ≤900px is unchanged). */
@media (min-width: 901px) {
  .i8w-p3ib-design-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

.i8w-p3ib-design-card {
  background: var(--e360-surface) !important;
  border-radius: var(--e360-radius) !important;
  border: 2px solid var(--e360-border) !important;
  box-shadow: var(--e360-shadow-sm) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform var(--e360-transition), box-shadow var(--e360-transition), border-color var(--e360-transition) !important;
}

.i8w-p3ib-design-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: var(--e360-shadow-lg) !important;
  border-color: var(--e360-accent) !important;
}

.i8w-p3ib-design-card.is-active {
  border-color: var(--e360-accent) !important;
  box-shadow: 0 0 0 4px rgba(99,102,241,0.15), var(--e360-shadow) !important;
}

/* Fields & preview panels */
.i8w-p3ib-fields-panel {
  background: var(--e360-glass) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: var(--e360-radius-lg) !important;
  border: 1px solid var(--e360-glass-border) !important;
  box-shadow: var(--e360-shadow) !important;
  padding: 20px !important;
}

.i8w-p3ib-preview-panel {
  background: var(--e360-surface) !important;
  border-radius: var(--e360-radius-lg) !important;
  border: 1px solid var(--e360-border) !important;
  box-shadow: var(--e360-shadow) !important;
  padding: 24px !important;
  overflow: hidden !important;
}

/* Status messages */
.i8w-p3ib-status {
  border-radius: var(--e360-radius-sm) !important;
  padding: 12px 16px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-right: 4px solid !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  margin: 10px 0 !important;
}

.i8w-p3ib-status.ok {
  background: #ecfdf5 !important;
  color: #065f46 !important;
  border-right-color: #10b981 !important;
}

.i8w-p3ib-status.err {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border-right-color: #f43f5e !important;
}

/* RSVP visual widget */
.i8w-rsvp-visual-widget {
  background: var(--e360-surface) !important;
  border-radius: var(--e360-radius-xl) !important;
  border: 1px solid var(--e360-border) !important;
  box-shadow: var(--e360-shadow-xl) !important;
  padding: 36px 28px !important;
  text-align: center !important;
  animation: e360ScaleIn 0.32s cubic-bezier(0.34,1.56,0.64,1) both !important;
  max-width: 480px !important;
  margin: 0 auto !important;
}

.i8w-rsvp-buttons-row {
  display: flex !important;
  gap: 14px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin-top: 22px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   § 11  P4 SEATING  (.i8w-p4-*)
   ══════════════════════════════════════════════════════════════════════════ */

.i8w-p4-shell {
  --i8w-blue:      var(--e360-accent);
  --i8w-blue-dark: var(--e360-primary);
  --i8w-blue-soft: #eff6ff;
}

/* Launcher card */
.i8w-p4-launcher {
  background: var(--e360-glass) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: var(--e360-radius-xl) !important;
  border: 1px solid var(--e360-glass-border) !important;
  box-shadow: var(--e360-shadow-lg) !important;
  padding: 36px !important;
  text-align: center !important;
  background-image: var(--e360-gradient-soft) !important;
  animation: e360FadeUp 0.3s cubic-bezier(0.4,0,0.2,1) both !important;
}

/* Topbar — deep professional dark */
.i8w-p4-topbar {
  background: var(--e360-gradient-dark) !important;
  box-shadow: 0 4px 20px rgba(15,23,42,0.28) !important;
  padding: 10px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Top buttons on dark bg */
.i8w-top-btn {
  background: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: var(--e360-radius-xs) !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
  cursor: pointer !important;
  transition: background var(--e360-transition-fast), border-color var(--e360-transition-fast) !important;
  backdrop-filter: blur(8px) !important;
}

.i8w-top-btn:hover {
  background: rgba(255,255,255,0.22) !important;
  border-color: rgba(255,255,255,0.30) !important;
}

/* Tool buttons */
.i8w-tool-btn {
  background: transparent !important;
  border: 1px solid var(--e360-border) !important;
  border-radius: var(--e360-radius-xs) !important;
  color: var(--e360-text-secondary) !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 7px 12px !important;
  cursor: pointer !important;
  transition: background var(--e360-transition-fast), color var(--e360-transition-fast), border-color var(--e360-transition-fast) !important;
}

.i8w-tool-btn:hover {
  background: rgba(99,102,241,0.08) !important;
  color: var(--e360-accent) !important;
  border-color: var(--e360-border-strong) !important;
}

.i8w-search-btn,
.i8w-print-btn {
  border-radius: var(--e360-radius-xs) !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-weight: 600 !important;
}

/* Ref panel */
.i8w-ref-panel,
.i8w-p4-shell .ref-list-card {
  background: rgba(248,250,255,0.95) !important;
  border-radius: var(--e360-radius) !important;
  border: 1px solid var(--e360-border) !important;
  box-shadow: var(--e360-shadow) !important;
  padding: 16px !important;
}

/* Mobile card */
.i8w-p4-mobile-card {
  background: var(--e360-surface) !important;
  border-radius: var(--e360-radius-lg) !important;
  border: 1px solid var(--e360-border) !important;
  box-shadow: var(--e360-shadow-lg) !important;
  padding: 20px !important;
  margin-bottom: 12px !important;
}

/* Canvas workspace — no radius, no padding (override p4.css 14px padding) */
.i8w-p4-workspace {
  background-color: #f2f4f8 !important;
  background-image: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Grid texture only on the actual canvas */
.i8w-p4-canvas,
.i8w-p4-shell .reference-canvas {
  background-color: #f0f2f8 !important;
  background-image:
    linear-gradient(rgba(99,102,241,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.04) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
  border-radius: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   § 12  P5 CREDIT GIFTS  (.i8w-p5-*)
   ══════════════════════════════════════════════════════════════════════════ */

.i8w-p5-gift-page {
  background: var(--e360-surface) !important;
  border-radius: var(--e360-radius-xl) !important;
  border: 1px solid var(--e360-border) !important;
  box-shadow: var(--e360-shadow-lg) !important;
  padding: 32px !important;
  animation: e360FadeUp 0.3s cubic-bezier(0.4,0,0.2,1) both !important;
}

.i8w-p5-dashboard {
  background: var(--e360-bg) !important;
  padding: 20px 0 !important;
}

/* Preset amount buttons */
.i8w-p5-presets {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
  gap: 10px !important;
  margin: 16px 0 !important;
}

.i8w-p5-preset {
  background: var(--e360-surface) !important;
  border: 2px solid var(--e360-border) !important;
  border-radius: 999px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--e360-text-secondary) !important;
  padding: 10px 16px !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all var(--e360-transition) !important;
}

.i8w-p5-preset:hover {
  border-color: var(--e360-accent) !important;
  background: rgba(99,102,241,0.06) !important;
  color: var(--e360-accent) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(99,102,241,0.18) !important;
}

.i8w-p5-preset.is-active,
.i8w-p5-preset.selected {
  background: var(--e360-gradient) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(99,102,241,0.30) !important;
}

/* Event cards */
.i8w-p5-event-card {
  background: var(--e360-surface) !important;
  border-radius: var(--e360-radius-lg) !important;
  border: 1px solid var(--e360-border) !important;
  box-shadow: var(--e360-shadow-sm) !important;
  overflow: hidden !important;
  transition: transform var(--e360-transition), box-shadow var(--e360-transition) !important;
  margin-bottom: 12px !important;
}

.i8w-p5-event-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--e360-shadow) !important;
}

/* Dashboard summary stats */
.i8w-p5-stat-card {
  background: var(--e360-surface) !important;
  border-radius: var(--e360-radius) !important;
  border: 1px solid var(--e360-border) !important;
  box-shadow: var(--e360-shadow-sm) !important;
  padding: 20px !important;
  transition: transform var(--e360-transition), box-shadow var(--e360-transition) !important;
}

.i8w-p5-stat-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--e360-shadow) !important;
}

.i8w-p5-stat-card .stat-value {
  font-size: 28px !important;
  font-weight: 900 !important;
  background: var(--e360-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  line-height: 1.1 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   § 13  P6 BUDGET MANAGER  (.p6-*)
   ══════════════════════════════════════════════════════════════════════════ */

.p6-budget-wrap {
  background: var(--e360-bg) !important;
  padding: 20px 0 !important;
}

/* Title — regal gradient text */
.p6-budget-title {
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  background: var(--e360-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 24px !important;
  line-height: 1.2 !important;
}

/* Summary cards with colored top border */
.p6-summary-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 24px !important;
}

.p6-summary-card {
  background: var(--e360-surface) !important;
  border-radius: var(--e360-radius) !important;
  border: 1px solid var(--e360-border) !important;
  border-top: 4px solid transparent !important;
  box-shadow: var(--e360-shadow-sm) !important;
  padding: 18px 20px !important;
  transition: transform var(--e360-transition), box-shadow var(--e360-transition) !important;
}

.p6-summary-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--e360-shadow) !important;
}

/* Staggered animation */
.p6-summary-card:nth-child(1) {
  border-top-color: #10b981 !important;
  animation: e360FadeUp 0.3s 0.0s cubic-bezier(0.4,0,0.2,1) both !important;
}

.p6-summary-card:nth-child(2) {
  border-top-color: #f43f5e !important;
  animation: e360FadeUp 0.3s 0.06s cubic-bezier(0.4,0,0.2,1) both !important;
}

.p6-summary-card:nth-child(3) {
  border-top-color: transparent !important;
  border-top-image: var(--e360-gradient) !important;
  background-image: linear-gradient(var(--e360-surface), var(--e360-surface)),
                    var(--e360-gradient) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  animation: e360FadeUp 0.3s 0.12s cubic-bezier(0.4,0,0.2,1) both !important;
}

.p6-summary-card:nth-child(4) {
  border-top-color: var(--e360-gold) !important;
  animation: e360FadeUp 0.3s 0.18s cubic-bezier(0.4,0,0.2,1) both !important;
}

.p6-summary-card .card-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--e360-muted) !important;
  margin-bottom: 6px !important;
}

.p6-summary-card .card-amount {
  font-size: 24px !important;
  font-weight: 900 !important;
  color: var(--e360-text) !important;
  line-height: 1.15 !important;
}

/* Budget panel */
.p6-budget-panel {
  background: var(--e360-surface) !important;
  border-radius: var(--e360-radius-lg) !important;
  border: 1px solid var(--e360-border) !important;
  box-shadow: var(--e360-shadow) !important;
  overflow: hidden !important;
  animation: e360FadeUp 0.32s cubic-bezier(0.4,0,0.2,1) both !important;
}

/* P6 table */
.p6-table {
  width: 100% !important;
  border-collapse: collapse !important;
  direction: rtl !important;
  font-family: 'Rubik', Arial, sans-serif !important;
}

.p6-table thead th {
  background: var(--e360-gradient-soft) !important;
  color: var(--e360-primary) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 13px 16px !important;
  text-align: right !important;
  border-bottom: 1px solid var(--e360-border-strong) !important;
}

.p6-table tbody tr {
  border-bottom: 1px solid var(--e360-border) !important;
  transition: background var(--e360-transition-fast) !important;
}

.p6-table tbody tr:hover {
  background: rgba(99,102,241,0.04) !important;
}

.p6-table tbody tr:last-child { border-bottom: none !important; }

.p6-table td {
  padding: 13px 16px !important;
  font-size: 14px !important;
  color: var(--e360-text-secondary) !important;
  text-align: right !important;
  vertical-align: middle !important;
}

/* Modal */
.p6-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15,23,42,0.55) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  z-index: 99999 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}

.p6-modal {
  background: var(--e360-glass) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-radius: var(--e360-radius-xl) !important;
  border: 1px solid var(--e360-glass-border) !important;
  box-shadow: var(--e360-shadow-xl) !important;
  padding: 32px !important;
  width: 100% !important;
  max-width: 480px !important;
  animation: e360ScaleIn 0.22s cubic-bezier(0.34,1.56,0.64,1) both !important;
  direction: rtl !important;
}

.p6-modal-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  background: var(--e360-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 18px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   § 14  P2 ADDON — REMINDERS  (.i8w-p2-*)
   ══════════════════════════════════════════════════════════════════════════ */

.i8w-p2-addon-wrap {
  background: var(--e360-bg) !important;
}

/* Addon glass cards */
.i8w-p2-addon-card,
.i8w-p2-card {
  background: var(--e360-glass) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: var(--e360-radius-lg) !important;
  border: 1px solid var(--e360-glass-border) !important;
  box-shadow: var(--e360-shadow) !important;
  padding: 22px 24px !important;
  margin-bottom: 14px !important;
  animation: e360FadeUp 0.3s cubic-bezier(0.4,0,0.2,1) both !important;
  transition: transform var(--e360-transition), box-shadow var(--e360-transition) !important;
}

.i8w-p2-addon-card:hover,
.i8w-p2-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--e360-shadow-lg) !important;
}

/* Custom checkbox rows (addon reminder/gift cards — block layout) */
.i8w-eil-check {
  display: block !important;
  padding: 11px 13px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(99,102,241,0.12) !important;
  cursor: pointer !important;
  transition: box-shadow .17s ease, border-color .17s ease, background .17s ease, color .17s ease !important;
  margin-bottom: 0 !important;
  background: #ffffff !important;
}

.i8w-eil-check:hover {
  border-color: var(--e360-accent) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.10) !important;
  background: rgba(99,102,241,0.03) !important;
}

.i8w-eil-check.is-selected,
.i8w-eil-check.checked {
  background: linear-gradient(135deg, #1e40af 0%, #4f46e5 60%, #7c3aed 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(99,102,241,0.26) !important;
  font-weight: 700 !important;
}

/* Custom checkbox visual */
.i8w-eil-check input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--e360-accent) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

/* Preview panels */
.i8w-p2-preview,
.i8w-p2-preview-panel {
  background: var(--e360-surface) !important;
  border-radius: var(--e360-radius-lg) !important;
  border: 1px solid var(--e360-border) !important;
  box-shadow: var(--e360-shadow) !important;
  padding: 22px !important;
  overflow: hidden !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   § 15  CUSTOM PACKAGE BUILDER
   ══════════════════════════════════════════════════════════════════════════ */

.event360-package-builder,
.event360-cpb-wrap {
  background: var(--e360-surface) !important;
  border-radius: var(--e360-radius-xl) !important;
  border: 1px solid var(--e360-border) !important;
  box-shadow: var(--e360-shadow-lg) !important;
  overflow: hidden !important;
  animation: e360FadeUp 0.3s cubic-bezier(0.4,0,0.2,1) both !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   § 16  SCROLLBAR STYLING
   ══════════════════════════════════════════════════════════════════════════ */

.e360gp-panels::-webkit-scrollbar,
.eil-table-scroll::-webkit-scrollbar,
.i8w-p4-workspace::-webkit-scrollbar,
.i8w-ref-panel::-webkit-scrollbar,
.p6-budget-panel::-webkit-scrollbar,
.i8w-p3ib-fields-panel::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.e360gp-panels::-webkit-scrollbar-track,
.eil-table-scroll::-webkit-scrollbar-track,
.i8w-p4-workspace::-webkit-scrollbar-track,
.p6-budget-panel::-webkit-scrollbar-track {
  background: transparent;
}

.e360gp-panels::-webkit-scrollbar-thumb,
.eil-table-scroll::-webkit-scrollbar-thumb,
.i8w-p4-workspace::-webkit-scrollbar-thumb,
.p6-budget-panel::-webkit-scrollbar-thumb,
.i8w-ref-panel::-webkit-scrollbar-thumb {
  background: rgba(99,102,241,0.28);
  border-radius: 999px;
}

.e360gp-panels::-webkit-scrollbar-thumb:hover,
.eil-table-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(99,102,241,0.45);
}

/* ══════════════════════════════════════════════════════════════════════════
   § 17  SKELETON / LOADING STATES
   ══════════════════════════════════════════════════════════════════════════ */

.eil-skeleton,
.e360-loading-placeholder {
  background: linear-gradient(
    90deg,
    rgba(240,244,255,0.8) 0px,
    rgba(224,231,255,0.6) 40px,
    rgba(240,244,255,0.8) 80px
  ) !important;
  background-size: 400px 100% !important;
  animation: e360Shimmer 1.4s ease-in-out infinite !important;
  border-radius: var(--e360-radius-sm) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   § 18  STAGGER ANIMATION UTILITIES
   ══════════════════════════════════════════════════════════════════════════ */

/* Cards animate in sequentially */
.eil-card:nth-child(1) { animation-delay: 0.00s !important; }
.eil-card:nth-child(2) { animation-delay: 0.05s !important; }
.eil-card:nth-child(3) { animation-delay: 0.10s !important; }
.eil-card:nth-child(4) { animation-delay: 0.15s !important; }
.eil-card:nth-child(5) { animation-delay: 0.20s !important; }
.eil-card:nth-child(6) { animation-delay: 0.25s !important; }

/* Attendee cards stagger */
.e360gp-attendee:nth-child(1) { animation: e360FadeUp 0.28s 0.00s cubic-bezier(0.4,0,0.2,1) both !important; }
.e360gp-attendee:nth-child(2) { animation: e360FadeUp 0.28s 0.06s cubic-bezier(0.4,0,0.2,1) both !important; }
.e360gp-attendee:nth-child(3) { animation: e360FadeUp 0.28s 0.12s cubic-bezier(0.4,0,0.2,1) both !important; }
.e360gp-attendee:nth-child(4) { animation: e360FadeUp 0.28s 0.18s cubic-bezier(0.4,0,0.2,1) both !important; }
.e360gp-attendee:nth-child(5) { animation: e360FadeUp 0.28s 0.22s cubic-bezier(0.4,0,0.2,1) both !important; }
.e360gp-attendee:nth-child(n+6) { animation: e360FadeUp 0.28s 0.26s cubic-bezier(0.4,0,0.2,1) both !important; }

/* Schedule items stagger */
.e360gp-schedule-item:nth-child(1) { animation-delay: 0.00s !important; }
.e360gp-schedule-item:nth-child(2) { animation-delay: 0.05s !important; }
.e360gp-schedule-item:nth-child(3) { animation-delay: 0.10s !important; }
.e360gp-schedule-item:nth-child(4) { animation-delay: 0.15s !important; }
.e360gp-schedule-item:nth-child(n+5) { animation-delay: 0.18s !important; }

/* ══════════════════════════════════════════════════════════════════════════
   § 19  RESPONSIVE — MOBILE FIRST
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 640px breakpoint ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Cards */
  .eil-card {
    border-radius: var(--e360-radius) !important;
    margin-bottom: 12px !important;
  }

  .eil-card__header {
    padding: 16px 18px 12px !important;
  }

  .eil-card__title {
    font-size: 17px !important;
  }

  .eil-card__body {
    padding: 14px 18px 20px !important;
  }

  /* Guest portal */
  .e360gp-tabs {
    border-radius: 0 !important;
    padding: 6px !important;
  }

  .e360gp-tab {
    font-size: 12px !important;
    padding: 7px 12px !important;
  }

  .e360gp-panels {
    border-radius: var(--e360-radius-lg) !important;
  }

  .e360gp-panel {
    padding: 16px !important;
  }

  /* P3 builder */
  .i8w-p3ib-step {
    padding: 18px !important;
    border-radius: var(--e360-radius-lg) !important;
  }

  .i8w-p3ib-steps-nav {
    border-radius: var(--e360-radius-lg) !important;
  }

  .i8w-p3ib-design-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  }

  /* P5 */
  .i8w-p5-gift-page {
    padding: 20px !important;
    border-radius: var(--e360-radius-lg) !important;
  }

  .i8w-p5-presets {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* RSVP widget */
  .i8w-rsvp-visual-widget {
    padding: 24px 18px !important;
    border-radius: var(--e360-radius-lg) !important;
  }

  .i8w-rsvp-btn {
    min-width: 130px !important;
    height: 50px !important;
    font-size: 16px !important;
  }

  /* P6 */
  .p6-budget-title {
    font-size: 22px !important;
  }

  .p6-summary-cards {
    grid-template-columns: 1fr 1fr !important;
  }

  .p6-summary-card {
    padding: 14px 16px !important;
  }

  .p6-modal {
    padding: 22px !important;
    border-radius: var(--e360-radius-lg) !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* P4 launcher */
  .i8w-p4-launcher {
    padding: 24px 18px !important;
    border-radius: var(--e360-radius-lg) !important;
  }

  /* P2 */
  .i8w-p2-addon-card,
  .i8w-p2-card {
    padding: 16px 18px !important;
    border-radius: var(--e360-radius-sm) !important;
  }

  /* Tables */
  .eil-table thead { display: none !important; }
  .eil-table tbody tr {
    display: block !important;
    background: var(--e360-surface) !important;
    border-radius: var(--e360-radius-sm) !important;
    border: 1px solid var(--e360-border) !important;
    box-shadow: var(--e360-shadow-xs) !important;
    margin-bottom: 10px !important;
    padding: 4px 0 !important;
  }
  .eil-table td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid var(--e360-border) !important;
    padding: 10px 14px !important;
    text-align: right !important;
  }
  .eil-table td:last-child { border-bottom: none !important; }
}

/* ── 480px breakpoint ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Tighter spacing */
  .e360gp-tabs {
    border-radius: 0 !important;
    padding: 5px !important;
  }

  .e360gp-tab {
    border-radius: 0 !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
  }

  .e360gp-panel {
    padding: 12px !important;
  }

  .p6-summary-cards {
    grid-template-columns: 1fr !important;
  }

  .p6-summary-card .card-amount {
    font-size: 20px !important;
  }

  .p6-budget-title {
    font-size: 20px !important;
  }

  .i8w-p5-presets {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .i8w-rsvp-buttons-row {
    flex-direction: column !important;
    align-items: center !important;
  }

  .i8w-rsvp-btn {
    width: 100% !important;
    max-width: 280px !important;
  }

  .i8w-p3ib-design-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .eil-card__title {
    font-size: 15px !important;
  }

  .eil-btn {
    padding: 9px 18px !important;
    font-size: 13px !important;
  }

  .e360gp-save-btn,
  .e360gp-rsvp-change {
    padding: 9px 18px !important;
    font-size: 13px !important;
  }
}

/* ── RTL safety — ensure direction is preserved on all screen sizes ──────── */
@media (max-width: 640px) {
  .eil-card,
  .e360gp,
  .i8w-p4-shell,
  .i8w-p3ib-builder,
  .i8w-p3ib-guest,
  .i8w-rsvp-visual-widget,
  .p6-budget-wrap,
  .i8w-p5-gift-page,
  .i8w-p5-dashboard,
  .i8w-p2-addon-wrap,
  .event360-package-builder {
    direction: rtl !important;
  }

  .eil-table td {
    direction: rtl !important;
    text-align: right !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   § 20  MISC UTILITY OVERRIDES
   ══════════════════════════════════════════════════════════════════════════ */

/* Divider */
.eil-divider {
  border: none !important;
  border-top: 1px solid var(--e360-border) !important;
  margin: 18px 0 !important;
}

/* Section headings inside panels */
.e360gp-section-title,
.i8w-section-title,
.p6-section-title {
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--e360-text) !important;
  margin-bottom: 14px !important;
  letter-spacing: -0.01em !important;
}

/* Empty states */
.eil-empty,
.e360gp-empty {
  text-align: center !important;
  padding: 40px 24px !important;
  color: var(--e360-muted) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* Focus-visible ring for accessibility */
.eil-btn:focus-visible,
.e360gp-btn:focus-visible,
.e360gp-save-btn:focus-visible,
.i8w-btn:focus-visible,
.i8w-p4-launch-btn:focus-visible,
.i8w-rsvp-btn:focus-visible,
.p6-btn-income:focus-visible,
.p6-btn-expense:focus-visible {
  outline: 3px solid rgba(99,102,241,0.5) !important;
  outline-offset: 3px !important;
}

/* Print — strip shadows/blur */
@media print {
  .e360gp-tabs,
  .eil-card,
  .e360gp-panels,
  .p6-budget-panel {
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   § 21  PERSONAL AREA — OVERRIDE & COLUMN FIXES (priority 999 last)
   ══════════════════════════════════════════════════════════════════════════ */

/* RTL + font */
.i8w-wrap,
.i8w-wrap * {
  font-family: 'Rubik', Arial, sans-serif !important;
  direction: rtl !important;
  box-sizing: border-box !important;
}

/* Main card reinforcement */
.i8w-card {
  background: var(--e360-surface) !important;
  border: 1px solid var(--e360-border) !important;
  border-radius: var(--e360-radius-lg) !important;
  box-shadow: var(--e360-shadow) !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}

/* Card H2 */
.i8w-card > h2 {
  background: var(--e360-gradient-soft) !important;
  border-bottom: 1px solid var(--e360-border) !important;
  padding: 22px 26px 16px !important;
  margin: 0 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--e360-violet) !important;
  -webkit-text-fill-color: var(--e360-violet) !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  letter-spacing: -0.01em !important;
}

/* Head */
.i8w-head {
  background: var(--e360-gradient-soft) !important;
  border-bottom: 1px solid var(--e360-border) !important;
  padding: 22px 26px 18px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.i8w-head h2 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--e360-violet) !important;
  -webkit-text-fill-color: var(--e360-violet) !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  margin: 0 0 4px !important;
}

/* Stats grid */
.i8w-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  padding: 22px 26px 26px !important;
}

/* Stat cards */
.i8w-stat {
  background: var(--e360-surface) !important;
  border: 1px solid var(--e360-border) !important;
  border-radius: var(--e360-radius) !important;
  box-shadow: var(--e360-shadow-sm) !important;
  padding: 18px 16px 16px !important;
  transition: transform var(--e360-transition), box-shadow var(--e360-transition) !important;
}

.i8w-stat:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--e360-shadow) !important;
}

.i8w-stat-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #475569 !important;
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
}

.i8w-stat-value {
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  line-height: 1.1 !important;
}

/* Rich-content stat cells */
.i8w-stat-value > div,
#i8w_dash_special_notes,
#i8w_dash_meal_choices {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: var(--e360-text-secondary) !important;
  -webkit-text-fill-color: var(--e360-text-secondary) !important;
}

.i8w-special-summary {
  font-size: 13px !important;
  line-height: 1.6 !important;
  font-weight: 600 !important;
  color: var(--e360-text-secondary) !important;
  -webkit-text-fill-color: var(--e360-text-secondary) !important;
}

.i8w-special-notes-pick-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 8px 0 4px !important;
  padding: 7px 12px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  border-radius: 10px !important;
  border: 1px solid rgba(99,102,241,.35) !important;
  background: linear-gradient(135deg,#eef2ff,#f5f3ff) !important;
  color: #4f46e5 !important;
  -webkit-text-fill-color: #4f46e5 !important;
}
.i8w-special-notes-pick-btn:hover,
.i8w-special-notes-pick-btn:focus-visible {
  background: var(--e360-gradient) !important;
  border-color: transparent !important;
  /* The ghost-button hover only flips `color`; we must also flip
     -webkit-text-fill-color or the label stays purple-on-purple and vanishes. */
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(99,102,241,.30) !important;
}

/* ── Owner popup: "בחירת הערות מיוחדות להצגה" ─────────────────────────────────
   Matches the system modal language (see .p6-modal): blurred backdrop, white
   rounded card, gradient-soft header band, purple Rubik title, circular close,
   styled option rows and a gradient primary action. */
.eil-snm-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 32px 16px 24px !important;
  background: rgba(15,10,40,0.52) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  overflow-y: auto !important;
  direction: rtl !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  animation: e360FadeIn .18s ease both !important;
}
.eil-snm-modal {
  width: 100% !important;
  max-width: 440px !important;
  background: #ffffff !important;
  border: 1px solid rgba(99,102,241,0.13) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(30,10,80,0.18), 0 4px 16px rgba(99,102,241,0.10) !important;
  overflow: hidden !important;
  animation: p6ModalIn .24s cubic-bezier(0.34,1.4,0.64,1) both !important;
}
.eil-snm-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 20px 24px 16px !important;
  background: var(--e360-gradient-soft) !important;
  border-bottom: 1px solid rgba(99,102,241,0.10) !important;
}
.eil-snm-title {
  margin: 0 !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  color: #7c3aed !important;
  -webkit-text-fill-color: #7c3aed !important;
}
.eil-snm-close {
  flex-shrink: 0 !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(99,102,241,0.15) !important;
  background: rgba(99,102,241,0.08) !important;
  color: #6366f1 !important;
  -webkit-text-fill-color: #6366f1 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease !important;
}
.eil-snm-close:hover {
  background: rgba(220,38,38,0.10) !important;
  border-color: rgba(220,38,38,0.22) !important;
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.09) !important;
}
/* Force a perfect circle even when the active theme puts a min-width / padding on
   buttons (which would otherwise stretch the X into an ellipse). ID specificity
   beats theme button rules. */
button#eil_p2_special_notes_close.eil-snm-close,
button#eil_p2_special_notes_close {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
}
.eil-snm-body { padding: 18px 24px 4px !important; }
.eil-snm-desc {
  margin: 0 0 14px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #475467 !important;
  -webkit-text-fill-color: #475467 !important;
}
.eil-snm-list { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.eil-snm-state { font-size: 13px !important; color: #64748b !important; -webkit-text-fill-color: #64748b !important; }
.eil-snm-state.is-error { color: #b91c1c !important; -webkit-text-fill-color: #b91c1c !important; font-weight: 600 !important; }
.eil-snm-option {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 11px 14px !important;
  cursor: pointer !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(99,102,241,0.18) !important;
  border-radius: 12px !important;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease !important;
}
.eil-snm-option:hover {
  border-color: rgba(99,102,241,0.42) !important;
  background: linear-gradient(135deg,#eff6ff,#f5f3ff) !important;
}
.eil-snm-option input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}
.eil-snm-box {
  position: relative !important;
  flex-shrink: 0 !important;
  width: 22px !important;
  height: 22px !important;
  border: 2px solid rgba(99,102,241,0.4) !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  transition: background .15s ease, border-color .15s ease !important;
}
.eil-snm-box::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 13px 13px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
  transition: opacity .15s ease !important;
}
.eil-snm-option input:checked ~ .eil-snm-box {
  background: var(--e360-gradient) !important;
  border-color: transparent !important;
}
.eil-snm-option input:checked ~ .eil-snm-box::after { opacity: 1 !important; }
.eil-snm-option input:focus-visible ~ .eil-snm-box {
  box-shadow: 0 0 0 3px rgba(99,102,241,0.25) !important;
}
.eil-snm-option-label {
  flex: 1 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
.eil-snm-msg { margin-top: 12px !important; min-height: 18px !important; font-size: 13px !important; font-weight: 700 !important; }
.eil-snm-actions { display: flex !important; gap: 10px !important; padding: 16px 24px 22px !important; }
.eil-snm-btn {
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease, background .15s ease !important;
}
.eil-snm-btn--save {
  flex: 1 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: var(--e360-gradient) !important;
  box-shadow: 0 4px 14px rgba(99,102,241,0.30) !important;
}
.eil-snm-btn--save:hover { transform: translateY(-1px) !important; box-shadow: 0 8px 22px rgba(99,102,241,0.38) !important; }
.eil-snm-btn--save:disabled { opacity: .6 !important; cursor: default !important; transform: none !important; box-shadow: none !important; }
.eil-snm-btn--cancel {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
.eil-snm-btn--cancel:hover { background: #e2e8f0 !important; }
@media (max-width: 480px) {
  .eil-snm-actions { flex-direction: column-reverse !important; }
  .eil-snm-btn { width: 100% !important; }
}

.i8w-special-breakdown {
  margin-top: 8px !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: var(--e360-muted) !important;
  -webkit-text-fill-color: var(--e360-muted) !important;
}

.i8w-special-line {
  color: var(--e360-text) !important;
  -webkit-text-fill-color: var(--e360-text) !important;
}

.i8w-special-allergies {
  margin-top: 10px !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--e360-border, rgba(15,23,42,.08)) !important;
}
.i8w-special-allergies-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  margin-bottom: 4px !important;
  color: var(--e360-text-secondary) !important;
  -webkit-text-fill-color: var(--e360-text-secondary) !important;
}

/* Muted text */
.i8w-muted {
  color: var(--e360-muted) !important;
  -webkit-text-fill-color: var(--e360-muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* Notices */
.i8w-success {
  background: #ecfdf5 !important;
  color: #065f46 !important;
  border-right: 4px solid #10b981 !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-radius: var(--e360-radius-sm) !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 14px 0 !important;
}

.i8w-error {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border-right: 4px solid #f43f5e !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-radius: var(--e360-radius-sm) !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 14px 0 !important;
}

/* Action links */
.i8w-link {
  color: var(--e360-accent) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.i8w-link:hover {
  color: var(--e360-violet) !important;
  text-decoration: underline !important;
}

/* Form padding inside card */
.i8w-wrap .i8w-form {
  padding: 4px 26px 26px !important;
}

.i8w-wrap .i8w-actions {
  padding: 0 26px 24px !important;
}

/* Button width on mobile */
@media (max-width: 560px) {
  .i8w-wrap .i8w-btn { width: 100% !important; }
  .i8w-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; padding: 14px 16px 18px !important; }
  .i8w-head { flex-direction: column !important; gap: 10px !important; }
}

@media (max-width: 900px) {
  .i8w-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ── Guest Manager Table: hide the prefix column (col 3) ── */
#eil_p2_table th:nth-child(3),
#eil_p2_table td:nth-child(3) {
  display: none !important;
}

/* Col 9 is the allergy column ("אלרגיה") and must stay visible on desktop so the
   owner can read the full dietary/allergy details. (It was previously a legacy
   invitation-preview column that no longer exists, so it is no longer hidden.) */

/* Also hide in mobile card labels */
@media (max-width: 768px) {
  table.eil-table td:nth-child(3),
  table.eil-table td:nth-child(9) {
    display: none !important;
  }
}

/* ── Delete button — keep original "מחיקה" text for saved guests ───── */
button.eil-del--desktop {
  display: inline-flex !important;
}

/* Danger button style */
.eil-btn--danger {
  background: var(--e360-gradient-red) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(220,38,38,0.28) !important;
}

.eil-btn--danger:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(220,38,38,0.38) !important;
  color: #ffffff !important;
}

/* ── Budget manager summary cards fix ──────────────────────────────── */
.p6-budget-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 24px !important;
}

.p6-summary-card {
  background: var(--e360-surface) !important;
  border: 1px solid var(--e360-border) !important;
  border-top: 4px solid transparent !important;
  border-radius: var(--e360-radius) !important;
  box-shadow: var(--e360-shadow-sm) !important;
  padding: 18px 20px !important;
  text-align: right !important;
  transition: transform var(--e360-transition), box-shadow var(--e360-transition) !important;
}

.p6-summary-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--e360-shadow) !important;
}

/* Green for approved/income */
.p6-summary-approved,
.p6-summary-income,
.p6-profit-positive {
  border-top-color: #10b981 !important;
}

.p6-summary-approved .p6-summary-amount,
.p6-summary-income .p6-summary-amount,
.p6-profit-positive .p6-summary-amount {
  color: #059669 !important;
  -webkit-text-fill-color: #059669 !important;
}

/* Red for expense */
.p6-summary-expense,
.p6-profit-negative {
  border-top-color: #f43f5e !important;
}

.p6-summary-expense .p6-summary-amount,
.p6-profit-negative .p6-summary-amount {
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
}

.p6-summary-amount {
  font-size: 24px !important;
  font-weight: 900 !important;
  margin-bottom: 6px !important;
  color: var(--e360-primary) !important;
  line-height: 1.15 !important;
}

.p6-summary-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--e360-muted) !important;
}

/* Budget header modernization */
.p6-budget-title {
  font-size: 26px !important;
  font-weight: 900 !important;
  color: var(--e360-violet) !important;
  -webkit-text-fill-color: var(--e360-violet) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  margin-bottom: 20px !important;
}

/* Budget table fix */
.p6-budget-table th {
  background: var(--e360-gradient-soft) !important;
  color: var(--e360-primary) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 13px 14px !important;
  border: none !important;
  border-bottom: 1px solid var(--e360-border-strong) !important;
}

.p6-budget-table td {
  border: none !important;
  border-bottom: 1px solid var(--e360-border) !important;
  padding: 13px 14px !important;
  font-size: 14px !important;
  color: var(--e360-text-secondary) !important;
  vertical-align: middle !important;
}

.p6-budget-table tr:hover td {
  background: rgba(99,102,241,0.04) !important;
}

/* Budget panel header */
.p6-budget-header {
  background: var(--e360-gradient-soft) !important;
  border-bottom: 1px solid var(--e360-border) !important;
  padding: 20px 24px 16px !important;
  margin-bottom: 0 !important;
  border-radius: var(--e360-radius-lg) var(--e360-radius-lg) 0 0 !important;
}

/* Budget responsive */
@media (max-width: 900px) {
  .p6-budget-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 480px) {
  .p6-budget-summary-grid { grid-template-columns: 1fr !important; }
  .p6-summary-amount { font-size: 20px !important; }
}

/* ── P2 Addon reminders — selected card (white text on gradient) ─────── */
.i8w-eil-check.is-selected .i8w-eil-help,
.i8w-eil-check.is-selected .i8w-eil-subhelp,
.i8w-eil-check.is-selected .i8w-eil-time-note,
.i8w-eil-check.is-selected .i8w-eil-check-date {
  color: rgba(255,255,255,0.82) !important;
  opacity: 1 !important;
}

.i8w-eil-check.is-selected .i8w-eil-input {
  border-color: rgba(255,255,255,0.32) !important;
  background: rgba(255,255,255,0.14) !important;
  color: #ffffff !important;
}

/* ── Overage pay button ──────────────────────────────────────────────── */
.i8w-overage-pay.button-primary,
a.i8w-overage-pay {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--e360-gradient) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 11px 24px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(99,102,241,0.30) !important;
  transition: transform var(--e360-transition), box-shadow var(--e360-transition) !important;
}

.i8w-overage-pay.button-primary:hover,
a.i8w-overage-pay:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(99,102,241,0.38) !important;
  color: #ffffff !important;
}

/* ── Overage pay button — compact variant inside banner ── */
.eil-p2-overage-warn-banner__actions .i8w-overage-pay,
.eil-p2-overage-warn-banner__actions a.i8w-overage-pay {
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 9px 20px !important;
  border-radius: 999px !important;
  letter-spacing: 0.01em !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   § 21b  OVERAGE WARNING BANNERS — shared by personal area & guest manager
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes e360-banner-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Font scope: force Rubik on every child node ── */
.eil-p2-overage-warn-banner,
.eil-p2-overage-warn-banner *,
.eil-p2-overage-warn-banner *::before,
.eil-p2-overage-warn-banner *::after {
  font-family: 'Rubik', Arial, sans-serif !important;
  box-sizing: border-box !important;
  direction: rtl !important;
}

/* ── Base wrapper — soft / warning (amber) ── */
.eil-p2-overage-warn-banner {
  position: relative !important;
  background: #fffdf5 !important;
  border: 1px solid rgba(217,119,6,0.20) !important;
  border-radius: 14px !important;
  padding: 0 !important;
  color: #78350f !important;
  margin-bottom: 18px !important;
  overflow: hidden !important;
  animation: e360-banner-in 0.28s cubic-bezier(0.34,1.30,0.64,1) both !important;
  box-shadow:
    0 1px 3px  rgba(0,0,0,0.06),
    0 4px 16px rgba(217,119,6,0.09) !important;
}

/* ── Accent stripe ── */
.eil-p2-overage-warn-banner__topbar {
  height: 3px !important;
  background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%) !important;
}

/* ── Content area: icon · message · action side ── */
.eil-p2-overage-warn-banner__content {
  padding: 15px 18px 17px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

/* ── The message column ── */
.eil-p2-overage-warn-banner__main {
  flex: 1 1 260px !important;
  min-width: 0 !important;
}

/* ── Header row: title + state pill ── */
.eil-p2-overage-warn-banner__header {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  flex-wrap: wrap !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

/* ── Icon chip ── */
.eil-p2-overage-warn-banner__icon {
  flex-shrink: 0 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(251,191,36,0.16) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #d97706 !important;
}
.eil-p2-overage-warn-banner__icon svg {
  display: block !important;
}

/* ── Title ── */
.eil-p2-overage-warn-banner__title {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #92400e !important;
  -webkit-text-fill-color: #92400e !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}

/* ── Body text ── */
.eil-p2-overage-warn-banner__body {
  margin-top: 7px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: #92400e !important;
  -webkit-text-fill-color: #92400e !important;
}

/* highlighted values inside the message */
.eil-p2-overage-warn-banner__body strong {
  font-weight: 600 !important;
  color: #78350f !important;
  -webkit-text-fill-color: #78350f !important;
}

/* ── Action side: the amount and the settle button, next to the message ── */
.eil-p2-overage-warn-banner__side {
  flex: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 9px !important;
}
.eil-p2-overage-warn-banner__amount {
  padding: 8px 14px !important;
  border-radius: 11px !important;
  background: rgba(220,38,38,0.09) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #7f1d1d !important;
  -webkit-text-fill-color: #7f1d1d !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}
.eil-p2-overage-warn-banner__amount b {
  font-size: 16px !important;
  font-weight: 800 !important;
  margin-inline-start: 4px !important;
}

/* ── Actions row ── */
.eil-p2-overage-warn-banner__actions {
  margin-top: 0 !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

/* ══ Hard overage variant (red / error) ══════════════════════════════════ */

.eil-p2-overage-warn-banner--hard {
  background: #fffafa !important;
  border-color: rgba(220,38,38,0.18) !important;
  color: #7f1d1d !important;
  box-shadow:
    0 1px 3px  rgba(0,0,0,0.06),
    0 4px 16px rgba(220,38,38,0.09) !important;
}
.eil-p2-overage-warn-banner--hard .eil-p2-overage-warn-banner__topbar {
  background: linear-gradient(90deg, #f87171 0%, #ef4444 50%, #dc2626 100%) !important;
}
.eil-p2-overage-warn-banner--hard .eil-p2-overage-warn-banner__header {
  border-bottom-color: rgba(220,38,38,0.11) !important;
}
.eil-p2-overage-warn-banner--hard .eil-p2-overage-warn-banner__icon {
  background: rgba(239,68,68,0.12) !important;
  color: #ef4444 !important;
}
.eil-p2-overage-warn-banner--hard .eil-p2-overage-warn-banner__title {
  color: #991b1b !important;
  -webkit-text-fill-color: #991b1b !important;
}
.eil-p2-overage-warn-banner--hard .eil-p2-overage-warn-banner__body {
  color: #991b1b !important;
  -webkit-text-fill-color: #991b1b !important;
}
.eil-p2-overage-warn-banner--hard .eil-p2-overage-warn-banner__body strong {
  color: #7f1d1d !important;
  -webkit-text-fill-color: #7f1d1d !important;
}

/* ── Price readability polish (additive — keeps prices/figures neatly aligned) ── */
.eil-p2-overage-warn-banner__body,
.eil-p2-overage-warn-banner__body strong {
  font-variant-numeric: tabular-nums !important;
}

/* ══ Approved overage-banner readability pass (presentation only) ═════════
   Three additions, shared by the personal area and the guests manager so both
   screens always look the same: the values inside the EXISTING <strong> tags
   read as chips (message strings are untouched), a state pill in the header
   row, and a quota meter that only draws numbers the screen already knows.
   Nothing here changes the quota, the free-overage size, the calculation or
   the record-adding lock.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Values inside the message → chips (CSS only, no markup/string change) ── */
.eil-p2-overage-warn-banner__body strong {
  display: inline-block !important;
  padding: 0 7px !important;
  border-radius: 6px !important;
  line-height: 1.7 !important;
  font-weight: 700 !important;
  background: rgba(217,119,6,0.10) !important;
}
.eil-p2-overage-warn-banner--hard .eil-p2-overage-warn-banner__body strong {
  background: rgba(220,38,38,0.09) !important;
}

/* ── State pill: "ללא חיוב נוסף" / "נדרש תשלום" ── */
.eil-p2-overage-warn-banner__status {
  margin-inline-start: 0 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 4px 11px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  background: rgba(5,150,105,0.12) !important;
  color: #047857 !important;
  -webkit-text-fill-color: #047857 !important;
  border: 1px solid rgba(5,150,105,0.28) !important;
}
.eil-p2-overage-warn-banner--hard .eil-p2-overage-warn-banner__status {
  background: rgba(220,38,38,0.10) !important;
  color: #b91c1c !important;
  -webkit-text-fill-color: #b91c1c !important;
  border-color: rgba(220,38,38,0.28) !important;
}

/* ── Quota meter: the allowed overage that was used, and what went beyond it.
      One segment per record while the numbers are small, two proportional bars
      once they are not — the same shape the overage notice uses. Display only. ── */
.eil-p2-overage-meter {
  display: flex !important;
  gap: 3px !important;
  margin: 11px 0 0 !important;
  max-width: 320px !important;
}
.eil-p2-overage-meter i {
  height: 5px !important;
  flex: 1 1 0 !important;
  border-radius: 99px !important;
  background: rgba(251,191,36,0.16) !important;
  display: block !important;
  font-style: normal !important;
}
.eil-p2-overage-meter i.is-on   { background: #d97706 !important; opacity: .38 !important; }
.eil-p2-overage-meter i.is-over { background: #d97706 !important; opacity: 1 !important; }
.eil-p2-overage-warn-banner--hard .eil-p2-overage-meter i        { background: rgba(239,68,68,0.12) !important; }
.eil-p2-overage-warn-banner--hard .eil-p2-overage-meter i.is-on  { background: #ef4444 !important; opacity: .38 !important; }
.eil-p2-overage-warn-banner--hard .eil-p2-overage-meter i.is-over{ background: #ef4444 !important; opacity: 1 !important; }

/* ── Mobile: the header wraps so the pill never squeezes the title, and the
      settle action takes the full width under the message ── */
@media (max-width: 768px) {
  .eil-p2-overage-warn-banner__content { padding: 14px 15px 16px !important; }
  .eil-p2-overage-warn-banner__body { font-size: 12.5px !important; }
  .eil-p2-overage-warn-banner__header { flex-wrap: wrap !important; gap: 8px !important; }
  .eil-p2-overage-warn-banner__status { margin-inline-start: 0 !important; }
}
@media (max-width: 520px) {
  .eil-p2-overage-warn-banner__side { width: 100% !important; }
  .eil-p2-overage-warn-banner__actions { width: 100% !important; }
  .eil-p2-overage-warn-banner__actions .i8w-overage-pay,
  .eil-p2-overage-warn-banner__actions a.i8w-overage-pay {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ── §חריגה — the send-moment line under a record's name ─────────────────
      Display only: the moment comes ready from the server (reminder_next_label),
      the browser never computes one. The held variant says the reminder is waiting
      because the overage still has to be settled. ── */
.eil-sendline {
  display: block !important;
  margin-top: 4px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  color: #8a94a6 !important;
  -webkit-text-fill-color: #8a94a6 !important;
  font-variant-numeric: tabular-nums !important;
  direction: rtl !important;
}
.eil-sendline__dot { opacity: .45 !important; }
.eil-sendline--held,
.eil-sendline--held b {
  color: #b45309 !important;
  -webkit-text-fill-color: #b45309 !important;
}
.eil-sendline--held b { font-weight: 600 !important; }
/* Centred rows (the view layout centres the name cell) keep the line under it centred too. */
#eil_p2_table tbody tr.eil-row--view td[data-label="שם מלא"] .eil-sendline {
  text-align: center !important;
}
/* Mobile: the name cell is a narrow column of the record card, so the line drops to the
   same small size the cell's other secondary text uses — clearly under the name, and
   costing as little height as possible. */
@media (max-width: 768px) {
  #eil_p2_table td[data-label="שם מלא"] .eil-sendline,
  .eil-sendline {
    font-size: 9.5px !important;
    line-height: 1.3 !important;
    margin-top: 2px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   § 22  GUEST MANAGER ENHANCEMENTS
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Table headers: center ──────────────────────────────────────────── */
#eil_p2_table th {
  text-align: center !important;
  vertical-align: middle !important;
}

/* ── Quantity column: narrow ────────────────────────────────────────── */
#eil_p2_table th:nth-child(4),
#eil_p2_table td:nth-child(4) {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
}

#eil_p2_table td:nth-child(4) .eil-input {
  width: 56px !important;
  min-width: 56px !important;
  text-align: center !important;
  padding-right: 8px !important;
  padding-left: 8px !important;
}

/* ── Status column: wider ────────────────────────────────────────────── */
#eil_p2_table th:nth-child(5),
#eil_p2_table td:nth-child(5) {
  min-width: 170px !important;
}

/* ── Status percentages coloring ────────────────────────────────────── */
/* Order in box: not_sent, no_response, confirmed, declined */
.eil-p2__status-percent { font-weight: 600 !important; }

.eil-p2__status-percent:nth-child(3),
.eil-p2__status-percent:nth-child(3) strong {
  color: #15803d !important;
}

.eil-p2__status-percent:nth-child(4),
.eil-p2__status-percent:nth-child(4) strong {
  color: #dc2626 !important;
}

/* ── Phone digit counter ─────────────────────────────────────────────── */
.eil-phone-counter {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  margin-top: 5px !important;
  text-align: center !important;
  letter-spacing: 0.03em !important;
  font-family: 'Rubik', Arial, sans-serif !important;
}

.eil-phone-counter.is-partial {
  color: #d97706 !important;
}

.eil-phone-counter.is-valid {
  color: #16a34a !important;
}

/* ── Confirmed status pill ───────────────────────────────────────────── */
#eil_p2_table select[data-field="status"].is-status-pill {
  width: auto !important;
  min-width: unset !important;
  max-width: 90px !important;
  display: block !important;
  margin: 0 auto !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  text-align: center !important;
  cursor: pointer !important;
}

/* ── Sample invitation dropdown ─────────────────────────────────────── */
.eil-p2-inv-wrap {
  position: relative !important;
  display: inline-block !important;
}

.eil-p2-inv-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  background: #ffffff !important;
  border: 1px solid rgba(99,102,241,0.15) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 30px rgba(99,102,241,0.16), 0 2px 10px rgba(15,23,42,0.10) !important;
  min-width: 230px !important;
  z-index: 9999 !important;
  overflow: hidden !important;
  animation: e360ScaleIn 0.18s cubic-bezier(0.34,1.56,0.64,1) both !important;
  direction: rtl !important;
}

.eil-p2-inv-menu-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 14px 18px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(99,102,241,0.08) !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  cursor: pointer !important;
  text-align: right !important;
  direction: rtl !important;
  transition: background 0.15s, color 0.15s !important;
}

.eil-p2-inv-menu-item:last-child {
  border-bottom: none !important;
}

.eil-p2-inv-menu-item:hover {
  background: rgba(99,102,241,0.07) !important;
  color: #6366f1 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   § 23  P5 CREDIT GIFTS — TITLE + RESPONSIVE REDESIGN
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Outer card wrapper — matches reminder picker card exactly ───────── */
.i8w-p5-gift-page,
.i8w-p5-dashboard {
  font-family: 'Rubik', Arial, sans-serif !important;
  direction: rtl !important;
  background: #ffffff !important;
  border: 1px solid rgba(99,102,241,0.12) !important;
  border-radius: 22px !important;
  box-shadow: 0 4px 24px rgba(99,102,241,0.08), 0 1px 6px rgba(15,23,42,0.04) !important;
  padding: 0 0 24px !important;
  margin-top: 14px !important;
  overflow: hidden !important;
}

/* ── Gradient header band (same as .i8w-head) ────────────────────────── */
.i8w-p5-gift-page h2,
.i8w-p5-dashboard > h2 {
  display: block !important;
  background: var(--e360-gradient-soft) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #7c3aed !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  margin: 0 !important;
  padding: 22px 24px 4px !important;
}

/* ── Subtitle continues the gradient band, ends with divider ─────────── */
.i8w-p5-gift-page > div > p,
.i8w-p5-dashboard > p {
  display: block !important;
  background: var(--e360-gradient-soft) !important;
  font-size: 13px !important;
  color: #64748b !important;
  margin: 0 0 20px !important;
  padding: 2px 24px 18px !important;
  border-bottom: 1px solid rgba(99,102,241,0.10) !important;
  font-family: 'Rubik', Arial, sans-serif !important;
}

/* ── Inner content padding ───────────────────────────────────────────── */
.i8w-p5-dashboard > *:not(h2):not(p) {
  padding-right: 24px !important;
  padding-left: 24px !important;
}

/* ── Bank gate: centered elegant inner card ──────────────────────────── */
#i8w-p5-bank-gate {
  margin: 0 auto !important;
  max-width: 480px !important;
  background: #f8f7ff !important;
  border: 1px solid rgba(99,102,241,0.16) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  padding: 24px 24px 20px !important;
}

#i8w-p5-bank-gate h3 {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #7c3aed !important;
  letter-spacing: -0.01em !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  margin: 0 0 6px !important;
  text-align: center !important;
  background: none !important;
  padding: 0 !important;
}

#i8w-p5-bank-gate > p,
#i8w-p5-bank-gate > form > p {
  text-align: center !important;
  color: #64748b !important;
  font-size: 13px !important;
  margin: 0 0 16px !important;
  border-bottom: none !important;
  padding: 0 !important;
  background: none !important;
}

#i8w-p5-bank-gate form {
  display: grid !important;
  gap: 10px !important;
}

/* ── Section h3 (bank details update, etc.) ──────────────────────────── */
.i8w-p5-dashboard h3 {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  margin-top: 0 !important;
  background: none !important;
  padding: 0 !important;
}

/* ── Inputs (override inline styles via attribute) ───────────────────── */
.i8w-p5-gift-page input[type="text"],
.i8w-p5-gift-page input[type="number"],
.i8w-p5-gift-page textarea,
.i8w-p5-dashboard input[type="text"],
.i8w-p5-dashboard input[type="number"],
.i8w-p5-dashboard textarea,
#i8w-p5-bank-gate input[type="text"] {
  width: 100% !important;
  padding: 11px 13px !important;
  border: 1.5px solid rgba(99,102,241,0.18) !important;
  border-radius: 12px !important;
  outline: none !important;
  background: #fff !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 14px !important;
  color: #0f172a !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.i8w-p5-gift-page input:focus,
.i8w-p5-gift-page textarea:focus,
.i8w-p5-dashboard input:focus,
.i8w-p5-dashboard textarea:focus,
#i8w-p5-bank-gate input:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important;
}

/* ── Preset amount buttons ───────────────────────────────────────────── */
.i8w-p5-preset {
  padding: 10px !important;
  border: 1.5px solid rgba(99,102,241,0.18) !important;
  border-radius: 12px !important;
  background: #fff !important;
  cursor: pointer !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #4f46e5 !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}

.i8w-p5-preset:hover,
.i8w-p5-preset.is-active {
  background: rgba(99,102,241,0.08) !important;
  border-color: #6366f1 !important;
  color: #4f46e5 !important;
}

/* ── Primary submit buttons ──────────────────────────────────────────── */
.i8w-p5-gift-page form > button[type="submit"],
.i8w-p5-dashboard form > button[type="submit"],
#i8w-p5-bank-gate form button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #1e40af 0%, #4f46e5 60%, #7c3aed 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 12px 26px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(99,102,241,0.30) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
  width: auto !important;
}

.i8w-p5-gift-page form > button[type="submit"]:hover,
.i8w-p5-dashboard form > button[type="submit"]:hover,
#i8w-p5-bank-gate form button[type="submit"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(99,102,241,0.38) !important;
}

/* ── Disabled/state buttons in dashboard ─────────────────────────────── */
.i8w-p5-dashboard button[disabled],
.i8w-p5-dashboard form button[disabled] {
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 999px !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Approved/pending state overrides */
.i8w-p5-dashboard button[disabled][style*="#ecfdf5"] {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border-color: #bbf7d0 !important;
}

/* ── Secondary action buttons (bank change etc.) ─────────────────────── */
.i8w-p5-dashboard > div[style*="display:flex"] button[type="submit"] {
  padding: 10px 18px !important;
  border: 1.5px solid rgba(99,102,241,0.25) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #4f46e5 !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s !important;
}

.i8w-p5-dashboard > div[style*="display:flex"] button[type="submit"]:hover {
  background: rgba(99,102,241,0.06) !important;
  border-color: #6366f1 !important;
}

/* ── Gifts table ─────────────────────────────────────────────────────── */
.i8w-p5-dashboard table {
  border-radius: 14px !important;
  overflow: hidden !important;
  border-collapse: collapse !important;
}

.i8w-p5-dashboard table th {
  background: rgba(99,102,241,0.06) !important;
  color: #334155 !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(99,102,241,0.10) !important;
  text-align: right !important;
}

.i8w-p5-dashboard table td {
  padding: 10px 12px !important;
  border: 1px solid rgba(99,102,241,0.08) !important;
  font-size: 13px !important;
  color: #1e293b !important;
  font-family: 'Rubik', Arial, sans-serif !important;
}

.i8w-p5-dashboard table tbody tr:hover td {
  background: rgba(99,102,241,0.03) !important;
}

/* ── Notice/alert box ────────────────────────────────────────────────── */
.i8w-p5-dashboard > div[style*="margin:12px 0"] {
  border-radius: 14px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(99,102,241,0.12) !important;
}

/* ── Mobile responsiveness ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .i8w-p5-gift-page h2,
  .i8w-p5-dashboard > h2 {
    padding: 16px 16px 4px !important;
  }
  .i8w-p5-gift-page > div > p,
  .i8w-p5-dashboard > p {
    padding: 2px 16px 14px !important;
  }
  .i8w-p5-dashboard > *:not(h2):not(p) {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }
  .i8w-p5-gift-page,
  .i8w-p5-dashboard {
    border-radius: 18px !important;
  }

  .i8w-p5-gift-page h2,
  .i8w-p5-dashboard > h2 {
    font-size: 19px !important;
  }

  .i8w-p5-gift-page form {
    gap: 12px !important;
  }

  .i8w-p5-preset {
    padding: 8px 6px !important;
    font-size: 13px !important;
  }

  .i8w-p5-dashboard table {
    font-size: 12px !important;
  }

  .i8w-p5-dashboard table th,
  .i8w-p5-dashboard table td {
    padding: 8px 8px !important;
    font-size: 12px !important;
  }

  #i8w-p5-bank-gate {
    padding: 14px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   § 24  GUEST PORTAL SCHEDULE — TITLE + RESPONSIVE REDESIGN
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Schedule manager wrapper: full width like other cards ───────────── */
.e360gp-manager {
  font-family: 'Rubik', Arial, sans-serif !important;
  max-width: none !important;
}

/* ── Schedule form: full outer card matching reminder picker ─────────── */
.e360gp-schedule-form {
  background: #ffffff !important;
  border: 1px solid rgba(99,102,241,0.12) !important;
  border-radius: 22px !important;
  box-shadow: 0 4px 24px rgba(99,102,241,0.08), 0 1px 6px rgba(15,23,42,0.04) !important;
  padding: 0 0 22px !important;
  margin-top: 14px !important;
  overflow: hidden !important;
}

/* ── Gradient header band — same as .i8w-head ────────────────────────── */
.e360gp-schedule-form .e360gp-sch-head {
  background: var(--e360-gradient-soft) !important;
  border-bottom: 1px solid rgba(99,102,241,0.10) !important;
  padding: 22px 24px 16px !important;
  margin-bottom: 16px !important;
  flex-wrap: nowrap !important;
}

/* ── Schedule h3 title inside the gradient band ──────────────────────── */
.e360gp-schedule-form h3,
.e360gp-schedule h3,
.e360gp-sch-head-main h3 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #7c3aed !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  margin: 0 0 4px !important;
}

/* ── Subtitle (inside band, no extra border needed) ──────────────────── */
.e360gp-schedule-form .e360gp-sch-sub {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* ── Inner content: add horizontal padding ───────────────────────────── */
.e360gp-schedule-form .e360gp-sch-list,
.e360gp-schedule-form .e360gp-sch-add-area,
.e360gp-schedule-form .e360gp-save-btn {
  margin-right: 24px !important;
  margin-left: 24px !important;
}

/* ── Remove old preview box in new builder ───────────────────────────── */
.e360gp-schedule-preview {
  display: none !important;
}

/* ── Schedule form card ──────────────────────────────────────────────── */
.e360gp-schedule-form,
.e360gp-schedule-preview {
  border: 1px solid rgba(99,102,241,0.12) !important;
  border-radius: 22px !important;
  box-shadow: 0 2px 12px rgba(99,102,241,0.08), 0 1px 4px rgba(15,23,42,0.04) !important;
}

/* ── Textarea ────────────────────────────────────────────────────────── */
.e360gp-schedule-form textarea {
  border: 1.5px solid rgba(99,102,241,0.18) !important;
  border-radius: 16px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  color: #0f172a !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.e360gp-schedule-form textarea:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important;
  outline: none !important;
}

/* ── Save button (replace dark #111827 with purple gradient) ─────────── */
.e360gp-save-btn {
  background: linear-gradient(135deg, #1e40af 0%, #4f46e5 60%, #7c3aed 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 12px 26px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(99,102,241,0.30) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.e360gp-save-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(99,102,241,0.38) !important;
}

/* ── Preview h4 ──────────────────────────────────────────────────────── */
.e360gp-schedule-preview h4 {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  font-family: 'Rubik', Arial, sans-serif !important;
}

/* ── Schedule time badge (replace dark #111827) ──────────────────────── */
.e360gp-schedule-time {
  background: linear-gradient(135deg, #1e40af 0%, #4f46e5 60%, #7c3aed 100%) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 8px 10px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* ── Schedule items ──────────────────────────────────────────────────── */
.e360gp-schedule-item {
  background: #ffffff !important;
  border: 1px solid rgba(99,102,241,0.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 4px rgba(99,102,241,0.06) !important;
}

.e360gp-schedule-text {
  font-family: 'Rubik', Arial, sans-serif !important;
  color: #1e293b !important;
}

/* ── Success message ─────────────────────────────────────────────────── */
.e360gp-success {
  font-family: 'Rubik', Arial, sans-serif !important;
  background: #ecfdf5 !important;
  border: 1px solid #bbf7d0 !important;
  color: #166534 !important;
  border-radius: 16px !important;
}

/* ── Mobile responsiveness ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .e360gp-schedule-form h3,
  .e360gp-schedule h3 {
    font-size: 19px !important;
  }

  .e360gp-schedule-form {
    border-radius: 18px !important;
  }

  .e360gp-schedule-form .e360gp-sch-head {
    padding: 16px 16px 14px !important;
  }

  .e360gp-schedule-form .e360gp-sch-list,
  .e360gp-schedule-form .e360gp-sch-add-area,
  .e360gp-schedule-form .e360gp-save-btn {
    margin-right: 14px !important;
    margin-left: 14px !important;
  }

  .e360gp-schedule-item {
    grid-template-columns: 72px 1fr !important;
    padding: 10px !important;
  }

  .e360gp-schedule-time {
    font-size: 12px !important;
    padding: 6px 8px !important;
  }

  .e360gp-schedule-text {
    font-size: 14px !important;
  }

  .e360gp-save-btn {
    width: 100% !important;
    font-size: 14px !important;
    padding: 12px 20px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   § 25  P6 BUDGET MANAGER — HEADER + CARD MATCHING REMINDER PICKER
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Outer wrap: white card with same shape as other sections ────────── */
.p6-budget-wrap {
  font-family: 'Rubik', Arial, sans-serif !important;
  background: #ffffff !important;
  border: 1px solid rgba(99,102,241,0.12) !important;
  border-radius: 22px !important;
  box-shadow: 0 4px 24px rgba(99,102,241,0.08), 0 1px 6px rgba(15,23,42,0.04) !important;
  padding: 0 0 24px !important;
  margin-top: 14px !important;
  overflow: hidden !important;
  direction: rtl !important;
}

/* ── Header band: same gradient as .i8w-head ─────────────────────────── */
.p6-budget-header {
  background: var(--e360-gradient-soft) !important;
  border-bottom: 1px solid rgba(99,102,241,0.10) !important;
  padding: 22px 24px 18px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

/* ── Title: matches .i8w-head h2 (override old gradient-text rule) ───── */
.p6-budget-title {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #7c3aed !important;
  -webkit-text-fill-color: #7c3aed !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  margin: 0 0 4px !important;
}

.p6-budget-subtitle {
  font-size: 13px !important;
  color: #64748b !important;
  font-weight: 500 !important;
  font-family: 'Rubik', Arial, sans-serif !important;
}

/* ── Inner content: horizontal padding ──────────────────────────────── */
.p6-budget-summary-grid,
.p6-budget-panel {
  margin-right: 20px !important;
  margin-left: 20px !important;
}

/* ── Summary cards: indigo palette ──────────────────────────────────── */
.p6-summary-card {
  font-family: 'Rubik', Arial, sans-serif !important;
  border: 1px solid rgba(99,102,241,0.12) !important;
  border-radius: 16px !important;
}

.p6-summary-income::before  { background: #059669 !important; }
.p6-summary-expense::before { background: #dc2626 !important; }
.p6-summary-profit::before  { background: linear-gradient(90deg, #1e40af, #7c3aed) !important; }

/* ── Panel ───────────────────────────────────────────────────────────── */
.p6-budget-panel {
  border: 1px solid rgba(99,102,241,0.12) !important;
  border-radius: 16px !important;
}

/* ── Login required: centered card ──────────────────────────────────── */
.p6-budget-login-required {
  font-family: 'Rubik', Arial, sans-serif !important;
  background: #ffffff !important;
  border: 1px solid rgba(99,102,241,0.14) !important;
  border-radius: 22px !important;
  box-shadow: 0 4px 24px rgba(99,102,241,0.08) !important;
  direction: rtl !important;
  margin-top: 14px !important;
}

.p6-login-title {
  font-family: 'Rubik', Arial, sans-serif !important;
  color: #7c3aed !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

.p6-btn-login-cta {
  background: linear-gradient(135deg, #1e40af 0%, #4f46e5 60%, #7c3aed 100%) !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  border-radius: 999px !important;
}

.p6-btn-login-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(99,102,241,0.38) !important;
  color: #ffffff !important;
}

/* ── Summary amounts: refined, elegant numerals ──────────────────────── */
.p6-summary-amount {
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  letter-spacing: -0.04em !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.1 !important;
  margin-bottom: 6px !important;
}

.p6-summary-label {
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
}

/* ── All buttons: Rubik font, elegant pill ───────────────────────────── */
.p6-btn {
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  min-height: 40px !important;
  border-radius: 999px !important;
  border: none !important;
  letter-spacing: 0.01em !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}

.p6-btn:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.06) !important;
}

.p6-btn:active {
  transform: translateY(0) !important;
  filter: brightness(0.96) !important;
}

/* הוסף הכנסה */
.p6-btn-income {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(5,150,105,0.28) !important;
}
.p6-btn-income:hover {
  box-shadow: 0 5px 18px rgba(5,150,105,0.36) !important;
}

/* הוסף הוצאה */
.p6-btn-expense {
  background: linear-gradient(135deg, #dc2626 0%, #f43f5e 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(220,38,38,0.26) !important;
}
.p6-btn-expense:hover {
  box-shadow: 0 5px 18px rgba(220,38,38,0.34) !important;
}

/* מתנות ממוזמנים */
.p6-btn-gifts {
  background: linear-gradient(135deg, #1e40af 0%, #4f46e5 60%, #7c3aed 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(99,102,241,0.30) !important;
}
.p6-btn-gifts:hover {
  background: linear-gradient(135deg, #1e40af 0%, #4f46e5 60%, #7c3aed 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 5px 18px rgba(99,102,241,0.38) !important;
}

/* ייצוא CSV */
.p6-btn-export {
  background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(124,58,237,0.26) !important;
}
.p6-btn-export:hover {
  box-shadow: 0 5px 18px rgba(124,58,237,0.34) !important;
}

/* שמור (modal save) */
.p6-btn-save {
  background: linear-gradient(135deg, #1e40af 0%, #4f46e5 60%, #7c3aed 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(99,102,241,0.30) !important;
}
.p6-btn-save:hover {
  box-shadow: 0 5px 18px rgba(99,102,241,0.38) !important;
}

/* ביטול (secondary) */
.p6-btn-secondary {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: none !important;
}
.p6-btn-secondary:hover {
  background: #e2e8f0 !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

/* Login CTA */
.p6-btn-login-cta {
  background: linear-gradient(135deg, #1e40af 0%, #4f46e5 60%, #7c3aed 100%) !important;
  color: #ffffff !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  border-radius: 999px !important;
  box-shadow: 0 3px 14px rgba(99,102,241,0.32) !important;
}

/* ── Mobile: keep gradient band, adjust padding ──────────────────────── */
@media (max-width: 768px) {
  .p6-budget-wrap {
    padding-bottom: 18px !important;
    border-radius: 18px !important;
  }

  .p6-budget-header {
    padding: 16px 16px 14px !important;
    margin-bottom: 14px !important;
  }

  .p6-budget-title {
    font-size: 19px !important;
  }

  .p6-budget-summary-grid,
  .p6-budget-panel {
    margin-right: 12px !important;
    margin-left: 12px !important;
  }

  .p6-summary-amount {
    font-size: 18px !important;
  }

  .p6-btn {
    font-size: 13px !important;
    padding: 9px 14px !important;
    min-height: 42px !important;
  }
}

/* ── P6 Modal redesign: elegant header band + Rubik ─────────────────── */

/* Backdrop: rich blur overlay */
.p6-modal-backdrop {
  background: rgba(15,10,40,0.52) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  padding: 32px 16px 24px !important;
  overflow-y: auto !important;
}

/* Modal container: white card, no top padding (header bleeds) */
.p6-modal {
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1px solid rgba(99,102,241,0.13) !important;
  box-shadow: 0 20px 60px rgba(30,10,80,0.18), 0 4px 16px rgba(99,102,241,0.10) !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 500px !important;
  overflow: hidden !important;
  animation: p6ModalIn 0.24s cubic-bezier(0.34,1.4,0.64,1) both !important;
  direction: rtl !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.p6-gifts-modal {
  max-width: 700px !important;
}

@keyframes p6ModalIn {
  from { opacity: 0; transform: scale(0.94) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Modal header: gradient band like all other section headers */
.p6-modal-header {
  background: var(--e360-gradient-soft) !important;
  border-bottom: 1px solid rgba(99,102,241,0.10) !important;
  padding: 20px 24px 16px !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

/* Modal title: purple Rubik */
.p6-modal-header h3,
#p6-modal-title,
.p6-modal-header .p6-modal-title {
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #7c3aed !important;
  -webkit-text-fill-color: #7c3aed !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

/* Close button */
.p6-modal-close {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(99,102,241,0.08) !important;
  border: 1px solid rgba(99,102,241,0.15) !important;
  color: #6366f1 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
  flex-shrink: 0 !important;
}

.p6-modal-close:hover {
  background: rgba(220,38,38,0.10) !important;
  border-color: rgba(220,38,38,0.22) !important;
  color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.09) !important;
}

/* Form body: padded container */
#p6-entry-form {
  padding: 22px 24px 0 !important;
}

/* Form grid */
.p6-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px 16px !important;
}

.p6-field-full {
  grid-column: 1 / -1 !important;
}

/* Field labels: small Rubik, no uppercase */
.p6-field label {
  display: block !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #6366f1 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 6px !important;
}

/* Inputs: refined and clean */
.p6-field input,
.p6-field select,
.p6-field textarea {
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 14px !important;
  background: #fafafe !important;
  border: 1.5px solid rgba(99,102,241,0.18) !important;
  border-radius: 10px !important;
  padding: 10px 13px !important;
  color: #1e1b4b !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
  outline: none !important;
  width: 100% !important;
  line-height: 1.5 !important;
}

.p6-field input:focus,
.p6-field select:focus,
.p6-field textarea:focus {
  border-color: #6366f1 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important;
}

.p6-field textarea {
  resize: vertical !important;
  min-height: 72px !important;
  border-radius: 10px !important;
}

/* VAT box */
.p6-vat-box {
  background: rgba(99,102,241,0.04) !important;
  border: 1.5px solid rgba(99,102,241,0.14) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  cursor: pointer !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

.p6-vat-box:has(input[type="checkbox"]:checked) {
  background: rgba(5,150,105,0.09) !important;
  border-color: rgba(5,150,105,0.40) !important;
}

.p6-vat-check {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #4f46e5 !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: color 0.2s ease !important;
}

.p6-vat-box:has(input[type="checkbox"]:checked) .p6-vat-check {
  color: #059669 !important;
}

/* Checkbox square: visible, styled */
.p6-vat-check input[type="checkbox"] {
  width: 17px !important;
  height: 17px !important;
  border-radius: 4px !important;
  accent-color: #059669 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  opacity: 1 !important;
  position: static !important;
  pointer-events: auto !important;
}

.p6-vat-preview {
  margin-top: 10px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 14px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 12.5px !important;
  color: #475569 !important;
}

.p6-vat-preview strong {
  color: #1e1b4b !important;
  font-weight: 700 !important;
}

/* Modal actions footer */
.p6-modal-actions {
  display: flex !important;
  gap: 10px !important;
  justify-content: flex-end !important;
  margin-top: 20px !important;
  padding: 16px 24px 22px !important;
  border-top: 1px solid rgba(99,102,241,0.08) !important;
  flex-wrap: wrap !important;
}

/* ── Gifts modal specific ─────────────────────────────────────────────── */

/* Info note */
.p6-gifts-note {
  margin: 20px 24px 14px !important;
  padding: 11px 14px !important;
  background: rgba(99,102,241,0.06) !important;
  border: 1px solid rgba(99,102,241,0.18) !important;
  border-radius: 10px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #4338ca !important;
  line-height: 1.55 !important;
}

/* Search bar inside gifts modal */
.p6-gifts-search {
  margin: 0 24px 14px !important;
}

.p6-gifts-search input {
  width: 100% !important;
  border: 1.5px solid rgba(99,102,241,0.18) !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 13.5px !important;
  background: #fafafe !important;
  color: #1e1b4b !important;
  outline: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.p6-gifts-search input:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.11) !important;
  background: #fff !important;
}

/* Gifts table wrapper */
.p6-gifts-table-wrap {
  margin: 0 24px !important;
  border: 1px solid rgba(99,102,241,0.13) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  max-height: 320px !important;
  overflow-y: auto !important;
}

/* Gifts table */
.p6-gifts-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  direction: rtl !important;
}

.p6-gifts-table thead th {
  background: var(--e360-gradient-soft) !important;
  color: #4f46e5 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 10px 14px !important;
  text-align: right !important;
  border-bottom: 1px solid rgba(99,102,241,0.12) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
}

.p6-gifts-table tbody tr {
  border-bottom: 1px solid rgba(99,102,241,0.07) !important;
  transition: background 0.12s !important;
}

.p6-gifts-table tbody tr:last-child {
  border-bottom: none !important;
}

.p6-gifts-table tbody tr:hover {
  background: rgba(99,102,241,0.04) !important;
}

.p6-gifts-table td {
  padding: 10px 14px !important;
  font-size: 13px !important;
  color: #334155 !important;
  text-align: right !important;
  vertical-align: middle !important;
}

/* Gift amount input cell */
.p6-gift-amount {
  width: 100px !important;
  border: 1.5px solid rgba(99,102,241,0.2) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 13px !important;
  color: #1e1b4b !important;
  background: #fafafe !important;
  text-align: center !important;
  outline: none !important;
  transition: border-color 0.13s, box-shadow 0.13s !important;
}

.p6-gift-amount:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important;
  background: #fff !important;
}

.p6-gift-amount[readonly] {
  background: rgba(99,102,241,0.06) !important;
  color: #6366f1 !important;
  border-color: rgba(99,102,241,0.15) !important;
}

/* Gifts total */
.p6-gifts-total {
  margin: 12px 24px 0 !important;
  padding: 10px 16px !important;
  background: linear-gradient(90deg, rgba(99,102,241,0.07) 0%, rgba(124,58,237,0.06) 100%) !important;
  border: 1px solid rgba(99,102,241,0.14) !important;
  border-radius: 10px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #4338ca !important;
  text-align: left !important;
  direction: rtl !important;
}

.p6-gifts-total strong,
#p6-gifts-total {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #6d28d9 !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums !important;
}

/* Mobile: full-width bottom sheet */
@media (max-width: 600px) {
  .p6-modal-backdrop {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .p6-modal {
    border-radius: 20px 20px 0 0 !important;
    max-width: 100% !important;
    animation: p6ModalUp 0.28s cubic-bezier(0.34,1.2,0.64,1) both !important;
  }

  @keyframes p6ModalUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  #p6-entry-form {
    padding: 18px 18px 0 !important;
  }

  .p6-form-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .p6-modal-actions {
    padding: 14px 18px 28px !important;
  }

  .p6-gifts-note,
  .p6-gifts-search,
  .p6-gifts-table-wrap,
  .p6-gifts-total {
    margin-right: 14px !important;
    margin-left: 14px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   § 26  P4 SEATING ARRANGEMENT — SYSTEM DESIGN MATCH
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Shell: Rubik + direction ────────────────────────────────────────── */
.i8w-p4-shell {
  font-family: 'Rubik', Arial, sans-serif !important;
  direction: rtl !important;
}

/* ── Workspace: flush with screen edges, no padding ─────────────────── */
.i8w-p4-workspace {
  padding: 0 !important;
  background: #f2f4f8 !important;
  border-radius: 0 !important;
}

/* ── Board panel: remove default padding ────────────────────────────── */
.i8w-p4-panel.active {
  padding: 0 !important;
}
.i8w-p4-board-shell {
  padding: 10px 10px 8px !important;
}

/* ── Top bar: 3-column layout, flush to top ─────────────────────────── */
.i8w-p4-topbar {
  background: linear-gradient(135deg, #1e40af 0%, #4f46e5 55%, #7c3aed 100%) !important;
  box-shadow: 0 2px 16px rgba(99,102,241,0.22) !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  direction: rtl !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* RIGHT: event name brand */
.i8w-p4-topbar-brand {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.i8w-topbar-event-name {
  font-family: 'Rubik', Arial, sans-serif !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  color: #ffffff !important;
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 10px !important;
  padding: 6px 14px !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
  letter-spacing: 0.01em !important;
}

/* CENTER: tabs + action buttons */
.i8w-p4-topbar-center {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
}

/* Vertical separator between tabs and action buttons */
.i8w-topbar-sep {
  width: 1px !important;
  height: 26px !important;
  background: rgba(255,255,255,0.22) !important;
  margin: 0 3px !important;
  flex-shrink: 0 !important;
}

/* LEFT: stats */
.i8w-p4-topbar-stats {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Top stat chips */
.i8w-p4-shell .top-stat {
  font-family: 'Rubik', Arial, sans-serif !important;
  background: rgba(255,255,255,0.13) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 10px !important;
  height: 46px !important;
}
.i8w-p4-shell .top-stat strong { font-size: 26px !important; font-weight: 800 !important; }
.i8w-p4-shell .top-stat span   { font-size: 12px !important; font-weight: 500 !important; }

/* Top buttons */
.i8w-top-btn {
  font-family: 'Rubik', Arial, sans-serif !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}
.i8w-top-btn.tab.active {
  background: rgba(255,255,255,0.26) !important;
  border-color: rgba(255,255,255,0.42) !important;
  color: #fff !important;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,0.4) !important;
}

/* Live action — highlighted pill */
.i8w-top-btn.live-action {
  background: rgba(255,255,255,0.22) !important;
  border-color: rgba(255,255,255,0.45) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
}
.i8w-top-btn.live-action:hover {
  background: rgba(255,255,255,0.32) !important;
}

/* Reset action */
.i8w-top-btn.reset-action {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.28) !important;
  color: #fff !important;
}
.i8w-top-btn.reset-action:hover {
  background: rgba(255,255,255,0.18) !important;
}

/* Hide old frame-head if still present */
.i8w-p4-frame-head { display: none !important; }

/* ══ PREMIUM VENUE CANVAS ═══════════════════════════════════════════════ */
.i8w-p4-shell .reference-canvas {
  background-color: #e8e0d5 !important;
  border-color: rgba(120,90,60,0.20) !important;
}
.i8w-p4-shell .reference-stage {
  background-color: #ede4d8 !important;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 38px,
      rgba(160,120,80,0.10) 38px, rgba(160,120,80,0.10) 40px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 38px,
      rgba(160,120,80,0.06) 38px, rgba(160,120,80,0.06) 40px
    ) !important;
}

/* ══ TABLE BOX — CLOUD/BLOB STYLE (flat fill + seat bumps = one unified shape) ══ */
.i8w-p4-shell .table-box {
  transition: box-shadow 0.18s ease, transform 0.18s ease !important;
}

/* Kill ALL p4.css pseudo-elements */
.i8w-p4-shell .table-box.exact-style::before,
.i8w-p4-shell .table-box.exact-style::after,
.i8w-p4-shell .table-box.exact-style .table-core::before,
.i8w-p4-shell .table-box.exact-style .table-core::after { display: none !important; }

/* ── SEAT FILL TOKENS — one place to change colours ─────────────────── */
/* Empty seat MUST match the table fill exactly for the cloud effect.     */
/* These hex values are shared between table bg and .seat-empty.          */

/* Base: flat light purple — NO gradient */
.i8w-p4-shell .table-box.exact-style {
  background: #ede9fe !important;
  border: 2.5px solid #7c3aed !important;
  box-shadow: 0 4px 18px rgba(109,40,217,0.16), 0 1px 4px rgba(0,0,0,0.08) !important;
  color: #1e1b4b !important;
  padding: 0 !important;
  overflow: visible !important;
  transition: box-shadow 0.18s ease, transform 0.18s ease !important;
}
.i8w-p4-shell .table-box.exact-style.round  { border-radius: 50% !important; }
.i8w-p4-shell .table-box.exact-style.rect   { border-radius: 20px !important; }
.i8w-p4-shell .table-box.exact-style.square { border-radius: 20px !important; }

/* Hover */
.i8w-p4-shell .table-box.exact-style:hover {
  transform: translateY(-2px) scale(1.015) !important;
  box-shadow: 0 8px 28px rgba(109,40,217,0.24), 0 2px 6px rgba(0,0,0,0.10) !important;
}

/* Drop target */
.i8w-p4-shell .table-box.exact-style.drop-target {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.30) !important;
}

/* Full table — flat green, seats also turn green */
.i8w-p4-shell .table-box.exact-style.table-full {
  background: #dcfce7 !important;
  border-color: #16a34a !important;
  color: #14532d !important;
  box-shadow: 0 4px 18px rgba(22,163,74,0.18) !important;
}
.i8w-p4-shell .table-box.exact-style.table-full .table-seat.seat-empty {
  background: #dcfce7 !important;
  border-color: #16a34a !important;
}

/* ── Table core — above seats-layer so text is always readable ───────── */
.i8w-p4-shell .table-box.exact-style .table-core {
  position: relative !important;
  z-index: 5 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 8px 6px !important;
  color: inherit !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* ── Table number ────────────────────────────────────────────────────── */
.i8w-p4-shell .table-box.exact-style .table-no {
  display: block !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(1.1rem, 20%, 2.2rem) !important;
  color: #3b0764 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  text-align: center !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}
.i8w-p4-shell .table-box.exact-style.table-full .table-no { color: #14532d !important; }

/* ── Occupancy ──────────────────────────────────────────────────────── */
.i8w-p4-shell .table-box.exact-style .table-view-guests {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
.i8w-p4-shell .table-box.exact-style .table-occ {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 1px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  direction: ltr !important;
}
.i8w-p4-shell .table-box.exact-style .table-occ b      { color: #6d28d9 !important; font-weight: 700 !important; }
.i8w-p4-shell .table-box.exact-style .table-occ em     { color: rgba(109,40,217,0.45) !important; font-style: normal !important; font-size: 0.78em !important; }
.i8w-p4-shell .table-box.exact-style .table-occ strong { color: rgba(109,40,217,0.60) !important; font-weight: 500 !important; }
.i8w-p4-shell .table-box.exact-style.table-full .table-occ b      { color: #15803d !important; }
.i8w-p4-shell .table-box.exact-style.table-full .table-occ em     { color: rgba(20,83,45,0.45) !important; }
.i8w-p4-shell .table-box.exact-style.table-full .table-occ strong { color: rgba(20,83,45,0.60) !important; }

/* ── Nickname — below seat count ────────────────────────────────────── */
.i8w-p4-shell .table-box.exact-style .table-nick {
  display: block !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: clamp(0.52rem, 8%, 0.72rem) !important;
  color: #6d28d9 !important;
  line-height: 1.2 !important;
  max-width: 90% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: center !important;
}
.i8w-p4-shell .table-box.exact-style.table-full .table-nick { color: #15803d !important; }

/* ══ CHAIRS — small, delicate CHAIR glyphs (fix: a touch bigger than the tiny dot, and shaped like a
   little chair = backrest + seat, not a plain circle) ══
   The seat CENTERS, arrangement and distances are computed by the JS and are left completely
   unchanged — only the on-screen mark changes. The footprint scales from --seat-w / --seat-h (set
   per table by the JS), so a chair stays PROPORTIONAL to its table and shrinks/grows with it; a tight
   clamp keeps it small & delicate on a regular table and still clear on a very small table. This is
   the authoritative rule (loaded last, !important) so nothing else can re-inflate the size. */
.i8w-p4-shell .table-seats-layer {
  position: absolute !important;
  /* Honour the JS-computed inset (= the seat radius) so the seat CENTRES land exactly on the table
     perimeter and the chairs sit ATTACHED to the edge (bumping it), not floating a gap away. Works for
     every shape because the JS lays the ring/edges out against this same inset. */
  inset: var(--seats-inset, -6px) !important;
  z-index: 2 !important;     /* above table bg/border, below table-core (z-index:5) */
  pointer-events: none !important;
}

/* The chair box — proportional to the table (via --seat-w/--seat-h), small & clamped, a touch bigger
   than before. The glyph is built from two children (.ch-back = backrest, .ch-seat = cushion). */
.i8w-p4-shell .table-seat {
  --chair-col: #7c3aed;
  position: absolute !important;
  width: clamp(8px, calc(var(--seat-w, 2px) * 5.4), 14px) !important;
  height: clamp(8.5px, calc(var(--seat-h, 2px) * 5.8), 15px) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* Face the table centre (turns with the table) and nudge outward just enough that the cushion's
     inner edge meets the table rim — attached, not floating. */
  transform: translate(-50%, -50%) rotate(var(--seat-rot, 0deg)) translateY(-38%) !important;
  transform-origin: center !important;
  transition: none !important;
  pointer-events: none !important;
}
.i8w-p4-shell .table-seat::before { display: none !important; }
/* Re-enable the chair glyph children. */
.i8w-p4-shell .table-seat .ch-back,
.i8w-p4-shell .table-seat .ch-seat {
  display: block !important;
  position: absolute !important;
  box-sizing: border-box !important;
}
/* Backrest — small rounded bar at the outer edge. */
.i8w-p4-shell .table-seat .ch-back {
  top: 0 !important; left: 14% !important; right: 14% !important; height: 38% !important;
  border-radius: 45% 45% 22% 22% !important;
  background: var(--chair-col) !important;
  border: none !important;
}
/* Cushion — rounded seat below the backrest. */
.i8w-p4-shell .table-seat .ch-seat {
  top: 30% !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  border-radius: 22% 22% 45% 45% !important;
  background: #ffffff !important;
  border: 1px solid var(--chair-col) !important;
}
/* Empty — white cushion + purple frame */
.i8w-p4-shell .table-seat.seat-empty { --chair-col: #7c3aed !important; }
.i8w-p4-shell .table-seat.seat-empty .ch-seat { background: #ffffff !important; }
/* Occupied — filled purple */
.i8w-p4-shell .table-seat.seat-occupied { --chair-col: #6d28d9 !important; }
.i8w-p4-shell .table-seat.seat-occupied .ch-seat { background: #7c3aed !important; }
/* Arrived — green */
.i8w-p4-shell .table-seat.seat-arrived { --chair-col: #16a34a !important; }
.i8w-p4-shell .table-seat.seat-arrived .ch-seat { background: #dcfce7 !important; }

/* ── Seat legend ─────────────────────────────────────────────────────────
   Removed: this printed '● שובץ  ● הגיע' through .i8w-ref-canvas-toolbar::after.
   Being a pseudo-element it could not be selected, inspected as a node, or removed
   from the DOM, which is why it survived every DOM-level cleanup. The board now
   carries a real, permission-aware key in the toolbar itself (see class-shortcode.php
   and .i8w-board-key in p4.css), so this decorative duplicate is deleted rather than
   hidden. It was also a third flex item in the space-between toolbar; without it the
   toolbar returns to the two authored groups, left and right. */

/* ── Resizer handle ──────────────────────────────────────────────────── */
.i8w-p4-shell .table-resizer {
  background: rgba(99,102,241,0.15) !important;
  border-radius: 4px !important;
  border: 1px solid rgba(99,102,241,0.20) !important;
}

/* ── Fix #5: a CLEAN idle table. When the item is NOT hovered / selected / being resized, hide EVERY
   edit affordance — the resize handles (incl. the SE corner that used to stay on as a little square),
   the selection frame and the tools — and drop their pointer-events so nothing invisible blocks a
   click or a drag. They come back only on hover / selection (kept alive by the JS grace period). */
.i8w-p4-shell .entity-resize-handles .erh { opacity: 0 !important; pointer-events: none !important; }
.i8w-p4-shell .table-box:hover .erh,
.i8w-p4-shell .table-box.is-resizing .erh,
.i8w-p4-shell .table-box.is-selected-table .erh,
.i8w-p4-shell .table-box.i8w-tools-hover .erh,
.i8w-p4-shell .i8w-hall-item:hover .erh,
.i8w-p4-shell .i8w-hall-item.is-resizing .erh,
.i8w-p4-shell .i8w-hall-item.i8w-tools-hover .erh { opacity: 1 !important; pointer-events: auto !important; }
/* The exact-style corner resizer square is display:block !important in p4.css — gate it the same way. */
.i8w-p4-shell .table-box.exact-style .table-resizer { opacity: 0 !important; pointer-events: none !important; transition: opacity .12s ease !important; }
.i8w-p4-shell .table-box.exact-style:hover .table-resizer,
.i8w-p4-shell .table-box.exact-style.is-resizing .table-resizer,
.i8w-p4-shell .table-box.exact-style.is-selected-table .table-resizer,
.i8w-p4-shell .table-box.exact-style.i8w-tools-hover .table-resizer { opacity: 1 !important; pointer-events: auto !important; }

/* ── Fix #2: the selected / hovered item (and therefore its control bar, which lives inside it) is
   lifted ABOVE every other table / element so a neighbouring item can never paint over its four
   action buttons. This is a TEMPORARY per-item lift (only while hovered / selected) — the map's
   overall stacking order is not changed, and no item is moved. */
.i8w-p4-shell .table-box:hover,
.i8w-p4-shell .table-box.is-selected-table,
.i8w-p4-shell .table-box.is-multi-selected,
.i8w-p4-shell .table-box.i8w-tools-hover,
.i8w-p4-shell .i8w-hall-item:hover,
.i8w-p4-shell .i8w-hall-item.is-multi-selected,
.i8w-p4-shell .i8w-hall-item.i8w-tools-hover { z-index: 60 !important; }

/* ── Tool buttons — a horizontal bar centred BELOW the item, shown on hover OR selection ──────
   Fix: the edit / duplicate / delete controls now sit BELOW the table or element (never on top of
   it), centred to its width, with a small clear gap. They appear when the item is hovered OR
   selected, sit above the map layers (high z-index) and stay clickable. When the item is near the
   bottom edge the JS adds .tools-above and the bar flips ABOVE so it is never cut off. The buttons,
   their icons and their actions are unchanged. */
.i8w-p4-shell .entity-tools {
  position: absolute !important;
  top: calc(100% + 14px) !important;   /* below the item, clear of the seat dots */
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  /* Fix: ALL FOUR controls on ONE row — rotate | edit | delete | duplicate. The whole group is
     counter-rotated + placed below the item by the JS, so the row never wraps, never splits and its
     order never changes with the item's rotation. */
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.18s ease !important;
  z-index: 40 !important;
  background: rgba(255,255,255,0.98) !important;
  border-radius: 12px !important;
  padding: 5px 7px !important;
  box-shadow: 0 4px 14px rgba(99,102,241,0.28) !important;
  border: 1px solid rgba(99,102,241,0.16) !important;
  white-space: nowrap !important;
}
/* The rotate button lives INSIDE the row as a normal flex child (first = rotate) — strip the old
   absolute "lollipop" positioning so it stays inline and never drifts or changes side on rotate.
   Fix #1: give it the SAME flat look as the other action buttons (no white pill / shadow / border),
   so all four read as one uniform set. Icon and action are unchanged. */
.i8w-p4-shell .entity-tools .table-rotate-handle {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  transform: none !important;
  opacity: 1 !important;          /* follows the group's own opacity (show/hide) */
  margin: 0 !important;
  width: 26px !important; height: 26px !important;
  flex: 0 0 auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  color: #4f46e5 !important;
  padding: 0 !important;
}
.i8w-p4-shell .entity-tools .table-rotate-handle svg { width: 15px !important; height: 15px !important; }
.i8w-p4-shell .entity-tools .table-rotate-handle:hover { background: rgba(99,102,241,0.10) !important; }
.i8w-p4-shell .entity-tools .table-rotate-handle::before { display: none !important; }  /* drop the connector line */
/* Fallback near the bottom of the map: flip the bar ABOVE the item (JS toggles .tools-above). */
.i8w-p4-shell .entity-tools.tools-above {
  top: auto !important;
  bottom: calc(100% + 14px) !important;
}
/* Fix: the table + its whole control group behave as ONE hover region. .i8w-tools-hover is added by
   the JS with a short grace period so crossing the small gap between the table and the buttons (or
   between the rotate button and the action row) never hides them mid-move. */
.i8w-p4-shell .table-box:hover .entity-tools,
.i8w-p4-shell .i8w-hall-item:hover .entity-tools,
.i8w-p4-shell .table-box.i8w-tools-hover .entity-tools,
.i8w-p4-shell .i8w-hall-item.i8w-tools-hover .entity-tools,
.i8w-p4-shell .table-box.is-selected-table .entity-tools,
.i8w-p4-shell .table-box.is-multi-selected .entity-tools,
.i8w-p4-shell .i8w-hall-item.is-multi-selected .entity-tools {
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* A visual-only bridge over the gap. It must NOT intercept the pointer (pointer-events:none) — the
   hover keep-alive is handled entirely by the JS grace period, and a pointer-catching bridge here
   would sit over the table's bottom resize handles and block resizing the table downward (fix #2). */
.i8w-p4-shell .entity-tools::before {
  content: '' !important;
  position: absolute !important;
  left: -8px !important; right: -8px !important;
  bottom: 100% !important;
  height: 42px !important;
  background: transparent !important;
  display: block !important;
  pointer-events: none !important;
}
.i8w-p4-shell .entity-tools.tools-above::before { bottom: auto !important; top: 100% !important; }

/* Fix #4: "how many times to duplicate?" popup. */
.i8w-p4-dup-overlay {
  position: fixed !important; inset: 0 !important; z-index: 1000001 !important;   /* above the workspace + modal */
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: rgba(15,23,42,0.45) !important; direction: rtl !important;
  font-family: 'Rubik', Arial, sans-serif !important;
}
.i8w-p4-dup-overlay .i8w-p4-dup-card {
  background: #fff !important; border-radius: 16px !important; padding: 20px 22px !important;
  width: min(320px, 92vw) !important; box-shadow: 0 18px 50px rgba(15,23,42,0.35) !important;
  display: flex !important; flex-direction: column !important; gap: 12px !important; text-align: center !important;
}
.i8w-p4-dup-overlay .i8w-p4-dup-title { font-size: 16px !important; font-weight: 800 !important; color: #1e1b4b !important; }
.i8w-p4-dup-overlay .i8w-p4-dup-input {
  font-family: inherit !important; font-size: 18px !important; font-weight: 700 !important; text-align: center !important;
  padding: 9px 12px !important; border: 1.5px solid #cbd5e1 !important; border-radius: 10px !important; width: 100% !important;
  box-sizing: border-box !important; color: #1e1b4b !important;
}
.i8w-p4-dup-overlay .i8w-p4-dup-input:focus { outline: none !important; border-color: #7c3aed !important; box-shadow: 0 0 0 3px rgba(124,58,237,0.15) !important; }
.i8w-p4-dup-overlay .i8w-p4-dup-err { color: #dc2626 !important; font-size: 12.5px !important; font-weight: 600 !important; }
.i8w-p4-dup-overlay .i8w-p4-dup-actions { display: flex !important; gap: 8px !important; justify-content: center !important; }
.i8w-p4-dup-overlay .i8w-p4-dup-actions button {
  font-family: inherit !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer !important;
  padding: 9px 18px !important; border-radius: 10px !important; border: none !important; flex: 1 1 0 !important;
}
.i8w-p4-dup-overlay .i8w-p4-dup-ok { background: linear-gradient(135deg,#5b46e5,#7c3aed) !important; color: #fff !important; }
.i8w-p4-dup-overlay .i8w-p4-dup-ok:hover { filter: brightness(1.06) !important; }
.i8w-p4-dup-overlay .i8w-p4-dup-cancel { background: #f1f5f9 !important; color: #334155 !important; }
.i8w-p4-dup-overlay .i8w-p4-dup-cancel:hover { background: #e2e8f0 !important; }

/* Fix #1: "שיבוץ לפי רשומות / קבוצות" wizard (inside the shared modal). */
.i8w-p4-shell .i8w-aw-body { padding: 4px 2px 2px; max-height: 68vh; overflow: auto; }
.i8w-p4-shell .i8w-aw-cols { display: flex; gap: 14px; flex-wrap: wrap; }
.i8w-p4-shell .i8w-aw-col { flex: 1 1 240px; min-width: 220px; }
.i8w-p4-shell .i8w-aw-col-title { font-weight: 800; color: #1e1b4b; margin: 2px 2px 8px; font-size: 14px; }
.i8w-p4-shell .i8w-aw-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; padding: 2px; }
.i8w-p4-shell .i8w-aw-row { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid #e6eaf2; border-radius: 10px; cursor: pointer; background: #fff; }
.i8w-p4-shell .i8w-aw-row.is-on { border-color: #7c3aed; background: rgba(124,58,237,0.06); }
.i8w-p4-shell .i8w-aw-row.is-dis { opacity: .5; cursor: default; }
.i8w-p4-shell .i8w-aw-row input[type=checkbox] { width: 17px; height: 17px; flex: 0 0 auto; accent-color: #7c3aed; }
.i8w-p4-shell .i8w-aw-row-main { display: flex; flex-direction: column; min-width: 0; }
.i8w-p4-shell .i8w-aw-row-main b { font-size: 13.5px; color: #1e1b4b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.i8w-p4-shell .i8w-aw-row-main small { font-size: 11.5px; color: #64748b; }
.i8w-p4-shell .i8w-aw-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.i8w-p4-shell .i8w-aw-hint { color: #dc2626; font-size: 12.5px; font-weight: 600; margin: 8px 2px 0; min-height: 16px; }
.i8w-p4-shell .i8w-aw-empty, .i8w-p4-shell .i8w-aw-empty-sm { color: #64748b; font-size: 12.5px; padding: 8px; }
.i8w-p4-shell .i8w-aw-preview { display: flex; flex-direction: column; gap: 10px; }
.i8w-p4-shell .i8w-aw-tcard { border: 1px solid #e6eaf2; border-radius: 12px; padding: 10px 12px; background: #fff; }
.i8w-p4-shell .i8w-aw-tcard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.i8w-p4-shell .i8w-aw-tcard-head b { color: #1e1b4b; }
.i8w-p4-shell .i8w-aw-cap { font-size: 12px; font-weight: 700; color: #4a37d6; }
.i8w-p4-shell .i8w-aw-cap.over { color: #dc2626; }
.i8w-p4-shell .i8w-aw-guest { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-top: 1px solid #f1f5f9; }
.i8w-p4-shell .i8w-aw-guest-name { flex: 1 1 auto; min-width: 0; font-size: 13px; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.i8w-p4-shell .i8w-aw-move { font-family: inherit; font-size: 12px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 4px 6px; background: #fff; color: #334155; max-width: 46%; }
.i8w-p4-shell .i8w-aw-leftover { margin-top: 10px; padding: 9px 11px; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 12.5px; }
/* Fix #2: over-capacity warning + per-column select-all / clear controls in the groups wizard. */
.i8w-p4-shell .i8w-aw-warn { margin-top: 10px; padding: 9px 11px; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 12.5px; }
.i8w-p4-shell .i8w-aw-col-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.i8w-p4-shell .i8w-aw-col-tools { display: inline-flex; gap: 6px; }
.i8w-p4-shell .i8w-aw-mini { font-family: inherit; font-size: 11.5px; font-weight: 600; border: 1px solid #cbd5e1; border-radius: 8px; padding: 3px 9px; background: #f8fafc; color: #4a37d6; cursor: pointer; transition: background .14s ease; }
.i8w-p4-shell .i8w-aw-mini:hover { background: #eef2ff; }
/* "חיפוש קבוצה לפי שם" in the groups wizard — filters the rendered group list only. */
.i8w-p4-shell .i8w-aw-search { margin: 0 2px 7px; }
.i8w-p4-shell .i8w-aw-search-input { font-family: inherit; font-size: 13px; font-weight: 500; width: 100%; box-sizing: border-box; border: 1px solid #e6eaf2; border-radius: 10px; padding: 8px 11px; background: #fff; color: #1e1b4b; }
.i8w-p4-shell .i8w-aw-search-input::placeholder { color: #94a3b8; font-weight: 500; }
.i8w-p4-shell .i8w-aw-search-input:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12); }
/* .i8w-aw-row is display:flex, which would otherwise beat the [hidden] attribute. */
.i8w-p4-shell .i8w-aw-row[hidden] { display: none !important; }

/* ── Fix #3: "יישור וריווח אחיד" tool — a small mode chooser opened from the selection action bar ── */
.i8w-p4-shell .i8w-al-body { display: flex; flex-direction: column; gap: 8px; padding: 6px 2px 2px; }
.i8w-p4-shell .i8w-al-opt { font-family: inherit; font-size: 13.5px; font-weight: 600; text-align: right; border: 1px solid #e6eaf2; border-radius: 10px; padding: 11px 14px; background: #fff; color: #1e1b4b; cursor: pointer; transition: background .14s ease, border-color .14s ease; }
.i8w-p4-shell .i8w-al-opt:hover { background: rgba(124,58,237,0.06); border-color: #7c3aed; }
.i8w-p4-shell .i8w-al-note { margin-top: 4px; font-size: 12px; color: #64748b; line-height: 1.5; }

.i8w-p4-shell .entity-tool-btn {
  font-family: 'Rubik', Arial, sans-serif !important;
  background: transparent !important;
  border: none !important;
  color: #4f46e5 !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  width: 26px !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  transition: background 0.14s ease !important;
}
.i8w-p4-shell .entity-tool-btn:hover {
  background: rgba(99,102,241,0.10) !important;
  transform: none !important;
}
.i8w-p4-shell .entity-tool-btn.danger {
  color: #dc2626 !important;
}
.i8w-p4-shell .entity-tool-btn.danger:hover {
  background: rgba(220,38,38,0.08) !important;
}

/* ── TOP INFO ROW — clear separation between the event name and the phone ────────────────────
   Fix: the event name and the phone are two distinct zones with a large, unmistakable gap between
   them (not just word spacing). The phone keeps the "טלפון: <number>" order and is centred inside
   its own pill — both horizontally and vertically. Text size and data order are unchanged; nothing
   wraps into one continuous string, at any screen width. Authoritative rules (loaded last). */
.i8w-p4-shell .i8w-ti-lead {
  display: inline-flex !important;
  align-items: center !important;
  gap: 34px !important;            /* the significant, clear separation */
  min-width: 0 !important;
}
.i8w-p4-shell .i8w-ti-name {
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.i8w-p4-shell .i8w-ti-phone-block {
  display: inline-flex !important;
  align-items: center !important;      /* vertical centring inside the zone */
  justify-content: center !important;  /* horizontal centring inside the zone */
  gap: 7px !important;
  padding: 4px 14px !important;
  background: rgba(99,102,241,0.07) !important;   /* subtle pill → reads as its own separate area */
  border: 1px solid rgba(99,102,241,0.14) !important;
  border-radius: 10px !important;
  text-align: center !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}
.i8w-p4-shell .i8w-ti-phone-block .i8w-ti-phone-lbl,
.i8w-p4-shell .i8w-ti-phone-block .i8w-ti-phone {
  display: inline-flex !important;
  align-items: center !important;
}

/* ── Fix #4: "אולם" and "הערות" get the SAME pill styling as the phone (frame, background, rounded
   corners, padding, centred alignment) so the three zones share one visual language. Text, data and
   order are unchanged; long notes stay on one tidy line (ellipsis) instead of breaking the bar. */
.i8w-p4-shell .i8w-ti-right { gap: 8px 10px !important; align-items: center !important; }
.i8w-p4-shell .i8w-ti-right .i8w-ti-sep { display: none !important; }   /* pills replace the thin dividers */
.i8w-p4-shell .i8w-ti-right .i8w-ti-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 4px 14px !important;
  background: rgba(99,102,241,0.07) !important;
  border: 1px solid rgba(99,102,241,0.14) !important;
  border-radius: 10px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}
.i8w-p4-shell .i8w-ti-right .i8w-ti-item .i8w-ti-val { font-weight: 800 !important; }
/* Long notes: keep the value readable on one line, ellipsis if it is too long — never break the bar. */
.i8w-p4-shell .i8w-ti-right .i8w-ti-notes { max-width: 320px !important; }
.i8w-p4-shell .i8w-ti-right .i8w-ti-notes .i8w-p4-si-notes-text,
.i8w-p4-shell .i8w-ti-right .i8w-ti-notes .i8w-ti-val {
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; max-width: 220px !important;
}

/* ── Fix #5: the CENTER counters read as tidy, uniform little blocks — clearer values, even spacing,
   a subtle shared background, thin separation — without adding clutter or breaking the bar width. */
.i8w-p4-shell .i8w-ti-center {
  gap: 6px !important;
  padding: 4px 8px !important;
  background: rgba(99,102,241,0.05) !important;
  border-radius: 12px !important;
  align-items: center !important;
}
.i8w-p4-shell .i8w-ti-center .i8w-ti-sep { display: none !important; }
.i8w-p4-shell .i8w-ti-center .i8w-ti-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 3px 11px !important;
  background: #ffffff !important;
  border: 1px solid rgba(99,102,241,0.12) !important;
  border-radius: 9px !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
}
.i8w-p4-shell .i8w-ti-center .i8w-ti-lbl { font-size: 13.5px !important; font-weight: 600 !important; color: #475569 !important; }
.i8w-p4-shell .i8w-ti-center .i8w-ti-num { font-size: 20px !important; font-weight: 800 !important; color: #4a37d6 !important; }

/* ── Fix #6: keep the text (and icon) of "הוספת שולחן" / "הוספת אלמנט" readable on hover / focus /
   active — the label must never fade toward the background. Pin the colour across all states and keep
   a light hover background so the dark-purple text always has contrast. Highest-priority (loaded last). */
.i8w-p4-shell .i8w-p4-tools-side .i8w-tb--primary,
.i8w-p4-shell .i8w-p4-tools-side .i8w-tb--primary:hover,
.i8w-p4-shell .i8w-p4-tools-side .i8w-tb--primary:focus,
.i8w-p4-shell .i8w-p4-tools-side .i8w-tb--primary:focus-visible,
.i8w-p4-shell .i8w-p4-tools-side .i8w-tb--primary:active,
.i8w-p4-shell .i8w-tb--primary[data-action="add-table"]:hover,
.i8w-p4-shell .i8w-tb--primary[data-action="open-add-element"]:hover {
  color: #4a37d6 !important;
  background: #f3f1ff !important;
}
.i8w-p4-shell .i8w-p4-tools-side .i8w-tb--primary svg,
.i8w-p4-shell .i8w-p4-tools-side .i8w-tb--primary:hover svg,
.i8w-p4-shell .i8w-p4-tools-side .i8w-tb--primary:focus svg,
.i8w-p4-shell .i8w-p4-tools-side .i8w-tb--primary:active svg {
  color: #4a37d6 !important;
  stroke: currentColor !important;
}

/* ── Fix #3: rotation-aware RESIZE CURSORS. The resize math already resizes along the table's own
   (rotated) axes and anchors the opposite edge (R9-1 in p4.js), so a handle grows the table in its
   visual direction at every angle. The only thing that did not follow the rotation was the cursor
   icon — remap it for 90°/270° so the arrow matches the visual drag axis (180° needs no change). */
.i8w-p4-shell .table-box[data-rotation="90"] .erh-n,
.i8w-p4-shell .table-box[data-rotation="90"] .erh-s,
.i8w-p4-shell .table-box[data-rotation="270"] .erh-n,
.i8w-p4-shell .table-box[data-rotation="270"] .erh-s { cursor: ew-resize !important; }
.i8w-p4-shell .table-box[data-rotation="90"] .erh-e,
.i8w-p4-shell .table-box[data-rotation="90"] .erh-w,
.i8w-p4-shell .table-box[data-rotation="270"] .erh-e,
.i8w-p4-shell .table-box[data-rotation="270"] .erh-w { cursor: ns-resize !important; }
.i8w-p4-shell .table-box[data-rotation="90"] .erh-nw,
.i8w-p4-shell .table-box[data-rotation="90"] .erh-se,
.i8w-p4-shell .table-box[data-rotation="270"] .erh-nw,
.i8w-p4-shell .table-box[data-rotation="270"] .erh-se { cursor: nesw-resize !important; }
.i8w-p4-shell .table-box[data-rotation="90"] .erh-ne,
.i8w-p4-shell .table-box[data-rotation="90"] .erh-sw,
.i8w-p4-shell .table-box[data-rotation="270"] .erh-ne,
.i8w-p4-shell .table-box[data-rotation="270"] .erh-sw { cursor: nwse-resize !important; }

/* ── Side panels ─────────────────────────────────────────────────────── */
.i8w-ref-panel,
.i8w-p4-shell .ref-list-card {
  background: #ffffff !important;
  border: 1px solid rgba(99,102,241,0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 12px rgba(99,102,241,0.07) !important;
}
.i8w-ref-panel-title {
  font-family: 'Rubik', Arial, sans-serif !important;
  color: #7c3aed !important;
  font-weight: 800 !important;
  font-size: 18px !important;
}

/* Search inputs */
.i8w-ref-search-wrap input,
.i8w-p4-shell .bottom-head input,
.i8w-p4-shell .table-form input,
.i8w-p4-shell .table-form select {
  font-family: 'Rubik', Arial, sans-serif !important;
  border: 1.5px solid rgba(99,102,241,0.18) !important;
  border-radius: 10px !important;
  background: #fafafe !important;
}
.i8w-ref-search-wrap input:focus,
.i8w-p4-shell .bottom-head input:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.10) !important;
  outline: none !important;
}

/* ── Guest chips ─────────────────────────────────────────────────────── */
.i8w-p4-shell .guest-chip {
  font-family: 'Rubik', Arial, sans-serif !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  border: 1px solid rgba(99,102,241,0.14) !important;
  border-right: 6px solid var(--guest-color, #6366f1) !important;
  box-shadow: 0 1px 4px rgba(99,102,241,0.07) !important;
  transition: box-shadow 0.15s ease, transform 0.15s ease !important;
}
.i8w-p4-shell .guest-chip:hover {
  transform: translateX(-2px) !important;
  box-shadow: 0 4px 14px rgba(99,102,241,0.14) !important;
}
.i8w-p4-shell .guest-chip.needs-seating {
  border-right-color: #f59e0b !important;
  background: #fffbeb !important;
}

/* ── Check-state badge ───────────────────────────────────────────────── */
.i8w-p4-shell .check-state {
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  letter-spacing: 0.01em !important;
}
/* הגיע — arrived (green) */
.i8w-p4-shell .check-state.on {
  background: rgba(5,150,105,0.10) !important;
  color: #065f46 !important;
  border: 1px solid rgba(5,150,105,0.22) !important;
}
/* דורש שיבוץ — arrived but has no table (amber warning) */
.i8w-p4-shell .guest-chip.needs-seating .check-state.on {
  background: rgba(245,158,11,0.12) !important;
  color: #92400e !important;
  border: 1px solid rgba(245,158,11,0.30) !important;
  animation: e360Pulse 1.8s ease-in-out infinite !important;
}
@keyframes e360Pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
  50% { box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }
}

/* ── Action buttons ──────────────────────────────────────────────────── */
.i8w-p4-shell .i8w-btn,
.i8w-p4-shell .i8w-tool-btn,
.i8w-p4-shell .i8w-search-btn,
.i8w-p4-shell .i8w-print-btn,
.i8w-p4-shell .i8w-full-btn {
  font-family: 'Rubik', Arial, sans-serif !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  font-size: 13px !important;
}
.i8w-p4-shell .i8w-btn:not(.secondary):not(.ghost):not(.close-btn) {
  background: linear-gradient(135deg, #1e40af 0%, #4f46e5 60%, #7c3aed 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(99,102,241,0.28) !important;
}
.i8w-p4-shell .i8w-btn.secondary {
  background: rgba(99,102,241,0.08) !important;
  color: #4338ca !important;
  border: 1px solid rgba(99,102,241,0.18) !important;
}
.i8w-p4-shell .i8w-btn.close-btn {
  background: #ef4444 !important;
}

/* Toolbar zoom buttons */
.i8w-tool-btn {
  font-family: 'Rubik', Arial, sans-serif !important;
  border: 1px solid rgba(99,102,241,0.18) !important;
  border-radius: 8px !important;
  color: #4f46e5 !important;
  font-weight: 600 !important;
}

/* ── Modal ───────────────────────────────────────────────────────────── */
.i8w-p4-modal-card {
  font-family: 'Rubik', Arial, sans-serif !important;
  border-radius: 20px !important;
  border: 1px solid rgba(99,102,241,0.12) !important;
  box-shadow: 0 20px 60px rgba(30,10,80,0.16) !important;
}
.i8w-p4-shell .modal-head h3 {
  font-family: 'Rubik', Arial, sans-serif !important;
  color: #7c3aed !important;
  font-weight: 800 !important;
}
.i8w-p4-shell .modal-close {
  background: rgba(99,102,241,0.08) !important;
  border: 1px solid rgba(99,102,241,0.14) !important;
  color: #6366f1 !important;
}

/* ── Table guest rows in modal ───────────────────────────────────────── */
.i8w-p4-shell .table-guest-row {
  font-family: 'Rubik', Arial, sans-serif !important;
  border-radius: 12px !important;
  border-right: 5px solid var(--guest-color, #6366f1) !important;
  border-top: 1px solid rgba(99,102,241,0.10) !important;
  border-bottom: 1px solid rgba(99,102,241,0.10) !important;
  border-left: 1px solid rgba(99,102,241,0.10) !important;
}

/* ── Footer note ─────────────────────────────────────────────────────── */
.i8w-ref-footer-note {
  font-family: 'Rubik', Arial, sans-serif !important;
}
.i8w-ref-footer-note strong { color: #7c3aed !important; }

/* ── Launcher (entry screen) ─────────────────────────────────────────── */
.i8w-p4-launcher {
  background: var(--e360-gradient-soft) !important;
  border: 1px solid rgba(99,102,241,0.14) !important;
  border-radius: 20px !important;
}
.i8w-p4-launch-btn {
  background: linear-gradient(135deg, #1e40af 0%, #4f46e5 60%, #7c3aed 100%) !important;
  border-radius: 999px !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  box-shadow: 0 4px 16px rgba(99,102,241,0.32) !important;
}

/* ── Arrived row in host/checkin panels ──────────────────────────────── */
.i8w-p4-shell .guest-arrived-row {
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%) !important;
  border-color: rgba(124,58,237,0.30) !important;
}

/* ── Control side (הוספות sidebar) — elegant card ────────────────────── */
.i8w-p4-control-side .i8w-control-card {
  background: #ffffff !important;
  border: 1px solid rgba(99,102,241,0.12) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 20px rgba(99,102,241,0.10) !important;
  overflow: hidden !important;
  padding: 0 0 8px !important;
}
.i8w-p4-control-side .i8w-side-tabs {
  background: linear-gradient(135deg, #1e40af 0%, #4f46e5 55%, #7c3aed 100%) !important;
  padding: 10px 12px 8px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  gap: 6px !important;
}
.i8w-p4-control-side .i8w-side-tab {
  font-family: 'Rubik', Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.80) !important;
  background: transparent !important;
  border: none !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}
.i8w-p4-control-side .i8w-side-tab.active {
  color: #ffffff !important;
  background: rgba(255,255,255,0.20) !important;
}
.i8w-p4-control-side .i8w-side-section-title {
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  padding: 10px 14px 4px !important;
  margin: 0 !important;
}
.i8w-p4-control-side .i8w-side-action {
  font-family: 'Rubik', Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border-radius: 10px !important;
  margin: 3px 10px !important;
  padding: 8px 12px !important;
  display: block !important;
  width: calc(100% - 20px) !important;
  text-align: right !important;
  border: 1px solid rgba(99,102,241,0.12) !important;
  background: rgba(99,102,241,0.04) !important;
  color: #4338ca !important;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease !important;
  cursor: pointer !important;
}
.i8w-p4-control-side .i8w-side-action:hover {
  background: rgba(99,102,241,0.10) !important;
  border-color: rgba(99,102,241,0.24) !important;
  transform: translateX(-1px) !important;
}
.i8w-p4-control-side .i8w-side-action.primary {
  background: linear-gradient(135deg, rgba(79,70,229,0.07) 0%, rgba(124,58,237,0.07) 100%) !important;
  border-color: rgba(99,102,241,0.18) !important;
  color: #4338ca !important;
}
.i8w-p4-control-side .i8w-side-action.primary:hover {
  background: linear-gradient(135deg, rgba(79,70,229,0.15) 0%, rgba(124,58,237,0.15) 100%) !important;
  border-color: rgba(99,102,241,0.32) !important;
}
.i8w-p4-control-side .i8w-side-divider {
  height: 1px !important;
  background: rgba(99,102,241,0.08) !important;
  margin: 6px 10px !important;
  border: none !important;
}

/* ══ HALL ELEMENTS — FLAT COLOR, EACH TYPE DISTINCT ═══════════════════ */

/* Base */
.i8w-p4-shell .i8w-hall-item {
  font-family: 'Rubik', Arial, sans-serif !important;
  border-radius: 16px !important;
  border: 2.5px solid transparent !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.14) !important;
  transition: box-shadow 0.18s ease, transform 0.15s ease !important;
}
.i8w-p4-shell .i8w-hall-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 22px rgba(0,0,0,0.20) !important;
}
.i8w-p4-shell .i8w-hall-item .hall-item-icon { font-size: 20px !important; line-height: 1 !important; }
.i8w-p4-shell .i8w-hall-item .hall-item-label {
  font-family: 'Rubik', Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* Bar — coral/salmon */
.i8w-p4-shell .i8w-hall-item.type-bar {
  background: #ff6b6b !important;
  border-color: #c0392b !important;
  border-radius: 999px !important;
  color: #ffffff !important;
}

/* Dance floor — deep indigo */
.i8w-p4-shell .i8w-hall-item.type-dancefloor {
  background: #312e81 !important;
  border-color: #4338ca !important;
  color: #e0e7ff !important;
}

/* Restroom — sky blue */
.i8w-p4-shell .i8w-hall-item.type-restroom {
  background: #38bdf8 !important;
  border-color: #0284c7 !important;
  color: #0c4a6e !important;
}

/* Entrance — amber/gold */
.i8w-p4-shell .i8w-hall-item.type-entrance {
  background: #fbbf24 !important;
  border-color: #d97706 !important;
  border-radius: 999px 999px 16px 16px !important;
  color: #78350f !important;
}

/* Stage / Chuppah — system purple */
.i8w-p4-shell .i8w-hall-item.type-stage {
  background: #7c3aed !important;
  border-color: #5b21b6 !important;
  border-top: 5px solid #4c1d95 !important;
  border-radius: 16px 16px 10px 10px !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(109,40,217,0.30) !important;
}

/* Custom element — slate gray */
.i8w-p4-shell .i8w-hall-item.type-custom {
  background: #64748b !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GUEST PORTAL — HIGH FIDELITY MOBILE POLISH
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Background ──────────────────────────────────────────────────────────── */
.e360gp {
  background: #f2f3fa !important;
}

/* ── Panels: edge-to-edge on mobile, transparent background ─────────────── */
@media (max-width: 680px) {
  .e360gp-panels {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .e360gp-panel {
    padding: 14px 12px 32px !important;
  }
}

/* ── Panel head (top info card per tab) ──────────────────────────────────── */
.e360gp-panel-head {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  border-radius: 20px !important;
  padding: 15px 18px !important;
  margin: 0 0 18px !important;
  background: linear-gradient(135deg, #eef0ff 0%, #f3eeff 100%) !important;
  border: 1px solid rgba(99,102,241,0.10) !important;
  box-shadow: 0 2px 10px rgba(99,102,241,0.07) !important;
}

.e360gp-panel-ico {
  width: 52px !important;
  height: 52px !important;
  border-radius: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 26px !important;
  background: rgba(255,255,255,0.75) !important;
  border: 1px solid rgba(99,102,241,0.10) !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 4px rgba(99,102,241,0.08) !important;
}

.e360gp-panel-title {
  font-size: 19px !important;
  font-weight: 900 !important;
  color: #4f46e5 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  margin: 0 0 3px !important;
}

.e360gp-panel-sub {
  font-size: 12px !important;
  color: #64748b !important;
  font-weight: 500 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* ── Attendee cards (food section per guest) ─────────────────────────────── */
.e360gp-attendee {
  border-radius: 20px !important;
  border: 1px solid rgba(99,102,241,0.09) !important;
  box-shadow: 0 3px 14px rgba(99,102,241,0.08), 0 1px 3px rgba(15,23,42,0.04) !important;
  margin-bottom: 14px !important;
  overflow: hidden !important;
  background: #fff !important;
}

.e360gp-attendee:hover {
  transform: none !important;
}

.e360gp-attendee-head {
  padding: 14px 18px !important;
  background: linear-gradient(135deg, #eef0ff 0%, #f3eeff 100%) !important;
  border-bottom: 1px solid rgba(99,102,241,0.08) !important;
  gap: 10px !important;
}

.e360gp-attendee-head h4 {
  font-size: 17px !important;
  font-weight: 900 !important;
  color: #4f46e5 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

.e360gp-attendee-head label {
  font-size: 13px !important;
  color: #64748b !important;
}

.e360gp-attendee-body {
  padding: 16px 18px 18px !important;
}

.e360gp-attendee-type {
  border-radius: 10px !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  border: 1.5px solid rgba(99,102,241,0.14) !important;
  background: #fff !important;
}

/* ── Food menu ───────────────────────────────────────────────────────────── */
.e360gp-food-form {
  gap: 14px !important;
}

.e360gp-food-group {
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid rgba(99,102,241,0.09) !important;
  box-shadow: 0 3px 14px rgba(99,102,241,0.07), 0 1px 3px rgba(15,23,42,0.04) !important;
  background: #fff !important;
  margin-bottom: 0 !important;
}

.e360gp-food-group h4,
.e360gp-food-group-header {
  background: linear-gradient(135deg, #eef0ff 0%, #f3eeff 100%) !important;
  padding: 14px 18px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #4f46e5 !important;
  letter-spacing: -0.01em !important;
  border-bottom: 1px solid rgba(99,102,241,0.08) !important;
  margin: 0 !important;
}

.e360gp-food-options-wrap {
  padding: 12px 12px 14px !important;
  gap: 8px !important;
  display: grid !important;
}

.e360gp-food-option {
  border-radius: 13px !important;
  padding: 13px 15px !important;
  background: #fafbff !important;
  border: 1.5px solid rgba(99,102,241,0.09) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.03) !important;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s !important;
}

.e360gp-food-option:hover {
  border-color: rgba(99,102,241,0.22) !important;
  background: rgba(99,102,241,0.02) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.06) !important;
  transform: none !important;
}

.e360gp-food-option:has(input:checked),
.e360gp-food-option.is-selected {
  border-color: rgba(99,102,241,0.45) !important;
  background: rgba(99,102,241,0.04) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.09) !important;
}

.e360gp-food-img {
  width: 68px !important;
  height: 68px !important;
  flex: 0 0 68px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
}

.e360gp-food-note textarea {
  border-radius: 12px !important;
  border: 1.5px solid rgba(99,102,241,0.12) !important;
  font-size: 14px !important;
  padding: 12px 14px !important;
}

.e360gp-food-msg.ok {
  border-radius: 12px !important;
}

.e360gp-food-msg.err {
  border-radius: 12px !important;
}

/* ── Schedule ────────────────────────────────────────────────────────────── */
.e360gp-schedule-list {
  display: grid !important;
  gap: 10px !important;
}

.e360gp-schedule-item {
  border-radius: 16px !important;
  padding: 14px 18px !important;
  background: #fff !important;
  border: 1px solid rgba(99,102,241,0.09) !important;
  box-shadow: 0 2px 10px rgba(99,102,241,0.07), 0 1px 3px rgba(15,23,42,0.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation-delay: 0s !important;
}

.e360gp-schedule-item:hover {
  transform: translateX(-2px) !important;
}

.e360gp-schedule-time {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 7px 16px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 3px 12px rgba(99,102,241,0.28) !important;
  white-space: nowrap !important;
  min-width: 72px !important;
  text-align: center !important;
}

.e360gp-schedule-text {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.35 !important;
}

/* ── RSVP widget ─────────────────────────────────────────────────────────── */
.i8w-rsvp-widget-wrap {
  padding: 22px 16px 16px !important;
  max-width: 100% !important;
}

.i8w-rsvp-title-main {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 4px !important;
}

.i8w-rsvp-subtitle {
  font-size: 14px !important;
  color: #64748b !important;
  font-weight: 500 !important;
  margin-bottom: 22px !important;
  line-height: 1.5 !important;
}

.i8w-qty-box {
  background: #f4f5ff !important;
  border: 1.5px solid rgba(99,102,241,0.12) !important;
  border-radius: 18px !important;
  padding: 10px 12px !important;
  max-width: 220px !important;
}

.i8w-rsvp-qty-plus,
.i8w-rsvp-qty-minus {
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  background: #fff !important;
  border: 1.5px solid rgba(99,102,241,0.13) !important;
  color: #4f46e5 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(99,102,241,0.10) !important;
  transition: transform 0.1s, box-shadow 0.1s !important;
  cursor: pointer !important;
}

.i8w-rsvp-qty-plus:active,
.i8w-rsvp-qty-minus:active {
  transform: scale(0.93) !important;
  box-shadow: 0 1px 4px rgba(99,102,241,0.07) !important;
}

.i8w-qty-input {
  font-size: 30px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  width: 72px !important;
  text-align: center !important;
}

.i8w-rsvp-meals-grid {
  gap: 10px !important;
  margin-bottom: 24px !important;
}

.i8w-rsvp-meal-col {
  border-radius: 16px !important;
  border: 1.5px solid rgba(99,102,241,0.09) !important;
  background: #fff !important;
  box-shadow: 0 1px 6px rgba(99,102,241,0.05) !important;
  padding: 14px 6px 12px !important;
}

.i8w-rsvp-meal-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  text-align: center !important;
  line-height: 1.3 !important;
}

.i8w-meal-plus,
.i8w-meal-minus {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  background: rgba(99,102,241,0.06) !important;
  border: 1px solid rgba(99,102,241,0.12) !important;
  color: #4f46e5 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.i8w-special-meal {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  min-width: 32px !important;
  text-align: center !important;
}

.i8w-rsvp-buttons {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  margin-top: 10px !important;
  justify-content: center !important;
}

.i8w-rsvp-approve {
  order: -1 !important;  /* right in RTL */
  border-radius: 16px !important;
  padding: 16px 24px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 4px 18px rgba(21,128,61,0.28) !important;
  flex: 1 !important;
  text-align: center !important;
}

.i8w-rsvp-decline {
  order: 0 !important;   /* left in RTL */
  border-radius: 16px !important;
  padding: 16px 24px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 4px 18px rgba(185,28,28,0.22) !important;
  flex: 1 !important;
  text-align: center !important;
}

@media (max-width: 680px) {
  .i8w-rsvp-meals-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .i8w-rsvp-widget-wrap {
    padding: 16px 4px !important;
  }
  .i8w-rsvp-title-main {
    font-size: 20px !important;
  }
}

/* ── Navigation ──────────────────────────────────────────────────────────── */
.e360gp-nav-map {
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.10) !important;
  margin-bottom: 18px !important;
  border: 1px solid rgba(99,102,241,0.08) !important;
}

.e360gp-nav-actions {
  gap: 10px !important;
  margin-bottom: 18px !important;
}

.e360gp-nav-btn {
  border-radius: 16px !important;
  min-height: 74px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: -0.01em !important;
}

.e360gp-nav-venue-name {
  font-size: 19px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

.e360gp-nav-venue-addr {
  font-size: 13px !important;
  color: #64748b !important;
}

.e360gp-nav-rating {
  font-weight: 800 !important;
  font-size: 14px !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
}

.e360gp-photos img {
  border-radius: 12px !important;
  object-fit: cover !important;
}

/* ── Place / venue card ──────────────────────────────────────────────────── */
.e360gp-place-card {
  border-radius: 20px !important;
  border: 1px solid rgba(99,102,241,0.09) !important;
  box-shadow: 0 4px 20px rgba(99,102,241,0.08) !important;
  background: #fff !important;
}

.e360gp-place-title {
  font-size: 20px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
}

.e360gp-place-address {
  font-size: 13px !important;
  color: #64748b !important;
}

.e360gp-rating,
.e360gp-place-rating {
  font-weight: 800 !important;
  font-size: 14px !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
}

.e360gp-review {
  border-radius: 16px !important;
  border: 1px solid rgba(99,102,241,0.08) !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(99,102,241,0.05) !important;
  padding: 14px 16px !important;
}

.e360gp-btn {
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  border-radius: 999px !important;
  min-height: 48px !important;
}

/* ── Gift page (p5) amount buttons ────────────────────────────────────────── */
.i8w-p5-gift-page {
  border-radius: 20px !important;
  padding: 24px 20px !important;
  box-shadow: 0 4px 24px rgba(99,102,241,0.08) !important;
}

.i8w-p5-presets {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  margin: 14px 0 !important;
}

.i8w-p5-preset {
  border-radius: 14px !important;
  border: 1.5px solid rgba(99,102,241,0.13) !important;
  background: #fff !important;
  color: #4f46e5 !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  padding: 13px 8px !important;
  box-shadow: 0 1px 4px rgba(99,102,241,0.07) !important;
  transition: all 0.15s !important;
}

.i8w-p5-preset:hover {
  background: rgba(99,102,241,0.05) !important;
  border-color: rgba(99,102,241,0.35) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(99,102,241,0.14) !important;
}

.i8w-p5-preset.is-active,
.i8w-p5-preset.selected {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(99,102,241,0.30) !important;
}

@media (max-width: 480px) {
  .i8w-p5-presets {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .i8w-p5-gift-page {
    padding: 18px 16px !important;
    border-radius: 16px !important;
  }
}

/* ── Allergy section ─────────────────────────────────────────────────────── */
.e360gp-allergy-box {
  border-radius: 16px !important;
  border: 1px solid rgba(99,102,241,0.09) !important;
  box-shadow: 0 2px 8px rgba(99,102,241,0.05) !important;
  padding: 16px !important;
  margin: 14px 0 !important;
  background: #fff !important;
}

.e360gp-allergy-row {
  border-radius: 12px !important;
  border: 1px solid rgba(99,102,241,0.08) !important;
  padding: 12px !important;
  margin: 8px 0 !important;
}

.e360gp-allergy-assignment {
  border-radius: 10px !important;
}

.e360gp-allergy-slots label {
  border-radius: 999px !important;
  font-size: 13px !important;
}

/* ── RSVP inline messages ────────────────────────────────────────────────── */
.e360gp-rsvp-inline-msg {
  border-radius: 14px !important;
  padding: 12px 16px !important;
  font-weight: 700 !important;
  margin-top: 16px !important;
}

/* ── No-options notice ───────────────────────────────────────────────────── */
.e360gp-no-options {
  border-radius: 12px !important;
  font-size: 13px !important;
  padding: 12px !important;
}

/* ── Success / change button ─────────────────────────────────────────────── */
.e360gp-rsvp-change,
.e360gp-save-btn {
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  border-radius: 999px !important;
  min-height: 48px !important;
}

/* ── Food fixed badge ────────────────────────────────────────────────────── */
.e360gp-food-fixed {
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
.e360gp-panels::-webkit-scrollbar {
  width: 4px !important;
}
.e360gp-panels::-webkit-scrollbar-thumb {
  background: rgba(99,102,241,0.20) !important;
  border-radius: 999px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   § FIFTH-ITERATION POLISH
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Navigation: spacing between photos / phone / reviews ────────────────── */
.e360gp-photos {
  margin-bottom: 18px !important;
}
.e360gp-details {
  margin-bottom: 18px !important;
}
.e360gp-reviews-head {
  margin-top: 4px !important;
}

/* ── Food: attendee accordion ────────────────────────────────────────────── */
.e360gp-attendee {
  border: 1px solid var(--e360-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 10px !important;
}
.e360gp-attendee-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 14px 16px !important;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%) !important;
  border: none !important;
  cursor: pointer !important;
  text-align: right !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--e360-text) !important;
  line-height: 1.3 !important;
}
.e360gp-attendee-toggle-name {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.e360gp-attendee-type-label {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--e360-muted) !important;
}
.e360gp-attendee-toggle-arrow {
  font-size: 20px !important;
  font-weight: 300 !important;
  color: var(--e360-muted) !important;
  transition: transform 0.2s ease !important;
  transform: rotate(-90deg) !important;
  display: inline-block !important;
  line-height: 1 !important;
}
.e360gp-attendee.is-open .e360gp-attendee-toggle-arrow {
  transform: rotate(90deg) !important;
}
.e360gp-attendee-body {
  display: none !important;
  padding: 14px 16px !important;
  border-top: 1px solid var(--e360-border) !important;
}
.e360gp-attendee.is-open .e360gp-attendee-body {
  display: block !important;
}
/* Keep the old head (type select) inside the body */
.e360gp-attendee-body .e360gp-attendee-head {
  margin-bottom: 14px !important;
}

/* ── RSVP: remove h2 title spacing, enlarge guest name, center labels ─────── */
.i8w-rsvp-subtitle {
  font-size: 22px !important;
  font-weight: 700 !important;
  text-align: center !important;
  color: var(--e360-text, #1e293b) !important;
  margin-bottom: 24px !important;
  margin-top: 0 !important;
}
.i8w-rsvp-section-title {
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--e360-muted, #64748b) !important;
  margin-bottom: 12px !important;
}
.i8w-rsvp-section-title--meals {
  margin-top: 34px !important;
}

/* ── RSVP: qty box controls ──────────────────────────────────────────────── */
.i8w-qty-box {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  direction: rtl !important;
}
.i8w-rsvp-qty-plus,
.i8w-rsvp-qty-minus,
.i8w-meal-plus,
.i8w-meal-minus {
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  font-weight: bold !important;
  border: 1.5px solid var(--e360-border, #e2e8f0) !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--e360-primary, #1e40af) !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  transition: background 0.15s, border-color 0.15s !important;
}
.i8w-rsvp-qty-plus:hover,
.i8w-rsvp-qty-minus:hover,
.i8w-meal-plus:hover,
.i8w-meal-minus:hover {
  background: var(--e360-primary, #1e40af) !important;
  border-color: var(--e360-primary, #1e40af) !important;
  color: #fff !important;
}
.i8w-qty-input,
.i8w-special-meal {
  width: 48px !important;
  text-align: center !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  border: none !important;
  border-bottom: 2px solid #cfe2da !important;
  background: transparent !important;
  color: #2c3e50 !important;
  padding: 2px 6px !important;
  margin: 0 !important;
}

/* ── RSVP: meals grid ────────────────────────────────────────────────────── */
.i8w-rsvp-meals-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(80px, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
  text-align: center !important;
  margin-top: 18px !important;
}
@media (max-width: 500px) {
  .i8w-rsvp-meals-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 12px !important;
  }
}
.i8w-rsvp-meal-label {
  font-weight: 700 !important;
  font-size: 14px !important;
  margin-bottom: 10px !important;
  color: var(--e360-text, #1e293b) !important;
}
.i8w-meal-stepper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  direction: rtl !important;
}

/* ── RSVP: action buttons ────────────────────────────────────────────────── */
.i8w-rsvp-buttons {
  display: flex !important;
  gap: 16px !important;
  justify-content: center !important;
  margin-top: 34px !important;
}
.i8w-rsvp-decline {
  background: #cc2b0c !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px 28px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-family: inherit !important;
}
.i8w-rsvp-approve {
  background: #19bf18 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px 28px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-family: inherit !important;
}
.i8w-p3ib-status {
  margin-top: 14px !important;
  text-align: center !important;
}

/* ── Gift: pill title ────────────────────────────────────────────────────── */
.i8w-p5-gift-title {
  display: inline-block !important;
  background: var(--e360-gradient, linear-gradient(135deg, #1e40af 0%, #4f46e5 50%, #7c3aed 100%)) !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  padding: 8px 22px !important;
  border-radius: 999px !important;
  margin-bottom: 14px !important;
  letter-spacing: 0.01em !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   § SIXTH-ITERATION POLISH
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Remove top padding from .e360gp so purple header is flush at top ─────── */
.e360gp {
  padding-top: 0 !important;
}
/* Remove WordPress page content top padding/margin that creates the white gap */
body .entry-content:has(.e360gp),
body .page-content:has(.e360gp),
body .wp-block-post-content:has(.e360gp),
body .site-content:has(.e360gp) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* Also zero out any direct parent padding above .e360gp */
.entry-content > .e360gp,
.page-content > .e360gp,
.wp-block-post-content > .e360gp,
.site-content > .e360gp {
  margin-top: 0 !important;
}
/* Remove header border-radius now that it's flush at top */
.e360gp-header {
  border-radius: 0 !important;
}

/* ── Navigation: expand white card area with more breathing room ─────────── */
.e360gp-place-card {
  padding: 20px !important;
}
.e360gp-nav-venue-card {
  padding: 14px 16px !important;
}
.e360gp-details {
  padding: 14px 16px !important;
  margin-bottom: 20px !important;
}
.e360gp-photos {
  margin-bottom: 20px !important;
}
.e360gp-reviews-head {
  margin-top: 4px !important;
  margin-bottom: 12px !important;
  padding: 0 4px !important;
}
.e360gp-review {
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
}

/* ── Reduce gap between panel-head card and content (RSVP / Gift) ────────── */
.e360gp-panel-head {
  margin-bottom: 14px !important;
}
@media (max-width: 680px) {
  .e360gp-panel {
    padding-top: 14px !important;
  }
}

/* ── Header: event info + countdown on right, site name on left ───────────── */
.e360gp-header-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
.e360gp-header-countdown {
  display: inline-block !important;
  background: rgba(255,255,255,0.22) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  letter-spacing: 0.01em !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   § MOBILE-ONLY POLISH  (max-width: 680px)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 680px) {

  /* ── Schedule: full-width, more breathing room ────────────────────────── */
  .e360gp-schedule {
    padding: 0 !important;
  }
  .e360gp-schedule-list {
    padding: 0 !important;
  }
  .e360gp-schedule-item {
    padding: 14px 14px !important;
    margin-bottom: 8px !important;
  }

  /* ── Food: full-width, more space between food items ─────────────────── */
  .e360gp-food-menu {
    padding: 0 !important;
  }
  .e360gp-food-form {
    padding: 0 !important;
  }
  .e360gp-food-group {
    margin-bottom: 18px !important;
  }
  .e360gp-food-option {
    padding: 12px 12px !important;
    margin-bottom: 10px !important;
  }
  /* Hide "מוצג לכולם" badge only — keep "בחרו X" badges */
  .e360gp-food-group[data-choice-mode="fixed"] .e360gp-food-fixed {
    display: none !important;
  }

  /* ── RSVP: elegant qty controls ──────────────────────────────────────── */
  .i8w-qty-box {
    gap: 10px !important;
  }
  .i8w-rsvp-qty-plus,
  .i8w-rsvp-qty-minus,
  .i8w-meal-plus,
  .i8w-meal-minus {
    width: 40px !important;
    height: 40px !important;
    font-size: 24px !important;
    border-radius: 50% !important;
  }
  .i8w-qty-input {
    font-size: 22px !important;
    width: 56px !important;
  }

  /* ── RSVP: approve/decline buttons — side by side, approve RIGHT ─────── */
  .i8w-rsvp-buttons {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    justify-content: center !important;
  }
  .i8w-rsvp-approve {
    order: -1 !important;   /* right in RTL flex row */
    flex: 1 !important;
    font-size: 17px !important;
    padding: 14px 10px !important;
  }
  .i8w-rsvp-decline {
    order: 0 !important;    /* left in RTL flex row */
    flex: 1 !important;
    font-size: 17px !important;
    padding: 14px 10px !important;
  }

  /* ── Meal stepper spacing ─────────────────────────────────────────────── */
  .i8w-meal-stepper {
    gap: 8px !important;
  }
  .i8w-special-meal {
    font-size: 20px !important;
    width: 44px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   § DEFINITIVE OVERRIDES — loaded last, wins over all previous rules
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Header: name + countdown on same line ───────────────────────────────── */
.e360gp-header-info {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
.e360gp-header-title {
  display: inline !important;
  white-space: normal !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.4 !important;
}
.e360gp-header-sep {
  color: rgba(255,255,255,0.6) !important;
  font-weight: 400 !important;
}
.e360gp-header-countdown {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.88) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: inline !important;
}

/* ── RSVP buttons: always side-by-side, approve right / decline left ─────── */
.i8w-rsvp-buttons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  justify-content: center !important;
  margin-top: 28px !important;
}
.i8w-rsvp-approve {
  order: -1 !important;
  flex: 1 !important;
}
.i8w-rsvp-decline {
  order: 0 !important;
  flex: 1 !important;
}

/* ── Food attendee toggle: full width, prominent ─────────────────────────── */
.e360gp-attendee {
  width: 100% !important;
  display: block !important;
}
.e360gp-attendee-toggle {
  width: 100% !important;
  display: flex !important;
  padding: 16px 18px !important;
  font-size: 16px !important;
}

/* ── Schedule: full width items ──────────────────────────────────────────── */
.e360gp-schedule {
  width: 100% !important;
}
.e360gp-schedule-list {
  width: 100% !important;
}
.e360gp-schedule-item {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── Mobile: same rules with no max-width constraints ────────────────────── */
@media (max-width: 680px) {
  .e360gp-food-menu {
    max-width: none !important;
    padding: 0 !important;
  }
  .e360gp-food-form {
    width: 100% !important;
  }
  .e360gp-attendee {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .e360gp-schedule-item {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* EVENT360 final targeted fix: center schedule rows inside mobile card without changing layout logic */
@media (max-width: 820px) {
  .e360gp-schedule-form .e360gp-sch-list,
  .e360gp-schedule-form .e360gp-sch-add-area {
    width: auto !important;
    max-width: none !important;
    margin-left: 22px !important;
    margin-right: 22px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .e360gp-schedule-form .e360gp-sch-item-card,
  .e360gp-schedule-form .e360gp-sch-add-row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
  }
}

@media (max-width: 480px) {
  .e360gp-schedule-form .e360gp-sch-list,
  .e360gp-schedule-form .e360gp-sch-add-area {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
}

/* EVENT360 final precision fix: center the new schedule row/add form on mobile only */
@media (max-width: 820px) {
  .e360gp-schedule-form .e360gp-sch-add-area {
    display: block !important;
    width: calc(100% - 44px) !important;
    max-width: calc(100% - 44px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .e360gp-schedule-form .e360gp-sch-add-row {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    transform: none !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    overflow: visible !important;
  }

  .e360gp-schedule-form .e360gp-sch-add-row > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  .e360gp-schedule-form .e360gp-sch-add-area {
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
  }
}

/* EVENT360 targeted fix: keep add-row closed by default and center mobile time field inside frame */
@media (max-width: 820px) {
  .e360gp-schedule-form .e360gp-sch-add-row[style*="display:none"],
  .e360gp-schedule-form .e360gp-sch-add-row[style*="display: none"] {
    display: none !important;
  }

  .e360gp-schedule-form .e360gp-sch-add-row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .e360gp-schedule-form .e360gp-sch-time-in,
  .e360gp-schedule-form .e360gp-sch-text-in,
  .e360gp-schedule-form .e360gp-sch-add-btns {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* EVENT360 mobile schedule add-row overflow fix - 2026-05-24
   Scope: only the opened "הוסף שורה" area in the schedule tab on mobile. */
@media (max-width: 820px) {
  .e360gp-schedule-form .e360gp-sch-add-row[style*="display:none"],
  .e360gp-schedule-form .e360gp-sch-add-row[style*="display: none"] {
    display: none !important;
  }

  .e360gp-schedule-form .e360gp-sch-add-area {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .e360gp-schedule-form .e360gp-sch-add-row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    align-items: stretch !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    overflow: visible !important;
  }

  .e360gp-schedule-form .e360gp-sch-time-in,
  .e360gp-schedule-form .e360gp-sch-text-in,
  .e360gp-schedule-form .e360gp-sch-add-btns {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .e360gp-schedule-form .e360gp-sch-add-btns {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
  }

  .e360gp-schedule-form .e360gp-sch-confirm-btn,
  .e360gp-schedule-form .e360gp-sch-cancel-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  .e360gp-schedule-form .e360gp-sch-add-area {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* EVENT360 precision fix: prevent the mobile schedule new-row time input from being clipped */
@media (max-width: 820px) {
  .e360gp-schedule-form .e360gp-sch-add-row .e360gp-sch-time-in,
  .e360gp-schedule-form input.e360gp-sch-time-in[type="time"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    line-height: 48px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    direction: ltr !important;
    text-align: center !important;
    text-indent: 0 !important;
    overflow: visible !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }
}


/* =====================================================================
   EVENT360 FINAL FIX - Guest invitation page tab-to-header spacing
   Requested: the gap between the tab bar and the purple section header
   must match the gap between the purple section header and the first
   content card below it. Spacing only; no logic/design changes.
   ===================================================================== */
.e360gp .e360gp-tabs {
  margin-bottom: 0 !important;
}
.e360gp .e360gp-panel {
  padding-top: 0 !important;
}
.e360gp .e360gp-panel.is-active > .e360gp-panel-head {
  margin: 26px 18px 0 !important;
}
.e360gp .e360gp-panel.is-active > .e360gp-panel-body {
  padding-top: 26px !important;
}
.e360gp .e360gp-panel.is-active > .e360gp-panel-body > *:first-child {
  margin-top: 0 !important;
}

@media (max-width: 680px) {
  .e360gp .e360gp-panel {
    padding: 0 12px 32px !important;
  }
  .e360gp .e360gp-panel.is-active > .e360gp-panel-head {
    margin: 18px 12px 0 !important;
  }
  .e360gp .e360gp-panel.is-active > .e360gp-panel-body {
    padding: 18px 12px 12px !important;
  }
  .e360gp .e360gp-panel.is-active > .e360gp-panel-body > *:first-child {
    margin-top: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   § THEME-INDEPENDENCE FONT LOCK   (additive · defensive · intentionally NO !important)
   ────────────────────────────────────────────────────────────────────────────
   Purpose: keep the EVENT360 system font ('Rubik') in place on the personal-area
   shell regardless of the active site theme, so a FUTURE theme swap cannot let a
   generic element style (e.g. theme `button{}`/`input{}`) override EVENT360 type.

   Why this is safe and visually inert on the CURRENT site:
     • Additive only — it does not modify or remove any existing rule above.
     • Deliberately WITHOUT !important — therefore it can never win against any
       rule the current theme already applies, so nothing the active theme does
       today changes. Everywhere else under .i8w-wrap already renders 'Rubik',
       so re-stating it produces no visible change.
     • Re-states the exact same font stack already used across the system.
     • Does not reach <iframe> content (invitation preview) or print windows
       (separate documents), and changes no color/size/spacing/layout/behavior.
   ════════════════════════════════════════════════════════════════════════════ */
html body .i8w-wrap,
html body .i8w-wrap * {
  font-family: 'Rubik', Arial, sans-serif;
}



/* EVENT360 final VAT checkbox alignment: checkbox + text in one row, text centered to checkbox height */
.p6-vat-box .p6-vat-check,
.event360-app .p6-vat-box .p6-vat-check,
.p6-budget-wrap .p6-vat-box .p6-vat-check {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}
.p6-vat-box .p6-vat-check input[type="checkbox"],
.p6-vat-box .p6-vat-check .p6-vat-checkbox-input,
.event360-app .p6-vat-box .p6-vat-check input[type="checkbox"],
.p6-budget-wrap .p6-vat-box .p6-vat-check input[type="checkbox"] {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  flex: 0 0 22px !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  position: relative !important;
  top: 0 !important;
}
.p6-vat-box .p6-vat-check .p6-vat-check-text,
.event360-app .p6-vat-box .p6-vat-check .p6-vat-check-text,
.p6-budget-wrap .p6-vat-box .p6-vat-check .p6-vat-check-text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 22px !important;
  line-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  transform: none !important;
  position: relative !important;
  top: 0 !important;
}
@media (max-width: 768px) {
  .p6-vat-box .p6-vat-check,
  .event360-app .p6-vat-box .p6-vat-check,
  .p6-budget-wrap .p6-vat-box .p6-vat-check {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !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;
  }
}