/*
 * Standalone Trip Planner form ([ride_guide_trip_planner] / block — see
 * app/TripPlannerForm.php) and its address dropdown.
 *
 * Everything is namespaced `.rg-tp*`, so it can sit on a page next to a theme's
 * own planner without either's styles reaching the other. Colours, spacing and
 * radius come from semantic-variables.css, which defaults to the active theme's
 * theme.json presets. The baseline look of the inputs, select and button is
 * wrapped in :where(), which adds no specificity: any rule the theme has for
 * its own text inputs / selects / buttons wins over it, so the form follows the
 * host theme where the theme styles those, and still looks right where it
 * doesn't.
 *
 * Phones: controls are at least 44px tall (touch target) and 16px type (iOS
 * Safari zooms the page in on focus below 16px).
 */

.rg-tp {
    --rg-tp-gap: var(--space-sm, 0.75em);
    box-sizing: border-box;
    max-width: 100%;
    font-family: inherit;
}
.rg-tp *,
.rg-tp *::before,
.rg-tp *::after {
    box-sizing: border-box;
}

.rg-tp-when {
    display: flex;
    flex-direction: column;
    gap: var(--rg-tp-gap);
    margin-top: var(--rg-tp-gap);
}

.rg-tp-datetime {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rg-tp-gap);
}
.rg-tp-datetime[hidden] {
    display: none;
}
.rg-tp-datetime .rg-tp-field {
    flex: 1 1 8em;
}

.rg-tp-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs, 0.25em);
    min-width: 0;
    flex: 1 1 auto;
}
.rg-tp-field label {
    font-weight: 600;
}

:where(.rg-tp input[type="text"]),
:where(.rg-tp input[type="date"]),
:where(.rg-tp input[type="time"]),
:where(.rg-tp select) {
    width: 100%;
    min-height: 44px;
    padding: var(--space-xs, 0.5em) var(--space-sm, 0.75em);
    font: inherit;
    font-size: max(1em, 16px);
    color: inherit;
}

.rg-tp input[aria-invalid="true"] {
    border-color: var(--error, #d63638);
}

.rg-tp :focus-visible {
    outline: 2px solid var(--focus-ring, currentColor);
    outline-offset: 2px;
}

/* Swap: a round icon button between the two address fields. */
.rg-tp-swap {
    align-self: center;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    cursor: pointer;
    color: inherit;
    background: transparent;
    line-height: 1;
}
.rg-tp-swap svg {
    display: block;
    /* Arrows point up/down while the fields are stacked (phones). */
    transform: rotate(90deg);
}

:where(.rg-tp .rg-tp-submit) {
    min-height: 44px;
    padding: var(--space-xs, 0.5em) var(--space-lg, 1.5em);
    font: inherit;
    font-size: max(1em, 16px);
    font-weight: 600;
    cursor: pointer;
    color: var(--button-primary-text, #fff);
    background-color: var(--button-primary-bg, var(--brand-primary, #027bff));
    border: 0;
}

.rg-tp-error {
    display: none;
    margin-bottom: var(--rg-tp-gap);
    padding: var(--space-xs, 0.5em) var(--space-sm, 0.75em);
    color: var(--error, #d63638);
    border: var(--border-width, 1px) solid currentColor;
    border-radius: var(--field-radius, 0.5em);
}
.rg-tp-error.is-visible {
    display: block;
}

/* Wider than a phone: From ⇄ To side by side, time controls in one row. */
@media (min-width: 48em) {
    .rg-tp-addresses {
        flex-direction: row;
        align-items: flex-end;
    }
    .rg-tp-swap {
        align-self: flex-end;
    }
    .rg-tp-swap svg {
        transform: none;
    }
    .rg-tp-when {
        flex-direction: row;
        align-items: flex-end;
    }
    .rg-tp-field--mode {
        flex: 0 1 14em;
    }
    .rg-tp-datetime {
        flex: 1 1 auto;
        flex-wrap: nowrap;
    }
}

/* Address dropdown — appended to <body> by rg-combobox.js, so it can't be
   styled through the form; the prefix is this form's own (see
   trip-planner-form.js), not the shared `places-autocomplete-*` one. */
.rg-tp-address-panel {
    position: absolute;
    z-index: var(--z-dropdown, 9999);
    margin: 0;
    display: none;
    background: var(--background, #fff);
    border: var(--border-width, 1px) solid var(--border-color, #d6d5d5);
    border-radius: var(--field-radius, 0.5em);
    box-shadow: var(--card-shadow, 0 1px 3px rgba(0, 0, 0, 0.15));
    overflow: hidden;
    font-size: max(1em, 16px);
    color: var(--foreground, #1f2933);
}
.rg-tp-address-panel.is-open {
    display: block;
}
.rg-tp-address-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
}
.rg-tp-address-option {
    margin: 0;
    padding: var(--space-xs, 0.5em) var(--space-sm, 0.75em);
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    line-height: 1.3;
}
.rg-tp-address-option.is-active,
.rg-tp-address-option:hover {
    background: var(--ink-15, #e6e6e6);
}
.rg-tp-address-recent-tag {
    margin-left: var(--space-3xs, 0.25em);
    color: var(--ink-50, #777);
    font-size: 0.8em;
}
.rg-tp-address-clear-row {
    display: none;
    border-top: var(--border-width, 1px) solid var(--border-color, #e5e5e5);
    text-align: right;
    padding: var(--space-3xs, 0.25em) var(--space-2xs, 0.375em);
}
.rg-tp-address-clear-row.is-visible {
    display: block;
}
.rg-tp-address-clear-button {
    min-height: 44px;
    margin: 0;
    padding: var(--space-3xs, 0.25em) var(--space-2xs, 0.375em);
    font-size: 0.8em;
    color: var(--ink-50, #555);
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: 0;
}