/**
 * vo-modals.css — Canonical Modal/Dialog System for REWORQ Virtual Office
 *
 * SINGLE SOURCE OF TRUTH for every popup in the dashboard.
 * Enqueued LAST (see Virtual_Office::enqueue_canonical_component_styles), after
 * vo-design.css, vo-email-modern.css, saas-dashboard.css, vo-buttons.css and
 * frontend.css, so it wins the cascade over every older scattered definition.
 *
 * DO NOT add modal rules to saas-dashboard.css / vo-design.css / vo-email-modern.css.
 * Consolidate here instead.
 *
 * ---------------------------------------------------------------------------
 * WHY THIS FILE EXISTS
 * ---------------------------------------------------------------------------
 * The dashboard had six competing modal implementations sharing overlapping
 * class names, with `.vo-modal` defined 3x, `.vo-modal-header` 3x and `.vo-btn`
 * 4x in a single stylesheet. Five different class names all meant "the row of
 * buttons at the bottom". The result: only the SOP modal looked correct, and it
 * only did so because it carried a private `#vo-sop-form .vo-modal-footer`
 * override. This file makes the SOP look the default for everything.
 *
 * Reference (the visual gold standard this normalizes toward):
 *   .vo-modal-overlay > .vo-modal-container
 *     > .vo-modal-header (.vo-modal-title + .vo-modal-close)
 *     > .vo-modal-body
 *     > .vo-modal-footer (.vo-btn-secondary "Prekliči" + .vo-btn-primary)
 *
 * Both markup conventions are supported so no template is forced to change:
 *   System A: .vo-modal-overlay > .vo-modal-container
 *   System B: .vo-modal         > .vo-modal-content
 *
 * Class names are intentionally UNCHANGED from existing conventions.
 */

/* ==========================================================================
   TOKENS
   Dedicated modal layer tokens. We deliberately do NOT redefine the existing
   --vo-z-modal / --vo-z-modal-overlay: frontend.css:430 misuses --vo-z-modal
   for the mobile sidebar, so changing it would drag the sidebar along.

   Layer order (low -> high):
     plugin sticky header/sidebar   100 / 1000 / 1002
     dropdowns                      1100
     THEME site header (.rw-header) 9999   <- hello-elementor-child, sticky
     MODALS                         100000 / 100001   <- this file
     toasts & notifications         100100 (must stay ABOVE modals so success
                                            messages remain visible over a dialog)

   The theme's own sticky site header sits at 9999, so a modal band below that
   renders UNDERNEATH the site nav — the dialog's title row disappears behind
   it. The modal layer therefore has to clear the theme, not just the plugin.
   ========================================================================== */

:root {
  --vo-z-modal-backdrop: 100000;
  --vo-z-modal-surface: 100001;
  --vo-z-modal-toast: 100100;

  --vo-modal-radius: 12px;
  --vo-modal-pad-x: 24px;
  --vo-modal-pad-y: 24px;
  --vo-modal-gap: 12px;
  --vo-modal-backdrop-color: rgba(15, 23, 42, 0.55);
  --vo-modal-surface-color: #ffffff;
  --vo-modal-border-color: #e5e7eb;
  --vo-modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
}

/* ==========================================================================
   1. BACKDROP / OVERLAY
   Covers both markup systems plus the bespoke per-feature modals that were
   never migrated (import wizard, join-company, web-orders settings, tools).
   ========================================================================== */

.vo-modal-overlay,
.vo-modal,
.vo-import-modal,
.vo-join-modal,
.vo-web-orders-settings-modal,
.vo-tools-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: var(--vo-space-5, 20px);

  /* Hidden by default. Every show-mechanism in use is re-enabled in §2. */
  display: none;
  align-items: center;
  justify-content: center;

  background: var(--vo-modal-backdrop-color);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: var(--vo-z-modal-backdrop);

  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
}

/* ==========================================================================
   2. VISIBILITY
   The codebase opens modals five different ways. Rather than rewrite every
   call site, all five are honoured here. New code should use .active only.
   ========================================================================== */

/* (a) canonical: class toggle */
.vo-modal-overlay.active,
.vo-modal.active,
.vo-import-modal.active,
.vo-join-modal.active,
.vo-web-orders-settings-modal.active,
.vo-tools-modal.active {
  display: flex;
}

/* (b) jQuery .css('display','flex') / .show() on a flex element — the inline
       style already wins; nothing needed. */

/* (c) jQuery .fadeIn()/.show() leaves an inline `display: block`, which silently
       kills the flex centering and renders the dialog at the top-left.
       Normalize it back to flex. */
.vo-modal-overlay[style*="display: block"],
.vo-modal-overlay[style*="display:block"],
.vo-modal[style*="display: block"],
.vo-modal[style*="display:block"],
.vo-import-modal[style*="display: block"],
.vo-import-modal[style*="display:block"],
.vo-tools-modal[style*="display: block"],
.vo-tools-modal[style*="display:block"] {
  display: flex !important;
}

/* (d) [hidden]-attribute modals (join-company, web-orders settings, import).
       An explicit inline `display` would otherwise defeat [hidden]. */
.vo-modal-overlay[hidden],
.vo-modal[hidden],
.vo-import-modal[hidden],
.vo-join-modal[hidden],
.vo-web-orders-settings-modal[hidden],
.vo-tools-modal[hidden] {
  display: none !important;
}

/* (e) legacy `.hidden` utility used by vo-tools.js */
.vo-modal-overlay.hidden,
.vo-modal.hidden,
.vo-tools-modal.hidden {
  display: none !important;
}

/* Body scroll lock — set by the shared modal controller. */
body.vo-modal-open {
  overflow: hidden;
}

/* ==========================================================================
   3. SURFACE (the dialog box itself)
   ========================================================================== */

.vo-modal-container,
.vo-modal-content,
.vo-import-modal-box,
.vo-join-modal-content,
.vo-web-orders-settings-dialog,
.vo-tools-modal-content {
  position: relative;
  display: flex;
  flex-direction: column;

  width: 100%;
  max-width: 640px;
  max-height: min(90vh, 900px);
  margin: auto;

  background: var(--vo-modal-surface-color);
  border-radius: var(--vo-modal-radius);
  box-shadow: var(--vo-modal-shadow);
  z-index: var(--vo-z-modal-surface);

  /* The surface never scrolls; only .vo-modal-body does. This is what keeps
     the header and footer pinned and stops the "endlessly tall modal" feel. */
  overflow: hidden;
  box-sizing: border-box;

  animation: voModalIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes voModalIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vo-modal-container,
  .vo-modal-content,
  .vo-import-modal-box,
  .vo-join-modal-content,
  .vo-web-orders-settings-dialog,
  .vo-tools-modal-content {
    animation: none;
  }
}

/* ---- Size variants -------------------------------------------------------
   Widths are capped so a simple contact form never inherits the 1200px skin
   built for the invoice line-item editor. */
.vo-modal-sm,
.vo-modal-container.vo-modal-sm,
.vo-modal-content.vo-modal-sm { max-width: 460px; }

.vo-modal-md,
.vo-modal-container.vo-modal-md,
.vo-modal-content.vo-modal-md { max-width: 640px; }

.vo-modal-lg,
.vo-modal-container.vo-modal-lg,
.vo-modal-content.vo-modal-lg { max-width: 820px; }

.vo-modal-xl,
.vo-modal-container.vo-modal-xl,
.vo-modal-content.vo-modal-xl { max-width: 1040px; }

/* The "modern" skin used by offers/invoices genuinely needs the room: the
   line-item editor, VAT columns and payment summary all sit side by side.
   Keeps its original 1200px/95% footprint — this width is wanted here. The
   two !important declarations it used to carry are gone, because this file
   simply loads later and no longer has to fight the cascade.

   Note: this class is ONLY for the invoice/quote editor. It used to be
   reused for the simple CRM contact form, which is what made that popup
   feel oversized; that form now takes .vo-modal-lg instead. */
.vo-modal-modern-lg,
.vo-modal-content.vo-modal-modern-lg,
.vo-modal-container.vo-modal-modern-lg {
  width: 95%;
  max-width: 1200px;
  border-radius: var(--vo-modal-radius);
}

/* SOP keeps its established width. */
.vo-sop-modal-container { max-width: 880px; }

/* ==========================================================================
   4. HEADER
   ========================================================================== */

.vo-modal-header,
.vo-import-modal-header,
.vo-join-modal-header,
.vo-web-orders-settings-header,
.vo-tools-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vo-modal-gap);
  flex: 0 0 auto;

  margin: 0;
  padding: 20px var(--vo-modal-pad-x);
  background: var(--vo-modal-surface-color);
  border-bottom: 1px solid var(--vo-modal-border-color);
  border-radius: var(--vo-modal-radius) var(--vo-modal-radius) 0 0;
}

.vo-modal-title,
.vo-import-modal-title,
.vo-tools-modal-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--vo-text, #1f2937);
}

/* Headings used instead of .vo-modal-title in older markup. */
.vo-modal-header h2,
.vo-modal-header h3,
.vo-modal-header h4 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--vo-text, #1f2937);
}

/* ---- Close button --------------------------------------------------------
   Normalizes the four different close elements in use: .vo-modal-close,
   .vo-close-button, and bare <span>/<button> variants. */
.vo-modal-close,
.vo-modal-header .vo-close-button,
.vo-import-modal-header .vo-import-modal-close,
.vo-join-modal-close,
.vo-web-orders-settings-close,
.vo-tools-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  /* Reset any inline/legacy positioning from bespoke markup. */
  position: static;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;

  font-size: 20px;
  line-height: 1;
  font-weight: 400;
  color: var(--vo-text-muted, #6b7280);

  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.vo-modal-close:hover,
.vo-modal-header .vo-close-button:hover,
.vo-join-modal-close:hover,
.vo-web-orders-settings-close:hover,
.vo-tools-modal-close:hover {
  background: var(--vo-bg-muted, #f3f4f6);
  color: var(--vo-text, #1f2937);
}

.vo-modal-close:focus-visible,
.vo-modal-header .vo-close-button:focus-visible {
  outline: 2px solid var(--vo-blue, #3b82f6);
  outline-offset: 2px;
}

/* ==========================================================================
   5. BODY
   The only scrolling region. Header and footer stay pinned.
   ========================================================================== */

.vo-modal-body,
.vo-modal-body-scroll,
.vo-import-modal-body,
.vo-join-modal-body,
.vo-web-orders-settings-body,
.vo-tools-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--vo-modal-pad-y) var(--vo-modal-pad-x);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* A <form> used directly as the body (tab-support.php) still needs to flex so
   its footer pins correctly. */
form.vo-modal-body {
  display: block;
}

/* When the form wraps body+footer, it must carry the flex column itself,
   otherwise the footer cannot pin and the body cannot scroll. */
.vo-modal-container > form,
.vo-modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
}

/* ==========================================================================
   6. FOOTER — the fix for the "crooked Prekliči" reports
   Five class names historically meant the same thing. Two of them
   (.vo-form-actions, .vo-modal-actions) sat INSIDE the padded body, so their
   separator line was inset from the modal edge instead of spanning it, and
   .vo-form-actions had no `gap` at all — leaving Prekliči flush against the
   primary button. All five now resolve to one spec.
   ========================================================================== */

.vo-modal-footer,
.vo-modal-footer-sticky,
.vo-modal-actions,
.vo-web-orders-form-actions,
.vo-modal-container .vo-form-actions,
.vo-modal-content .vo-form-actions,
.vo-import-modal-box .vo-import-step-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--vo-modal-gap);
  flex: 0 0 auto;
  flex-wrap: wrap;

  /* Reset the margin/padding-top idiom used by the in-body variants so the
     separator spans the full modal width like a real footer. */
  margin: 0;
  padding: 16px var(--vo-modal-pad-x);

  background: var(--vo-bg-page, #f9fafb);
  border-top: 1px solid var(--vo-modal-border-color);
  border-bottom-left-radius: var(--vo-modal-radius);
  border-bottom-right-radius: var(--vo-modal-radius);
}

/* Footers that pair a left-hand secondary action (Test connection, Delete,
   order actions) with the right-hand confirm group. */
.vo-modal-footer.vo-modal-footer-split,
.vo-web-orders-form-actions,
.vo-import-modal-box .vo-import-step-nav {
  justify-content: space-between;
}

/* Push a single leading element to the left without extra wrappers. */
.vo-modal-footer > .vo-modal-footer-start {
  margin-right: auto;
}

/* Footers still nested inside the scrolling body must not be sticky-broken. */
.vo-modal-body > .vo-modal-footer,
.vo-modal-body > .vo-modal-actions,
.vo-modal-body > .vo-form-actions,
.vo-modal-body-scroll > .vo-modal-footer,
.vo-modal-body-scroll > .vo-form-actions {
  margin: var(--vo-modal-pad-y) calc(-1 * var(--vo-modal-pad-x))
          calc(-1 * var(--vo-modal-pad-y));
  border-bottom-left-radius: var(--vo-modal-radius);
  border-bottom-right-radius: var(--vo-modal-radius);
}

/* ==========================================================================
   7. BUTTON RECONCILIATION — the other half of "crooked"
   `.vo-btn` was a Frankenstein: vo-email-modern.css set display/align-items,
   then saas-dashboard.css overrode padding/font-size/border WITHOUT setting
   display — and never overrode .vo-btn-ghost, so ghost buttons stayed two
   sizes smaller than the .vo-btn-primary/.vo-btn-secondary beside them.
   Here every button that can appear in a footer is given identical metrics.
   ========================================================================== */

.vo-modal-footer .vo-btn,
.vo-modal-footer .vo-button,
.vo-modal-footer button,
.vo-modal-footer .vo-btn-primary,
.vo-modal-footer .vo-btn-secondary,
.vo-modal-footer .vo-btn-ghost,
.vo-modal-footer .vo-btn-primary-modern,
.vo-modal-footer .vo-btn-warning,
.vo-modal-footer .vo-btn-danger,
.vo-modal-actions .vo-btn,
.vo-modal-actions .vo-button,
.vo-modal-actions button,
.vo-modal-footer-sticky .vo-btn,
.vo-modal-footer-sticky .vo-button,
.vo-modal-footer-sticky button,
.vo-modal-footer-sticky .vo-btn-secondary,
.vo-modal-footer-sticky .vo-btn-primary-modern,
.vo-modal-container .vo-form-actions .vo-button,
.vo-modal-content .vo-form-actions .vo-button,
.vo-modal-container .vo-form-actions button,
.vo-modal-content .vo-form-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 40px;
  padding: 9px 18px;
  margin: 0;

  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;

  /* A transparent border on EVERY footer button. Previously some buttons had
     `border: none` and their neighbours `border: 1px solid`, so the bordered
     one rendered 2px taller — the visible misalignment. */
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* ---- Variants ---- */
.vo-modal-footer .vo-btn-primary,
.vo-modal-footer .vo-button-primary,
.vo-modal-footer .vo-btn-primary-modern,
.vo-modal-actions .vo-btn-primary,
.vo-modal-actions .vo-button-primary,
.vo-modal-footer-sticky .vo-btn-primary,
.vo-modal-footer-sticky .vo-btn-primary-modern,
.vo-modal-footer-sticky .vo-button-primary,
.vo-modal-container .vo-form-actions .vo-button-primary,
.vo-modal-content .vo-form-actions .vo-button-primary {
  background: var(--vo-blue, #3b82f6);
  border-color: var(--vo-blue, #3b82f6);
  color: #ffffff;
}

.vo-modal-footer .vo-btn-primary:hover,
.vo-modal-footer .vo-button-primary:hover,
.vo-modal-footer .vo-btn-primary-modern:hover,
.vo-modal-actions .vo-btn-primary:hover,
.vo-modal-actions .vo-button-primary:hover,
.vo-modal-footer-sticky .vo-btn-primary:hover,
.vo-modal-footer-sticky .vo-btn-primary-modern:hover,
.vo-modal-container .vo-form-actions .vo-button-primary:hover,
.vo-modal-content .vo-form-actions .vo-button-primary:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

/* Secondary AND ghost resolve to the same neutral button, so a "Prekliči"
   never renders smaller or lighter than the button next to it. */
.vo-modal-footer .vo-btn-secondary,
.vo-modal-footer .vo-btn-ghost,
.vo-modal-footer .vo-button-secondary,
.vo-modal-footer .vo-modal-cancel,
.vo-modal-actions .vo-btn-secondary,
.vo-modal-actions .vo-button-secondary,
.vo-modal-actions .vo-modal-cancel,
.vo-modal-footer-sticky .vo-btn-secondary,
.vo-modal-footer-sticky .vo-button-secondary,
.vo-modal-footer-sticky .vo-modal-cancel,
.vo-modal-container .vo-form-actions .vo-button-secondary,
.vo-modal-content .vo-form-actions .vo-button-secondary {
  background: #ffffff;
  border-color: var(--vo-modal-border-color);
  color: var(--vo-text, #374151);
}

.vo-modal-footer .vo-btn-secondary:hover,
.vo-modal-footer .vo-btn-ghost:hover,
.vo-modal-footer .vo-button-secondary:hover,
.vo-modal-footer .vo-modal-cancel:hover,
.vo-modal-actions .vo-btn-secondary:hover,
.vo-modal-actions .vo-button-secondary:hover,
.vo-modal-footer-sticky .vo-btn-secondary:hover,
.vo-modal-footer-sticky .vo-button-secondary:hover,
.vo-modal-container .vo-form-actions .vo-button-secondary:hover,
.vo-modal-content .vo-form-actions .vo-button-secondary:hover {
  background: var(--vo-bg-muted, #f3f4f6);
  border-color: #d1d5db;
  color: var(--vo-text, #1f2937);
}

.vo-modal-footer .vo-button-danger,
.vo-modal-footer .vo-btn-danger,
.vo-modal-actions .vo-button-danger,
.vo-modal-footer-sticky .vo-button-danger {
  background: var(--vo-red, #ef4444);
  border-color: var(--vo-red, #ef4444);
  color: #ffffff;
}

.vo-modal-footer button:focus-visible,
.vo-modal-actions button:focus-visible,
.vo-modal-footer-sticky button:focus-visible {
  outline: 2px solid var(--vo-blue, #3b82f6);
  outline-offset: 2px;
}

.vo-modal-footer button:disabled,
.vo-modal-actions button:disabled,
.vo-modal-footer-sticky button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ==========================================================================
   8. FORM FIELDS
   Seven conventions were in play (.vo-input, .vo-form-input, .vo-form-control,
   .vo-input-modern, plus support.php's fields with no class at all).
   Inside a modal they all render identically.
   ========================================================================== */

.vo-modal-body .vo-form-group,
.vo-modal-body-scroll .vo-form-group,
.vo-modal-body .vo-input-group,
.vo-modal-body-scroll .vo-input-group {
  margin-bottom: 16px;
}

.vo-modal-body .vo-form-label,
.vo-modal-body-scroll .vo-form-label,
.vo-modal-body label,
.vo-modal-body-scroll label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--vo-text, #374151);
}

.vo-modal-body .vo-form-input,
.vo-modal-body .vo-form-select,
.vo-modal-body .vo-form-textarea,
.vo-modal-body .vo-input,
.vo-modal-body .vo-input-modern,
.vo-modal-body .vo-form-control,
.vo-modal-body input[type="text"],
.vo-modal-body input[type="email"],
.vo-modal-body input[type="number"],
.vo-modal-body input[type="tel"],
.vo-modal-body input[type="url"],
.vo-modal-body input[type="date"],
.vo-modal-body input[type="password"],
.vo-modal-body select,
.vo-modal-body textarea,
.vo-modal-body-scroll .vo-form-input,
.vo-modal-body-scroll .vo-input,
.vo-modal-body-scroll .vo-input-modern,
.vo-modal-body-scroll input[type="text"],
.vo-modal-body-scroll input[type="email"],
.vo-modal-body-scroll input[type="number"],
.vo-modal-body-scroll select,
.vo-modal-body-scroll textarea {
  width: 100%;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--vo-text, #1f2937);
  background: #ffffff;
  border: 1px solid var(--vo-modal-border-color);
  border-radius: 8px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vo-modal-body .vo-form-input:focus,
.vo-modal-body .vo-input:focus,
.vo-modal-body input:focus,
.vo-modal-body select:focus,
.vo-modal-body textarea:focus,
.vo-modal-body-scroll input:focus,
.vo-modal-body-scroll select:focus,
.vo-modal-body-scroll textarea:focus {
  outline: none;
  border-color: var(--vo-blue, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* Checkboxes/radios must not be stretched to 100% by the rule above. */
.vo-modal-body input[type="checkbox"],
.vo-modal-body input[type="radio"],
.vo-modal-body-scroll input[type="checkbox"],
.vo-modal-body-scroll input[type="radio"] {
  width: auto;
  padding: 0;
}

.vo-modal-body textarea,
.vo-modal-body-scroll textarea {
  min-height: 90px;
  resize: vertical;
}

/* Two-column form grids used across SOP/tasks/projects/clients. */
.vo-modal-body .vo-form-grid,
.vo-modal-body .vo-form-row-2,
.vo-modal-body-scroll .vo-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  .vo-modal-overlay,
  .vo-modal,
  .vo-import-modal,
  .vo-join-modal,
  .vo-web-orders-settings-modal,
  .vo-tools-modal {
    padding: 12px;
    align-items: flex-end;
  }

  .vo-modal-container,
  .vo-modal-content,
  .vo-import-modal-box,
  .vo-join-modal-content,
  .vo-web-orders-settings-dialog,
  .vo-tools-modal-content,
  .vo-modal-modern-lg,
  .vo-modal-content.vo-modal-modern-lg,
  .vo-sop-modal-container {
    max-width: 100%;
    max-height: calc(100vh - 24px);
  }

  .vo-modal-header,
  .vo-modal-body,
  .vo-modal-body-scroll,
  .vo-modal-footer,
  .vo-modal-footer-sticky,
  .vo-modal-actions {
    padding-left: 16px;
    padding-right: 16px;
  }

  .vo-modal-body .vo-form-grid,
  .vo-modal-body .vo-form-row-2,
  .vo-modal-body-scroll .vo-form-grid {
    grid-template-columns: 1fr;
  }

  /* Primary action on top, Prekliči below — the standard mobile ordering. */
  .vo-modal-footer,
  .vo-modal-footer-sticky,
  .vo-modal-actions,
  .vo-modal-container .vo-form-actions,
  .vo-modal-content .vo-form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .vo-modal-footer > *,
  .vo-modal-footer-sticky > *,
  .vo-modal-actions > *,
  .vo-modal-container .vo-form-actions > *,
  .vo-modal-content .vo-form-actions > * {
    width: 100%;
  }

  .vo-modal-footer > .vo-modal-footer-start {
    margin-right: 0;
  }
}

/* ==========================================================================
   10. THEME DEFENCE
   --------------------------------------------------------------------------
   hello-elementor/assets/css/reset.css ships:

     [type=button],[type=submit],button {
       background-color: transparent;
       border: 1px solid #c36;
       border-radius: 3px;
       color: #c36;
       padding: .5rem 1rem;
     }

   `[type=button]` has specificity (0,1,0) — an exact TIE with `.vo-modal-close`
   — so whichever stylesheet loads later wins. The theme used to load after us,
   which is why the close button rendered as a pink outlined box with a crimson
   glyph instead of the quiet grey square the SOP dialog has.

   This file is now enqueued at priority 999 (see
   Virtual_Office::enqueue_canonical_styles_late) so it prints after the theme
   and Elementor. The compound selectors below add a second line of defence:
   `button.vo-modal-close` is (0,1,1) and outranks the theme's reset outright,
   so the close button survives even if the load order ever changes again.
   ========================================================================== */

button.vo-modal-close,
button.vo-close-button,
.vo-modal-header button.vo-modal-close,
.vo-modal-header button.vo-close-button,
.vo-import-modal-header button.vo-modal-close,
.vo-web-orders-settings-header button.vo-web-orders-settings-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  position: static;
  width: 32px;
  height: 32px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;

  font-family: inherit;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-transform: none;

  color: var(--vo-text-muted, #6b7280);
  background: transparent;
  background-color: transparent;
  border: 1px solid transparent;   /* transparent, not none — keeps the 32px box */
  border-radius: 8px;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

button.vo-modal-close:hover,
button.vo-close-button:hover,
.vo-modal-header button.vo-modal-close:hover,
.vo-modal-header button.vo-close-button:hover {
  background: var(--vo-bg-muted, #f3f4f6);
  background-color: var(--vo-bg-muted, #f3f4f6);
  border-color: transparent;
  color: var(--vo-text, #1f2937);
}

button.vo-modal-close:focus-visible,
button.vo-close-button:focus-visible {
  outline: 2px solid var(--vo-blue, #3b82f6);
  outline-offset: 2px;
}

/* Footer buttons: the same tie exists for [type=submit] vs .vo-btn-primary.
   Compound `button.` selectors put our variants back on top for good. */
.vo-modal-footer button.vo-btn-primary,
.vo-modal-footer button.vo-button-primary,
.vo-modal-footer button.vo-btn-primary-modern,
.vo-modal-footer-sticky button.vo-btn-primary,
.vo-modal-actions button.vo-btn-primary {
  background-color: var(--vo-blue, #3b82f6);
  border-color: var(--vo-blue, #3b82f6);
  color: #ffffff;
}

.vo-modal-footer button.vo-btn-secondary,
.vo-modal-footer button.vo-btn-ghost,
.vo-modal-footer button.vo-button-secondary,
.vo-modal-footer-sticky button.vo-btn-secondary,
.vo-modal-actions button.vo-btn-secondary {
  background-color: #ffffff;
  border-color: var(--vo-modal-border-color);
  color: var(--vo-text, #374151);
}

/* Toasts and notifications must stay above the modal layer, otherwise a
   success message fires behind the dialog that triggered it. */
.vo-toast,
.vo-notification,
.vo-big-success-notification {
  z-index: var(--vo-z-modal-toast, 100100);
}