/* CSS Variables */
:root {
  --primary-color: #e74c3c;
  --secondary-color: #3498db;
  --success-color: #27ae60;
  --text-dark: #2c3e50;
  --text-light: #7f8c8d;
  --bg-light: #ecf0f1;
  --bg-white: #ffffff;
  --border-radius: 12px;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
  --transition: all 0.3s ease;
}

/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.6;
  color: var(--text-dark);
  background-color: var(--bg-light);
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Header */
.header {
  text-align: center;
  padding: 20px 0;
}

/* The logo is a wide wordmark (828×44). Cap it to the container so narrow
   viewports don't get horizontal overflow; height stays auto to keep aspect. */
.header .logo img {
  max-width: 100%;
  height: auto;
}

/* Success page: keep the logo its natural (home-page) size, and wrap it with the
   language toggle in an inline-block row that shrinks to the logo's width. The
   header centers the row, and the toggle right-aligns to the logo's own right
   edge — so it sits directly under the logo, not out at the page edge. */
.header-row {
  display: inline-block;
  max-width: 100%;
}

.header-row .logo img {
  display: block;
}

.logo-placeholder {
  display: inline-block;
  padding: 20px 40px;
  background: var(--bg-white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  font-size: 24px;
  font-weight: bold;
  color: var(--primary-color);
}

/* Language toggle — subtle text switch in the top-right of the first card */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.lang-toggle.corner {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 2;
}

/* Language toggle under the logo, right-aligned (success page) — sits below the
   logo mark in the top-right; the centered confirmation card made a corner
   toggle look out of place. */
.header-lang {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

/* Pledge hero: stack the toggle above the existing back link, top-right */
.page-hero-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.lang-btn {
  border: none;
  background: transparent;
  color: var(--text-light);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  /* Deliberately small & subtle (Martin's call): a low-frequency switch that
     should stay out of the way, tucked into the card corner. */
  padding: 4px 5px;
  cursor: pointer;
  transition: var(--transition);
}

.lang-btn:hover {
  color: var(--text-dark);
}

.lang-btn.active {
  color: var(--text-dark);
  font-weight: 700;
}

.lang-sep {
  color: var(--text-light);
  font-size: 0.75rem;
  user-select: none;
}

/* Hero Section */
.hero {
  padding: 40px 20px;
  background: var(--bg-white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  margin: 40px 0;
  position: relative;
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.hero-left {
  padding: 20px;
}

.hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-image {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  object-fit: cover;
}

.title {
  font-size: 3rem;
  color: var(--text-dark);
  margin-bottom: 20px;
  font-weight: 700;
  text-align: left;
}

.description {
  font-size: 1.25rem;
  color: var(--text-light);
  line-height: 1.8;
  text-align: justify;
}

.hero-banner {
  margin-top: 32px;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.hero-banner-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Progress Section */
.progress-section {
  background: var(--bg-white);
  padding: 40px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  margin: 40px 0;
}

.progress-section h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 30px;
  color: var(--text-dark);
}

.status-card {
  text-align: center;
  padding: 30px;
  background: var(--bg-light);
  border-radius: var(--border-radius);
  margin: 20px 0;
}

.status-label {
  font-size: 0.875rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.status-amount {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 10px 0;
}

.status-sublabel {
  font-size: 0.875rem;
  color: var(--text-light);
}

/* Progress Bar */
.progress-bar-container {
  width: 100%;
  height: 30px;
  background: var(--bg-light);
  border-radius: 15px;
  overflow: hidden;
  margin: 30px 0 10px;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--success-color), var(--secondary-color));
  border-radius: 15px;
  transition: width 1s ease;
}

.progress-text {
  text-align: center;
  font-size: 1.125rem;
  color: var(--text-dark);
  font-weight: 600;
}

/* Pledges Section */
.pledges-section {
  background: var(--bg-white);
  padding: 40px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  margin: 40px 0;
}

.pledges-section h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 30px;
  color: var(--text-dark);
}

.pledges-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.pledge-stat {
  text-align: center;
  padding: 30px 20px;
  background: var(--bg-light);
  border-radius: var(--border-radius);
}

.pledge-stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--secondary-color);
  margin-bottom: 10px;
}

.pledge-stat-label {
  font-size: 0.875rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Discreet dw-connect link under the hero intro — centered below the text */
.hero-dwlink {
  margin-top: 16px;
  font-size: 0.95rem;
  text-align: center;
}

.hero-dwlink-note {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--text-light);
}

/* CTA Section */
.cta-section {
  text-align: center;
  padding: 60px 40px;
  background: linear-gradient(135deg, var(--primary-color), #c0392b);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  margin: 40px 0;
  color: white;
}

/* Big decorative heart with the CTA button centered on top of it. The button
   may slightly overhang the heart's edges. The heart pulses behind the button
   (the button is positioned against the wrapper, so it stays still). */
.heart-cta {
  position: relative;
  display: inline-block;
}

.heart-icon {
  font-size: 16rem;
  line-height: 1;
  animation: heartbeat 1.5s ease-in-out infinite;
}

.heart-cta .cta-button {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.heart-cta .cta-button:hover {
  transform: translate(-50%, -50%) translateY(-3px);
}

.heart-cta .cta-button:active {
  transform: translate(-50%, -50%) translateY(-1px);
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.cta-section h2 {
  font-size: 2rem;
  margin-bottom: 30px;
}

.cta-button {
  font-size: 1.25rem;
  padding: 18px 48px;
  background: white;
  color: var(--primary-color);
  border: none;
  border-radius: 50px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: var(--transition);
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.cta-button:active {
  transform: translateY(-1px);
}

/* Footer */
.footer {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-light);
  font-size: 0.875rem;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .title {
    font-size: 2rem;
  }

  .description {
    font-size: 1rem;
    /* Left-align on narrow columns: with hyphenation off, justify here would
       leave large gaps between words. Desktop keeps justify. */
    text-align: left;
  }

  .status-amount {
    font-size: 2rem;
  }

  .pledge-stat-number {
    font-size: 2rem;
  }

  .cta-section h2 {
    font-size: 1.5rem;
  }
}



/* Shared Page Blocks */
.page-hero {
  background: var(--bg-white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 32px;
  margin: 40px 0;
  position: relative;
}

.page-hero-compact {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.page-eyebrow {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary-color);
  font-weight: 700;
  margin-bottom: 8px;
}

.page-hero h1 {
  font-size: 2.5rem;
  margin-bottom: 12px;
}

.page-description {
  font-size: 1.1rem;
  color: var(--text-light);
}

.text-link {
  color: var(--secondary-color);
  text-decoration: none;
  font-weight: 600;
}

.text-link:hover {
  text-decoration: underline;
}

/* Pledge Page */
.pledge-page {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 32px;
  margin: 40px 0;
}

.pledge-form-card,
.pledge-preview-card,
.success-card {
  background: var(--bg-white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 32px;
  position: relative;
}

.pledge-form-card h2,
.pledge-preview-card h2 {
  font-size: 1.75rem;
  margin-bottom: 8px;
}

.section-intro {
  color: var(--text-light);
  margin-bottom: 24px;
}

.form-grid {
  display: grid;
  gap: 20px;
  margin-bottom: 20px;
}

.form-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.form-field label {
  font-weight: 600;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1px solid #d5dde5;
  border-radius: 10px;
  padding: 14px 16px;
  font: inherit;
  background: #fff;
  color: var(--text-dark);
  transition: var(--transition);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}

.checkbox-field {
  margin-top: 4px;
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-weight: 600;
  cursor: pointer;
}

.checkbox-label input {
  width: 18px;
  height: 18px;
}

.hidden {
  display: none !important;
}

.form-actions,
.success-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.form-submit-button {
  min-width: 180px;
}

.form-submit-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 16px 28px;
  border-radius: 50px;
  border: 1px solid #d5dde5;
  background: var(--bg-white);
  color: var(--text-dark);
  text-decoration: none;
  font-weight: 700;
}

.secondary-button:hover {
  background: var(--bg-light);
}

.form-message {
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
}

.form-message-error {
  background: #fdecea;
  color: #a93226;
}

.form-message-success {
  background: #eafaf1;
  color: #1e8449;
}

.preview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.preview-status {
  font-size: 0.95rem;
  color: var(--text-light);
  text-align: right;
}

.preview-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.preview-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid #eef2f5;
}

.preview-row strong {
  text-align: right;
}

.preview-progress-block {
  margin-top: 28px;
  padding-top: 8px;
}

.preview-progress-header,
.preview-progress-caption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.preview-progress-header {
  margin-bottom: 10px;
  font-weight: 600;
}

.preview-progress-container {
  margin-top: 0;
}

.preview-progress-caption {
  margin-top: 12px;
  color: var(--text-light);
  font-size: 0.95rem;
}

.preview-note {
  margin-top: 24px;
  padding: 18px;
  border-radius: 10px;
  background: var(--bg-light);
  color: var(--text-light);
  font-size: 0.95rem;
}

.preview-note p + p {
  margin-top: 10px;
}

/* Success Page */
.success-card {
  max-width: 600px;
  margin: 28px auto;
  text-align: center;
}

.success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #eafaf1;
  color: var(--success-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 auto 16px;
}

/* Success message stack: black confirmation on top, big red "Děkujeme" below. */
.success-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.success-thanks {
  font-size: 1.95rem;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1.15;
  margin-bottom: 12px;
}

.success-card .page-description {
  max-width: 480px;
  margin: 0 auto;
}

/* Centered, equal-size, equal-height buttons (the primary filled, the secondary
   outlined) — the two used to differ in font size and alignment. */
.success-actions {
  justify-content: center;
  margin-top: 28px;
}

.success-actions .cta-button,
.success-actions .secondary-button {
  min-height: 54px;
  padding: 14px 32px;
  font-size: 1rem;
}

.success-primary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: var(--primary-color);
  color: #fff;
}

/* The actions sit in their own card below the payment details, so it needs less
   top margin than the standalone success card. The inner margin-top is dropped
   too, so the buttons sit vertically centered within the card's padding. */
.success-card-actions {
  margin-top: 0;
}

.success-card-actions .success-actions {
  margin-top: 0;
}

/* Payment instructions (E1) — QR codes (one-time) / standing order (monthly) */
.payment-card {
  background: var(--bg-white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  border-top: 4px solid var(--primary-color);
  padding: 32px;
  max-width: 760px;
  margin: 36px auto 24px;
}

.payment-card h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.payment-note {
  color: var(--text-light);
  margin-bottom: 24px;
}

/* Two columns; each pairs a QR (one-time) above its own account window. On
   mobile the columns stack, so a QR sits directly above its matching window. */
.payment-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.payment-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Each account group (QR + its details) is its own panel, so the two are
     separated by a distinct box rather than by whitespace alone. */
  background: var(--bg-light);
  border-radius: 10px;
  padding: 20px;
}

.qr-card {
  text-align: center;
  margin: 0;
}

.qr-card img {
  width: 180px;
  height: 180px;
  border: 1px solid var(--bg-light);
  border-radius: 8px;
  background: #fff;
}

.qr-card figcaption {
  margin-top: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
}

/* The panel (.payment-col) now provides the box; the bank-card just holds the
   rows below the QR. */
.bank-card {
  background: transparent;
}

.bank-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(231, 76, 60, 0.3);
}

.bank-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bank-row dt {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-light);
  margin-bottom: 2px;
}

.bank-row dd {
  display: flex;
  /* Top-align so the copy button stays beside the first line when a long value
     (e.g. the IBAN) wraps onto two lines, instead of floating centered. */
  align-items: flex-start;
  gap: 8px;
  font-size: 0.95rem;
  word-break: break-word;
}

/* Nudge the value down slightly so it optically lines up with the copy button. */
.bank-row dd .bank-value {
  padding-top: 4px;
}

.bank-value {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 600;
}

.copy-btn {
  flex: none;
  border: 1px solid var(--bg-light);
  background: #fff;
  color: var(--text-light);
  border-radius: 6px;
  min-width: 32px;
  min-height: 32px;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  transition: var(--transition);
}

.copy-btn:hover {
  color: var(--text-dark);
  border-color: var(--text-light);
}

.copy-btn.copied {
  color: var(--success-color);
  border-color: var(--success-color);
}

.bank-hint {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--text-light);
}

@media (max-width: 640px) {
  .payment-columns {
    grid-template-columns: 1fr;
    /* The two account panels stack; the boxes themselves give the separation. */
    gap: 20px;
  }

  .payment-card {
    padding: 24px 20px;
  }

  /* Tighten the header + the gap above the confirmation card on phones. */
  .header {
    padding: 10px 0;
  }

  .header-lang {
    margin-top: 6px;
  }

  /* The logo wordmark scales down a lot on a narrow phone; keep the toggle small
     too so it doesn't look larger than the logo text. */
  .lang-btn,
  .lang-sep {
    font-size: 0.68rem;
  }

  .success-card {
    margin: 8px auto;
  }
}

@media (max-width: 992px) {
  .pledge-page {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .page-hero-compact,
  .preview-header,
  .preview-row,
  .preview-progress-header,
  .preview-progress-caption {
    flex-direction: column;
  }

  .form-grid-2 {
    grid-template-columns: 1fr;
  }

  .page-hero h1 {
    font-size: 2rem;
  }
}

.lookup-card {
  background: var(--bg-white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 32px;
  margin: 40px 0;
}

/* Constrain the gate card so it doesn't stretch full width around the centered
   content (keeps it visually balanced, like the pledge card). */
#authLoading {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.lookup-card {
  text-align: center;
}

#email[readonly] {
  background: #f6f8fa;
  color: var(--text-light);
  cursor: not-allowed;
}

/* ============================================================
   Calculator page (D2): banner + sticky bar + simulator +
   supporters strip + pledge zone. Implements the D17 layout.
   ============================================================ */

.center {
  text-align: center;
}

/* Banner */
.calc-banner {
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin: 20px 0 4px;
}

.calc-banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* Sticky campaign-status bar */
.calc-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg-white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  border-radius: var(--border-radius);
  margin: 8px 0;
}

.calc-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  padding: 14px 20px;
}

.topbar-stat {
  text-align: center;
}

.topbar-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-light);
}

.topbar-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
}

.topbar-barwrap {
  flex: 1;
  min-width: 200px;
}

.progress-bar-container.calc-topbar-bar {
  height: 14px;
  margin: 0;
}

.topbar-cap {
  font-size: 0.8rem;
  color: var(--text-light);
  margin-top: 6px;
  text-align: center;
}

/* Zones 1 + 2: simulator card */
.sim-card {
  position: relative;
  background: var(--bg-white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  /* Extra top room so the centered heading clears the corner language toggle. */
  padding: 44px 32px 32px;
  margin: 28px 0;
  border-top: 4px solid var(--secondary-color);
}

.sim-card h2 {
  font-size: 1.9rem;
  margin-bottom: 6px;
}

.sim-sub {
  color: var(--text-light);
  margin: 0 auto 26px;
  max-width: 640px;
}

.sim-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(290px, 0.95fr);
  gap: 32px;
  align-items: stretch;
}

.sim-inputs {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sim-inputs .form-field,
.sim-inputs .form-grid {
  margin-bottom: 0;
}

.field-hint {
  font-size: 0.8rem;
  color: var(--text-light);
  font-weight: 400;
}

/* Segmented one-time / monthly control */
.segmented {
  display: inline-flex;
  border: 1px solid #d5dde5;
  border-radius: 10px;
  overflow: hidden;
}

.seg-btn {
  flex: 1;
  border: none;
  background: #fff;
  padding: 12px 16px;
  font: inherit;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  transition: var(--transition);
}

.seg-btn.active {
  background: var(--secondary-color);
  color: #fff;
}

.sim-calc-button {
  background: var(--secondary-color);
  color: #fff;
  align-self: center;
}

/* Zone 2: preview = the calculator's result */
.sim-preview {
  background: #f4f9fd;
  border: 1px solid #dbe9f5;
  border-radius: var(--border-radius);
  padding: 26px;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.preview-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--secondary-color);
  font-weight: 700;
  margin-bottom: 6px;
}

.sim-big-amount {
  font-size: 2.9rem;
  font-weight: 800;
  color: var(--primary-color);
  line-height: 1.1;
  margin: 2px 0 4px;
}

.sim-big-sub {
  font-size: 0.9rem;
  color: var(--text-light);
  margin-bottom: 12px;
}

.sim-detail .preview-row {
  text-align: left;
  border-bottom-color: #dbe9f5;
}

.sim-progress {
  margin-top: 20px;
}

.sim-progress-head {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 8px;
  text-align: left;
  gap: 12px;
}

.sim-pct {
  color: var(--success-color);
}

.progress-bar-container.split {
  display: flex;
  height: 14px;
  margin: 0;
}

.progress-bar-container.split .seg-base {
  height: 100%;
  background: var(--secondary-color);
  transition: width 0.6s ease;
}

.progress-bar-container.split .seg-add {
  height: 100%;
  background: var(--success-color);
  transition: width 0.6s ease;
}

.sim-legend {
  display: flex;
  justify-content: center;
  gap: 18px;
  font-size: 0.78rem;
  color: var(--text-light);
  margin-top: 8px;
}

.sim-legend .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}

.sim-legend .dot.base {
  background: var(--secondary-color);
}

.sim-legend .dot.add {
  background: var(--success-color);
}

.sim-cap {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-light);
  margin-top: 8px;
}

/* Supporters strip (social proof) */
.supporters-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #fdecea;
  border: 1px solid #f5cfc9;
  border-radius: var(--border-radius);
  padding: 16px 24px;
  margin: 28px 0;
  text-align: center;
}

.supporters-strip .heart {
  color: var(--primary-color);
  font-size: 1.2rem;
}

.supporters-strip strong {
  color: var(--primary-color);
}

/* Zone separation */
.zone-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 40px 4px 8px;
}

.zone-divider::before,
.zone-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #d5dde5;
}

.zone-divider span {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
}

/* Zone 3: pledge form (centered, fits content) */
.pledge-wrap {
  max-width: 600px;
  margin: 0 auto;
}

.pledge-card {
  background: var(--bg-white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 32px;
  margin: 12px 0 24px;
  border-top: 4px solid var(--primary-color);
  text-align: center;
}

.pledge-card h2 {
  font-size: 1.8rem;
  margin-bottom: 6px;
}

.pledge-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 460px;
  margin: 0 auto;
  text-align: left;
}

.pledge-form .form-field,
.pledge-form .form-grid {
  margin-bottom: 0;
}

.pledge-card .form-submit-button {
  background: var(--primary-color);
  color: #fff;
}

.center-actions {
  justify-content: center;
}

.pledge-note {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-top: 4px;
}

/* Pledge list — several pledges per account (Phase M / D23) */
.pledge-list {
  max-width: 560px;
  margin: 0 auto;
}

.pledge-rows {
  list-style: none;
  margin: 18px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.pledge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: var(--bg-light);
  border-radius: var(--border-radius);
  border-left: 3px solid var(--primary-color);
}

.pledge-row-info {
  min-width: 0;
}

.pledge-row-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.pledge-row-amount {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-dark);
}

.pledge-row-type {
  font-size: 0.85rem;
  color: var(--text-light);
}

.pledge-row-impact {
  font-size: 0.9rem;
  color: var(--text-light);
  margin-top: 2px;
}

.pledge-row-message {
  font-size: 0.85rem;
  color: var(--text-dark);
  margin-top: 4px;
  font-style: italic;
  overflow-wrap: anywhere;
}

.pledge-row-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.row-btn {
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition);
}

.row-edit {
  background: var(--secondary-color);
  color: #fff;
}

.row-edit:hover {
  filter: brightness(0.94);
}

.row-delete {
  background: transparent;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.row-delete:hover {
  background: var(--primary-color);
  color: #fff;
}

@media (max-width: 480px) {
  .pledge-row {
    flex-direction: column;
    align-items: stretch;
  }

  .pledge-row-actions {
    justify-content: flex-end;
  }
}

/* Calculator page responsiveness */
@media (max-width: 860px) {
  .sim-grid {
    grid-template-columns: 1fr;
  }
}

/* The status bar wraps to several rows until it has desktop width; keeping it
   sticky on phone/tablet would permanently cover a big slice of the viewport
   during the (long) calculator flow. Let it scroll away below desktop — the
   scenario card still shows progress-to-goal, so context isn't lost. Sticky is
   retained on desktop, where it fits in one compact row. */
@media (max-width: 768px) {
  .calc-topbar {
    position: static;
  }
}

@media (max-width: 560px) {
  /* Tighten the (now non-sticky) status bar on small phones. */
  .calc-topbar-inner {
    gap: 10px 18px;
    padding: 12px 16px;
  }

  .topbar-value {
    font-size: 1.2rem;
  }

  .pledge-card {
    padding: 22px 18px;
  }

  .sim-card {
    padding: 44px 18px 22px;
  }

  .sim-card h2 {
    font-size: 1.5rem;
  }

  .sim-big-amount {
    font-size: 2.3rem;
  }
}

/* ============================================================
   Auth screens (AUTH2): login / register / confirm / forgot /
   reset — one centered card, views toggled in JS. Reuses the
   shared .form-field / .cta-button / .form-message styles.
   ============================================================ */

.auth-card {
  background: var(--bg-white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 36px 32px;
  margin: 40px auto;
  max-width: 440px;
  border-top: 4px solid var(--secondary-color);
}

.auth-card h1 {
  font-size: 1.9rem;
  margin-bottom: 8px;
  text-align: center;
}

.auth-card .section-intro {
  text-align: center;
}

/* The auth submit button is full-width inside the narrow card. */
.auth-button {
  width: 100%;
}

.auth-card .form-actions {
  margin: 4px 0 8px;
}

/* Email-safety note on the registration screen (Ondra): small reassuring print. */
.auth-safety-note {
  font-size: 0.85rem;
  color: var(--text-light);
  background: var(--bg-light);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 4px;
}

.auth-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 0.95rem;
}

.auth-link-row {
  color: var(--text-light);
}

.auth-link-row .text-link {
  margin-left: 6px;
}

.auth-back {
  margin-top: 22px;
}

/* "Signed in as <email> · Sign out" bar (home + pledge pages). */
.auth-status {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-light);
}

.auth-status-who {
  word-break: break-word;
}

.auth-status-sep {
  color: var(--text-light);
}

.auth-status-signout {
  border: none;
  background: transparent;
  color: var(--secondary-color);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 2px;
}

.auth-status-signout:hover {
  text-decoration: underline;
}

/* On the home CTA (red gradient) the status text needs light colors. */
.cta-section .auth-status,
.cta-section .auth-status-sep {
  color: rgba(255, 255, 255, 0.85);
}

.cta-section .auth-status-signout {
  color: #fff;
  text-decoration: underline;
}

/* Pledge-page header bar carrying the sign-out control, right-aligned. */
.pledge-authbar {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}