/**
 * App UI system — single place for brand colors, forms, tables, buttons.
 * Load after impro-style.css in layouts/default.php
 *
 * Multi-column data forms (e.g. dalibnieki /client):
 *   .form-columns + .form-column.left | .form-column.right
 *   Alias: .app-form--columns + .app-form__column
 */

/* ------------------------------------------------------------------ tokens */
:root {
  --app-font-sans: "Poppins", sans-serif;

  --app-color-primary: #00a64d;
  --app-color-primary-dark: #008f44;
  --app-color-accent: #f98e00;
  --app-color-accent-dark: #e07d00;

  --app-color-text: #000;
  --app-color-text-muted: #555;
  --app-color-bg: #f4f4f4;
  --app-color-surface: #fff;
  --app-color-border: #ccc;
  --app-color-border-light: #ddd;

  --app-color-table-header: #f98e00;
  --app-color-table-row-alt: #f9f9f9;
  --app-color-table-hover: #ffe5cc;

  --app-color-link: #00a64d;
  --app-color-link-hover: #008f44;

  --app-color-alert: #f98e00;
  --app-color-alert-bg: #fff4e5;

  --app-color-success: #0d6b3d;
  --app-color-success-bg: #e8f5ed;
  --app-color-success-border: #00a64d;

  --app-radius: 5px;
  --app-radius-lg: 8px;

  --app-space-1: 0.35rem;
  --app-space-2: 0.5rem;
  --app-space-3: 1rem;
  --app-space-4: 1.25rem;
  --app-space-5: 1.5rem;
  --app-space-6: 2rem;

  --app-gap-columns: 40px;
  --app-title-gap: 50px;
  --app-section-gap: 1rem;

  --app-input-padding: 10px;
  /* Narrow search column (grupas, rezervācijas, utt.): one size for labels, inputs, selects, custom dropdowns */
  --app-font-size-search: 14px;
  --app-shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);

  /* Match primary (filled) and secondary (outline) control outer size */
  --app-btn-border-width: 1px;
  --app-btn-padding-y: 10px;
  --app-btn-padding-x: 24px;

  /* Horizontal inset for pages using layouts/default (tables, forms — not edge-to-edge) */
  --app-content-inline-padding: clamp(12px, 3vw, 32px);
}

/* Default layout: breathing room on left/right so tables are not 100vw-wide.
   Keep impro horizontal centering for row layout; column pages override below so
   content starts at the top instead of being vertically centered. */
main.content {
  padding-inline: var(--app-content-inline-padding);
  box-sizing: border-box;
  justify-content: center;
}

/* impro .content is flex-row + justify-center; Norēķini report puts search + table as two
   direct children — without this they sit side-by-side. Stack: form on top (centered via
   .search-container margins), full-width results below. */
main.content:has(.assignment-list--norekini-results) {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--app-space-4);
}

/* Standalone login view (users/login.php — no default layout) */
body:has(.login-container) {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background-color: var(--app-color-bg);
}

.login-legacy-note {
  margin: 36px 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #666;
}

/* ------------------------------------------------------------------ layout helpers */
.app-stack {
  display: flex;
  flex-direction: column;
  gap: var(--app-space-3);
}

.app-stack--lg {
  gap: var(--app-space-5);
}

/* ------------------------------------------------------------------ typography */
.app-page-title,
h3.app-page-title {
  margin-top: var(--app-title-gap);
  margin-bottom: var(--app-section-gap);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--app-color-text);
}

/* .app-stack already uses gap between children — bottom margin on the title stacked with
   that gap and looked like double spacing above the form (Norēķini, Iemaksa, utt.). */
.app-stack > .app-page-title {
  margin-bottom: 0;
}

/* Second page title on same screen (e.g. home: two search blocks) */
.app-page-title--follow {
  margin-top: var(--app-title-gap);
}

.app-section-title,
.client-form h4.app-section-title {
  margin-bottom: var(--app-space-2);
  font-size: 1rem;
  font-weight: 600;
  color: var(--app-color-text);
}

/* Keep legacy spacing utilities mapped to tokens where used */
.doublegap {
  margin-top: var(--app-title-gap);
}

/* ------------------------------------------------------------------ buttons (canonical; overrides impro tokens)
   Intrinsic width (label + padding), not full container width — block + width:auto stretches. */
button[type="submit"]:not(.btn-icon):not(.btn-delete) {
  border: var(--app-btn-border-width) solid var(--app-color-primary);
  border-radius: var(--app-radius);
  background-color: var(--app-color-primary);
  color: #fff;
  padding: var(--app-btn-padding-y) var(--app-btn-padding-x);
  font-size: 16px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 400;
  line-height: 1.2;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
}

button[type="submit"]:not(.btn-icon):not(.btn-delete):hover {
  background-color: var(--app-color-accent);
  border-color: var(--app-color-accent);
}

/* Link styled as button (navigation back, cancel, etc.) */
a.app-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--app-radius);
  padding: var(--app-btn-padding-y) var(--app-btn-padding-x);
  width: fit-content;
  max-width: 100%;
  font-size: 16px;
  font-family: inherit;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
}

a.app-btn--secondary {
  border: var(--app-btn-border-width) solid var(--app-color-primary);
  background-color: var(--app-color-surface);
  color: var(--app-color-primary);
}

a.app-btn--secondary:hover {
  background-color: var(--app-color-accent);
  border-color: var(--app-color-accent);
  color: #fff;
}

a.app-btn:focus-visible {
  outline: 2px solid var(--app-color-primary);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ alerts & messages */
.error-message,
.warning-message {
  background-color: var(--app-color-alert-bg);
  color: var(--app-color-alert);
  text-align: center;
  padding: 12px;
  margin-bottom: 20px;
  border-radius: var(--app-radius);
  font-weight: bold;
  border: 1px solid var(--app-color-alert);
}

.success-message {
  background-color: var(--app-color-success-bg);
  color: var(--app-color-success);
  text-align: center;
  padding: 12px;
  margin-bottom: 20px;
  border-radius: var(--app-radius);
  font-weight: bold;
  border: 1px solid var(--app-color-success-border);
}

/* ------------------------------------------------------------------ search forms (narrow, centered) */
.search-container,
.app-form--search {
  width: 100%;
  max-width: 468px;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  font-size: var(--app-font-size-search);
}

.search-container h3,
.app-form--search h3 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
}

.search-container label,
.app-form--search label {
  font-size: 1em;
  font-weight: 500;
}

.search-container input[type="text"],
.search-container input[type="date"],
.search-container input[type="email"],
.search-container input[type="password"],
.search-container input[type="number"],
.search-container select,
.app-form--search input[type="text"],
.app-form--search input[type="date"],
.app-form--search input[type="email"],
.app-form--search input[type="password"],
.app-form--search input[type="number"],
.app-form--search select {
  width: 100%;
  padding: var(--app-input-padding);
  margin: 10px 0;
  border-radius: var(--app-radius);
  border: 1px solid var(--app-color-border);
  box-sizing: border-box;
  font-family: inherit;
  font-size: 1em;
  background-color: var(--app-color-surface);
}

/* impro custom dropdowns (valsts / nosaukums) — same size as native fields */
.search-container .custom-select .selected,
.search-container .searchable-select .searchable-selected,
.app-form--search .custom-select .selected,
.app-form--search .searchable-select .searchable-selected {
  font-size: 1em;
}

.search-container .custom-select .options,
.search-container .custom-select .options input,
.search-container .custom-select .options div,
.search-container .searchable-select .searchable-options,
.search-container .searchable-select .searchable-options input,
.search-container .searchable-select .searchable-options div,
.app-form--search .custom-select .options,
.app-form--search .custom-select .options input,
.app-form--search .custom-select .options div,
.app-form--search .searchable-select .searchable-options,
.app-form--search .searchable-select .searchable-options input,
.app-form--search .searchable-select .searchable-options div {
  font-size: 1em;
}

.search-container input:focus-visible,
.search-container select:focus-visible,
.app-form--search input:focus-visible,
.app-form--search select:focus-visible {
  outline: 2px solid var(--app-color-primary);
  outline-offset: 1px;
}

.search-container button[type="submit"]:not(.btn-icon):not(.btn-delete),
.app-form--search button[type="submit"]:not(.btn-icon):not(.btn-delete) {
  margin-bottom: 20px;
  margin-top: 20px;
  width: fit-content;
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
}

.search-container a.app-btn,
.app-form--search a.app-btn {
  margin-bottom: 20px;
  margin-top: 0;
  width: fit-content;
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Home: smaller search buttons */
.home-search-container button {
  width: fit-content;
  max-width: 100%;
  padding: var(--app-btn-padding-y) var(--app-btn-padding-x);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* impro: .login-container button { width:100% } */
.login-container button {
  width: fit-content;
  max-width: 100%;
  padding: var(--app-btn-padding-y) var(--app-btn-padding-x);
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* impro: reservation / client blocks used block + width:auto (full row) */
.client-form .form-actions button,
.new-reservation button {
  width: fit-content;
  max-width: 100%;
  min-width: 0;
}

.reservation-group-form button,
.reservation-new-form button {
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  padding: var(--app-btn-padding-y) var(--app-btn-padding-x);
}

.reservation-status--withdrawn {
  color: var(--app-color-text-muted, #6b7280);
  font-size: 0.85em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.reservation-status--withdrawn-date {
  color: var(--app-color-text-muted, #6b7280);
  font-size: 0.85em;
  margin-left: 0.25rem;
}

.reservation-row--withdrawn td:nth-child(4) {
  color: var(--app-color-alert, #b45309);
}

.reservation-withdrawal-blocked {
  color: var(--app-color-text-muted, #6b7280);
  font-size: 0.9em;
  cursor: help;
}

/* impro: .search-container button — any button in narrow search column */
.search-container button:not(.btn-icon):not(.btn-delete),
.app-form--search button:not(.btn-icon):not(.btn-delete) {
  width: fit-content;
  max-width: 100%;
}

/* Row of form actions (e.g. Pievienot + Atgriezties) */
.search-container .app-form-actions,
.app-form--search .app-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--app-space-3);
  margin-top: var(--app-space-4);
  margin-bottom: var(--app-space-3);
}

/* Center an explicit action group as a single unit. */
.search-container .app-form-actions-wrap,
.app-form--search .app-form-actions-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.search-container .app-form-actions--grouped,
.app-form--search .app-form-actions--grouped {
  display: inline-flex;
  width: auto;
  max-width: 100%;
}

.search-container .app-form-actions > button[type="submit"],
.app-form--search .app-form-actions > button[type="submit"],
.search-container .app-form-actions > a.app-btn,
.app-form--search .app-form-actions > a.app-btn {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

/* Norēķini iemaksa / izmaksa: balance readout */
.balance-container {
  margin: var(--app-space-3) 0;
}

.balance-eur {
  display: flex;
  flex-direction: column;
  gap: var(--app-space-1);
}

.balance-eur h4 {
  margin: 0;
}

.balance-eur .balance-eur__amount {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

/* Iemaksa search: payment row + helper text */
.status-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--app-space-2);
  margin-bottom: var(--app-space-3);
}

.status-row label {
  font-size: 14px;
  font-weight: 500;
  color: var(--app-color-text);
}

.status-row p {
  font-size: 16px;
  margin: 0;
}

/* ------------------------------------------------------------------ multi-column DATA forms
   Dalibnieki client: two columns side-by-side on wide screens, stack on narrow. */
.form-columns,
.app-form--columns {
  display: flex;
  gap: var(--app-gap-columns);
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
}

.form-column,
.app-form__column {
  flex: 1 1 300px;
  min-width: min(100%, 300px);
}

.form-column.left,
.form-column.right,
.app-form__column {
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------------------ single-column / stacked fields (shared controls) */
.app-field {
  display: flex;
  flex-direction: column;
  gap: var(--app-space-1);
  margin-bottom: var(--app-space-3);
}

.app-field label {
  font-size: 14px;
  font-weight: 500;
  color: var(--app-color-text);
}

/* Norēķini / centered search forms: search inputs use margin:10px 0 globally — stacks with
   .app-section-title margin and .app-field gap, so label→control gap looks too large. */
.search-container .app-field > .app-section-title,
.app-form--search .app-field > .app-section-title {
  margin-bottom: 0;
}

.search-container .app-field,
.app-form--search .app-field {
  gap: var(--app-space-2);
}

.search-container .app-field > input,
.search-container .app-field > select,
.app-form--search .app-field > input,
.app-form--search .app-field > select {
  margin-top: 0;
  margin-bottom: 0;
}

.client-form input[type="text"],
.client-form input[type="date"],
.client-form input[type="email"],
.client-form select,
.reservation-group-form input[type="text"],
.reservation-group-form input[type="date"],
.reservation-group-form select {
  width: 100%;
  padding: var(--app-input-padding);
  margin: 10px 0;
  border-radius: var(--app-radius);
  border: 1px solid var(--app-color-border);
  box-sizing: border-box;
  font-family: inherit;
}

/* Dalibnieki: uppercase entry for names / IDs */
.client-form input[type="text"],
.client-form input[type="email"] {
  text-transform: uppercase;
}

input::placeholder {
  text-transform: none;
}

/* Dalibnieki client: stack form, reservations table, and actions vertically (not side-by-side). */
main.content:has(.client-form) {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.client-form {
  max-width: 800px;
  border-radius: var(--app-radius-lg);
  width: 100%;
}

/* Semantic hook for stacked data forms (dalibnieki); layout = .form-columns */
.app-data-form {
  box-sizing: border-box;
}

/* ------------------------------------------------------------------ tables (single canonical block — loads after impro) */
.assignment-list {
  width: 100%;
  margin-top: 30px;
}

.styled-table,
.app-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--app-color-surface);
  box-shadow: var(--app-shadow-sm);
  font-size: 14px;
  margin-bottom: 50px;
}

.styled-table th,
.styled-table td,
.app-table th,
.app-table td {
  padding: 12px 15px;
  border: 1px solid var(--app-color-border-light);
  text-align: left;
  vertical-align: middle;
}

.styled-table thead,
.app-table thead {
  background-color: var(--app-color-table-header);
  color: #fff;
}

.styled-table tbody tr:nth-child(even),
.app-table tbody tr:nth-child(even) {
  background-color: var(--app-color-table-row-alt);
}

.styled-table tbody tr:hover,
.app-table tbody tr:hover {
  background-color: var(--app-color-table-hover);
}

.styled-table td.centered,
.app-table td.app-table__num {
  text-align: center;
}

.clickable-table tbody tr {
  cursor: pointer;
}

.assignment-list.narrow {
  margin-top: 30px;
  width: fit-content;
  max-width: 100%;
}

/* Grupas search results: table on desktop, stacked cards on narrow screens */
.grupas-results-cards {
  display: none;
}

.grupas-result-card {
  background-color: var(--app-color-surface);
  border: 1px solid var(--app-color-border-light);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-sm);
  margin-bottom: var(--app-space-3);
  padding: var(--app-space-4);
  cursor: pointer;
}

.grupas-result-card:hover {
  background-color: var(--app-color-table-hover);
}

.grupas-result-card--cancelled {
  color: #c00;
}

.grupas-result-card__header {
  margin-bottom: var(--app-space-3);
  padding-bottom: var(--app-space-2);
  border-bottom: 1px solid var(--app-color-border-light);
}

.grupas-result-card__title {
  margin: 0 0 var(--app-space-1);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.grupas-result-card__kods {
  display: block;
  font-size: 0.875rem;
  color: var(--app-color-text-muted);
}

.grupas-result-card__pdf {
  display: inline-block;
  margin-top: var(--app-space-1);
  font-size: 0.875rem;
}

.grupas-result-card--cancelled .grupas-result-card__pdf {
  color: #c00;
}

.grupas-result-card__fields {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--app-space-2) var(--app-space-4);
}

.grupas-result-card__field {
  margin: 0;
  min-width: 0;
}

.grupas-result-card__field--full {
  grid-column: 1 / -1;
}

.grupas-result-card__field dt {
  margin: 0 0 0.15rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--app-color-text-muted);
}

.grupas-result-card__field dd {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  word-break: break-word;
}

@media (max-width: 992px) {
  .assignment-list.narrow.grupas-results {
    width: 100%;
  }

  .grupas-results-table-wrap {
    display: none;
  }

  .grupas-results-cards {
    display: block;
    margin-bottom: var(--app-space-6);
  }

  .grupas-results .styled-table {
    margin-bottom: 0;
  }
}

@media (max-width: 480px) {
  .grupas-result-card__fields {
    grid-template-columns: 1fr;
  }
}

/* Dalībnieku saraksts: half-width list block (replaces per-page overwrite) */
.assignment-list--half {
  width: 50%;
  max-width: 100%;
  margin-top: 30px;
}

@media (max-width: 768px) {
  .assignment-list--half {
    width: 100%;
  }
}

/* Norēķini meklēšana: wide results (avoid .narrow fit-content on many columns) */
.assignment-list--norekini-results {
  width: 100%;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--app-space-4);
}

/* Interesenti: editable table — min-widths so input columns are not crushed by fixed peers */
.table-container--interesenti .table-block {
  max-width: min(100%, 1680px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-container--interesenti .styled-table {
  table-layout: auto;
}

/* Aģents: compact text column */
.table-container--interesenti .styled-table th:nth-child(1),
.table-container--interesenti .styled-table td:nth-child(1) {
  min-width: 5rem;
  max-width: 10rem;
}

/* Vārds, Uzvārds */
.table-container--interesenti .styled-table th:nth-child(2),
.table-container--interesenti .styled-table td:nth-child(2),
.table-container--interesenti .styled-table th:nth-child(3),
.table-container--interesenti .styled-table td:nth-child(3) {
  min-width: 9rem;
}

/* Telefons */
.table-container--interesenti .styled-table th:nth-child(4),
.table-container--interesenti .styled-table td:nth-child(4) {
  min-width: 8.5rem;
}

/* E-pasts */
.table-container--interesenti .styled-table th:nth-child(5),
.table-container--interesenti .styled-table td:nth-child(5) {
  min-width: 14rem;
}

/* Laiks — keep on one line, use little extra space */
.table-container--interesenti .styled-table th:nth-child(6),
.table-container--interesenti .styled-table td:nth-child(6) {
  width: 1%;
  min-width: 10.5rem;
  white-space: nowrap;
}

/* Piezīmes */
.table-container--interesenti .styled-table th:nth-child(7),
.table-container--interesenti .styled-table td:nth-child(7) {
  min-width: 14rem;
}

/* Darbības */
.table-container--interesenti .styled-table th:nth-child(8),
.table-container--interesenti .styled-table td:nth-child(8) {
  width: 1%;
  white-space: nowrap;
}

.table-container--interesenti .styled-table input[type="text"],
.table-container--interesenti .styled-table input[type="email"] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 10px;
  margin: 0;
  border-radius: var(--app-radius);
  border: 1px solid var(--app-color-border);
  font-family: inherit;
  font-size: 14px;
  background-color: var(--app-color-surface);
}

.table-container--interesenti .styled-table input:focus-visible {
  outline: 2px solid var(--app-color-primary);
  outline-offset: 1px;
}

/* Inline payment-method select inside settlement table */
.app-table-inline-form {
  display: flex;
  align-items: center;
  gap: 5px;
}

select.app-select--compact {
  width: 100px;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* Norēķini report search form */
.app-form--search .payment-method-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--app-space-2);
  margin-bottom: var(--app-space-3);
}

.app-form--search .payment-method-row label {
  font-size: 14px;
  font-weight: 500;
  color: var(--app-color-text);
}

.app-form--search .date-row {
  display: flex;
  gap: var(--app-space-2);
}

.app-form--search .date-row input[type="text"] {
  flex: 1;
  min-width: 0;
  margin-top: 0;
}

.styled-table button.btn-delete {
  background-color: #e53935;
  color: #fff;
  border: var(--app-btn-border-width) solid #e53935;
  border-radius: var(--app-radius);
  padding: var(--app-btn-padding-y) var(--app-btn-padding-x);
  font-size: 16px;
  font-family: inherit;
  font-weight: 400;
  line-height: 1.2;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
}

.styled-table button.btn-delete:hover {
  background-color: #c62828;
  color: #fff;
}

.assignment-list--norekini-results .styled-table button.btn-delete {
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1;
  min-width: 22px;
}

.centered-heading {
  text-align: center;
  margin-bottom: 20px;
}

/* ------------------------------------------------------------------ content links (match brand) */
.content a:link,
.content a:visited,
footer a:link,
footer a:visited {
  color: var(--app-color-link);
}

.content a:hover,
footer a:hover {
  color: var(--app-color-link-hover);
}

.content a.app-btn--secondary:link,
.content a.app-btn--secondary:visited {
  color: var(--app-color-primary);
}

.content a.app-btn--secondary:hover {
  color: #fff;
}

.group-link a {
  font-size: 14px;
  color: var(--app-color-link);
  text-decoration: none;
  font-weight: bold;
}

.group-link a:hover {
  color: var(--app-color-accent);
}

/* ------------------------------------------------------------------ modal overlay */
.app-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--app-space-4);
  background: rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}

.app-modal {
  width: 100%;
  max-width: 420px;
  padding: var(--app-space-5);
  background: var(--app-color-surface);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-sm);
  box-sizing: border-box;
}

.app-modal__title {
  margin: 0 0 var(--app-space-3);
  font-size: 1.15rem;
  font-weight: 600;
  text-align: center;
  color: var(--app-color-text);
}

.app-modal__text {
  margin: 0 0 var(--app-space-5);
  text-align: center;
  color: var(--app-color-text-muted);
  line-height: 1.45;
}

.app-modal__actions {
  justify-content: center;
}