/* membership.css: page-only additions (loads after Rdp.css) */
/* --- Tally popup page: small upgrades --- */

/* Make quick donate links a neat responsive grid */
.membership-pay-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 10px;
}

@media (max-width: 520px){
  .membership-pay-grid{ grid-template-columns: 1fr; }
}

/* Optional: better tap target + alignment for UPI links */
.quick-donate{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border, rgba(255,255,255,0.14));
  background: rgba(255,255,255,0.04);
  text-decoration: none;
  font-weight: 800;
}

.quick-donate:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.06);
}

/* Ensure buttons used for Tally open look like your other buttons */
.btn{
  border: 0;
  background: transparent;
}

/* Full-width utility if not already present */
.btn-full{
  width: 100%;
}

.membership-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
}

.membership-ctas{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.membership-card,
.membership-box{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  border-radius: 18px;
  padding: 18px;
}

.membership-card__row{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.lang-switch{
  display:flex;
  gap: 10px;
  align-items: center;
}

.lang-btn{
  border: 1px solid rgba(255,255,255,.2);
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: inherit;
  cursor: pointer;
}

.lang-btn[aria-pressed="true"]{
  border-color: rgba(255,165,0,.6);
  background: rgba(255,165,0,.12);
}

.membership-two-col{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 900px){
  .membership-two-col{ grid-template-columns: 1fr; }
}

.field{
  display:grid;
  gap: 8px;
  margin-bottom: 14px;
}

.field label{
  font-weight: 700;
}

.field input,
.field select,
.field textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: inherit;
}

.help{ font-size: .95rem; opacity: .85; }
.tiny{ font-size: .9rem; opacity: .78; }

.checkbox-line{
  display:flex;
  gap: 10px;
  align-items: flex-start;
}

.checkbox-line input{ margin-top: 4px; }

.membership-list{
  margin: 0;
  padding-left: 18px;
}

.membership-list li{ margin: 8px 0; }

.membership-note{
  border-left: 4px solid rgba(255,165,0,.65);
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,165,0,.08);
  margin-top: 14px;
}
/* About RDP */
.about-rdp .section-head p { max-width: 72ch; }

.about-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 900px) {
  .about-layout { grid-template-columns: 1fr 1fr; }
  #our-story { grid-column: 1 / -1; }
}

.about-card {
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 16px;
  background: rgba(0,0,0,0.18);
}

.about-card h3 { margin-top: 0; }

.about-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* Feature grid */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}

@media (min-width: 900px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
}

.feature {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}

.feature h4 { margin: 0 0 6px; font-size: 1rem; }
.feature p { margin: 0; }

/* Ideology blocks */
.ideology-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.ideology {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}

.ideology h4 { margin: 0 0 6px; font-size: 1rem; }
.ideology p { margin: 0; }

/* Pledges */
.pledge-list {
  margin: 0;
  padding-left: 18px;
}

.pledge-list li { margin: 8px 0; }