/*
    BNFTcares colors for the signed-in giving pages. These pages use the employee app's styles (bootstrap, matter and
    exchange), so this file loads after them and swaps the employee app's blue and green for the BNFTcares palette in
    bnftcares.css. Keep the colors in sync with the :root block there.
*/

:root {
    --bc-pink: #e04c81;
    --bc-pink-dark: #c2306a;
    --bc-pink-darker: #a82459;
    --bc-berry: #4a0f2b;
    --bc-blush: #fbdce8;
    --bc-pale: #fff7fa;
    --bc-line: #f1d6e1;
    --bc-error: #b3401a;
    --bc-heading: "Montserrat", "Segoe UI", sans-serif;

    /* Bootstrap */
    --bs-primary: var(--bc-pink);
    --bs-primary-rgb: 224, 76, 129;
    --bs-primary-text-emphasis: var(--bc-pink-darker);
    --bs-primary-bg-subtle: var(--bc-blush);
    --bs-primary-border-subtle: var(--bc-line);
    --bs-link-color: var(--bc-pink-dark);
    --bs-link-color-rgb: 194, 48, 106;
    --bs-link-hover-color: var(--bc-pink-darker);
    --bs-link-hover-color-rgb: 168, 36, 89;
    --bs-focus-ring-color: rgba(224, 76, 129, 0.25);
    --bs-danger: var(--bc-error);

    --bs-success: var(--bc-pink);
    --bs-success-rgb: 224, 76, 129;
    --bs-success-text-emphasis: var(--bc-pink-darker);
    --bs-success-bg-subtle: var(--bc-blush);
    --bs-success-border-subtle: var(--bc-line);
    --bs-form-valid-color: var(--bc-pink-dark);
    --bs-form-valid-border-color: var(--bc-pink);

    /* Employee app theme: its blue primary and green secondary both become pink. The pale pink page background
       is the public site's. */
    --pto-theme-primary: var(--bc-pink);
    --pto-theme-secondary: var(--bc-pink);
    --pto-theme-background: #f2f6f7;
}

/* Headings */

h1,
h2,
h3,
h4,
.pto-type--headline1,
.pto-type--headline2,
.pto-type--headline3,
.pto-type--headline4,
.pto-type--headline5,
.pto-type--headline6 {
    font-family: var(--bc-heading);
    color: #30373a;
}

/* Navigation */

.navbar.bc-nav {
    min-height: 66px;
}

/* The logo, as on the public site (bnftcares.css), scaled down to fit the bar. */
.bc-nav .bc-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    text-decoration: none;
}

.bc-nav .bc-logo img {
    width: 32px;
    height: 32px;
}

.bc-nav .bc-wordmark {
    display: inline-flex;
    align-items: baseline;
    font-family: "Exo 2", var(--bc-heading);
    font-style: italic;
    line-height: 1;
}

.bc-nav .bc-wordmark-bnft {
    font-size: 23px;
    font-weight: 600;
    color: var(--bc-berry);
}

.bc-nav .bc-wordmark-cares {
    font-size: 20px;
    font-weight: 800;
    color: var(--bc-pink);
}

/* The Giving Exchange logo on the employee pages, the same height as the PTO Exchange logo in the employee app's nav. */
.bc-nav .bc-logo--giving img {
    width: auto;
    height: 32px;
}

/* Footer: the body becomes a column so the footer sits at the bottom of short pages. */

body.pto-nav__body {
    display: flex;
    flex-direction: column;
}

.bc-footer-min {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 28px;
    margin-top: auto;
    padding: 20px 24px;
    color: var(--bc-berry);
    font-size: 13px;
}

.bc-footer-min-powered {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--bc-berry);
    text-decoration: none;
}

.bc-footer-min-powered img {
    width: 18px;
    height: 18px;
}

.bc-footer-min .bc-wordmark {
    display: inline-flex;
    align-items: baseline;
    font-family: "Exo 2", var(--bc-heading);
    font-style: italic;
    line-height: 1;
}

.bc-footer-min .bc-wordmark-bnft {
    font-size: 15px;
    font-weight: 600;
    color: var(--bc-berry);
}

.bc-footer-min .bc-wordmark-cares {
    font-size: 13px;
    font-weight: 800;
    color: var(--bc-pink);
}

.bc-footer-min nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
}

.bc-footer-min a {
    color: var(--bc-berry);
    text-decoration: none;
}

.bc-footer-min a:hover {
    color: var(--bc-pink-dark);
    text-decoration: underline;
}

/* The logo and the "?" beside it, which explains that BNFTcares Foundation now powers giving. */
.bc-brand {
    display: inline-flex;
    align-items: center;
    gap: 20px;
}

.bc-brand-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: 1.5px solid #c8c8c8;
    border-radius: 50%;
    color: #8a8a8a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.bc-brand-info:hover
{
    background: #e9e9e9;
    border-color: #b0b0b0;
    color: #5c5c5c;
    outline: none;
}

.bc-brand-info:focus-visible {
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.bc-info-modal {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(74, 15, 43, 0.12);
}

.bc-info-modal .modal-header {
    border-bottom: 0;
}

.bc-info-modal .modal-title {
    font-family: var(--bc-heading);
    font-weight: 700;
}

.bc-info-modal .modal-body {
    color: #4a3b43;
    font-size: 0.875rem;
}

.bc-info-modal .modal-footer {
    border-top: 0;
}

.navbar .nav-link.active,
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--bc-pink-dark);
}

/* On wide screens, center the menu on the whole bar, so it lines up with the page below. Centered between the logo
   and the name, which are different widths, it sat off to one side. */
@media (min-width: 992px) {
    .navbar.bc-nav {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }

    .bc-nav .navbar-collapse {
        display: contents !important;
    }

    .bc-nav .bc-brand {
        grid-column: 1;
        justify-self: start;
    }

    .bc-nav .navbar-nav {
        grid-column: 2;
        margin: 0 !important;
    }

    .bc-nav .navbar-collapse > :last-child {
        grid-column: 3;
        justify-self: end;
    }
}

/* Buttons */

.btn-primary {
    --bs-btn-bg: var(--bc-pink);
    --bs-btn-border-color: var(--bc-pink);
    --bs-btn-hover-bg: var(--bc-pink-dark);
    --bs-btn-hover-border-color: var(--bc-pink-dark);
    --bs-btn-active-bg: var(--bc-pink-darker);
    --bs-btn-active-border-color: var(--bc-pink-darker);
    --bs-btn-disabled-bg: var(--bc-pink);
    --bs-btn-disabled-border-color: var(--bc-pink);
    --bs-btn-focus-shadow-rgb: 224, 76, 129;
}

.btn-outline-primary {
    --bs-btn-color: var(--bc-pink-dark);
    --bs-btn-border-color: var(--bc-pink);
    --bs-btn-hover-bg: var(--bc-pink);
    --bs-btn-hover-border-color: var(--bc-pink);
    --bs-btn-active-bg: var(--bc-pink-dark);
    --bs-btn-active-border-color: var(--bc-pink-dark);
    --bs-btn-disabled-color: var(--bc-pink);
    --bs-btn-disabled-border-color: var(--bc-pink);
    --bs-btn-focus-shadow-rgb: 224, 76, 129;
}

.btn-link {
    --bs-btn-color: var(--bc-pink-dark);
    --bs-btn-hover-color: var(--bc-pink-darker);
    --bs-btn-active-color: var(--bc-pink-darker);
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bc-pink);
    --bs-btn-border-color: var(--bc-pink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bc-pink-dark);
    --bs-btn-hover-border-color: var(--bc-pink-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bc-pink-darker);
    --bs-btn-active-border-color: var(--bc-pink-darker);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bc-pink);
    --bs-btn-disabled-border-color: var(--bc-pink);
    --bs-btn-focus-shadow-rgb: 224, 76, 129;
}

.btn-outline-success {
    --bs-btn-color: var(--bc-pink-dark);
    --bs-btn-border-color: var(--bc-pink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bc-pink);
    --bs-btn-hover-border-color: var(--bc-pink);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bc-pink-dark);
    --bs-btn-active-border-color: var(--bc-pink-dark);
    --bs-btn-disabled-color: var(--bc-pink);
    --bs-btn-disabled-border-color: var(--bc-pink);
    --bs-btn-focus-shadow-rgb: 224, 76, 129;
}

/* Text, backgrounds and badges */

.text-primary {
    color: var(--bc-pink-dark) !important;
}

.text-success {
    color: var(--bc-pink-dark) !important;
}

.bg-primary,
.badge.bg-primary,
.bg-success,
.badge.bg-success {
    background-color: var(--bc-pink) !important;
}

/* Success messages, such as the thank-you testimonial, in blush rather than green. */
.pto-alert-success {
    background-color: var(--bc-pale);
    border-color: var(--bc-line);
    color: var(--bc-pink-darker);
}

/* Forms */

.form-control:focus,
.form-select:focus {
    border-color: var(--bc-pink);
    box-shadow: 0 0 0 0.25rem rgba(224, 76, 129, 0.25);
}

/* Underlined fields (md-form) show focus as a pink underline, as the employee app does in blue, not a ring. */
.md-form input.form-control:not(.input-rounded):focus,
.md-form select.form-select:focus,
.md-form .StripeElement.StripeElement--focus {
    border-color: var(--bc-pink);
    box-shadow: inset 0 -2px 0 var(--bc-pink);
}

.form-check-input:checked {
    background-color: var(--bc-pink);
    border-color: var(--bc-pink);
}

.form-check-input:focus {
    border-color: var(--bc-pink);
    box-shadow: 0 0 0 0.25rem rgba(224, 76, 129, 0.25);
}

.form-range::-webkit-slider-thumb {
    background-color: var(--bc-pink);
}

.form-range::-moz-range-thumb {
    background-color: var(--bc-pink);
}

/* A valid field's check mark is drawn in the stylesheet, so it is redrawn here in pink. */
.was-validated .form-control:valid,
.form-control.is-valid,
.was-validated .form-select:valid,
.form-select.is-valid {
    border-color: var(--bc-pink);
}

.was-validated .form-control:valid,
.form-control.is-valid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23e04c81' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3e%3c/svg%3e");
}

/* Validation messages use the BNFTcares error color rather than the employee app's orange. */
.field-validation-error,
.validation-summary-errors,
.md-form #card-errors,
.pto-theme--error,
.error {
    color: var(--bc-error);
}

input.input-validation-error,
select.input-validation-error,
.md-form .StripeElement.StripeElement--invalid {
    border-color: var(--bc-error);
}

/* Steppers, search results, campaign goals and pagination */

.giving-search-results-not-found-button a,
.pto-navigation-card .pto-navigation-card__content .pto-navigation-card__content-link,
.pto-navigation-card .pto-navigation-card__graphics .pto-navigation-card__graphics-icon,
.pto-drawer__menu .list-group-item.active i,
.stat-box .primary,
.pto-carousel .pto-carousel__content .pto-carousel__campaign-goal .pto-carousel__campaign-goal-chart-caption .pto-carousel__campaign-goal-value,
.pto-carousel .pto-carousel__content .pto-carousel__campaign-goal .pto-carousel__campaign-goal-chart-caption .pto-carousel__campaign-goal-caption {
    color: var(--bc-pink-dark);
}

.pto-carousel .pto-carousel__content .pto-carousel__campaign-goal .pto-carousel__campaign-goal-chart svg .total-arc {
    fill: var(--bc-pink);
}

.page-item.active .page-link,
.active > .page-link {
    background-color: var(--bc-pink);
    border-color: var(--bc-pink);
}

.page-link {
    color: var(--bc-pink-dark);
}

.progress-bar {
    background-color: var(--bc-pink);
}

/* Info boxes, such as "Donate up to" on the donation form: pink instead of the employee app's blue. */

.pto-alert-info {
    background-color: rgba(var(--bs-primary-rgb), 0.06);
    border-color: rgba(var(--bs-primary-rgb), 0.18);
    color: var(--bc-pink-darker);
}

/* Featured organizations: center each card in its column, so the row sits in the middle of the page. */

.pto-nonprofit-list {
    justify-items: center;
}

/* Receipt pages: the receipt is a card in the middle of the page, like the thank-you page. Printed, it is plain. */

.bc-receipt {
    width: 100%;
    max-width: 800px;
    margin: 32px auto;
}

/* Printing a receipt: just the receipt, with labels and values side by side so it fits on one page. */
@media print {
    @page {
        margin: 0.5in;
    }

    html.pto-nav__html,
    body.pto-nav__body {
        display: block;
        min-height: 0;
        background: #fff;
    }

    .bc-nav,
    .alert {
        display: none !important;
    }

    .pto-layout__content {
        padding: 0 !important;
    }

    .bc-receipt {
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0 !important;
    }

    .bc-receipt .card {
        padding: 0 !important;
        border: 0;
        box-shadow: none;
        break-inside: avoid;
    }

    .bc-receipt .pto-list {
        display: grid;
        grid-template-columns: max-content 1fr;
        gap: 4px 24px;
        margin: 0;
    }

    .bc-receipt .pto-list dd {
        margin: 0;
    }
}

/* A nonprofit that can't receive donations here: one card that says why and goes back to the search. */
.bc-unavailable {
    max-width: 560px;
    margin: 8px auto 48px;
    padding: 40px 32px 32px;
    border: 1px solid var(--bc-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(74, 15, 43, 0.06);
    text-align: center;
}

.bc-unavailable__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--bc-blush);
    color: var(--bc-pink-dark);
}

.bc-unavailable__title {
    margin: 0 0 8px;
    color: var(--bc-berry);
    font-family: var(--bc-heading);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
}

.bc-unavailable__nonprofit {
    margin: 0 0 16px;
    color: var(--bc-berry);
}

.bc-unavailable__nonprofit strong {
    display: block;
    font-size: 1rem;
}

.bc-unavailable__ein {
    font-size: 0.875rem;
    color: #6b5a62;
}

.bc-unavailable__reason {
    margin: 0 auto 24px;
    max-width: 460px;
    padding-top: 16px;
    border-top: 1px solid var(--bc-line);
    color: #6b5a62;
    font-size: 0.875rem;
    line-height: 1.5;
}

.bc-unavailable__action {
    min-width: 220px;
    border-radius: 999px;
}

@media (max-width: 575.98px) {
    .bc-unavailable {
        padding: 32px 20px 24px;
    }

    .bc-unavailable__action {
        width: 100%;
    }
}

/* Thank-you page receipt: a label on the left and its value on the right, a dotted line between rows, and the total in
   a box of its own. */
.bc-receipt-section + .bc-receipt-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e6e0e3;
}

.bc-receipt-rows {
    margin: 0;
}

.bc-receipt-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    padding: 12px 0;
    border-bottom: 1px dotted #d9d2d6;
}

.bc-receipt-row:last-child {
    border-bottom: 0;
}

.bc-receipt-row dt {
    flex-shrink: 0;
    font-weight: inherit;
}

.bc-receipt-row dd {
    margin: 0;
    text-align: right;
}

.bc-receipt-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 12px;
    padding: 16px 20px;
    border-radius: 12px;
}

.bc-receipt-total__amount {
    font-size: 1.5rem;
    line-height: 1.2;
}

.bc-receipt-row .pto-type--body2 {
    opacity: .6;
}

.bc-receipt-section > .pto-type--body1 {
    font-weight: 700;
}

/* Thank-you page: the ways onward as centered buttons, and printing as a quieter link below. */
.bc-thanks-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.bc-thanks-actions .btn {
    min-width: 200px;
    border-radius: 999px;
}

.bc-thanks-print {
    color: #6b5a62;
    font-size: 0.875rem;
    text-decoration: none;
}

.bc-thanks-print:hover {
    color: var(--bc-pink-dark);
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .bc-thanks-actions .btn {
        width: 100%;
    }
}