/* "Order a Ride" create dialog - label-above-input card layout with a route map + estimate panel. */

.ocr-root {
    --ocr-border: rgba(15, 23, 42, 0.16);
    --ocr-input-bg: #ffffff;
    --ocr-panel-bg: #ffffff;
    --ocr-text-primary: #0f172a;
    --ocr-text-secondary: #64748b;
    --ocr-radius: 14px;
    --ocr-panel-radius: 16px;
    font-family: "Quicksand", sans-serif;
}

body.mud-theme-dark .ocr-root,
.mud-theme-dark .ocr-root,
.dashboard-dark-mode .ocr-root {
    --ocr-border: rgba(148, 163, 184, 0.3);
    --ocr-input-bg: #2a2b35;
    --ocr-panel-bg: #23242e;
    --ocr-text-primary: var(--mud-palette-text-primary);
    --ocr-text-secondary: var(--mud-palette-text-secondary);
}

.ocr-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.ocr-form-col {
    flex: 1 1 460px;
    min-width: 280px;
}

.ocr-map-col {
    flex: 1 1 320px;
    min-width: 260px;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Sticky-while-scrolling only makes sense inside the dialog's own scroll container
   (TargetCreateDialog.razor). PartnerCreateRide.razor renders the same markup on a normal
   full page with no such container - sticky positioning there caused the map column to grow
   the page's white space once the estimate card appeared below a taller map. */
.mud-dialog-content .ocr-map-col {
    position: sticky;
    top: 0;
}

@media (max-width: 900px) {
    .ocr-map-col {
        position: static;
        max-width: none;
    }
}

.ocr-field {
    width: 100%;
}

.ocr-field-label {
    display: block;
    margin-bottom: 6px;
    font-family: "Quicksand", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--ocr-text-secondary);
}

.ocr-input.mud-input-control,
.ocr-input .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    /* MudBlazor's outlined border reads this variable directly, so this is the reliable way
       to change its radius rather than fighting the component's own CSS with selectors that
       may not match its internal DOM across versions. */
    --mud-default-borderradius: var(--ocr-radius);
}

.ocr-input .mud-input-outlined-border {
    border-radius: var(--ocr-radius) !important;
    border-color: var(--ocr-border) !important;
    border-width: 1.5px !important;
}

.ocr-input .mud-input-slot {
    min-height: 34px;
    padding: 0 4px;
    background: var(--ocr-input-bg);
    border-radius: var(--ocr-radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    transition: box-shadow 150ms ease, border-color 150ms ease;
}

/* The visible box height is actually driven by the <input>/select element's own vertical
   padding + line-height (MudBlazor's default is padding:6px 0 7px, ~33px tall on its own),
   not by .mud-input-slot's min-height above - that only sets a floor. Override the longhand
   properties directly (higher specificity + !important) so it wins regardless of which of
   MudBlazor's own shorthand rules (text input vs .mud-select-input) apply to a given control. */
.ocr-input .mud-input-root {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.3 !important;
    height: auto !important;
}

.ocr-input:hover .mud-input-outlined-border {
    border-color: rgba(15, 23, 42, 0.32) !important;
}

.ocr-input:focus-within .mud-input-slot {
    box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb), 0.16);
}

.ocr-input:focus-within .mud-input-outlined-border {
    border-color: var(--mud-palette-primary) !important;
}

body.mud-theme-dark .ocr-input:hover .mud-input-outlined-border,
.mud-theme-dark .ocr-input:hover .mud-input-outlined-border,
.dashboard-dark-mode .ocr-input:hover .mud-input-outlined-border {
    border-color: rgba(148, 163, 184, 0.5) !important;
}

.ocr-input .mud-input > input,
.ocr-input .mud-select-input,
.ocr-input textarea {
    color: var(--ocr-text-primary);
    font-family: "Quicksand", sans-serif;
}

.ocr-panel {
    padding: 16px 18px;
    border: 1px solid var(--ocr-border);
    border-radius: var(--ocr-panel-radius);
    background: var(--ocr-panel-bg);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.ocr-panel-title {
    font-family: "Quicksand", sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ocr-text-secondary);
    margin-bottom: 10px;
}

.ocr-map-card {
    width: 100%;
    min-height: 260px;
    border-radius: var(--ocr-panel-radius);
    overflow: hidden;
    border: 1px solid var(--ocr-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.ocr-map-card > div {
    width: 100% !important;
}

.ocr-estimate-card {
    padding: 14px 18px;
    border-radius: var(--ocr-panel-radius);
    border: 1px solid var(--ocr-border);
    background: var(--ocr-panel-bg);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ocr-estimate-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: "Quicksand", sans-serif;
    font-size: 0.85rem;
}

.ocr-estimate-label {
    color: var(--ocr-text-secondary);
    font-weight: 600;
}

.ocr-estimate-value {
    color: var(--ocr-text-primary);
    font-weight: 700;
    text-align: right;
}

.ocr-cta.mud-button-root {
    height: 44px;
    border-radius: 12px;
    font-family: "Quicksand", sans-serif;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0 24px;
}