/* --- Home hero: "Better Education / Accessible Healthcare / Stronger
   Communities" feature row (left column) -------------------------------
   Elementor's container "width" control isn't producing an override here
   (the framework's own .e-con base rule forces width:100%, which wins over
   flex-basis:auto), so these three items were stretching to full row width
   and stacking instead of sitting side by side. Forcing an explicit
   flex-basis/width here, scoped to these three specific elements only. */
.elementor-element-fe36629,
.elementor-element-f07c6ee,
.elementor-element-53596c7 {
  width: auto !important;
  flex: 0 1 auto !important;
  max-width: 195px !important;
  min-width: 0 !important;
}
@media (max-width: 1024px) {
  .elementor-element-fe36629,
  .elementor-element-f07c6ee,
  .elementor-element-53596c7 {
    max-width: 45% !important;
  }
}
@media (max-width: 600px) {
  .elementor-element-fe36629,
  .elementor-element-f07c6ee,
  .elementor-element-53596c7 {
    max-width: 100% !important;
  }
}

/* --- Hero section spacing fix -------------------------------------------
   The donation card now renders at its full natural height (no internal
   scroll), which is much taller than the original short card this hero
   layout was designed around. Two knock-on issues result, fixed here
   without touching the sitewide `.site-section` rhythm class (which sets
   padding-top/bottom on every section on the site via !important) or the
   left-hand hero content:
     1. The right column (`hro0045`) previously had a `-12em` top margin
        left over from the old, shorter card design, which pulled the tall
        card up underneath the site header. Removed via the Elementor
        container's own margin setting (not CSS) - see the layout edit log.
     2. `.site-section` forces this hero section's bottom padding to a
        fixed 40px (desktop) / 32px (tablet) / 24px (mobile), which isn't
        enough clearance for the taller card before the next section (which
        intentionally overlaps upward by 150px for its own design). This
        scoped, higher-specificity override adds the extra clearance this
        one section needs, at each breakpoint, without changing padding on
        any other section of the site. */
.elementor-element-hro0047.site-section {
  padding-bottom: 180px !important;
}
@media (max-width: 1024px) {
  .elementor-element-hro0047.site-section {
    padding-bottom: 260px !important;
  }
}
@media (max-width: 767px) {
  .elementor-element-hro0047.site-section {
    padding-bottom: 170px !important;
  }
}

/* SRMET Donation Card - matches the site's global colors (--e-global-color-*) and
   global fonts (--e-global-typography-*) exposed by the Elementor kit, with hex/font
   fallbacks in case those variables are ever unavailable.

   SPECIFICITY NOTE: the active Elementor kit (.elementor-kit-7) ships global form-field
   and button styles - e.g. ".elementor-kit-7 input:not([type=\"button\"]):not([type=\"submit\"]), 
   .elementor-kit-7 textarea" (font-size:16px; padding:14px 18px) and 
   ".elementor-kit-7 button, ..." (font-size:16px; padding:16px 32px) - whose specificity
   (0,3,1 and 0,1,1) beats a bare .srmet-input/.srmet-amount-btn class rule (0,1,0), even
   though this stylesheet loads later. Every selector below is therefore scoped under the
   card's #srmet-donation-card id (specificity 1,x,x) so it reliably wins without needing
   !important on every property. Sizing pass: card is auto-height and every section is
   sized per an explicit spec so the card lands close to the left hero column's height. */

.srmet-donation-card {
  --srmet-primary: var(--e-global-color-primary, #0F766E);
  --srmet-primary-dark: #0C5E58;
  --srmet-accent: var(--e-global-color-accent, #D4A017);
  --srmet-accent-dark: #B78A12;
  --srmet-text: var(--e-global-color-text, #475569);
  --srmet-heading: var(--e-global-color-secondary, #1E293B);
  --srmet-bg: var(--e-global-color-background, #FFFFFF);
  --srmet-softbg: var(--e-global-color-softaccent, #EAF7F8);
  --srmet-altbg: var(--e-global-color-altbg, #F8FAFC);
  --srmet-border: var(--e-global-color-borders, #E2E8F0);
  --srmet-danger: #B91C1C;

  --srmet-font-heading: var(--e-global-typography-primary-font-family, "DM Serif Display"), serif;
  --srmet-font-body: var(--e-global-typography-text-font-family, "Inter"), sans-serif;
  --srmet-font-accent: var(--e-global-typography-accent-font-family, "Inter"), sans-serif;
  --srmet-font-button: var(--e-global-typography-buttons-font-family, "Inter"), sans-serif;

  position: relative;
  width: 100%;
  max-width: 500px;
  height: auto;
  background: var(--srmet-bg);
  border: 1px solid var(--srmet-border);
  border-radius: 20px;
  box-shadow: 0 16px 36px -16px rgba(15, 23, 42, 0.14);
  padding: 20px 20px 18px;
  box-sizing: border-box;
  font-family: var(--srmet-font-body);
  color: var(--srmet-text);
  text-align: left;
  overflow: visible;
}
#srmet-donation-card * { box-sizing: border-box; }

/* Cause tabs (Education / Medicine / Women) - this IS the primary cause selection;
   it is deliberately not repeated anywhere else in the form. Target row height ~58px. */
#srmet-donation-card .srmet-cause-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}
#srmet-donation-card .srmet-cause-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 7px 6px;
  background: var(--srmet-bg) !important;
  border: 1px solid var(--srmet-border) !important;
  border-radius: 14px;
  cursor: pointer;
  font-size: 12.5px;
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
#srmet-donation-card .srmet-cause-tab:hover { border-color: var(--srmet-primary) !important; transform: translateY(-1px); }
#srmet-donation-card .srmet-cause-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--srmet-softbg);
  color: var(--srmet-primary);
  flex-shrink: 0;
}
#srmet-donation-card .srmet-cause-tab[data-cause="medicine"] .srmet-cause-icon {
  background: rgba(212, 160, 23, 0.14);
  color: var(--srmet-accent);
}
#srmet-donation-card .srmet-cause-label {
  font-family: var(--srmet-font-accent);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--srmet-heading) !important;
}
#srmet-donation-card .srmet-cause-tab.is-active {
  background: var(--srmet-primary) !important;
  border-color: var(--srmet-primary) !important;
}
#srmet-donation-card .srmet-cause-tab.is-active .srmet-cause-icon {
  background: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
}
#srmet-donation-card .srmet-cause-tab.is-active .srmet-cause-label { color: #FFFFFF !important; }

/* Intro */
#srmet-donation-card .srmet-intro { margin-bottom: 8px; }
#srmet-donation-card .srmet-intro-title {
  margin: 0 0 4px;
  font-family: var(--srmet-font-heading);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  color: var(--srmet-heading);
}
#srmet-donation-card .srmet-intro-sub {
  margin: 0 0 2px;
  font-family: var(--srmet-font-accent);
  font-weight: 700;
  font-size: 13px;
  color: var(--srmet-heading);
}
#srmet-donation-card .srmet-intro-text {
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--srmet-text);
}
#srmet-donation-card .srmet-intro-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--srmet-primary);
  text-decoration: underline;
}
#srmet-donation-card .srmet-divider {
  border: none;
  border-top: 1px solid var(--srmet-border);
  margin: 8px 0;
}

/* Generic section */
#srmet-donation-card .srmet-section { margin-bottom: 8px; }
#srmet-donation-card .srmet-section-title {
  margin: 0 0 8px;
  font-family: var(--srmet-font-accent);
  font-weight: 700;
  font-size: 16px;
  color: var(--srmet-heading);
}
#srmet-donation-card .srmet-note {
  margin: 8px 0 0;
  padding: 9px 12px;
  background: var(--srmet-softbg);
  border: 1px solid rgba(15,118,110,0.18);
  border-radius: 12px;
  color: var(--srmet-primary);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

/* Donation type - 3 equal columns, target card height ~50px */
#srmet-donation-card .srmet-type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
#srmet-donation-card .srmet-type-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 6px;
  background: var(--srmet-bg) !important;
  border: 1.5px solid var(--srmet-border) !important;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  transition: background-color .2s ease, border-color .2s ease;
}
#srmet-donation-card .srmet-type-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#srmet-donation-card .srmet-radio {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--srmet-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#srmet-donation-card .srmet-radio::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
}
#srmet-donation-card .srmet-type-label {
  font-family: var(--srmet-font-accent);
  font-weight: 700;
  font-size: 12px;
  color: var(--srmet-heading) !important;
  white-space: normal;
}
#srmet-donation-card .srmet-type-sub {
  font-size: 10px;
  color: var(--srmet-text);
  white-space: normal;
  text-align: center;
}
#srmet-donation-card .srmet-type-card:hover { border-color: var(--srmet-primary) !important; }
#srmet-donation-card .srmet-type-card.is-active {
  border-color: var(--srmet-primary) !important;
  background: var(--srmet-bg) !important;
}
#srmet-donation-card .srmet-type-card.is-active .srmet-radio { border-color: var(--srmet-primary); }
#srmet-donation-card .srmet-type-card.is-active .srmet-radio::after { background: var(--srmet-primary); }
#srmet-donation-card .srmet-type-card.is-active .srmet-type-label { color: var(--srmet-primary) !important; }

/* Amount - 4 equal columns, target button height ~38-40px */
#srmet-donation-card .srmet-amount-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 6px;
}
#srmet-donation-card .srmet-amount-btn {
  min-width: 0;
  padding: 10px 4px;
  background: var(--srmet-bg) !important;
  border: 1px solid var(--srmet-border) !important;
  border-radius: 10px;
  font-family: var(--srmet-font-accent);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  color: var(--srmet-heading) !important;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
#srmet-donation-card .srmet-amount-btn:hover { border-color: var(--srmet-primary) !important; }
#srmet-donation-card .srmet-amount-btn.is-active {
  background: var(--srmet-primary) !important;
  border-color: var(--srmet-primary) !important;
  color: #FFFFFF !important;
}

/* Inputs (shared: custom amount, name, email, mobile, PAN, address) - target height ~38-40px */
#srmet-donation-card .srmet-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--srmet-bg) !important;
  border: 1px solid var(--srmet-border) !important;
  border-radius: 10px;
  font-family: var(--srmet-font-body);
  font-size: 12px;
  line-height: 1.3;
  color: var(--srmet-heading) !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
#srmet-donation-card .srmet-input::placeholder { color: #94A3B8; }
#srmet-donation-card .srmet-input:focus {
  outline: none;
  border-color: var(--srmet-primary) !important;
  box-shadow: 0 0 0 3px rgba(15,118,110,0.14);
}
#srmet-donation-card .srmet-textarea { resize: vertical; min-height: 50px; }

#srmet-donation-card .srmet-hint {
  margin: 5px 0 0;
  font-size: 9.5px;
  color: var(--srmet-text);
}
#srmet-donation-card .srmet-hint::before { content: '\2022  '; }
#srmet-donation-card .srmet-hint.is-error { color: var(--srmet-danger); }

#srmet-donation-card .srmet-field { margin-bottom: 6px; }
#srmet-donation-card .srmet-field label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--srmet-font-accent);
  font-size: 10px;
  font-weight: 600;
  color: var(--srmet-heading);
}
#srmet-donation-card .srmet-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

#srmet-donation-card .srmet-field-error,
#srmet-donation-card .srmet-form-error {
  margin: 6px 0 0;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--srmet-danger);
}

/* Consent */
#srmet-donation-card .srmet-consent {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 5px 0 6px;
}
#srmet-donation-card .srmet-consent label {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 9.5px;
  line-height: 1.4;
  color: var(--srmet-text);
  cursor: pointer;
}
#srmet-donation-card .srmet-consent input {
  margin-top: 2px;
  width: 14px;
  height: 14px;
  accent-color: var(--srmet-primary);
  flex-shrink: 0;
}
#srmet-donation-card .srmet-consent-link {
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--srmet-primary) !important;
  text-decoration: underline;
  white-space: nowrap;
}

#srmet-donation-card .srmet-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Summary */
#srmet-donation-card .srmet-summary {
  background: var(--srmet-altbg);
  border: 1px solid var(--srmet-border);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
#srmet-donation-card .srmet-summary-title {
  margin: 0 0 6px;
  font-family: var(--srmet-font-accent);
  font-weight: 700;
  font-size: 12px;
  color: var(--srmet-heading);
}
#srmet-donation-card .srmet-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
#srmet-donation-card .srmet-summary-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
#srmet-donation-card .srmet-summary-col span {
  font-size: 10px;
  color: var(--srmet-text);
}
#srmet-donation-card .srmet-summary-col strong {
  font-family: var(--srmet-font-accent);
  font-size: 12px;
  font-weight: 700;
  color: var(--srmet-heading);
  overflow-wrap: break-word;
}
#srmet-donation-card .srmet-summary-amount { color: var(--srmet-primary) !important; }

/* Submit - target height ~44px */
#srmet-donation-card .srmet-submit-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--srmet-accent) !important;
  border: none !important;
  border-radius: 16px;
  font-family: var(--srmet-font-button);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  color: #FFFFFF !important;
  cursor: pointer;
  box-shadow: 0 12px 26px -10px rgba(212,160,23,0.55);
  transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
#srmet-donation-card .srmet-submit-btn:hover:not(:disabled) {
  background: var(--srmet-accent-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -10px rgba(212,160,23,0.6);
}
#srmet-donation-card .srmet-submit-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
#srmet-donation-card .srmet-submit-btn.is-loading { opacity: .75; cursor: wait; }

#srmet-donation-card .srmet-trust-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 9px;
  color: var(--srmet-text);
}
#srmet-donation-card .srmet-trust-badge svg { color: var(--srmet-primary); flex-shrink: 0; }

/* Success / Failed views */
#srmet-donation-card .srmet-view--success,
#srmet-donation-card .srmet-view--failed {
  text-align: center;
  padding: 6px 4px 4px;
}
#srmet-donation-card .srmet-result-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 24px;
  font-weight: 700;
}
#srmet-donation-card .srmet-result-icon--success { background: var(--srmet-softbg); color: var(--srmet-primary); }
#srmet-donation-card .srmet-result-icon--failed { background: #FEF2F2; color: var(--srmet-danger); }
#srmet-donation-card .srmet-result-title {
  margin: 0 0 6px;
  font-family: var(--srmet-font-heading);
  font-weight: 400;
  font-size: 20px;
  color: var(--srmet-heading);
}
#srmet-donation-card .srmet-result-sub {
  margin: 0 0 18px;
  font-size: 13.5px;
  color: var(--srmet-text);
}
#srmet-donation-card .srmet-view--success .srmet-summary { text-align: left; margin-bottom: 14px; }
#srmet-donation-card .srmet-ref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 2px;
  font-size: 12px;
  color: var(--srmet-text);
  border-bottom: 1px solid var(--srmet-border);
}
#srmet-donation-card .srmet-ref-row code {
  font-size: 11.5px;
  color: var(--srmet-heading);
  background: var(--srmet-altbg);
  padding: 2px 6px;
  border-radius: 6px;
}
#srmet-donation-card .srmet-result-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
#srmet-donation-card .srmet-btn-primary,
#srmet-donation-card .srmet-btn-secondary {
  flex: 1;
  padding: 12px 14px;
  border-radius: 999px;
  font-family: var(--srmet-font-button);
  font-weight: 600;
  font-size: 13.5px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--srmet-border);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
#srmet-donation-card .srmet-btn-primary {
  background: var(--srmet-primary) !important;
  border-color: var(--srmet-primary) !important;
  color: #FFFFFF !important;
}
#srmet-donation-card .srmet-btn-primary:hover { background: var(--srmet-primary-dark) !important; }
#srmet-donation-card .srmet-btn-secondary {
  background: var(--srmet-bg) !important;
  color: var(--srmet-heading) !important;
}
#srmet-donation-card .srmet-btn-secondary:hover { border-color: var(--srmet-primary); color: var(--srmet-primary) !important; }
#srmet-donation-card .srmet-result-footnote {
  margin: 18px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--srmet-text);
}

/* Responsive */
@media (max-width: 1024px) {
  #srmet-donation-card { padding: 22px 20px 18px; max-width: 100%; }
}

@media (max-width: 767px) {
  #srmet-donation-card { padding: 20px 16px 16px; border-radius: 18px; }
  #srmet-donation-card .srmet-intro-title { font-size: 21px; }
  #srmet-donation-card .srmet-cause-tab { padding: 8px 6px; }
  #srmet-donation-card .srmet-type-grid { gap: 6px; }
  #srmet-donation-card .srmet-field-row { grid-template-columns: 1fr 1fr; }
  #srmet-donation-card .srmet-amount-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #srmet-donation-card .srmet-summary-grid { grid-template-columns: 1fr 1fr; row-gap: 10px; }
  #srmet-donation-card .srmet-submit-btn { font-size: 14.5px; padding: 13px 16px; }
  #srmet-donation-card .srmet-consent { flex-direction: column; }
}

@media (max-width: 480px) {
  #srmet-donation-card .srmet-field-row { grid-template-columns: 1fr; }
  #srmet-donation-card .srmet-summary-grid { grid-template-columns: 1fr; row-gap: 8px; }
}