/* ============================================================
   /new — Inline Modals (Portfolio / Contact / Help / Legal)
   @file CSS משותף עבור 4 modals שמוסיפים פיצ'רים inline ב-/new/
         במקום redirect ל-legacy pages.
   ============================================================ */

/* ─── Overlay (משותף) ──────────────────────────────────────── */
.inline-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 11, 13, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  animation: im-fade-in 160ms ease-out;
  padding: 20px;
}
@keyframes im-fade-in { from { opacity: 0 } to { opacity: 1 } }
.inline-modal-overlay.is-closing { animation: im-fade-out 160ms ease-out forwards; }
@keyframes im-fade-out { to { opacity: 0 } }

.inline-modal {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  background: var(--surface, #fff);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.32), 0 4px 12px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: im-pop-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes im-pop-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96) }
  to   { opacity: 1; transform: translateY(0) scale(1) }
}

/* ─── Sizes ─────────────────────────────────────────────────── */
.inline-modal--sm { width: min(480px, 100%); }
.inline-modal--md { width: min(640px, 100%); }
.inline-modal--lg { width: min(880px, 100%); }
.inline-modal--xl { width: min(1100px, 100%); }

/* ─── Header ─────────────────────────────────────────────────── */
.inline-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border, #E5E5E5);
  flex-shrink: 0;
}
.inline-modal__title {
  margin: 0;
  font-size: 1.3725rem;
  font-weight: 700;
  color: var(--text, #1B1C1F);
  display: flex;
  align-items: center;
  gap: 10px;
}
.inline-modal__close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 1.6775rem;
  line-height: 1;
  color: var(--text-muted, #6B6F78);
  cursor: pointer;
  border-radius: 8px;
  transition: background 120ms;
}
.inline-modal__close:hover { background: var(--surface-2, #F5F5F4); color: var(--text, #1B1C1F); }

/* ─── Tabs ───────────────────────────────────────────────────── */
.inline-modal__tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 12px 22px 0;
  background: var(--surface-1, #f3f4f6);
  border-radius: 10px;
  flex-shrink: 0;
}
.inline-modal__tab {
  flex: 1;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--text-muted, #6B6F78);
  font-size: 0.99125rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 7px;
  transition: all 0.15s;
  font-family: inherit;
}
.inline-modal__tab:hover { color: var(--text, #1B1C1F); }
.inline-modal__tab.is-active {
  background: var(--surface, #fff);
  color: var(--text, #1B1C1F);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ─── Body ───────────────────────────────────────────────────── */
.inline-modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* עוצר scroll-chaining: בלעדיו גלגלת שהגיעה לקצה-הטופס ממשיכה לגלול את
     הדף מאחור — ובדף עם overlay מטושטש כל frame כזה מרסטר מסך-מלא (לאג). */
  overscroll-behavior: contain;
  padding: 22px;
}
.inline-modal__body--padded-tight { padding: 14px 22px; }
.inline-modal__body--noscroll { overflow: hidden; }

/* ─── Footer ─────────────────────────────────────────────────── */
.inline-modal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--border, #E5E5E5);
  flex-shrink: 0;
  background: var(--surface, #fff);
}
.inline-modal__foot--start { justify-content: flex-start; }
.inline-modal__foot--between { justify-content: space-between; }

/* ─── Form fields (משותף) ─────────────────────────────────── */
.inline-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.inline-modal__field label {
  font-size: 0.915rem;
  font-weight: 600;
  color: var(--text, #1B1C1F);
}
.inline-modal__field .required { color: #DC2626; margin-inline-start: 2px; }
.inline-modal__field input,
.inline-modal__field textarea,
.inline-modal__field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border, #E5E5E5);
  border-radius: 8px;
  font-size: 1.0675rem;
  font-family: inherit;
  color: var(--text, #1B1C1F);
  background: var(--surface, #FFFFFF);
  transition: border-color 120ms, box-shadow 120ms;
  box-sizing: border-box;
}
.inline-modal__field input:focus,
.inline-modal__field textarea:focus,
.inline-modal__field select:focus {
  outline: none;
  border-color: var(--accent, #D97757);
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.15);
}
.inline-modal__field textarea { resize: vertical; min-height: 96px; }
.inline-modal__field .help {
  font-size: var(--t-micro);
  color: var(--text-muted, #6B6F78);
}
.inline-modal__field .counter {
  font-size: var(--t-micro);
  color: var(--text-muted, #6B6F78);
  text-align: end;
}

/* ─── Buttons ────────────────────────────────────────────────── */
.inline-modal__btn {
  padding: 9px 18px;
  border-radius: 8px;
  border: 1px solid var(--border, #E5E5E5);
  background: var(--surface, #fff);
  color: var(--text, #1B1C1F);
  font-size: 1.0675rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms, border-color 120ms, transform 80ms;
}
.inline-modal__btn:hover:not(:disabled) { background: var(--surface-2, #F5F5F4); }
.inline-modal__btn:active:not(:disabled) { transform: translateY(1px); }
.inline-modal__btn:disabled { opacity: 0.55; cursor: not-allowed; }

.inline-modal__btn--primary {
  background: var(--accent, #D97757);
  border-color: var(--accent, #D97757);
  color: #fff;
}
.inline-modal__btn--primary:hover:not(:disabled) {
  background: var(--accent-2, #C16448);
  border-color: var(--accent-2, #C16448);
}

.inline-modal__btn--danger {
  background: #fee2e2;
  border-color: #fecaca;
  color: #b91c1c;
}
.inline-modal__btn--danger:hover:not(:disabled) { background: #fecaca; }

/* ─── Error / Success banner ─────────────────────────────────── */
.inline-modal__banner {
  font-size: 0.99125rem;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.inline-modal__banner--error {
  color: #DC2626;
  background: #FEF2F2;
  border: 1px solid #FECACA;
}
.inline-modal__banner--success {
  color: #047857;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
}
.inline-modal__banner--info {
  color: #1E40AF;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
}

/* ─── Loading state ───────────────────────────────────────────── */
.inline-modal__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--text-muted, #6B6F78);
}
.inline-modal__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border, #E5E5E5);
  border-top-color: var(--accent, #D97757);
  border-radius: 50%;
  animation: im-spin 800ms linear infinite;
}
@keyframes im-spin { to { transform: rotate(360deg) } }

/* ─── Empty state ────────────────────────────────────────────── */
.inline-modal__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 50px 20px;
  color: var(--text-muted, #6B6F78);
  text-align: center;
}
.inline-modal__empty-icon { font-size: 4.27rem; opacity: 0.5; }
.inline-modal__empty h4 { margin: 0; color: var(--text, #1B1C1F); }
.inline-modal__empty p { margin: 0; font-size: 0.99125rem; max-width: 360px; }

/* ============================================================
   PortfolioModal — ספציפי
   ============================================================ */
.portfolio-modal .pf-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--surface-1, #f3f4f6);
  border-radius: 12px;
  margin-bottom: 16px;
}
.portfolio-modal .pf-head__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent, #D97757) 0%, #b85433 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.6775rem;
  flex-shrink: 0;
}
.portfolio-modal .pf-head__info { flex: 1; min-width: 0; }
.portfolio-modal .pf-head__name { font-weight: 700; font-size: 1.14375rem; color: var(--text, #1B1C1F); margin: 0; }
.portfolio-modal .pf-head__sub { font-size: 0.915rem; color: var(--text-muted, #6B6F78); margin: 2px 0 0; }
.portfolio-modal .pf-head__share {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 0.915rem;
  color: var(--accent, #D97757);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.portfolio-modal .pf-head__share:hover { text-decoration: underline; }

.portfolio-modal .pf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.portfolio-modal .pf-project {
  border: 1px solid var(--border, #E5E5E5);
  border-radius: 10px;
  padding: 12px;
  background: var(--surface, #fff);
  transition: border-color 120ms, transform 120ms;
}
.portfolio-modal .pf-project:hover {
  border-color: var(--accent, #D97757);
  transform: translateY(-1px);
}
.portfolio-modal .pf-project__title {
  font-weight: 600;
  font-size: 1.0675rem;
  color: var(--text, #1B1C1F);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.portfolio-modal .pf-project__title .pf-feat {
  color: #F59E0B;
  font-size: 0.915rem;
}
.portfolio-modal .pf-project__meta {
  font-size: 0.915rem;
  color: var(--text-muted, #6B6F78);
  margin: 4px 0;
}
.portfolio-modal .pf-project__actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.portfolio-modal .pf-project__btn {
  font-size: var(--t-micro);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border, #E5E5E5);
  background: transparent;
  color: var(--text, #1B1C1F);
  cursor: pointer;
  font-family: inherit;
}
.portfolio-modal .pf-project__btn:hover { background: var(--surface-2, #F5F5F4); }
.portfolio-modal .pf-project__btn--feat.is-active {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}

.portfolio-modal .pf-settings {
  background: var(--surface-1, #f3f4f6);
  border-radius: 12px;
  padding: 14px 16px;
}
.portfolio-modal .pf-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}
.portfolio-modal .pf-toggle input { width: 18px; height: 18px; cursor: pointer; }
.portfolio-modal .pf-share-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.portfolio-modal .pf-share-url {
  flex: 1;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 0.915rem;
  padding: 8px 10px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #E5E5E5);
  border-radius: 6px;
  color: var(--text-muted, #6B6F78);
}

/* ============================================================
   ContactModal — ספציפי
   ============================================================ */
.contact-modal__category {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 6px 0 16px;
}
.contact-modal__cat-btn {
  padding: 10px 12px;
  border: 1px solid var(--border, #E5E5E5);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--text, #1B1C1F);
  font-size: 0.99125rem;
  font-family: inherit;
  cursor: pointer;
  text-align: start;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 120ms;
}
.contact-modal__cat-btn:hover { background: var(--surface-2, #F5F5F4); }
.contact-modal__cat-btn.is-active {
  border-color: var(--accent, #D97757);
  background: rgba(217, 119, 87, 0.08);
  color: var(--accent, #D97757);
}
.contact-modal__cat-btn .ico { font-size: 1.3725rem; }

.contact-modal__files {
  margin-top: 10px;
  font-size: 0.915rem;
}
.contact-modal__file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--surface-1, #f3f4f6);
  border-radius: 6px;
  margin-top: 4px;
}
.contact-modal__file-remove {
  background: none;
  border: none;
  color: #DC2626;
  cursor: pointer;
  font-size: 1.0675rem;
  padding: 0 6px;
}

/* ============================================================
   HelpModal — ספציפי
   ============================================================ */
.help-modal__faq-item {
  border: 1px solid var(--border, #E5E5E5);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color 120ms;
}
.help-modal__faq-item:hover { border-color: var(--accent, #D97757); }
.help-modal__faq-q {
  width: 100%;
  text-align: start;
  padding: 14px 16px;
  background: var(--surface, #fff);
  border: none;
  font-family: inherit;
  font-size: 1.0675rem;
  font-weight: 600;
  color: var(--text, #1B1C1F);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.help-modal__faq-q::after {
  content: '+';
  font-size: 1.3725rem;
  color: var(--text-muted, #6B6F78);
  transition: transform 200ms;
}
.help-modal__faq-item.is-open .help-modal__faq-q::after {
  content: '−';
  transform: rotate(0deg);
}
.help-modal__faq-a {
  padding: 0 16px 14px;
  font-size: 0.99125rem;
  line-height: 1.55;
  color: var(--text-muted, #6B6F78);
  display: none;
}
.help-modal__faq-a a { color: var(--accent, #D97757); }
.help-modal__faq-item.is-open .help-modal__faq-a { display: block; }

.help-modal__search {
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--border, #E5E5E5);
  border-radius: 8px;
  font-size: 1.0675rem;
  font-family: inherit;
  background: var(--surface, #fff);
}
.help-modal__cats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.help-modal__cat-pill {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border, #E5E5E5);
  background: var(--surface, #fff);
  font-size: 0.915rem;
  color: var(--text-muted, #6B6F78);
  cursor: pointer;
  font-family: inherit;
}
.help-modal__cat-pill.is-active {
  background: var(--accent, #D97757);
  border-color: var(--accent, #D97757);
  color: #fff;
}

/* ============================================================
   LegalModal — ספציפי
   ============================================================ */
.legal-modal .inline-modal__tab { font-size: 1.029375rem; }

.legal-modal__body {
  position: relative;      /* עוגן ל-spinner overlay */
  display: flex;
  padding: 0;
}
.legal-modal__frame {
  width: 100%;
  height: 100%;
  min-height: 480px;
  border: none;
  background: var(--surface, #fff);
}

/* spinner overlay — מוצג מעל ה-iframe עד שהתוכן נטען */
.legal-modal__loading {
  position: absolute;
  inset: 0;
  background: var(--surface, #fff);
  z-index: 2;
  padding: 0;
}

.legal-modal__hint {
  font-size: 0.915rem;
  color: var(--text-muted, #6B6F78);
  max-width: 52%;
  line-height: 1.4;
}
.legal-modal__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.legal-modal__actions .inline-modal__btn { font-size: 0.99125rem; padding: 8px 14px; }

@media (max-width: 640px) {
  .legal-modal__hint { display: none; }   /* במובייל — מפנים מקום לכפתורים */
  .legal-modal__foot { justify-content: flex-end; }
  .legal-modal__actions { width: 100%; }
}

/* ─── Mobile ≤640px ─── */
@media (max-width: 640px) {
  .inline-modal-overlay { padding: 0; }
  .inline-modal {
    width: 100vw;
    height: 100vh; height: 100dvh;
    max-height: 100vh; max-height: 100dvh;
    border-radius: 0;
  }
  .inline-modal__head {
    padding-top: calc(var(--mobile-safe-top, 0px) + 16px);
  }
  .inline-modal__foot {
    padding-bottom: calc(var(--mobile-safe-bottom, 0px) + 14px);
  }
  .portfolio-modal .pf-grid { grid-template-columns: 1fr; }
  .contact-modal__category { grid-template-columns: 1fr 1fr; }
}