/*
 * The order form page, /transfer (ADR-0186).
 *
 * A file of its own, served by the site like js/transfer.js: the template
 * carried these rules in a <style> block and the colours in style attributes.
 *
 * The form is four numbered steps and a summary. Every colour below is chosen
 * against WCAG 2.2 and measured in the browser by tools/order-form-audit.mjs:
 * text at least 4.5:1 against what is behind it, a field's outline at least
 * 3:1 (1.4.11). Bootstrap's own field outline, #dee2e6, was 1.11:1 on the
 * grey card the form had — the fields could not be told from the card.
 *
 * Both themes (ADR-0188): the form's colours are variables on .order-form,
 * the light theme's as they were, the dark theme's from Bootstrap's dark
 * palette; the audit measures the form in each. The colours of the page's
 * headings come from the settings and are the light theme's.
 */

/* The page's headings, in the colours from the settings (the template names
   them); in the dark theme, Bootstrap's. */
:where(html:not([data-bs-theme="dark"])) .transfer-heading {
    color: var(--transfer-heading-color);
}

:where(html:not([data-bs-theme="dark"])) .transfer-subtitle {
    color: var(--transfer-subtitle-color);
}

[data-bs-theme="dark"] .transfer-subtitle {
    color: var(--bs-secondary-color);
}

.page-content p {
    font-size: 1.1rem;
    line-height: 1.6;
}

#map-container {
    position: relative;
    height: 500px;
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    z-index: 1;
}

#map {
    height: 100%;
    width: 100%;
    border-radius: 12px;
}

/* On the map, light in both themes (the template marks the map so). Opaque:
   the route's length is Bootstrap's blue, 4.5:1 on white and no more
   (F-255). */
.map-overlay-info {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-weight: bold;
}

/* Address suggestions: hidden until transfer.js shows them. */
.suggestions-box {
    display: none;
    z-index: 1050;
    background: var(--order-surface);
    border: 1px solid var(--order-suggestion-border);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.suggestion-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--order-suggestion-divider);
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background-color: var(--order-suggestion-hover);
}

/* The form: a light card that stands out on any page background the settings
   choose, with white steps on it. */
.order-form {
    /* Field outlines, checkboxes included: Bootstrap's gray-600, 4.69:1 on
       white and 3.35:1 on the dark theme's steps. */
    --bs-border-color: var(--bs-gray-600);

    --order-card: #eef1f5;
    --order-surface: #fff;
    --order-divider: #dee2e6;
    --order-step-border: #ced4da;
    --order-text: #212529;
    --order-hint: #495057;
    --order-accent: #0a58ca;
    --order-from: #146c43;
    --order-to: #b02a37;
    --order-price: #198754;
    --order-link: #0a58ca;
    --order-shadow: rgba(0, 0, 0, 0.35);
    --order-suggestion-border: #ddd;
    --order-suggestion-divider: #eee;
    --order-suggestion-hover: #f8f9fa;

    background-color: var(--order-card);
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 0.75rem 2rem var(--order-shadow);
}

/* The dark theme: a lighter card on the dark page, the steps on the page's
   own dark, the ends of the route and the price in Bootstrap's text colours
   for the dark theme (6.6:1 and 6.1:1). The accent stays: white on it is
   6.44:1 in both. */
[data-bs-theme="dark"] .order-form {
    --order-card: var(--bs-tertiary-bg);
    --order-surface: var(--bs-body-bg);
    --order-divider: var(--bs-gray-700);
    --order-step-border: var(--bs-gray-700);
    --order-text: var(--bs-body-color);
    --order-hint: var(--bs-gray-500);
    --order-from: var(--bs-success-text-emphasis);
    --order-to: var(--bs-danger-text-emphasis);
    --order-price: var(--bs-success-text-emphasis);
    --order-link: var(--bs-link-color);
    --order-shadow: rgba(0, 0, 0, 0.6);
    --order-suggestion-border: var(--bs-gray-700);
    --order-suggestion-divider: var(--bs-gray-800);
    --order-suggestion-hover: var(--bs-tertiary-bg);

    border: 1px solid var(--bs-gray-700);
}

.order-form > .card-header {
    background-color: var(--order-surface);
    border-bottom: 1px solid var(--order-divider);
    border-radius: 1rem 1rem 0 0;
}

.order-form .form-label {
    font-weight: 600;
    color: var(--order-text);
}

.order-form .form-label.small {
    font-weight: 500;
}

.order-step {
    background-color: var(--order-surface);
    border: 1px solid var(--order-step-border);
    border-left: 4px solid var(--order-accent);
    border-radius: 0.75rem;
    padding: 1.25rem 1.25rem 0.5rem;
    margin-bottom: 1.5rem;
}

/* Bootstrap floats a legend to keep it inside its fieldset; the float stays. */
.order-step__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--order-text);
}

/* The step's number: white on the accent, 6.44:1. */
.order-step__number {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--order-accent);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}

.order-step__hint {
    margin-bottom: 1rem;
    color: var(--order-hint);
}

/* The ends of the route, in the colours of the map's markers, darkened to
   6.45:1 and 6.50:1 on white. Scoped like the labels' colour above, which
   would otherwise win. */
.order-form .order-step__end--from {
    color: var(--order-from);
}

.order-form .order-step__end--to {
    color: var(--order-to);
}

.order-summary {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    text-align: center;
    background-color: var(--order-surface);
    border: 2px solid var(--order-price);
    border-radius: 0.75rem;
}

.order-summary__title {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--order-text);
}

.price-display {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--order-price);
}

/* The price's terms and the site's role (ADR-0190), in the hint's colour:
   7.1:1 on the light card, 6.5:1 on the dark one; the link 6.0:1 and 5.6:1. */
.order-summary__terms,
.order-form__terms {
    color: var(--order-hint);
    font-size: 0.875rem;
}

.order-summary__terms {
    margin: 0.5rem 0 0;
}

.order-form__terms {
    margin-bottom: 1rem;
}

.order-form__terms a {
    color: var(--order-link);
}

@media (max-width: 575.98px) {
    .order-step {
        padding: 1rem 0.875rem 0.25rem;
    }
}