/* Project styles, loaded after Bootstrap so they can override it. */

/* Offer form: green, slightly softer fields matching the submit button. */
.inquiry-card {
    background-color: rgba(var(--bs-success-rgb), .06);
    border-color: var(--bs-success-border-subtle);
}

.inquiry-card .form-label {
    font-size: .8125rem;
    font-weight: 600;
    margin-bottom: .125rem;
}

.inquiry-card .form-control,
.inquiry-card .form-select {
    border-color: var(--bs-success-border-subtle);
    border-radius: .375rem;
}

.inquiry-card .form-control:focus,
.inquiry-card .form-select:focus {
    border-color: var(--bs-success);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-success-rgb), .2);
}

/* Keep validation errors red. */
.inquiry-card .form-control.is-invalid,
.inquiry-card .form-select.is-invalid {
    border-color: var(--bs-form-invalid-border-color);
}

.inquiry-card .btn-success {
    border-radius: .5rem;
}

/* Orange call-to-action button, built on Bootstrap's own button variables. */
.btn-orange {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-orange);
    --bs-btn-border-color: var(--bs-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #e8710f;
    --bs-btn-hover-border-color: #e8710f;
    --bs-btn-focus-shadow-rgb: 253, 126, 20;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #d4670d;
    --bs-btn-active-border-color: #d4670d;
}

/* "So einfach geht der Kauf" box with numbered steps. */
.purchase-steps {
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color-translucent);
}

.purchase-steps .step-number {
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--bs-orange);
    color: #fff;
    font-weight: 700;
}

.inquiry-card .card-header {
    background-color: var(--bs-success);
    border-bottom: 0;
    color: #fff;
}

/* Consent layer (taken over from kwebs.de): details table stays readable on small screens. */
.consent-cookies {
    font-size: .8125rem;
}

.consent-cookies th {
    white-space: nowrap;
}

/* Consent first layer, centered over a light backdrop. */
.consent-layer {
    position: fixed;
    inset: 0;
    z-index: 1045;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .15);
}

.consent-layer[hidden] {
    display: none;
}

/* On the privacy policy and imprint the layer must not hide the text. */
.consent-layer--legal {
    align-items: flex-end;
    background: none;
    pointer-events: none;
}

.consent-box {
    width: 100%;
    max-width: 32rem;
    pointer-events: auto;
}

/* Settings layer as wide as the first layer. */
.consent .modal {
    --bs-modal-width: 32rem;
}

/* Opened category in light green with a green arrow instead of Bootstrap blue. */
.consent .accordion {
    --bs-accordion-active-bg: var(--bs-success-bg-subtle);
    --bs-accordion-active-color: var(--bs-success-text-emphasis);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23198754' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* No frame around the opened or clicked category; keyboard users still get a focus outline. */
.consent .accordion-button:not(.collapsed) {
    box-shadow: none;
}

.consent .accordion-button:focus-visible {
    outline: 2px solid var(--bs-success);
    outline-offset: -2px;
}

/* The header row (toggle + switch) shares the opened background. */
.consent .accordion-header:has(.accordion-button:not(.collapsed)) {
    background-color: var(--bs-accordion-active-bg);
}

/* The switch sits next to the accordion toggle instead of inside it. */
.consent .accordion-header .accordion-button {
    flex: 1;
}

/* Switches in the site green instead of Bootstrap blue. */
.consent .form-check-input:checked {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

.consent .form-check-input:focus {
    border-color: var(--bs-success);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-success-rgb), .15);
}

.consent .form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23198754'/%3e%3c/svg%3e");
}

.consent-reopen {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    z-index: 1030;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    font-size: 1.25rem;
}

/* Legal pages: sub-headings bold and a step smaller than the numbered sections. */
.legal h3 {
    font-size: 1.05rem;
    font-weight: 700;
}

/* Footer: gray divider, muted links that darken on hover; the current page stands out. */
.site-footer {
    border-color: var(--bs-gray-300) !important;
}

.site-footer .nav-link {
    padding-inline: .75rem;
    color: var(--bs-secondary-color);
}

/* flush with the right edge of the content once copyright and links sit side by side */
@media (min-width: 576px) {
    .site-footer .nav-item:last-child .nav-link {
        padding-right: 0;
    }
}

.site-footer .nav-link:hover,
.site-footer .nav-link:focus-visible,
.site-footer .nav-link.active {
    color: var(--bs-body-color);
}

.site-footer .nav-link.active {
    font-weight: 600;
}

/* Links on the legal pages and in the consent layer in the green of the top navbar (bg-success). */
.legal,
.consent {
    --bs-link-color: var(--bs-success);
    --bs-link-color-rgb: var(--bs-success-rgb);
    --bs-link-hover-color: #146c43;
    --bs-link-hover-color-rgb: 20, 108, 67;
}