/*
 * Extra components for the v2 public forms: the template ships text, tel,
 * select and textarea only, so every other attribute type lives here.
 * The visual language (radius, shadow, purple scale) follows styles.css.
 */
:root {
  --nm-primary: #6837df;
  --nm-strong: #4f25ba;
  --nm-deep: #3a1a8c;
  --nm-glow: #a97bff;
  --nm-chip: #f0eaff;
  --nm-surface: #faf8ff;
  --nm-stroke: #ded4f7;
  --nm-line: #e6e2f6;
  --nm-ink: #1a1b49;
  --nm-muted: #727c9a;
  --nm-red: #d83f60;
  --nm-green: #159a71;
}

/* ---------- shared bits the base sheets do not know about ---------- */
/* The rules below set display: on a class, which would otherwise beat the
   browser's own [hidden] default and leave empty blocks on the page. */
[hidden] { display: none !important; }
.icon-library, .svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.field .field-title { display: block; margin: 0 3px 7px; color: #28264c; font-weight: 750; font-size: 13px; line-height: 1.6; }
.field .field-title .optional, .field .field-title .required { font-size: 11px; }
.field .field-title .required { color: #e33e5e; }
.field-suffix { pointer-events: none; position: absolute; left: 15px; color: #6c659c; font-size: 12px; font-weight: 700; z-index: 1; }
.field-control.has-suffix input { padding-left: 58px !important; }

/* Keep the client-side error strip out of the layout until JS has something to say. */
#nm-summary:not(.is-visible),
#nm-summary:empty,
#nm-summary[hidden] { display: none !important; }
.file-note { font-size: 11px; color: var(--nm-muted); font-weight: 700; white-space: nowrap; }
.search-token em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- notices ---------- */.nm-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 13px 16px;
  border-radius: 15px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
}
.nm-notice svg { flex-shrink: 0; width: 19px; height: 19px; }
.nm-notice.is-error { color: #a4172f; background: #fff1f4; border: 1px solid #f6ccd6; }
.nm-notice.is-success { color: #0b7a57; background: #eefaf4; border: 1px solid #bfe9d8; }

/* ---------- section headers inside one page ---------- */
.form-section + .form-section { margin-top: 22px; }
.form-section > .form-grid { margin-top: 4px; }

/* ---------- hint under a field ---------- */
.field-hint { display: block; margin: -2px 3px 0; color: var(--nm-muted); font-size: 11px; line-height: 1.7; }

/* ---------- switch (Checkbox) ---------- */
.field label.nm-switch { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; box-sizing: border-box; margin: 0; padding: 12px 14px; border: 1.5px solid var(--nm-stroke); border-radius: 14px; background: var(--nm-surface); cursor: pointer; transition: border-color .2s, background .2s; }
.field label.nm-switch:hover { border-color: var(--nm-glow); }
.field label.nm-switch input[type="checkbox"] { position: absolute; inset-inline-start: 14px; top: 50%; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; outline: none; box-shadow: none; transform: translateY(-50%); }
@media (min-width: 561px) {
  .field[data-type="checkbox"] .nm-switch { margin-top: 27px; }
}
.switch-track { position: relative; flex: 0 0 auto; width: 46px; height: 26px; border-radius: 999px; background: #ddd8ef; transition: background .2s; }
.switch-track::after { content: ''; position: absolute; inset-inline-start: 4px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(40, 24, 107, .28); transition: transform .2s; }
.nm-switch input:checked + .switch-track { background: linear-gradient(115deg, var(--nm-primary), var(--nm-glow)); }
[dir="rtl"] .nm-switch input:checked + .switch-track::after { transform: translateX(-20px); }
[dir="ltr"] .nm-switch input:checked + .switch-track::after { transform: translateX(20px); }
.nm-switch input:focus-visible + .switch-track { outline: 3px solid #b6a0fa; outline-offset: 3px; }
.switch-text { flex: 1; font-size: 13px; font-weight: 700; color: #2d2b51; line-height: 1.6; }
.field.is-invalid .nm-switch { border-color: #e79aa9; background: #fffafb; }

/* ---------- pills (MultiSelect) ---------- */
.nm-pills { display: flex; flex-wrap: wrap; gap: 9px; }
.pill { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1.5px solid var(--nm-stroke); border-radius: 999px; background: #fff; color: #3b3866; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill svg { width: 15px; height: 15px; opacity: 0; transition: opacity .15s; }
.pill:hover { border-color: var(--nm-glow); }
.pill.is-on { color: #fff; border-color: transparent; background: linear-gradient(115deg, var(--nm-primary), var(--nm-glow)); }
.pill.is-on svg { opacity: 1; }
.pill:focus-within { outline: 3px solid #b6a0fa; outline-offset: 2px; }

/* ---------- searchable lookup (Select with lookup / Lookup) ---------- */
.search-control { position: relative; }
.field .search-control input[type="hidden"] { display: none; }
.search-input { padding-right: 44px !important; }
.search-menu { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 6px); max-height: 244px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1.5px solid var(--nm-stroke); border-radius: 15px; box-shadow: 0 18px 40px rgba(52, 29, 133, .16); }
.search-menu[hidden] { display: none; }
.search-option { padding: 10px 12px; border-radius: 11px; font-size: 13px; font-weight: 600; color: #2d2b51; cursor: pointer; }
.search-option:hover, .search-option.is-active { background: var(--nm-chip); color: var(--nm-strong); }
.search-empty { padding: 12px; color: var(--nm-muted); font-size: 12px; text-align: center; }
.search-token { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 9px 12px; border-radius: 12px; background: var(--nm-chip); color: var(--nm-strong); font-size: 12.5px; font-weight: 800; }
.search-token[hidden] { display: none; }
.search-token button { border: 0; background: transparent; color: inherit; font-size: 12px; font-weight: 800; cursor: pointer; padding: 2px 4px; }
.nm-searching { color: var(--nm-muted); }

/* ---------- rows (MultiField) ---------- */
.nm-rows { display: grid; gap: 9px; }
.row-item { display: flex; align-items: center; gap: 9px; }
.row-item input { flex: 1; height: 48px; padding: 10px 14px; }
.row-remove { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid #f1d7de; border-radius: 12px; background: #fff6f8; color: var(--nm-red); }
.row-remove:hover:not(:disabled) { background: #ffe9ee; }
.row-remove:disabled { opacity: .4; cursor: not-allowed; }
.row-remove svg { width: 18px; height: 18px; }
.row-add { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 3px; padding: 9px 15px; border: 1.5px dashed var(--nm-stroke); border-radius: 12px; background: var(--nm-surface); color: var(--nm-strong); font-size: 12.5px; font-weight: 800; }
.row-add:hover { border-color: var(--nm-glow); background: var(--nm-chip); }
.row-add svg { width: 17px; height: 17px; }

/* ---------- file (File) ---------- */
.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 22px 16px; border: 1.8px dashed var(--nm-stroke); border-radius: 17px; background: var(--nm-surface); color: var(--nm-muted); text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.dropzone:hover, .dropzone.is-over { border-color: var(--nm-glow); background: var(--nm-chip); }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.dropzone svg { width: 26px; height: 26px; color: var(--nm-primary); }
.dropzone strong { color: #35315f; font-size: 13px; font-weight: 800; }
.dropzone span { font-size: 11px; line-height: 1.7; }
.file-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; padding: 10px 13px; border-radius: 13px; background: var(--nm-chip); color: var(--nm-deep); font-size: 12.5px; font-weight: 800; }
.file-row > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.file-row svg { flex-shrink: 0; width: 18px; height: 18px; }
.file-row em { overflow: hidden; text-align: start; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.file-row button { flex-shrink: 0; border: 0; background: transparent; color: var(--nm-red); font-size: 12px; font-weight: 800; cursor: pointer; }

/* ---------- signature ---------- */
.sign-box { border: 1.5px solid var(--nm-stroke); border-radius: 17px; background: #fff; overflow: hidden; }
.sign-canvas { display: block; width: 100%; height: 190px; touch-action: none; cursor: crosshair; background: repeating-linear-gradient(180deg, #fff 0 36px, #faf9ff 36px 37px); }
.sign-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--nm-line); background: var(--nm-surface); }
.sign-bar p { margin: 0; color: var(--nm-muted); font-size: 11.5px; font-weight: 700; }
.sign-actions { display: flex; gap: 8px; }
.sign-action { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--nm-stroke); border-radius: 11px; background: #fff; color: var(--nm-strong); font-size: 12px; font-weight: 800; }
.sign-action:hover { background: var(--nm-chip); }
.sign-action svg { width: 16px; height: 16px; }
.sign-preview { display: grid; place-items: center; padding: 12px; border: 1.5px solid var(--nm-stroke); border-radius: 15px; background: #fff; }
.sign-preview img { max-width: 100%; max-height: 150px; }

/* ---------- location ---------- */
.geo-row { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.geo-locate { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border: 1.5px solid var(--nm-stroke); border-radius: 12px; background: var(--nm-surface); color: var(--nm-strong); font-size: 12px; font-weight: 800; white-space: nowrap; }
.geo-locate:hover { background: var(--nm-chip); }
.geo-locate svg { width: 17px; height: 17px; }
.nm-geo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- success ---------- */
.nm-success { max-width: 560px; margin: 28px auto 0; text-align: center; }
.nm-success-badge {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: 0 auto 14px;
  border-radius: 24px;
  color: #0f9a6e;
  background: linear-gradient(145deg, #e8fbf3, #d5f6e8);
  box-shadow: 0 12px 28px rgba(18, 152, 111, .16);
}
.nm-success-badge svg { width: 38px; height: 38px; stroke-width: 2.2; }
.nm-success .lead { margin-top: 8px; }
.nm-success-card {
  margin: 28px 0 18px;
  padding: 6px 18px;
  border: 1.5px solid var(--nm-stroke);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, var(--nm-surface));
  text-align: start;
}
.nm-success-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 2px;
  border-bottom: 1px dashed var(--nm-line);
}
.nm-success-row:last-child { border-bottom: 0; }
.nm-success-row span { color: #4a4675; font-size: 12.5px; font-weight: 800; }
.nm-success-row strong { color: var(--nm-ink); font-size: 13.5px; font-weight: 800; }
.nm-success-row em {
  font-style: normal;
  color: #0f9a6e;
  background: #e8fbf3;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 800;
}
.nm-success .nm-notice { justify-content: center; margin-top: 8px; }

/* ---------- review ---------- */
.review-card { padding: 6px 0; }
.review-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 13px 4px; border-bottom: 1px dashed var(--nm-line); }
.review-row:last-child { border-bottom: 0; }
.review-label { flex: 0 0 42%; color: #4a4675; font-size: 12.5px; font-weight: 800; line-height: 1.8; }
.review-value { flex: 1; min-width: 0; color: var(--nm-ink); font-size: 13px; font-weight: 600; line-height: 1.9; overflow-wrap: anywhere; text-align: start; }
.review-empty { margin: 0; padding: 18px; text-align: center; color: var(--nm-muted); font-size: 13px; font-weight: 700; }
.review-note { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--nm-chip); color: var(--nm-deep); font-size: 11.5px; font-weight: 700; line-height: 1.9; }
.button-confirm { flex: 1; max-width: 345px; color: #fff; background: linear-gradient(115deg, #12986f 0%, #1ec49a 100%); box-shadow: 0 9px 20px rgba(18, 152, 111, .24); }
.button-confirm:hover { transform: translateY(-2px); filter: brightness(1.04); }
.button.is-busy { opacity: .6; pointer-events: none; }

/* ---------- jalali datepicker skin ---------- */
.jdp-container { z-index: 60; font-family: 'Vazirmatn', Tahoma, sans-serif; }
.jdp-container .jdp-day:hover { background: var(--nm-chip); }
.jdp-container .jdp-day.selected, .jdp-container .jdp-day.selected:hover { background: var(--nm-primary); color: #fff; }
.field input[readonly].jdp-ready { cursor: pointer; }

/* ---------- responsive ---------- */
@media (max-width: 850px) {
  .review-row { flex-direction: column; gap: 4px; }
  .review-label { flex: none; }
}
@media (max-width: 560px) {
  .nm-geo-grid { grid-template-columns: 1fr; }
  .sign-canvas { height: 160px; }
  .sign-bar { flex-direction: column; align-items: stretch; }
  .pill { font-size: 12px; }
}