/* Metropolis (OTF) - wwwroot/fonts/metropolis */

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-Thin.otf") format("opentype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-ThinItalic.otf") format("opentype");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-ExtraLight.otf") format("opentype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-ExtraLightItalic.otf") format("opentype");
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-LightItalic.otf") format("opentype");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-RegularItalic.otf") format("opentype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-MediumItalic.otf") format("opentype");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-SemiBold.otf") format("opentype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-SemiBoldItalic.otf") format("opentype");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-BoldItalic.otf") format("opentype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-ExtraBold.otf") format("opentype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-ExtraBoldItalic.otf") format("opentype");
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-Black.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-BlackItalic.otf") format("opentype");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* Zmienne */

:root {
    --clr-blue-strong: #1e75ba;
    --clr-blue-soft: #009fe3;
    --clr-dark-strong: #333333;
    --clr-dark-soft: #5c5c5c;
    --clr-light-strong: #e6ebee;
    --clr-light-soft: #ffffff;
}

/* Style globalne*/

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

html {
    font-size: 18px;
    position: relative;
    min-height: 100%;
    color: var(--clr-dark-strong) !important;
    font-family: "Metropolis", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
}

body {
    min-height: 100vh;
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--clr-light-strong);
    font-family: inherit;
}

nav {
    padding-block: 2rem !important;
    width: 100% !important;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.portal-logo {
    color: var(--clr-dark-strong);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.4rem;
    margin-right: 4rem;
}

a {
    color: var(--clr-blue-strong);
}

.custom-nav-list {
    gap: 2rem;
}

@media (max-width: 70rem) {
    .custom-nav-list {
        gap: 0rem;
    }
}

.custom-nav-list-item {
    text-decoration: none;
    color: var(--clr-dark-strong);
    opacity: 1;
}

.brand-icon {
    height: 4rem;
    width: auto;
    margin-right: 1rem;
}

.portal-logo span {
    color: var(--clr-blue-strong);
}

main {
    flex: 1 0 auto;
    height: auto;
}

footer {
    flex: 0 0 auto;
    margin-top: auto;
    height: 5rem;
    font-size: 0.85rem;
}

nav, main, footer {
    width: 60% !important;
}

@media (max-width: 100rem) {
    nav, main, footer {
        width: 95% !important;
    }
}

.common-required-field-info-hint {
    color: var(--clr-dark-soft);
    font-size: 0.9rem;
    width: 100%;
}

/* Widoki */

/* Receipt/Search - Wyszukaj Paragon */
.receipt-search_container {
    width: 100%;
    padding: 5rem 2rem;
}

@media (max-width: 70rem) {
    .receipt-search_container {
        padding: 2rem 2rem;
    }
}

.receipt-search_content-wrapper {
    max-width: 72rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
}

@media (max-width: 70rem) {
    .receipt-search_content-wrapper {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 2rem;
    }
}

.receipt-search_info {
    min-width: 0;
    margin-bottom: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.receipt-search_info p {
    margin:0;
}

.receipt-search_form {
    min-width: 0;
    display: flex;
    justify-content: center;
}

@media (max-width: 70rem) {
    .receipt-search_form {
        justify-content: stretch;
    }
}

.receipt-search_title {
    margin: 0.75rem 0 1rem 0;
    color: var(--clr-blue-strong)
}

.receipt-search_contacts {
    display: grid;
    gap: 1rem;
    font-size: 0.85rem;
}

    .receipt-search_contacts a {
        color: var(--clr-blue-strong);
        text-decoration: none;
    }

.receipt-search_form-inner {
    width: 100%;
    max-width: 28rem;
    padding: 2rem;
    display: grid;
    gap: 2rem;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 1.5rem;
    box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

@media (max-width: 70rem) {
    .receipt-search_form-inner {
        max-width: none;
    }
}

.receipt-search_field {
    display: grid;
    gap: 0.5rem;
}

.receipt-search_actions {
    margin-top: 0.25rem;
    display: flex;
    justify-content: flex-start;
}

/* Contact/ContactForm - Wyślij wiadomośc w formularzu kontaktowym */

.contact-form_container {
    max-width: 100%;
    padding: clamp(1rem, 3vw, 2rem);
}

@media (max-width: 70rem) {
    .contact-form_container {
        padding: 0;
    }
}

.contact-form_content-wrapper {
    width: clamp(10rem, 90%, 75rem);
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 2rem);
    align-items: flex-start;
    margin: 0 auto;
}

.contact-form_form {
    background: #fff;
    border: 0.0625rem solid rgba(0,0,0,.08);
    border-radius: 1rem;
    box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,.06);
    padding: clamp(1.125rem, 2.6vw, 1.75rem);
    width: 100%;
}

.contact-form_info {
    padding: clamp(1.125rem, 2.6vw, 1.75rem);
    width: 100%;
}

.contact-form_title {
    margin: 0.75rem 0 1rem 0;
    color: var(--clr-blue-strong)
}

.contact-form_attachments-hint {
    margin: 0;
    font-size: 0.875rem;
    color: rgba(0,0,0,.72);
}

.contact-form_form-inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-form_row {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
}

.contact-form_col {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
}

.contact-form_field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contact-form_file-input-help-container {
    width: auto;
    display: flex;
    flex-direction: column;
}

.contact-form_main-data-group,
.contact-form_optional-data-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

@media (max-width: 70rem) {
    .contact-form_main-data-group,
    .contact-form_optional-data-group {
        grid-template-columns: 1fr;
    }
}

.contact-form_hr {
    height: 0.0625rem;
    border: none;
    background: rgba(0,0,0);
    margin: 0;
    width: 100%;
}

.contact-form_actions {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.contact-form_container .custom-textarea-input {
    width: 100%;
    min-height: 13.75rem;
    resize: none;
}

.contact-form_container .custom-field {
    position: relative;
}

.contact-form_container .custom-validation {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 5;
    display: inline-block;
    max-width: 100%;
    padding: 0.5rem 0.625rem;
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.2;
    color: #fff;
    background: #d32f2f;
    box-shadow: 0 0.625rem 1.375rem rgba(0,0,0,.18);
    white-space: normal;
    pointer-events: none;
}

.contact-form_container .field-validation-valid {
    display: none !important;
}

.contact-form_container .custom-text-input.input-validation-error,
.contact-form_container .custom-select-input.input-validation-error,
.contact-form_container .custom-textarea-input.input-validation-error,
.contact-form_container input.input-validation-error,
.contact-form_container select.input-validation-error,
.contact-form_container textarea.input-validation-error {
    border-color: #d32f2f !important;
    box-shadow: 0 0 0 0.1875rem rgba(211, 47, 47, .14);
    outline: none;
}

.custom-text-counter {
    margin-top: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.2;
    text-align: right;
    color: rgba(0,0,0,.65);
}

    .custom-text-counter.is-limit-reached {
        color: #b42318;
        font-weight: 600;
    }

/* Contact/Confirmation - potwierdzenie wysłania formularza */

.contact-confirmation_container {
    text-align: center;
    margin-top: 4rem;
}

.contact-confirmation_title {
    margin-bottom: 2rem;
    color: var(--clr-blue-strong);
}

.contact-confirmation_description {
    font-size: 1rem;
}

/* Receipt/Results - Wyświetl wyniki wyszukiwania paragonów */

.receipt-results_container {
    max-width: 100%;
    padding: clamp(1rem, 3vw, 2rem);
}

@media (max-width: 70rem) {
    .receipt-results_container {
        padding: 0;
    }
}

.receipt-results_content-wrapper {
    width: clamp(20rem, 100%, 75rem);
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 2rem);
    align-items: flex-start;
    margin: 0 auto;
}

.receipt-results_header {
    width: 100%;
}

.receipt-results_title {
    margin: 0.75rem 0 0.75rem 0;
    color: var(--clr-blue-strong);
}

.receipt-results_subtitle {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(0,0,0,.72);
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

    .receipt-results_subtitle strong {
        font-weight: 600;
        color: rgba(0,0,0,.82);
        padding: 0.15rem 0.45rem;
        border-radius: 0.5rem;
        background: rgba(0,0,0,.06);
    }

.receipt-results_table-card {
    background: #fff;
    border: 0.0625rem solid rgba(0,0,0,.08);
    border-radius: 1rem;
    box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,.06);
    padding: clamp(1.125rem, 2.6vw, 1.75rem);
    width: 100%;
}

.receipt-results_table-wrap {
    width: 100%;
    overflow-x: auto;
}

.receipt-results_table {
    width: 100%;
    border-collapse: collapse;
    min-width: 52rem;
}

    .receipt-results_table thead th {
        text-align: left;
        font-weight: 600;
        font-size: 0.875rem;
        color: rgba(0,0,0,.78);
        padding: 0.85rem 0.85rem;
        border-bottom: 0.0625rem solid rgba(0,0,0,.10);
        background: rgba(0,0,0,.02);
    }

    .receipt-results_table tbody td {
        padding: 0.85rem 0.85rem;
        border-bottom: 0.0625rem solid rgba(0,0,0,.08);
        vertical-align: middle;
        color: rgba(0,0,0,.86);
    }

    .receipt-results_table tbody tr:hover {
        background: rgba(0,0,0,.02);
    }

.receipt-results_th-actions {
    text-align: right;
}

.receipt-results_td-actions {
    text-align: left;
    white-space: nowrap;
}

.receipt-results_actions {
    display: inline-flex;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: center;
}

.receipt-results_td-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875rem;
}

.receipt-results_td-amount {
    font-weight: 600;
}

.receipt-results_empty {
    width: 100%;
    border-radius: 0.75rem;
    padding: 0.95rem 1rem;
    border: 0.0625rem solid rgba(0,0,0,.08);
    background: rgba(0,0,0,.02);
}

.receipt-results_empty-title {
    margin: 0;
    font-weight: 600;
    color: rgba(0,0,0,.85);
}

.receipt-results_empty-text {
    margin: 0.35rem 0 0 0;
    color: rgba(0,0,0,.72);
    font-size: 0.9375rem;
}

.receipt-results_pagination {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.receipt-results_pagination-left,
.receipt-results_pagination-right {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.receipt-results_back {
    width: 100%;
}

.receipt-results_link {
    color: var(--clr-blue-strong);
    text-decoration: none;
    font-weight: 600;
}

    .receipt-results_link:hover {
        text-decoration: underline;
    }

.receipt-results_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.75rem;
    padding: 0.6rem 0.9rem;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1;
    text-decoration: none;
    border: 0.0625rem solid transparent;
    cursor: pointer;
    user-select: none;
    transition: transform .05s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}

    .receipt-results_btn:active {
        transform: translateY(1px);
    }

.receipt-results_btn-primary {
    background: var(--clr-blue-strong);
    color: #fff;
    box-shadow: 0 0.5rem 1.2rem rgba(0,0,0,.10);
}

    .receipt-results_btn-primary:hover {
        filter: brightness(0.98);
    }

.receipt-results_btn-secondary {
    background: rgba(0,0,0,.03);
    color: rgba(0,0,0,.84);
    border-color: rgba(0,0,0,.10);
}

    .receipt-results_btn-secondary:hover {
        background: rgba(0,0,0,.05);
    }

@media (max-width: 70rem) {
    .receipt-results_table {
        min-width: 44rem;
    }
}

@media (max-width: 40rem) {
    .receipt-results_table {
        min-width: 36rem;
    }

    .receipt-results_btn {
        padding: 0.55rem 0.8rem;
        font-size: 0.9rem;
    }
}

/* Shared/Error - Strona błędu */

.error_container {
    max-width: 100%;
    padding: clamp(1rem, 3vw, 2rem);
}

@media (max-width: 70rem) {
    .error_container {
        padding: 0;
    }
}

.error_content-wrapper {
    width: clamp(10rem, 90%, 75rem);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 2rem);
    align-items: flex-start;
}

.error_card {
    background: #fff;
    border: 0.0625rem solid rgba(0,0,0,.08);
    border-radius: 1rem;
    box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,.06);
    padding: clamp(1.125rem, 2.6vw, 1.75rem);
    width: 100%;
}

.error_header {
    width: 100%;
}

.error_title {
    margin: 0.75rem 0 0.75rem 0;
    color: var(--clr-blue-strong);
}

.error_subtitle {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(0,0,0,.72);
}

.error_message {
    margin-top: 1.25rem;
    border-radius: 0.75rem;
    padding: 0.9rem 1rem;
    border: 0.0625rem solid rgba(211, 47, 47, .35);
    background: rgba(211, 47, 47, .08);
}

.error_message-title {
    margin: 0;
    font-weight: 600;
    color: rgba(0,0,0,.85);
}

.error_message-text {
    margin: 0.35rem 0 0 0;
    color: rgba(0,0,0,.78);
    font-size: 0.9375rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.error_actions {
    margin-top: 1.5rem;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.error_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.75rem;
    padding: 0.6rem 0.9rem;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1;
    text-decoration: none;
    border: 0.0625rem solid transparent;
    cursor: pointer;
    user-select: none;
    transition: transform .05s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}

    .error_btn:active {
        transform: translateY(1px);
    }

.error_btn-primary {
    background: var(--clr-blue-strong);
    color: #fff;
    box-shadow: 0 0.5rem 1.2rem rgba(0,0,0,.10);
}

    .error_btn-primary:hover {
        filter: brightness(0.98);
    }

.error_btn-secondary {
    background: rgba(0,0,0,.03);
    color: rgba(0,0,0,.84);
    border-color: rgba(0,0,0,.10);
}

    .error_btn-secondary:hover {
        background: rgba(0,0,0,.05);
    }

/* Komponenty */
.custom-field {
    position: relative;
}

.custom-validation {
    position: absolute;
    left: 0;
    bottom: 0;
    display: inline-block;
    max-width: 100%;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    line-height: 1.1;
    color: #fff;
    background: #d92d20;
    border-radius: 0.5rem;
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
    transition: opacity 120ms ease, transform 120ms ease;
}

    .custom-validation.field-validation-error {
        opacity: 1;
    }

.input-validation-error {
    border-color: #d92d20 !important;
    box-shadow: 0 0 0 0.25rem rgba(217, 45, 32, 0.18) !important;
}

.custom-select .input-validation-error {
    border-color: #d92d20 !important;
    box-shadow: 0 0 0 0.25rem rgba(217, 45, 32, 0.18) !important;
}

.custom-button {
    height: 3rem;
    padding: 0 1.5rem;
    border: 0;
    border-radius: 999rem;
    background: var(--clr-blue-strong);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

    .custom-button:hover {
        background-color: var(--clr-blue-soft);
    }

    .custom-button:active {
        transform: translateY(1px);
    }

    .custom-button.custom-button--outlined {
        border: 0.15rem solid var(--clr-blue-strong);
        background-color: transparent;
        color: var(--clr-blue-strong);
    }

        .custom-button.custom-button--outlined:hover {
            border-color: var(--clr-blue-soft);
            color: var(--clr-blue-soft);
        }

/* link stylowany jak przycisk */
.custom-button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    text-decoration: none;
    box-sizing: border-box;
    align-self: flex-start;
}

.custom-file-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.2;
    color: rgba(0,0,0,.75);
    color: black;
    caret-color: black;
}

    .custom-file-input::file-selector-button,
    .custom-file-input::-webkit-file-upload-button {
        border: 0;
        border-radius: 0.75rem;
        padding: 0.55rem 1rem;
        margin-right: 0.75rem;
        background: var(--clr-blue-strong);
        border-radius: 999rem;
        color: #fff;
        font-size: 0.9375rem;
        font-weight: 600;
        cursor: pointer;
        line-height: 0.9375rem;
    }

    .custom-file-input:hover::file-selector-button {
        background: var(--clr-blue-soft);
    }

    .custom-file-input:hover::-webkit-file-upload-button {
        background: var(--clr-blue-soft);
    }

    .custom-file-input:active::file-selector-button {
        background: #125aa3;
    }

    .custom-file-input:active::-webkit-file-upload-button {
        background: #125aa3;
    }

    .custom-file-input:focus,
    .custom-file-input:focus-visible {
        outline: none;
        border-color: rgba(25,118,210,.55);
        box-shadow: 0 0 0 0.1875rem rgba(25,118,210,.18);
    }

    .custom-file-input:disabled {
        opacity: .6;
        cursor: not-allowed;
    }

        .custom-file-input:disabled:hover::file-selector-button {
            background: var(--clr-blue-strong);
            cursor: not-allowed;
        }
        .custom-file-input:disabled:hover::-webkit-file-upload-button {
            background: var(--clr-blue-strong);
            cursor: not-allowed;
        }

    .custom-file-input.is-limit-reached {
        opacity: 0.6;
    }

        .custom-file-input.is-limit-reached:hover {
            opacity: 0.6;
        }

        .custom-file-input.is-limit-reached::file-selector-button {
            cursor: not-allowed;
            transition: none;
        }

        .custom-file-input.is-limit-reached:hover::file-selector-button {
            cursor: not-allowed;
            transition: none;
        }

.custom-file-list {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.custom-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 0.0625rem solid rgba(0,0,0,.10);
    border-radius: 0.75rem;
    background: rgba(0,0,0,.03);
}

.custom-file-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    color: rgba(0,0,0,.78);
}

.custom-file-item.is-too-big .custom-file-name {
    color: #b00020;
    font-weight: 600;
}

.custom-file-badge {
    margin-left: 8px;
    font-size: 12px;
    color: #b00020;
}

.custom-file-size {
    margin-left: 8px;
    font-size: 12px;
    opacity: .75;
}

.custom-icon-button {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0.0625rem solid rgba(0,0,0,.12);
    border-radius: 0.75rem;
    background: #fff;
    cursor: pointer;
}

    .custom-icon-button svg {
        display: none;
    }

.custom-icon {
    width: 1.125rem;
    height: 1.125rem;
    display: inline-block;
    background-color: var(--clr-blue-strong);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.custom-icon--trash {
    -webkit-mask-image: url("/images/trash.svg");
    mask-image: url("/images/trash.svg");
}

.custom-help {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.35;
    color: rgba(0,0,0,.70);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.custom-help_row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: baseline;
}

.custom-help strong {
    font-weight: 600;
    color: rgba(0,0,0,.82);
    padding: 0.15rem 0.45rem;
    border-radius: 0.5rem;
    background: rgba(0,0,0,.06);
}

.custom-label {
    font-size: 0.9rem;
    line-height: 1.2;
    color: rgba(0,0,0,0.70);
}

.required-asterisk {
    margin-left: 0.25rem;
    color: rgba(176, 0, 32, 1);
    font-weight: 500;
    font-size: 1.4rem;
}

.custom-text-input,
.custom-number-input,
.custom-select-input,
.custom-textarea-input {
    width: 100%;
    height: 2.75rem;
    padding: 0 1rem;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 0.75rem;
    background: rgba(0,0,0,0.04);
    color: rgba(0,0,0,0.88);
    outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.custom-textarea-input {
    height: auto;
    min-height: 8rem;
    padding: 0.85rem 1rem;
    resize: vertical;
    font-size: 0.85rem;
}

    .custom-text-input::placeholder,
    .custom-number-input::placeholder,
    .custom-textarea-input::placeholder {
        color: rgba(0,0,0,0.38);
    }

    .custom-text-input:focus,
    .custom-number-input:focus,
    .custom-select-input:focus,
    .custom-textarea-input:focus {
        background: rgba(0,0,0,0.02);
        border-color: rgba(0,0,0,0.18);
        box-shadow: 0 0 0 0.25rem rgba(0,0,0,0.08);
    }

.custom-select {
    position: relative;
    font-family: inherit;
}

    .custom-select .custom-select-input {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        width: 100%;
        height: 2.75rem;
        padding: 0 2.75rem 0 1rem;
        border: 1px solid rgba(0,0,0,0.08);
        border-radius: 0.75rem;
        background: rgba(0,0,0,0.04);
        color: rgba(0,0,0,0.88);
        outline: none;
        transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
        font-size: 0.9375rem;
        line-height: 1.2;
        cursor: pointer;
    }

    .custom-select::after {
        content: "";
        position: absolute;
        right: 1rem;
        top: 50%;
        width: 0.55rem;
        height: 0.55rem;
        transform: translateY(-60%) rotate(45deg);
        border-right: 2px solid rgba(0,0,0,0.55);
        border-bottom: 2px solid rgba(0,0,0,0.55);
        pointer-events: none;
    }

    .custom-select .custom-select-input:focus {
        background: rgba(0,0,0,0.02);
        border-color: rgba(0,0,0,0.18);
        box-shadow: 0 0 0 0.25rem rgba(0,0,0,0.08);
    }

.validation-summary-valid {
    display: none !important;
}

.custom-validation-summary {
    border-radius: 0.75rem;
    padding: 0.75rem 0.875rem;
    border: 0.0625rem solid rgba(176, 0, 32, 1);
    background: rgba(211, 47, 47, .08);
    font-size: 0.9rem;
    color: rgba(176, 0, 32, 1);
}

    .custom-validation-summary ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
    }