/* ================================================================
   SecurFinancial — Credit Cards page
   ================================================================ */

:root {
  --primaryColor:           #000000;
  --secondaryColor:         #cbe7f0;
  --backgroundColor:        #ffffff;
  --primaryTextColor:       #2c2c2c;
  --headerTextColor:        #000000;
  --headerBackgroundColor:  #ffffff;
  --footerBackgroundColor:  #ffffff;
  --footerTextColor:        #28272b;
  --linkColor:              #cbe7f0;
  --color-text:             #DEE1E4;
  --borderRadius:           20px;
  --bodyFont:               adobe-clean, proxima-nova, sans-serif;
  --headingFont:            adobe-clean, proxima-nova, sans-serif;
  --page-padding:           48px;
  --max-width: 1200px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: var(--bodyFont);
  font-size: 16px;
  color: var(--primaryTextColor);
  background: var(--backgroundColor);
  -webkit-font-smoothing: antialiased;
}
body { background: var(--backgroundColor); }
img { display: block; max-width: 100%; }
ul { list-style: none; padding: 0; margin: 0; }
a { color: inherit; text-decoration: none; }

/* ── Top Ribbon ──────────────────────────────────────────────────── */
.TopRibbon { background: var(--secondaryColor); color: var(--primaryTextColor); font-size: 0.875rem; font-weight: 400; text-align: center; }
.TopRibbon__content { display: flex; align-items: center; justify-content: center; padding: 10px 16px; gap: 10px; }
.TopRibbon__icon { height: 25px; width: 30px; flex-shrink: 0; }

 /* ── Header from index page ─────────────────────────────────────── */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: #ffffff;
      border-bottom: 1px solid #e8e8e8;
    }

    .header-inner {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 24px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .header-logo img {
      height: 35px;
      width: auto;
      display: block;
    }


    .header-nav {
      display: flex;
      align-items: center;
      gap: 40px;
      list-style: none;
    }

    .header-nav a {
      text-decoration: none;
      color: var(--color-text);
      font-size: 0.95rem;
      font-weight: 400;
      transition: color 0.15s;
      text-transform: uppercase;
    }

    .header-nav a:hover {
      color: var(--color-accent);
    }



/* ── Header ──────────────────────────────────────────────────────── */
.PageHeader { position: sticky; top: 0; z-index: 100; background: var(--headerBackgroundColor); border-bottom: 1px solid #e8e8e8; }
.PageHeader__content { max-width: 1200px; margin: 0 auto; padding: 0 var(--page-padding); height: 64px; display: flex; align-items: center; gap: 32px; }
.PageHeader__logo { flex-shrink: 0; }
.PageHeader__logo img { height: 48px; width: auto; }
.PageHeader__navigation { flex: 1; display: flex; justify-content: center; }
.PageHeader__navigation ul { display: flex; gap: 32px; list-style: none; }
.PageHeader__navigation a { font-size: 0.9375rem; font-weight: 400; color: var(--headerTextColor); text-transform: uppercase; letter-spacing: 0.04em; transition: color 0.15s; }
.PageHeader__navigation a:hover, .PageHeader__navigation a.active { font-weight:700; }
.PageHeader__userActions { flex-shrink: 0; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 20px; border-radius: var(--borderRadius); font-family: var(--bodyFont); font-size: 0.9375rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: opacity 0.15s, transform 0.1s; border: 2px solid transparent; }
.btn:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-outline { background: transparent; color: #0096A6; border-color: #0096A6; }
.btn-accent { background: #0096A6; color: #ffffff; border-color: #0096A6; }

/* ── Banner ──────────────────────────────────────────────────────── */
.Banner { position: relative; overflow: hidden; }
.Banner--isFullWidth { width: 100%; }
.Banner .Image { position: absolute; inset: 0; }
.Banner .Image img { width: 100%; height: 100%; object-fit: cover; }
.Banner__content { position: relative; z-index: 1; padding: 0 var(--page-padding); height: 100%; display: flex; flex-direction: column; justify-content: center; }
.Banner--alignment-left   .Banner__content { align-items: flex-start; }
.Banner--alignment-center .Banner__content { align-items: center; }
.hero-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(10,20,40,0.55) 0%, rgba(10,20,40,0.2) 55%, transparent 100%); pointer-events: none; z-index: 0; }
.hero-banner .Banner__content { z-index: 2; }
.hero-banner .Image img {
  object-fit: cover;
  object-position: top;
}

/* ── Title ───────────────────────────────────────────────────────── */
.Title__pretitle { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.9; margin-bottom: 10px; }
.Title__content h1 { font-family: var(--headingFont); font-size: 2.5rem; font-weight: 700; line-height: 1.15; margin-bottom: 12px; }
.Title__subtitle p { font-size: 1.0625rem; font-weight: 500; opacity: 0.9; line-height: 1.6; }

/* ── Card ────────────────────────────────────────────────────────── */
.Card { background: #ffffff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); overflow: hidden; }

.Card--variant-vertical { display: flex; flex-direction: column; }
.Card--variant-vertical .Card__image img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }

.Card--variant-horizontalRight { display: flex; flex-direction: row-reverse; min-height: 280px; }
.Card--variant-horizontalRight .Card__image { flex: 0 0 40%; overflow: hidden; }
.Card--variant-horizontalRight .Card__image img { width: 100%; height: 100%; object-fit: cover; }

.Card__content { flex: 1; display: flex; flex-direction: column; }
.Card__contentBackground { padding: 28px 32px; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.Card__contentBackground h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 12px; color: var(--primaryTextColor); }
.Card__contentBackground p { font-size: 0.9375rem; color: #6e6e6e; line-height: 1.6; margin-bottom: 8px; }
.Card__contentBackground ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 20px; color: #6e6e6e; font-size: 0.9375rem; line-height: 1.7; }
.Card--variant-horizontalLeft {
  display: flex;
  flex-direction: row;        /* image left, content right */
  min-height: 280px;
}

.Card--variant-horizontalLeft .Card__image {
  flex: 0 0 40%;
  overflow: hidden;
}

.Card--variant-horizontalLeft .Card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Container ───────────────────────────────────────────────────── */
.Container__content { max-width: 1200px; margin: 0 auto; padding: 0 var(--page-padding); display: flex; flex-wrap: wrap; gap: 24px; }
.Container--isFullWidth .Container__content { max-width: 100%; }

/* ── Product spotlight ───────────────────────────────────────────── */
.product-spotlight {
  padding: 48px 0;
}

.product-spotlight .Container__content {
  flex-direction: column;
}

.product-spotlight .Card--variant-horizontalRight {
  width: 100%;
}

/* ── Product compare grid ────────────────────────────────────────── */
.product-compare { padding-bottom: 64px; }
.product-compare .Container__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.product-compare .Container__content section { display: flex; flex-direction: column; }
.product-compare-card { flex: 1; }
.product-compare-card .Card__image { background: #f7f7f7; display: flex; align-items: center; justify-content: center; }
.product-compare-card .Card__image img { width: 100%; height: auto; max-height: 260px; object-fit: contain; aspect-ratio: auto; padding: 24px; background: #f7f7f7; }


/* ── Loan products — full-bleed card images ─────────────────────── */
.loan-product-card { flex: 1; display: flex; flex-direction: column; }

.loan-product-card .Card__image {
  flex: 1;
  overflow: hidden;
  min-height: 220px;
  background: none;
  display: block;
}

.loan-product-card .Card__image .Image {
  height: 100%;
}

.loan-product-card .Card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: unset;
  max-height: unset;
  padding: 0;
  background: none;
}

.loan-product-card .Button {
  display: flex;
  justify-content: center;
}


/* ── Offer decisioning ───────────────────────────────────────────── */
.offerContent { position: relative; overflow: hidden; }
.offerContent .Image { position: absolute; inset: 0; }
.offerContent .Image img { width: 100%; height: 100%; object-fit: cover; }
.offerContent .Banner__content { position: relative; z-index: 1; width: 100%; display: flex; justify-content: center; align-items: center; height: 100%; }

/* ── Footer ──────────────────────────────────────────────────────── */
.PageFooter { background: var(--footerBackgroundColor); border-top: 1px solid #e8e8e8; padding: 40px 0; }
.PageFooter__content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.PageFooter__info { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.PageFooter__logo img { height: 36px; width: auto; }
.PageFooter__copyrights { font-size: 0.8125rem; color: var(--footerTextColor); line-height: 1.55; opacity: 0.7; }
.PageFooter__navigation ul { display: flex; flex-direction: column; gap: 10px; list-style: none; text-align: right; }
.PageFooter__navigation a { font-size: 0.875rem; color: var(--footerTextColor); text-transform: uppercase; letter-spacing: 0.04em; transition: color 0.15s; }
.PageFooter__navigation a:hover, .PageFooter__navigation a.active { color: var(--primaryColor); }

/* ── Branding ────────────────────────────────────────────────────── */
.UserAvatar > img { max-width: 36px; border-radius: 50%; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --page-padding: 24px; }
  .Card--variant-horizontalRight { flex-direction: column; }
  .Card--variant-horizontalRight .Card__image { flex: 0 0 auto; }
  .Card--variant-horizontalRight .Card__image img { height: 220px; width: 100%; }
  .product-compare .Container__content { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .PageHeader__navigation { display: none; }
  .Banner__content { padding: 0 var(--page-padding); }
  .Title__content h1 { font-size: 1.75rem; }
  .PageFooter__content { flex-direction: column; align-items: flex-start; }
  .PageFooter__navigation ul { text-align: left; flex-direction: row; flex-wrap: wrap; gap: 10px 24px; }
}