/* KSMTN Onboarding v2 — Universal UI
 *
 * All shortcode cards must use these classes.
 * Keep it clean, white-card first, theme-safe outer wrapper.
 */

/* [MD-003][TA_011] Transparent wrapper (never fight the theme container) */
.ksmtn2-card-wrap{
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* [MD-003][TA_009] Card surface */
.ksmtn2-card{
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
  padding: 18px;
}

.ksmtn2-card__title{
  margin: 0 0 6px 0;
  font-size: 20px;
  line-height: 1.2;
  color: #0f172a;
}

.ksmtn2-card__subtitle{
  margin: 0 0 14px 0;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(15, 23, 42, 0.72);
}

/* [MD-003][TA_009] Layout */
.ksmtn2-row{ display:flex; gap: 12px; flex-wrap: wrap; }
.ksmtn2-col{ flex: 1 1 240px; min-width: 220px; }
.ksmtn2-divider{ height:1px; background: rgba(15, 23, 42, 0.08); margin: 14px 0; }

/* [MD-003][TA_009] Fields */
.ksmtn2-field{ margin: 0 0 12px 0; }
/* Spacer between Category and Subcategory */
.ksmtn2-bc-subwrap{
  margin-top: 14px;
}
.ksmtn2-label{
  display:block;
  font-size: 13px;
  margin-bottom: 6px;
  color: rgba(15,23,42,0.85);
}
.ksmtn2-hint{
  font-size: 12px;
  margin: -2px 0 8px 0;
  color: rgba(15,23,42,0.60);
}

.ksmtn2-input,
.ksmtn2-select,
.ksmtn2-textarea{
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  background: #fff;
  color: #0f172a;
  box-sizing: border-box;
}

.ksmtn2-textarea{ min-height: 96px; resize: vertical; }

.ksmtn2-input:focus,
.ksmtn2-select:focus,
.ksmtn2-textarea:focus{
  border-color: rgba(37, 99, 235, 0.50);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}

/* [MD-003][TA_009] Buttons */
.ksmtn2-actions{ display:flex; gap: 10px; margin-top: 8px; }
.ksmtn2-btn{
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.ksmtn2-btn--full{ width: 100%; }
.ksmtn2-btn--primary{
  background: #2563eb;
  color: #fff;
}
.ksmtn2-btn--secondary{
  background: rgba(15,23,42,0.06);
  color: #0f172a;
}

.ksmtn2-btn:disabled,
.ksmtn2-is-disabled{
  opacity: 0.55;
  cursor: not-allowed;
}

/* [MD-003][TA_009] Alerts */
.ksmtn2-alert{
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.35;
  margin: 0 0 12px 0;
  border: 1px solid rgba(15, 23, 42, 0.10);
}
.ksmtn2-alert--success{ background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.25); color: #065f46; }
.ksmtn2-alert--error{ background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.25); color: #7f1d1d; }
.ksmtn2-alert--warn{ background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.30); color: #7c2d12; }
.ksmtn2-alert--info{ background: rgba(59,130,246,0.10); border-color: rgba(59,130,246,0.25); color: #1e3a8a; }

/* [MD-003][TA_011] Make sure common themes don't squash spacing */
.ksmtn2-card-wrap *{ box-sizing: border-box; }

/* [MD-009][TA_030] Password strength meter + criteria checklist */
.ksmtn2-password-meter{ margin: 14px 0 18px; }
.ksmtn2-meter{ width: 100%; height: 10px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.12); background: rgba(255,255,255,0.8); overflow: hidden; }
.ksmtn2-meter__bar{ height: 100%; width: 0%; border-radius: 999px; background: rgba(2,132,199,0.9); transition: width 160ms ease; }

.ksmtn2-criteria{ list-style: none; padding: 10px 0 0; margin: 0; display: grid; gap: 6px; }
.ksmtn2-criteria li{ font-size: 13px; color: rgba(0,0,0,0.72); padding-left: 22px; position: relative; }
.ksmtn2-criteria li:before{ content: '○'; position: absolute; left: 0; top: 0; color: rgba(0,0,0,0.35); }
.ksmtn2-criteria li.is-ok{ color: rgba(0,0,0,0.85); }
.ksmtn2-criteria li.is-ok:before{ content: '✓'; color: rgba(2,132,199,1); }

/* [MD-014][TA_048] Business category: hide subcategory until group selected */
.ksmtn2-bc-subwrap--hidden{ display:none; }


/* [MD-015][TA_052] Step-2 Map */
.ksmtn2-step2-map{width:100%;height:320px;border:1px solid rgba(0,0,0,0.12);border-radius:14px;overflow:hidden;}