:root {
  --color-primary: #00aeef;
  --color-primary-dark: #019ad3;
  --color-text: #555555;
  --color-surface: #f2f2f2;
  --color-border: #e0e0e0;
  /* Logo: the default Simplicity loyalty logo is already in place — no content override needed */
  --default-logo: none;
  --default-hero-1: linear-gradient(115deg, #003d5c 0%, #019ad3 45%, #00aeef 100%);
  --default-hero-2: linear-gradient(115deg, #1a1a1a 0%, #444 50%, #888 100%);
  --default-hero-3: linear-gradient(115deg, #00263a 0%, #00aeef 80%, #66d4ff 100%);
}

#carouselLoyalty h1,
#carouselLoyalty h2,
#carouselLoyalty h3,
#carouselLoyalty h4,
#carouselLoyalty h5,
#carouselLoyalty p,
#carouselLoyalty .carousel-item * {
  color: #fff !important;
}

.carousel-caption h5 {
  font-size: 48px !important;
  margin-top: 2em !important;
  margin-bottom: 2rem !important;
}

.carousel-caption p {
  font-size: 16px !important;
  line-height: 1.8em !important;
}

html,
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: var(--color-text) !important;
  background: #fff !important;
}

main {
  background: #fff !important;
}

/* Header */
#header,
#header.navbar,
#header .navbar,
#header .navbar.bg-light,
#header .navbar-light {
  background: #fff !important;
  border-bottom: none !important;
}

  #header .navbar-brand img {
    filter: none;
  }

.memberPortalWelcome .dashboardHeading,
.memberPortalWelcome h3,
.rewardsBanner h3 {
  color: #fff !important;
}

.col-collectPoints .content {
  background: #6aa338 !important;
  color: #fff !important;
}

  .col-collectPoints h3,
  .col-collectPoints .content h3 {
    color: #fff !important;
  }

.col-getRewards .content {
  background: var(--color-primary) !important;
  color: #fff !important;
}

  .col-getRewards h3,
  .col-getRewards .content h3 {
    color: #fff !important;
  }

/* Mobile promo */
@media (max-width: 767px) {
  .mobile-banner {
    background: var(--default-hero-1) !important;
    min-height: 120px !important;
  }

    .mobile-banner img[src*="spacer"],
    .mobile-banner img[alt*="Promotion"] {
      display: none !important;
    }
}

/* Nav links — match layout.css exactly.
     .nav-link-color on Login/Join must stay #007dc3 on desktop.
     Using > to limit to direct children so dropdown-menu items are NOT affected. */
#header .navbar-nav > li > a.nav-link:not(.nav-link-color) {
  color: #666 !important;
}

#header .navbar-nav > li > a.nav-link {
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 48px !important;
}

#header .navbar-nav > li > a.nav-link-color {
  color: #007dc3 !important;
}

/* Top-level nav-link hover */
#header .navbar-nav > li > a.nav-link:hover,
#header .navbar-nav > li > a.nav-link:focus {
  color: var(--color-primary) !important;
}

/* Dropdown menu items — match layout.css: color: #fff */
#header .dropdown-menu a.nav-link,
.navbar-nav .dropdown-menu a.nav-link {
  color: #fff !important;
}

  #header .dropdown-menu a.nav-link:hover,
  .navbar-nav .dropdown-menu a.nav-link:hover {
    color: #fff !important;
    background-color: var(--color-primary) !important;
  }

.navbar-nav .dropdown-menu {
  color: #fff !important;
  padding: 0;
  margin: 0;
  border-radius: 0;
  border: none;
  background: #000;
}

#header .navbar-toggler,
#header .toggle-menu-btn {
  border-color: var(--color-text) !important;
}

/* Links — match layout.css: default #007dc3, hover #019ad3 (lighter) */
main a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link),
section.page a:not(.btn):not(.nav-link):not(.page-link) {
  color: #007dc3 !important;
}

  main a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover,
  section.page a:not(.btn):not(.nav-link):not(.page-link):hover {
    color: var(--color-primary-dark) !important;
    text-decoration: none !important;
  }

body a {
  color: #000000;
}

/* Headings — match layout.css: only h1–h4 are set to 400.
     h5/h6 keep Bootstrap's default (500). */
h1, h2, h3, h4 {
  font-weight: 400 !important;
}

/* Carousel caption buttons — match layout.css */
.carousel-caption a.btn {
  margin-right: 15px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 0.8em 2em !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

/* Buttons — Simplicity Blue */
.btn-primary,
.btn-blue,
a.btn-blue,
a.btn-blue:not([href]):not([tabindex]) {
  background: var(--color-primary) !important;
  color: #fff !important;
  border: none !important;
}

  .btn-primary:hover,
  .btn-blue:hover,
  a.btn-blue:hover,
  .btn-primary:focus,
  .btn-blue:focus {
    background: #000 !important;
    color: #fff !important;
  }

.btn-yellow,
a.btn-yellow {
  background: #fdad00 !important;
  color: #fff !important;
}

  .btn-yellow:hover,
  a.btn-yellow:hover {
    background: #000 !important;
    color: #fff !important;
  }

.btn-black {
  background: #000 !important;
  color: #fff !important;
}

.btn-info,
a.btn-info {
  background: #17a2b8 !important;
  color: #fff !important;
  border: none !important;
}

.btn-outline-primary {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  background: transparent !important;
}

  .btn-outline-primary:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
  }

/* Login panel — match layout.css exactly */
.loginBox .login-panel {
  border-top: 4px solid var(--color-primary) !important;
  padding: 0 1rem !important;
  border-radius: 3px !important;
  width: 300px !important;
}

  .loginBox .login-panel .card-header {
    padding: 1.6rem 0 !important;
    font-size: 24px !important;
    font-weight: 200 !important;
    border: none !important;
    background: #fff !important;
  }

  .loginBox .login-panel .card-body {
    padding: 0 !important;
    background: none !important;
  }

  .loginBox .login-panel label,
  .loginBox .login-panel a {
    font-size: 14px !important;
  }

  .loginBox .login-panel input::placeholder {
    font-size: 14px !important;
    color: #999 !important;
  }

.loginBox .formGroupLoginSubmit .btn {
  width: 100% !important;
  text-transform: uppercase !important;
}

/* Form controls */
.form-control,
input.form-control,
select.form-control,
textarea.form-control {
  color: var(--color-text) !important;
}

  .form-control:focus,
  input.form-control:focus {
    border: 1px solid #ced4da !important;
    outline-color: #ced4da !important;
    box-shadow: none !important;
  }

  .form-control::placeholder {
    color: #ccc !important;
  }

input[type="search"].form-control,
.form-inline .form-control,
.transaction-search-wrapper .form-control {
  background-color: #fff !important;
}

/* Tables & cards */
.table-responsive,
table.table {
  background: #fff !important;
  border-color: var(--color-border) !important;
}

  .table-responsive > .table-bordered {
    border: 1px solid var(--color-border) !important;
  }

.card {
  margin-bottom: 20px;
}

.card-header {
  padding: 10px 15px !important;
  background: var(--color-surface) !important;
  color: #000 !important;
  border-top: 2px solid var(--color-primary) !important;
}

  .card-header.border-0 {
    border-top: none !important;
    border-bottom: none !important;
  }

/* Pagination — scoped to .pagination so .page-link used as a
     generic "clickable line" marker elsewhere (e.g. order line items)
     is not tinted blue. */
.pagination .page-link.active,
.pagination .active > .page-link {
  background-color: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
  color: #fff !important;
}

  .pagination .page-link.active:hover,
  .pagination .active > .page-link:hover {
    background-color: var(--color-primary-dark) !important;
    color: #fff !important;
    font-weight: 700 !important;
  }

.pagination .page-link {
  color: var(--color-primary) !important;
}

  .pagination .page-link:hover {
    color: var(--color-primary-dark) !important;
  }

/* Footer */
#footer {
  background: #000 !important;
  color: #fff !important;
  border-top: none !important;
}

  #footer a,
  #footer .footer-info a,
  #footer .text-muted {
    color: #fff !important;
  }

  /* Footer legal links — match layout.css: .footer-logo > ul.nav > li > a = #666 */
  #footer .footer-logo > ul.nav > li > a {
    color: #666 !important;
  }

    #footer .footer-logo > ul.nav > li > a:hover {
      color: #fff !important;
      text-decoration: underline !important;
    }

  #footer a:hover {
    color: var(--color-primary) !important;
    text-decoration: none !important;
  }

  #footer .footer-devider,
  #footer hr {
    border-color: rgba(255, 255, 255, 0.2) !important;
  }

/* Misc */
.text-primary {
  color: var(--color-primary) !important;
}

.bg-primary {
  background-color: var(--color-primary) !important;
}

.badge.bg-danger {
  background-color: #c62828 !important;
}

.btn-expand {
  color: var(--color-primary) !important;
}