/* ---------- Services catalog ---------- */
  .service-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px;}
  .service-card {
  padding:18px;
  position:relative;
  transition:box-shadow .2s ease, transform .2s ease;
  display:flex;
  flex-direction:column;
  gap:12px;
}
  .service-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
  .service-card.inactive{opacity:.6;}
  .service-card-top{display:flex; align-items:flex-start; gap:12px;}
  .service-ic{width:44px;height:44px;border-radius:12px; background:var(--purple-100); color:var(--purple-600); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .service-ic svg{width:20px;height:20px;}
  .service-name{font-size:15px; font-weight:700; letter-spacing:-.01em;}
  .service-cat{font-size:11px; font-weight:600; color:var(--ink-500); margin-top:1px;}
  .service-popular{
    margin-left:auto; font-size:9.5px; font-weight:700; background:var(--amber-50); color:var(--amber-600);
    padding:3px 8px; border-radius:20px; flex-shrink:0; white-space:nowrap;
  }
  .service-desc-toggle{
    margin-left:auto; flex-shrink:0; width:24px; height:24px; border-radius:8px; border:none;
    background:none; color:var(--ink-400); display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:transform .18s ease, background .18s ease;
  }
  .service-desc-toggle:hover{background:var(--ink-100); color:var(--ink-700);}
  .service-desc-toggle svg{width:16px;height:16px;}
  .service-card.desc-open .service-desc-toggle{transform:rotate(180deg);}
  .service-desc{
    font-size:12.4px; color:var(--ink-500); line-height:1.5;
    display:none;
  }
  .service-card.desc-open .service-desc{display:block;}
  .service-meta-row{display:flex; align-items:center; gap:16px; font-size:12.6px; color:var(--ink-700); font-weight:600;}
  .service-meta-row span{display:flex; align-items:center; gap:5px;}
  .service-meta-row svg{width:13px;height:13px; color:var(--ink-500);}
  .service-stats-row{display:flex; gap:10px;}
  .service-stat-chip{flex:1; background:var(--ink-100); border-radius:10px; padding:8px 10px;}
  .service-stat-chip b{display:block; font-size:13px;}
  .service-stat-chip span{font-size:10.5px; color:var(--ink-500);}
  .service-card-footer{display:flex; align-items:center; gap:8px; padding-top:10px; border-top:1px solid var(--border);}


/* ---------- Add Service AI wizard ---------- */
/* Scoped to #serviceWizardSteps — this is a text-tab label, not the small
   circular step-number used elsewhere (staff wizard, marketing.css's own
   already-scoped ".wizard-step .wizard-step-dot"). Without the scope +
   explicit reset below, base.css's ".wizard-step-dot" rule (meant for a
   24x24 circle) still supplies width/height/border-radius/display for
   this element too — CSS cascades per-property, not per-rule, so those
   properties leaked through even though this rule's own font/color/border
   properties did win. The leaked 24x24 circular box then had to fit a full
   sentence ("2. Photo & Description"), which overflowed and visually
   overlapped the next tab. */
#serviceWizardSteps.wizard-steps{display:flex; gap:14px; padding:0 20px 12px; border-bottom:1px solid var(--border); margin-bottom:14px;}
#serviceWizardSteps .wizard-step-dot{width:auto; height:auto; border-radius:0; background:transparent; display:inline; font-size:11.5px; font-weight:600; color:var(--ink-400); padding-bottom:10px; border-bottom:2px solid transparent;}
#serviceWizardSteps .wizard-step-dot.active{color:var(--purple-600); border-bottom-color:var(--purple-600);}
#serviceWizardSteps .wizard-step-dot.done{color:var(--ink-700);}

.service-ai-processing{
  position:absolute; inset:0; background:rgba(255,255,255,.94); z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; border-radius:inherit;
}
.ai-spin svg{animation:service-ai-spin 0.9s linear infinite; color:var(--purple-600);}
@keyframes service-ai-spin{to{transform:rotate(360deg);}}
.ai-processing-text{font-size:13px; font-weight:600; color:var(--ink-700);}

.service-suggest-dropdown{
  display:none; position:absolute; left:0; right:0; top:100%; margin-top:4px; z-index:6;
  background:var(--card-bg); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow-md); max-height:260px; overflow-y:auto; padding:6px;
}
.service-suggest-dropdown.show{display:block;}
.service-suggest-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; text-align:left; padding:9px 10px; border-radius:9px; border:none; background:none; cursor:pointer;
}
.service-suggest-item:hover, .service-suggest-item.active{background:var(--purple-100);}
.service-suggest-item-name{font-size:12.8px; font-weight:600; color:var(--ink-700);}
.service-suggest-item-meta{font-size:11px; font-weight:600; color:var(--purple-600); white-space:nowrap;}
.service-suggest-empty{font-size:11.5px; color:var(--ink-400); padding:8px 10px;}
.service-autodetect-note{
  display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--purple-600); margin-top:8px;
}
.service-autodetect-note svg{width:13px;height:13px;}

.service-ai-photo-wrap{
  width:100%; aspect-ratio:1/1; max-width:220px; margin:0 auto; border-radius:14px; overflow:hidden;
  background:var(--ink-100); display:flex; align-items:center; justify-content:center;
}
.service-ai-photo{width:100%; height:100%; object-fit:cover; display:block;}
.service-ai-photo-empty{font-size:12px; color:var(--ink-400); text-align:center; padding:0 16px;}

.service-channels{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
.service-channel-chip{
  display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  padding:8px 12px; border-radius:10px; border:1px solid var(--border); cursor:pointer;
}
.service-channel-chip:has(input:checked){background:var(--purple-100); border-color:var(--purple-600); color:var(--purple-600);}
#serviceModalOverlay .modal{position:relative;}

/* ---------- Services · select-all + bulk action bar ---------- */
.svc-selectbar{display:flex; align-items:center; gap:8px; margin:14px 2px 10px;}
.svc-selectbar label{font-size:12.6px; font-weight:600; color:var(--ink-500); cursor:pointer;}
#view-services .bulk-toolbar{border:1px solid var(--purple-100); border-radius:12px; margin:0 0 14px; padding:10px 14px;}
#view-services .bulk-toolbar .action-btn-sm{min-height:34px; padding:0 14px; border-radius:9px; font-weight:600;}
#view-services .bulk-toolbar .svc-bulk-delete{color:var(--red-600); border-color:var(--red-100, #fecaca);}
#view-services .bulk-toolbar .svc-bulk-delete:hover{background:var(--red-50);}
/* per-card checkbox: sit in the corner without covering the icon, highlight when selected */
.service-card{position:relative;}
.service-card .service-row-check{top:12px !important; left:12px !important; background:var(--card-bg);}
.service-card:has(.service-row-check:checked){border-color:var(--purple-600); box-shadow:0 0 0 2px var(--purple-100);}
.service-card .service-card-top{padding-left:14px;}

/* ---------- Bulk Add modal · category | checklist split ----------
   showBulkScreen() toggles `style.display = ''` to reveal a screen, which wiped the old
   inline `display:flex` and collapsed the two columns into a vertical stack (the checklist
   fell below the fold). The layout now lives in CSS so it survives the toggle. */
.bulk-split{display:flex; min-height:380px;}
.bulk-split #bulkCategoryList{max-height:60vh; overflow-y:auto;}
.bulk-split #bulkChecklistList{min-height:160px; max-height:46vh;}
@media (max-width:640px){
  .bulk-split{flex-direction:column; min-height:0;}
  .bulk-split #bulkCategoryList{width:auto !important; max-height:none; border-right:0 !important; border-bottom:1px solid var(--border); display:flex; gap:6px; overflow-x:auto; padding:8px !important;}
  .bulk-split #bulkCategoryList [data-bulk-cat]{width:auto !important; flex:0 0 auto; white-space:nowrap; border:1px solid var(--border) !important; border-radius:10px;}
}
#bulkChecklistPane .search-box{flex:0 0 auto; max-width:none; min-width:0; width:100%;}
#bulkChecklistPane .form-check-row{white-space:nowrap; min-height:36px;}
#bulkServiceModalOverlay .form-hint-inline{font-size:12px; line-height:1.45;}
#bulkTotalSelectedCount{white-space:nowrap; font-weight:700; color:var(--purple-600);}
#bulkReviewList .form-hint-inline, #bulkServiceModalOverlay #bulkScreenReview p{font-size:12.8px;}

/* ---------- Combo + Package wizards (same look as the Add Service wizard) ---------- */
#comboModalOverlay .modal, #packageModalOverlay .modal{position:relative;}
.cm-steps{display:flex; flex-wrap:nowrap; gap:20px; padding:0 0 0 !important; margin:0 0 18px; border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none;}
.cm-steps::-webkit-scrollbar{display:none;}
.cm-steps .mkt-tab{flex:0 0 auto; padding:0 2px 11px; border-radius:0; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; font-size:12.5px; font-weight:600; color:var(--ink-500); background:transparent; cursor:pointer;}
.cm-steps .mkt-tab:hover{color:var(--ink-900);}
.cm-steps .mkt-tab.active{color:var(--purple-600); border-bottom-color:var(--purple-600); background:transparent;}

/* tighter, even form rhythm: only reserve error space when there is an error */
#comboModalOverlay .form-error, #packageModalOverlay .form-error{min-height:0;}
#comboModalOverlay .form-error:empty, #packageModalOverlay .form-error:empty{display:none;}
#comboModalOverlay .form-error:not(:empty), #packageModalOverlay .form-error:not(:empty){margin-top:2px;}
#comboModalOverlay .form-hint-inline, #packageModalOverlay .form-hint-inline{font-size:12px; line-height:1.45;}
#packageModalOverlay p.form-hint-inline{margin:0;}

/* item picker (step 2) */
#comboModalOverlay .search-box, #packageModalOverlay .search-box{max-width:none; width:100%; min-width:0; margin-bottom:0 !important;}
#comboItemPicker, #packageItemPicker{background:var(--card-bg);}
#comboItemPicker input[type=checkbox], #packageItemPicker input[type=checkbox]{width:17px; height:17px; accent-color:var(--purple-600); cursor:pointer;}
#comboItemPicker input[type=number], #packageItemPicker input[type=number]{width:64px; min-height:36px; padding:6px 10px; text-align:center;}

/* photo step */
#comboModalOverlay .service-ai-photo-wrap, #packageModalOverlay .service-ai-photo-wrap{margin:0 auto;}
#comboPhotoUploadBtn, #packagePhotoUploadBtn{display:block; margin:0 auto;}

/* footer: Cancel on the left, Back + Next/Save on the right */
#comboForm .modal-actions, #packageForm .modal-actions{margin-top:18px; padding-top:16px; border-top:1px solid var(--border); align-items:center;}
#comboCancelBtn, #packageCancelBtn{margin-right:auto;}

/* native checkboxes / radios use the brand colour everywhere */
.form-check-row input[type=checkbox], .form-check-row input[type=radio]{accent-color:var(--purple-600);}
#packageModalOverlay input[type=radio]{accent-color:var(--purple-600);}
#comboForm .modal-actions .btn-primary, #packageForm .modal-actions .btn-primary{margin-left:0;}

/* ---------- AI assist in the Combo + Package wizards ---------- */
.ai-assist{display:flex; align-items:center; gap:14px; padding:12px 14px; margin-bottom:14px; border-radius:12px; border:1px solid var(--purple-100); background:linear-gradient(135deg, var(--purple-50), var(--card-bg));}
.ai-assist-copy{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1;}
.ai-assist-copy b{font-size:13px; color:var(--ink-900);}
.ai-assist-copy span{font-size:12px; color:var(--ink-500); line-height:1.4;}
.ai-assist .ai-assist-btn{flex:0 0 auto; min-height:38px; padding:0 14px; white-space:nowrap; background:var(--card-bg); border:1px solid var(--purple-100); color:var(--purple-700, var(--purple-600)); font-weight:700;}
.ai-assist .ai-assist-btn:hover{background:var(--purple-50);}
.ai-assist .ai-assist-btn:disabled{opacity:.7; cursor:progress;}
#comboModalOverlay.is-edit #comboAiAssist, #comboModalOverlay.is-edit #comboAiSuggestions,
#packageModalOverlay.is-edit #packageAiAssist, #packageModalOverlay.is-edit #packageAiSuggestions{display:none;}

.ai-inline-btn{align-self:flex-start; margin-top:6px; padding:4px 0; background:none; border:0; color:var(--purple-600); font-size:12.5px; font-weight:700; cursor:pointer;}
.ai-inline-btn:hover{text-decoration:underline;}
.ai-inline-btn:disabled{opacity:.6; cursor:progress; text-decoration:none;}

.ai-suggest-list{display:flex; flex-direction:column; gap:10px; margin-bottom:6px;}
.ai-suggest-list:empty{display:none;}
.ai-loading, .ai-empty{margin:0; padding:12px 14px; border:1px dashed var(--border); border-radius:12px; font-size:12.6px; color:var(--ink-500);}
.ai-err{color:var(--red-600); border-color:var(--red-100, #fecaca); background:var(--red-50);}
.ai-dot{display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--purple-600); animation:ai-pulse 1s ease-in-out infinite;}
@keyframes ai-pulse{0%,100%{opacity:.25; transform:scale(.8);} 50%{opacity:1; transform:scale(1);}}

.ai-card{padding:14px; border:1px solid var(--border); border-radius:14px; background:var(--card-bg); display:flex; flex-direction:column; gap:8px;}
.ai-card:hover{border-color:var(--purple-100); box-shadow:var(--shadow-md);}
.ai-card-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.ai-card-head b{font-size:14px; color:var(--ink-900);}
.ai-card-price{font-size:14px; font-weight:800; color:var(--purple-600); white-space:nowrap;}
.ai-card-price s{font-size:12px; font-weight:500; color:var(--ink-500);}
.ai-card-desc{margin:0; font-size:12.6px; color:var(--ink-700); line-height:1.45;}
.ai-chips{display:flex; flex-wrap:wrap; gap:6px;}
.ai-chip{padding:3px 9px; border-radius:999px; background:var(--ink-100); color:var(--ink-700); font-size:11.5px; font-weight:600;}
.ai-chip.soft{background:var(--purple-50); color:var(--purple-600);}
.ai-eco{margin:0; padding:0 0 0 16px; font-size:12px; color:var(--ink-700); line-height:1.5;}
.ai-eco li.ai-warn{color:var(--amber-600); font-weight:600;}
.ai-eco-box{margin:0 0 14px; padding:10px 14px 10px 28px; border-radius:12px; background:var(--ink-100);}
.ai-reason{margin:0; font-size:12px; color:var(--ink-500); line-height:1.45;}
.ai-reason b{color:var(--ink-700);}
.ai-card-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:2px;}
.ai-card-actions .btn-primary{margin-left:0; min-height:38px; padding:0 16px;}
.ai-card-actions .btn-secondary{min-height:38px; padding:0 14px;}

@media (max-width:560px){
  .ai-assist{flex-direction:column; align-items:stretch;}
  .ai-assist .ai-assist-btn{width:100%;}
  .ai-card-head{flex-direction:column; gap:2px;}
}

/* Mobile: the four catalog tabs (Services / Products / Combos / Packages) used to share one row with the Add
   button, so Packages was hidden off-screen. Let the row wrap: tabs get the full width, Add sits underneath. */
@media (max-width: 520px){
  #view-services > div:first-child{flex-wrap:wrap !important;}
  #catalogTabSwitch{flex:1 1 100% !important;}
  #catalogTabSwitch .mkt-tab{padding-left:10px; padding-right:10px;}
  #unifiedAddWrap{flex:1 1 100%;}
  #unifiedAddBtn{width:100%; margin:0;}
}

/* One place for every "+ Add" call-to-action: empty states of Services / Products / Combos / Packages share one height. */
.svc-selectbar.is-hidden{display:none;}
#view-services .empty-state{min-height:300px; justify-content:center; padding-top:24px; padding-bottom:24px;}