/**
 * PropAtlas Controls — premium form & chrome (2026-07-27)
 * UI Kit: /#/ui-kit · token: navy / blue / gold · Lucide ikonlar
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Density Default — form / wizard. Compact → .pa-density--compact (kart/widget). */
  --pa-ctrl-h: 44px;
  --pa-ctrl-h-sm: 36px;
  --pa-ctrl-radius: 12px;
  --pa-ctrl-radius-sm: 10px;
  --pa-ctrl-font: 'Inter', system-ui, -apple-system, sans-serif;
  --pa-ctrl-display: 'DM Serif Display', Georgia, serif;
  --pa-ctrl-font-size: 14px;
  --pa-ctrl-btn-font: 13px;
  --pa-ctrl-label-size: 12px;
  --pa-ctrl-hint-size: 12px;
  --pa-ctrl-seg-font: 12px;
  --pa-ctrl-ico: 18px;
  --pa-ctrl-ico-slot: 40px;
  --pa-ctrl-pad-x: 14px;
  --pa-ctrl-field-gap: 6px;

  --pa-ctrl-navy: var(--primary);
  --pa-ctrl-blue: var(--primary);
  --pa-ctrl-blue-soft: color-mix(in srgb, var(--primary) 12%, transparent);
  --pa-ctrl-gold: #c9a35a;
  --pa-ctrl-gold-soft: rgba(201, 163, 90, 0.16);

  --pa-ctrl-bg: #ffffff;
  --pa-ctrl-bg-muted: #f4f6f9;
  --pa-ctrl-border: #d5dce8;
  --pa-ctrl-border-strong: #b8c3d6;
  --pa-ctrl-text: #0b1f35;
  --pa-ctrl-text-sec: #5b6b82;
  --pa-ctrl-text-muted: #8a97ab;
  --pa-ctrl-danger: #e11d48;
  --pa-ctrl-danger-soft: rgba(225, 29, 72, 0.1);
  --pa-ctrl-success: #059669;
  --pa-ctrl-success-soft: rgba(5, 150, 105, 0.12);
  --pa-ctrl-warn: #d97706;
  --pa-ctrl-warn-soft: rgba(217, 119, 6, 0.12);

  --pa-ctrl-shadow: 0 1px 2px rgba(11, 31, 53, 0.04);
  --pa-ctrl-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
  --pa-ctrl-shadow-elev: 0 12px 40px rgba(11, 31, 53, 0.1);

  /*
   * Field width table (S / M / L) — content-fit; type × size, not a new control per size.
   *
   * | Size | Class            | Token            | ~px@16 | Use for                              |
   * |------|------------------|------------------|--------|--------------------------------------|
   * | S    | .pa-field--s     | --pa-field-w-s   | 216    | First name, money, phone, DOB, OTP  |
   * | M    | .pa-field--m     | --pa-field-w-m   | 288    | Last name, email, area, bank, select|
   * | L    | .pa-field--l     | --pa-field-w-l   | 416    | Long single-line (rare)             |
   * | Full | .pa-field--full  | --pa-field-w-full| 100%   | Notes, address, textarea             |
   *
   * Edge: XS (year/tiny), XL (rare). Prefer S/M/L/Full in product UI.
   */
  --pa-field-w-xs: 8rem;      /* ~128px */
  --pa-field-w-s: 13.5rem;    /* ~216px */
  --pa-field-w-m: 18rem;      /* ~288px */
  --pa-field-w-l: 26rem;      /* ~416px */
  --pa-field-w-xl: 36rem;     /* ~576px */
  --pa-field-w-full: 100%;
}

/*
 * Density (orthogonal to S/M/L width):
 *   Default = :root tokens (44px / 14px)
 *   Compact = .pa-density--compact on card, widget, form, or kit panel
 * Do NOT invent pa-field--s-h / height-per-width classes.
 */
.pa-density--compact,
.pa-card.pa-density--compact,
.pa-widget.pa-density--compact,
.pa-kit-panel.pa-density--compact,
.mtg-info-card.pa-density--compact,
/* Dense product surfaces default to Compact (width S/M/L unchanged) */
.pa-widget.compare-widget,
.pa-widget.rates-widget,
.pa-widget.recent-proposals-widget,
.mtg-info-card.pa-widget {
  --pa-ctrl-h: 36px;
  --pa-ctrl-h-sm: 30px;
  --pa-ctrl-radius: 10px;
  --pa-ctrl-radius-sm: 8px;
  --pa-ctrl-font-size: 13px;
  --pa-ctrl-btn-font: 12px;
  --pa-ctrl-label-size: 11px;
  --pa-ctrl-hint-size: 11px;
  --pa-ctrl-seg-font: 11px;
  --pa-ctrl-ico: 16px;
  --pa-ctrl-ico-slot: 34px;
  --pa-ctrl-pad-x: 12px;
  --pa-ctrl-field-gap: 4px;
}

/*
 * Dark control tokens ONLY when html explicitly opts into dark.
 * Do NOT use html[data-theme='dark'] — MOVA and other light
 * surfaces omit data-theme and would inherit white text on white fields.
 * PropAtlas shell sets data-theme=dark|light in index.html FOUC script.
 */
html[data-theme='dark'] {
  --pa-ctrl-bg: #1e293b;
  --pa-ctrl-bg-muted: #0f172a;
  --pa-ctrl-border: #334155;
  --pa-ctrl-border-strong: #475569;
  --pa-ctrl-text: #f8fafc;
  --pa-ctrl-text-sec: #94a3b8;
  --pa-ctrl-text-muted: #64748b;
  --pa-ctrl-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  --pa-ctrl-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.28);
  --pa-ctrl-shadow-elev: 0 16px 48px rgba(0, 0, 0, 0.35);
}

/* ── Stage / gallery ── */
.pa-kit-stage {
  font-family: var(--pa-ctrl-font);
  color: var(--pa-ctrl-text);
  background:
    radial-gradient(1200px 480px at 8% -10%, rgba(23, 103, 232, 0.1), transparent 55%),
    radial-gradient(900px 400px at 92% 0%, rgba(201, 163, 90, 0.08), transparent 50%),
    var(--pa-ctrl-bg-muted);
  border: 1px solid var(--pa-ctrl-border);
  border-radius: 20px;
  padding: 28px 24px 32px;
  box-shadow: var(--pa-ctrl-shadow);
}

.pa-kit-stage__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--pa-ctrl-border);
}

.pa-kit-stage__eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pa-ctrl-gold);
}

.pa-kit-stage__title {
  margin: 0;
  font-family: var(--pa-ctrl-display);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--pa-ctrl-navy);
  line-height: 1.15;
}

html[data-theme='dark'] .pa-kit-stage__title,
html[data-theme='dark'] .pa-kit-stage__title {
  color: #f8fafc;
}

.pa-kit-stage__lead {
  margin: 8px 0 0;
  max-width: 42ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pa-ctrl-text-sec);
}

.pa-kit-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px 20px;
  align-items: start;
}

/* Varsayılan (sınıf yok) = L — yarım satır; kısa değerler için --s / --m kullan */
.pa-kit-grid > .pa-field,
.pa-kit-grid > .pa-field-block {
  grid-column: span 6;
}

.pa-kit-grid > .pa-field--xs { grid-column: span 3; }
.pa-kit-grid > .pa-field--s { grid-column: span 3; }
.pa-kit-grid > .pa-field--m { grid-column: span 4; }
.pa-kit-grid > .pa-field--l { grid-column: span 6; }
.pa-kit-grid > .pa-field--xl,
.pa-kit-grid > .pa-field--full { grid-column: span 12; }

@media (max-width: 900px) {
  .pa-kit-grid > .pa-field,
  .pa-kit-grid > .pa-field-block,
  .pa-kit-grid > .pa-field--xs,
  .pa-kit-grid > .pa-field--s,
  .pa-kit-grid > .pa-field--m,
  .pa-kit-grid > .pa-field--l,
  .pa-kit-grid > .pa-field--xl,
  .pa-kit-grid > .pa-field--full {
    grid-column: span 12;
  }
}

/* Grid dışı + kit — S/M/L token tablosu */
.pa-field--xs { width: 100%; max-width: var(--pa-field-w-xs); }   /* LTV, yıl */
.pa-field--s  { width: 100%; max-width: var(--pa-field-w-s); }    /* DOB, telefon */
.pa-field--m  { width: 100%; max-width: var(--pa-field-w-m); }    /* isim, banka, para */
.pa-field--l  { width: 100%; max-width: var(--pa-field-w-l); }    /* e-posta, arama */
.pa-field--xl { width: 100%; max-width: var(--pa-field-w-xl); }
.pa-field--full { width: 100%; max-width: none; }

/* Size table (UI Kit gallery) */
.pa-size-table {
  grid-column: 1 / -1;
  width: 100%;
  border: 1px solid var(--pa-ctrl-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--pa-ctrl-bg);
  box-shadow: var(--pa-ctrl-shadow);
}
.pa-size-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pa-size-table th,
.pa-size-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--pa-ctrl-border);
  vertical-align: middle;
}
.pa-size-table th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pa-ctrl-text-muted);
  background: var(--pa-ctrl-bg-muted);
}
.pa-size-table tr:last-child td { border-bottom: none; }
.pa-size-table code {
  font-size: 11px;
  color: var(--pa-ctrl-blue);
}
.pa-size-table__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--pa-ctrl-navy);
}
.pa-size-table__badge--s { background: #334155; }
.pa-size-table__badge--m { background: var(--pa-ctrl-blue); }
.pa-size-table__badge--l { background: var(--pa-ctrl-navy); }
.pa-size-table__badge--full { background: var(--pa-ctrl-gold); color: #0b1f35; }
.pa-size-bars {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 12px;
}
.pa-size-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--pa-ctrl-text-sec);
}
.pa-size-bar__track {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pa-ctrl-blue), color-mix(in srgb, var(--primary) 35%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent);
}
.pa-size-bar--s .pa-size-bar__track { width: var(--pa-field-w-s); max-width: 100%; }
.pa-size-bar--m .pa-size-bar__track { width: var(--pa-field-w-m); max-width: 100%; }
.pa-size-bar--l .pa-size-bar__track { width: var(--pa-field-w-l); max-width: 100%; }
.pa-size-bar--full .pa-size-bar__track {
  width: 100%;
  background: linear-gradient(90deg, var(--pa-ctrl-gold), rgba(201, 163, 90, 0.4));
  box-shadow: inset 0 0 0 1px rgba(201, 163, 90, 0.35);
}
.pa-size-bar__lab {
  flex: 0 0 3.5rem;
  font-weight: 700;
  color: var(--pa-ctrl-text);
}

/* Density compare (UI Kit) */
.pa-density-compare {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 4px 0 8px;
}
@media (max-width: 900px) {
  .pa-density-compare { grid-template-columns: 1fr; }
}
.pa-density-compare__panel {
  border: 1px solid var(--pa-ctrl-border);
  border-radius: 14px;
  padding: 14px 14px 16px;
  background: var(--pa-ctrl-bg);
  box-shadow: var(--pa-ctrl-shadow);
  min-width: 0;
}
.pa-density-compare__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.pa-density-compare__title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--pa-ctrl-text);
}
.pa-density-compare__meta {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--pa-ctrl-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pa-density-compare__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}
.pa-density-compare__row .pa-field { margin: 0; }
.pa-density-compare__row .pa-btn { margin-top: 18px; }

/* Kit grid: hücreyi şişirme — sola yasla, max-width geçerli kalsın */
.pa-kit-grid > .pa-field--xs,
.pa-kit-grid > .pa-field--s,
.pa-kit-grid > .pa-field--m,
.pa-kit-grid > .pa-field--l {
  justify-self: start;
}

.pa-kit-grid > .pa-field--xl,
.pa-kit-grid > .pa-field--full {
  max-width: none;
  justify-self: stretch;
}

.pa-kit-section {
  grid-column: 1 / -1;
  margin: 12px 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pa-ctrl-text-muted);
}

.pa-kit-width-hint {
  grid-column: 1 / -1;
  margin: -4px 0 8px;
  font-size: 12px;
  color: var(--pa-ctrl-text-muted);
  line-height: 1.4;
}

.pa-kit-width-hint code {
  font-size: 11px;
  color: var(--pa-ctrl-text-sec);
}

.pa-kit-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.pa-kit-panel {
  grid-column: span 6;
  background: var(--pa-ctrl-bg);
  border: 1px solid var(--pa-ctrl-border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--pa-ctrl-shadow);
}

.pa-kit-grid--tools .pa-tool-card {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.pa-kit-grid--tools .pa-tool-card .pa-kit-width-hint { margin: 0; }
.pa-kit-grid--tools .pa-tool-card .pa-btn { margin-top: auto; }
@media (max-width: 900px) {
  .pa-kit-grid--tools .pa-tool-card { grid-column: span 12; }
}

@media (max-width: 900px) {
  .pa-kit-panel { grid-column: span 12; }
}

.pa-kit-panel__title {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pa-ctrl-text);
}

/* ── Field ── */
.pa-field {
  display: flex;
  flex-direction: column;
  gap: var(--pa-ctrl-field-gap, 6px);
  min-width: 0;
  font-family: var(--pa-ctrl-font);
}

.pa-field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--pa-ctrl-label-size, 12px);
  font-weight: 600;
  color: var(--pa-ctrl-text-sec);
}

.pa-field__hint,
.pa-field__error {
  margin: 0;
  font-size: var(--pa-ctrl-hint-size, 12px);
  line-height: 1.35;
  color: var(--pa-ctrl-text-muted);
}

.pa-field__error { color: var(--pa-ctrl-danger); }

.pa-field__control {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--pa-ctrl-h);
  background: var(--pa-ctrl-bg);
  border: 1px solid var(--pa-ctrl-border);
  border-radius: var(--pa-ctrl-radius);
  box-shadow: var(--pa-ctrl-shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.pa-field__control:hover {
  border-color: var(--pa-ctrl-border-strong);
}

.pa-field__control:focus-within {
  border-color: var(--pa-ctrl-blue);
  box-shadow: var(--pa-ctrl-shadow-focus);
}

.pa-field.is-error .pa-field__control {
  border-color: var(--pa-ctrl-danger);
  box-shadow: 0 0 0 3px var(--pa-ctrl-danger-soft);
}

.pa-field.is-disabled .pa-field__control {
  opacity: 0.55;
  pointer-events: none;
  background: var(--pa-ctrl-bg-muted);
}

.pa-field__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pa-ctrl-ico-slot, 40px);
  flex-shrink: 0;
  color: var(--pa-ctrl-text-muted);
  pointer-events: none;
}

.pa-field__ico i,
.pa-field__ico svg {
  width: var(--pa-ctrl-ico, 18px);
  height: var(--pa-ctrl-ico, 18px);
  stroke-width: 1.75;
}

.pa-field__control:focus-within .pa-field__ico {
  color: var(--pa-ctrl-blue);
}

.pa-field__ico--end {
  margin-left: auto;
}

.pa-input,
.pa-select,
.pa-textarea {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--pa-ctrl-text);
  font-family: var(--pa-ctrl-font);
  font-size: var(--pa-ctrl-font-size, 14px);
  font-weight: 500;
  line-height: 1.3;
}

.pa-input,
.pa-select {
  height: calc(var(--pa-ctrl-h) - 2px);
  padding: 0 var(--pa-ctrl-pad-x, 14px) 0 0;
}

.pa-field__control:not(:has(.pa-field__ico:first-child)) .pa-input,
.pa-field__control:not(:has(.pa-field__ico:first-child)) .pa-select {
  padding-left: var(--pa-ctrl-pad-x, 14px);
}

.pa-input::placeholder,
.pa-textarea::placeholder {
  color: var(--pa-ctrl-text-muted);
  font-weight: 450;
}

.pa-select {
  appearance: none;
  cursor: pointer;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a97ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.pa-select option {
  color: #0b1f35;
  background: #fff;
}

.pa-textarea {
  min-height: 96px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.45;
}

.pa-field__control--textarea {
  align-items: stretch;
  min-height: 96px;
}

.pa-field__control--textarea .pa-field__ico {
  align-items: flex-start;
  padding-top: 13px;
}

/* ── Buttons ── */
.pa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  height: var(--pa-ctrl-h);
  padding: 0 18px;
  border-radius: var(--pa-ctrl-radius);
  border: 1px solid transparent;
  font-family: var(--pa-ctrl-font);
  font-size: var(--pa-ctrl-btn-font, 13px);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.pa-btn i,
.pa-btn svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  flex-shrink: 0;
}

.pa-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.pa-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.pa-btn--primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pa-ctrl-navy) 78%, #fff) 0%, var(--pa-ctrl-navy) 100%);
  color: var(--on-primary, #fff);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--pa-ctrl-navy) 22%, transparent);
}

.pa-btn--primary:hover:not(:disabled) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pa-ctrl-navy) 70%, #fff) 0%, color-mix(in srgb, var(--pa-ctrl-navy) 88%, #000) 100%);
}

.pa-btn--accent {
  background: linear-gradient(180deg, #d4b06a 0%, var(--pa-ctrl-gold) 100%);
  color: #0b1f35;
  box-shadow: 0 8px 20px rgba(201, 163, 90, 0.28);
}

.pa-btn--accent:hover:not(:disabled) {
  filter: brightness(1.03);
}

.pa-btn--secondary {
  background: var(--pa-ctrl-bg);
  border-color: var(--pa-ctrl-border);
  color: var(--pa-ctrl-text);
  box-shadow: var(--pa-ctrl-shadow);
}

.pa-btn--secondary:hover:not(:disabled) {
  border-color: var(--pa-ctrl-blue);
  color: var(--pa-ctrl-blue);
}

.pa-btn--ghost {
  background: transparent;
  color: var(--pa-ctrl-text-sec);
}

.pa-btn--ghost:hover:not(:disabled) {
  background: var(--pa-ctrl-blue-soft);
  color: var(--pa-ctrl-blue);
}

.pa-btn--danger {
  background: var(--pa-ctrl-danger);
  color: #fff;
}

.pa-btn--sm {
  height: var(--pa-ctrl-h-sm);
  padding: 0 12px;
  font-size: 12px;
  border-radius: var(--pa-ctrl-radius-sm);
}

.pa-btn--icon {
  width: var(--pa-ctrl-h);
  padding: 0;
}

.pa-btn--icon.pa-btn--sm {
  width: var(--pa-ctrl-h-sm);
  min-width: var(--pa-ctrl-h-sm);
}

/* ── Segmented ── */
.pa-seg {
  display: inline-flex;
  align-items: stretch;
  height: var(--pa-ctrl-h);
  padding: 3px;
  background: var(--pa-ctrl-bg-muted);
  border: 1px solid var(--pa-ctrl-border);
  border-radius: var(--pa-ctrl-radius);
  gap: 2px;
}

.pa-seg button {
  border: 0;
  background: transparent;
  color: var(--pa-ctrl-text-sec);
  font-family: var(--pa-ctrl-font);
  font-size: var(--pa-ctrl-seg-font, 12px);
  font-weight: 700;
  padding: 0 var(--pa-ctrl-pad-x, 14px);
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.pa-seg button.is-active {
  background: var(--pa-ctrl-bg);
  color: var(--pa-ctrl-navy);
  box-shadow: 0 2px 8px rgba(11, 31, 53, 0.08);
}

html[data-theme='dark'] .pa-seg button.is-active,
html[data-theme='dark'] .pa-seg button.is-active {
  color: #f8fafc;
  background: #334155;
}

/* ── Checkbox / radio / switch ── */
.pa-check,
.pa-radio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--pa-ctrl-text);
  cursor: pointer;
  user-select: none;
}

.pa-check input,
.pa-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pa-check__box,
.pa-radio__box {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--pa-ctrl-border-strong);
  background: var(--pa-ctrl-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.pa-check__box { border-radius: 6px; }
.pa-radio__box { border-radius: 999px; }

.pa-check__box i,
.pa-check__box svg {
  width: 12px;
  height: 12px;
  color: #fff;
  opacity: 0;
}

.pa-check input:checked + .pa-check__box {
  background: var(--pa-ctrl-blue);
  border-color: var(--pa-ctrl-blue);
}

.pa-check input:checked + .pa-check__box i,
.pa-check input:checked + .pa-check__box svg {
  opacity: 1;
}

.pa-radio input:checked + .pa-radio__box {
  border-color: var(--pa-ctrl-blue);
  box-shadow: inset 0 0 0 5px var(--pa-ctrl-blue);
}

.pa-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--pa-ctrl-text);
  cursor: pointer;
}

.pa-switch input { position: absolute; opacity: 0; }

.pa-switch__track {
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: var(--pa-ctrl-border);
  position: relative;
  transition: background 0.2s ease;
}

.pa-switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(11, 31, 53, 0.2);
  transition: transform 0.2s ease;
}

.pa-switch input:checked + .pa-switch__track {
  background: var(--pa-ctrl-blue);
}

.pa-switch input:checked + .pa-switch__track::after {
  transform: translateX(18px);
}

/* ── Chips & badges ── */
.pa-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--pa-ctrl-border);
  background: var(--pa-ctrl-bg);
  color: var(--pa-ctrl-text-sec);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.pa-chip.is-active {
  background: var(--pa-ctrl-blue-soft);
  border-color: rgba(23, 103, 232, 0.35);
  color: var(--pa-ctrl-blue);
}

.pa-chip i,
.pa-chip svg {
  width: 14px;
  height: 14px;
}

.pa-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pa-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.pa-badge--success { background: var(--pa-ctrl-success-soft); color: var(--pa-ctrl-success); }
.pa-badge--warn { background: var(--pa-ctrl-warn-soft); color: var(--pa-ctrl-warn); }
.pa-badge--danger { background: var(--pa-ctrl-danger-soft); color: var(--pa-ctrl-danger); }
.pa-badge--info { background: var(--pa-ctrl-blue-soft); color: var(--pa-ctrl-blue); }
.pa-badge--neutral { background: rgba(148, 163, 184, 0.18); color: var(--pa-ctrl-text-sec); }

/* ── Empty / toast / modal ── */
.pa-empty {
  text-align: center;
  padding: 28px 16px;
}

.pa-empty__ico {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pa-ctrl-blue-soft);
  color: var(--pa-ctrl-blue);
}

.pa-empty__ico i,
.pa-empty__ico svg {
  width: 24px;
  height: 24px;
}

.pa-empty__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--pa-ctrl-text);
}

.pa-empty__desc {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--pa-ctrl-text-sec);
  line-height: 1.45;
}

.pa-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--pa-ctrl-navy);
  color: #fff;
  box-shadow: var(--pa-ctrl-shadow-elev);
  max-width: 360px;
}

.pa-toast__ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--pa-ctrl-gold);
}

.pa-toast__ico i,
.pa-toast__ico svg {
  width: 15px;
  height: 15px;
}

.pa-toast__title {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 700;
}

.pa-toast__desc {
  margin: 0;
  font-size: 12px;
  opacity: 0.78;
  line-height: 1.4;
}

.pa-modal {
  background: var(--pa-ctrl-bg);
  border: 1px solid var(--pa-ctrl-border);
  border-radius: 18px;
  box-shadow: var(--pa-ctrl-shadow-elev);
  overflow: hidden;
  max-width: 420px;
}

.pa-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--pa-ctrl-border);
}

.pa-modal__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--pa-ctrl-text);
}

.pa-modal__body {
  padding: 18px;
  font-size: 13px;
  color: var(--pa-ctrl-text-sec);
  line-height: 1.5;
}

.pa-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  background: var(--pa-ctrl-bg-muted);
  border-top: 1px solid var(--pa-ctrl-border);
}

.pa-modal--m { max-width: 560px; width: min(560px, 92vw); }
.pa-modal--wide { max-width: 960px; width: min(960px, 96vw); }
.pa-modal--xl {
  max-width: 1180px;
  width: min(1180px, 96vw);
  max-height: min(820px, 90vh);
  display: flex;
  flex-direction: column;
}
.pa-modal--xl .pa-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* ── Money field — white input + suffix AED only (2026-08-19) ── */
.pa-field--money .pa-field__control,
.pa-field__control--money {
  background: var(--pa-ctrl-bg);
  border-color: var(--pa-ctrl-border);
  padding: 0;
  overflow: hidden;
}

.pa-field--money .pa-field__control:hover,
.pa-field__control--money:hover {
  border-color: var(--pa-ctrl-border-strong);
}

.pa-field--money .pa-field__control:focus-within,
.pa-field__control--money:focus-within {
  border-color: var(--pa-ctrl-blue);
  box-shadow: var(--pa-ctrl-shadow-focus);
}

.pa-field--money .pa-field__ico {
  color: var(--pa-ctrl-text-muted);
}

.pa-field--money .pa-field__control:focus-within .pa-field__ico {
  color: var(--pa-ctrl-blue);
}

.pa-input--money {
  color: var(--pa-ctrl-text) !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  padding: 0 8px 0 14px !important;
}

.pa-input--money::placeholder {
  color: var(--pa-ctrl-text-muted);
}

/* Money suffix = same light chrome as phone dial (pa-phone__dial) */
.pa-money__suffix {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  align-self: stretch;
  padding: 0 12px;
  background: rgba(0, 22, 64, 0.04);
  border-left: 1px solid var(--pa-ctrl-border);
  white-space: nowrap;
  color: var(--pa-ctrl-navy);
  font-family: var(--pa-ctrl-font);
}

.pa-money__suffix i,
.pa-money__suffix svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  color: var(--pa-ctrl-navy);
  flex-shrink: 0;
  opacity: 0.85;
}

/* DEPRECATED 2026-08-19: Dh + AED dual suffix removed. Hide leftover .pa-money__symbol. */
.pa-money__symbol {
  display: none;
}

.pa-money__code {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--pa-ctrl-navy);
}

html[data-theme='dark'] .pa-money__suffix {
  background: rgba(148, 163, 184, 0.12);
  border-left-color: var(--pa-ctrl-border);
  color: #e2e8f0;
}

html[data-theme='dark'] .pa-money__suffix i,
html[data-theme='dark'] .pa-money__suffix svg,
html[data-theme='dark'] .pa-money__symbol,
html[data-theme='dark'] .pa-money__code {
  color: #e2e8f0;
}

/* Phone / Money / Date — S/M/L width family (caption changes; chrome does not) */
.pa-field--phone.pa-field--s .pa-phone__dial {
  min-width: 2.55rem;
  max-width: 3.1rem;
}
.pa-field--phone.pa-field--m .pa-phone__dial {
  min-width: 4.25rem;
  max-width: 5rem;
}
.pa-field--phone.pa-field--l .pa-phone__dial {
  min-width: 5rem;
  max-width: 6rem;
}
.pa-field--money.pa-field--s .pa-money__suffix { padding: 0 10px; gap: 4px; }
.pa-field--money.pa-field--l .pa-money__suffix { padding: 0 14px; gap: 8px; }
.pa-field--money.pa-field--s .pa-money__symbol,
.pa-field--money.pa-field--s .pa-money__code { font-size: 11px; }
.pa-field--money.pa-field--l .pa-money__symbol,
.pa-field--money.pa-field--l .pa-money__code { font-size: 13px; }

/* ── Split field (money / bank) — sağ lacivert suffix ── */
.pa-field__control--split {
  padding: 0;
  overflow: hidden;
}

.pa-field__control--split.is-combo-open {
  overflow: visible;
}

.pa-field__control--split .pa-combo__trigger-ico {
  display: none;
}

.pa-field__control--split .pa-combo__trigger {
  padding-left: 14px;
}

.pa-field__control--split .pa-combo__trigger {
  padding-right: 28px;
}

.pa-split__suffix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  align-self: stretch;
  min-width: 4.25rem;
  padding: 0 12px;
  background: var(--pa-ctrl-navy);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  white-space: nowrap;
}

.pa-split__suffix i,
.pa-split__suffix svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  color: #fff;
  flex-shrink: 0;
}

.pa-split__code {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
}

.pa-combo__opt-short {
  margin-left: auto;
  padding-left: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--pa-ctrl-text-muted);
}

.pa-combo__opt.is-selected .pa-combo__opt-short {
  color: var(--pa-ctrl-blue);
}

/* ── Icon combobox (pa-combo) — her seçenekte Lucide ikon ── */
.pa-combo {
  position: relative;
  width: 100%;
  min-width: 0;
}

.pa-combo__native {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.pa-combo__trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: calc(var(--pa-ctrl-h) - 2px);
  padding: 0 36px 0 0;
  border: 0;
  background: transparent;
  color: var(--pa-ctrl-text);
  font-family: var(--pa-ctrl-font);
  font-size: var(--pa-ctrl-font-size, 14px);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.pa-field__control:not(:has(.pa-field__ico:first-child)) .pa-combo__trigger {
  padding-left: var(--pa-ctrl-pad-x, 14px);
}

.pa-combo__trigger-ico,
.pa-combo__opt-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--pa-ctrl-text-muted);
}
.pa-combo__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  font-size: 16px;
  line-height: 1;
  border-radius: 3px;
  user-select: none;
}

.pa-combo__trigger-ico i,
.pa-combo__trigger-ico svg,
.pa-combo__opt-ico i,
.pa-combo__opt-ico svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.75;
}

.pa-field__control:focus-within .pa-combo__trigger-ico,
.pa-combo.is-open .pa-combo__trigger-ico {
  color: var(--pa-ctrl-blue);
}

.pa-combo__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pa-combo__caret {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--pa-ctrl-text-muted);
  pointer-events: none;
}

.pa-combo.is-open .pa-combo__caret {
  transform: translateY(-50%) rotate(180deg);
  color: var(--pa-ctrl-blue);
}

.pa-combo__list {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--pa-ctrl-bg);
  border: 1px solid var(--pa-ctrl-border);
  border-radius: var(--pa-ctrl-radius);
  box-shadow: var(--pa-ctrl-shadow-elev);
  max-height: 260px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.pa-combo__list.is-fixed {
  position: fixed;
  z-index: 10050;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pa-combo__list[hidden] {
  display: none !important;
}

.pa-combo__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--pa-ctrl-text);
  font-family: var(--pa-ctrl-font);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.pa-combo__opt:hover,
.pa-combo__opt.is-active {
  background: var(--pa-ctrl-blue-soft);
  color: var(--pa-ctrl-navy);
}

html[data-theme='dark'] .pa-combo__opt:hover,
html[data-theme='dark'] .pa-combo__opt.is-active,
html[data-theme='dark'] .pa-combo__opt:hover,
html[data-theme='dark'] .pa-combo__opt.is-active {
  color: var(--pa-ctrl-text);
}

.pa-combo__opt.is-selected {
  font-weight: 650;
}

.pa-combo__opt.is-selected .pa-combo__opt-ico {
  color: var(--pa-ctrl-blue);
}

.pa-combo__empty {
  list-style: none;
  margin: 0;
  padding: 12px 10px;
  text-align: center;
}
.pa-combo__empty-msg {
  font-size: 12px;
  color: var(--pa-ctrl-text-muted);
}

/* ── Date field (pa-date) — popover = control width, flush below ── */
.pa-date {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  min-width: 0;
  flex: 1;
}
.pa-field__control > .pa-date {
  flex: 1;
  min-width: 0;
}
.pa-date__native {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.pa-date__text {
  flex: 1;
  min-width: 0;
  height: calc(var(--pa-ctrl-h) - 2px) !important;
  padding: 0 4px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 500;
}
.pa-field__control:not(:has(.pa-field__ico:first-child)) .pa-date__text {
  padding-left: 14px !important;
}
.pa-date__text.is-invalid {
  color: var(--pa-ctrl-danger);
}
.pa-date__cal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-right: 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pa-ctrl-text-muted);
  cursor: pointer;
}
.pa-date__cal-btn:hover,
.pa-date.is-open .pa-date__cal-btn {
  color: var(--pa-ctrl-blue);
  background: var(--pa-ctrl-blue-soft);
}
.pa-date.is-open .pa-date__cal-btn i,
.pa-date.is-open .pa-date__cal-btn svg {
  transform: rotate(180deg);
}
.pa-date__cal-btn i,
.pa-date__cal-btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.15s ease;
}
.pa-date__pop {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  background: var(--pa-ctrl-bg);
  border: 1px solid var(--pa-ctrl-border);
  border-radius: var(--pa-ctrl-radius);
  box-shadow: var(--pa-ctrl-shadow-elev);
  overflow: auto;
}
.pa-date__pop.is-fixed {
  position: fixed;
  z-index: 10050;
  right: auto;
  margin: 0;
}
.pa-date__pop[hidden] {
  display: none !important;
}
.pa-date__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}
.pa-date__month,
.pa-date__year {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 6px;
  border: 1px solid var(--pa-ctrl-border);
  border-radius: 8px;
  background: var(--pa-ctrl-bg-muted);
  color: var(--pa-ctrl-text);
  font-family: var(--pa-ctrl-font);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}
.pa-date__year {
  flex: 0 0 4.6rem;
  max-width: 5rem;
}
.pa-date__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pa-ctrl-text-sec);
  cursor: pointer;
  flex-shrink: 0;
}
.pa-date__nav-btn:hover {
  background: var(--pa-ctrl-blue-soft);
  color: var(--pa-ctrl-blue);
}
.pa-date__nav-btn i,
.pa-date__nav-btn svg {
  width: 16px;
  height: 16px;
}
.pa-date__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}
.pa-date__dow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--pa-ctrl-text-muted);
  text-transform: uppercase;
}
.pa-date__day {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-height: 0;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pa-ctrl-text);
  font-family: var(--pa-ctrl-font);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
}
.pa-date__day.is-empty {
  pointer-events: none;
  visibility: hidden;
}
.pa-date__day:hover {
  background: var(--pa-ctrl-blue-soft);
  color: var(--pa-ctrl-navy);
}
html[data-theme='dark'] .pa-date__day:hover,
html[data-theme='dark'] .pa-date__day:hover {
  color: var(--pa-ctrl-text);
}
.pa-date__day.is-today {
  box-shadow: inset 0 0 0 1px var(--pa-ctrl-border-strong);
}
.pa-date__day.is-selected {
  background: var(--pa-ctrl-navy);
  color: var(--on-primary, #fff);
}
.pa-date__day.is-selected:hover {
  background: var(--pa-ctrl-blue);
  color: var(--on-primary, #fff);
}

/* Compact combo inside widget navy head */
.pa-widget__control.pa-combo,
.pa-widget__head .pa-combo {
  min-width: 110px;
}

.pa-widget__head .pa-combo__trigger {
  min-height: var(--pa-widget-ctrl-h, 32px);
  height: var(--pa-widget-ctrl-h, 32px);
  padding: 0 28px 0 10px;
  color: #fff;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
}

.pa-widget__head .pa-combo__trigger-ico,
.pa-widget__head .pa-combo__caret {
  color: rgba(255, 255, 255, 0.85);
}

.pa-widget__head .pa-combo__list {
  min-width: 180px;
}

/* ── Phone (MOVA calculator .wiz-phone) — dial + national number ── */
.pa-field--phone .pa-field__control,
.pa-field__control--phone {
  padding: 0;
  overflow: hidden;
  gap: 0;
}

.pa-phone {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  min-height: calc(var(--pa-ctrl-h) - 2px);
}

.pa-phone__dial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
  position: relative;
  min-width: 2.55rem;
  max-width: 3.1rem;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--pa-ctrl-navy);
  background: rgba(0, 22, 64, 0.04);
  border-right: 1px solid var(--pa-ctrl-border);
  white-space: nowrap;
  font-family: var(--pa-ctrl-font);
  line-height: 1;
  cursor: pointer;
  margin: 0;
}
.pa-phone__dial .pa-combo,
.pa-phone__dial .pa-combo--dial {
  width: 100%;
  min-width: 0;
}
.pa-phone__dial .pa-combo__trigger {
  min-height: calc(var(--pa-ctrl-h) - 2px);
  padding: 0 16px 0 4px;
  gap: 2px;
  font-weight: 700;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.pa-phone__dial .pa-combo__label {
  flex: 0 1 auto;
}
.pa-phone__dial .pa-combo__caret {
  right: 4px;
  width: 12px;
  height: 12px;
}
.pa-phone__dial .pa-combo__flag {
  font-size: 15px;
}

/* Closed dial = +971 only. Hide ISO/flag (Windows draws 🇦🇪 as “AE”). List keeps flags. */
.pa-combo--dial > .pa-combo__trigger > .pa-combo__trigger-ico {
  display: none;
}

html[data-theme='dark'] .pa-phone__dial,
html[data-theme='dark'] .pa-phone__dial {
  color: #e2e8f0;
  background: rgba(148, 163, 184, 0.12);
}

.pa-phone__dial-code {
  font-variant-numeric: tabular-nums;
}

/* Interactive dial (CRM + UI Kit) — same shell as MOVA eligibility wiz-phone */
.pa-phone__dial-select,
.pa-phone__dial select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 0;
  margin: 0;
  outline: none;
  cursor: pointer;
  max-width: 4.75rem;
  min-width: 2.75rem;
  line-height: 1;
}

.pa-phone__dial img {
  width: 18px;
  height: 13px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
  pointer-events: none;
}

.pa-phone__dial-chev,
.pa-phone__dial i,
.pa-phone__dial svg {
  width: 12px;
  height: 12px;
  opacity: 0.55;
  flex-shrink: 0;
  color: currentColor;
  stroke-width: 2.5;
  pointer-events: none;
}

.pa-phone__input.pa-input,
.pa-phone .pa-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 12px !important;
  height: auto;
  min-height: calc(var(--pa-ctrl-h) - 2px);
  font-variant-numeric: tabular-nums;
}

.pa-field--phone .pa-field__control:focus-within,
.pa-field__control--phone:focus-within {
  border-color: var(--pa-ctrl-navy);
  box-shadow: 0 0 0 3px rgba(0, 22, 64, 0.08);
}

html[data-theme='dark'] .pa-field--phone .pa-field__control:focus-within,
html[data-theme='dark'] .pa-field__control--phone:focus-within,
html[data-theme='dark'] .pa-field--phone .pa-field__control:focus-within,
html[data-theme='dark'] .pa-field__control--phone:focus-within {
  border-color: var(--pa-ctrl-blue);
  box-shadow: var(--pa-ctrl-shadow-focus);
}

.pa-field.is-error .pa-field__control--phone:focus-within,
.pa-field--phone.is-error .pa-field__control:focus-within {
  border-color: var(--pa-ctrl-danger);
  box-shadow: 0 0 0 3px var(--pa-ctrl-danger-soft);
}

/* ═══════════════════════════════════════════
 * UI Kit foundations — color / type / icon / radius
 * ═══════════════════════════════════════════ */

.pa-found {
  font-family: var(--pa-ctrl-font);
}

.pa-found__block {
  margin: 0 0 28px;
}

.pa-found__block:last-child {
  margin-bottom: 0;
}

.pa-found__h {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pa-ctrl-text-sec);
}

.pa-found__note {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--pa-ctrl-text-muted);
  max-width: 62ch;
}

.pa-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
}

.pa-swatch {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pa-ctrl-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--pa-ctrl-bg);
  min-height: 96px;
}

.pa-swatch__chip {
  height: 52px;
  width: 100%;
  flex-shrink: 0;
}

.pa-swatch__meta {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pa-swatch__name {
  font-size: 12px;
  font-weight: 700;
  color: var(--pa-ctrl-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pa-swatch__hex {
  font-size: 11px;
  font-weight: 500;
  color: var(--pa-ctrl-text-muted);
  font-variant-numeric: tabular-nums;
}

.pa-type-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 20px;
  background: var(--pa-ctrl-bg);
  border: 1px solid var(--pa-ctrl-border);
  border-radius: 14px;
}

.pa-type-row {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 14px;
  align-items: baseline;
}

.pa-type-row__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pa-ctrl-text-muted);
}

.pa-type-display {
  margin: 0;
  font-family: var(--pa-ctrl-display);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--pa-ctrl-navy);
}

.pa-type-h1 {
  margin: 0;
  font-family: var(--pa-ctrl-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--pa-ctrl-navy);
}

.pa-type-h2 {
  margin: 0;
  font-family: var(--pa-ctrl-font);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--pa-ctrl-text-sec);
}

.pa-type-h3 {
  margin: 0;
  font-family: var(--pa-ctrl-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pa-ctrl-text);
}

.pa-type-h4 {
  margin: 0;
  font-family: var(--pa-ctrl-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pa-ctrl-text);
}

.pa-type-body {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--pa-ctrl-text);
}

.pa-type-body-sm {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--pa-ctrl-text-sec);
}

.pa-type-caption {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--pa-ctrl-text-muted);
}

.pa-type-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--pa-ctrl-text-sec);
}

.pa-type-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pa-ctrl-gold);
}

.pa-type-widget {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  background: var(--pa-ctrl-navy);
  display: inline-block;
  padding: 8px 14px;
  border-radius: 8px;
}

.pa-type-brand {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1;
}

.pa-type-brand > span:first-child {
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
}

.pa-type-brand .prop {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.pa-type-brand .atlas {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #3b82f6;
}

html[data-theme='dark'] .pa-type-display,
html[data-theme='dark'] .pa-type-h1,
html[data-theme='dark'] .pa-type-display,
html[data-theme='dark'] .pa-type-h1 {
  color: #f8fafc;
}

html[data-theme='dark'] .pa-type-brand .prop,
html[data-theme='dark'] .pa-type-brand .prop {
  color: #f8fafc;
}

.pa-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
}

.pa-icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 84px;
  padding: 12px 8px;
  border: 1px solid var(--pa-ctrl-border);
  border-radius: 12px;
  background: var(--pa-ctrl-bg);
  color: var(--pa-ctrl-text);
  text-align: center;
}

.pa-icon-tile i,
.pa-icon-tile svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.75;
  color: var(--pa-ctrl-blue);
}

.pa-icon-tile__name {
  font-size: 10px;
  font-weight: 600;
  color: var(--pa-ctrl-text-muted);
  word-break: break-all;
  line-height: 1.25;
}

.pa-token-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.pa-radius-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.pa-radius-demo__box {
  width: 64px;
  height: 64px;
  background: var(--pa-ctrl-blue-soft);
  border: 1px solid var(--pa-ctrl-border);
}

.pa-radius-demo__lab {
  font-size: 11px;
  font-weight: 600;
  color: var(--pa-ctrl-text-muted);
}

.pa-elev-demo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.pa-elev-demo__box {
  width: 72px;
  height: 48px;
  border-radius: 12px;
  background: var(--pa-ctrl-bg);
  border: 1px solid var(--pa-ctrl-border);
}

.pa-elev-demo__lab {
  font-size: 11px;
  font-weight: 600;
  color: var(--pa-ctrl-text-muted);
}

.pa-space-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.pa-space-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.pa-space-chip__bar {
  width: 28px;
  background: var(--pa-ctrl-navy);
  border-radius: 4px;
  opacity: 0.85;
}

.pa-space-chip__lab {
  font-size: 10px;
  font-weight: 700;
  color: var(--pa-ctrl-text-muted);
}

.pa-brand-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}

.pa-brand-mark {
  margin: 0;
  width: 140px;
  min-height: 220px;
  border-radius: 14px;
  border: 1px solid var(--pa-ctrl-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 12px 12px;
  box-sizing: border-box;
}

.pa-brand-mark img {
  width: auto;
  height: 148px;
  object-fit: contain;
  display: block;
}

.pa-brand-mark figcaption {
  font-size: 11px;
  font-weight: 700;
  color: var(--pa-ctrl-text-sec);
  letter-spacing: 0.02em;
}

.pa-brand-mark--light {
  background: #f8fafc;
}

.pa-brand-mark--navy,
.pa-brand-mark--dark {
  background: var(--pa-ctrl-navy);
}

.pa-brand-mark--navy figcaption,
.pa-brand-mark--dark figcaption {
  color: rgba(248, 250, 252, 0.85);
}

.pa-brand-mark--photo {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.35)),
    url('/mova/assets/areas/dubai-marina.jpg') center / cover;
}

.pa-brand-mark--photo figcaption {
  color: #f8fafc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.pa-shell-sizes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  align-items: start;
}

.pa-shell-size {
  border: 1px solid var(--pa-ctrl-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--pa-ctrl-bg);
}

.pa-shell-size__head {
  height: var(--pa-widget-head-h, 48px);
  background: var(--pa-ctrl-navy);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
}

.pa-shell-size__body {
  padding: 16px 14px;
  min-height: 72px;
  font-size: 12px;
  color: var(--pa-ctrl-text-sec);
  line-height: 1.4;
}

.pa-shell-size__foot {
  height: var(--pa-widget-foot-h, 36px);
  background: #f1f5f9;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px;
  font-size: 11px;
  color: #94a3b8;
}

.pa-shell-size__foot .prop { color: #0f172a; font-weight: 700; font-size: 15px; }
.pa-shell-size__foot .atlas { color: #3b82f6; font-weight: 700; font-size: 15px; }

html[data-theme='dark'] .pa-shell-size__foot,
html[data-theme='dark'] .pa-shell-size__foot {
  background: #1e293b;
  border-top-color: #334155;
}

html[data-theme='dark'] .pa-shell-size__foot .prop,
html[data-theme='dark'] .pa-shell-size__foot .prop {
  color: #f8fafc;
}

.pa-shell-size--kpi { max-width: 360px; }
.pa-shell-size--rates { max-width: 480px; }
.pa-shell-size--form { max-width: 760px; }
.pa-shell-size--wide { max-width: 100%; }

.pa-kit-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}

.pa-kit-toc a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--pa-ctrl-border);
  background: var(--pa-ctrl-bg);
  color: var(--pa-ctrl-text-sec);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.pa-kit-toc a:hover {
  border-color: var(--pa-ctrl-blue);
  color: var(--pa-ctrl-blue);
}

@media (max-width: 640px) {
  .pa-type-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .pa-type-display { font-size: 28px; }
  .pa-type-h1 { font-size: 22px; }
}

/* ═══════════════════════════════════════════
 * Patterns — alert, tabs, avatar, skeleton…
 * ═══════════════════════════════════════════ */

.pa-border-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pa-border-demo__item {
  width: 88px;
  height: 56px;
  border-radius: 12px;
  background: var(--pa-ctrl-bg);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--pa-ctrl-text-muted);
}

.pa-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--pa-ctrl-border);
  background: var(--pa-ctrl-bg-muted);
  font-size: 13px;
  line-height: 1.45;
  color: var(--pa-ctrl-text);
}

.pa-alert i,
.pa-alert svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.pa-alert--info {
  background: var(--pa-ctrl-blue-soft);
  border-color: rgba(23, 103, 232, 0.25);
  color: var(--pa-ctrl-navy);
}

.pa-alert--info i,
.pa-alert--info svg { color: var(--pa-ctrl-blue); }

.pa-alert--success {
  background: var(--pa-ctrl-success-soft);
  border-color: rgba(5, 150, 105, 0.25);
}

.pa-alert--success i,
.pa-alert--success svg { color: var(--pa-ctrl-success); }

.pa-alert--warn {
  background: var(--pa-ctrl-warn-soft);
  border-color: rgba(217, 119, 6, 0.28);
}

.pa-alert--warn i,
.pa-alert--warn svg { color: var(--pa-ctrl-warn); }

.pa-alert--danger {
  background: var(--pa-ctrl-danger-soft);
  border-color: rgba(225, 29, 72, 0.25);
}

.pa-alert--danger i,
.pa-alert--danger svg { color: var(--pa-ctrl-danger); }

html[data-theme='dark'] .pa-alert--info,
html[data-theme='dark'] .pa-alert--info {
  color: var(--pa-ctrl-text);
}

.pa-divider {
  border: 0;
  border-top: 1px solid var(--pa-ctrl-border);
  margin: 16px 0;
}

.pa-divider--label {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  margin: 16px 0;
  color: var(--pa-ctrl-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pa-divider--label::before,
.pa-divider--label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--pa-ctrl-border);
}

.pa-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  background: var(--pa-ctrl-bg-muted);
  border: 1px solid var(--pa-ctrl-border);
  border-radius: 12px;
}

.pa-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--pa-ctrl-text-sec);
  font-family: var(--pa-ctrl-font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.pa-tabs button .tab-ico,
.pa-tabs button svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.pa-tabs button.is-active {
  background: var(--pa-ctrl-bg);
  color: var(--pa-ctrl-navy);
  box-shadow: var(--pa-ctrl-shadow);
}

html[data-theme='dark'] .pa-tabs button.is-active,
html[data-theme='dark'] .pa-tabs button.is-active {
  color: var(--pa-ctrl-text);
}

/* Underline tabs — lead detail / document sections (CRM) */
.pa-tabs--line {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--pa-ctrl-border);
  border-radius: 0;
  width: 100%;
}

.pa-tabs--line button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: auto;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  border-bottom: 4px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--pa-ctrl-text-sec);
  box-shadow: none;
  font-size: 13.5px;
}

.pa-tabs--line button:hover {
  color: var(--pa-ctrl-text);
}

.pa-tabs.pa-tabs--line button.is-active,
.pa-tabs--line button.is-active {
  background: transparent !important;
  color: var(--primary, var(--pa-ctrl-blue));
  border-bottom-color: var(--primary, var(--pa-ctrl-blue));
  box-shadow: none !important;
  font-weight: 700;
}

html[data-theme='dark'] .pa-tabs--line button.is-active,
html[data-theme='dark'] .pa-tabs--line button.is-active {
  color: var(--primary, var(--pa-ctrl-text));
  border-bottom-color: var(--primary, var(--pa-ctrl-blue));
}

.mtg-unseen-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 999px;
  background: #c53030;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  animation: mtg-unseen-pulse 1.1s ease-in-out infinite;
}

@keyframes mtg-unseen-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.92); }
}

@media (prefers-reduced-motion: reduce) {
  .mtg-unseen-badge { animation: none; }
}

/* Kanban — mortgage pipeline */
.pa-kanban {
  display: grid;
  grid-template-columns: repeat(6, minmax(160px, 1fr));
  gap: 12px;
  overflow-x: auto;
}

.pa-kcol {
  background: var(--pa-ctrl-bg-muted);
  border: 1px solid var(--pa-ctrl-border);
  border-radius: 14px;
  padding: 10px;
  min-height: 140px;
}

.pa-kcol__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--pa-ctrl-text-sec);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pa-kcard {
  background: var(--pa-ctrl-bg);
  border: 1px solid var(--pa-ctrl-border);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--pa-ctrl-text);
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.pa-kcard:hover {
  border-color: var(--pa-ctrl-blue);
  box-shadow: var(--pa-ctrl-shadow);
}

.pa-kcard__title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--pa-ctrl-text);
}

.pa-kcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: var(--pa-ctrl-text-sec);
}

.pa-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pa-ctrl-blue-soft);
  color: var(--pa-ctrl-blue);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.pa-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.pa-avatar--lg { width: 56px; height: 56px; font-size: 18px; }
.pa-avatar--gold {
  background: var(--pa-ctrl-gold-soft);
  color: #8a6a2a;
}

.pa-skeleton {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--pa-ctrl-bg-muted) 25%, rgba(255,255,255,0.55) 50%, var(--pa-ctrl-bg-muted) 75%);
  background-size: 200% 100%;
  animation: pa-skel 1.2s ease-in-out infinite;
}

.pa-skeleton--title { height: 18px; width: 55%; margin-bottom: 10px; }
.pa-skeleton--line { width: 100%; margin-bottom: 8px; }
.pa-skeleton--line-sm { width: 72%; margin-bottom: 8px; }
.pa-skeleton--circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

@keyframes pa-skel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.pa-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--pa-ctrl-bg-muted);
  overflow: hidden;
  border: 1px solid var(--pa-ctrl-border);
}

.pa-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pa-ctrl-blue), #3b82f6);
}

.pa-progress--gold > span {
  background: linear-gradient(90deg, #c9a35a, #e8bc56);
}

.pa-tooltip {
  position: relative;
  display: inline-flex;
}

.pa-tooltip__bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--pa-ctrl-navy);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--pa-ctrl-shadow-elev);
}

.pa-tooltip__bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--pa-ctrl-navy);
}

.pa-pager {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pa-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--pa-ctrl-border);
  background: var(--pa-ctrl-bg);
  color: var(--pa-ctrl-text-sec);
  cursor: pointer;
}

.pa-pager__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pa-pager__btn i,
.pa-pager__btn svg {
  width: 16px;
  height: 16px;
}

.pa-pager__meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--pa-ctrl-text-muted);
  min-width: 4.5rem;
  text-align: center;
}

.pa-pattern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.pa-pattern-card {
  padding: 16px;
  border: 1px solid var(--pa-ctrl-border);
  border-radius: 14px;
  background: var(--pa-ctrl-bg);
}

.pa-pattern-card__title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pa-ctrl-text-muted);
}

.pa-card-sizes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  align-items: start;
}

.pa-card-sizes .pa-card {
  width: 100%;
  margin: 0;
}

.pa-card-sizes .pa-card__body {
  min-height: 0;
  padding: 20px 18px;
}

.pa-card-sizes .pa-h1 {
  font-size: 22px;
  margin-bottom: 6px;
}

.pa-card-sizes .pa-h2 {
  font-size: 14px;
  margin-bottom: 0;
}

.uikit-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--pa-ctrl-border);
  background: var(--pa-ctrl-bg);
  color: var(--pa-ctrl-text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--pa-ctrl-font);
}

.uikit-theme-toggle i,
.uikit-theme-toggle svg {
  width: 16px;
  height: 16px;
}

.pa-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--pa-ctrl-border);
  border-radius: 12px;
}

.pa-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--pa-ctrl-font);
  font-size: 13px;
  color: var(--pa-ctrl-text);
}

.pa-table thead th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-primary, #fff);
  background: var(--pa-ctrl-navy, #001640);
  white-space: nowrap;
}

.pa-table tbody td {
  padding: 12px 14px;
  border-top: 1px solid var(--pa-ctrl-border);
  vertical-align: middle;
}

.pa-table tbody tr.is-active td,
.pa-table tbody tr.is-on td {
  background: transparent !important;
  box-shadow: inset 0 2px 0 0 var(--primary, var(--pa-ctrl-blue)),
    inset 0 -2px 0 0 var(--primary, var(--pa-ctrl-blue));
  outline: none;
}

.pa-table tbody tr:nth-child(even) td {
  background: rgba(15, 23, 42, 0.03);
}

html[data-theme='dark'] .pa-table tbody tr:nth-child(even) td,
html[data-theme='dark'] .pa-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.03);
}

.pa-table .pa-badge {
  font-size: 11px;
}


/* ═══════════════════════════════════════════
 * Mobile patterns — ONE kit, adaptive density
 * Breakpoints: 900 (tablet) · 640 (phone)
 * ═══════════════════════════════════════════ */

:root {
  --pa-touch-min: 44px;
  --pa-mobile-pad: 12px;
  --pa-sheet-radius: 18px 18px 0 0;
}

.pa-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 14px;
}

.pa-toolbar .pa-field { margin: 0; }
.pa-toolbar__grow { flex: 1 1 200px; min-width: 160px; }

.pa-sheet {
  background: var(--pa-ctrl-bg);
  border: 1px solid var(--pa-ctrl-border);
  border-radius: 18px;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.28);
  max-width: min(560px, 92vw);
  width: 100%;
  max-height: 88vh;
  overflow: auto;
}

.pa-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--pa-ctrl-border);
}

.pa-sheet__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--pa-ctrl-text);
}

.pa-sheet__body { padding: 16px 18px; }
.pa-sheet__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--pa-ctrl-border);
}

.pa-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pa-list__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--pa-ctrl-border);
  border-radius: 12px;
  background: var(--pa-ctrl-bg);
  color: var(--pa-ctrl-text);
  font-size: 13px;
}

.pa-list__item:active {
  border-color: var(--pa-ctrl-blue);
}

.pa-list__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--pa-ctrl-text-sec);
}

.pa-bottom-bar {
  display: none;
  position: sticky;
  bottom: 0;
  z-index: 20;
  gap: 8px;
  padding: 10px var(--pa-mobile-pad);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: var(--pa-ctrl-bg);
  border-top: 1px solid var(--pa-ctrl-border);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
}

.pa-bottom-bar .pa-btn { flex: 1 1 auto; }

.pa-stack { display: flex; flex-direction: column; gap: 12px; }
.pa-stack--tight { gap: 8px; }

.pa-hide-mobile { display: initial; }
.pa-show-mobile { display: none !important; }

/* CRM live aliases → kit fields (legacy mtg-field markup) */
.mtg-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.mtg-field select,
.mtg-field textarea,
.mtg-input,
.pa-input.mtg-input {
  min-height: var(--pa-ctrl-h);
  border-radius: var(--pa-ctrl-radius);
  font-family: var(--pa-ctrl-font);
}

.mtg-field .pa-field__label,
.mtg-field > label {
  font-size: 12px;
  font-weight: 600;
  color: var(--pa-ctrl-text-sec);
}

.mtg-wrap {
  min-width: 0;
  max-width: 100%;
}

#mtg-leads-delegate {
  min-width: 0;
}

.cto-upload {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cto-upload .pa-field__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--pa-ctrl-text-sec, var(--text-muted));
}

.cto-file-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cto-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--pa-ctrl-border, var(--border));
  border-radius: 8px;
  background: var(--pa-ctrl-bg, var(--bg-card));
  font-size: 12px;
  line-height: 1.3;
}

.cto-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 18rem;
}

.cto-chip__x {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0 2px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
}

.cto-chip__x:hover {
  color: var(--text-primary);
}

.bcto-board {
  display: grid;
  gap: 16px;
}

.bcto-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.bcto-board .bcto-kpi {
  margin: 0;
}

.bcto-board .bcto-kpi .pa-widget__head {
  padding: 10px 12px 0;
}

.bcto-board .bcto-kpi .pa-kpi-widget__body {
  align-items: flex-start;
  text-align: left;
  gap: 4px;
  padding: 8px 12px 12px;
}

.bcto-board .bcto-kpi .pa-kpi-widget__icon {
  display: none;
}

.bcto-board .bcto-kpi .pa-kpi-widget__value {
  font-size: 22px;
}

.bcto-kpi--lead .pa-kpi-widget__value {
  color: #c9a35a;
}

.bcto-kpi__hint {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
}

.bcto-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.bcto-chart {
  margin: 0;
  min-width: 0;
}

.bcto-chart .pa-widget__body {
  padding: 8px 12px 12px;
}

.bcto-chart__canvas {
  position: relative;
  height: 220px;
}

.bcto-note {
  margin: 0;
}

.bcto-note p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-primary);
}

.bcto-note p:last-child {
  margin-bottom: 0;
}

.bcto-meta {
  display: grid;
  gap: 8px;
}

@media (max-width: 900px) {
  .bcto-kpis,
  .bcto-charts {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .bcto-kpis,
  .bcto-charts {
    grid-template-columns: 1fr;
  }

  .bcto-chart__canvas {
    height: 200px;
  }

  .bcto-board .bcto-kpi .pa-kpi-widget__body {
    min-height: 44px;
  }
}

/* CRM live aliases → kit table/panel */
.mtg-wrap--uikit .mtg-panel,
.pa-panel {
  background: var(--pa-ctrl-bg, var(--bg-card));
  border: 1px solid var(--pa-ctrl-border, var(--border));
  border-radius: 14px;
  margin-bottom: 16px;
}

.mtg-wrap--uikit .mtg-table,
.pa-table.mtg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.mtg-wrap--uikit .mtg-table thead th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-primary, #fff) !important;
  background: var(--pa-ctrl-navy, #001640) !important;
}

.mtg-wrap--uikit .mtg-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--pa-ctrl-border, var(--border));
  color: var(--text-primary);
}

.mtg-wrap--uikit .mtg-toolbar,
.pa-toolbar.mtg-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 14px;
}

.mtg-wrap--uikit .mtg-tabs.pa-tabs,
.pa-tabs.mtg-tabs {
  display: inline-flex;
  gap: 2px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  padding: 4px;
  background: var(--pa-ctrl-bg-muted, var(--bg-panel));
  border: 1px solid var(--pa-ctrl-border, var(--border));
  border-radius: 12px;
}

.mtg-wrap--uikit .mtg-tab,
.pa-tabs .mtg-tab {
  height: 32px;
  padding: 0 14px;
  border-radius: 9px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.mtg-wrap--uikit .mtg-tab.active,
.mtg-wrap--uikit .mtg-tab.is-active,
.pa-tabs .mtg-tab.active {
  background: var(--pa-ctrl-bg, var(--bg-card));
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

@media (max-width: 900px) {
  .pa-kanban,
  .mtg-kanban.pa-kanban,
  .mtg-kanban {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
  }

  .pa-kcol,
  .mtg-kcol {
    flex: 0 0 min(78vw, 280px);
    min-width: min(78vw, 280px);
    scroll-snap-align: start;
  }

  .pa-modal--wide,
  .pa-modal--xl,
  .mtg-modal--wide,
  .mtg-modal--product {
    width: min(100vw - 16px, 96vw) !important;
    max-height: 92vh !important;
  }

  .pa-hide-mobile { display: none !important; }
  .pa-show-mobile { display: flex !important; }

  .pa-toolbar,
  .mtg-toolbar--uikit,
  .mtg-wrap--uikit .mtg-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .pa-toolbar .pa-btn,
  .mtg-toolbar--uikit .pa-btn,
  .mtg-head .pa-btn {
    width: 100%;
  }

  .pa-toolbar .pa-field,
  .mtg-toolbar--uikit .pa-field,
  .mtg-toolbar--uikit .mtg-toolbar-search {
    max-width: none !important;
    width: 100%;
  }

  .pa-bottom-bar { display: flex; }

  .mtg-ld-body,
  .mtg-ldp .mtg-ld-body {
    grid-template-columns: 1fr !important;
  }

  .mtg-ld-right {
    border-left: none !important;
    border-top: 1px solid var(--border);
  }

  .mtg-ld-maintabs,
  .pa-tabs--line {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }

  .mtg-ld-maintabs .mtg-rtab,
  .pa-tabs--line button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .mtg-head {
    flex-wrap: wrap;
    gap: 10px;
  }
}

@media (max-width: 640px) {
  .pa-btn:not(.pa-btn--sm):not(.pa-btn--icon) {
    min-height: var(--pa-touch-min);
  }

  .pa-sheet,
  .mtg-modal-bg .mtg-modal:not(.mtg-modal--wide):not(.mtg-modal--product) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    max-width: 100vw !important;
    width: 100vw !important;
    max-height: min(92vh, 100dvh) !important;
    border-radius: var(--pa-sheet-radius) !important;
    margin: 0;
  }

  .mtg-modal-bg {
    align-items: flex-end !important;
  }

  .mtg-cards {
    grid-template-columns: 1fr 1fr !important;
  }

  .mtg-grid2,
  .mtg-edit-grid {
    grid-template-columns: 1fr !important;
  }

  .pa-dash-board {
    overflow-x: auto;
  }

  .uikit-mobile-frame {
    max-width: 100%;
  }
}

/* UI Kit mobile gallery frame */
.uikit-mobile-frame {
  width: min(360px, 100%);
  margin: 0 auto;
  border: 1px solid var(--pa-ctrl-border);
  border-radius: 28px;
  padding: 12px;
  background: var(--pa-ctrl-bg-muted, var(--bg-panel));
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
}

.uikit-mobile-frame__notch {
  width: 96px;
  height: 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.35);
  margin: 4px auto 14px;
}

.uikit-mobile-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

/* Data grid — standart çerçeve: tablo head sağ ikonlar + her zaman Details */
.pa-grid-frame {
  min-width: 0;
}

.pa-grid-frame__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  background: var(--bg-card);
}

.pa-grid-frame__main {
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.pa-grid-frame__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 6px 10px 6px 12px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.pa-grid-frame__lead {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.pa-grid-frame__search {
  position: relative;
  margin: 0;
  gap: 0;
  flex: 1 1 12rem;
  min-width: 10rem;
  max-width: 18rem;
}

.pa-grid-frame__search[hidden] {
  display: none !important;
}

.pa-grid-frame__search .pa-field__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pa-grid-frame__paging {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
}

.pa-grid-frame__count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.pa-grid-frame__perpage {
  width: 72px;
  min-width: 72px;
  height: 32px;
  padding: 0 8px;
}

.pa-grid-frame__pages .grid-pager-nums {
  flex-wrap: nowrap;
}

.pa-grid-frame__tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  margin-left: auto;
}

.pa-grid-frame__tools .pa-btn--icon {
  color: var(--text-secondary, var(--pa-ctrl-text-sec));
}

.pa-grid-frame__bulk-del:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  color: var(--text-muted, #94a3b8);
}

.pa-grid-frame__bulk-del:not(:disabled) {
  color: #ef4444;
}

.pa-grid-frame__bulk-del:not(:disabled):hover {
  background: rgba(239, 68, 68, 0.1);
}

html[data-theme='dark'] .pa-grid-frame__bulk-del:not(:disabled) {
  color: #f87171;
}

.pa-grid-frame__detail-sec {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.pa-grid-frame__detail-extra {
  margin-top: 0;
}

.pa-grid-frame__detail-extra .qq-result {
  margin: 0;
}

.pa-grid-frame__detail-head--simple {
  margin-bottom: 10px;
}

.pa-grid-frame__detail-head--simple h3 {
  font-size: 15px;
  font-weight: 700;
}

.pa-grid-frame__export {
  position: relative;
}

.pa-grid-frame__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 168px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
}

.pa-grid-frame__menu[hidden] {
  display: none !important;
}

.pa-grid-frame__menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.pa-grid-frame__menu-item:hover {
  background: var(--bg-hover, var(--pa-ctrl-blue-soft, rgba(23, 103, 232, 0.1)));
}

.pa-grid-frame__menu-item i,
.pa-grid-frame__menu-item svg,
.pa-grid-frame__menu-item .lucide {
  width: 15px;
  height: 15px;
  color: var(--pa-ctrl-accent, #c9a35a);
}

.pa-grid-frame__cols {
  padding: 10px 12px 0;
}

.pa-grid-frame__cols[hidden] {
  display: none !important;
}

.pa-grid-frame__table {
  min-width: 0;
}

.pa-grid-frame__table .grid-table-wrap {
  overflow-x: hidden;
}

.pa-grid-frame__detail {
  min-width: 0;
  min-height: 280px;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  padding: 16px 18px;
}

.pa-grid-frame__detail-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.45;
}

.pa-grid-frame__detail-empty[hidden],
.pa-grid-frame__detail-body[hidden] {
  display: none !important;
}

.pa-grid-frame__detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.pa-grid-frame__detail-head h3 {
  margin: 0;
  font-size: 16px;
}

.pa-grid-frame__detail-meta {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.pa-grid-frame__detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}

.pa-grid-frame__detail-grid dt {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.pa-grid-frame__detail-grid dd {
  margin: 2px 0 0;
  font-size: 13px;
}

@media (max-width: 1100px) {
  .pa-grid-frame__split {
    grid-template-columns: 1fr;
  }
  .pa-grid-frame__detail {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}