/* Qannas product editor — calm light workspace */
:root {
  --editor-bg: #f4f7fb;
  --editor-surface: #ffffff;
  --editor-soft: #f8fafc;
  --editor-text: #172033;
  --editor-muted: #718096;
  --editor-line: #e7ecf3;
  --editor-primary: #0f9f8f;
  --editor-primary-dark: #087d72;
  --editor-primary-soft: #e8f8f5;
  --editor-shadow: 0 18px 50px rgba(29, 44, 72, .07);
}

html { scroll-behavior: smooth; }

body.product-editor-page {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--editor-text);
  background:
    radial-gradient(circle at 90% 0%, rgba(15, 159, 143, .07), transparent 28rem),
    var(--editor-bg) !important;
  font-family: 'Cairo', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.product-editor-page .main-content {
  width: 100% !important;
  max-width: 1600px;
  min-height: 100vh;
  margin: 0 auto !important;
  padding: 24px clamp(14px, 2.7vw, 42px) 40px;
  overflow: visible !important;
}

.product-editor-page .editor-topbar {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 22px !important;
  padding: 12px 15px !important;
  border: 1px solid rgba(222, 230, 240, .9);
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--editor-shadow) !important;
}

.editor-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }

.editor-back {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--editor-line) !important;
  border-radius: 12px !important;
  color: #64748b !important;
  background: var(--editor-soft) !important;
  box-shadow: none !important;
}

.editor-back:hover { color: var(--editor-primary-dark) !important; border-color: #bfe3de !important; background: var(--editor-primary-soft) !important; }
.editor-brand-copy { min-width: 0; }
.editor-kicker { display: block; margin-bottom: 2px; color: var(--editor-primary-dark); font-size: 10px; font-weight: 800; }
.editor-brand-copy h1 { margin: 0; color: #1d273b; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.editor-brand-copy p { margin: 2px 0 0; color: #94a0b1; font-size: 10px; }

.editor-products-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid var(--editor-line);
  border-radius: 11px;
  color: #536176;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.editor-products-link:hover { color: var(--editor-primary-dark); border-color: #bfe3de; background: var(--editor-primary-soft); }
.editor-products-link .material-symbols-rounded { font-size: 18px; }

.product-editor-page .container-fluid { padding: 0 !important; }
.product-editor-page .container-fluid > .row { --bs-gutter-x: 16px; align-items: flex-start; }

.product-editor-page .form-card {
  max-width: none;
  margin: 0 !important;
  padding: clamp(18px, 2vw, 26px) !important;
  border: 1px solid rgba(222, 230, 240, .95);
  border-radius: 20px;
  background: var(--editor-surface);
  box-shadow: var(--editor-shadow);
  transition: none;
}

.product-editor-page .form-card:hover { box-shadow: var(--editor-shadow); }

.editor-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  padding-bottom: 17px;
  border-bottom: 1px solid #edf1f6;
}

.editor-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.editor-title-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 12px;
  color: var(--editor-primary-dark);
  background: var(--editor-primary-soft);
}
.editor-title-icon .material-symbols-rounded { font-size: 21px; }
.editor-stage-kicker { display: block; margin-bottom: 1px; color: #93a0b2; font-size: 9px; font-weight: 800; }
.editor-title h2 { margin: 0; color: #273146; font-size: 16px; font-weight: 800; }

.product-editor-page .step-indicator {
  display: flex;
  align-items: center;
  gap: 7px !important;
  margin: 0 !important;
  direction: rtl;
  flex-direction: row;
}

.product-editor-page .step-indicator::before { display: none; }

.product-editor-page .step-circle {
  width: auto !important;
  height: 38px !important;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--editor-line);
  border-radius: 11px;
  color: #8794a7;
  background: var(--editor-soft);
  box-shadow: none;
  font-size: 10px !important;
  font-weight: 700;
  transform: none;
}

.product-editor-page .step-circle b {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #6f7d91;
  background: #fff;
  font-size: 9px;
}

.product-editor-page .step-circle small { font-size: 9px; font-weight: 700; white-space: nowrap; }
.product-editor-page .step-circle.active { color: var(--editor-primary-dark); border-color: #bfe9e2; background: var(--editor-primary-soft); box-shadow: none; transform: none; }
.product-editor-page .step-circle.active b { color: #fff; background: var(--editor-primary); }

.variant-step-intro {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 17px;
  padding: 12px 14px;
  border: 1px solid #d9eee9;
  border-radius: 13px;
  background: #f3fbf9;
}
.variant-step-intro .material-symbols-rounded { color: var(--editor-primary); font-size: 20px; }
.variant-step-intro strong { display: block; color: #35675f; font-size: 11px; }
.variant-step-intro span:last-child { display: block; margin-top: 2px; color: #78958f; font-size: 9px; line-height: 1.6; }

.product-editor-page .form-label {
  margin-bottom: 6px !important;
  color: #526075 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.product-editor-page .custom-input,
.product-editor-page .form-select,
.product-editor-page select.form-control {
  min-height: 44px;
  padding: 10px 12px !important;
  border: 1px solid var(--editor-line) !important;
  border-radius: 11px !important;
  color: #334155;
  background: var(--editor-soft);
  box-shadow: none !important;
  font-size: 11px;
  font-weight: 600;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.product-editor-page .custom-input:hover,
.product-editor-page .form-select:hover,
.product-editor-page select.form-control:hover { border-color: #ccd6e2 !important; background: #fff; }

.product-editor-page .custom-input:focus,
.product-editor-page .form-select:focus,
.product-editor-page select.form-control:focus {
  border-color: rgba(15,159,143,.55) !important;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(15,159,143,.08) !important;
}

.product-editor-page textarea.custom-input { min-height: 112px; line-height: 1.7; }
.product-editor-page .custom-input[readonly] { color: #7c899b; border-style: solid !important; background: #f1f5f9 !important; }
.product-editor-page .custom-input-group .custom-btn-addon { min-width: 44px; margin: 0; border-color: var(--editor-line); border-radius: 11px 0 0 11px !important; color: #65748a; background: #f1f5f9; box-shadow: none; }

.form-section-divider {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 6px 0 2px;
  color: #8290a4;
  font-size: 9px;
  font-weight: 800;
}
.form-section-divider::before, .form-section-divider::after { content: ''; height: 1px; flex: 1; background: #edf1f5; }
.form-section-divider .material-symbols-rounded { color: #9aa7b7; font-size: 15px; }

.option-switch-card {
  min-height: 44px;
  padding: 7px 11px !important;
  border: 1px solid var(--editor-line) !important;
  border-radius: 11px !important;
  background: var(--editor-soft) !important;
}
.option-switch-card .form-check-label { color: #59677b !important; font-size: 10px !important; }

.product-editor-page .form-switch .form-check-input { width: 40px !important; height: 23px !important; border: 0 !important; background: #dfe5ec !important; box-shadow: none !important; }
.product-editor-page .form-switch .form-check-input::after { top: 2px; right: 2px; width: 19px; height: 19px; box-shadow: 0 2px 4px rgba(23,32,51,.17); }
.product-editor-page .form-switch .form-check-input:checked { background: var(--editor-primary) !important; }
.product-editor-page .form-switch .form-check-input:checked::after { right: calc(100% - 21px); }

.product-editor-page .select2-container--default .select2-selection--single,
.product-editor-page .select2-container--default .select2-selection--multiple {
  min-height: 44px !important;
  padding: 5px 11px !important;
  border: 1px solid var(--editor-line) !important;
  border-radius: 11px !important;
  background: var(--editor-soft) !important;
  box-shadow: none !important;
}
.product-editor-page .select2-container--default.select2-container--focus .select2-selection--single,
.product-editor-page .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: rgba(15,159,143,.55) !important; box-shadow: 0 0 0 4px rgba(15,159,143,.08) !important; }
.product-editor-page .select2-dropdown { overflow: hidden; border-color: var(--editor-line); border-radius: 11px; box-shadow: 0 16px 35px rgba(29,44,72,.12); }

.editor-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding-top: 4px; }
.inline-create-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 5px 0 0 !important;
  padding: 3px 0 !important;
  color: var(--editor-primary-dark) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  text-transform: none !important;
  box-shadow: none !important;
}
.inline-create-action .material-symbols-rounded { font-size: 14px; }
.product-editor-page .editor-primary-button,
.product-editor-page #variantsColumn > .form-card > .finish-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 11px !important;
  color: #fff !important;
  background: var(--editor-primary) !important;
  box-shadow: 0 8px 20px rgba(15,159,143,.18) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: none;
  transition: background-color .15s ease, transform .15s ease;
}
.product-editor-page .editor-primary-button:hover,
.product-editor-page #variantsColumn > .form-card > .finish-button:hover { background: var(--editor-primary-dark) !important; transform: translateY(-1px); }
.editor-primary-button .material-symbols-rounded { font-size: 17px; }

.product-editor-page .drop-area { min-height: 112px !important; padding: 16px !important; border: 1.5px dashed #cdd7e3; border-radius: 13px; background: var(--editor-soft); transform: none !important; box-shadow: none !important; }
.product-editor-page .drop-area:hover, .product-editor-page .drop-area.dragover { border-color: var(--editor-primary); background: #f3fbf9; transform: none; box-shadow: none; }
.product-editor-page .drop-area .icon-text svg { width: 26px !important; height: 26px !important; color: var(--editor-primary); transform: none !important; }

#variantsColumn > .form-card {
  top: 18px !important;
  max-height: calc(100vh - 36px) !important;
  padding: 17px !important;
  border-radius: 18px;
  scrollbar-width: thin !important;
  scrollbar-color: #dce4ed transparent;
}
.variants-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 13px; padding-bottom: 12px; border-bottom: 1px solid #edf1f5; }
.variants-panel-title { display: flex; align-items: center; gap: 8px; }
.variants-panel-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: var(--editor-primary-dark); background: var(--editor-primary-soft); }
.variants-panel-icon .material-symbols-rounded { font-size: 17px; }
.variants-panel-title h3 { margin: 0; color: #344055; font-size: 12px; font-weight: 800; }
.variants-panel-title p { margin: 1px 0 0; color: #9aa5b5; font-size: 8px; }
#variantsCountBadge { min-width: 25px; padding: 5px 7px; border-radius: 8px; color: var(--editor-primary-dark); background: var(--editor-primary-soft) !important; font-size: 9px; }

#variantsList .card { border: 1px solid var(--editor-line) !important; border-radius: 13px !important; background: #fff; box-shadow: none !important; }
#variantsList .card:hover { border-color: #c9e5e1 !important; background: #fcfefe; }
#variantsList .card-body { padding: 11px !important; }
#variantsList .btn { box-shadow: none !important; font-size: 10px; text-transform: none; }

.preview-shell-label { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px 0 11px; color: #8c98aa; font-size: 9px; font-weight: 800; }
.preview-shell-label .material-symbols-rounded { color: var(--editor-primary); font-size: 16px; }
.product-editor-page .mobile-mockup { max-width: 320px; height: min(660px, calc(100vh - 145px)); min-height: 560px; margin: 0 auto; border: 1px solid #dfe6ee; border-radius: 32px; background: #f8fafc; box-shadow: 0 18px 45px rgba(29,44,72,.12); }
.product-editor-page .mobile-mockup::before { width: 95px; height: 20px; background: #172033; border-radius: 0 0 13px 13px; box-shadow: none; }
.product-editor-page .app-product-image { height: 235px; }
.product-editor-page .app-product-info { padding: 17px; }
.product-editor-page .app-product-title { color: #344055; font-size: 17px; }
.product-editor-page .app-product-price { color: var(--editor-primary); font-size: 18px; }
.product-editor-page .app-product-desc { margin-bottom: 12px; color: #77859a; font-size: 10px; }
.product-editor-page .app-btn-cart { border-radius: 12px; background: var(--editor-primary); box-shadow: 0 8px 20px rgba(15,159,143,.18); font-size: 12px; }

.product-editor-page .modal-content { overflow: hidden; border: 1px solid var(--editor-line); border-radius: 20px !important; box-shadow: 0 28px 80px rgba(23,32,51,.16); }
.product-editor-page .modal-header { border-bottom-color: var(--editor-line); background: #fbfcfe; }
.swal2-popup { border: 1px solid var(--editor-line); border-radius: 20px !important; font-family: 'Cairo', sans-serif !important; }
.swal2-confirm, .swal2-cancel, .swal2-deny { border-radius: 10px !important; font-family: 'Cairo', sans-serif !important; font-weight: 700 !important; }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(15,159,143,.2); outline-offset: 2px; }

@media (max-width: 1199px) {
  .product-editor-page .mobile-mockup { position: relative; height: 620px; }
}

@media (max-width: 991px) {
  .product-editor-page .main-content { padding: 15px; }
  .product-editor-page .container-fluid > .row { gap: 15px 0; }
  #variantsColumn > .form-card, #previewColumn > .sticky-top { position: relative !important; top: auto !important; }
  .product-editor-page .mobile-mockup { height: 620px; }
}

@media (max-width: 680px) {
  .product-editor-page .editor-topbar { align-items: flex-start; }
  .editor-brand-copy p, .editor-products-link span:not(.material-symbols-rounded) { display: none; }
  .editor-products-link { width: 42px; padding: 0; }
  .editor-card-header { align-items: flex-start; flex-direction: column; }
  .product-editor-page .step-indicator { width: 100%; }
  .product-editor-page .step-circle { flex: 1; justify-content: center; }
  .product-editor-page .form-card { padding: 16px !important; }
  .product-editor-page .mobile-mockup { min-height: 540px; height: 590px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}