/* ==========================================================================
   Association Portal — corporate theme
   Loaded after bootstrap.css / stylesheet.css so these rules take priority.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  --ap-navy: #0f2747;
  --ap-navy-light: #17365f;
  --ap-navy-dark: #0a1b32;
  --ap-gold: #c8992e;
  --ap-gold-light: #e0b24f;
  --ap-slate: #5b6b82;
  --ap-bg: #f6f8fb;
  --ap-border: #e4e9f0;

  --bs-primary: var(--ap-navy);
  --bs-primary-rgb: 15, 39, 71;
  --bs-link-color: var(--ap-navy);
  --bs-link-hover-color: var(--ap-gold);
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-color: #33404f;
  --bs-body-bg: #ffffff;
}

body {
  font-family: var(--bs-body-font-family);
  color: var(--bs-body-color);
  background-color: #ffffff;
}

/* --------------------------------------------------------------------
   Neutralise OpenCart's legacy "sticky footer via absolute positioning"
   hack (#container absolute + huge #content padding-bottom + footer
   absolute/bottom:-1px). It assumes short, simple pages and breaks down
   with this site's taller custom homepage — causing large dead-space
   gaps and the footer misplacing/overlapping content. A normal,
   in-flow footer is more robust for this layout.
   -------------------------------------------------------------------- */
#container {
  position: relative;
  min-height: 0;
  margin-bottom: 0;
}

#content,
#column-left,
#column-right {
  padding-bottom: 0 !important;
}

footer {
  position: relative;
  bottom: auto;
  border: none;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Poppins', var(--bs-body-font-family);
  font-weight: 700;
  color: var(--ap-navy);
  letter-spacing: -0.01em;
}

a {
  transition: color .15s ease;
}

/* --------------------------------------------------------------------
   Section scaffolding
   -------------------------------------------------------------------- */
.ap-section {
  padding: 3.25rem 0;
}

.ap-section-alt {
  background-color: var(--ap-bg);
  border-top: 1px solid var(--ap-border);
  border-bottom: 1px solid var(--ap-border);
}

.ap-eyebrow {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ap-gold);
  margin-bottom: .5rem;
}

.ap-section-title {
  font-size: 2rem;
  margin-bottom: .5rem;
}

.ap-section-lead {
  color: var(--ap-slate);
  max-width: 640px;
}

.ap-section-header {
  text-align: center;
  margin-bottom: 2.25rem;
}

.ap-section-header .ap-section-lead {
  margin: 0 auto;
}

.ap-divider {
  width: 56px;
  height: 4px;
  background: var(--ap-gold);
  border-radius: 2px;
  margin: 1rem auto 0;
}

.ap-section-header.text-start .ap-divider {
  margin-left: 0;
}

/* --------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------- */
#top {
  background: var(--ap-navy-dark);
  color: #cfd8e6;
  font-size: .85rem;
}

#top a {
  color: #cfd8e6;
}

#top a:hover {
  color: var(--ap-gold-light);
}

#top .dropdown-menu {
  font-size: .9rem;
}

header {
  background: #ffffff;
  padding: .75rem 0;
  box-shadow: 0 1px 0 var(--ap-border);
  position: sticky;
  top: 0;
  z-index: 1030;
}

header #logo h1 {
  font-size: 1.5rem;
  margin: 0;
}

header #logo a {
  color: var(--ap-navy);
  text-decoration: none;
}

header #logo img {
  max-height: 56px;
}

.navbar-nav .nav-link {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .92rem;
  color: var(--ap-navy) !important;
  padding: .6rem 1rem !important;
  position: relative;
}

.navbar-nav .nav-link:hover {
  color: var(--ap-gold) !important;
}

.navbar-nav .nav-link.ap-cta {
  background: var(--ap-navy);
  color: #fff !important;
  border-radius: 999px;
  padding: .55rem 1.4rem !important;
  margin-left: .5rem;
}

.navbar-nav .nav-link.ap-cta:hover {
  background: var(--ap-gold);
  color: #fff !important;
}

/* --------------------------------------------------------------------
   Hero / banner slider
   -------------------------------------------------------------------- */
.ap-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ap-navy) 0%, var(--ap-navy-light) 100%);
}

.ap-hero .carousel-item img {
  height: 460px;
  object-fit: cover;
  width: 100%;
  filter: brightness(.90);
}

.ap-hero .carousel-caption {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  text-align: left;
  left: 8%;
  right: 8%;
  max-width: 640px;
}

.ap-hero .carousel-caption .ap-eyebrow {
  color: var(--ap-gold-light);
}

.ap-hero .carousel-caption h2,
.ap-hero .carousel-caption h3 {
  color: #fff;
  font-size: 2.4rem;
  margin-bottom: .75rem;
}

.ap-hero-fallback {
  background: linear-gradient(135deg, var(--ap-navy) 0%, var(--ap-navy-light) 100%);
  color: #fff;
  padding: 5rem 0;
  text-align: center;
}

.ap-hero-fallback h1 {
  color: #fff;
  font-size: 2.5rem;
}

.ap-hero-fallback p {
  color: #cfd8e6;
  font-size: 1.1rem;
  max-width: 640px;
  margin: 0 auto;
}

.ap-hero-fallback .breadcrumb {
  display: inline-flex;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

.ap-hero-fallback .breadcrumb > li.breadcrumb-item {
  text-shadow: none;
  padding: 0;
}

.ap-hero-fallback .breadcrumb > li.breadcrumb-item:after {
  display: none;
}

.ap-hero-fallback .breadcrumb > li.breadcrumb-item + li {
  padding-left: .5rem;
}

.ap-hero-fallback .breadcrumb > li.breadcrumb-item + li:before {
  content: "/";
  padding-right: .5rem;
  color: rgba(255, 255, 255, .5);
}

/* "Become a Member" panel docked onto the hero */
.ap-hero-wrap {
  position: relative;
}

.ap-hero-cta-panel {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 45px rgba(15, 39, 71, .25);
  padding: 1.75rem 1.5rem;
  text-align: center;
}

.ap-hero-cta-panel h3 {
  font-size: 1.3rem;
  margin-bottom: .4rem;
}

.ap-hero-cta-panel p {
  color: var(--ap-slate);
  font-size: .9rem;
  margin-bottom: 1.1rem;
}

.ap-hero-cta-panel-static {
  max-width: 420px;
  margin: 2.5rem auto;
}

@media (min-width: 992px) {
  .ap-hero-wrap .ap-hero-cta-panel {
    position: absolute;
    top: 50%;
    right: 6%;
    transform: translateY(-50%);
    width: 300px;
    z-index: 5;
  }
}

/* --------------------------------------------------------------------
   Search pill
   -------------------------------------------------------------------- */
.ap-search-pill {
  display: flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--ap-border);
  border-radius: 999px;
  background: #fff;
  padding: .5rem 1rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.ap-search-pill:focus-within {
  border-color: var(--ap-gold);
  box-shadow: 0 0 0 3px rgba(200, 153, 46, .15);
}

.ap-search-pill-icon {
  flex: 0 0 auto;
  color: var(--ap-slate);
  line-height: 1;
}

.ap-search-pill input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: .9rem;
  color: var(--ap-navy);
}

.ap-search-pill input::placeholder {
  color: var(--ap-slate);
  opacity: .8;
}

.ap-search-pill-clear {
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: var(--ap-slate);
  padding: 0 .1rem;
  line-height: 1;
  cursor: pointer;
}

.ap-search-pill-clear:hover {
  color: var(--ap-navy);
}

/* --------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------- */
.btn-ap-primary,
.btn-primary {
  background: var(--ap-navy);
  border-color: var(--ap-navy);
  border-radius: 999px;
  padding: .6rem 1.6rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .9rem;
  transition: all .2s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-ap-primary:hover {
  background: var(--ap-gold);
  border-color: var(--ap-gold);
  box-shadow: 0 6px 16px rgba(200, 153, 46, .35);
  color: #fff;
}

.btn-ap-outline {
  border: 2px solid #fff;
  color: #fff;
  border-radius: 999px;
  padding: .55rem 1.5rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .9rem;
  background: transparent;
}

.btn-ap-outline:hover {
  background: #fff;
  color: var(--ap-navy);
}

/* --------------------------------------------------------------------
   Cards (generic corporate treatment)
   -------------------------------------------------------------------- */
.ap-card {
  border: 1px solid var(--ap-border);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(15, 39, 71, .05);
  transition: transform .2s ease, box-shadow .2s ease;
  background: #fff;
}

.ap-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(15, 39, 71, .12);
}

.card {
  border-color: var(--ap-border);
}

/* --------------------------------------------------------------------
   Office bearer cards (President / Vice President)
   -------------------------------------------------------------------- */
.ap-bearer-card {
  border: 1px solid var(--ap-border);
  border-radius: 16px;
  background: #fff;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 2px 10px rgba(15, 39, 71, .05);
  transition: transform .2s ease, box-shadow .2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ap-bearer-card .btn {
  margin-top: auto;
}

.ap-bearer-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(15, 39, 71, .12);
}

.ap-bearer-photo {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--ap-bg);
  box-shadow: 0 0 0 4px var(--ap-navy);
  margin-bottom: 1rem;
}

.ap-bearer-role {
  font-family: 'Poppins', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ap-gold);
  margin-bottom: .25rem;
}

.ap-bearer-name {
  margin-bottom: .1rem;
}

.ap-bearer-designation {
  color: var(--ap-slate);
  margin-bottom: 1rem;
}

.ap-social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ap-bg);
  color: var(--ap-navy);
  margin: 0 .25rem;
  transition: all .2s ease;
}

.ap-social-links a:hover {
  background: var(--ap-navy);
  color: #fff;
}

/* --------------------------------------------------------------------
   Status badges (fixed convention: paid / unpaid / wrong_member)
   -------------------------------------------------------------------- */
.ap-badge {
  display: inline-block;
  padding: .35em .85em;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}

.ap-badge-paid {
  background-color: #1e9e5a;
}

.ap-badge-unpaid {
  background-color: #e08b1e;
}

.ap-badge-wrong_member {
  background-color: #d5423f;
}

.ap-badge-risk-normal {
  background-color: #1e9e5a;
}

.ap-badge-risk-high {
  background-color: #e08b1e;
}

.ap-badge-risk-very_risk {
  background-color: #d5423f;
}

/* --------------------------------------------------------------------
   Payment Risk Log / I Need Material data tables
   -------------------------------------------------------------------- */
.ap-data-table {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(15, 39, 71, .05);
}

.ap-data-table thead th {
  background: var(--ap-navy);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-color: var(--ap-navy);
  white-space: nowrap;
}

.ap-data-table td {
  vertical-align: middle;
}

.ap-badge-tier-platinum {
  background-color: #6b7a8f;
}

.ap-badge-tier-gold {
  background-color: var(--ap-gold);
}

.ap-badge-tier-silver {
  background-color: #9aa4b2;
}

.ap-badge-tier-bronze {
  background-color: #a4632f;
}

/* --------------------------------------------------------------------
   Members grid / cards
   -------------------------------------------------------------------- */
.ap-member-scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  gap: 1rem;
  padding: .25rem .25rem 1rem;
  margin: 0 -.25rem;
}

.ap-member-scroll-item {
  flex: 0 0 auto;
  width: 160px;
  scroll-snap-align: start;
}

@media (min-width: 576px) {
  .ap-member-scroll-item {
    width: 190px;
  }
}

.ap-member-card {
  border: 1px solid var(--ap-border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 39, 71, .05);
  transition: transform .2s ease, box-shadow .2s ease;
  height: 100%;
}

.ap-member-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(15, 39, 71, .12);
}

.ap-member-card[role="button"] {
  cursor: pointer;
}

.ap-member-card[role="button"]:focus-visible {
  outline: 2px solid var(--ap-gold);
  outline-offset: 2px;
}

.ap-member-card-compact {
  border-top: 3px solid var(--ap-navy);
}

.ap-member-card-tier-platinum {
  border-top-color: #6b7a8f;
}

.ap-member-card-tier-gold {
  border-top-color: var(--ap-gold);
}

.ap-member-card-tier-silver {
  border-top-color: #9aa4b2;
}

.ap-member-card-tier-bronze {
  border-top-color: #a4632f;
}

.ap-member-card .card-body {
  text-align: center;
  padding: 1rem .75rem;
}

.ap-member-card .ap-badge {
  display: inline-block;
  box-shadow: 0 3px 8px rgba(15, 39, 71, .15);
}

.ap-member-badges {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  max-width: 100%;
}

.ap-member-badges .ap-badge {
  font-size: .62rem;
  padding: .3em .6em;
  letter-spacing: .02em;
  white-space: nowrap;
}

.ap-member-avatar {
  width: 62px;
  height: 62px;
  margin: 0 auto .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .02em;
  background: var(--ap-navy);
}

.ap-member-avatar-lg {
  width: 84px;
  height: 84px;
  font-size: 1.4rem;
}

.ap-member-avatar-platinum {
  background: linear-gradient(135deg, #6b7a8f, #97a2b2);
}

.ap-member-avatar-gold {
  background: linear-gradient(135deg, var(--ap-gold), var(--ap-gold-light));
}

.ap-member-avatar-silver {
  background: linear-gradient(135deg, #9aa4b2, #c1c8d1);
}

.ap-member-avatar-bronze {
  background: linear-gradient(135deg, #a4632f, #c07f45);
}

.ap-member-meta {
  margin-top: .5rem;
  padding-top: .75rem;
  border-top: 1px solid var(--ap-border);
}

.ap-member-meta p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}

.ap-member-meta i {
  color: var(--ap-gold);
  font-size: .75rem;
  width: 1em;
  text-align: center;
}

.ap-member-card .card-title a {
  color: var(--ap-navy);
  text-decoration: none;
}

.ap-member-card .card-title a:hover {
  color: var(--ap-gold);
}

.ap-member-code {
  color: var(--ap-slate);
  font-size: .82rem;
}

.ap-member-company {
  color: var(--ap-navy);
  font-size: .82rem;
  font-weight: 600;
}

.ap-member-phone,
.ap-member-location {
  color: var(--ap-slate);
  font-size: .78rem;
}

/* Member detail page */
.ap-member-detail-photo {
  width: 100%;
  border-radius: 14px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--ap-border);
}

.ap-detail-row {
  display: flex;
  justify-content: space-between;
  padding: .55rem 0;
  border-bottom: 1px solid var(--ap-border);
  font-size: .92rem;
}

.ap-detail-row:last-child {
  border-bottom: none;
}

.ap-detail-label {
  color: var(--ap-slate);
  font-weight: 500;
}

.ap-detail-value {
  font-weight: 600;
  color: var(--ap-navy);
  text-align: right;
}

/* --------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------- */
.ap-contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.ap-contact-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: var(--ap-bg);
  color: var(--ap-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.ap-map-frame {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--ap-border);
}

.ap-map-frame iframe {
  width: 100%;
  height: 320px;
  border: 0;
  display: block;
}

/* --------------------------------------------------------------------
   Stats band
   -------------------------------------------------------------------- */
.ap-stats-band {
  background: linear-gradient(180deg, var(--ap-navy-dark) 0%, var(--ap-navy) 45%, var(--ap-navy) 100%);
  padding: 3rem 0 3.25rem;
  position: relative;
}

.ap-stats-eyebrow {
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ap-gold-light);
  margin-bottom: 1.75rem;
}

.ap-stat {
  display: block;
  padding: 0 .5rem;
  text-decoration: none;
  transition: transform .2s ease;
}

a.ap-stat:hover {
  transform: translateY(-3px);
}

.ap-stat-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto .9rem;
  border-radius: 50%;
  background: rgba(200, 153, 46, .14);
  border: 1px solid rgba(224, 178, 79, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--ap-gold-light);
  transition: background .2s ease, border-color .2s ease;
}

a.ap-stat:hover .ap-stat-icon {
  background: rgba(200, 153, 46, .28);
  border-color: var(--ap-gold-light);
}

.ap-stat-value {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 2.5rem;
  color: #fff;
  line-height: 1.1;
}

.ap-stat-plus {
  color: var(--ap-gold-light);
}

.ap-stat-label {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #9fb0c7;
  margin-top: .35rem;
}

@media (min-width: 768px) {
  .ap-stat-divided {
    border-left: 1px solid rgba(255, 255, 255, .12);
  }
}

/* --------------------------------------------------------------------
   "Become a Member" CTA band
   -------------------------------------------------------------------- */
.ap-cta-band {
  background: linear-gradient(135deg, var(--ap-navy) 0%, var(--ap-navy-light) 100%);
  padding: 3.5rem 0;
  margin-top: 1rem;
}

.ap-cta-heading {
  color: #fff;
  font-size: 2rem;
  margin-bottom: .75rem;
}

.ap-cta-text {
  color: #cfd8e6;
  max-width: 560px;
  margin: 0 auto 1.5rem;
}

/* --------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------- */
footer {
  background: var(--ap-navy-dark) !important;
}

footer h5 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 1.1rem;
}

footer .text-secondary {
  color: #9fb0c7 !important;
}

footer a.text-secondary:hover {
  color: var(--ap-gold-light) !important;
}

footer hr.border-secondary {
  border-color: rgba(255, 255, 255, .12) !important;
}

footer .btn-primary {
  background: var(--ap-gold);
  border-color: var(--ap-gold);
}

footer .btn-primary:hover {
  background: var(--ap-gold-light);
  border-color: var(--ap-gold-light);
}

footer .form-control {
  border-radius: 999px 0 0 999px;
}

footer .input-group .btn {
  border-radius: 0 999px 999px 0;
}

/* --------------------------------------------------------------------
   Misc corporate polish
   -------------------------------------------------------------------- */
.breadcrumb {
  font-size: .85rem;
}

::selection {
  background: var(--ap-gold-light);
}

@media (max-width: 767.98px) {
  .ap-hero .carousel-item img {
    height: 320px;
  }

  .ap-hero .carousel-caption h2,
  .ap-hero .carousel-caption h3 {
    font-size: 1.6rem;
  }

  .ap-section {
    padding: 2.75rem 0;
  }
}