/* =============================================================================
   Nashashibi Studio — Editor Shell
   Luxury law-office visual builder UI.
   ============================================================================= */

:root {
  --nb-gold-100: #F7EFDE;
  --nb-gold-200: #EDDCBA;
  --nb-gold-300: #DFC48D;
  --nb-gold-400: #CFA968;
  --nb-gold-500: #C9A35C;
  --nb-gold-600: #B08845;
  --nb-gold-700: #8E6B33;
  --nb-gold-800: #6B4F24;

  --nb-navy-100: #EAF0F8;
  --nb-navy-200: #D3DFEE;
  --nb-navy-300: #9FB3CF;
  --nb-navy-400: #5F7AA6;
  --nb-navy-500: #2F4B76;
  --nb-navy-600: #1D3358;
  --nb-navy-700: #14213D;
  --nb-navy-800: #0B1426;
  --nb-navy-900: #060D1A;

  --nb-cream: #FBF8F1;
  --nb-surface: #FFFFFF;
  --nb-line: #E8E1D3;
  --nb-line-strong: #D8CDB8;
  --nb-text: #1C2430;
  --nb-muted: #6E7887;
  --nb-faint: #9AA3B1;

  --nb-danger: #B03A2E;
  --nb-danger-soft: #F9E8E5;
  --nb-success: #2E7D4F;
  --nb-success-soft: #E7F3EC;
  --nb-warning: #B9770E;
  --nb-warning-soft: #FBF1DF;
  --nb-info: #2C6E9B;
  --nb-info-soft: #E6F0F7;

  --nb-radius-xs: 4px;
  --nb-radius-sm: 6px;
  --nb-radius: 8px;
  --nb-radius-lg: 12px;
  --nb-radius-xl: 16px;

  --nb-shadow-sm: 0 1px 2px rgba(11, 20, 38, 0.08);
  --nb-shadow: 0 6px 18px rgba(11, 20, 38, 0.10);
  --nb-shadow-lg: 0 16px 40px rgba(11, 20, 38, 0.18);

  --nb-font: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --nb-header-h: 56px;
  --nb-footer-h: 28px;
  /*
   * Trimmed from 284/316px: with both panels pinned open at once
   * (this builder shows the elements palette and the properties
   * inspector on opposite sides simultaneously, rather than
   * replacing one with the other), the old widths ate 600px total —
   * on a common 1366px laptop screen that left barely ~650px for the
   * actual design canvas, so a "Desktop" preview looked cramped and
   * letterboxed instead of spacious. This reclaims 70px without
   * cutting any control off (every field inside still fits).
   */
  --nb-sidebar-w: 250px;
  --nb-inspector-w: 320px;
}

/* ============================= Launch button ================================ */

.nb-launch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: none;
  border-radius: var(--nb-radius);
  background: linear-gradient(135deg, var(--nb-gold-400), var(--nb-gold-600));
  color: #fff;
  font-family: var(--nb-font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--nb-shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.nb-launch-btn:hover,
.nb-launch-btn:focus {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: var(--nb-shadow);
}

.nb-launch-btn .dashicons {
  font-size: 18px;
  width: 18px;
  height: 18px;
}

#wp-admin-bar-nashashibi-builder .ab-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

#wp-admin-bar-nashashibi-builder .ab-item:before {
  content: "\f155";
  font-family: dashicons;
  color: var(--nb-gold-400);
  font-size: 16px;
}

/* ============================= Editor shell ================================= */

#nashashibi-builder.nsb-builder {
  position: fixed;
  inset: 0;
  z-index: 999990;
  display: none;
  flex-direction: column;
  direction: rtl;
  text-align: right;
  font-family: var(--nb-font);
  background: var(--nb-navy-800);
  color: var(--nb-text);
  -webkit-font-smoothing: antialiased;
}

#nashashibi-builder.nsb-builder.nb-open {
  display: flex;
}

body.nb-editor-open {
  overflow: hidden;
}

body.nb-editor-open #wpadminbar,
body.nb-editor-open #adminmenumain,
body.nb-editor-open #adminmenuback {
  opacity: 0;
  pointer-events: none;
}

/* ============================= Workspace =================================== */

.nsb-workspace {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  position: relative;
}

.nsb-sidebar {
  width: var(--nb-sidebar-w);
  flex: 0 0 auto;
  background: var(--nb-surface);
  border-left: 1px solid var(--nb-line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  transition: width 0.22s ease, border-color 0.22s ease;
}

.nsb-sidebar.is-collapsed {
  width: 0;
  border-left-color: transparent;
}

/* ============================= Panel toggles ================================ */

.nb-panel-toggle {
  flex: 0 0 auto;
  width: 16px;
  align-self: stretch;
  border: none;
  border-inline-start: 1px solid var(--nb-line);
  border-inline-end: 1px solid var(--nb-line);
  background: var(--nb-cream);
  color: var(--nb-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease;
}

.nb-panel-toggle:hover {
  background: var(--nb-gold-100, #f3e9d2);
  color: var(--nb-gold-600);
}

.nb-panel-toggle .dashicons {
  font-size: 14px;
  width: 14px;
  height: 14px;
  transition: transform 0.22s ease;
}

.nb-panel-toggle--sidebar.is-collapsed .dashicons,
.nb-panel-toggle--inspector.is-collapsed .dashicons {
  transform: rotate(180deg);
}

.nsb-canvas {
  flex: 1 1 auto;
  min-width: 0;
  overflow: auto;
  background: var(--nb-cream);
  position: relative;
}

.nsb-inspector {
  width: var(--nb-inspector-w);
  flex: 0 0 auto;
  background: var(--nb-surface);
  border-right: 1px solid var(--nb-line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  transition: width 0.22s ease, border-color 0.22s ease;
}

.nsb-inspector.is-collapsed {
  width: 0;
  border-right-color: transparent;
}

/* ============================= Footer ====================================== */

.nsb-footer {
  flex: 0 0 auto;
  height: var(--nb-footer-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 14px;
  background: var(--nb-navy-800);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--nb-navy-200);
  font-size: 11px;
  font-weight: 500;
}

.nsb-footer .builder-separator {
  opacity: 0.4;
  margin: 0 6px;
}

.nsb-footer .builder-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nsb-footer .builder-status-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nb-success);
  box-shadow: 0 0 0 3px rgba(46, 125, 79, 0.25);
}

.nsb-footer .builder-status.is-dirty .builder-status-indicator {
  background: var(--nb-warning);
  box-shadow: 0 0 0 3px rgba(185, 119, 14, 0.25);
}

.nsb-footer .builder-status.is-saving .builder-status-indicator {
  background: var(--nb-info);
  animation: nb-pulse 1s ease-in-out infinite;
}

.nsb-footer .builder-version {
  opacity: 0.65;
  font-size: 10px;
}

/* ============================= Toasts ====================================== */

.nb-toast-wrap {
  position: fixed;
  bottom: 44px;
  left: 20px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 340px;
}

.nb-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--nb-radius);
  background: var(--nb-navy-800);
  color: #fff;
  font-family: var(--nb-font);
  font-size: 13px;
  line-height: 1.5;
  box-shadow: var(--nb-shadow-lg);
  border-right: 3px solid var(--nb-info);
  animation: nb-toast-in 0.22s ease both;
}

.nb-toast .nb-toast-icon {
  flex: 0 0 auto;
  margin-top: 1px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  font-size: 10px;
}

.nb-toast.nb-toast-success {
  border-right-color: var(--nb-success);
}

.nb-toast.nb-toast-error {
  border-right-color: var(--nb-danger);
}

.nb-toast.nb-toast-warning {
  border-right-color: var(--nb-warning);
}

.nb-toast.nb-toast-leave {
  animation: nb-toast-out 0.2s ease both;
}

/* ============================= Modal ======================================= */

.nb-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999995;
  background: rgba(6, 13, 26, 0.6);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: nb-fade-in 0.18s ease both;
}

.nb-modal {
  width: 640px;
  max-width: calc(100vw - 48px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--nb-surface);
  border-radius: var(--nb-radius-lg);
  box-shadow: var(--nb-shadow-lg);
  overflow: hidden;
  animation: nb-pop-in 0.18s ease both;
}

.nb-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--nb-line);
}

.nb-modal-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--nb-navy-700);
}

.nb-modal-close {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--nb-muted);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.nb-modal-close:hover {
  background: var(--nb-navy-100);
  color: var(--nb-navy-700);
}

.nb-modal-body {
  padding: 18px;
  overflow: auto;
  font-size: 13px;
  line-height: 1.7;
  color: var(--nb-text);
}

.nb-kbd-table {
  width: 100%;
  border-collapse: collapse;
}

.nb-kbd-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--nb-line);
  font-size: 13px;
}

.nb-kbd-table td:last-child {
  text-align: left;
}

.nb-kbd {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--nb-radius-xs);
  background: var(--nb-navy-100);
  border: 1px solid var(--nb-line-strong);
  border-bottom-width: 2px;
  font-family: Consolas, monospace;
  font-size: 12px;
  color: var(--nb-navy-700);
}

/* ============================= Context menu ================================ */

.nb-context-menu {
  position: fixed;
  z-index: 999998;
  min-width: 190px;
  padding: 6px;
  background: var(--nb-surface);
  border: 1px solid var(--nb-line);
  border-radius: var(--nb-radius);
  box-shadow: var(--nb-shadow-lg);
  animation: nb-pop-in 0.12s ease both;
}

.nb-context-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: var(--nb-radius-sm);
  font-family: var(--nb-font);
  font-size: 13px;
  color: var(--nb-text);
  cursor: pointer;
  text-align: right;
  transition: background 0.12s ease;
}

.nb-context-menu-item:hover {
  background: var(--nb-gold-100);
}

.nb-context-menu-item .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
  color: var(--nb-gold-600);
}

.nb-context-menu-item.nb-danger {
  color: var(--nb-danger);
}

.nb-context-menu-item.nb-danger .dashicons {
  color: var(--nb-danger);
}

.nb-context-menu-sep {
  height: 1px;
  margin: 5px 4px;
  background: var(--nb-line);
}

/* ============================= Scrollbars ================================== */

.nsb-workspace *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.nsb-workspace *::-webkit-scrollbar-track {
  background: transparent;
}

.nsb-workspace *::-webkit-scrollbar-thumb {
  background: var(--nb-line-strong);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.nsb-workspace *::-webkit-scrollbar-thumb:hover {
  background: var(--nb-faint);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* ============================= Device labels =============================== */

.nb-device-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--nb-navy-200);
  font-size: 10px;
}

.nb-menu-element{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.nb-menu-element a{color:#fff;text-decoration:none;padding:6px 10px;border-radius:3px}.nb-menu-element a:hover{background:rgba(255,255,255,.12)}
.nb-pricing-grid{display:grid;gap:16px}.nb-pricing-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:24px;text-align:center;box-shadow:0 3px 12px rgba(0,0,0,.05)}.nb-pricing-card.is-featured{border:2px solid #C9A35C;transform:translateY(-4px)}.nb-pricing-card h3{margin:0 0 10px;color:#0B2540}.nb-pricing-price{font-size:28px;font-weight:800;color:#C9A35C;margin:10px 0}.nb-pricing-card p{color:#64748b;min-height:40px}.nb-pricing-card>a{display:inline-block;background:#0B2540;color:#fff;text-decoration:none;border-radius:4px;padding:9px 16px}