/* MOHI all-in-one mobile WhatsApp + featured card position fix v4.1.2 */

html.mohi-nexgen-v4 body{
  background:
    radial-gradient(circle at 100% 0, rgba(18,104,232,.1), transparent 24rem),
    radial-gradient(circle at 0 22%, rgba(18,169,159,.09), transparent 25rem),
    linear-gradient(180deg,#f8fbff 0%, #f4f9ff 52%, #f6fcfb 100%);
}

/* Stronger glow borders for floating cards and page hero glass panels */
.floating-card,
.page-hero > .container,
.support-home-shell,
.support-preview-card,
.payment-method-card,
.support-principle,
.support-preview-card,
.newsletter-row {
  position: relative;
}
.floating-card::after,
.page-hero > .container::after,
.support-home-shell::after,
.support-preview-card::after,
.payment-method-card::after,
.support-principle::after,
.newsletter-row::after {
  content:"";
  position:absolute;
  inset:0;
  padding:1.7px;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(244,184,67,.92), rgba(18,169,159,.9), rgba(18,104,232,.96));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:.7;
}
.floating-card::before,
.page-hero > .container::before,
.support-home-shell::before,
.newsletter-row::before {
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:calc(inherit + 4px);
  background:radial-gradient(circle at 20% 0, rgba(244,184,67,.17), transparent 32%), radial-gradient(circle at 100% 100%, rgba(18,104,232,.16), transparent 32%), radial-gradient(circle at 0 100%, rgba(18,169,159,.14), transparent 34%);
  filter:blur(14px);
  z-index:-1;
  pointer-events:none;
}
.floating-card {
  box-shadow:0 18px 42px rgba(7,43,80,.18), 0 4px 10px rgba(7,43,80,.08), inset 0 1px rgba(255,255,255,.95) !important;
}
.floating-card:hover{transform:translateY(-6px) scale(1.02) !important}
.floating-card .mini-icon{box-shadow:0 12px 22px rgba(18,169,159,.13), inset 0 1px rgba(255,255,255,.95) !important}

.page-hero>.container {
  box-shadow:0 26px 70px rgba(1,19,36,.22), inset 0 1px rgba(255,255,255,.14) !important;
}

/* Support area: reduce wasted height and improve beauty */
.section.support-home,
.support-home.section,
.cta-band {
  padding:46px 0 !important;
}
.support-home-shell {
  gap:28px !important;
  padding:18px 20px !important;
  border-radius:30px !important;
}
.support-home-copy h2 {
  font-size:clamp(2rem,4.2vw,3.5rem) !important;
  margin:10px 0 12px !important;
  max-width:650px;
}
.support-home-copy p {max-width:620px !important; font-size:1rem !important}
.support-home-actions {margin-top:18px !important}
.support-method-preview {gap:14px !important}
.support-preview-card {
  background:linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.08)) !important;
  border-radius:20px !important;
  box-shadow:0 16px 34px rgba(0,0,0,.13), inset 0 1px rgba(255,255,255,.14) !important;
}
.support-preview-card:hover {transform:translateX(-3px) translateY(-2px) !important}
.support-preview-card strong{color:#fff !important}
.support-preview-card small{color:#d7edf7 !important}

/* Payment method cards: ensure contrast and visible action labels */
.payment-method-card {
  border-radius:24px !important;
  background:
    radial-gradient(circle at 100% 0, rgba(18,169,159,.08), transparent 32%),
    radial-gradient(circle at 0 100%, rgba(18,104,232,.07), transparent 30%),
    linear-gradient(145deg,#ffffff,#f6fbff 58%,#eefaf7 100%) !important;
  box-shadow:0 18px 38px rgba(7,43,80,.12), 0 4px 10px rgba(7,43,80,.05), inset 0 1px rgba(255,255,255,.97) !important;
  color:#17334b !important;
}
.payment-method-card summary,
.payment-method-card summary * {color:inherit !important}
.payment-method-card strong,
.payment-method-card h3,
.payment-method-card p,
.payment-method-card span,
.payment-method-card div,
.payment-method-body,
.payment-method-body * {color:#17334b !important}
.payment-method-card .method-action-label {
  background:linear-gradient(135deg,#1268e8,#12a99f) !important;
  color:#fff !important;
  box-shadow:0 14px 28px rgba(18,104,232,.28) !important;
}
.payment-method-card .payment-toggle {
  background:linear-gradient(135deg,#eaf4ff,#e8fbf6) !important;
  box-shadow:0 9px 18px rgba(7,43,80,.08), inset 0 1px rgba(255,255,255,.95) !important;
}
.payment-method-card[open] .payment-toggle{background:linear-gradient(135deg,#1268e8,#12a99f) !important; color:#fff !important}
.payment-method-card summary:hover {background:rgba(18,104,232,.025) !important}

/* Refine general cards one more level */
.card,
.sidebar-card,
.value-card,
.principle,
.board-card,
.map-card,
.contact-card,
.resource-card,
.form-card,
.timeline-item,
.stat-card,
.support-principle,
.support-preview-card,
.leader-card,
.programme-card,
.project-card,
.story-card {
  border-width:1px !important;
  border-color:rgba(154,190,221,.42) !important;
  box-shadow:0 18px 40px rgba(7,43,80,.11), 0 3px 10px rgba(7,43,80,.05), inset 0 1px rgba(255,255,255,.97) !important;
}
.card:hover,
.sidebar-card:hover,
.value-card:hover,
.principle:hover,
.board-card:hover,
.map-card:hover,
.contact-card:hover,
.resource-card:hover,
.form-card:hover,
.timeline-item:hover,
.stat-card:hover,
.support-principle:hover,
.leader-card:hover,
.programme-card:hover,
.project-card:hover,
.story-card:hover {
  box-shadow:0 28px 68px rgba(7,43,80,.17), 0 8px 18px rgba(7,43,80,.08), inset 0 1px rgba(255,255,255,.97) !important;
}

/* More colour in CTA and footer zone */
.cta-band {
  background:radial-gradient(circle at 85% -20%, rgba(74,166,255,.4), transparent 23rem), linear-gradient(110deg,#072244,#0b416d 54%, #0a7e83) !important;
}
.cta-band-inner {
  padding:44px 0 !important;
  gap:26px !important;
}
.site-footer {
  background:radial-gradient(circle at 8% -8%, rgba(18,104,232,.28), transparent 28rem), radial-gradient(circle at 94% 40%, rgba(18,169,159,.22), transparent 28rem), linear-gradient(125deg,#03182f,#072a49 50%,#0a4660 100%) !important;
}
.footer-grid {gap:34px !important}
.footer-brand img {filter:drop-shadow(0 10px 20px rgba(0,0,0,.16)) !important}

/* WhatsApp: keep visible on mobile */
.whatsapp-float {
  right:max(14px, env(safe-area-inset-right)) !important;
  bottom:max(14px, calc(env(safe-area-inset-bottom) + 14px)) !important;
  z-index:2147483000 !important;
  display:flex !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none;
}
@media (max-width: 700px) {
  .whatsapp-float {
    width:66px !important;
    height:66px !important;
    min-height:66px !important;
    right:max(12px, env(safe-area-inset-right)) !important;
    bottom:max(12px, calc(env(safe-area-inset-bottom) + 12px)) !important;
  }
  .whatsapp-icon {
    width:48px !important;
    height:48px !important;
    flex:0 0 48px !important;
  }
  .whatsapp-float .whatsapp-copy {
    display:none !important;
  }
}

/* More compact page sections and story headers */
.page-hero {padding:46px 0 50px !important}
.page-hero > .container {padding:24px 28px !important}
.section {padding:60px 0 !important}
.section-sm {padding:48px 0 !important}
.section-head {margin-bottom:28px !important}
@media (max-width: 900px) {
  .section, .section.support-home, .support-home.section, .cta-band {padding:42px 0 !important}
  .support-home-shell {padding:16px 16px !important}
  .page-hero > .container {padding:22px 20px !important}
}

/* Desktop ticker movement driven by JS */
.mohi-ticker-track { animation:none !important; transform:translate3d(0,0,0); }
.mohi-ticker-viewport { overflow:hidden !important; }
body.mohi-ticker-paused .mohi-ticker-track { transform:translate3d(0,0,0); }


/* v4.1 mobile WhatsApp visibility hotfix
   The legacy mobile stylesheet hides all spans inside .whatsapp-float.
   The icon is itself a span, so restore it explicitly with stronger specificity. */
@media (max-width: 900px) {
  a.whatsapp-float {
    display:flex !important;
    position:fixed !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    overflow:visible !important;
    transform:none !important;
  }
  a.whatsapp-float > span.whatsapp-icon {
    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  a.whatsapp-float > span.whatsapp-icon svg {
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  a.whatsapp-float > span.whatsapp-copy {
    display:none !important;
  }
  a.whatsapp-float::after {
    content:none !important;
    display:none !important;
  }
}


/* v4.1.1 featured-photo floating-card position correction
   Restore the intended diagonal balance: governance top-right, safeguarding bottom-left. */
.hero-visual .floating-card.one {
  left:auto !important;
  right:-18px !important;
  top:8px !important;
  bottom:auto !important;
}
.hero-visual .floating-card.two {
  left:-18px !important;
  right:auto !important;
  top:auto !important;
  bottom:12px !important;
}

@media (max-width: 900px) {
  .hero-visual .floating-card.one {
    left:auto !important;
    right:0 !important;
    top:8px !important;
    bottom:auto !important;
  }
  .hero-visual .floating-card.two {
    left:0 !important;
    right:auto !important;
    top:auto !important;
    bottom:8px !important;
  }
}

@media (max-width: 640px) {
  .hero-visual .floating-card.one {
    width:min(198px,48vw) !important;
    right:3px !important;
    top:6px !important;
  }
  .hero-visual .floating-card.two {
    width:min(212px,52vw) !important;
    left:3px !important;
    bottom:8px !important;
  }
}