/* ============================================
   Bootstrap 5 Migration Updates
   Custom styles for Bootstrap 5 compatibility
   ============================================ */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    --navy-blue: #173b4a;
    --navy-blue-hover: #19708d;
    --navy-blue-dark: #0f2a34;
    --link-hover: #005f86;
    --border-light: #ccc;
    --border-dark: #000;
}

/* ============================================
   FONT FACE DECLARATIONS
   ============================================ */
@font-face {
    font-family: 'arimobold';
    src: url('../fonts/arimo/arimo-bold-webfont.eot');
    src: url('../fonts/arimo/arimo-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/arimo/arimo-bold-webfont.woff2') format('woff2'), url('../fonts/arimo/arimo-bold-webfont.woff') format('woff'), url('../fonts/arimo/arimo-bold-webfont.ttf') format('truetype'), url('../fonts/arimo/arimo-bold-webfont.svg#arimobold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Poppins Font Family */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

/* Roboto Font Family */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'arimoitalic';
    src: url('../fonts/arimo/arimo-italic-webfont.eot');
    src: url('../fonts/arimo/arimo-italic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/arimo/arimo-italic-webfont.woff2') format('woff2'), url('../fonts/arimo/arimo-italic-webfont.woff') format('woff'), url('../fonts/arimo/arimo-italic-webfont.ttf') format('truetype'), url('../fonts/arimo/arimo-italic-webfont.svg#arimoitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'arimoregular';
    src: url('../fonts/arimo/arimo-regular-webfont.eot');
    src: url('../fonts/arimo/arimo-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/arimo/arimo-regular-webfont.woff2') format('woff2'), url('../fonts/arimo/arimo-regular-webfont.woff') format('woff'), url('../fonts/arimo/arimo-regular-webfont.ttf') format('truetype'), url('../fonts/arimo/arimo-regular-webfont.svg#arimoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'arimo';
    src: url('../fonts/arimo/arimo-regular-webfont.eot');
    src: url('../fonts/arimo/arimo-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/arimo/arimo-regular-webfont.woff2') format('woff2'), url('../fonts/arimo/arimo-regular-webfont.woff') format('woff'), url('../fonts/arimo/arimo-regular-webfont.ttf') format('truetype'), url('../fonts/arimo/arimo-regular-webfont.svg#arimoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ============================================
   CSS VARIABLES - Color Palette
   ============================================ */
:root {
    /* Grayscale */
    --color-off-white: #e7e7e7;
    --color-grey: #4e4e4e;
    --color-light-grey: #ecf0f1;
    --color-dark-grey: #32323a;
    /* Blues */
    --color-dark-blue: var(--link-hover);
    --color-med-blue: var(--navy-blue-hover);
    --color-light-blue: #2aa0bd;
    --color-navy-blue: var(--navy-blue);
    --color-navy-blue-hover: #0d2530;
    /* Greens */
    --color-green: #8daa35;
    --color-green-hover: #526615;
    /* Oranges & Reds */
    --color-light-orange: #f79f24;
    --color-light-orange-hover: #EB8A07;
    --color-orange: #f55d2b;
    --color-red: #c90d0d;
    /* Fonts */
    --font-arimo: "arimoregular", sans-serif;
    --font-arimo-bold: "arimobold", sans-serif;
    --font-arimo-italic: "arimoitalic", sans-serif;
}

/* ============================================
   CONTAINER WIDTHS (from original Bootstrap 3 customization)
   ============================================ */
@media (min-width: 768px) {
    .container {
        max-width: 750px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 970px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1170px;
    }
}

/* ============================================
   DEFAULT FONTS (from original Bootstrap customization)
   ============================================ */
html {
    font-family: var(--font-arimo);
}

body {
    font-family: var(--font-arimo);
}

/* ============================================
   FORM CONTROLS - Remove Bootstrap 5 rounded corners
   ============================================ */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    border-radius: 0 !important;
}

/* ============================================
   DEFAULT LINK COLORS
   ============================================ */
a {
    color: var(--color-navy-blue);
}

    a:hover,
    a:focus {
        color: var(--color-green);
    }

/* Navigation tabs - no hover color change */
.account-tabs a:hover,
.account-tabs a:focus {
    color: inherit;
}

/* ============================================
   HEADING STYLES (from original Bootstrap 3 customization)
   ============================================ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-arimo-bold) !important;
    color: inherit;
    line-height: 1.1;
    font-weight: normal;
}

    h1 small, h2 small, h3 small, h4 small, h5 small, h6 small,
    .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small,
    h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small,
    .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small {
        font-weight: normal;
        line-height: 1;
        color: #777777;
    }

h1, .h1,
h2, .h2,
h3, .h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

    h1 small, .h1 small,
    h2 small, .h2 small,
    h3 small, .h3 small,
    h1 .small, .h1 .small,
    h2 .small, .h2 .small,
    h3 .small, .h3 .small {
        font-size: 65%;
    }

h4, .h4,
h5, .h5,
h6, .h6 {
    margin-top: 10px;
    margin-bottom: 10px;
}

    h4 small, .h4 small,
    h5 small, .h5 small,
    h6 small, .h6 small,
    h4 .small, .h4 .small,
    h5 .small, .h5 .small,
    h6 .small, .h6 .small {
        font-size: 75%;
    }

h1, .h1 {
    font-size: 28px;
    color: var(--color-navy-blue);
    text-transform: uppercase;
}

h2, .h2 {
    font-size: 24px;
    text-transform: uppercase;
}

h3, .h3 {
    font-size: 16px;
    text-transform: uppercase;
}

h4, .h4 {
    font-size: 14px;
}

h5, .h5 {
    font-size: 12px;
}

h6, .h6 {
    font-size: 11px;
}

.special-header {
    border-bottom: 2px solid #e1e1e1;
    font-size: 1.13em;
    text-transform: uppercase;
}

.special-label {
    font-size: 1.2em;
    text-transform: uppercase;
    color: #173b4a;
    font-family: "arimobold", sans-serif;
    margin-top: 15px;
}

p {
    margin: 0 0 10px;
}
/* ============================================
   BUTTON STYLES - Primary Color Palette
   ============================================ */
/* Green Button (Primary) */
.btn-primary {
    background-color: var(--color-green) !important;
    border-color: var(--color-green) !important;
    color: #ffffff !important;
    font-family: var(--font-arimo-bold);
    text-transform: uppercase;
    font-weight: bold;
    padding: 4px 12px 2px !important;
    border-radius: 0px 0px 8px 8px !important;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        background-color: var(--color-green-hover) !important;
        border-color: var(--color-green-hover) !important;
        color: #ffffff !important;
    }
/* Orange Button (Secondary) */
.btn-secondary {
    background-color: var(--color-light-orange) !important;
    border-color: var(--color-light-orange) !important;
    color: #ffffff !important;
    font-family: var(--font-arimo-bold);
    text-transform: uppercase;
    font-weight: bold;
    padding: 4px 12px 2px !important;
    border-radius: 0px 0px 8px 8px !important;
}

    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-secondary:active {
        background-color: var(--color-light-orange-hover) !important;
        border-color: var(--color-light-orange-hover) !important;
        color: #ffffff !important;
    }
/* Navy Blue Button */
.btn-navy-blue {
    background-color: var(--color-navy-blue) !important;
    border-color: var(--color-navy-blue) !important;
    color: #ffffff !important;
    font-family: var(--font-arimo-bold);
    text-transform: uppercase;
    font-weight: bold;
}

    .btn-navy-blue:hover,
    .btn-navy-blue:focus,
    .btn-navy-blue:active {
        background-color: var(--color-navy-blue-hover) !important;
        border-color: var(--color-navy-blue-hover) !important;
        color: #ffffff !important;
    }
/* Large text button variant */
.btn-lg-text {
    font-size: 1.62em !important;
}
/* ============================================
   ACCOUNT HEADER
   ============================================ */
.header-wrapper .nav-pills ul > li.active > a, .header-wrapper .nav-pills ul > li.active > a:hover, .header-wrapper .nav-pills ul > li.active > a:focus {
    background-color: var(--color-green);
}
#account-heading-bar {
    background: var(--color-dark-grey);
    padding: 5px 15px 3px 15px;
    margin-bottom: 15px;

    .row .col-md-9:nth-child(2) {
        padding-top: 10px;
    }

    span, a {
        color: #fff;
    }

    .select2 span {
        color: black;
        text-align: left;
    }

    select.form-control {
        width: 70% !important;


        span {
            color: #000;
            text-align: left;
        }
    }

    a {
        text-decoration: none;
        margin-right: 17px;
    }
}

#account-heading-name {
    font-size: 2em;
    line-height: 1.9em;


    &:before {
        content: '';
        background: url('/Content/img/profile.png') no-repeat;
        display: inline-block;
        height: 40px;
        width: 40px;
        vertical-align: middle;
        margin-right: 10px;
    }
}

#account-heading-link {
    margin-left: 10px;
}

#select-account {
    display: inline-flex !important;
    width: auto !important;
    text-align: right;
}
    /* Account Header - Dropdown Width */
    #account-heading-bar select.form-control,
    #select-account .form-control,
    #select-account select {
        width: auto !important;
        min-width: 200px;
        padding-right: 30px !important;
    }
    /* Prevent "Select Account" label from wrapping */
    #select-account label {
        white-space: nowrap;
    }
/* Test Account Badge */
.test-account-badge {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 8px;
    background: var(--navy-blue);
    border: 1px solid #ffc107;
    border-radius: 3px;
    font-size: 11px;
    color: #856404;
    font-weight: bold;
}
/* ============================================
   PROGRESS BAR - Account Summary
   ============================================ */
/* Make progress bar much taller - ONLY for account summary page */
.page-account-summary .progress {
    height: 120px !important;
    background-color: #e9ecef;
    border-radius: 0.25rem;
}

.progress-bar-success {
    background-color: var(--color-green) !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
}
    /* Progress bar text styling */
    .progress-bar-success .summary-header {
        font-size: 3.13em !important;
        font-family: var(--font-arimo-bold) !important;
        line-height: 1em !important;
        color: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .progress-bar-success .bold {
        font-family: var(--font-arimo-bold) !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        color: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        font-size: 1em !important;
    }
/* For half-sized progress bars */
.progress.half {
    height: 120px !important;
}

/* ============================================
   GLOBAL WRAPPERS
   ============================================ */
.page-sign-in #content-wrapper-inner > .container > .row {
    padding-left: 15px;
    padding-right: 15px;
}

#content-wrapper-inner > .container > .row {
    background: var(--color-light-grey);
    padding-bottom: 20px;
    padding-top: 1px;
    margin-left: 0;
    margin-right: 0;
}

.white-wrapper {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 1px 15px 10px;
}

.payoff-content, #payoff-info {
    padding: 1px 15px 10px;

    h2 {
        color: #76777a;
        margin-top: 0;
    }

    hr {
        border-color: #76797b;
    }
}

#payoff-info {
    .bottom {
        .text-left, .text-right {
            font-size: 1.35em;
            font-weight: normal;
        }
    }

    .top {
        .text-left, .text-right {
            font-size: 1.21em;
            font-weight: normal;
            text-transform: capitalize;
        }
    }
}

.payoff-content p {
    font-size: 14px;

    span.leftalign {
        text-align: left;
        float: left;
        font-weight: bold;
    }

    span.rightalign {
        width: 70%;
        float: right;
        text-align: left;
    }
}

.altpadd {
    margin-top: 10px;
    padding: 6px 10px !important;
}



/* ============================================
   PAYMENT HISTORY PAGE
   ============================================ */
/* Clearfix utility (removed in Bootstrap 5) */
.clearfix::after {
    display: block;
    clear: both;
    content: "";
}

.page-payment-history h1 {
    text-transform: uppercase;
}
/* Chart container */
.chart {
    display: block;
    width: 100%;
}
/* Force hide mobile labels on desktop */
@media (min-width: 768px) {
    .chart-row .d-block.d-md-none {
        display: none !important;
    }
}
/* Chart header row - gray background */
@media (min-width: 768px) {
    .chart .d-none.d-md-block {
        display: block !important;
        background-color: var(--color-light-grey) !important;
        padding: 10px 0 !important;
        margin-bottom: 5px !important;
    }

        .chart .d-none.d-md-block .row {
            background-color: var(--color-light-grey) !important;
        }
}
/* Chart data rows - white background with spacing */
.chart .chart-row {
    background-color: #fff !important;
    padding: 10px 0 !important;
    margin-bottom: 2px !important;
}

    .chart .chart-row .row {
        background-color: #fff !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Remove default alternating backgrounds */
    .chart .chart-row:nth-child(even),
    .chart .chart-row:nth-child(odd) {
        background-color: #fff !important;
    }
/* Payment info boxes at bottom - smaller and left-aligned */
.page-payment-history .orange-border,
.page-payment-history .black-border {
    padding: 15px !important;
}
/* Payment info label and value styles (from layout.less) */
.payment-info-label {
    font-family: var(--font-arimo-bold);
    font-size: 1.13em;
}

.payment-info-value {
    float: right;
    font-size: 1.13em;
}
/* ============================================
   COMMS CENTER PAGE
   ============================================ */
.comms-center-content {
    margin-top: 1em;
    color: #000000;
}

.custom-bullets {
    list-style-type: square;
    margin-top: 0.75em;
    margin-bottom: 1em;
    padding-left: 1.5rem;
    font-size: 1rem;
}

    .custom-bullets li {
        color: black;
        margin-bottom: 1em;
        line-height: 1.5;
    }

        .custom-bullets li::marker {
            color: var(--color-green);
        }

        /* Sub-text paragraph inside each list item */
        .custom-bullets li p {
            margin-top: 0.25rem;
            margin-bottom: 0;
            font-size: 0.9rem;
            color: #444;
        }

.comms-center-content a {
    color: #0000EE;
    text-decoration: underline;
}

    .comms-center-content a:hover {
        color: #551A8B;
    }
/* ============================================
   SELLER INFO PAGE
   ============================================ */
.page-seller-info h1 {
    text-transform: uppercase;
}
/* ============================================
   LOGIN / REGISTER PAGE
   ============================================ */
.page-sign-in h1 {
    text-transform: uppercase;
    background-color: var(--color-light-grey);
    padding: 20px;
    margin: 0 0 0 0;
}
/* Register section */
#account-register {
    background-color: #fff;
    padding: 20px;
}

    #account-register h2 {
        margin-top: 0;
        margin-bottom: 15px;
    }

    #account-register label {
        font-size: 16px;
        margin-bottom: 5px;
        display: block;
        font-weight: normal;
    }
/* Register description (info text) */
#register-description {
    padding: 20px;
    position: relative;
}

    #register-description::before {
        content: "";
        position: absolute;
        left: 0;
        top: 20px;
        bottom: 20px;
        width: 4px;
        background-color: #EEEEEE;
    }
/* Sign In section - navy blue box */
#account-sign-in {
    background-color: var(--color-navy-blue);
    padding: 1px 15px 10px;
    border-radius: 8px;
}

    #account-sign-in label {
        color: #fff;
        font-size: 16px;
        margin-bottom: 5px;
        display: block;
        font-weight: normal;
    }
/* Forget login links */
#forget-log-in {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
}

    #forget-log-in a {
        font-size: 1.0em;
    }
/* ============================================
   PASSWORD RESET PAGE
   ============================================ */
.page-forgot-password h1,
.page-forgot-user h1 {
    text-transform: uppercase;
    background-color: var(--color-light-grey);
    padding: 20px;
    margin: 0;
}

.page-password-confirm h1 {
    font-size: 28px;
    text-transform: uppercase;
    background-color: var(--color-light-grey);
    margin-top: 20px;
    margin-bottom: 10px;
}
/* White wrapper for content */
.white-wrapper {
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 1px 15px 10px;
}
/* Add margin-top only for password/username pages, not sign-in page */
.page-forgot-password .white-wrapper,
.page-forgot-user .white-wrapper,
.page-password-confirm .white-wrapper {
    margin-top: 20px;
}

    .page-forgot-password .white-wrapper h2,
    .page-forgot-user .white-wrapper h2,
    .page-password-confirm .white-wrapper h2 {
        margin-top: 20px;
        margin-bottom: 10px;
    }
/* Password confirmation page - help text */
.page-password-confirm .helper-text {
    font-size: 0.63em;
    margin-top: 5px;
    margin-bottom: 8px;
}
/* Password confirmation page - password strength progress bar */
.page-password-confirm .password-progress,
.page-password-confirm .progress {
    height: 30px !important;
    margin-top: 5px;
    margin-bottom: 0;
    background-color: #e9ecef;
    border-radius: 4px;
}
/* Password confirmation page - progress bar colors (red -> orange -> green) */
.page-password-confirm .progress-bar-danger {
    background-color: var(--color-red) !important;
}

.page-password-confirm .progress-bar-warning {
    background-color: var(--color-light-orange) !important;
}

.page-password-confirm .progress-bar-success {
    background-color: var(--color-green) !important;
}
/* Password confirmation page - validation messages left aligned */
.page-password-confirm .invalid-feedback {
    text-align: left;
    margin-top: 5px;
}
/* Password confirmation page - submit button alignment */
.page-password-confirm .password-confirm-submit .btn {
    margin-top: 9px;
}
/* Body text in password reset and username reminder pages */
.page-forgot-password .white-wrapper p,
.page-forgot-user .white-wrapper p {
    line-height: 1.4;
    margin-bottom: 10px;
}
/* "FORGET YOUR PASSWORD?" and "FORGET YOUR USERNAME?" headings - should use normal weight, not bold */
.page-forgot-password .white-wrapper h3,
.page-forgot-user .white-wrapper h3 {
    font-family: var(--font-arimo) !important;
    font-weight: normal !important;
}
/* Form styling */
.page-forgot-password .form-label {
    font-weight: normal;
    margin-bottom: 5px;
}

.page-forgot-password .form-control {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

    .page-forgot-password .form-control:focus {
        border-color: var(--color-green);
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(141, 170, 53, 0.25);
    }
/* Validation messages */
.page-forgot-password .invalid-feedback {
    color: var(--color-red);
    font-size: 0.875em;
    margin-top: 0.25rem;
}

.page-forgot-password .alert-danger {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 12px;
    border-radius: 4px;
    margin-top: 15px;
}

.page-sign-in .alert-danger {
    background-color: #F55D2B;
    border: 1px solid #F55D2B;
    color: #ffffff;
    font-size: .9em;
    text-align: center;
    margin-bottom: 10px;
    padding: 0;
    border-radius: 0;
}

    .page-sign-in .alert-danger ul {
        list-style: none;
        padding-left: 0;
        margin-bottom: 0;
    }

        .page-sign-in .alert-danger ul li {
            color: #fff;
            padding: 0 10px;
        }

            .page-sign-in .alert-danger ul li:first-of-type {
                padding-top: 10px;
            }

            .page-sign-in .alert-danger ul li:last-of-type {
                padding-bottom: 10px;
            }
/* Registration page form spacing */
.page-register .form-group {
    margin-bottom: 10px;
}
/* Registration page checkbox styling */
.page-register .checkbox label {
    font-size: 0.75em !important;
    min-height: 20px;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
}

.page-register .checkbox {
    margin-bottom: 15px;
}
/* Registration page password strength bar */
.page-register .progress {
    height: 30px;
    background-color: #f5f5f5;
    border-radius: 4px;
    margin-bottom: 10px;
}

.page-register .progress-bar {
    transition: width 0.6s ease;
}
/* Password strength colors for registration */
.page-register .password-progress .progress-bar-danger {
    background-color: #d9534f;
}

.page-register .password-progress .progress-bar-warning {
    background-color: var(--color-light-orange);
}

.page-register .password-progress .progress-bar-success {
    background-color: var(--color-green);
}
/* ============================================
   SCHEDULED PAYMENTS PAGE
   ============================================ */

.page-scheduled-payments #paymentsTable tbody tr:nth-child(odd) {
    background-color: #f5f5f5;
}

.page-scheduled-payments #paymentsTable tbody tr:nth-child(even) {
    background-color: #ffffff;
}

.page-scheduled-payments #paymentsTable tbody tr:hover {
    background-color: #e8e8e8;
}
/* Status color coding */
.page-scheduled-payments .status-active {
    color: #28a745;
    font-weight: 600;
}

.page-scheduled-payments .status-pending {
    color: #0056b3;
    font-weight: 600;
}

.page-scheduled-payments .status-cancelled {
    color: #6c757d;
    font-weight: 600;
    text-decoration: line-through;
}
/* Pagination styling */
.page-scheduled-payments .dataTables_paginate .page-link {
    color: var(--navy-blue);
    border-color: #dee2e6;
}

.page-scheduled-payments .dataTables_paginate .page-link:hover {
    color: var(--navy-blue-dark);
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.page-scheduled-payments .dataTables_paginate .page-item.active .page-link {
    background-color: var(--color-green);
    border-color: var(--color-green);
    color: #ffffff;
}

/* Delete button styling */
.page-scheduled-payments .delete-payment {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.875rem;
    cursor: pointer;
}

    .page-scheduled-payments .delete-payment:hover {
        background-color: #c82333;
    }
/* ============================================
   EDIT PROFILE PAGE
   ============================================ */

.page-edit-profile .profile-header {
    background-color: #f5f5f5;
    padding: 15px 0;
    margin-bottom: 20px;
}

.page-edit-profile .form-group {
    margin-bottom: 15px;
}

.page-edit-profile .special-header {
    margin-top: 20px;
    margin-bottom: 15px;
    font-weight: normal;
    font-size: 1.1em;
}

.page-edit-profile .row {
    margin-bottom: 0;
}
/* Checkbox styling for profile page */
.page-edit-profile .checkbox label {
    font-size: 0.75em !important;
    min-height: 20px;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
}

.page-edit-profile .checkbox {
    margin-bottom: 10px;
}
/* ============================================
   SITE FOOTER - NUKED WORDPRESS GARBAGE!
   ============================================ */

.site-footer {
    background-color: #173B4A;
    color: #ffffff;
    padding: 20px 0 0 0;
    margin-top: 50px;
    font-size: 17.6px;
    font-family: 'Poppins', sans-serif !important;
}

    .site-footer .footer-column {
        padding: 0;
    }

    .site-footer .footer-logo {
        max-width: 265px;
        margin-bottom: 25px;
    }

    .site-footer p {
        color: #ffffff;
        margin-bottom: 10px;
        line-height: 1.6;
    }

    .site-footer .footer-description {
        margin-bottom: 23px;
    }

    .site-footer .footer-social {
        line-height: 1.6;
        margin-bottom: 25px;
    }

    .site-footer .footer-links-group {
        margin-top: 0;
    }

    .site-footer .footer-international,
    .site-footer .footer-language {
        line-height: 1.5em;
        margin-bottom: 0;
        font-size: 0.9em;
    }

        .site-footer .footer-international strong,
        .site-footer .footer-language strong {
            font-weight: 700;
            font-family: 'Poppins', sans-serif !important;
        }

        .site-footer .footer-social a,
        .site-footer .footer-international a,
        .site-footer .footer-language a {
            line-height: 1.5em;
        }

    .site-footer a {
        color: #ffffff;
        text-decoration: none;
        font-size: 0.9em;
        font-weight: 400;
        line-height: 1.5em;
        font-family: 'Poppins', sans-serif !important;
    }

        .site-footer a:hover {
            color: #dddddd;
            text-decoration: none;
        }

    .site-footer h3 {
        color: #ffffff;
        font-family: 'Roboto', sans-serif;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 3px;
        line-height: 16.5px;
        text-transform: uppercase;
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .site-footer .footer-menu {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .site-footer .footer-menu li {
            margin-bottom: 2px;
        }

        .site-footer .footer-menu a {
            color: #ffffff;
            text-decoration: none;
            font-size: 0.8em;
            font-weight: 400;
            line-height: 2.0em;
            font-family: 'Poppins', sans-serif !important;
        }

    .site-footer .footer-copyright {
        background-color: #173B4A;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        padding: 0 0 20px 0;
        margin-top: 0;
        text-align: center;
    }

        .site-footer .footer-copyright p {
            margin: 0;
            font-size: 0.9em;
            font-weight: 400;
            font-family: 'Poppins', sans-serif !important;
        }

        .site-footer .footer-copyright a {
            color: #ffffff;
            text-decoration: underline;
        }
/* ============================================
   PAYMENT PAGES
   ============================================ */

.scheduled-payments-wrapper {
    margin-top: 0;
    text-align: right;
}

#view-scheduled-payments:hover {
    color: var(--link-hover) !important;
}
/* Flatpickr DatePicker Styles */
.kendo-date {
    display: block;
    margin-bottom: 30px;
}

.datepicker-wrapper {
    display: inline-block;
}

    .datepicker-wrapper label {
        color: #fff;
        background: var(--navy-blue);
        font-weight: bold;
        text-transform: uppercase;
        padding: 13px 5px;
        display: inline-block;
        margin-bottom: 0;
        margin-right: -4px;
        border-right: 1px solid #ccc;
    }

.kendo-date .flatpickr-wrapper {
    display: inline-flex;
    width: auto;
    align-items: center;
}

.kendo-date .flatpickr-input {
    width: 149px;
    height: 45px;
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    border-right: none !important;
    border-radius: 0 !important;
    padding: 10px;
    box-sizing: border-box;
    margin: 0;
    vertical-align: bottom;
}

.kendo-date .flatpickr-toggle {
    width: 35px;
    height: 45px;
    background: #fff;
    border: 1px solid #000;
    border-left: 1px solid #ccc;
    color: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    line-height: 45px;
    box-sizing: border-box;
    vertical-align: bottom;
}

    .kendo-date .flatpickr-toggle:hover {
        background: #f5f5f5;
    }

    .kendo-date .flatpickr-toggle:focus {
        outline: none;
        background: #fff;
    }

.kendo-date .flatpickr-input:focus {
    outline: none;
    background: #fff !important;
}

.kendo-date .flatpickr-input.active,
.kendo-date .flatpickr-wrapper.open .flatpickr-input {
    background: #fff !important;
}

.kendo-date .flatpickr-toggle i {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-size: 16px;
}
/* ============================================
   DAY PICKER TILE GRID (AutoPay)
   ============================================ */

.day-picker-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0 16px 0;
}

.day-picker-row {
    display: flex;
    gap: 6px;
}

.day-picker-tile {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-light, #ccc);
    border-radius: 4px;
    background: #ffffff;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    padding: 0;
    flex-shrink: 0;
}

    .day-picker-tile:hover {
        background: var(--navy-blue-hover, #19708d);
        color: #ffffff;
        border-color: var(--navy-blue-hover, #19708d);
    }

    .day-picker-tile.active {
        background: var(--navy-blue, #173b4a);
        color: #ffffff;
        border-color: var(--navy-blue, #173b4a);
        font-weight: 700;
    }
/* Flatpickr Calendar Colors - Navy Blue Theme */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--navy-blue) !important;
    border-color: var(--navy-blue) !important;
    color: #fff !important;
}

    .flatpickr-day.selected:hover,
    .flatpickr-day.startRange:hover,
    .flatpickr-day.endRange:hover {
        background: var(--navy-blue-hover) !important;
        border-color: var(--navy-blue-hover) !important;
    }

.flatpickr-day.today {
    border-color: var(--navy-blue) !important;
}
/* ============================================
   FORM INPUTS - City/State and Phone
   ============================================ */
/* Add dropdown arrow to all select elements */
select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    padding-right: 28px;
}
/* City and State on same line */
.city-state-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .city-state-row input[type="text"] {
        width: 200px;
        flex-shrink: 0;
    }

    .city-state-row .state-dropdown {
        width: 80px !important;
        flex-shrink: 0;
        font-size: 1em !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 12px;
        padding-right: 24px;
    }

    .city-state-row .select2-container {
        width: 80px !important;
        flex-shrink: 0;
    }

        .city-state-row .select2-container .select2-selection--single {
            padding: 4px 8px;
        }

        .city-state-row .select2-container .select2-selection__rendered {
            padding-left: 4px;
            padding-right: 4px;
        }
/* Phone number font size fix */
.phone-mask {
    font-size: 1em !important;
}
/* Account type label styling */
.account-type-label {
    font-family: "arimoregular", sans-serif;
    font-size: 1.47em;
    color: var(--navy-blue);
    padding: .2em .6em .3em 0;
    margin-left: -30px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

.flatpickr-day:hover {
    background: #e6f2f5;
    border-color: var(--navy-blue);
}
/* Other Amount Input */
.payment-model .special-input.dollar-amount input {
    max-width: 100%;
    min-height: 45px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.75);
    font-size: 1em;
    margin: 3px 0px;
}

.kendo-date .k-picker-wrap {
    background: var(--navy-blue) !important;
    border-radius: 0px !important;
    border: 0px !important;
    padding: 0px;
    line-height: 2.25em;
}

.kendo-date .k-datepicker {
    width: 17.4em;
}

.kendo-date .k-icon.k-i-calendar {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #fff;
}

.k-state-border-down .k-icon.k-i-calendar {
    transform: rotate(-180deg);
    transition: transform 150ms ease;
}

.kendo-date .k-picker-wrap .k-input {
    background: var(--navy-blue) !important;
    color: #fff !important;
    border: none;
}

.kendo-date .k-nav-prev {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid blue;
}

.kendo-date .k-nav-next .k-icon.k-i-arrow-e {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid green;
}

.date-text {
    font-size: .9em;
    margin-top: 10px;
}

.k-grid {
    .k-grid-content {
        min-height: 150px;
        overflow-y: visible;
    }

    .k-grid-header {
        padding-right: 0px !important;
    }

    &#InboxGrid {
        .k-grid-content {
            min-height: 0;
        }

        &, .k-grid-header, .k-header, .k-grid-header-wrap, tr td, .k-pager-wrap {
            border: 0;
        }

            .k-header span {
                .chart-heading;
            }
    }
}
/* ============================================
   DAY OF MONTH AUTOPAY TOGGLE BUTTON
   ============================================ */

#day-picker-toggle {
    border: 1px solid #173b4a;
    padding: 9px 10px 10px 45px;
    border-radius: 7px;
    background: #173b4a;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 10px;
}
/* Grand total row: side-by-side in Bootstrap 5 without requiring .row wrapper */
.grand-total {
    display: flex;
    align-items: center;
}

#day-picker-toggle:before {
    content: '';
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTguMDM1IiBoZWlnaHQ9IjExOC4zOCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogIDxkZWZzPgogICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMTE4LjAzNXYxMTguMzhIMHoiLz4KICA8L2RlZnM+CiAgPGNsaXBQYXRoIGlkPSJiIj4KICAgIDx1c2UgeGxpbms6aHJlZj0iI2EiIG92ZXJmbG93PSJ2aXNpYmxlIi8+CiAgPC9jbGlwUGF0aD4KICA8ZyBjbGlwLXBhdGg9InVybCgjYikiPgogICAgPGRlZnM+CiAgICAgIDxwYXRoIGlkPSJjIiBkPSJNMCAwaDExOC4wMzV2MTE4LjM4SDB6Ii8+CiAgICA8L2RlZnM+CiAgICA8Y2xpcFBhdGggaWQ9ImQiPgogICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiBvdmVyZmxvdz0idmlzaWJsZSIvPgogICAgPC9jbGlwUGF0aD4KICAgIDxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0xMDkuMDE4IDExNy4wMThoLTEwMGMtNC40IDAtOC0zLjYtOC04di0xMDBjMC00LjQgMy42LTggOC04aDEwMGM0LjQgMCA4IDMuNiA4IDh2MTAwYzAgNC40LTMuNiA4LTggOCIgY2xpcC1wYXRoPSJ1cmwoI2QpIi8+CiAgICA8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMxODNCNEEiIHN0cm9rZS13aWR0aD0iMi4wMzUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTEwOS4wMTggMTE3LjAxOGgtMTAwYy00LjQgMC04LTMuNi04LTh2LTEwMGMwLTQuNCAzLjYtOCA4LThoMTAwYzQuNCAwIDggMy42IDggOHYxMDBjMCA0LjQtMy42IDgtOCA4eiIgY2xpcC1wYXRoPSJ1cmwoI2QpIi8+CiAgICA8ZyBvcGFjaXR5PSIuMDUiIGNsaXAtcGF0aD0idXJsKCNkKSI+CiAgICAgIDxkZWZzPgogICAgICAgIDxwYXRoIGlkPSJlIiBkPSJNNC4wMjMgMjAuMDk4aDEwOS45OXY0NS41Mkg0LjAyM3oiLz4KICAgICAgPC9kZWZzPgogICAgICA8Y2xpcFBhdGggaWQ9ImYiPgogICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI2UiIG92ZXJmbG93PSJ2aXNpYmxlIi8+CiAgICAgIDwvY2xpcFBhdGg+CiAgICAgIDxwYXRoIGZpbGw9IiMxODNCNEEiIGQ9Ik0xMS43NCAyMC4wOThoOTQuNTUzYzQuMjQ2IDAgNy43MiAzLjYgNy43MiA4djM3LjUySDQuMDIzVjI4LjFjMC00LjQgMy40NzQtOCA3LjcxOC04IiBjbGlwLXBhdGg9InVybCgjZikiLz4KICAgIDwvZz4KICAgIDxnIG9wYWNpdHk9Ii4wOCIgY2xpcC1wYXRoPSJ1cmwoI2QpIj4KICAgICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImciIGQ9Ik00LjAyMyA2Ni44OThoMTA5Ljk5djQ1LjUySDQuMDIzeiIvPgogICAgICA8L2RlZnM+CiAgICAgIDxjbGlwUGF0aCBpZD0iaCI+CiAgICAgICAgPHVzZSB4bGluazpocmVmPSIjZyIgb3ZlcmZsb3c9InZpc2libGUiLz4KICAgICAgPC9jbGlwUGF0aD4KICAgICAgPHBhdGggZmlsbD0iIzE4M0I0QSIgZD0iTTEwNi4yOTQgMTEyLjQxOEgxMS43NDJjLTQuMjQ2IDAtNy43Mi0zLjYtNy43Mi04di0zNy41MmgxMDkuOTl2MzcuNTJjMCA0LjQtMy40NzMgOC03LjcxOCA4IiBjbGlwLXBhdGg9InVybCgjaCkiLz4KICAgIDwvZz4KICAgIDxwYXRoIGZpbGw9IiNGMTVGMkUiIGQ9Ik00LjAyMyAzNC4wMTN2LTIxLjk5YzAtNC40IDMuNi04IDgtOGg5My45OWM0LjQgMCA4IDMuNiA4IDh2MjEuOTlINC4wMjN6IiBjbGlwLXBhdGg9InVybCgjZCkiLz4KICAgIDxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0yOC44MjMgMTguMjUyYzAgMy4xNzYtMi41NzQgNS43NS01Ljc1IDUuNzVzLTUuNzUtMi41NzQtNS43NS01Ljc1IDIuNTc0LTUuNzUgNS43NS01Ljc1IDUuNzUgMi41NzQgNS43NSA1Ljc1bTY4LjQgMGMwIDMuMTc2LTIuNTczIDUuNzUtNS43NSA1Ljc1LTMuMTc2IDAtNS43NS0yLjU3NC01Ljc1LTUuNzVzMi41NzQtNS43NSA1Ljc1LTUuNzUgNS43NSAyLjU3NCA1Ljc1IDUuNzUiIGNsaXAtcGF0aD0idXJsKCNkKSIvPgogICAgPGcgY2xpcC1wYXRoPSJ1cmwoI2QpIj4KICAgICAgPHRleHQgZmlsbD0iIzE4M0I0QSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTUuNTIzIDk3LjU4KSIgZm9udC1mYW1pbHk9IidPcGVuU2Fucy1Cb2xkJyIgZm9udC1zaXplPSI3MS4wMDIiPgogICAgICAgIDE1CiAgICAgIDwvdGV4dD4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPg==) no-repeat;
    height: 40px;
    width: 41px;
    position: absolute;
    top: 7px;
    left: 10px;
    display: block;
    background-size: 28px;
}


/* ============================================
   MODAL STYLES
   ============================================ */
.modal-footer-btn {
    flex: 1 1 0;
    min-width: 0;
}

.modal-confirm-header {
    background-color: var(--color-green);
    border-bottom: none;
    justify-content: center;
    padding: 14px 20px;
}
.modal-confirm-header .modal-title {
    color: #fff;
    font-family: var(--font-arimo-bold);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: 100%;
}

/* Card logo + radio stacked layout */
.card-logo-option {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-right: 8px;
}

.accepted-cards img {
    width: 46px;
    height: 29px;
    object-fit: contain;
}

/* ==========================================
   Hamburger icon — extend to full below-lg range
   responsive.less only defines .btn-side-nav inside max-width:767px,
   leaving the icon invisible at 768–991px. Cover the full range here.
   ========================================== */
@media (max-width: 991.98px) {
    .btn-side-nav {
        display: inline-block;
        width: 37px;
        height: 20px;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNS4zNjciIGhlaWdodD0iOC4zNzMiPjxwYXRoIGZpbGw9IiMzNDNCNEEiIGQ9Ik0uMDEgMGgxMC42MzZ2Mi4xSC4wMXpNLjAxIDYuMjcyaDguNzA0djIuMUguMDF6TTEyLjU4NCAyLjk5MnYuMTQ0SDB2Mi4xaDEyLjU4NHYxLjAzNmwyLjc4My0yLjA4NkwxMi41ODQgMi4xIi8+PC9zdmc+");
        background-repeat: no-repeat;
        background-size: 100%;
        cursor: pointer;
        transition: height 0.1s linear;
        margin: 10px 10px 5px;
    }

    .mobile-nav-btn {
        box-shadow: 0px 2px 16px 0px #DBDBDB;
    }
}

/* ==========================================
   Mobile Nav Offcanvas
   ========================================== */

/* Reset the horizontal-tab LESS rules inside the offcanvas.
   Uses ID specificity so no !important needed. */
#mobileNavOffcanvas .nav-tabs {
    border-bottom: none;
    padding-left: 0;
    display: block;
}

#mobileNavOffcanvas .nav-tabs li {
    display: block;
    float: none;
    width: 100%;
    border: none;
    border-bottom: 1px solid #dee2e6;
    border-radius: 0;
    background: none;
    margin: 0;
}

#mobileNavOffcanvas .nav-tabs li a {
    text-align: left;
    padding: 14px 20px;
    font-size: 1rem;
}

#mobileNavOffcanvas .nav-tabs li.active {
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 0;
}

#mobileNavOffcanvas .nav-tabs li.active a {
    font-weight: 600;
    background-color: #f8f9fa;
}

/* Logout row at the bottom of the mobile nav */
.mobile-nav-logout {
    border-top: 2px solid #dee2e6;
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.mobile-nav-logout a {
    display: block;
    padding: 14px 20px;
    color: #dc3545;
    font-size: 1rem;
}

/* ==========================================
   Payment History — mobile label/value layout
   layout.less forces text-align:center on all .chart-row p,
   which puts label and value on separate centered lines on mobile.
   Override to inline label:value pairs with a card per record.
   ========================================== */
@media (max-width: 767.98px) {
    /* Card per payment record — odd rows white, even rows light gray */
    .page-payment-history .chart-row {
        border: 1px solid #d0d5d8;
        border-radius: 6px;
        margin-bottom: 20px;
        padding: 4px 0;
        background: #fff;
    }

    .page-payment-history .chart .chart-row:nth-child(even) {
        background: #f5f6f6;
        border-color: #c8cdd0;
    }

    /* Each column div becomes a label/value row */
    .page-payment-history .chart-row .row > div {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        border-bottom: 1px solid #e8ebec;
        padding: 7px 14px;
    }

    .page-payment-history .chart-row .row > div:last-child {
        border-bottom: none;
    }

    /* Override layout.less center-alignment; keep labels left, values right */
    .page-payment-history .chart-row .row > div p {
        text-align: left;
        margin-bottom: 0;
    }

    .page-payment-history .chart-row .row > div p + p {
        text-align: right;
        margin-left: 8px;
        white-space: nowrap;
    }
}

/* ==========================================
   Scheduled Payments — mobile card detail panel
   Rendered by mobileCardRenderer() in scheduled-payments.js
   when the Responsive extension collapses hidden columns.
   ========================================== */
.sp-mobile-card {
    padding: 4px 0;
}

.sp-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 12px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.875rem;
}

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

.sp-detail-label {
    font-weight: 600;
    color: #555;
    flex-shrink: 0;
    margin-right: 12px;
}

.sp-detail-value {
    text-align: right;
}

/* ==========================================
   Account Summary
   ========================================== */

/* On mobile, force each stat to its own line instead of letting
   "Payments Remaining:" split awkwardly mid-phrase */
@media (max-width: 767.98px) {
    .summary-details {
        display: block;
    }
}

/* ==========================================
   Credit Card Payment — mobile fixes
   ========================================== */
@media (max-width: 767.98px) {
    /* Payment Amount / Payment Date rows in _PaymentDetails.cshtml use
       col-md-6 for label + col-md-6 for value. Below 768px both columns
       expand to 100% and stack, then responsive.less's float:right on
       .payment-value pushes the amount to a separate right-aligned row.
       Override: keep the two halves side-by-side via nowrap flexbox. */
    #payment-details .row {
        flex-wrap: nowrap;
        align-items: baseline;
    }

    #payment-details .row > .col-md-6 {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    #payment-details .row > .col-md-6:last-child {
        flex: 0 0 auto;
        width: auto;
        text-align: right;
    }

    /* Clear the inherited floats — no longer needed in this flex context */
    #payment-details .payment-label,
    #payment-details .payment-value {
        float: none;
    }

    /* Confirmation pages — same col-md-6 label/value stacking problem as
       _PaymentDetails. Covers CreditCardConfirmationModel and
       BankConfirmationModel (both use .confirmation-payments .row). */
    .confirmation-payments .row {
        flex-wrap: nowrap;
        align-items: baseline;
    }

    .confirmation-payments .row > .col-md-6 {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .confirmation-payments .row > .col-md-6:last-child {
        flex: 0 0 auto;
        width: auto;
        text-align: right;
    }

    .confirmation-payments .payment-label,
    .confirmation-payments .payment-value {
        float: none;
    }

    /* Grand total row — already display:flex globally but the col-md-6 children
       have no right-alignment and no proper sizing on mobile. Fix to match. */
    .grand-total > .col-md-6 {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .grand-total > .col-md-6:last-child {
        flex: 0 0 auto;
        width: auto;
        text-align: right;
    }

    .grand-total .payment-label,
    .grand-total .payment-value {
        float: none;
    }

    /* On mobile the two columns stack in DOM order: form (col-md-7) on top,
       AccountSummary (col-md-5) below. Move the summary to the top so the
       user sees what they owe before interacting with the form.
       Bootstrap 5 .row is already display:flex, so order works directly. */
    .page-pay-cc .col-md-5.flip-before {
        order: -1;
    }

}

/* ==========================================
   Footer — left padding on mobile
   .site-footer .footer-column has padding:0 which looks fine
   on desktop (columns sit side by side) but leaves text flush
   against the screen edge when columns stack on mobile.
   ========================================== */
@media (max-width: 767.98px) {
    .site-footer .footer-column {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ==========================================
   Make a Payment — mobile spacing
   ========================================== */
@media (max-width: 767.98px) {
    /* 35px is a desktop luxury; tighten on mobile */
    .payment-page h1 {
        margin-bottom: 12px;
    }

    /* The 55px top margin on the autopay image exists solely to
       vertically align it with the payment form in the adjacent column.
       On mobile the columns stack, so that offset just creates dead space. */
    .page-pay-home .promotion-box img {
        margin-top: 8px;
    }

    /* Reduce spacing between stacked payment-option image buttons */
    .img-btn {
        margin-bottom: 16px;
    }

    /* Keep text left-aligned so it starts after the calendar icon,
       not awkwardly centered with the icon floating to the left. */
    #view-scheduled-payments {
        text-align: left;
    }

    /* "Choose Payment Method" — Card Payment / Bank Draft are col-md-6 columns
       (side-by-side on desktop). When they stack on mobile there's no gap.
       Match the 10px margin-bottom that .payment-special-radio divs already have. */
    .payment-type.radio-wrapper .col-md-6 + .col-md-6 {
        margin-top: 10px;
    }

    /* "Other Amount" row — col-9 (radio+label) and col-3 (input) are breakpoint-less
       Bootstrap 5 columns (always 75%/25%). 25% is too narrow for the dollar input
       on mobile. Stack both to full width. */
    .desired-payment-type > .row > .col-9,
    .desired-payment-type > .row > .col-3 {
        flex: 0 0 auto;
        width: 100%;
    }

    /* Payment Due Details — replace float:right with flex so label/value
       never collide on narrow screens. */
    .payment-summary-box .summary-label {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }

    .payment-summary-box .summary-value {
        float: none;
        white-space: nowrap;
        margin-left: 8px;
    }
}

/* ==========================================
   AutoPay Setup — mobile spacing
   .special-radio.payment-type uses col-6 (no breakpoint), so the
   Card Payment / Bank Draft buttons are always 50% wide. At that width
   the icon + "CARD PAYMENT" / "BANK DRAFT" text wraps badly.
   Stack to full width on mobile so each button has room to breathe.
   ========================================== */
@media (max-width: 767.98px) {
    .special-radio.payment-type .col-6 {
        flex: 0 0 auto;
        width: 100%;
    }

    .special-radio.payment-type .col-6 + .col-6 {
        margin-top: 10px;
    }

    /* btn-lg-text is 1.62em — "CONTINUE AUTOPAY SETUP" wraps at that size
       on a narrow screen. Scale back to something that fits on one line. */
    .page-autopay-setup .btn-lg-text {
        font-size: 1.2em !important;
    }
}

/* ── Pending payment rows (multiple-payments tunnel) ────────────────── */
.pending-payment {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
    border: 1px solid rgba(245, 93, 43, 0.35);
    border-left: 4px solid #f55d2b;
    padding: 10px 10px 10px 14px;
    min-height: 60px;
    font-size: 1.47em;
    font-family: "arimobold", sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(245, 93, 43, 0.07);
    margin-bottom: 6px;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.pending-payment:hover {
    background: #fffaf8;
    border-color: #f55d2b;
}

.payment-model > .pending-payment:last-of-type {
    margin-bottom: 10px;
}

/* primary row: date + amount on the left, delete on the right */
.pending-payment__row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pending-payment__row .pending-date {
    color: #1c1c1c;
}

.pending-payment__row .minimum-payment-amount {
    color: #1c1c1c;
    margin-left: auto;
}

.pending-payment__row .pending-delete {
    margin-left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.45;
    padding: 4px;
    border-radius: 50%;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.pending-payment__row .pending-delete:hover {
    opacity: 1;
    transform: scale(1.12);
}

.pending-payment__row .pending-delete:after {
    content: '';
    display: block;
    width: 26px;
    height: 26px;
    background: url('img/big-x.png') center / contain no-repeat;
}

/* secondary row: card chip below date/amount */
.pending-payment__sub {
    display: flex;
    align-items: center;
    padding-top: 5px;
}

@media only screen and (max-width: 767px) {
    .pending-payment {
        font-size: 1em;
        padding: 8px 8px 8px 12px;
    }
}

/* ── Card chip ───────────────────────────────────────────────────────── */
.pending-card {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 8px;
    background: rgba(245, 93, 43, 0.06);
    border: 1px solid rgba(245, 93, 43, 0.25);
    border-radius: 20px;
    font-size: 0.52em;
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
    text-transform: none;
    font-weight: normal;
    white-space: nowrap;
    user-select: none;
    color: #8a4f35;
    letter-spacing: 0.01em;
}

.pending-card__icon {
    color: #f55d2b;
    opacity: 0.75;
    font-size: 0.9em;
}

.pending-card__brand {
    font-weight: 700;
    color: #5c3520;
    letter-spacing: 0.03em;
}

.pending-card__dots {
    color: #c08060;
    letter-spacing: 0.18em;
    font-size: 0.72em;
    position: relative;
    top: -1px;
}

.pending-card__digits {
    font-weight: 700;
    color: #5c3520;
    letter-spacing: 0.08em;
}