/**
 * Shared Ad / Listing form design system
 * Used by: NewAdLicense (Client+Partner), EditListing, AddUnits, Admin Share/BuyRent forms.
 * Tokens keep typography, color, spacing, and input chrome consistent across roles.
 */

:root {
  --ad-form-brand: #6a5d8b;
  --ad-form-brand-soft: #8b7baf;
  --ad-form-brand-wash: rgba(106, 93, 139, 0.08);
  --ad-form-brand-ring: rgba(106, 93, 139, 0.16);
  --ad-form-ink: #22262a;
  --ad-form-ink-muted: #5c6670;
  --ad-form-ink-faint: #818c98;
  --ad-form-border: #dfe3e7;
  --ad-form-border-soft: #e8ebed;
  --ad-form-surface: #ffffff;
  --ad-form-canvas: #f6f7f9;
  --ad-form-danger: #c0392b;
  --ad-form-danger-bg: #fef4f4;
  --ad-form-danger-border: #f1c4c4;
  --ad-form-success: #168a45;
  --ad-form-success-bg: #f0fdf4;
  --ad-form-success-border: #86efac;
  --ad-form-info-bg: #eff6ff;
  --ad-form-info-border: #93c5fd;
  --ad-form-info: #1d4ed8;
  --ad-form-radius-sm: 10px;
  --ad-form-radius: 12px;
  --ad-form-radius-lg: 16px;
  --ad-form-radius-xl: 20px;
  --ad-form-control-h: 48px;
  --ad-form-gap: 1.25rem;
  --ad-form-gap-lg: 1.75rem;
  --ad-form-label-size: 0.875rem;
  --ad-form-hint-size: 0.75rem;
  --ad-form-shadow: 0 2px 16px rgba(92, 102, 112, 0.08);
  --ad-form-font: "Inter", "Segoe UI", Tahoma, sans-serif;
  --ad-form-heading: "Poppins", "Inter", "Segoe UI", sans-serif;
}

/* ── Page shell ──────────────────────────────────────────────────────────── */
.ad-form-shell {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  font-family: var(--ad-form-font);
  color: var(--ad-form-ink);
  min-height: 0;
  height: auto;
  flex: 1 0 auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  background: var(--ad-form-canvas);
}

.ad-form-canvas {
  width: 100%;
  min-height: 0;
  flex: 1 0 auto;
  background: var(--ad-form-canvas);
  padding: 1.25rem 1rem 1.75rem;
}

@media (min-width: 640px) {
  .ad-form-canvas {
    padding: 1.5rem 1.5rem 2rem;
  }
}

.ad-form-canvas__section {
  width: 100%;
  min-height: 0;
  background: transparent;
}

.ad-form-canvas__inner {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
}

.ad-form-shell .min-h-screen {
  min-height: 0;
}

.Page > .ad-form-shell,
.client-site-shell__main > .ad-form-shell {
  width: 100%;
  max-width: none;
  flex: 1 0 auto;
  align-self: stretch;
}

.client-site-shell__main:has(> .ad-form-shell) {
  display: flex;
  flex-direction: column;
  background: var(--ad-form-canvas);
}

.ad-form-shell__title {
  font-family: var(--ad-form-heading);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 600;
  color: var(--ad-form-ink);
  margin: 0;
  line-height: 1.3;
}

.ad-form-shell__subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ad-form-ink-faint);
  line-height: 1.45;
}

.ad-form-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin: 0 0 1.25rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--ad-form-radius);
  background: var(--ad-form-brand-wash);
  border: 1px solid rgba(106, 93, 139, 0.14);
  font-size: var(--ad-form-hint-size);
  color: var(--ad-form-ink-muted);
}

.ad-form-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* ── Cards / sections ────────────────────────────────────────────────────── */
.ad-form-card,
.ad-form-shell .form-card {
  background: var(--ad-form-surface);
  border: 1.5px solid var(--ad-form-border-soft);
  border-radius: var(--ad-form-radius-xl);
  box-shadow: var(--ad-form-shadow);
  overflow: hidden;
  height: auto;
  min-height: 0;
  flex: 0 0 auto;
  align-self: stretch;
}

.ad-form-card__head {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding: 1.15rem 1.25rem;
  border-bottom: 1.5px solid var(--ad-form-border-soft);
}

@media (min-width: 640px) {
  .ad-form-card__head {
    padding: 1.35rem 2rem;
  }
}

.ad-form-card__icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--ad-form-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--ad-form-brand), var(--ad-form-brand-soft));
  color: #fff;
  box-shadow: 0 4px 14px rgba(106, 93, 139, 0.28);
}

.ad-form-card__title {
  margin: 0;
  font-family: var(--ad-form-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ad-form-ink);
}

.ad-form-card__desc {
  margin: 0.2rem 0 0;
  font-size: 0.8125rem;
  color: var(--ad-form-ink-faint);
  font-weight: 500;
}

.ad-form-card__badge {
  margin-inline-start: auto;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ad-form-ink-faint);
  background: #f3f4f7;
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  white-space: nowrap;
}

.ad-form-card__body {
  padding: 1.15rem 1.25rem 1.25rem;
}

@media (min-width: 640px) {
  .ad-form-card__body {
    padding: 1.35rem 2rem 1.5rem;
  }
}

.ad-form-shell .step-panel {
  height: auto;
  min-height: 0;
  flex: 0 0 auto;
}

.ad-form-section {
  margin: 0 0 var(--ad-form-gap-lg);
  padding: 0 0 var(--ad-form-gap-lg);
  border-bottom: 1px solid var(--ad-form-border-soft);
}

.ad-form-section:last-of-type,
.ad-form-section--flush {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.ad-form-section__title {
  margin: 0 0 0.35rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ad-form-ink);
  letter-spacing: 0.01em;
}

.ad-form-section__hint {
  margin: 0 0 1rem;
  font-size: var(--ad-form-hint-size);
  color: var(--ad-form-ink-faint);
  line-height: 1.45;
}

/* ── Field layout ────────────────────────────────────────────────────────── */
.ad-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ad-form-gap);
}

@media (min-width: 640px) {
  .ad-form-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ad-form-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ad-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  margin-bottom: var(--ad-form-gap);
}

.ad-form-field:last-child,
.ad-form-grid > .ad-form-field {
  margin-bottom: 0;
}

.ad-form-label {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  font-size: var(--ad-form-label-size);
  font-weight: 500;
  color: var(--ad-form-ink-muted);
  line-height: 1.35;
}

.ad-form-req,
.ad-form-shell .text-red-500,
.ad-form-shell .el-required {
  color: var(--ad-form-danger);
  font-weight: 700;
  font-size: 0.9em;
}

.ad-form-optional {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ad-form-ink-faint);
  background: #f3f4f7;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  line-height: 1.3;
}

.ad-form-hint {
  font-size: var(--ad-form-hint-size);
  color: var(--ad-form-ink-faint);
  line-height: 1.4;
  margin: 0;
}

/* ── Controls ────────────────────────────────────────────────────────────── */
.ad-form-control,
.ad-form-shell .light-input,
.ad-form-shell input.light-input,
.ad-form-shell select.light-input,
.ad-form-shell textarea.light-input {
  width: 100%;
  min-height: var(--ad-form-control-h);
  box-sizing: border-box;
  padding: 0.75rem 1rem;
  border-radius: var(--ad-form-radius);
  border: 1.5px solid var(--ad-form-border);
  background: var(--ad-form-surface);
  color: var(--ad-form-ink);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  box-shadow: none;
  outline: none;
}

.ad-form-shell textarea.light-input,
.ad-form-control--textarea {
  min-height: 7rem;
  resize: vertical;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.ad-form-control::placeholder,
.ad-form-shell .light-input::placeholder {
  color: #a8b0b8;
  opacity: 1;
}

.ad-form-control:hover:not(:disabled):not([readonly]),
.ad-form-shell .light-input:hover:not(:disabled):not([readonly]) {
  border-color: #c9ced4;
}

.ad-form-control:focus,
.ad-form-control:focus-visible,
.ad-form-shell .light-input:focus,
.ad-form-shell .light-input:focus-visible {
  border-color: var(--ad-form-brand);
  box-shadow: 0 0 0 3px var(--ad-form-brand-ring);
}

.ad-form-control:disabled,
.ad-form-control[readonly],
.ad-form-shell .light-input:disabled,
.ad-form-shell .light-input[readonly],
.ad-form-shell .crea-readonly-field {
  background: #f8f9fb;
  color: var(--ad-form-ink-muted);
  cursor: default;
}

.ad-form-control--invalid,
.ad-form-shell .light-input.ad-form-control--invalid,
.ad-form-shell .el-input--invalid {
  border-color: var(--ad-form-danger) !important;
  background: #fffafa !important;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12) !important;
}

/* Native selects — consistent chevron */
.ad-form-shell select.light-input,
.ad-form-shell select.ad-form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-size: 14px;
  cursor: pointer;
}

[dir="rtl"] .ad-form-shell select.light-input,
[dir="rtl"] .ad-form-shell select.ad-form-control {
  background-position: left 1rem center;
  padding-left: 2.5rem;
}

[dir="ltr"] .ad-form-shell select.light-input,
[dir="ltr"] .ad-form-shell select.ad-form-control {
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.ad-form-shell input[type="number"].light-input {
  -moz-appearance: textfield;
}

.ad-form-shell input[type="number"].light-input::-webkit-outer-spin-button,
.ad-form-shell input[type="number"].light-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── Upload / choice chips ───────────────────────────────────────────────── */
.ad-form-upload {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--ad-form-control-h);
  padding: 0 1rem;
  border-radius: var(--ad-form-radius);
  border: 1.5px dashed #ced4da;
  background: #f9fafb;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.ad-form-upload:hover,
.ad-form-upload:focus-within {
  border-color: var(--ad-form-brand);
  background: var(--ad-form-brand-wash);
  box-shadow: 0 0 0 3px var(--ad-form-brand-ring);
}

.ad-form-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.ad-form-choice {
  flex: 1 1 0;
  min-width: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--ad-form-radius);
  border: 1.5px solid var(--ad-form-border);
  background: var(--ad-form-surface);
  color: #73808c;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.ad-form-choice:hover {
  border-color: rgba(106, 93, 139, 0.35);
  color: var(--ad-form-brand);
}

.ad-form-choice.is-active,
.ad-form-shell .purpose-label.bg-gradient-purple {
  border-color: transparent;
  background: linear-gradient(135deg, var(--ad-form-brand), var(--ad-form-brand-soft));
  color: #fff;
  box-shadow: 0 4px 14px rgba(106, 93, 139, 0.25);
}

/* ── Feedback banners ────────────────────────────────────────────────────── */
.ad-form-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--ad-form-radius);
  font-size: 0.875rem;
  line-height: 1.45;
}

.ad-form-alert--error {
  background: var(--ad-form-danger-bg);
  border: 1px solid var(--ad-form-danger-border);
  color: var(--ad-form-danger);
}

.ad-form-alert--success {
  background: var(--ad-form-success-bg);
  border: 1px solid var(--ad-form-success-border);
  color: var(--ad-form-success);
}

.ad-form-alert--info {
  background: var(--ad-form-info-bg);
  border: 1px solid var(--ad-form-info-border);
  color: var(--ad-form-info);
}

.ad-form-field-error {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ad-form-danger);
  line-height: 1.35;
}

/* ── Actions ─────────────────────────────────────────────────────────────── */
.ad-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
  align-items: center;
  margin-top: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ad-form-border-soft);
}

.ad-form-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border-radius: var(--ad-form-radius);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  border: 1.5px solid transparent;
  white-space: nowrap;
}

.ad-form-btn--primary {
  background: linear-gradient(135deg, var(--ad-form-brand), var(--ad-form-brand-soft));
  color: #fff;
  box-shadow: 0 4px 14px rgba(106, 93, 139, 0.25);
}

.ad-form-btn--primary:hover {
  opacity: 0.92;
}

.ad-form-btn--ghost {
  background: var(--ad-form-surface);
  border-color: var(--ad-form-border);
  color: var(--ad-form-ink-muted);
}

.ad-form-btn--ghost:hover {
  border-color: var(--ad-form-brand);
  color: var(--ad-form-brand);
}

@media (max-width: 639px) {
  .ad-form-actions {
    flex-direction: column-reverse;
  }

  .ad-form-actions .ad-form-btn,
  .ad-form-shell .new-ad-license-step-footer__btn {
    width: 100%;
  }

  .ad-form-choice {
    min-width: calc(50% - 0.35rem);
  }
}

/* ── Edit listing bridge (Client / Partner) ──────────────────────────────── */
.profile.client-edit-listing-page.ad-form-bridge .section-header {
  margin-top: 1.75rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--ad-form-radius);
  background: var(--ad-form-canvas);
  border: 1px solid var(--ad-form-border-soft);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ad-form-ink);
}

.profile.client-edit-listing-page.ad-form-bridge .section-header:first-of-type {
  margin-top: 0;
}

.profile.client-edit-listing-page.ad-form-bridge .form-row {
  gap: 1rem 1.25rem !important;
  margin-bottom: 1.15rem !important;
}

.profile.client-edit-listing-page.ad-form-bridge .TextField .field-label,
.profile.client-edit-listing-page.ad-form-bridge .TextField .field-label-with-height,
.profile.client-edit-listing-page.ad-form-bridge .listing-status-label {
  font-size: var(--ad-form-label-size);
  font-weight: 500;
  color: var(--ad-form-ink-muted);
  margin-bottom: 0.4rem;
}

.profile.client-edit-listing-page.ad-form-bridge .input-field,
.profile.client-edit-listing-page.ad-form-bridge .textarea-field,
.profile.client-edit-listing-page.ad-form-bridge .listing-status-trigger {
  min-height: var(--ad-form-control-h);
  border-radius: var(--ad-form-radius) !important;
  border: 1.5px solid var(--ad-form-border) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.profile.client-edit-listing-page.ad-form-bridge .input-field:focus,
.profile.client-edit-listing-page.ad-form-bridge .textarea-field:focus,
.profile.client-edit-listing-page.ad-form-bridge .listing-status-trigger:focus {
  border-color: var(--ad-form-brand) !important;
  box-shadow: 0 0 0 3px var(--ad-form-brand-ring) !important;
}

.profile.client-edit-listing-page.ad-form-bridge .el-field-error {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ad-form-danger);
}

/* ── Admin Share / BuyRent bridge ────────────────────────────────────────── */
.edit-share-unit-form.ad-form-bridge,
.add-share-unit-form.ad-form-bridge {
  --admin-ad-gap: 1.25rem;
}

.edit-share-unit-form.ad-form-bridge > .text-wrapper,
.add-share-unit-form.ad-form-bridge > .text-wrapper {
  margin: 1.75rem 0 0.85rem;
  padding: 0.75rem 1rem;
  border-radius: var(--ad-form-radius);
  background: var(--ad-form-canvas);
  border: 1px solid var(--ad-form-border-soft);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ad-form-ink);
}

.edit-share-unit-form.ad-form-bridge > .text-wrapper:first-of-type,
.add-share-unit-form.ad-form-bridge > .text-wrapper:first-of-type {
  margin-top: 0;
}

.edit-share-unit-form.ad-form-bridge .request-permission,
.add-share-unit-form.ad-form-bridge .request-permission {
  margin-bottom: 0.5rem;
  padding: 1.15rem 1.25rem;
  border-radius: var(--ad-form-radius-lg);
  border: 1.5px solid var(--ad-form-border-soft);
  background: var(--ad-form-surface);
  box-shadow: var(--ad-form-shadow);
}

.edit-share-unit-form.ad-form-bridge .text-field .label,
.edit-share-unit-form.ad-form-bridge .text-field-2 .label-2,
.add-share-unit-form.ad-form-bridge .text-field .label,
.add-share-unit-form.ad-form-bridge .text-field-2 .label-2 {
  font-size: var(--ad-form-label-size);
  font-weight: 500;
  color: var(--ad-form-ink-muted);
  margin-bottom: 0.4rem;
}

.edit-share-unit-form.ad-form-bridge .field .placeholder,
.edit-share-unit-form.ad-form-bridge input.placeholder,
.edit-share-unit-form.ad-form-bridge select.placeholder,
.add-share-unit-form.ad-form-bridge .field .placeholder,
.add-share-unit-form.ad-form-bridge input.placeholder,
.add-share-unit-form.ad-form-bridge select.placeholder {
  min-height: var(--ad-form-control-h);
  border-radius: var(--ad-form-radius) !important;
  border: 1.5px solid var(--ad-form-border) !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.875rem !important;
  color: var(--ad-form-ink) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.edit-share-unit-form.ad-form-bridge .field .placeholder:focus,
.edit-share-unit-form.ad-form-bridge input.placeholder:focus,
.edit-share-unit-form.ad-form-bridge select.placeholder:focus,
.add-share-unit-form.ad-form-bridge .field .placeholder:focus,
.add-share-unit-form.ad-form-bridge input.placeholder:focus,
.add-share-unit-form.ad-form-bridge select.placeholder:focus {
  border-color: var(--ad-form-brand) !important;
  box-shadow: 0 0 0 3px var(--ad-form-brand-ring) !important;
  outline: none;
}

.edit-share-unit-form.ad-form-bridge .text-danger,
.add-share-unit-form.ad-form-bridge .text-danger {
  color: var(--ad-form-danger) !important;
  font-size: 0.8125rem;
  font-weight: 500;
}

@media (max-width: 767px) {
  .edit-share-unit-form.ad-form-bridge .request-permission,
  .add-share-unit-form.ad-form-bridge .request-permission {
    padding: 1rem;
  }

  .edit-share-unit-form.ad-form-bridge .row,
  .add-share-unit-form.ad-form-bridge .row {
    flex-direction: column !important;
    gap: 1rem !important;
  }
}

/* License confirm modal — full-screen overlay above site header */
.license-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 100010; /* Must be above #mainHeader (99997) */
  padding: 1rem;
  background: rgba(0, 0, 0, 0.35);
  overflow: auto;
}

.license-confirm-modal-card {
  width: 100%;
  max-height: min(90vh, calc(100vh - 2rem));
  margin: 0 auto;
}

.license-confirm-modal-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.license-confirm-modal-close {
  border: none;
  background: transparent;
  cursor: pointer;
  color: rgb(129, 140, 152);
  padding: 0.375rem;
  border-radius: 0.5rem;
  line-height: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

.license-confirm-modal-close:hover {
  background: rgb(243, 244, 246);
  color: rgb(34, 38, 42);
}

.license-confirm-modal-actions {
  gap: 0.5rem;
}

.license-confirm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.45rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  flex: 0 0 auto;
  width: auto;
  min-width: 7rem;
}

.license-confirm-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, #6A5D8B, #8B7BAF);
  border: none;
}

.license-confirm-btn--primary:hover {
  opacity: 0.92;
}

.license-confirm-btn--secondary {
  color: rgb(34, 38, 42);
  background: rgb(255, 255, 255);
  border: 1.5px solid rgb(223, 227, 231);
}

.license-confirm-btn--secondary:hover {
  background: rgb(249, 250, 251);
}

.license-confirm-fields {
  display: grid;
  gap: 0;
  overflow: visible;
  border: 1px solid rgb(232, 235, 237);
  border-radius: 10px;
  background: rgb(255, 255, 255);
}

.license-confirm-row {
  display: grid;
  grid-template-columns: minmax(130px, 1.1fr) minmax(110px, 0.9fr) minmax(110px, 1.1fr);
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgb(243, 244, 247);
  font-size: 0.75rem;
  line-height: 1.35;
  align-items: start;
}

.license-confirm-row:nth-child(even) {
  background: rgb(250, 250, 252);
}

.license-confirm-row:last-child {
  border-bottom: none;
}

.license-confirm-row--head {
  position: static;
  background: rgb(246, 245, 249);
  font-weight: 600;
  color: rgb(92, 102, 112);
  border-bottom: 1px solid rgb(232, 235, 237);
}

.license-confirm-label {
  color: rgb(34, 38, 42);
  font-weight: 500;
  word-break: break-word;
}

.license-confirm-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: rgb(129, 140, 152);
  font-size: 0.7rem;
  word-break: break-word;
}

.license-confirm-val {
  color: rgb(34, 38, 42);
  word-break: break-word;
  white-space: pre-wrap;
}

#newAdLicenseMap.nhc-map-locked {
  opacity: 0.85;
  filter: grayscale(0.05);
}

@media (max-width: 640px) {
  .license-confirm-modal {
    padding: 0.75rem;
  }

  .license-confirm-modal-card {
    max-height: calc(100vh - 1.5rem);
  }

  .license-confirm-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.15rem 0.5rem;
  }

  .license-confirm-row--head .license-confirm-key,
  .license-confirm-row .license-confirm-key {
    grid-column: 1 / -1;
    opacity: 0.85;
  }

  .license-confirm-modal-actions {
    justify-content: stretch;
  }

  .license-confirm-btn {
    flex: 1 1 0;
    min-width: 0;
  }
}