.hero-carousel .carousel-item {
  height: 70vh;
  min-height: 420px;
}

.hero-slide {
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 5, 28, 0.55);
}

.hero-slide > .container {
  position: relative;
  z-index: 1;
}

.hero-slide .hero-text {
  max-width: 720px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.hero-slide .hero-text h1,
.hero-slide .hero-text p {
  color: #ffffff;
}

.hero-slide-1 {
  background-image: linear-gradient(135deg, #1d1359, #241572);
}

.hero-slide-2 {
  background-image: linear-gradient(135deg, #1d1359, #c8161a);
}

.hero-slide-3 {
  background-image: linear-gradient(135deg, #241572, #8a5a12);
}

#districtEmptyState {
  margin-top: 1rem;
}

.state-committee-img-wrapper {
  width: 96px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: #f8f9fa;
}

.state-committee-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.rounded-xl {
  border-radius: 1rem !important;
}

.district-name-cell {
  display: flex;
  align-items: center;
}

.district-toggle {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--staup-navy);
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  font-weight: inherit;
  vertical-align: baseline;
}

.district-toggle-icon,
.district-toggle-icon-spacer {
  display: inline-block;
  width: 1rem;
  margin-right: 0.35rem;
  flex-shrink: 0;
  text-align: center;
}

.district-toggle-icon {
  transition: transform 0.15s ease-in-out;
}

.district-toggle[aria-expanded="true"] .district-toggle-icon {
  transform: rotate(180deg);
}

.district-detail-inner {
  background-color: #f8f9fa;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
}

.district-detail-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--staup-navy);
  border-top: 0;
}

.district-detail-table td {
  font-size: 0.95rem;
}

.content-placeholder {
  border: 1px dashed var(--staup-gold);
  border-radius: 0.5rem;
  background-color: var(--staup-cream);
  padding: 1rem 1.25rem;
  margin-top: 0.75rem;
}

.content-placeholder-badge {
  background-color: var(--staup-gold);
  color: var(--staup-navy);
}

.membership-step-panel {
  display: none;
}

.membership-step-panel.active {
  display: block;
}

/* Real published content styled like a card — not a dashed "needs content" placeholder */
.leadership-message {
  border-radius: 0.5rem;
  background-color: var(--staup-cream);
  padding: 1.25rem 1.5rem;
  margin-top: 0.75rem;
  box-shadow: 0 0.125rem 0.5rem rgba(29, 19, 89, 0.08);
}

.leadership-badge {
  background-color: var(--staup-gold);
  color: var(--staup-navy);
}

.leadership-avatar {
  width: 64px;
  height: 64px;
  object-fit: cover;
}

/* Brand */
.navbar-logo {
  height: 44px;
  width: 44px;
  object-fit: contain;
}

.navbar-nav .nav-link.active {
  color: var(--staup-navy);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--staup-gold);
}

.navbar-nav .dropdown-menu .dropdown-item.active {
  background-color: var(--staup-cream);
  color: var(--staup-navy);
  font-weight: 600;
}

/* Google Translate widget — strip Google's own chrome (logo/border/box) and
   let our .translate-widget pill provide the visual styling instead. */
.translate-widget {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(29, 19, 89, 0.15);
  border-radius: 999px;
  color: var(--staup-navy);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.translate-widget:hover {
  background-color: var(--staup-cream);
  border-color: rgba(29, 19, 89, 0.3);
}

.translate-widget .bi-translate {
  font-size: 0.9rem;
  color: var(--bs-primary);
}

#google_translate_element .goog-te-gadget,
#google_translate_element .goog-te-gadget-simple {
  font-family: inherit !important;
  font-size: 0.85rem !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

#google_translate_element .goog-te-gadget-icon,
#google_translate_element img {
  display: none !important;
}

#google_translate_element .goog-te-gadget-simple span[style*="border-left"] {
  display: none !important;
}

#google_translate_element .goog-te-gadget-simple > span > a {
  text-decoration: none !important;
  color: var(--staup-navy) !important;
}

#google_translate_element .goog-te-gadget-simple span[aria-hidden="true"] {
  color: var(--bs-primary) !important;
  font-size: 0.7rem !important;
}

body.goog-te-banner-show {
  top: 0 !important;
}

.goog-te-banner-frame {
  display: none !important;
}

/* Footer */
.staup-footer {
  background-color: var(--staup-navy);
  color: #e8e6f4;
  border-top: 4px solid var(--staup-gold);
}

.staup-footer h5 {
  color: #ffffff;
}

.staup-footer a {
  color: #c9c5e8;
  text-decoration: none;
}

.staup-footer a:hover {
  color: var(--staup-gold);
}

.staup-footer .footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.08);
  font-size: 1.1rem;
}

.staup-footer .footer-social a:hover {
  background-color: var(--staup-gold);
  color: var(--staup-navy);
}

/* Light-card variant of the social icon row (footer's is styled for a dark background) */
.contact-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--staup-cream);
  color: var(--bs-primary);
  font-size: 1.1rem;
  border: 1px solid rgba(29, 19, 89, 0.1);
}

.contact-social a:hover {
  background-color: var(--staup-gold);
  color: var(--staup-navy);
  border-color: var(--staup-gold);
}

.staup-footer .footer-divider {
  border-color: rgba(255, 255, 255, 0.15);
}


/* Membership registration form */
.membership-card-option {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(29, 19, 89, 0.2);
  border-radius: 0.5rem;
  background-color: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.membership-card-option:hover {
  border-color: var(--staup-navy);
}

.membership-card-option.selected {
  border-color: var(--staup-navy);
  background-color: var(--staup-cream);
  box-shadow: inset 3px 0 0 var(--staup-gold);
}

.membership-card-option .form-check-input {
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.membership-form-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .membership-form-grid.two-column {
    grid-template-columns: 1fr 1fr;
  }
}

.membership-form-grid .col-12 {
  grid-column: 1 / -1;
}

.membership-file-box {
  padding: 1rem;
  border: 1px dashed rgba(29, 19, 89, 0.3);
  border-radius: 0.5rem;
  background-color: var(--staup-cream);
}

.membership-file-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background-color: #fff;
  border: 1px solid rgba(29, 19, 89, 0.15);
}

.membership-review-section {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(29, 19, 89, 0.12);
}

.membership-review-grid {
  display: grid;
  gap: 0.75rem 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .membership-review-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Member area */
.member-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--staup-gold);
  background: #f8f9fa;
  flex-shrink: 0;
}

.member-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--staup-navy);
}

.member-photo-large {
  width: 120px;
  height: 120px;
}

/* Digital ID card — CR80 (85.6 x 54 mm) front and back. Every size is in cqw
   (a percentage of the card's own width), so the design is identical on a
   phone, on A4 and on a PVC card; print just fixes the width in millimetres. */
.id-card-sheet {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.id-card-caption {
  align-self: flex-start;
  margin: 0.5rem 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6c757d;
}

.id-card-side {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 85.6 / 54;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--staup-navy);
  border-radius: 12px;
  box-shadow: 0 0.25rem 1rem rgba(29, 19, 89, 0.15);
  color: #212529;
}

.ic-band {
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 2.2cqw 3.5cqw;
  background: var(--staup-navy);
  color: #fff;
}

.ic-band-slim {
  justify-content: center;
  padding: 1.6cqw 3.5cqw;
}

.ic-logo {
  width: 11cqw;
  height: 11cqw;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  padding: 0.4cqw;
  flex-shrink: 0;
}

.ic-org-hi {
  font-family: "Noto Sans Devanagari", "Nirmala UI", "Mangal", "Kohinoor Devanagari", sans-serif;
  font-weight: 700;
  font-size: 4.6cqw;
  line-height: 1.25;
}

.ic-org-en {
  font-weight: 600;
  font-size: 2.7cqw;
  line-height: 1.25;
}

.ic-org-primary {
  font-size: 4.2cqw;
  font-weight: 700;
}

.ic-band-slim .ic-org-en {
  font-family: "Noto Sans Devanagari", "Nirmala UI", "Mangal", "Kohinoor Devanagari", "Inter", sans-serif;
  font-size: 3.4cqw;
  font-weight: 700;
}

.ic-sub {
  margin-top: 0.4cqw;
  font-size: 2cqw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--staup-gold);
}

.ic-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4cqw;
  padding: 2.5cqw 3.5cqw;
  min-height: 0;
}

.ic-photo {
  width: 24cqw;
  height: 30cqw;
  object-fit: cover;
  border: 0.5cqw solid var(--staup-navy);
  border-radius: 1.2cqw;
  background: #f8f9fa;
  flex-shrink: 0;
}

.ic-fields {
  min-width: 0;
}

.ic-label,
.ic-grid dt {
  font-size: 2cqw;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6c757d;
  line-height: 1.3;
}

.ic-name {
  font-size: 5.2cqw;
  font-weight: 700;
  line-height: 1.2;
  color: var(--staup-navy);
  margin-bottom: 1.2cqw;
  overflow-wrap: anywhere;
}

.ic-reg {
  font-size: 4.6cqw;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 1.2cqw;
}

.ic-val {
  font-size: 3.2cqw;
  font-weight: 600;
}

.ic-strip {
  height: 2cqw;
  background: var(--staup-gold);
  flex-shrink: 0;
}

.ic-back-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.2cqw 3.5cqw 1.5cqw;
  min-height: 0;
}

.ic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4cqw 3cqw;
  margin: 0;
}

.ic-grid dd {
  margin: 0;
  font-size: 3cqw;
  font-weight: 600;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.ic-wide {
  grid-column: 1 / -1;
}

.ic-muted {
  font-size: 2cqw;
  font-weight: 400;
  color: #6c757d;
}

.ic-back-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 3cqw;
}

.ic-qr {
  width: 19cqw;
  text-align: center;
}

.ic-qr svg {
  width: 100%;
  height: auto;
  display: block;
}

.ic-sign {
  flex: 1;
  max-width: 42cqw;
  text-align: center;
}

.ic-signature {
  display: block;
  margin: 0 auto;
  height: 9cqw;
  max-width: 100%;
  object-fit: contain;
}

.ic-signature-empty {
  visibility: hidden;
}

.ic-sign-line {
  border-top: 0.3cqw solid var(--staup-navy);
  margin: 0.4cqw 0 0.6cqw;
}

.ic-sign-name {
  font-size: 2.8cqw;
  font-weight: 700;
}

@media print {
  @page {
    size: A4 portrait;
    margin: 15mm;
  }

  .navbar,
  footer,
  .no-print,
  #google_translate_element {
    display: none !important;
  }

  .id-card-page {
    padding: 0 !important;
  }

  .id-card-sheet {
    gap: 8mm;
    align-items: flex-start;
  }

  .id-card-side {
    width: 85.6mm;
    max-width: none;
    height: 54mm;
    aspect-ratio: auto;
    border-radius: 3mm;
    box-shadow: none;
    break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}