:root {
    --pl-brand: #35677E;
    --pl-brand-dark: #274F62;
    --pl-surface: #d6eef8;
    --pl-cta: #eb9316;
    --pl-cta-top: #f0ad4e;
    /* Dark brown on amber is ~6:1. White on amber is 2.4:1 and must never be used. */
    --pl-cta-ink: #3a2600;
    /* The theme's #F80000 is 4.21:1 and the admin's #999 is 2.85:1; both fail AA. */
    --pl-danger: #B42318;
    --pl-success: #1E7B3C;
    --pl-muted: #50575e;
    --pl-border: #c8d4da;
}

.inaadressSearchContainer {
    z-index: 999;
}
.highlight {
    color: var(--pl-danger);
    font-size: 14px;
}
.sign-help {
    margin: 10px 0;
    font-size: 12px;
    color: var(--pl-danger);
    font-weight: bold;
}
#mid_dialog {
    padding-top: 40px;
}

/* ---- payment block ------------------------------------------------------- */
/* The theme gives containers 5px of side padding below 600px, which is not enough for
   a form; everything here is scoped to .pl-payment so no other page shifts. */
.pl-payment {
    box-sizing: border-box;
    max-width: 720px;
    padding: 0 16px;
}
.pl-payment .pl-muted {
    color: var(--pl-muted);
    font-size: 14px;
}
/* The theme's link colour is #B4B7BA, 2.01:1 on white. */
.pl-payment a,
.pl-invoice-panel a:not(.pl-download-invoice) {
    color: var(--pl-brand);
    text-decoration: underline;
}
.pl-payment .pl-summary {
    margin-bottom: 20px;
}
.pl-payment .pl-total {
    font-size: 18px;
}
.pl-payment .pl-required {
    color: var(--pl-muted);
    font-weight: normal;
    font-size: 14px;
}

.pl-payment .pl-options {
    border: 0;
    margin: 0 0 20px;
    padding: 0;
}
.pl-payment .pl-options > legend {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 0;
}
.pl-payment .pl-option + .pl-option {
    border-top: 1px solid var(--pl-border);
}
.pl-payment .pl-option-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 48px;
    margin: 0;
    padding: 12px 8px;
    cursor: pointer;
    font-weight: normal;
}
.pl-payment .pl-option-radio {
    margin-top: 4px;
    width: 20px;
    height: 20px;
    flex: none;
}
.pl-payment .pl-option-text {
    display: block;
}
.pl-payment .pl-option-help {
    display: block;
    color: var(--pl-muted);
    font-size: 14px;
}
.pl-payment .pl-option-panel {
    padding: 4px 8px 16px 44px;
}

/* Without :has() every panel stays visible, which is still usable; the server decides
   which fields matter either way. */
@supports selector(:has(*)) {
    .pl-payment .pl-option-panel {
        display: none;
    }
    .pl-payment .pl-option:has(.pl-option-radio:checked) .pl-option-panel {
        display: block;
    }
    .pl-payment .pl-option:has(.pl-option-radio:checked) {
        background: var(--pl-surface);
    }
}

.pl-payment .pl-field {
    margin-bottom: 12px;
}
.pl-payment .pl-field label {
    display: block;
    font-weight: bold;
    margin-bottom: 4px;
}
.pl-payment .pl-field input:not([type=checkbox]),
.pl-payment .pl-field textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 8px;
    border: 1px solid var(--pl-border);
}
.pl-payment .pl-field.pl-field-narrow input:not([type=checkbox]) {
    width: 6em;
}
.pl-payment .pl-field-row {
    display: flex;
    gap: 12px;
}
.pl-payment .pl-field-row > span {
    flex: 1;
}
.pl-payment .pl-check label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-height: 48px;
    font-weight: normal;
}
.pl-payment .pl-check input[type=checkbox] {
    margin-top: 3px;
    width: 20px;
    height: 20px;
    flex: none;
}

/* VFB's Bootstrap happens to style .alert too; these keep the flash boxes on the
   plugin's own design (square, left-accent) even if that stylesheet goes away. */
.pl-payment .alert {
    padding: 12px 16px;
    margin: 0 0 20px;
    border: 0;
    border-left: 4px solid var(--pl-border);
    border-radius: 0;
    background: var(--pl-surface);
    color: inherit;
}
.pl-payment .alert-success {
    border-left-color: var(--pl-success);
    background: #f0f9f1;
}
.pl-payment .alert-danger {
    border-left-color: var(--pl-danger);
    background: #fdf3f2;
}

.pl-payment .pl-error-summary {
    border-left: 4px solid var(--pl-danger);
    background: #fdf3f2;
    padding: 12px 16px;
    margin-bottom: 20px;
}
/* The theme's fixed header is 100px tall and would cover whatever we scroll to,
   including the error summary we move focus to. */
.pl-payment .pl-error-summary,
.pl-payment .pl-option,
.pl-payment .pl-field {
    scroll-margin-top: 110px;
}
.pl-payment .pl-error-summary h3 {
    color: var(--pl-danger);
    margin: 0 0 8px;
}
.pl-payment .pl-error-summary ul {
    margin: 0;
    padding-left: 20px;
}
.pl-payment .pl-field-error {
    color: var(--pl-danger);
    margin: 4px 0 0;
    font-size: 14px;
}

.pl-payment .pl-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0 24px;
}
/* Rendered both as <button> and as <a> (payment links must be real links); the flex
   styling is what centres the label in the anchor case, where there is no native
   button layout to rely on. */
.pl-payment .pl-submit,
.pl-payment .pl-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    border: 1px solid var(--pl-brand);
    font-size: 16px;
    cursor: pointer;
}
.pl-payment a.pl-submit,
.pl-payment a.pl-cancel {
    text-decoration: none;
}
.pl-payment .pl-submit {
    background: var(--pl-brand);
    color: #fff;
    font-weight: bold;
    transition: background-color 0.15s ease;
}
.pl-payment .pl-submit:hover,
.pl-payment .pl-submit:focus {
    background: var(--pl-brand-dark);
    color: #fff;
}
.pl-payment .pl-cancel {
    background: transparent;
    color: var(--pl-brand);
    transition: background-color 0.15s ease;
}
.pl-payment .pl-cancel:hover,
.pl-payment .pl-cancel:focus {
    background: var(--pl-surface);
    color: var(--pl-brand);
}

/* ---- invoice download panel ---------------------------------------------- */
.pl-invoice-panel {
    box-sizing: border-box;
    background: var(--pl-surface);
    padding: 16px;
    margin: 16px 0;
    max-width: 720px;
}
.pl-invoice-panel h3 {
    margin: 0 0 4px;
    font-size: 18px;
}
.pl-invoice-panel .pl-invoice-number {
    color: var(--pl-muted);
    font-size: 14px;
    margin-bottom: 16px;
}

/* Deliberately not .btn-warning: the next developer would read a warning class on a
   harmless download and "fix" it. */
.pl-download-invoice,
.pl-download-invoice:link,
.pl-download-invoice:visited {
    display: inline-block;
    background: var(--pl-cta-top);
    background: linear-gradient(to bottom, var(--pl-cta-top), var(--pl-cta));
    color: var(--pl-cta-ink);
    border: 1px solid var(--pl-cta);
    font-size: 20px;
    font-weight: bold;
    line-height: 48px;
    min-height: 48px;
    padding: 0 24px;
    text-decoration: none;
}
.pl-download-invoice:hover,
.pl-download-invoice:focus {
    background: var(--pl-cta);
    color: var(--pl-cta-ink);
    text-decoration: none;
}

.pl-payment :focus-visible,
.pl-invoice-panel :focus-visible,
.pl-download-invoice:focus-visible {
    outline: 3px solid var(--pl-brand);
    outline-offset: 2px;
}

@media only screen and (max-width: 600px) {
    .pl-payment .pl-actions {
        display: block;
    }
    .pl-payment .pl-submit,
    .pl-payment .pl-cancel {
        display: flex;
        width: 100%;
        margin-bottom: 8px;
    }
    .pl-download-invoice {
        display: block;
        width: 100%;
        text-align: center;
        margin-bottom: 8px;
    }
    .pl-payment .pl-field-row {
        display: block;
    }
    .pl-payment .pl-option-panel {
        padding-left: 8px;
    }
}