:root {
  /* Chained onto the shared --mk-* vars from mk-donors.css (which in turn
     map to the visiisvien-theme tokens), with literal fallbacks matching
     the new palette so this file still looks correct if mk-donors.css
     isn't loaded for some reason. */
  --mk-onetime-primary: var(--mk-primary, #1e4e8c);
  --mk-onetime-accent: var(--mk-accent, #14335d);
  --mk-onetime-bg: var(--mk-background, #fffdf9);
  --mk-onetime-secondary: var(--mk-secondary, #f1e9db);
  --mk-onetime-success: var(--mk-success, #e9a820);
  --mk-onetime-error: var(--mk-error, #a6373f);
  --mk-onetime-text: var(--mk-text, #23241f);
  --mk-onetime-text-light: var(--mk-text-light, #6b6a63);
  --mk-onetime-border: var(--mk-border, #e0e0e0);
  --mk-onetime-shadow: var(--mk-shadow, 0 4px 20px rgba(35, 36, 31, 0.15));
  --mk-onetime-ukraine-blue: var(--mk-ukraine-blue, #1e4e8c);
  --mk-onetime-ukraine-yellow: var(--mk-ukraine-yellow, #e9a820);
  --mk-onetime-background: var(--mk-background, #fffdf9);
  --mk-onetime-background-secondary: var(--mk-background-secondary, #faf6ef);
}

/* Shortcode button styles for one-time donations - Ukrainian Yellow theme */
.mk-onetime-trigger-btn,
.mk-onetime-btn-normal,
.mk-onetime-btn-large {
  background: var(--mk-onetime-ukraine-yellow);
  color: var(--mk-onetime-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-onetime-btn-large {
  padding: 16px 32px;
  font-size: 16px;
  min-width: 150px;
}

.mk-onetime-trigger-btn:hover,
.mk-onetime-btn-normal:hover,
.mk-onetime-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-onetime-text);
  cursor: pointer;
}

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

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

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

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

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

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

/* Modal styles */
.mk-onetime-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-onetime-modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  flex-direction: column;
  overflow-y: auto;
}

.mk-onetime-modal-content {
  background: var(--mk-onetime-background);
  border-radius: 16px;
  width: 100%;
  max-width: 600px;
  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;
  margin: auto;
}

.mk-onetime-close {
  position: absolute;
  right: 20px;
  top: 20px;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--mk-onetime-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-onetime-close:hover {
  background: var(--mk-onetime-ukraine-yellow);
  color: var(--mk-onetime-text);
  transform: scale(1.1);
}

/* Step styles */
.mk-onetime-step {
  display: none;
  padding: 24px 24px 16px;
}

.mk-onetime-step.active {
  display: block;
  animation: mk-onetime-slide-in 0.3s ease;
}

/*
 * No focus ring around a whole pane.
 *
 * Script gives these panes tabindex="-1" and focuses them so a screen reader
 * starts reading the confirmation instead of leaving the reading position on
 * <body> after a gateway return. They are containers, not controls — nothing
 * can tab to them — so the theme's [tabindex]:focus-visible ring drew a
 * "selected" box around the entire „Ačiū už Jūsų paramą!" card.
 *
 * And it drew it at the worst moment: a donor returns from the payment page
 * on a FRESH page load, so no pointer interaction has happened in the new
 * document yet and the browser treats the scripted focus as keyboard-modal.
 * The ring therefore appeared on exactly the screen where nothing is
 * selectable, and disappeared on the first click anywhere. Keep the focus,
 * which is the part that helps; drop the ring, which only misleads.
 */
.mk-onetime-step[tabindex]:focus,
.mk-onetime-step[tabindex]:focus-visible {
  outline: none;
}

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

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

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

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

.mk-onetime-amount-btn {
  background: var(--mk-onetime-background);
  border: 2px solid var(--mk-onetime-border);
  color: var(--mk-onetime-primary);
  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-onetime-custom-amount-btn {
  background: var(--mk-onetime-background-secondary);
  font-weight: 600;
  font-size: 14px;
  color: var(--mk-onetime-text);
}

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

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

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

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

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

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

/*
 * Deliberately no `transform: scale()` here. Selecting an amount used to grow
 * the tile 5%, which the first and last column had nowhere to grow into: the
 * inline step carries no padding of its own (see .mk-onetime-inline below) and
 * the wizard's viewport clips overflow to animate its height, so the corner
 * tiles were visibly sliced down their outer edge. The amber fill is already
 * unmistakable as a selected state without any growth.
 */
.mk-onetime-amount-btn.selected {
  background: var(--mk-onetime-ukraine-yellow);
  color: var(--mk-onetime-text);
  border-color: var(--mk-onetime-ukraine-yellow);
  box-shadow: 0 4px 14px rgba(233, 168, 32, 0.35);
}

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

/* Form styles */
.mk-onetime-form-group {
  margin-bottom: 24px;
}

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

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

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

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

/* Inline, compact consent checkbox */
/* Increase specificity to override generic label styles. Shared by the
   optional-news consent (.mk-onetime-form-group) and the required rules
   acceptance (.mk-onetime-rules) so the two boxes sitting one above the other
   are drawn identically — scoping this to the form group alone once left the
   rules box as an unstyled native checkbox. */
/*
 * Consent rows — same shape as .mk-consent-row in mk-donors.css. A donor can
 * flip between the one-time and monthly panes on the Parama page, so the two
 * must not look like different forms.
 */
:is(.mk-onetime-form-group, .mk-onetime-rules) > label.mk-onetime-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 0; /* keep tight */
  color: var(--mk-onetime-text-light);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  white-space: normal;
  cursor: pointer;
}
:is(.mk-onetime-form-group, .mk-onetime-rules)
  > label.mk-onetime-checkbox
  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-onetime-ukraine-blue);
  cursor: pointer;
}
/* Only the label's own text span — not the nested "required" pill. */
:is(.mk-onetime-form-group, .mk-onetime-rules)
  > label.mk-onetime-checkbox
  > span {
  font-size: 14px;
}

.mk-onetime-rules .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;
}

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

/* Same bare " *" the field labels above already use — see the twin rule in
   mk-donors.css. Both sheets always load together, but each states it, so
   neither form depends on the other's stylesheet for its required marker. */
.mk-onetime-rules .mk-consent-req {
  margin-left: 4px;
  font-weight: 600;
}

.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;
}

/* Reduce spacing for consent form group specifically */
.mk-onetime-form-group:has(label.mk-onetime-checkbox) {
  margin-top: -12px;
  margin-bottom: 16px;
}

/* Fallback for browsers without :has() support */
.mk-onetime-form-group.mk-onetime-consent-group {
  margin-top: -12px;
  margin-bottom: 16px;
}

/* Rules acceptance, directly above the pay button it gates (see the note in
   templates/onetime-form.php). Mirrors the monthly form's .mk-rules block,
   drawn with the one-time form's own .mk-onetime-checkbox idiom. */
/* Holds both consent rows, directly above the pay button. The tinted box is
   what makes them read as one final step rather than two stray ticks. */
.mk-onetime-rules {
  display: flex;
  flex-direction: column;
  margin: 8px 0 4px;
  padding: 6px 16px;
  background: var(--mk-onetime-background-secondary);
  border: 1px solid rgba(233, 168, 32, 0.28);
  border-radius: 14px;
}

/* The rules link has to read as a link — it used to inherit the muted grey of
   the surrounding text with no underline, so nothing said it was clickable. */
.mk-onetime-rules a {
  color: var(--mk-onetime-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mk-onetime-rules a:hover,
.mk-onetime-rules a:focus-visible {
  color: var(--mk-onetime-accent);
}

/* Mini-causes: the chosen campaign, shown instead of the dropdown when the
   form is context-locked to it (mkOpenOnetimePopup(id, title) or a wizard
   cause tile), and under the dropdown when it is not.

   A card with the campaign's own photo, not a line of text: a donor reaches
   this form from a picture and a name, and a bare title broke the thread — it
   read as a setting rather than as the thing they had just chosen.

   One even hairline all the way round, no accent rule down the left. The
   thick coloured bar was doing a job nothing on this form needs done: the
   card is already the only thing here carrying a photograph, on a page made
   of plain inputs, so it cannot be missed. A ribbon on top of that reads as
   template furniture rather than as this fund's own page. */
.mk-onetime-campaign-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(30, 78, 140, 0.16);
  border-radius: 12px;
  background: var(--mk-onetime-background-secondary);
}

/* Square, so a landscape campaign photo and a portrait one give the card the
   same height. The warm filter is the theme's own .vi-photo treatment — the
   card this photo came from wears it, and an unfiltered copy beside it would
   read as a different picture. */
.mk-onetime-campaign-thumb {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 10px;
  filter: saturate(0.88) contrast(1.05) sepia(0.07);
}

/* min-width:0 or a long unbroken campaign title pushes the card wider than
   its column instead of wrapping. */
.mk-onetime-campaign-card-body {
  display: block;
  min-width: 0;
}

.mk-onetime-campaign-badge {
  display: block;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  color: var(--mk-onetime-text);
}

/* One line of what the chosen campaign is for, under the name. */
.mk-onetime-campaign-desc {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--mk-onetime-text-light);
}

/* Beneficiary section styling */
.mk-beneficiary {
  font-size: 12px;
  color: var(--mk-onetime-text-light);
  line-height: 1.4;
  margin-bottom: 16px;
}

.mk-beneficiary strong {
  color: var(--mk-onetime-text);
  font-weight: 600;
}

/* 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-onetime-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;
}

/* Button styles */
.mk-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-onetime-primary);
  color: white;
  width: 100%;
  box-shadow: 0 4px 16px rgba(30, 78, 140, 0.2);
  border: 2px solid var(--mk-onetime-primary);
}

.mk-btn-primary:hover:not(:disabled) {
  background: var(--mk-onetime-accent);
  border-color: var(--mk-onetime-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) – Ukrainian yellow with white uppercase text */
#mkOnetimePayBtn.mk-btn-primary {
  background: var(--mk-onetime-ukraine-yellow);
  color: var(--mk-onetime-text);
  border-color: var(--mk-onetime-ukraine-yellow);
  text-transform: uppercase;
}

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

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

/* Secondary button for CTA */
.mk-btn-secondary {
  background: var(--mk-onetime-background);
  color: var(--mk-onetime-primary);
  border: 2px solid var(--mk-onetime-primary);
}

.mk-btn-secondary:hover:not(:disabled) {
  background: var(--mk-onetime-secondary);
  transform: translateY(-2px);
}

/* Success step close button styling */
#mkOnetimeStep3 .mk-btn-primary {
  background: var(--mk-onetime-ukraine-yellow);
  color: var(--mk-onetime-text);
  border-color: var(--mk-onetime-ukraine-yellow);
  box-shadow: 0 4px 16px rgba(233, 168, 32, 0.3);
  font-weight: 600;
}

#mkOnetimeStep3 .mk-btn-primary:hover:not(:disabled) {
  background: var(--vi-amber-hover, #c98d12);
  border-color: var(--vi-amber-hover, #c98d12);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(233, 168, 32, 0.4);
}

/* Loading spinner */
.mk-onetime-loading {
  text-align: center;
  padding: 64px 32px;
}

.mk-spinner {
  width: 64px;
  height: 64px;
  border: 4px solid var(--mk-onetime-border);
  border-top: 4px solid var(--mk-onetime-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-onetime-loading p {
  color: var(--mk-onetime-text-light);
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

/* Success message */
.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);
}

/*
 * The success/error icon ring is defined once, in mk-donors.css (.mk-message-icon
 * + its --success/--error/--info variants). This sheet loads after it under the
 * same enqueue filter, so anything restated here wins at equal specificity —
 * which is exactly how the checkmark ended up off-centre: a leftover
 * `font-size: 120px; display: block` from the emoji era killed the ring's
 * flex centring and dropped the 56px inline SVG onto a ~144px strut baseline.
 * Deliberately left undeclared here; don't reintroduce it.
 */

.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 .mk-btn {
  margin-top: 24px;
}

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

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

/* The "we don't know how your payment ended" pane. mk-donors.css defines
   .mk-info too, but this sheet's .mk-message border is declared later in load
   order and would otherwise win over it — the same equal-specificity trap the
   note above .mk-message h3 describes. Restated here, after .mk-message, for
   the same reason .mk-success and .mk-error are. */
.mk-info {
  background: rgba(30, 78, 140, 0.08);
  color: var(--mk-onetime-text);
  border: 2px solid var(--mk-onetime-ukraine-blue);
}

/* Secondary to the failure message itself, but the link must stay obvious. */
.mk-onetime-error-help {
  font-size: 14px;
  color: var(--mk-onetime-text-light);
}

.mk-onetime-error-help a {
  color: inherit;
  text-decoration: underline;
}

/* Dynamic success text and CTA */
.mk-onetime-success-dynamic {
  margin: 8px 0 0;
}

.mk-onetime-success-text {
  font-size: 16px;
  margin: 8px 0 16px;
}

.mk-onetime-cta-title {
  font-size: 15px;
  color: var(--mk-onetime-text-light);
  margin: 4px 0 8px;
}

.mk-onetime-cta-btn {
  width: 100%;
}

/* Payment method grid */
.mk-onetime-methods {
  display: grid;
  /* Auto-fit grid that adapts to container width - maintains 5 columns on desktop */
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 8px 0 20px;
  justify-items: stretch; /* Let items fill the track width to avoid edge overflow */
  max-width: 100%; /* Ensure it doesn't exceed container width */
  box-sizing: border-box;
}

.mk-onetime-method-btn {
  position: relative;
  background: none;
  border: none;
  padding: 0;
  margin: 0; /* Use grid gap for spacing to avoid adding width beyond track */
  display: block; /* Fill the grid cell so images can scale with it */
  width: 100%;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center; /* Ensure contained image is centered */
}

/*
 * The box IS the logo, at the logo's own proportions.
 *
 * MakeCommerce serves every method mark at exactly 176×62. A fixed 50px-tall
 * box meant object-fit: contain letterboxed each one — at three columns on a
 * phone the mark painted 41px tall inside a 50px box, so ~9px of dead space
 * sat above and below every logo while the horizontal edges touched the cell.
 * The gap a donor SAW was therefore ~12px between rows and ~3px between
 * columns: the same grid gap, but rhythm-less.
 *
 * aspect-ratio makes the box the same shape as the mark, so the letterbox
 * disappears and the visible gap equals the grid gap on both axes. Nothing
 * about the painted logo changes size — only the emptiness around it. The
 * ratio still reserves the row height before the images load, which is the
 * reason a fixed height was here in the first place, and object-fit: contain
 * stays as the graceful fallback if MakeCommerce ever ships an odd size.
 */
.mk-onetime-method-btn img {
  width: 100%; /* Scale down within the grid cell to prevent partial overflow */
  aspect-ratio: 176 / 62;
  height: auto;
  object-fit: contain;
  filter: grayscale(30%) opacity(0.8);
  transition: all 0.25s ease;
  border-radius: 0; /* Remove rounded corners */
  display: block;
  margin: 0 auto; /* Center inside full-width button */
}

/* The initial-letter stand-in JS builds for a method that arrives with no
   logo_url. Same box shape as a real logo tile, so one missing file cannot
   knock a whole row out of alignment. */
.mk-onetime-method-btn .mk-onetime-method-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 176 / 62;
  font-weight: 700;
  color: var(--mk-onetime-text);
  opacity: 0.8;
}

.mk-onetime-method-btn .mk-onetime-method-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -40px;
  background: rgba(0, 0, 0, 0.75);
  color: var(--mk-onetime-background);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 6px;
  text-align: center;
  letter-spacing: 0.5px;
  transition: all 0.25s ease;
  pointer-events: none;
}

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

/*
 * drop-shadow(), not box-shadow: the glow follows what is painted.
 *
 * The box now matches the mark (see the aspect-ratio note above), so this is
 * no longer about undoing a letterbox — it is about the marks themselves.
 * They carry rounded corners and, where MakeCommerce ships a transparent
 * one, their own silhouette; box-shadow would trace the square bounding box
 * and leave the halo standing off the corners. drop-shadow filters the
 * painted result, so the glow hugs whatever the donor actually sees, at
 * every breakpoint and whatever MakeCommerce changes an asset to.
 */
.mk-onetime-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));
}

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

/* Check icon for selected state */
.mk-onetime-method-btn.selected::after {
  content: "✓";
  position: absolute;
  top: 2px; /* Keep inside the cell to prevent overflow at edges */
  right: 2px;
  background: var(--mk-onetime-ukraine-yellow);
  color: var(--mk-onetime-text);
  width: 20px;
  height: 20px;
  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;
}

/* Disabled state for payment methods that exceed max_amount */
.mk-onetime-method-btn.mk-disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.mk-onetime-method-btn.mk-disabled img {
  filter: grayscale(100%) opacity(0.3);
  transform: none;
}

.mk-onetime-method-btn.mk-disabled:hover img,
.mk-onetime-method-btn.mk-disabled:focus img {
  filter: grayscale(100%) opacity(0.3);
  transform: none;
}

.mk-onetime-method-btn.mk-disabled:hover,
.mk-onetime-method-btn.mk-disabled:focus {
  transform: none;
}

/* X icon for disabled payment methods */
.mk-onetime-method-btn.mk-disabled::before {
  content: "✕";
  position: absolute;
  top: 2px;
  left: 2px;
  background: var(--mk-onetime-error);
  color: white;
  width: 20px;
  height: 20px;
  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.3);
  z-index: 10;
}

/* Add overlay icon for disabled state */
.mk-onetime-method-btn.mk-disabled::before {
  content: "✕";
  position: absolute;
  top: 2px;
  left: 2px;
  background: var(--mk-onetime-error);
  color: white;
  width: 20px;
  height: 20px;
  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;
}

.mk-onetime-method-hint {
  font-size: 12px;
  color: var(--mk-onetime-text-light);
  margin-top: -10px;
}

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

/*
 * Namespaced on purpose: mk-donors.css defines its own `slideIn` (a horizontal
 * translateX for the recurring modal's steps). Two @keyframes sharing a name
 * are not merged — the last one parsed replaces the other document-wide, so
 * this sheet (which loads second) used to silently retarget the recurring
 * modal's animation as well. Keep both names distinct.
 */
@keyframes mk-onetime-slide-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* 
 * Responsive breakpoints for payment methods:
 * Desktop (>768px): 5 columns
 * Tablet (768px-521px): 4 columns 
 * Medium Mobile (520px-401px): 3 columns
 * Small Mobile (<400px): 2 columns
 */

/* Mobile responsive */
@media (max-width: 768px) {
  .mk-onetime-modal-content {
    max-width: 90vw;
    margin: 20px;
  }

  .mk-onetime-step {
    padding: 16px 16px 12px; /* Reduced padding for mobile */
  }

  .mk-onetime-step-header h2 {
    font-size: 20px;
  }

  .mk-onetime-methods {
    /* Always 4 columns for tablet */
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
}

@media (max-width: 520px) {
  /* Four across on phones too, the same count every wider screen shows.
     Eight amounts then fall as two even rows with the custom-amount button
     under them, instead of three rows where the last one is a ragged pair —
     and the whole block is a row shorter, so the payment methods and the pay
     button start higher up. At 390px that is ~83px a button, which still
     holds "1000 €" at 15px with room either side. */
  .mk-onetime-amounts {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .mk-onetime-amount-btn {
    font-size: 15px;
    padding: 12px 4px;
    min-height: 48px;
  }

  .mk-onetime-step {
    padding: 12px 12px 8px; /* Even smaller padding for small screens */
  }

  .mk-onetime-step-header h2 {
    font-size: 18px;
  }

  .mk-onetime-methods {
    /* Always 3 columns for medium mobile */
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }
}

/* (A 401–450px block used to force 3 columns here, back when the ≤520px rule
   asked for a different count. Every rule from 520px down now says the same
   three columns at the same gap, so it only restated its neighbour.) */

@media (max-width: 400px) {
  .mk-onetime-step {
    padding: 10px 10px 6px; /* Minimal padding for very small screens */
  }

  /* Amounts and payment methods keep the layout the ≤520px block sets —
     four amount columns, three method columns at a 5px gap. This block used
     to restate both; every restatement was identical, and two rules that
     have to be kept in lockstep are two rules that eventually will not be. */
}

/* ── Inline (Parama wizard) rendering ──
   The theme's .vi-wizard card already frames the form (16–40px of padding
   at every width). The step's own padding stacked on top of that, eating
   up to 64px per side on phones — inline, the card owns the frame and the
   step contributes nothing. Modal rendering keeps its own padding above.
   Two classes beat every single-class .mk-onetime-step media rule. */
.mk-onetime-inline .mk-onetime-step {
  padding: 0;
}

/* Campaign group with no active causes: a one-option "general fund" select
   is noise, so the whole group collapses. A campaign lock re-shows it with
   an inline display:block to present the badge (mkOnetimeApplyCampaignLock). */
.mk-onetime-campaign-group--single {
  display: none;
}

/* ── Desktop two-column layout (≥1024px) ──
   The base stylesheet is mobile-shaped (single column, max-width media
   queries only), which reads fine on phones but stacks into a very tall
   scroll on desktop. Here step 1 becomes a two-column grid: header on top,
   amount + campaign on the left, email/consent/payment methods + pay button
   on the right, beneficiary/provider as a compact bottom band. The grid is
   scoped to the inline (Parama) context and, via :has(), to a widened modal
   — a browser without :has() keeps the untouched 600px single-column modal.
   (:has() is already used earlier in this file, so no new dependency.)
   Mobile/tablet rules above are untouched: the .mk-onetime-col wrappers are
   plain unstyled divs below this breakpoint. */
@media (min-width: 1024px) {
  /* Pane switches toggle the :has() width below (form 920px, status panes
     600px) — ease the change instead of snapping mid-payment. */
  .mk-onetime-modal-content {
    transition: max-width 0.3s ease;
  }

  .mk-onetime-modal-content:has(#mkOnetimeStep1.active) {
    max-width: 920px;
  }

  .mk-onetime-modal-content:has(#mkOnetimeStep1.active) #mkOnetimeStep1.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 and
     only the widened modal needs :has() support. */
  :is(.mk-onetime-inline, .mk-onetime-modal-content:has(#mkOnetimeStep1.active))
    #mkOnetimeStep1.active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas:
      "header  header"
      "main    pay"
      "main    terms"
      "main    paybtn"
      "benef   provider";
    column-gap: 32px;
    align-items: start;
  }

  /* Area assignments: grid-area (and align-self on block children) is inert
     unless the parent above actually became a grid, so the pure-placement
     rules below need no :has()/context prefixes. Anything non-inert (margins,
     alignment of flex content) lives in the :is()-scoped rules instead, so
     nothing leaks into a no-:has() browser's single-column modal. */
  :is(.mk-onetime-inline, .mk-onetime-modal-content:has(#mkOnetimeStep1.active))
    #mkOnetimeStep1.active
    > .mk-onetime-step-header {
    grid-area: header;
    margin-bottom: 20px;
  }
  /* The amount tiles are a good bit shorter than the email + method grid +
     consents + button they sit beside, and pinned to the top of the row they
     left a tall empty well under them while the right column ran on. Centred
     against that column the two halves read as one block. `align-items: start`
     on the grid stays: only this column is short enough to want centring. */
  #mkOnetimeStep1.active > .mk-onetime-col--main {
    grid-area: main;
    align-self: center;
  }
  #mkOnetimeStep1.active > .mk-onetime-col--pay {
    grid-area: pay;
  }
  #mkOnetimeStep1.active > .mk-onetime-rules {
    grid-area: terms;
  }
  #mkOnetimeStep1.active > #mkOnetimePayBtn {
    grid-area: paybtn;
    align-self: start;
  }
  #mkOnetimeStep1.active > .mk-beneficiary {
    grid-area: benef;
  }
  #mkOnetimeStep1.active > .mk-payment-provider {
    grid-area: provider;
  }

  /* The cosmetic rules below must not leak into a no-:has() modal (which
     stays single-column), hence the shared :is() context prefix. */
  :is(.mk-onetime-inline, .mk-onetime-modal-content:has(#mkOnetimeStep1.active))
    #mkOnetimeStep1.active
    > .mk-beneficiary {
    background: none;
    border: none;
    border-top: 1px solid var(--mk-onetime-border);
    border-radius: 0;
    padding: 14px 0 0;
    margin: 20px 0 0;
    font-size: 12px;
  }
  :is(.mk-onetime-inline, .mk-onetime-modal-content:has(#mkOnetimeStep1.active))
    #mkOnetimeStep1.active
    > .mk-payment-provider {
    border-top: 1px solid var(--mk-onetime-border);
    padding-top: 14px;
    margin: 20px 0 0;
    justify-content: flex-end;
    align-self: stretch;
  }

  /* Tighter vertical rhythm in the right column (base is 24px). */
  :is(.mk-onetime-inline, .mk-onetime-modal-content:has(#mkOnetimeStep1.active))
    .mk-onetime-col--pay
    .mk-onetime-form-group {
    margin-bottom: 16px;
  }

  /* Payment logos in a ~400px column: 4 across instead of 5. The base
     5-column rule keeps serving 769–1023px, where the form is full-width. */
  :is(.mk-onetime-inline, .mk-onetime-modal-content:has(#mkOnetimeStep1.active))
    .mk-onetime-col--pay
    .mk-onetime-methods {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 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;
}