:root {
  /* Mapped to the visiisvien-theme design tokens (assets/css/tokens.css),
     with the plugin's original palette kept as fallback so it still looks
     correct when used standalone (outside the theme). */
  --mk-primary: var(--vi-blue, #1e4e8c);
  --mk-secondary: var(--vi-warm, #f1e9db);
  --mk-accent: var(--vi-blue-deep, #14335d);
  --mk-success: var(--vi-amber, #e9a820);
  --mk-error: var(--vi-red, #a6373f);
  --mk-text: var(--vi-ink, #23241f);
  --mk-text-light: var(--vi-muted, #6b6a63);
  --mk-border: var(--vi-warm, #e0e0e0);
  --mk-shadow: 0 4px 20px rgba(35, 36, 31, 0.15);
  --mk-ukraine-blue: var(--vi-blue, #1e4e8c);
  --mk-ukraine-yellow: var(--vi-amber, #e9a820);
  --mk-background: var(--vi-paper, #fffdf9);
  --mk-background-secondary: var(--vi-cream, #faf6ef);
}

/* Default shortcode button styles - Ukrainian Yellow theme */
.mk-donate-trigger-btn,
.mk-btn-normal,
.mk-btn-large {
  background: var(--mk-ukraine-yellow);
  color: var(--mk-text);
  border: none;
  border-radius: 14px;
  padding: 12px 24px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(233, 168, 32, 0.3);
  position: relative;
  overflow: hidden;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
  min-width: 120px;
  white-space: nowrap;
}

.mk-btn-large {
  padding: 16px 32px;
  font-size: 16px;
  min-width: 150px;
}

.mk-donate-trigger-btn:hover,
.mk-btn-normal:hover,
.mk-btn-large:hover {
  background: var(--vi-amber-hover, #c98d12);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(233, 168, 32, 0.4);
  color: var(--mk-text);
  cursor: pointer;
}

/* Width modifier classes for custom button widths */
/* Usage in shortcodes: width="small|medium|large|xl|full|auto" */
/* Examples: 
   [mk_donate_button width="full" text="Support Us"] - Full width button
   [mk_onetime_button width="small" text="Donate"] - Small width button
   [mk_donate_trigger width="xl" text="Monthly Support"] - Extra large button
*/
.mk-btn-full-width {
  width: 100%;
  display: block;
}

.mk-btn-auto-width {
  width: auto;
  min-width: 0;
}

.mk-btn-small-width {
  min-width: 80px;
  padding: 8px 16px;
  font-size: 12px;
}

.mk-btn-medium-width {
  min-width: 120px;
}

.mk-btn-large-width {
  min-width: 200px;
}

.mk-btn-xl-width {
  min-width: 300px;
}

.mk-donate-trigger-btn-custom {
  background: var(--mk-primary);
  color: white;
  border: none;
  border-radius: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(30, 78, 140, 0.3);
  position: relative;
  overflow: hidden;
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

.mk-donate-trigger-btn-custom:hover {
  background: var(--mk-accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(30, 78, 140, 0.4);
}

.mk-donate-trigger-btn:active {
  transform: translateY(-1px);
}

.mk-btn-normal {
  padding: 14px 28px;
  font-size: 16px;
}

.mk-btn-large {
  padding: 20px 40px;
  font-size: 18px;
}

.mk-modal {
  display: none;
  position: fixed;
  z-index: 999999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* iOS Safari: track the real viewport as the URL bar collapses */
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease;
  pointer-events: auto;
}

.mk-modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  flex-direction: column;
  overflow-y: auto;
}

.mk-modal-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px;
  margin: auto;
  position: relative;
}

.mk-modal-content {
  background: var(--mk-background);
  border-radius: 16px;
  width: 100%;
  padding: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 400px;
}

.mk-lang-controls {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--mk-border);
}

.mk-lang-select {
  padding: 8px 12px;
  border-radius: 6px;
  border: 2px solid var(--mk-border);
  background: white;
  font-weight: 600;
  font-size: 13px;
  color: var(--mk-primary);
  transition: all 0.3s ease;
  min-width: 70px;
  cursor: pointer;
}

.mk-cancel-link {
  color: var(--mk-primary);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(30, 78, 140, 0.1);
}

.mk-cancel-link:hover {
  color: var(--mk-ukraine-blue);
  background: rgba(30, 78, 140, 0.1);
  text-decoration: underline;
}

.mk-lang-select:focus {
  outline: none;
  border-color: var(--mk-primary);
  box-shadow: 0 0 0 3px rgba(30, 78, 140, 0.1), 0 0 0 6px rgba(30, 78, 140, 0.05);
  background: var(--mk-background);
}

.mk-close {
  position: absolute;
  right: 20px;
  top: 20px;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--mk-text-light);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
}

.mk-close:hover {
  background: var(--mk-ukraine-yellow);
  color: var(--mk-text);
  transform: scale(1.1);
}

/* Rules link styling */
.mk-rules a {
  color: var(--mk-ukraine-blue) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  transition: all 0.3s ease;
}

.mk-rules a:hover {
  color: var(--mk-primary) !important;
  text-decoration: none !important;
}

/* Consent row alignment. Sizes match .mk-onetime-checkbox in mk-onetime.css —
   the two panes sit on the same page and must not differ. */
.mk-rules label.mk-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.mk-progress {
  display: none;
}

.mk-step-indicator {
  display: none;
}

/* Clean up duplicate styles in media queries */
@media (max-width: 768px) {
  .mk-progress,
  .mk-step-indicator {
    display: none;
  }
}

@media (max-width: 480px) {
  .mk-progress,
  .mk-step-indicator {
    display: none;
  }
}

.mk-amounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.mk-amount-btn {
  background: var(--mk-background, #fff);
  border: 2px solid var(--mk-border, #e0e0e0);
  color: var(--mk-primary, #1e4e8c);
  padding: 16px 8px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mk-custom-amount-btn {
  background: var(--mk-background-secondary);
  font-weight: 600;
  font-size: 14px;
  color: var(--mk-text);
}

.mk-amounts-note {
  margin: 2px 0 20px;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--mk-text-light);
}

/* Custom amount container for button/input transformation - always full width */
.mk-custom-amount-container {
  grid-column: 1 / -1;
  display: flex;
  width: 100%;
  margin-top: 10px;
}

.mk-custom-amount-container .mk-custom-amount-btn {
  width: 100%;
  flex: 1;
}

.mk-custom-amount-input {
  width: 100%;
  padding: 16px 20px;
  border: 2px solid var(--mk-border);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  transition: all 0.3s ease;
  background: var(--mk-background);
  color: var(--mk-text);
}

.mk-custom-amount-input:focus {
  outline: none;
  border-color: var(--mk-ukraine-blue);
  box-shadow: 0 0 0 4px rgba(30, 78, 140, 0.1);
}

.mk-custom-amount-input::placeholder {
  color: var(--mk-text-light);
  opacity: 0.7;
}

.mk-amount-btn:hover {
  border-color: var(--mk-ukraine-blue, #1e4e8c);
  background: var(--mk-background, #fff);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(30, 78, 140, 0.15);
}

/* No scale() — see the matching note in mk-onetime.css: growing the tile
   clipped the corner columns against the wizard's overflow-hidden viewport. */
.mk-amount-btn.selected {
  background: var(--mk-ukraine-yellow, #e9a820);
  color: var(--mk-text, #23241f);
  border-color: var(--mk-ukraine-yellow, #e9a820);
  box-shadow: 0 4px 14px rgba(233, 168, 32, 0.35);
}

/* 4 columns grid layout with custom amount always full width */
@media (max-width: 520px) {
  .mk-amounts .mk-custom-amount-btn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 400px) {
  .mk-amounts .mk-custom-amount-btn {
    grid-column: 1 / -1;
  }
}

.mk-form-group {
  margin-bottom: 16px;
}

.mk-form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--mk-text);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
}

.mk-form-group input {
  width: 100%;
  padding: 16px 20px;
  border: 2px solid var(--mk-border);
  border-radius: 12px;
  font-size: 16px;
  transition: all 0.3s ease;
  background: var(--mk-background);
  box-sizing: border-box;
  font-weight: 400;
}

.mk-form-group input:focus {
  outline: none;
  border-color: var(--mk-ukraine-blue);
  box-shadow: 0 0 0 4px rgba(30, 78, 140, 0.1);
  background: white;
}

.mk-form-group input::placeholder {
  color: var(--mk-text-light);
  opacity: 0.7;
}

/*
 * Consent rows — shared shape with .mk-onetime-consent-row in mk-onetime.css.
 * A donor can flip between the monthly and one-time panes on the Parama page,
 * so the two must not look like different forms.
 *
 * These are ordinary checkboxes. The previous version hid the real input with
 * `display: none` and drew a .mk-checkmark span in its place — which takes the
 * input out of the tab order, so a keyboard-only donor could not tick the
 * required box and could not give monthly at all. accent-color gives the
 * native control the brand colour without giving up the semantics.
 */
.mk-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  color: var(--mk-text);
  line-height: 1.5;
  font-size: 14px;
}

.mk-consents {
  display: flex;
  flex-direction: column;
}

.mk-consent-row {
  /* Padding rather than a fixed height: the row is the tap target, and a
     two-line label must be able to grow. */
  padding: 9px 0;
  color: var(--mk-text-light);
}

.mk-consent-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  flex: 0 0 20px; /* a long wrapped label must not squash the box */
  accent-color: var(--mk-ukraine-blue);
  cursor: pointer;
}

/* The one that gates the button carries full-strength text; the optional one
   stays muted. Hierarchy by weight, not by alarm colours. */
.mk-consent-row--required {
  color: var(--mk-text);
  font-weight: 500;
}

/* The required marker is the same bare " *" the field labels above already
   use — one convention per form, and a pill next to the pay button read as a
   badge to be collected rather than a condition to be met. */
.mk-consent-req {
  margin-left: 4px;
  font-weight: 600;
}

/* Off-screen but still in the accessibility tree: the visible marker is an
   asterisk, which announces as nothing, so the word „Būtina" rides along
   here. Not display:none — that would drop it from the label's name too. */
.mk-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.mk-btn {
  margin-top: 16px;
  padding: 18px 28px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  font-size: 16px;
  position: relative;
  overflow: hidden;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Popup trigger button styling */
.mk-popup-trigger-btn {
  padding: 18px 28px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  font-size: 16px;
  position: relative;
  overflow: hidden;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.mk-btn-primary {
  background: var(--mk-primary);
  color: white;
  width: 100%;
  box-shadow: 0 4px 16px rgba(30, 78, 140, 0.2);
  border: 2px solid var(--mk-primary);
}

.mk-btn-primary:hover:not(:disabled) {
  background: var(--mk-accent);
  border-color: var(--mk-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(30, 78, 140, 0.3);
}

.mk-btn-primary:disabled {
  background: #cccccc !important;
  color: #666666 !important;
  border-color: #cccccc !important;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 0.6;
}

/* Pay button (Step 1) – amber with dark uppercase text to match one-time donations */
#mkNextStep2.mk-btn-primary {
  background: var(--mk-ukraine-yellow);
  color: var(--mk-text);
  border-color: var(--mk-ukraine-yellow);
  text-transform: uppercase;
}

#mkNextStep2.mk-btn-primary:hover:not(:disabled) {
  background: var(--vi-amber-hover, #c98d12);
  border-color: var(--vi-amber-hover, #c98d12);
}

#mkNextStep2.mk-btn-primary:disabled {
  background: #cccccc !important;
  color: #666666 !important;
  border-color: #cccccc !important;
}

.mk-btn-secondary {
  background: var(--mk-background);
  color: var(--mk-primary);
  border: 2px solid var(--mk-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mk-btn-secondary:hover {
  background: var(--mk-background-secondary);
  border-color: var(--mk-primary);
  color: var(--mk-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 78, 140, 0.15);
}

.mk-loading {
  text-align: center;
  padding: 64px 32px;
}

.mk-spinner {
  width: 64px;
  height: 64px;
  border: 4px solid var(--mk-border);
  border-top: 4px solid var(--mk-ukraine-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 24px;
  box-shadow: 0 4px 12px rgba(30, 78, 140, 0.2);
}

.mk-loading p {
  color: var(--mk-text-light);
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.mk-message {
  max-width: 520px;
  margin: 32px auto;
  padding: 32px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.mk-message-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mk-message-icon--success {
  background: rgba(233, 168, 32, 0.15);
  color: var(--mk-success);
}

.mk-message-icon--error {
  background: rgba(166, 55, 63, 0.12);
  color: var(--mk-error);
}

.mk-message-icon--info {
  background: rgba(30, 78, 140, 0.1);
  color: var(--mk-primary);
}

.mk-message-icon img {
  max-width: 160px;
  max-height: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}

.mk-message h3 {
  margin: 0 0 16px 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
}

.mk-message p {
  margin: 12px 0;
  font-size: 16px;
  line-height: 1.5;
}

.mk-message small {
  font-size: 14px;
  opacity: 0.8;
  line-height: 1.4;
}

.mk-message .mk-btn {
  margin-top: 24px;
}

.mk-cancel-view {
  display: none !important;
  padding: 32px 32px 16px;
}

.mk-cancel-view.active {
  display: block !important;
  animation: slideIn 0.3s ease;
}

.mk-step {
  display: none;
  padding: 24px 24px 16px;
}

.mk-step.active {
  display: block;
  animation: slideIn 0.3s ease;
}

/* Same reason as .mk-onetime-step[tabindex]:focus in mk-onetime.css: script
   focuses these panes so a screen reader reads the result, but they are
   containers with nothing to select, and the theme's [tabindex]:focus-visible
   ring boxed the whole card on a gateway return. */
.mk-step[tabindex]:focus,
.mk-step[tabindex]:focus-visible,
.mk-cancel-view[tabindex]:focus,
.mk-cancel-view[tabindex]:focus-visible {
  outline: none;
}

#mkStep1:not(.active),
#mkStep3:not(.active),
#mkStep4:not(.active) {
  display: none !important;
}

.mk-step-header {
  margin-bottom: 16px;
  text-align: center;
}

/* Recurring form header. Scoped to #mkStep1 so the status panes (#mkStep3 /
   #mkStep4) keep their own header treatment. These values match the one-time
   form's header exactly — the recurring template used to borrow
   .mk-onetime-step-header from mk-onetime.css, which left mk-donors.js's
   retranslation selectors pointing at nothing. */
#mkStep1 .mk-step-header {
  margin-bottom: 24px;
  text-align: center;
}

#mkStep1 .mk-step-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--mk-primary);
  line-height: 1.3;
}

#mkStep1 .mk-step-header p {
  margin: 0;
  color: var(--mk-text-light);
  font-size: 16px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  #mkStep1 .mk-step-header h2 {
    font-size: 20px;
  }
}

@media (max-width: 520px) {
  #mkStep1 .mk-step-header h2 {
    font-size: 18px;
  }
}

#mkCancelView:not(.active) {
  display: none !important;
}

.mk-info {
  background: rgba(30, 78, 140, 0.1);
  color: var(--mk-text);
  border: 2px solid var(--mk-ukraine-blue);
}

.mk-success {
  background: rgba(233, 168, 32, 0.1);
  color: var(--mk-text);
  border: 2px solid var(--mk-ukraine-yellow);
}

.mk-error {
  background: rgba(166, 55, 63, 0.1);
  color: var(--mk-text);
  border: 2px solid var(--mk-error);
}

/* Holds both consent rows now, immediately above the pay button. The amber
   top rule is gone: it made this block look like a warning banner, which is
   the wrong note to end a donation form on. */
.mk-rules {
  margin: 8px 0 4px;
  padding: 6px 16px;
  background: var(--mk-background-secondary);
  border-radius: 14px;
  border: 1px solid rgba(233, 168, 32, 0.28);
}

.mk-beneficiary {
  margin-top: 16px;
  padding: 16px;
  background: var(--mk-background-secondary);
  border-radius: 12px;
  font-size: 13px;
  color: var(--mk-text-light);
  line-height: 1.5;
  border: 1px solid var(--mk-border);
}

.mk-beneficiary strong {
  color: var(--mk-text);
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

/* Fix for donation form after merging steps */

/* Remove progress bar completely */
.mk-progress,
.mk-step-indicator {
  display: none !important;
}

#mkStep1 .mk-btn-primary {
  width: 100%;
  margin-top: 24px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .mk-step-header h2 {
    font-size: 22px;
    font-weight: 700;
  }
}

@media (max-width: 480px) {
  .mk-step-header h2 {
    font-size: 20px;
    font-weight: 700;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media (max-width: 768px) {
  .mk-modal.show {
    padding: 12px;
  }

  .mk-modal-wrapper {
    width: 100%;
    max-width: none;
  }

  .mk-modal-content {
    border-radius: 16px;
  }

  .mk-step-header h2 {
    font-size: 22px;
    margin-bottom: 6px;
    font-weight: 700;
    color: var(--mk-primary);
  }

  /* (Removed previous 3-col override for .mk-amounts to enforce only 4 cols under 768px) */

  .mk-step-header p {
    font-size: 13px;
    margin-bottom: 12px;
  }

  .mk-form-group input {
    padding: 12px 14px;
    font-size: 16px;
  }

  .mk-beneficiary {
    font-size: 11px;
  }

  .mk-modal-footer {
    padding: 12px 16px;
    border-radius: 0 0 16px 16px;
  }

  .mk-lang-controls {
    gap: 12px;
    flex-direction: row;
  }

  .mk-lang-select {
    padding: 6px 10px;
    font-size: 12px;
    min-width: 60px;
  }

  .mk-cancel-link {
    font-size: 10px;
    padding: 2px 4px;
  }

  .mk-close {
    right: 16px;
    top: 12px;
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  .mk-progress {
    display: none;
  }

  .mk-step-indicator {
    display: none;
  }

  /* (Removed previous 2-col override for .mk-amounts at narrow widths) */

  .mk-amount-btn {
    padding: 16px 12px;
    font-size: 16px;
    min-height: 50px;
  }

  .mk-checkbox {
    gap: 12px;
    font-size: 14px;
  }

  .mk-btn {
    padding: 16px 20px;
    font-size: 15px;
    min-height: 50px;
  }

  .mk-loading {
    padding: 48px 20px;
  }

  .mk-spinner {
    width: 48px;
    height: 48px;
  }

  .mk-cancel-view {
    padding: 20px 16px 16px;
  }
}

@media (max-width: 480px) {
  .mk-modal.show {
    padding: 8px;
  }

  .mk-modal-wrapper {
    width: 100%;
    max-width: none;
  }

  .mk-modal-content {
    border-radius: 12px;
  }

  .mk-step-header h2 {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--mk-primary);
    line-height: 1.3;
  }

  .mk-amounts {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .mk-custom-amount-btn {
    grid-column: 1 / -1;
  }

  .mk-amount-btn {
    padding: 14px 8px;
    font-size: 15px;
    min-height: 44px;
  }

  .mk-form-group input {
    padding: 10px 12px;
    font-size: 16px;
  }

  .mk-beneficiary {
    font-size: 10px;
  }

  .mk-modal-footer {
    padding: 10px 12px;
    border-radius: 0 0 12px 12px;
  }

  .mk-lang-controls {
    flex-direction: column;
    gap: 6px;
  }

  .mk-lang-select {
    padding: 5px 8px;
    font-size: 11px;
    min-width: 55px;
  }

  .mk-cancel-link {
    font-size: 9px;
    padding: 1px 3px;
  }

  .mk-cancel-view {
    padding: 16px 16px 20px;
  }

  .mk-message h3 {
    font-size: 24px;
  }
}

/* Embedded MakeCommerce checkout styling */
#mkCheckoutContainer {
  width: 100%;
  margin: 20px auto 0;
  border-radius: 12px;
  overflow: hidden;
  animation: fadeIn 0.5s ease;
  background: white;
  border: 1px solid var(--mk-border);
  position: relative;
  z-index: 1;
  display: none; /* Hidden by default until it has content */
}

/* Only show container when it has content */
#mkCheckoutContainer:not(:empty) {
  display: block !important;
  min-height: 500px;
}

/* Style the form and button inside checkout container */
#mkCheckoutContainer form {
  width: 100% !important;
  height: 500px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  background: linear-gradient(135deg, var(--mk-background-secondary), white);
  border-radius: 12px;
}

#mkCheckoutContainer #mkCheckoutBtn {
  background: var(--mk-primary) !important;
  color: white !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 20px 40px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 16px rgba(30, 78, 140, 0.3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

#mkCheckoutContainer #mkCheckoutBtn:hover {
  background: var(--mk-accent) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(30, 78, 140, 0.4) !important;
}

/* Add some descriptive text above the button */
#mkCheckoutContainer form::before {
  content: "Click to open secure payment form";
  font-size: 16px;
  color: var(--mk-text-light);
  margin-bottom: 20px;
  text-align: center;
}

/* Override any MakeCommerce modal styles to ensure it appears above our modal */
.maksekeskus-checkout-modal,
.maksekeskus-modal,
.mk-checkout-modal,
[id^="maksekeskus-checkout-"],
[class^="maksekeskus-checkout-"] {
  z-index: 9999999 !important;
}

/* Ensure modal has appropriate z-index */
.mk-modal {
  z-index: 999999 !important;
}

.mk-modal-content {
  z-index: 1000000 !important;
  position: relative;
}

/* Step 3 adjustments */
#mkStep3 {
  padding: 24px 24px 20px;
  z-index: 1000001 !important;
  position: relative;
}

/* Hide loading when checkout is ready */
#mkCheckoutContainer:not(:empty) + #mkLoadingSpinner {
  display: none !important;
}

/* Payment method grid (visual-only for recurring donations)
   ─────────────────────────────────────────────────────────
   Deliberately a copy of the one-time grid's treatment (see
   .mk-onetime-methods / .mk-onetime-method-btn in mk-onetime.css): a donor on
   the Parama page can switch between the monthly and one-time panes with one
   click, and the two used to present the very same Visa/Mastercard/Apple
   Pay/Google Pay logos in two different visual languages — bordered, padded,
   rounded boxes here against bare logos there. Bare logos win: the tile chrome
   was drawing a frame around whitespace, since object-fit letterboxes each
   logo inside its box anyway.

   Three columns, fixed, at every width. Visa and Mastercard are one choice as
   far as the dialog is concerned (both open method=CC), so they render as a
   single card tile — see mkGroupRecurringCards() in assets/js/mk-donors.js —
   leaving card / Apple Pay / Google Pay: one row, three tiles, the same shape
   the one-time grid uses on a phone. */
/* Tracks stop growing at the marks' own 176px.
 *
 * Three fixed columns with no ceiling meant that between 521px and 1023px —
 * where the monthly form is full-width inside the wizard — each track grew
 * to 277px and each 176×62 raster was upsampled to 1.58×, giving 98px-tall
 * tiles with a visibly soft "mastercard" wordmark. The one-time grid never
 * had this because it ADDS columns as it widens; this one cannot, there are
 * only three methods. Capping the track (not the image) keeps every cell at
 * or below native size, so the marks stay sharp and the equal gaps on both
 * axes survive; a max-width on the <img> would have brought back the
 * pillarboxing and the detached check badge instead. */
.mk-methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 176px));
  justify-content: start;
  gap: 8px;
  justify-items: stretch;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 16px;
}

.mk-method-btn {
  position: relative;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  /* Real buttons now, not one decorative tile. */
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: all 0.25s ease;
  display: block;
  width: 100%;
  min-width: 0;
  text-align: center;
}

/* Same box-is-the-logo rule as the one-time grid: MakeCommerce's wallet marks
   are 176×62, so giving the box that ratio removes the letterbox a fixed
   height forced around them. The ratio still reserves the row before the
   images load, which is why a fixed height was here. */
.mk-method-btn img {
  width: 100%;
  aspect-ratio: 176 / 62;
  height: auto;
  max-width: none;
  object-fit: contain;
  filter: grayscale(30%) opacity(0.8);
  transition: all 0.25s ease;
  display: block;
  margin: 0 auto;
}

.mk-method-btn:hover img,
.mk-method-btn:focus img {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.05);
}

.mk-method-btn:hover,
.mk-method-btn:focus {
  transform: translateY(-2px);
}

/* drop-shadow, not box-shadow — same reasoning as the one-time grid: it
   filters what is painted, so the glow hugs the mark's own rounded corners
   and silhouette instead of tracing a square bounding box around it. */
.mk-method-btn.selected img {
  filter: grayscale(0%) opacity(1) drop-shadow(0 0 5px rgba(233, 168, 32, 0.9))
    drop-shadow(0 0 12px rgba(233, 168, 32, 0.5));
}

/* Check icon for selected state. Inside the tile, not hanging off its corner:
   with the tiles filling the row the last one reaches the pane's right edge,
   where .vi-wizard-viewport's overflow:hidden clipped a -8px badge — measured
   at exactly the 8px it stuck out. */
.mk-method-btn.selected::after {
  content: "✓";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  background: var(--mk-ukraine-yellow);
  color: var(--mk-text);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

/* Phones: the same gap the one-time grid uses, so a donor switching between
   monthly and one-time sees one grid, not two. */
@media (max-width: 520px) {
  .mk-methods {
    gap: 5px;
  }
}

/* No-logo fallback: the avatar letter has to supply its own box now that the
   button is a bare block matching the image height — and the same box SHAPE,
   or it would stand a few px taller than everything beside it in the row. */
.mk-method-btn .mk-method-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 176 / 62;
  height: auto;
  font-weight: 700;
  color: var(--mk-text);
  opacity: 0.8;
}

/* Payment provider logo */
.mk-payment-provider {
  margin-top: 12px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.mk-payment-provider-text {
  font-size: 10px;
  color: var(--mk-text-light);
  opacity: 0.8;
  font-weight: 400;
  white-space: nowrap;
  line-height: 1.2;
}

.mk-payment-provider-logo {
  max-width: 55px;
  max-height: 18px;
  width: 55px;
  height: auto;
  object-fit: contain;
  opacity: 0.5;
  transition: opacity 0.3s ease;
  flex-shrink: 0;
}

.mk-payment-provider-logo:hover {
  opacity: 0.7;
}

/* ── Desktop two-column layout (≥1024px) ──
   Same treatment as the one-time form (see mk-onetime.css): the monthly
   form's step 1 becomes a two-column grid on desktop — header on top,
   amounts + email/name on the left, consent/method/rules + pay button on
   the right, beneficiary/provider as the bottom band, language controls
   (modal only) across the full width below. The left column carries the two
   text inputs because the monthly form has only four preset amounts; with
   them on the right the columns differed by ~260px and the grid read as
   lopsided. Scoped to the inline (Parama) context and, via :has(), to a
   widened modal; a no-:has() browser keeps the 600px single-column modal.
   The theme's hand-copied #mkDonationModal holds only the status panes
   (#mkStep3/#mkStep4/#mkCancelView), so :has(#mkStep1) correctly leaves it
   at 600px. Below 1024px the .mk-col wrappers are plain unstyled divs — the
   mobile layout is untouched. */
@media (min-width: 1024px) {
  /* Pane switches toggle the :has() width below — ease instead of snapping. */
  .mk-modal-wrapper {
    transition: max-width 0.3s ease;
  }

  .mk-modal-wrapper:has(#mkStep1.active) {
    max-width: 920px;
  }

  .mk-modal-wrapper:has(#mkStep1.active) #mkStep1.active {
    padding: 28px 32px 20px;
  }

  /* :is() rather than a plain selector list: a plain list containing :has()
     is dropped WHOLE by no-:has() browsers (killing the inline grid too),
     while :is() parses forgivingly — the inline arm survives everywhere. */
  :is(.mk-recurring-inline, .mk-modal-wrapper:has(#mkStep1.active))
    #mkStep1.active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr auto auto;
    grid-template-areas:
      "header  header"
      "amounts amounts"
      "main    pay"
      "main    terms"
      "main    paybtn"
      "benef   provider"
      "langc   langc";
    column-gap: 32px;
    align-items: start;
  }

  /* Area assignments: grid-area (and align-self on block children) is inert
     unless the parent actually became a grid, so pure-placement rules stay
     bare; non-inert properties (margins, flex alignment) are :is()-scoped so
     nothing leaks into a no-:has() browser's single-column modal. */
  :is(.mk-recurring-inline, .mk-modal-wrapper:has(#mkStep1.active))
    #mkStep1.active
    > .mk-step-header {
    grid-area: header;
    margin-bottom: 20px;
  }
  #mkStep1.active > .mk-col--amounts {
    grid-area: amounts;
  }
  #mkStep1.active > .mk-col--main {
    grid-area: main;
  }
  #mkStep1.active > .mk-col--pay {
    grid-area: pay;
  }
  #mkStep1.active > #mkNextStep2 {
    grid-area: paybtn;
    align-self: end;
  }
  /* Own row between the pay column and the button, so both consent rows sit
     directly above the button on desktop as well as on mobile. Mirrors the
     one-time form's "terms" area. */
  #mkStep1.active > .mk-rules {
    grid-area: terms;
  }
  #mkStep1.active > .mk-beneficiary {
    grid-area: benef;
    align-self: stretch;
  }
  #mkStep1.active > .mk-payment-provider {
    grid-area: provider;
  }
  #mkStep1.active > .mk-lang-controls {
    grid-area: langc;
  }

  /* Two across in the ~400px right-hand column is now the base rule for every
     width (see .mk-methods), so there is nothing left to override here — and
     the old min-height would stretch a bare-logo tile past its image. Kept as
     a note so the next person does not go looking for a desktop-only variant.
     The "selected" badge is likewise inside the tile at every width. */

  /* The consent block keeps its tinted box on desktop too. It used to be
     flattened here because it held a single checkbox; now it groups both, and
     the box is what makes them read as one final step rather than two stray
     ticks floating above the button. */

  /* Bottom band: both cells share one hairline top edge, as in the one-time
     form (mk-onetime.css). The beneficiary drops its card treatment here so
     it reads as a band rather than a box next to a bare logo. */
  :is(.mk-recurring-inline, .mk-modal-wrapper:has(#mkStep1.active))
    #mkStep1.active
    > .mk-beneficiary {
    margin: 20px 0 0;
    padding: 14px 0 0;
    background: none;
    border: none;
    border-top: 1px solid var(--mk-border);
    border-radius: 0;
    font-size: 12px;
  }
  :is(.mk-recurring-inline, .mk-modal-wrapper:has(#mkStep1.active))
    #mkStep1.active
    > .mk-payment-provider {
    justify-content: flex-end;
    align-self: stretch;
    margin: 20px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--mk-border);
  }
}

/* Stand-in for the payment provider's logo while the fund may not name it
   publicly (theme setting „Rodyti mokėjimų tiekėjo pavadinimą ir logotipą").
   Deliberately set in a different face from the rest of the form so it reads
   as a placeholder rather than as the company's actual name. */
.mk-provider-placeholder {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 10px;
  line-height: 1.2;
  color: var(--mk-text-light, #6b6a63);
  opacity: 0.75;
}