/* ==========================================================================
   CASH STOP MEMBERS AREA — BRAND RESTYLE (CSS-ONLY SKIN)
   --------------------------------------------------------------------------
   Loaded AFTER the members area's own stylesheets (bootstrap.min.css +
   asset/css/cs/main.css); overrides only. No markup, field or functionality
   changes — this file (plus asset/images/CS/cash-stop-logo.svg) is the whole
   handover, wired in with a single <link> after main.css on each page.

   Mirrors the application-restyle skin (my/asset/css/v2/cs/main.css): same
   --cs-* tokens, the same block / heading / input / CTA-pill recipes, so the
   Members Area and the application flow read as one system with the
   cashstop.com.au website.

   Pages covered so far:
     - /members (login + account activation)                    [this round]
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Hubballi&family=Lexend:wght@100..900&family=Permanent+Marker&display=swap');

:root {
    --cs-navy: #0b0e3e;
    --cs-red: #ff4c5d;
    --cs-red-hover: #e83c4d;
    --cs-yellow: #f4ff43;
    --cs-bg-light: #f8f8fd;
    --cs-mid-grey: #dfdff5;
    --cs-input-focus: #d0f3f2; /* matches --color-input-focus on the main site */
    --cs-border-soft: #c9cbe0;
    --cs-link: #0d1ae9;
    --cs-error: #e42892;       /* matches --color-error on the main site */
    --cs-valid: #06b906;       /* matches --color-valid */
    --cs-font-heading: 'Lexend', 'Segoe UI', sans-serif;
    --cs-font-heading-weight: 700;
    --cs-font-body: 'Hubballi', 'Segoe UI', sans-serif;
    --cs-font-body-weight: 600;
    /* CTA pills keep the marker face — the only place it appears */
    --cs-font-button: 'Permanent Marker', 'Marker Felt', 'Comic Sans MS', cursive;
}

/* ---------- Base: drop the old blue header art, brand type ---------- */
body {
    background-image: none;
    background-color: #fff;
    font-family: var(--cs-font-body);
    font-weight: var(--cs-font-body-weight);
    color: var(--cs-navy);
    height: auto;
    /* Sticky footer: the body fills the viewport as a flex column and main
       absorbs the spare space, so short pages (login, resets) pin the
       footer to the bottom of the screen instead of leaving a void. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body > main {
    flex: 1 0 auto;
    width: 100%;
}

body > header,
body > footer {
    flex-shrink: 0;
    width: 100%;
}

/* ---------- Header: white full-width strip, site logo, brand nav ----------
   Like the application restyle (and the main website), the header strip runs
   the full page width — only the header escapes Bootstrap's centred
   .container cap; the content blocks keep their own widths. */
header.container {
    height: auto;
    width: 100%;
    max-width: 2200px;
}

.navigation {
    padding: 16px 24px;
}

/* Swap the old members logo for the site logo without touching the markup:
   the <img> paints transparently over the new logo drawn behind it. Sizes
   match the main site's .logo-svg widths (70 phone / 80 tablet / 120
   desktop); box heights follow the SVG's portrait aspect (~1.072) so
   nothing crops. */
.navbar-brand {
    background: url("../../../images/cs/cash-stop-logo.svg") no-repeat left top;
    background-size: contain;
    padding: 0;
}

.navbar-brand .logo {
    opacity: 0;
    width: 92px;
    height: 99px;
}

@media (min-width: 576px) {
    .navbar-brand .logo {
        width: 100px;
        height: 107px;
    }
}

@media (min-width: 992px) {
    .navbar-brand .logo {
        width: 120px;
        height: 129px;
    }
}

.main-menu li a:link,
.main-menu li a:visited,
.mobile-menu li a {
    font-family: var(--cs-font-body);
    font-weight: var(--cs-font-body-weight);
    color: var(--cs-navy);
    font-size: 18px;
    /* drop the old blue tab artwork + the offsets that made room for it */
    background-image: none;
    padding-top: 0;
    margin-top: 0;
}

.main-menu li a:hover,
.mobile-menu li a:hover,
.nav-link.active {
    color: var(--cs-red);
    text-decoration: none;
}

/* The base skin colours nav links via .navigation .navbar-nav .nav-link
   (higher specificity than the rules above) — match it. */
.navigation .navbar-nav .nav-link {
    color: var(--cs-navy);
}

.navigation .navbar-nav .nav-link:hover {
    color: var(--cs-red);
}

/* Desktop: nav links as the main website's header pill ("Loans Online"
   recipe — navy pill, white inner border, navy outline, white body text). */
@media (min-width: 768px) {
    .main-menu li a:link,
    .main-menu li a:visited {
        display: inline-flex;
        align-items: center;
        background: var(--cs-navy);
        color: #fff;
        border: 3px solid #fff;
        outline: 3px solid var(--cs-navy);
        border-radius: 999px;
        padding: 0.6rem 2.2rem;
        margin: 3px 3px 3px 0; /* clearance so the outline isn't clipped */
        font-size: 17px;
    }

    /* Active page (and hover): white pill, brand-dark text, the navy
       outer border retained */
    .main-menu li a:hover,
    .main-menu li a.active {
        background: #fff;
        color: var(--cs-navy);
    }

    /* Several pills side by side (logged-in nav) need a gap */
    .main-menu .nav-item + .nav-item {
        margin-left: 10px;
    }

    /* Bootstrap's .navbar-expand-md .navbar-nav .nav-link outranks the
       rules above for colour AND padding — restate both at its level. */
    .navigation .main-menu .navbar-nav .nav-link {
        color: #fff;
        padding: 0.6rem 2.2rem;
    }

    .navigation .main-menu .navbar-nav .nav-link:hover,
    .navigation .main-menu .navbar-nav .nav-link.active {
        color: var(--cs-navy);
    }
}

/* Header row: the content cards' width (base .block: 690 / 930 / 1000px),
   centred, so the logo and the last pill line up with the cards' edges
   instead of the window's. The pills tighten to stay on one line in the
   narrower rows (at 768px the full-size pills ran off the screen). */
@media (min-width: 768px) {
    .navigation {
        width: 690px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
    }

    .main-menu li a {
        white-space: nowrap;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .main-menu li a:link,
    .main-menu li a:visited,
    .navigation .main-menu .navbar-nav .nav-link {
        font-size: 15px;
        padding: 0.5rem 14px;
    }

    .main-menu .nav-item + .nav-item {
        margin-left: 6px;
    }
}

@media (min-width: 992px) {
    .navigation {
        width: 930px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .navigation .main-menu .navbar-nav .nav-link {
        padding: 0.6rem 1.8rem;
    }
}

@media (min-width: 1201px) {
    .navigation {
        width: 1000px;
    }
}

.navigation .navbar-toggler {
    border: 2px solid var(--cs-navy);
    border-radius: 8px;
    background-color: #fff;
}

/* Mobile: when the collapsed menu holds a single link (logged-out pages'
   "New Customer"), skip the hamburger entirely and show that link as a
   branded pill beside the logo. Multi-item menus (logged in) keep the
   hamburger. */
@media (max-width: 767px) {
    .navigation {
        position: relative;
    }

    .navigation:has(.mobile-menu .nav-item:only-child) .navbar-toggler {
        display: none;
    }

    .navigation:has(.mobile-menu .nav-item:only-child) .mobile-menu.collapse {
        display: block !important;
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
    }

    .navigation:has(.mobile-menu .nav-item:only-child) .mobile-menu .navbar-nav {
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
        flex: none;
        display: block;
    }

    /* The open hamburger menu (logged in): a branded stack of pills
       replacing the base skin's grey bars. Also the recipe for the inline
       single-item pill below. */
    .mobile-menu ul,
    .mobile-menu .navbar-nav {
        background: transparent;
    }

    .mobile-menu .nav-item {
        text-align: right;
    }

    .navigation .mobile-menu .navbar-nav .nav-link {
        display: inline-block;
        background: var(--cs-navy);
        color: #fff;
        border: 2px solid #fff;
        outline: 2px solid var(--cs-navy);
        border-radius: 999px;
        padding: 8px 18px !important; /* the base sets padding-right !important */
        margin: 5px 3px;
        font-size: 15px;
        font-weight: var(--cs-font-body-weight);
        white-space: nowrap;
        /* uniform pill width so the stack reads as one control group */
        width: 182px;
        text-align: center;
    }

    .navigation .mobile-menu .navbar-nav .nav-link.active {
        background: #fff;
        color: var(--cs-navy);
    }

    /* Clearance so the pills' outer outlines never clip at the container
       edges (the single-item pill was losing its top edge). */
    .navigation:has(.mobile-menu .nav-item:only-child) .mobile-menu.collapse {
        padding: 4px 3px;
        right: 13px;
    }
}

/* ---------- Content blocks: the site's solid navy card frame ---------- */
.block {
    background-color: var(--cs-bg-light);
    border: 3px solid var(--cs-navy);
    border-radius: 24px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    overflow: hidden; /* the header band hugs the rounded corners */
}

/* Heading bar: the main website's card pattern — white bar with navy
   heading text, dashed-divided from the light-grey section body below. */
.block-header {
    background-color: #fff;
    color: var(--cs-navy);
    /* the main site's heading-bar padding (--space-md / --space-lg) */
    padding: 24px 32px;
    border-bottom: 3px dashed var(--cs-navy);
}

.block-header h1 {
    font-family: var(--cs-font-heading);
    font-weight: var(--cs-font-heading-weight);
    font-size: 26px;
    letter-spacing: 0.02em;
    color: var(--cs-navy);
    padding-top: 0;
}

.block-header a {
    color: var(--cs-navy);
}

.block-sub-header {
    font-family: var(--cs-font-body);
    color: var(--cs-navy);
}

/* Links inside welcome/info copy (e.g. the branch phone number on the
   member home page) use the brand link blue — the markup carries an inline
   colour, so !important is required. */
.no-loans a {
    color: var(--cs-link) !important;
}

/* All brand-blue text links underline on mouseover */
.no-loans a:hover,
.login-help a:hover,
.block-base-content a:hover,
.block-header a:hover {
    text-decoration: underline;
}

/* ---------- Info / error / success notes: clean brand panels ---------- */
.info-note {
    background-color: #fff;
    background-image: none;
    border: 1px solid var(--cs-border-soft);
    border-radius: 8px;
    padding: 14px 18px;
    color: var(--cs-navy);
}

.login-form-info-text {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 0;
}

.important-note {
    background-color: #fdf0f7;
    background-image: none;
    border: 1px solid var(--cs-error);
    border-radius: 8px;
    padding: 14px 18px;
    color: var(--cs-error);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 13px;
}

/* Notes sitting directly in a block body (e.g. call-customer-support's
   "contact Customer Support" warning) get breathing room from the dashed
   divider above and the card edge below. */
.block-body .important-note,
.block-body .application-complete-note {
    margin: 44px 0;
}

.important-note a {
    color: var(--cs-error);
    font-weight: 700;
}

.application-complete-note {
    background-color: #f0fdf1;
    background-image: none;
    border: 1px solid var(--cs-valid);
    border-radius: 8px;
    padding: 14px 18px;
    color: var(--cs-navy);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 13px;
}

/* ---------- Block base strip ("Can't login?" helper bar) ---------- */
.block-base {
    background: var(--cs-mid-grey);
}

.block-base-content a {
    color: var(--cs-link);
}

/* ---------- Forms: site input recipe ---------- */
label {
    font-family: var(--cs-font-body);
    font-weight: var(--cs-font-body-weight);
    font-size: 15px;
    color: var(--cs-navy);
    margin-bottom: 4px;
}

.form-control {
    font-family: var(--cs-font-body);
    font-weight: var(--cs-font-body-weight);
    font-size: 15px;
    color: var(--cs-navy);
    background-color: #fff;
    border: 2px solid var(--cs-navy);
    border-radius: 8px;
    height: 48px;
    padding: 0 14px;
}

.form-control::placeholder {
    color: #8a8db0;
    font-weight: 400;
}

/* Textareas keep their room — the 48px height is for single-line fields */
textarea.form-control {
    height: auto;
    min-height: 130px;
    padding: 10px 14px;
}

/* Bare selects (e.g. the reset-username date-of-birth row carries no
   .form-control class) get the same input recipe. */
.block select {
    font-family: var(--cs-font-body);
    font-weight: var(--cs-font-body-weight);
    font-size: 15px;
    color: var(--cs-navy);
    background-color: #fff;
    border: 2px solid var(--cs-navy);
    border-radius: 8px;
    height: 42px;
    padding: 0 8px;
}

.block select:focus {
    background-color: var(--cs-input-focus);
    outline: none;
}

/* Focus: the main site's cyan tint, border stays navy */
.form-control:focus {
    background-color: var(--cs-input-focus);
    border-color: var(--cs-navy);
    box-shadow: none;
    color: var(--cs-navy);
}

/* ---------- Login / send-code buttons: the site CTA pill ---------- */
.login-button,
.login-button .button-text {
    font-family: var(--cs-font-button);
    font-weight: 400;
}

.login-button {
    background-color: var(--cs-red);
    color: #fff;
    border: 3px solid #fff;
    outline: 3px solid var(--cs-navy);
    border-radius: 999px;
    font-family: var(--cs-font-button);
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 0.03em;
    height: 56px;
    width: 210px;
    /* the site's chevron, drawn inline (replaces next-arrow.png) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: right 22px center;
    padding-right: 46px;
    padding-left: 16px;
    margin: 6px 0 14px; /* clearance so the outline isn't clipped */
    cursor: pointer;
}

/* The logged-in Contact Us page carries an inline width:37% and
   border-radius:10px on its submit button — !important restores the pill. */
#btnFormContactSubmit {
    width: 210px !important;
    border-radius: 999px !important;
}

.login-button:hover {
    background-color: var(--cs-red-hover);
    color: #fff;
}

.login-button:focus {
    outline: 3px solid var(--cs-navy);
}

/* ---------- Helper links + "OR" divider ---------- */
.login-help {
    font-size: 13px;
}

.login-help a {
    color: var(--cs-link);
}

.borderText {
    font-family: var(--cs-font-heading);
    font-weight: var(--cs-font-heading-weight);
    color: var(--cs-navy);
    font-size: 16px;
}

.verticaLine .vr {
    border-left: 2px dashed var(--cs-navy);
    background: none;
}

.horizontal-divider hr {
    /* the base skin paints hr as a filled bar (with !important on the
       colour), so !important is needed to repaint it dashed navy */
    border: none;
    border-top: 2px dashed var(--cs-navy) !important;
    height: 0;
    background: none;
}

/* ---------- Mobile: side margins + the site's thinner card border ----------
   The main website's cards keep a margin from the screen edge on mobile and
   drop to the 2px --border-width; the base skin ran blocks full-bleed. */
@media (max-width: 767px) {
    .block,
    .mobile-responsive .block {
        width: calc(100% - 24px);
        margin-left: auto;
        margin-right: auto;
        border-width: 2px;
    }

    .block-header {
        padding: 16px 24px;
        border-bottom-width: 2px;
    }

}

/* ---------- Stacked layout (576-767px): keep each note with its form ----------
   The base skin shows the side-by-side notes row here while the "OR"
   divider is already horizontal, stranding the "Existing customer..." text
   far above its form. Hide the top row and reveal the per-column notes
   instead, so that text sits under the OR divider next to its own form. */
@media (min-width: 576px) and (max-width: 767px) {
    #block-form > .row.tablet-responsive {
        display: none;
    }

    .block-body .info-note.mobile-responsive {
        display: block;
    }
}

/* ---------- Logged-in dashboard (home / loans history / details) ---------- */
/* The base skin paints the #product-cards region white, hiding the
   block's brand light-grey body — let it show through. */
#product-cards {
    background-color: transparent;
}

/* Application/loan cards inside #product-cards. The base skin fixes cards
   at 350px wide with a 600px min-height (button pinned to the bottom of the
   void by an inline position:absolute) — let them fill their column and
   size to content instead. */
#product-cards .card,
#product-cards .card-small {
    border: none;   /* the block frame already contains it */
    border-radius: 16px;
    background: transparent;
    box-shadow: none;
    width: 100%;
    min-height: 0;
    float: none;
    margin: 8px 0;
    position: relative;
}

/* A single application card takes the full block width */
#product-cards .row > div:only-child {
    flex: 0 0 100%;
    max-width: 100%;
}

/* The action bar carries an inline position:absolute (for the old fixed-
   height card) — return it to normal flow. !important is required to beat
   the inline style. */
#product-cards .card [style*="position: absolute"] {
    position: static !important;
}

/* The base card-body also carries a 400px min-height, which left ~100px of
   empty space under the application details. Size it to its content. */
#product-cards .card .card-body {
    min-height: 0;
    padding-bottom: 8px;
}

/* Detail rows as a tidy centred ledger: labels right-aligned against their
   bold values, tight rhythm, capped width however wide the card runs. */
#product-cards .card form {
    max-width: 440px;
    /* the form's own Bootstrap ml-2 sets margin-left !important — beat it
       so the ledger truly centres */
    margin: 0 auto 10px !important;
}

#product-cards .card .form-group.row {
    margin-bottom: 0;
}

#product-cards .card .col-form-label {
    text-align: right;
    padding-right: 18px;
}

#product-cards .card .form-control-plaintext {
    font-weight: 700;
}

/* The in-card brand logo is redundant — the page header carries the brand. */
#product-cards .card .logo {
    display: none;
}

#product-cards .col-form-label {
    color: var(--cs-navy);
    font-weight: var(--cs-font-body-weight);
}

.form-control-plaintext,
label.form-control-plaintext {
    font-family: var(--cs-font-body);
    color: var(--cs-navy);
}

/* Personal-details ledgers: labels in the brand heading font so label and
   value read as clearly different things. */
.personal-details-block .col-form-label {
    font-family: var(--cs-font-heading), 'Segoe UI', sans-serif;
    font-weight: var(--cs-font-heading-weight);
    font-size: 14px;
}

.bold {
    font-weight: 700;
}

/* In-card action CTA + the "you may be eligible" pills: site CTA recipe */
.card-button-red,
.eligible-button-red {
    display: inline-block;
    background-color: var(--cs-red);
    background-image: none;
    color: #fff;
    border: 3px solid #fff;
    outline: 3px solid var(--cs-navy);
    border-radius: 999px;
    font-family: var(--cs-font-button);
    font-weight: 400;
    font-size: 17px;
    letter-spacing: 0.03em;
    padding: 8px 22px;
    margin: 6px;
    line-height: 1.4;
}

.card-button-red:hover,
.eligible-button-red:hover {
    background-color: var(--cs-red-hover);
    color: #fff;
    text-decoration: none;
}

/* Dashboard "Apply Now" product cards (Cash Loans / Personal Loans). Self-
   contained so they hold the brand look whether or not the application-card
   rules above are deployed: navy-framed cards with a dark heading band, navy
   ticks and the site CTA pill. Base skin: fixed 350px floated cards, red
   #ff0030 title bar, limegreen ticks, square navy button. */
.info-note-block #product-cards:has(> .card-small) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    float: none;
    margin: 0;
    padding: 24px 16px 8px;
    background-color: transparent;
}

.info-note-block #product-cards:has(> .card-small) > :not(.card-small) {
    flex: 0 0 100%;
    padding: 0;
}

/* empty float-clearers: in a flex row they only add gap-sized space */
.info-note-block #product-cards:has(> .card-small) > .clear-all {
    display: none;
}

.info-note-block #product-cards:has(> .card-small) {
    row-gap: 20px;
    padding-top: 0;
}

.info-note-block #product-cards .card-small {
    flex: 0 1 340px;
    width: auto;
    min-height: 0;
    float: none;
    margin: 0;
    display: flex;
    background-color: #fff;
    border: 3px solid var(--cs-navy);
    border-radius: 16px;
    box-shadow: none;
    overflow: hidden; /* the title band hugs the rounded corners */
}

.info-note-block #product-cards .card-small .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0 0 22px;
}

.info-note-block #product-cards .card-small .card-title {
    display: block !important; /* the first card's title carries hideOnMobile */
    align-self: stretch;
    margin: 0 0 16px;
    padding: 14px 16px;
    background-color: var(--cs-navy);
    border: 0;
    border-radius: 0;
    color: #fff;
    font-family: var(--cs-font-heading);
    font-weight: var(--cs-font-heading-weight);
    font-size: 20px;
    line-height: 1.3;
}

.info-note-block #product-cards .card-small .card-img-top {
    width: auto;
    max-width: 200px;
    max-height: 120px;
    margin: 0 auto 8px !important;
}

/* Swap the greyscale cash photos for the main site's branded icons
   (cash-loans / personal-loans, 90px like the site's icon cards). The
   photo is hidden and the icon painted on its wrapper, matched by the
   photo's file name; if :has() is unsupported the photo simply shows. */
.info-note-block #product-cards .card-small .text-center:has(> img[src*="fast-cash"]),
.info-note-block #product-cards .card-small .text-center:has(> img[src$="/cash.png"]) {
    width: 90px;
    height: 90px;
    margin: 4px auto 14px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.info-note-block #product-cards .card-small .text-center:has(> img[src*="fast-cash"]) {
    background-image: url("../../../images/cs/cash-loans.svg");
}

.info-note-block #product-cards .card-small .text-center:has(> img[src$="/cash.png"]) {
    background-image: url("../../../images/cs/personal-loans.svg");
}

.info-note-block #product-cards .card-small .text-center:has(> img[src*="fast-cash"]) > img,
.info-note-block #product-cards .card-small .text-center:has(> img[src$="/cash.png"]) > img {
    display: none;
}

.info-note-block #product-cards .card-small ul.card-list {
    margin: 4px auto 18px;
    padding: 0;
}

.info-note-block #product-cards .card-small li.card-list {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 0 10px;
}

/* tick in a navy roundel, like the site's check lists */
.info-note-block #product-cards .card-small .iconCheckmarkLg {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    padding: 5px;
    border-radius: 50%;
    background-color: var(--cs-navy);
}

.info-note-block #product-cards .card-small .iconCheckmarkLg * {
    fill: #fff;
}

.info-note-block #product-cards .card-small li.card-list span {
    padding-left: 0;
    font-family: var(--cs-font-body);
    font-weight: var(--cs-font-body-weight);
    font-size: 17px;
    line-height: 1.3;
    color: var(--cs-navy);
}

/* Apply Now: the site CTA pill with the inline chevron */
.info-note-block #product-cards .card-small .card-button {
    display: inline-block;
    width: auto;
    min-width: 200px;
    margin: 6px auto 0;
    padding: 0 48px 0 24px;
    line-height: 50px;
    background-color: var(--cs-red);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 22px 22px;
    background-position: right 18px center;
    color: #fff;
    border: 3px solid #fff;
    outline: 3px solid var(--cs-navy);
    border-radius: 999px;
    box-shadow: none;
    font-family: var(--cs-font-button);
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 0.03em;
    text-align: center;
}

.info-note-block #product-cards .card-small .card-button:hover {
    background-color: var(--cs-red-hover);
    color: #fff;
}

/* Loans-history table: the main site's costs-chart striping */
.personalLoansTable {
    border-collapse: separate;
    border-spacing: 0;
}

.personalLoansTable thead th {
    font-family: var(--cs-font-heading), 'Segoe UI', sans-serif;
    font-weight: var(--cs-font-heading-weight);
    font-size: 15px;
    background: var(--cs-mid-grey);
    padding: 10px 14px;
    border: none;
}

.personalLoansTable thead th:first-child {
    border-radius: 12px 0 0 12px;
}

.personalLoansTable thead th:last-child {
    border-radius: 0 12px 12px 0;
}

.personalLoansTable td {
    border: none;
    padding: 10px 14px;
}

.personalLoansTable tbody tr:nth-child(even) td {
    background: #fff;
}

.personalLoansTable tbody tr:nth-child(even) td:first-child {
    border-radius: 12px 0 0 12px;
}

.personalLoansTable tbody tr:nth-child(even) td:last-child {
    border-radius: 0 12px 12px 0;
}

/* Current Loans (member home): each loan is its own white, navy-framed
   panel. Transparent cards let two loans run together, especially stacked
   on phones. Scoped by the Make a Payment link (.card-button) so
   in-progress application cards (.card-button-red) keep their look. */
#product-cards .card:not(.card-small):has(.card-button) {
    background-color: #fff;
    border: 2px solid var(--cs-navy);
    margin: 10px 0;
}

#product-cards .card:not(.card-small):has(.card-button) .card-body {
    padding: 22px 16px 18px;
}

/* Inset the panels from the block frame by the same 20px they have above
   and below (12px on phones), instead of sitting against its border. */
#product-cards .row:has(> div > .card .card-button) {
    margin-left: 5px;
    margin-right: 5px;
}

@media (max-width: 767px) {
    #product-cards .row:has(> div > .card .card-button) {
        margin-left: -3px;
        margin-right: -3px;
    }
}

/* Small phones: the values are short, so labels take more of the row and
   "Next payment amount:" stays on one line (it wrapped at 360px). */
@media (max-width: 575px) {
    #product-cards .card:not(.card-small):has(.card-button) .col-form-label {
        flex: 0 0 58%;
        max-width: 58%;
        padding-right: 12px;
        white-space: nowrap;
    }

    #product-cards .card:not(.card-small):has(.card-button) .col-form-label + div {
        flex: 0 0 42%;
        max-width: 42%;
        padding-left: 12px;
    }
}

/* Make a Payment: the site CTA pill with the inline chevron, in navy so
   the red pill stays reserved for Apply Now. Base skin: square navy
   button with a grey drop shadow. */
#product-cards .card:not(.card-small) .card-button {
    display: inline-block;
    width: auto;
    min-width: 200px;
    margin: 12px auto 4px; /* clearance so the outline isn't clipped */
    padding: 0 48px 0 24px;
    line-height: 50px;
    background-color: var(--cs-navy);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 22px 22px;
    background-position: right 18px center;
    color: #fff;
    border: 3px solid #fff;
    outline: 3px solid var(--cs-navy);
    border-radius: 999px;
    box-shadow: none;
    font-family: var(--cs-font-button);
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 0.03em;
    text-align: center;
}

#product-cards .card:not(.card-small) .card-button:hover {
    background-color: #23285e;
    color: #fff;
    text-decoration: none;
}

/* Loans History brand icon (table rows + phone cards): the old pixelated
   "Cash STOP" logo.gif is swapped for the site's stop-sign favicon, smaller.
   The padding pushes the gif out of its content box and the icon is painted
   as the background - no markup change. Matched by the gif's path, so other
   brands' logos are untouched. */
img.member-area-brand-logo[src*="/cs/logo"],
img.member-area-loan-cart-logo[src*="/cs/logo"] {
    box-sizing: border-box;
    width: 28px !important; /* base main.css forces 50px !important on phones */
    height: 28px;
    padding: 28px 0 0;
    background: url("../../../images/cs/favicon.svg") no-repeat center / contain;
}

/* Loans History on phones: one card per loan (the table's mobile twin).
   The label column was 5/12 of a narrow card, so "Applied Amount:" and
   "Current Balance:" wrapped onto two lines. Give labels half the row on
   one line, with the value column taking the rest. */
@media (max-width: 767px) {
    .block:has(.member-area-loan-cart-logo) .col-form-label {
        flex: 0 0 55%;
        max-width: 55%;
        padding-right: 6px;
        white-space: nowrap;
    }

    .block:has(.member-area-loan-cart-logo) .col-form-label + div {
        flex: 0 0 45%;
        max-width: 45%;
        padding-left: 6px;
    }
}

/* Below 360px (e.g. iPhone SE 1st gen) one line can't fit — let the
   longest labels wrap rather than clip. */
@media (max-width: 359px) {
    #product-cards .card:not(.card-small):has(.card-button) .col-form-label,
    .block:has(.member-area-loan-cart-logo) .col-form-label {
        white-space: normal;
    }

    /* back to the base 5/7 split so the Loan ID clears the brand logo */
    .block:has(.member-area-loan-cart-logo) .col-form-label {
        flex: 0 0 41.667%;
        max-width: 41.667%;
    }

    .block:has(.member-area-loan-cart-logo) .col-form-label + div {
        flex: 0 0 58.333%;
        max-width: 58.333%;
    }

    /* keep "Make a Payment" on one line inside the pill */
    #product-cards .card:not(.card-small) .card-button {
        font-size: 17px;
        padding: 0 40px 0 18px;
        background-position: right 14px center;
        white-space: nowrap;
    }
}

/* ---------- Footer: navy band like the site footer ---------- */
/* The base skin fixes the footer at 100px, which its content overflows —
   size it to its content instead. The footer itself is the navy band,
   running the full page width with square corners; the inner
   .footer-contact row goes transparent so nothing rounds or indents it. */
footer {
    height: auto;
    min-height: 0;
    background-color: var(--cs-navy);
    padding: 10px 0 6px;
}

.footer-contact {
    font-family: var(--cs-font-body);
    font-weight: var(--cs-font-body-weight);
    background-color: transparent;
    color: #fff;
    border-radius: 0;
    padding: 12px 24px;
    margin-bottom: 0;
}

/* footer a:link in the base skin carries pseudo-class specificity, so
   match it here rather than fighting it with ids. */
footer a,
footer a:link,
footer a:visited,
.footer-contact a,
.footer-link-holder a,
footer #phone a,
footer #contact-number a {
    color: #fff;
}

.footer-contact,
.footer-contact span {
    color: #fff;
}

footer a:hover,
.footer-contact a:hover,
footer #phone a:hover {
    color: #fff;
    text-decoration: underline;
}

footer a {
    font-family: var(--cs-font-body);
    font-weight: var(--cs-font-body-weight);
}

/* The old phone icon is white-on-blue art; the navy band suits it as-is. */
.call-icon {
    width: 20px;
    height: auto;
}

footer .col-12.text-center p {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 11px;
    color: #fff;
    margin: 0 0 8px;
}