:root{
  --mda-blue:#0a73d9;
  --mda-blue-dark:#0b2f63;
  --mda-soft:#eef7ff;
  --mda-border:#d8e7f6;
  --mda-text:#15304f;
  --mda-muted:#65778c;
}
.meca-donation-app{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--mda-text);background:#f7fbff;margin:0}
.meca-donation-app *{box-sizing:border-box}
.mda-hero{display:grid;grid-template-columns:1.05fr 1fr;min-height:480px;background:linear-gradient(135deg,#f8fcff 0%,#eaf6ff 60%,#dff1ff 100%);overflow:hidden}
.mda-hero-copy{padding:62px max(6vw,28px);align-self:center}
.mda-kicker,.mda-stories-head span{font-size:12px;letter-spacing:2.4px;font-weight:800;color:var(--mda-blue)}
.mda-hero h1{font-size:clamp(40px,5vw,68px);line-height:.98;margin:16px 0 22px;max-width:760px;color:#0a2b59}
.mda-hero p{font-size:18px;line-height:1.6;max-width:730px;color:#455f7d}
.mda-hero-photo{background-size:cover;background-position:center;min-height:480px;position:relative}
.mda-no-image{background:linear-gradient(135deg,#0c79dc,#0d4fa5)}
.mda-photo-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;gap:8px}
.mda-photo-placeholder span{font-size:13px;letter-spacing:2px}
.mda-photo-placeholder strong{font-size:30px}
.mda-mini-benefits{display:flex;gap:30px;flex-wrap:wrap;margin-top:30px}
.mda-mini-benefits div{display:grid;grid-template-columns:38px auto;grid-template-rows:auto auto;column-gap:8px}
.mda-mini-benefits span{grid-row:1/3;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:white;color:#ef4562;box-shadow:0 6px 18px rgba(25,75,120,.12)}
.mda-mini-benefits strong{font-size:14px}.mda-mini-benefits small{color:#6c7d90}
.mda-donation-wrap{max-width:1180px;margin:-26px auto 0;position:relative;z-index:3;padding:0 20px 70px;display:grid;grid-template-columns:220px 1fr;gap:22px}
.mda-impact-sidebar{display:flex;flex-direction:column;gap:18px}
.mda-impact-card,.mda-stat-card,.mda-donation-card{background:#fff;border:1px solid var(--mda-border);border-radius:22px;box-shadow:0 12px 34px rgba(30,76,119,.08)}
.mda-impact-card{padding:28px 24px}.mda-impact-card h3{font-size:24px;margin:12px 0}.mda-impact-card p{color:var(--mda-muted);line-height:1.55}
.mda-globe{font-size:36px;color:var(--mda-blue)}
.mda-stat-card{padding:28px 22px;text-align:center;background:linear-gradient(160deg,#117fe5,#0568c3);color:#fff}
.mda-stat-card span{font-size:38px;display:block;margin-bottom:8px}.mda-stat-card strong{display:block;font-size:24px}.mda-stat-card small{display:block;margin-top:8px;line-height:1.4}
.mda-donation-card{padding:28px}
.mda-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}
.mda-steps>div{display:flex;align-items:center;gap:10px;color:#8695a6;border-bottom:2px solid #e9eff6;padding-bottom:12px}
.mda-steps b{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#edf2f7}
.mda-steps .active{color:#17385e;border-color:var(--mda-blue);font-weight:700}.mda-steps .active b{background:var(--mda-blue);color:#fff}
.mda-donation-card h2{font-size:22px;margin:18px 0}
.mda-causes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mda-cause{border:1px solid var(--mda-border);background:#fff;border-radius:14px;padding:18px 12px;cursor:pointer;min-height:138px;color:var(--mda-text)}
.mda-cause.active{border:2px solid var(--mda-blue);background:#f7fbff;box-shadow:0 5px 18px rgba(10,115,217,.12)}
.mda-cause-icon{font-size:27px;display:block;margin-bottom:8px}.mda-cause strong,.mda-cause small{display:block}.mda-cause small{color:var(--mda-muted);margin-top:6px;line-height:1.35}
.mda-impact-explainer{margin:16px 0;display:flex;gap:15px;align-items:flex-start;background:#f5faff;border:1px solid var(--mda-border);border-radius:14px;padding:18px}
.mda-impact-explainer h3{margin:0 0 6px;font-size:18px}.mda-impact-explainer p{margin:0;color:#63758b;line-height:1.5}.mda-impact-icon{font-size:25px}
.mda-frequency{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.mda-frequency button{border:1px solid var(--mda-border);padding:13px;border-radius:10px;background:#fff;font-weight:700;cursor:pointer}
.mda-frequency button.active{background:var(--mda-blue);color:white;border-color:var(--mda-blue)}
.mda-amount-title{font-size:16px;margin:16px 0 10px}.mda-amounts{display:grid;grid-template-columns:repeat(5,1fr) 2fr;gap:10px}
.mda-amounts button,.mda-other{height:48px;border:1px solid var(--mda-border);background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700}
.mda-amounts button{cursor:pointer}.mda-amounts button.active{border:2px solid var(--mda-blue);color:var(--mda-blue);background:#f4faff}
.mda-other{padding:0 12px;gap:8px}.mda-other input{width:100%;border:0;outline:0;background:transparent;font:inherit}
.mda-minimum{font-size:13px;color:#72849a}
.mda-check{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--mda-border);border-radius:10px;margin-top:10px;color:#53667d;background:#fff}
.mda-check input{margin-top:3px}
.mda-action-row{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:20px}
.mda-primary{border:0;border-radius:999px;background:linear-gradient(90deg,#0875d8,#0a87ed);color:#fff;font-weight:800;padding:15px 34px;font-size:16px;cursor:pointer;min-width:210px}
.mda-primary:disabled{opacity:.5;cursor:not-allowed}.mda-action-row small{color:#72849a}
.mda-admin-note{background:#fff8df;border:1px solid #f2d66f;border-radius:10px;padding:12px 14px;margin-top:14px;color:#6b5b1f}
.mda-other-ways{border-top:1px solid #e4edf6;margin-top:22px;padding-top:18px;display:flex;flex-wrap:wrap;gap:18px 28px;color:#4d6078}
.mda-other-ways span{color:#0b72d3}
.mda-stories{padding:64px max(5vw,24px);background:linear-gradient(#eef8ff,#f8fcff)}
.mda-stories-head{max-width:1180px;margin:0 auto 22px}.mda-stories h2{font-size:34px;margin:8px 0}
.mda-story-grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mda-story-card{background:#fff;border:1px solid var(--mda-border);border-radius:16px;overflow:hidden;box-shadow:0 8px 22px rgba(41,84,124,.07)}
.mda-story-image{display:block;aspect-ratio:16/9;background:#e8f0f7;overflow:hidden}.mda-story-image img{width:100%;height:100%;object-fit:cover}
.mda-story-body{padding:18px}.mda-story-body h3{margin:0 0 8px}.mda-story-body h3 a{color:#15304f;text-decoration:none}.mda-story-body p{color:#6d7d8f;line-height:1.5}.mda-read-more{font-weight:700;text-decoration:none;color:var(--mda-blue)}
@media (max-width:980px){
  .mda-hero{grid-template-columns:1fr}.mda-hero-photo{min-height:340px}
  .mda-donation-wrap{grid-template-columns:1fr;margin-top:20px}.mda-impact-sidebar{display:grid;grid-template-columns:1fr 1fr}
  .mda-causes{grid-template-columns:repeat(2,1fr)}.mda-amounts{grid-template-columns:repeat(3,1fr)}.mda-other{grid-column:span 3}
}
@media (max-width:650px){
  .mda-hero-copy{padding:42px 22px}.mda-hero h1{font-size:42px}.mda-hero p{font-size:16px}
  .mda-mini-benefits{gap:16px}.mda-impact-sidebar{grid-template-columns:1fr}
  .mda-donation-card{padding:18px}.mda-steps span{display:none}
  .mda-causes{grid-template-columns:1fr 1fr}.mda-cause{min-height:125px}
  .mda-frequency{grid-template-columns:1fr 1fr}.mda-amounts{grid-template-columns:1fr 1fr}.mda-other{grid-column:span 2}
  .mda-action-row{align-items:stretch;flex-direction:column}.mda-primary{width:100%}
  .mda-story-grid{grid-template-columns:1fr}.mda-stories h2{font-size:28px}
}


/* =========================================================
   v1.1 Layout Fix — protects the app from WordPress theme CSS
   ========================================================= */

html, body {
  overflow-x: hidden;
}

body .meca-donation-app {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: clip !important;
  clear: both !important;
}

body .meca-donation-app section,
body .meca-donation-app div,
body .meca-donation-app article,
body .meca-donation-app a,
body .meca-donation-app h1,
body .meca-donation-app h2,
body .meca-donation-app h3,
body .meca-donation-app p {
  min-width: 0;
}

body .meca-donation-app .mda-stories {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 64px 24px !important;
  overflow: hidden !important;
}

body .meca-donation-app .mda-stories-head,
body .meca-donation-app .mda-story-grid {
  width: min(1180px, 100%) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  clear: both !important;
}

body .meca-donation-app .mda-stories-head {
  display: block !important;
}

body .meca-donation-app .mda-stories-head h2 {
  width: 100% !important;
  max-width: 100% !important;
  margin: 8px 0 22px !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
}

body .meca-donation-app .mda-story-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch !important;
}

body .meca-donation-app .mda-story-card {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  overflow: hidden !important;
}

body .meca-donation-app .mda-story-card * {
  max-width: 100% !important;
}

body .meca-donation-app .mda-story-image {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 190px !important;
  overflow: hidden !important;
}

body .meca-donation-app .mda-story-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 190px !important;
  object-fit: cover !important;
}

body .meca-donation-app .mda-story-body {
  display: block !important;
  width: 100% !important;
  padding: 20px !important;
}

body .meca-donation-app .mda-story-body h3,
body .meca-donation-app .mda-story-body h3 a,
body .meca-donation-app .mda-story-body p,
body .meca-donation-app .mda-read-more {
  display: block !important;
  width: 100% !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

body .meca-donation-app .mda-story-body h3 {
  font-size: 21px !important;
  line-height: 1.3 !important;
}

body .meca-donation-app .mda-story-body p {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* Prevent common theme rules from turning article cards into narrow columns */
body .meca-donation-app article.mda-story-card {
  flex: none !important;
  flex-basis: auto !important;
}

/* Tablet */
@media (max-width: 900px) {
  body .meca-donation-app .mda-story-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Phone */
@media (max-width: 620px) {
  body .meca-donation-app .mda-stories {
    padding: 44px 16px !important;
  }

  body .meca-donation-app .mda-story-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  body .meca-donation-app .mda-story-image,
  body .meca-donation-app .mda-story-image img {
    min-height: 210px !important;
  }

  body .meca-donation-app .mda-story-body h3 {
    font-size: 20px !important;
  }
}


/* =========================================================
   v1.2 Recent Stories Slider Fix
   Fixes narrow cards, vertical text wrapping, and image sizing.
   Stories now slide horizontally instead of stacking endlessly.
   ========================================================= */

body .meca-donation-app .mda-stories {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  overflow: hidden !important;
  padding: 64px 24px !important;
}

body .meca-donation-app .mda-stories-head {
  width: min(1180px, 100%) !important;
  max-width: 1180px !important;
  margin: 0 auto 24px !important;
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 20px !important;
}

body .meca-donation-app .mda-stories-head > div:first-child {
  min-width: 0 !important;
}

body .meca-donation-app .mda-stories-head h2 {
  margin: 8px 0 0 !important;
  width: auto !important;
  max-width: 800px !important;
  font-size: clamp(28px, 4vw, 42px) !important;
  line-height: 1.1 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  white-space: normal !important;
}

body .meca-donation-app .mda-slider-controls {
  display: flex !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
}

body .meca-donation-app .mda-slider-prev,
body .meca-donation-app .mda-slider-next {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  border: 1px solid #cfe1f4 !important;
  background: #fff !important;
  color: #0a73d9 !important;
  font-size: 30px !important;
  line-height: 1 !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  box-shadow: 0 6px 18px rgba(20, 80, 140, .10) !important;
}

body .meca-donation-app .mda-story-slider {
  width: min(1180px, 100%) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  position: relative !important;
}

body .meca-donation-app .mda-story-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 22px !important;
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 2px 2px 14px !important;
  transition: transform .45s ease !important;
  will-change: transform !important;
}

body .meca-donation-app article.mda-story-card {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 calc((1180px - 44px) / 3) !important;
  width: calc((1180px - 44px) / 3) !important;
  min-width: calc((1180px - 44px) / 3) !important;
  max-width: calc((1180px - 44px) / 3) !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid #d8e7f6 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 22px rgba(41,84,124,.07) !important;
}

body .meca-donation-app .mda-story-image {
  display: block !important;
  width: 100% !important;
  height: 230px !important;
  min-height: 230px !important;
  max-height: 230px !important;
  overflow: hidden !important;
  background: #eaf3fb !important;
  flex: 0 0 230px !important;
}

body .meca-donation-app .mda-story-image img {
  display: block !important;
  width: 100% !important;
  height: 230px !important;
  min-height: 230px !important;
  max-height: 230px !important;
  object-fit: cover !important;
  object-position: center !important;
}

body .meca-donation-app .mda-story-placeholder {
  width: 100% !important;
  height: 230px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(135deg,#0a73d9,#0b4e9d) !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
}

body .meca-donation-app .mda-story-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 20px !important;
}

body .meca-donation-app .mda-story-body h3,
body .meca-donation-app .mda-story-body h3 a {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 10px !important;
  font-size: 21px !important;
  line-height: 1.3 !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  hyphens: none !important;
}

body .meca-donation-app .mda-story-body p {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 16px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  hyphens: none !important;
}

body .meca-donation-app .mda-read-more {
  margin-top: auto !important;
  display: inline-block !important;
  width: auto !important;
  word-break: normal !important;
  white-space: nowrap !important;
}

/* Tablet: 2 visible cards */
@media (max-width: 980px) {
  body .meca-donation-app article.mda-story-card {
    flex-basis: calc((100vw - 70px) / 2) !important;
    width: calc((100vw - 70px) / 2) !important;
    min-width: calc((100vw - 70px) / 2) !important;
    max-width: calc((100vw - 70px) / 2) !important;
  }
}

/* Phone: 1 visible card */
@media (max-width: 650px) {
  body .meca-donation-app .mda-stories {
    padding: 44px 16px !important;
  }

  body .meca-donation-app .mda-stories-head {
    align-items: center !important;
  }

  body .meca-donation-app .mda-slider-prev,
  body .meca-donation-app .mda-slider-next {
    width: 40px !important;
    height: 40px !important;
  }

  body .meca-donation-app article.mda-story-card {
    flex-basis: calc(100vw - 34px) !important;
    width: calc(100vw - 34px) !important;
    min-width: calc(100vw - 34px) !important;
    max-width: calc(100vw - 34px) !important;
  }

  body .meca-donation-app .mda-story-image,
  body .meca-donation-app .mda-story-image img,
  body .meca-donation-app .mda-story-placeholder {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
  }
}


/* =========================================================
   v1.3 slider reliability fix
   ========================================================= */
body .meca-donation-app .mda-story-slider {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
body .meca-donation-app .mda-story-slider::-webkit-scrollbar {
  display: none !important;
}
body .meca-donation-app .mda-story-track {
  transform: none !important;
  transition: none !important;
}
body .meca-donation-app .mda-slider-prev:disabled,
body .meca-donation-app .mda-slider-next:disabled {
  opacity: .35 !important;
  cursor: default !important;
}