.i8w-p3ib-builder,.i8w-p3ib-guest{direction:rtl;font-family:inherit}
.i8w-p3ib-steps-nav{display:flex;gap:10px;margin:0 0 20px}
.i8w-p3ib-steps-nav>div{padding:10px 14px;border:1px solid #ddd;border-radius:12px;background:#fff}
.i8w-p3ib-steps-nav>div.is-active{background:#111;color:#fff;border-color:#111}
.i8w-p3ib-step{display:none;background:#fff;padding:18px;border:1px solid #e5e5e5;border-radius:18px}
.i8w-p3ib-step.is-active{display:block}
.i8w-p3ib-design-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:18px}
.i8w-p3ib-design-card{border:1px solid #ddd;background:#fff;padding:12px;border-radius:14px;cursor:default;display:flex;flex-direction:column;gap:12px;align-items:stretch}
.i8w-p3ib-design-image-wrap{width:100%;aspect-ratio:2/3;background:#fafafa;border:1px dashed #ddd;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.i8w-p3ib-design-card img{width:100%;height:100%;object-fit:contain;border-radius:10px;display:block}
.i8w-p3ib-choose-design{width:100%;text-align:center}
.i8w-p3ib-design-card.is-active{outline:3px solid #111}
.i8w-p3ib-upload-box{margin:14px 0}
.i8w-p3ib-actions{margin-top:18px;display:flex;gap:10px}
.i8w-p3ib-selected-design{margin-bottom:18px}
.i8w-p3ib-topdesign img{max-width:420px;width:100%;border-radius:18px;display:block;margin:0 auto;box-shadow:0 8px 28px rgba(0,0,0,.08)}
.i8w-p3ib-editor-shell,.i8w-p3ib-final-preview{background:#fff;border:1px solid #ececec;border-radius:22px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.i8w-p3ib-editor-note{font-size:14px;color:#666;margin-bottom:14px}
.i8w-p3ib-editable{min-height:320px}
.i8w-p3ib-editable .i8w-editable-text{cursor:text}
.i8w-p3ib-editable .i8w-editable-text:focus{outline:2px dashed #999;outline-offset:2px}
.i8w-p3ib-status{margin-top:14px;padding:10px 12px;border-radius:12px;display:none}
.i8w-p3ib-status.ok{display:block;background:#eaf9ef;color:#10623a}
.i8w-p3ib-status.err{display:block;background:#fdecec;color:#991b1b}
.i8w-p3ib-msg{padding:14px;border:1px solid #ddd;border-radius:14px;background:#fff}
.i8w-p3ib-rsvp-box{margin-top:20px;background:#fff;border:1px solid #e5e5e5;border-radius:18px;padding:18px}
.i8w-rsvp-line,.i8w-rsvp-meals>div{margin-bottom:12px}
.i8w-counter{display:flex;align-items:center;gap:8px}
.i8w-counter button{width:36px;height:36px;border:none;border-radius:10px;background:#111;color:#fff}
.i8w-counter input,.i8w-rsvp-meals input{width:90px;padding:8px;border:1px solid #ddd;border-radius:10px}
.i8w-rsvp-actions{display:flex;gap:10px}
@media (max-width: 900px){
  .i8w-p3ib-design-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.i8w-p3ib-live-layout{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:22px;align-items:start}
.i8w-p3ib-fields-panel{background:#fafafa;border:1px solid #ececec;border-radius:20px;padding:14px;position:sticky;top:20px;max-height:78vh;overflow:auto}
.i8w-p3ib-fields-list{display:flex;flex-direction:column;gap:12px}
.i8w-p3ib-field-row{display:block}
.i8w-p3ib-field-input{width:100%;min-height:72px;border:1px solid #dcdcdc;border-radius:14px;padding:12px 14px;font:inherit;resize:vertical;background:#fff;box-sizing:border-box}
.i8w-p3ib-preview-panel{min-width:0;background:#fff;border:1px solid #ececec;border-radius:20px;padding:18px}
.i8w-p3ib-editable .i8w-editable-text{display:inline;white-space:pre-wrap}
@media (max-width: 900px){
  .i8w-p3ib-live-layout{grid-template-columns:1fr}
  .i8w-p3ib-fields-panel{position:static;max-height:none;order:2}
  .i8w-p3ib-preview-panel{order:1}
}

.i8w-selected-event-design img{max-width:100%;height:auto;border-radius:18px;display:block;margin:0 auto;box-shadow:0 8px 28px rgba(0,0,0,.08)}
.i8w-qty-change-box{display:none;margin:10px 0 14px;padding:12px 14px;border:1px solid #ead7a4;background:#fff9e8;border-radius:14px;color:#6b4e00}
.i8w-qty-change-box.is-visible{display:block}
.i8w-guest-qty-change-box{margin:10px 0 14px;padding:12px 14px;border:1px solid #ead7a4;background:#fff9e8;border-radius:14px;color:#6b4e00}

.i8w-p3ib-lock-note{margin:0 0 16px;padding:14px 16px;background:#fff8e6;border:1px solid #f1d58a;border-radius:14px;font-weight:600;color:#6f5312}
.i8w-p3ib-final-design img,.i8w-p3ib-selected-design img{max-width:100%;height:auto;display:block;margin:0 auto 16px;border-radius:16px}.i8w-p3ib-design-card.is-disabled{pointer-events:none;opacity:.6}


/* RSVP visual widget */
.i8w-rsvp-visual-widget{max-width:980px;margin:0 auto;padding:10px 16px 22px;background:#f3f3f3;border-radius:0;text-align:center;direction:rtl}
.i8w-rsvp-visual-subtitle{font-size:28px;font-weight:800;color:#2146d0;line-height:1.1;margin:0 0 6px}
.i8w-rsvp-visual-block{margin:18px auto 0}
.i8w-rsvp-visual-title{font-size:28px;font-weight:800;color:#000;margin:0 0 16px}
.i8w-rsvp-visual-widget .i8w-qty-box,.i8w-rsvp-visual-widget .i8w-meal-stepper{display:flex;justify-content:center;align-items:center;gap:12px;direction:rtl}
.i8w-rsvp-visual-widget .i8w-rsvp-qty-plus,.i8w-rsvp-visual-widget .i8w-rsvp-qty-minus,.i8w-rsvp-visual-widget .i8w-meal-plus,.i8w-rsvp-visual-widget .i8w-meal-minus{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;border:none;background:none;color:#4a5a66;cursor:pointer;padding:0;margin:0;line-height:1}
.i8w-rsvp-visual-widget #guestQty,.i8w-rsvp-visual-widget .i8w-special-meal{width:40px;text-align:center;font-size:18px;border:none;border-bottom:2px solid #cfe2da;background:transparent;color:#2c3e50;padding:2px 6px;margin:0;border-radius:0;box-shadow:none}
.i8w-rsvp-meals-grid{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:28px;align-items:start;max-width:1100px;margin:0 auto}
.i8w-rsvp-meal-col{display:flex;flex-direction:column;align-items:center;gap:10px}
.i8w-rsvp-meal-label{font-size:22px;font-weight:800;color:#000;min-height:58px;display:flex;align-items:flex-end;justify-content:center}
.i8w-rsvp-visual-actions{display:flex;justify-content:center;gap:20px;margin-top:26px;flex-wrap:wrap}
.i8w-rsvp-btn{min-width:194px;height:58px;border:none;border-radius:4px;font-size:28px;font-weight:800;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0 22px}
.i8w-rsvp-btn-no{background:#c92b0d}
.i8w-rsvp-btn-yes{background:#15b61f}
.i8w-rsvp-btn.is-active{outline:3px solid #111827;outline-offset:1px}
.i8w-rsvp-visual-status{margin-top:14px;font-size:15px;font-weight:700;min-height:22px}
.i8w-rsvp-visual-status.ok{color:#15803d}.i8w-rsvp-visual-status.err{color:#b91c1c}
@media (max-width: 767px){
  .i8w-rsvp-visual-widget{padding:8px 12px 18px}
  .i8w-rsvp-visual-subtitle{font-size:18px}
  .i8w-rsvp-visual-title{font-size:18px;margin-bottom:10px}
  .i8w-rsvp-meals-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .i8w-rsvp-meal-col{gap:4px}
  .i8w-rsvp-meal-label{font-size:16px;min-height:0}
  .i8w-rsvp-visual-actions{gap:10px;margin-top:18px}
  .i8w-rsvp-btn{min-width:140px;height:46px;font-size:22px}
}

.i8w-p3ib-template-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:140px;
  width:100%;
  background:#f3f4f6;
  color:#374151;
  font-weight:700;
  border-radius:12px;
}


/* v1.8.27: Templated smooth mode */
.i8w-p3ib-hidden-page-source{
  display:none !important;
}
.i8w-p3ib-builder.i8w-p3ib-templated-mode #i8w-p3ib-editable{
  display:none !important;
}
.i8w-p3ib-rendering img{
  opacity:.72;
  transition:opacity .18s ease;
}
.i8w-p3ib-topdesign img,
.i8w-selected-event-design-shortcode img{
  transition:opacity .18s ease;
}

/* v1.8.28: step 2 design-only, step 3 full guest page */
.i8w-p3ib-design-only-panel{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:320px;
}
.i8w-p3ib-design-only-panel .i8w-p3ib-selected-design{
  width:100%;
  margin-bottom:0;
}
.i8w-p3ib-final-preview .i8w-p3ib-final-html{
  display:block;
}

/* v1.8.43: uploaded custom design has no editable text */
.i8w-p3ib-uploaded-design-message{
  padding:16px 18px;
  border:1px solid #f1d58a;
  background:#fff8e6;
  border-radius:14px;
  color:#6f5312;
  font-weight:700;
  text-align:center;
}
.i8w-p3ib-builder.i8w-p3ib-uploaded-design-mode .i8w-p3ib-fields-panel{
  position:static;
}


/* v1.8.44: owner design picker popup + compact editor */
.i8w-p3ib-design-image-wrap{cursor:zoom-in}
.i8w-p3ib-design-modal{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:999999;display:none;align-items:center;justify-content:center;padding:28px;box-sizing:border-box}
.i8w-p3ib-design-modal.is-open{display:flex}
.i8w-p3ib-design-modal img{max-width:96vw;max-height:94vh;width:auto;height:auto;object-fit:contain;border-radius:18px;background:#fff;box-shadow:0 18px 60px rgba(0,0,0,.35)}
.i8w-p3ib-design-modal-close{position:absolute;top:16px;left:16px;width:44px;height:44px;border:0;border-radius:999px;background:#fff;color:#111;font-size:30px;line-height:1;cursor:pointer}
.i8w-p3ib-live-layout{grid-template-columns:minmax(0,1fr) minmax(280px,420px);align-items:start}
.i8w-p3ib-preview-panel{min-height:auto}
.i8w-p3ib-selected-design{height:auto}
.i8w-p3ib-selected-design .i8w-p3ib-topdesign{display:flex;align-items:center;justify-content:center}
.i8w-p3ib-fields-panel{position:static;max-height:640px;overflow:auto;align-self:stretch}
.i8w-p3ib-fields-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.i8w-p3ib-field-input{min-height:86px;resize:vertical}
.i8w-p3ib-templated-field-row label{min-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width: 1200px){
  .i8w-p3ib-fields-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width: 900px){
  .i8w-p3ib-fields-list{grid-template-columns:1fr}
  .i8w-p3ib-fields-panel{max-height:none}
  .i8w-p3ib-design-modal{padding:16px}
}

/* v1.8.45: owner editor 80/20 layout with sticky design and scrolling text panel */
.i8w-p3ib-live-layout{
  display:grid;
  grid-template-columns:minmax(220px,20%) minmax(0,80%);
  gap:22px;
  align-items:start;
  direction:rtl;
}
.i8w-p3ib-fields-panel{
  position:relative;
  top:auto;
  max-height:calc(100vh - 240px);
  overflow-y:auto;
  overflow-x:hidden;
  align-self:start;
}
.i8w-p3ib-fields-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.i8w-p3ib-preview-panel{
  position:sticky;
  top:18px;
  min-width:0;
  align-self:start;
}
.i8w-p3ib-design-only-panel{
  min-height:0;
}
.i8w-p3ib-selected-design,
.i8w-p3ib-selected-design .i8w-p3ib-topdesign{
  width:100%;
}
.i8w-p3ib-topdesign img,
.i8w-p3ib-selected-design img{
  max-width:100%;
  max-height:calc(100vh - 260px);
  width:auto;
  height:auto;
  object-fit:contain;
}
.i8w-p3ib-field-input{
  min-height:86px;
  width:100%;
  resize:vertical;
}
@media (max-width: 900px){
  .i8w-p3ib-live-layout{
    grid-template-columns:1fr;
  }
  .i8w-p3ib-preview-panel{
    position:static;
    order:1;
  }
  .i8w-p3ib-fields-panel{
    order:2;
    max-height:none;
  }
  .i8w-p3ib-topdesign img,
  .i8w-p3ib-selected-design img{
    max-height:none;
  }
}


/* v1.8.46: owner editor fit design size, compact text boxes, no black active outline */
.i8w-p3ib-design-card.is-active,
.i8w-p3ib-design-card:hover,
.i8w-p3ib-design-card:focus,
.i8w-p3ib-design-card:focus-within{
  outline:none !important;
  box-shadow:none !important;
}
.i8w-p3ib-editor-note{display:none !important;}
.i8w-p3ib-editor-shell{
  max-width:980px;
  margin:0 auto;
  padding:14px;
}
.i8w-p3ib-live-layout{
  grid-template-columns:minmax(170px,220px) minmax(0,1fr) !important;
  gap:16px !important;
  align-items:start !important;
}
.i8w-p3ib-preview-panel{
  width:auto !important;
  max-width:640px !important;
  justify-self:center !important;
  padding:12px !important;
  min-height:0 !important;
}
.i8w-p3ib-selected-design,
.i8w-p3ib-selected-design .i8w-p3ib-topdesign{
  width:auto !important;
  max-width:100% !important;
}
.i8w-p3ib-topdesign img,
.i8w-p3ib-selected-design img{
  max-width:100% !important;
  max-height:620px !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
}
.i8w-p3ib-fields-panel{
  max-height:620px !important;
  padding:10px !important;
}
.i8w-p3ib-fields-list{
  gap:8px !important;
}
.i8w-p3ib-field-input{
  min-height:54px !important;
  max-height:120px;
  padding:8px 10px !important;
  border-radius:10px !important;
  resize:vertical;
}
.i8w-p3ib-templated-field-row label{
  font-size:12px;
  margin-bottom:4px;
  display:block;
  text-align:center;
}
@media (max-width:900px){
  .i8w-p3ib-editor-shell{max-width:100%;}
  .i8w-p3ib-live-layout{grid-template-columns:1fr !important;}
  .i8w-p3ib-preview-panel{max-width:100% !important;}
  .i8w-p3ib-fields-panel{max-height:none !important;}
  .i8w-p3ib-topdesign img,
  .i8w-p3ib-selected-design img{max-height:none !important;}
  /* Full-width fields on mobile: strip horizontal padding from the shell */
  .i8w-p3ib-editor-shell{padding-left:0 !important;padding-right:0 !important;}
  .i8w-p3ib-fields-panel{border-radius:0 !important;}
  /* Center field labels and their text content.
     High-specificity selectors to beat WP/theme RTL rules like `.rtl textarea`. */
  .i8w-p3ib-templated-field-row label{text-align:center !important;display:block !important;}
  .i8w-p3ib-builder textarea.i8w-p3ib-field-input,
  .i8w-p3ib-fields-panel textarea.i8w-p3ib-field-input,
  .i8w-p3ib-field-input,
  textarea.i8w-p3ib-field-input{
    text-align:center !important;
    direction:rtl !important;
  }
  /* Field box: full width with equal left/right margin inside the panel */
  .i8w-p3ib-fields-panel{padding-left:12px !important;padding-right:12px !important;}
  .i8w-p3ib-field-row{width:100% !important;margin-left:0 !important;margin-right:0 !important;}
  .i8w-p3ib-field-input{width:100% !important;box-sizing:border-box !important;}
}

/* v1.8.48: compact centered invitation + RSVP preview under final invitation */
.i8w-p3ib-final-preview{text-align:center;}
.i8w-p3ib-topdesign,
.i8w-selected-event-design-shortcode,
#i8w-p3ib-top-image-holder{
  width:100%;
  max-width:460px;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center;
}
.i8w-p3ib-topdesign img,
.i8w-selected-event-design-shortcode img,
#i8w-p3ib-top-image-holder img,
.i8w-p3ib-final-design img,
.i8w-p3ib-selected-design img{
  width:auto !important;
  max-width:min(460px, 92vw) !important;
  max-height:680px;
  object-fit:contain;
  display:block;
  margin-left:auto !important;
  margin-right:auto !important;
}
.i8w-p3ib-final-rsvp-preview{
  margin:22px auto 0;
  max-width:980px;
  direction:rtl;
  text-align:center;
}
.i8w-p3ib-final-rsvp-title{
  font-weight:800;
  font-size:18px;
  margin:0 auto 10px;
  color:#111827;
}
.i8w-p3ib-preview-rsvp{margin-top:0 !important;}
@media (max-width:700px){
  .i8w-p3ib-topdesign,
  .i8w-selected-event-design-shortcode,
  #i8w-p3ib-top-image-holder{max-width:92vw;}
  .i8w-p3ib-topdesign img,
  .i8w-selected-event-design-shortcode img,
  #i8w-p3ib-top-image-holder img,
  .i8w-p3ib-final-design img,
  .i8w-p3ib-selected-design img{max-width:92vw !important;max-height:none;}
}
/* v1.8.49: hide external guest greeting in final preview; RSVP widget already shows its own title/name */
.i8w-p3ib-final-rsvp-preview > .i8w-p3ib-final-rsvp-title,
.i8w-p3ib-final-rsvp-preview .i8w-p3ib-msg{display:none !important;}

/* v1.8.50: hide page runtime guest shortcodes inside the final invitation HTML preview.
   The final preview has its own separate RSVP demo below, so this prevents duplicate
   "היי" / "המוזמן לא נמצא" text from the source guest page from showing there. */
.i8w-p3ib-final-html .i8w-p3ib-runtime-shortcodes,
.i8w-p3ib-final-preview #i8w-p3ib-final-html .i8w-p3ib-runtime-shortcodes,
.i8w-p3ib-final-preview #i8w-p3ib-final-html .i8w-p3ib-msg{
  display:none !important;
}

.i8w-rsvp-subtitle{font-weight:600;text-align:center;margin:6px 0 16px;}


/* v1.8.54: final invitation step = design image only. No tabs, RSVP, gifts, buttons or page content under it. */
.i8w-p3ib-final-design-only #i8w-p3ib-final-html,
.i8w-p3ib-final-design-only .i8w-p3ib-final-rsvp-preview,
.i8w-p3ib-final-preview #i8w-p3ib-final-html > * {
  display: none !important;
}
.i8w-p3ib-final-design-only #i8w-p3ib-final-design {
  display: block !important;
}
.i8w-p3ib-final-design-only #i8w-p3ib-final-design img {
  display: block !important;
  margin: 0 auto !important;
}


/* ── v1.8.60: Redesigned builder UI — card style matching reminder header ── */

/* 1. Builder uses .i8w-card (shared) for border/radius/shadow.
      Only override direction & font since the shared class doesn't set those. */
.i8w-p3ib-builder {
  font-family: 'Rubik', Arial, sans-serif;
  margin-bottom: 20px;
}

/* 2. Header uses .i8w-head + .i8w-eil-head (shared). Only force RTL. */
.i8w-p3ib-card-head {
  direction: rtl;
}

/* 3. Steps nav — centered pill progress indicator */
.i8w-p3ib-steps-nav {
  display: flex !important;
  justify-content: center !important;
  gap: 20px !important;
  padding: 14px 22px !important;
  margin: 0 !important;
  background: #fafbff;
  border-bottom: 1px solid rgba(99,102,241,0.08);
  flex-wrap: wrap;
  align-items: center;
}
.i8w-p3ib-steps-nav > div {
  padding: 8px 20px !important;
  border: 1.5px solid rgba(99,102,241,0.25) !important;
  border-radius: 20px !important;
  background: #fff !important;
  color: #94a3b8 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.i8w-p3ib-steps-nav > div.is-active {
  background: #7c3aed !important;
  color: #fff !important;
  border-color: #7c3aed !important;
}

/* Header description line */
.i8w-p3ib-head-desc {
  margin: 6px 0 0;
  font-size: 13px;
  color: #6366f1;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.01em;
}

/* 4. Steps: clear card frame with indigo tint, generous separation from nav */
.i8w-p3ib-step {
  display: none;
  background: rgba(99,102,241,0.03) !important;
  border: 1px solid rgba(99,102,241,0.20) !important;
  border-radius: 18px !important;
  padding: 28px 30px !important;
  margin: 18px 22px 22px !important;
  box-shadow: 0 2px 12px rgba(99,102,241,0.06) !important;
}
.i8w-p3ib-step.is-active { display: block; }

/* 5. Step intro description block */
.i8w-p3ib-step-intro {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(99,102,241,0.04);
  border: 1px solid rgba(99,102,241,0.12);
  border-radius: 16px;
  margin-bottom: 22px;
  direction: rtl;
}
.i8w-p3ib-step-intro-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.i8w-p3ib-step-intro-title {
  font-size: 15px;
  font-weight: 700;
  color: #4c1d95;
  margin-bottom: 4px;
}
.i8w-p3ib-step-intro-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.55;
  margin: 0;
}

/* 6. Design cards — refined hover & active selection */
.i8w-p3ib-design-card {
  border: 2px solid #e2e8f0 !important;
  border-radius: 16px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.i8w-p3ib-design-card:hover {
  border-color: rgba(124,58,237,0.4) !important;
  box-shadow: 0 6px 20px rgba(99,102,241,0.14) !important;
  transform: translateY(-3px);
}
.i8w-p3ib-design-card.is-active {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 4px rgba(124,58,237,0.15), 0 6px 20px rgba(99,102,241,0.14) !important;
}

/* 7. Choose design button — indigo filled */
.i8w-p3ib-choose-design.button,
.i8w-p3ib-choose-design {
  background: #6366f1 !important;
  color: #fff !important;
  border-color: #6366f1 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: background 0.18s ease !important;
}
.i8w-p3ib-choose-design.button:hover,
.i8w-p3ib-choose-design:hover {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #fff !important;
}

/* 8. Upload box — clean separator row */
.i8w-p3ib-upload-box {
  margin: 18px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}
.i8w-p3ib-upload-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  direction: rtl;
}
.i8w-p3ib-upload-inner::before,
.i8w-p3ib-upload-inner::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(99,102,241,0.15);
}
/* Hide native file input — label with for= triggers it */
.i8w-p3ib-builder #i8w-p3ib-custom-design,
#i8w-p3ib-custom-design {
  display: none !important;
}
.i8w-p3ib-upload-icon-wrap { display: none !important; }
.i8w-p3ib-upload-label-text,
label.i8w-p3ib-upload-label-text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 10px 26px !important;
  height: 42px !important;
  background: #7c3aed !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(124,58,237,0.28) !important;
  transition: background 0.18s ease, box-shadow 0.18s ease !important;
  line-height: 1 !important;
}
.i8w-p3ib-upload-label-text::before,
label.i8w-p3ib-upload-label-text::before {
  content: '📁';
  font-size: 15px;
}
.i8w-p3ib-upload-label-text:hover,
label.i8w-p3ib-upload-label-text:hover {
  background: #6d28d9 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(124,58,237,0.38) !important;
}

/* 9. Editor shell — no extra card frame inside the card */
.i8w-p3ib-editor-shell {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* 10. Final preview — borderless, smooth slide-in animation */
.i8w-p3ib-final-preview {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 8px 0 24px !important;
  border-radius: 0 !important;
}
.i8w-p3ib-final-design-only #i8w-p3ib-final-design {
  text-align: center;
}
.i8w-p3ib-final-design img,
.i8w-p3ib-final-design-only #i8w-p3ib-final-design img {
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: i8w-p3ib-slide-up 0.45s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes i8w-p3ib-slide-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 11. Status bar inside card */
.i8w-p3ib-status {
  margin: 0 26px 16px !important;
  border-radius: 12px !important;
}

/* 13. Action buttons — system purple (high-specificity selectors) */
.i8w-p3ib-builder button#i8w-p3ib-step2-save,
.i8w-p3ib-builder button#i8w-p3ib-lock,
.i8w-p3ib-actions button#i8w-p3ib-step2-save,
.i8w-p3ib-actions button#i8w-p3ib-lock,
#i8w-p3ib-step2-save,
#i8w-p3ib-lock {
  background: #7c3aed !important;
  border: 1px solid #7c3aed !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  font-family: inherit !important;
  height: 42px !important;
  padding: 0 24px !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 10px rgba(124,58,237,0.30) !important;
  cursor: pointer !important;
  transition: background 0.18s ease, box-shadow 0.18s ease !important;
  text-shadow: none !important;
  line-height: 42px !important;
}
.i8w-p3ib-builder button#i8w-p3ib-step2-save:hover,
.i8w-p3ib-builder button#i8w-p3ib-lock:hover,
#i8w-p3ib-step2-save:hover,
#i8w-p3ib-lock:hover {
  background: #6d28d9 !important;
  border-color: #6d28d9 !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(124,58,237,0.40) !important;
}
.i8w-p3ib-builder button#i8w-p3ib-back-to-designs,
.i8w-p3ib-actions button#i8w-p3ib-back-to-designs,
#i8w-p3ib-back-to-designs {
  background: transparent !important;
  border: 1.5px solid #7c3aed !important;
  color: #7c3aed !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  font-family: inherit !important;
  height: 42px !important;
  padding: 0 22px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background 0.18s ease !important;
  line-height: 40px !important;
}
.i8w-p3ib-builder button#i8w-p3ib-back-to-designs:hover,
#i8w-p3ib-back-to-designs:hover {
  background: rgba(124,58,237,0.06) !important;
  color: #7c3aed !important;
}

/* 14. Lock note — at the bottom replacing the button */
.i8w-p3ib-lock-note {
  margin: 16px 0 0 !important;
  padding: 14px 18px !important;
  background: rgba(99,102,241,0.06) !important;
  border: 1px solid rgba(99,102,241,0.22) !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
  color: #4c1d95 !important;
  text-align: center !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
/* Mobile: phone number on its own line */
.i8w-p3ib-lock-br { display: none; }
@media (max-width: 640px) {
  .i8w-p3ib-lock-br { display: inline; }
}

/* ── Mobile: builder ── */
@media (max-width: 900px) {
  .i8w-p3ib-card-head,
  .i8w-p3ib-steps-nav,
  .i8w-p3ib-step { padding-left: 16px !important; padding-right: 16px !important; }
  .i8w-p3ib-card-head { padding: 16px 16px 12px !important; }
  .i8w-p3ib-status { margin: 0 16px 14px !important; }
}

@media (max-width: 640px) {
  /* Card header */
  .i8w-p3ib-card-head { padding: 14px 14px 10px !important; }
  .i8w-eil-head-title { font-size: 18px !important; }
  .i8w-eil-head-sub   { font-size: 12px !important; }
  .i8w-p3ib-head-desc { font-size: 12px !important; }

  /* Steps nav: smaller pills, wrap */
  .i8w-p3ib-steps-nav {
    padding: 10px 14px !important;
    gap: 10px !important;
  }
  .i8w-p3ib-steps-nav > div {
    padding: 6px 14px !important;
    font-size: 12px !important;
  }

  /* Step content */
  .i8w-p3ib-step { padding: 18px 16px !important; margin: 14px 12px 18px !important; }

  /* Design grid: 2 cols on phone */
  .i8w-p3ib-design-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .i8w-p3ib-design-card { padding: 8px !important; border-radius: 12px !important; }

  /* Action buttons: stack full-width */
  .i8w-p3ib-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .i8w-p3ib-actions button,
  .i8w-p3ib-actions a {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Upload button: full width */
  .i8w-p3ib-upload-box { margin: 14px 0 0 !important; }
  .i8w-p3ib-upload-label-text,
  label.i8w-p3ib-upload-label-text {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Step 2 editor */
  .i8w-p3ib-fields-panel { max-height: none !important; }
  .i8w-p3ib-field-input  { min-height: 60px !important; }

  /* Final invitation */
  .i8w-p3ib-final-preview { padding: 4px 0 16px !important; }

  /* Status */
  .i8w-p3ib-status { margin: 0 14px 12px !important; }
}

@media (max-width: 400px) {
  /* 2-col design grid on very small phones */
  .i8w-p3ib-design-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: none;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .i8w-p3ib-steps-nav > div { font-size: 11px !important; padding: 5px 10px !important; }
}

/* ── Mobile: invitation preview fits phone screen ─────────────── */
@media (max-width: 820px) {
  /* Constrain invitation image to phone viewport height */
  .i8w-p3ib-topdesign img,
  .i8w-p3ib-selected-design img,
  #i8w-p3ib-top-image-holder img,
  .i8w-p3ib-final-design img {
    max-height: min(55vh, 420px) !important;
    max-width: 92vw !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Compact outer card padding on mobile */
  .i8w-p3ib-editor-shell { padding: 8px 10px; }

  /* Preview panel: no sticky, less padding */
  .i8w-p3ib-preview-panel {
    padding: 8px !important;
    min-height: 0 !important;
  }
}

/* ── HTML design type: isolated live preview (parallel to the Templated image) ──
   HTML designs render inside a sandboxed iframe so the template's own CSS never
   leaks into the builder. The editor, gallery thumbnail and final view all reuse
   the same frame component, so an HTML design looks and behaves like any design. ── */
.i8w-p3ib-html-frame-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  overflow:hidden;
}
.i8w-p3ib-html-frame{
  border:0;
  background:#fff;
  display:block;
}
/* While editing an HTML design, let the whole invitation show beside the fields
   (don't clip it inside the otherwise sticky/scrolled preview panel). */
.i8w-p3ib-html-mode .i8w-p3ib-preview-panel{
  overflow:visible !important;
  max-height:none !important;
}
.i8w-p3ib-html-mode #i8w-p3ib-selected-design{width:100%;}
/* Editor (step 2) + final (step 3): cap the HTML preview to the SAME width as image designs
   (min(460px,92vw)) and centre it, so an HTML invitation is the same size as any other. */
.i8w-p3ib-selected-design .i8w-p3ib-html-frame-wrap,
.i8w-p3ib-final-design .i8w-p3ib-html-frame-wrap{
  max-width:min(460px, 92vw);
  margin-left:auto;
  margin-right:auto;
}
/* Gallery thumbnail: the HTML preview is CONTAINed and centred in the 2/3 design-card box
   (same as image cards using object-fit:contain); clicks pass through to the card. The box is
   a clean, fixed white area so the invitation fills it nicely with no oversized grey margins. */
.i8w-p3ib-html-card-preview{position:relative;padding:0 !important;background:#fff !important;border:1px solid #eef0f6 !important;}
.i8w-p3ib-html-card-preview .i8w-p3ib-html-frame-wrap{position:absolute;inset:0;align-items:center;}
.i8w-p3ib-html-card-preview .i8w-p3ib-html-frame{pointer-events:none;}

/* Full-screen popup for an HTML design: the isolated iframe is rendered inside this box and
   sized by JS (fitHtmlIframe) to be contained in the viewport — same framing as the Templated
   image popup (rounded, white, soft shadow, no crop). */
.i8w-p3ib-design-modal-html{display:none;align-items:center;justify-content:center;}
.i8w-p3ib-design-modal-html .i8w-p3ib-html-frame-wrap{
  max-width:96vw;max-height:94vh;background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.35);
}

/* [i8w_selected_event_design] HTML invitation (guest portal "עדכון הגעה" tab, etc.):
   capped to the same width as image designs and centred, so it shows like any design. */
.i8w-selected-event-design-shortcode .i8w-p3ib-html-frame-wrap{max-width:min(480px, 94vw);margin:0 auto;}
/* The wrap is display:flex, so without flex-shrink:0 the frame (a flex item) was
   shrunk back to the wrap width even after fitHtmlIframe() set its real design width,
   leaving the invitation clipped instead of scaled on the guest portal. The fit logic
   sizes the frame explicitly and scales it down with transform — it must keep the
   width it was given. */
.i8w-selected-event-design-frame{width:100%;min-height:200px;flex-shrink:0;}

/* ── Desktop (≥901px) editor (step 2) layout ──────────────────────────────────
   The editor splits the tab 50/50: HALF the width shows the invitation (large and
   clear for editing) and HALF holds the editable text fields. Mobile (≤900px) is
   left fully unchanged. ── */
@media (min-width: 901px) {
  /* Spread the editor across the whole tab area instead of a centered 980px box. */
  .i8w-p3ib-editor-shell {
    max-width: 100% !important;
    margin: 0 !important;
  }
  /* 50% invitation preview (left) + 50% editable text fields (right). */
  .i8w-p3ib-live-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 26px !important;
    align-items: start !important;
  }
  /* The text fields scroll INSIDE their own panel, so scrolling/editing the text
     never scrolls the page (and never scrolls the invitation preview out of view). */
  .i8w-p3ib-fields-panel {
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-self: start !important;
  }
  /* Two text fields per row. */
  .i8w-p3ib-fields-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: start !important;
  }
  .i8w-p3ib-field-input {
    min-height: 76px !important;
    max-height: 180px !important;
  }
  /* Invitation preview: fills its full 50% column, pinned beside the editor and
     scaled to fit the screen, so the WHOLE invitation stays visible at all times
     while the text fields on the right are scrolled/edited. */
  .i8w-p3ib-preview-panel {
    max-width: none !important;
    width: 100% !important;
    justify-self: stretch !important;
    position: sticky !important;
    top: 18px !important;
    align-self: start !important;
    max-height: calc(100vh - 36px) !important;
    overflow: hidden !important;
  }
  /* The invitation container is otherwise capped to 460px — let it use the whole
     50% column so the invitation shows large. */
  .i8w-p3ib-preview-panel .i8w-p3ib-selected-design,
  .i8w-p3ib-preview-panel .i8w-p3ib-topdesign,
  #i8w-p3ib-selected-design,
  #i8w-p3ib-selected-design .i8w-p3ib-topdesign {
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Image designs: enlarge to fill the column while staying fully visible. */
  .i8w-p3ib-topdesign img,
  .i8w-p3ib-selected-design img {
    max-width: 100% !important;
    max-height: calc(100vh - 110px) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
  /* HTML / "design from image" invitations (rendered in an iframe): enlarge to
     fill the column too. */
  .i8w-p3ib-preview-panel .i8w-p3ib-html-frame-wrap,
  #i8w-p3ib-selected-design .i8w-p3ib-html-frame-wrap {
    max-width: 100% !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;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   "התאמת עיצוב להזמנה" — adjustment window for an uploaded design.
   Additive block: every selector is new (.i8w-p3ib-fit-*), so no existing rule of
   the invitation-design screen changes.
   ───────────────────────────────────────────────────────────────────────────── */
.i8w-p3ib-fit-modal{
  position:fixed;inset:0;z-index:100060;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(15,23,42,.6);opacity:0;transition:opacity .2s ease;
  direction:rtl;-webkit-overflow-scrolling:touch;
}
.i8w-p3ib-fit-modal.is-open{opacity:1}
.i8w-p3ib-fit-sheet{
  width:100%;max-width:980px;max-height:94vh;display:flex;flex-direction:column;
  background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 24px 70px rgba(15,23,42,.4);transform:translateY(10px);transition:transform .2s ease;
}
.i8w-p3ib-fit-modal.is-open .i8w-p3ib-fit-sheet{transform:translateY(0)}

.i8w-p3ib-fit-head{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 18px;border-bottom:1px solid #e5e7eb;background:linear-gradient(135deg,#eef2ff,#f5f3ff);
}
.i8w-p3ib-fit-title{font-size:17px;font-weight:800;color:#1e1b4b}
.i8w-p3ib-fit-x{
  width:34px;height:34px;flex:0 0 auto;border:1px solid #c7d2fe;border-radius:50%;
  background:#fff;color:#3730a3;font-size:21px;line-height:1;cursor:pointer;
}
.i8w-p3ib-fit-x:hover{background:#eef2ff}

.i8w-p3ib-fit-body{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:14px 18px 18px}
.i8w-p3ib-fit-lead{margin:0 0 12px;font-size:13.5px;line-height:1.7;color:#334155;font-weight:600}

.i8w-p3ib-fit-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.i8w-p3ib-fit-fact{
  padding:8px 12px;border:1px solid #e5e7eb;border-radius:12px;background:#f8fafc;
  display:flex;flex-direction:column;gap:2px;min-width:0;
}
.i8w-p3ib-fit-fact-lbl{font-size:11.5px;font-weight:700;color:#64748b}
.i8w-p3ib-fit-fact-val{font-size:14px;font-weight:800;color:#0f172a;overflow-wrap:anywhere}

.i8w-p3ib-fit-modes{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.i8w-p3ib-fit-mode{
  flex:1 1 auto;padding:9px 14px;border:1px solid #c7d2fe;border-radius:999px;background:#fff;
  color:#3730a3;font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap;
}
.i8w-p3ib-fit-mode:hover{background:#eef2ff}
.i8w-p3ib-fit-mode.is-active{background:linear-gradient(135deg,#4f46e5,#7c3aed);border-color:transparent;color:#fff}

.i8w-p3ib-fit-cols{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px}
.i8w-p3ib-fit-col{flex:1 1 320px;min-width:0}
.i8w-p3ib-fit-col-title{font-size:13px;font-weight:800;color:#1e1b4b;margin-bottom:6px}

.i8w-p3ib-fit-stage{
  position:relative;width:100%;height:340px;overflow:hidden;border-radius:14px;
  background:#0f172a;touch-action:none;
}
.i8w-p3ib-fit-stage.is-manual{cursor:grab}
.i8w-p3ib-fit-stage.is-manual.is-dragging{cursor:grabbing}
.i8w-p3ib-fit-img{
  position:absolute;max-width:none;max-height:none;user-select:none;-webkit-user-drag:none;
  pointer-events:none;display:block;
}
/* The huge spread darkens everything OUTSIDE the frame — that is the part that is cut. */
.i8w-p3ib-fit-frame{
  position:absolute;box-shadow:0 0 0 9999px rgba(2,6,23,.62);
  border:2px solid rgba(255,255,255,.95);border-radius:4px;pointer-events:none;
}
.i8w-p3ib-fit-frame-lbl{
  position:absolute;top:6px;right:6px;padding:2px 8px;border-radius:999px;
  background:rgba(255,255,255,.92);color:#1e1b4b;font-size:10.5px;font-weight:800;
}
.i8w-p3ib-fit-hint{margin-top:8px;font-size:12px;line-height:1.65;color:#64748b}

.i8w-p3ib-fit-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
/* The manual controls are toggled with the hidden attribute; the display above would
   otherwise win over the browser default for [hidden]. */
.i8w-p3ib-fit-controls[hidden]{display:none}
.i8w-p3ib-fit-zoom{display:flex;align-items:center;gap:8px;flex:1 1 180px;min-width:0;font-size:12.5px;font-weight:700;color:#334155}
.i8w-p3ib-fit-zoom input[type="range"]{flex:1 1 auto;min-width:0;accent-color:#4f46e5}
.i8w-p3ib-fit-reset{
  padding:7px 12px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;
  color:#334155;font-size:12.5px;font-weight:700;cursor:pointer;
}
.i8w-p3ib-fit-reset:hover{background:#f1f5f9}

.i8w-p3ib-fit-previews{display:flex;gap:12px;align-items:flex-start}
.i8w-p3ib-fit-prev{margin:0;flex:1 1 0;min-width:0;text-align:center}
.i8w-p3ib-fit-prev-box{
  border:1px dashed #cbd5e1;border-radius:12px;background:#f8fafc;padding:6px;
  display:flex;align-items:center;justify-content:center;
}
.i8w-p3ib-fit-prev canvas{display:block;width:auto;max-width:100%;height:auto;max-height:230px;border-radius:8px}
/* Shown smaller, the way it appears on a phone — the image itself is identical. */
.i8w-p3ib-fit-prev--mobile canvas{max-height:170px}
.i8w-p3ib-fit-prev figcaption{margin-top:5px;font-size:11.5px;font-weight:700;color:#64748b}

.i8w-p3ib-fit-foot{
  flex:0 0 auto;display:flex;flex-wrap:wrap;gap:8px;padding:12px 18px;
  border-top:1px solid #e5e7eb;background:#f8fafc;
}
.i8w-p3ib-fit-foot .button{flex:0 1 auto}
.i8w-p3ib-fit-ok{font-weight:800}
.i8w-p3ib-fit-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;clip:rect(0 0 0 0);clip-path:inset(50%)}

@media (max-width:768px){
  .i8w-p3ib-fit-modal{padding:0;align-items:flex-end}
  .i8w-p3ib-fit-sheet{max-width:none;max-height:94dvh;border-radius:16px 16px 0 0;transform:translateY(24px)}
  .i8w-p3ib-fit-body{padding:12px 13px 16px}
  .i8w-p3ib-fit-facts{grid-template-columns:1fr 1fr}
  .i8w-p3ib-fit-mode{flex:1 1 100%}
  .i8w-p3ib-fit-cols{gap:14px}
  .i8w-p3ib-fit-stage{height:270px}
  .i8w-p3ib-fit-previews{gap:10px}
  .i8w-p3ib-fit-prev canvas{max-height:190px}
  .i8w-p3ib-fit-foot{position:sticky;bottom:0;padding:10px 13px;gap:6px}
  .i8w-p3ib-fit-foot .button{flex:1 1 100%;text-align:center}
}

/* §עיצוב — Active / Draft state of the invitation design.
   The published ("active") design is what guests see. A replacement in progress is a DRAFT:
   it is stored and resumable, it is labelled as such, and it does not change anything for
   guests until it is saved. */
/* §מלל — shown only inside the replacement flow (the editing steps of an event that already
   has an active design); the saved view keeps just the "החלפת עיצוב" button. */
.i8w-p3ib-replace-note{margin:0 0 12px;padding:10px 14px;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:12px;font-weight:700;color:#065f46;line-height:1.6}
.i8w-p3ib-draft-note{margin:0 0 12px;padding:12px 14px;background:#fffbeb;border:1px solid #fde68a;border-radius:12px;font-weight:700;color:#92400e;line-height:1.6}
.i8w-p3ib-blocked-note{margin:10px 0 0;padding:11px 14px;background:#fef2f2;border:1px solid #fecaca;border-radius:12px;font-weight:700;color:#b91c1c;line-height:1.6}
.i8w-p3ib-blocked-inline{display:block;margin-top:8px;color:#b91c1c;font-weight:700}
.i8w-p3ib-replace-wrap{display:inline-block;margin:10px 8px 0 0}
/* The moved "החלפת עיצוב": above the saved design, horizontally centered. */
.i8w-p3ib-replace-top{display:flex;justify-content:center;text-align:center;margin:0 0 14px}
.i8w-p3ib-replace-top .i8w-p3ib-replace-wrap{margin:0}
.i8w-p3ib-replace{font-weight:800!important}
.i8w-p3ib-replace[disabled]{opacity:.55;cursor:not-allowed}

/* ─────────────────────────────────────────────────────────────────────────────
   §הזמנה-סופית-מובייל — the saved design on the "הזמנה סופית" step, phones only.
   The mobile rule above lets the image grow to 92vw, but its wrapper
   (.i8w-p3ib-topdesign) is narrower than that inside the card's padding, so a
   landscape or square design overflowed the wrapper and, in RTL, spilled to the
   left — pinned to one side with all the spare space on the other. The image is
   now never wider than its (centred) wrapper: equal margins on both sides, same
   aspect ratio, no crop, no stretch. Additive, mobile-only; desktop is unchanged.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .i8w-p3ib-step[data-step="3"] .i8w-p3ib-final-design .i8w-p3ib-topdesign img {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   §עיצוב-הזמנה — "העלאת עיצוב אישי" first, gallery under it.
   The upload box now sits ABOVE the gallery (markup change in sc_builder), so the
   owner sees both options without scrolling. These rules only fix the spacing for
   its new position and label the gallery below it; the box itself, its input and
   the upload flow are untouched.
   ───────────────────────────────────────────────────────────────────────────── */
.i8w-p3ib-upload-box.i8w-p3ib-upload-box-top { margin: 2px 0 0 !important; }

/* The divider between the two ways of getting a design. It reuses the SAME hairline
   treatment the upload row above already uses, so the two options read as one designed
   pair: a purple call-to-action first, then a quiet labelled rule introducing the gallery.
   Deliberately not a chip or a pill — this is a section label, and nothing here should
   look pressable. Perfectly centred (the rules on both sides are equal flex items), with
   its own space above and below, and on a phone the rules shrink instead of the text
   breaking. Presentation only — no logic and no behaviour is attached to it. */
.i8w-p3ib-gallery-sep{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0 16px;
}
.i8w-p3ib-gallery-sep::before,
.i8w-p3ib-gallery-sep::after{
  content: '';
  flex: 1 1 0;
  min-width: 12px;
  height: 1px;
  background: rgba(99,102,241,.15);
}
.i8w-p3ib-gallery-sep > span{
  flex: 0 1 auto;
  color: #475569;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .1px;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 820px) {
  .i8w-p3ib-upload-box.i8w-p3ib-upload-box-top { margin: 0 !important; }
  .i8w-p3ib-gallery-sep{ margin: 16px 0 12px; gap: 10px; }
  .i8w-p3ib-gallery-sep > span{ font-size: 13.5px; }
}
/* Very narrow phones: let the label wrap rather than push the layout sideways. */
@media (max-width: 360px) {
  .i8w-p3ib-gallery-sep > span{ white-space: normal; text-wrap: balance; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   §טעינה — immediate, jump-free gallery.
   Every card already reserves its exact 2/3 box (.i8w-p3ib-design-image-wrap), so
   nothing below it moves while an image or an HTML preview arrives. What is added
   here is only the *look* of that reserved box while it is still empty (a calm
   placeholder instead of a blank hole) and a short fade-in, so the grid appears at
   once instead of popping in image by image. No layout value changes.
   ───────────────────────────────────────────────────────────────────────────── */
.i8w-p3ib-design-image-wrap{ background: #f7f7f8; }
.i8w-p3ib-design-card img{ opacity: 0; transition: opacity .18s ease-out; }
.i8w-p3ib-design-card img[data-i8w-ready="1"]{ opacity: 1; }
.i8w-p3ib-html-card-preview.is-pending::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, #f7f7f8 30%, #f0f1f4 50%, #f7f7f8 70%);
  background-size: 300% 100%;
  animation: i8wP3ibShimmer 1.1s linear infinite;
}
@keyframes i8wP3ibShimmer{ from{ background-position: 100% 0; } to{ background-position: 0 0; } }
@media (prefers-reduced-motion: reduce){
  .i8w-p3ib-design-card img{ transition: none; }
  .i8w-p3ib-html-card-preview.is-pending::after{ animation: none; }
}