/* ==========================================================
       DELIVERY ROUTE CALCULATOR
       ISOLATED / MOBILE-MENU SAFE
       ========================================================== */

    /*
     * IMPORTANT:
     * Every rule in this file is scoped to #drc-calculator.
     * Nothing here should modify the site's global mobile menu,
     * navigation, header, body, buttons, inputs, links, etc.
     */


    /* ==========================================================
       CALCULATOR BOX SIZING
       ========================================================== */

#drc-calculator,
#drc-calculator *,
#drc-calculator *::before,
#drc-calculator *::after {
    box-sizing: border-box;
}


/* ==========================================================
   MAIN CALCULATOR
   ========================================================== */

#drc-calculator {
    position: relative;

    display: block;

    width: 100%;
    max-width: 520px;

    margin: 0 auto;
    padding: 28px;

    background: #ffffff;
    background-color: #ffffff;
    background-image: none;

    border: 1px solid #e5e7eb;
    border-radius: 18px;

    box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.06);

    color: #111827;

    font-family: inherit;

    opacity: 1;

    overflow: visible;

    isolation: isolate;

    transform: none;
    filter: none;

    mix-blend-mode: normal;

    z-index: 1;
}


/* ==========================================================
   FIELDS
   ========================================================== */

#drc-calculator .drc-field {
    position: relative;

    display: block;

    width: 100%;

    margin: 0 0 24px;

    overflow: visible;

    opacity: 1;

    transform: none;
    filter: none;

    isolation: auto;
    contain: none;

    mix-blend-mode: normal;
}


/* ==========================================================
   NORMAL FIELD STACKING
   ========================================================== */

#drc-calculator .drc-field:not(.drc-location-field) {
    position: relative;

    z-index: 1;

    overflow: visible;
}


/* ==========================================================
   LOCATION FIELD STACKING
   ========================================================== */

#drc-calculator .drc-pickup-location-field {
    position: relative;

    z-index: 30;

    overflow: visible;
}


#drc-calculator .drc-dropoff-location-field {
    position: relative;

    z-index: 20;

    overflow: visible;
}


/*
 * Date/time fields stay below location dropdowns.
 */

#drc-calculator .drc-field:has(> #drc-pickup-date),
#drc-calculator .drc-field:has(> #drc-pickup-time) {
    position: relative;
    z-index: 1;
}


/* ==========================================================
   LABELS
   ========================================================== */

#drc-calculator .drc-field > label {
    display: block;

    margin: 0 0 8px;

    color: #1f2937;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.4;
}


/* ==========================================================
   NORMAL INPUTS
   ========================================================== */

#drc-calculator input[type="text"],
#drc-calculator input[type="date"],
#drc-calculator input[type="time"],
#drc-calculator input[type="number"],
#drc-calculator textarea {
    display: block;

    width: 100%;

    margin: 0;

    border: 1px solid #d1d5db;
    border-radius: 10px;

    background: #ffffff;
    background-color: #ffffff;
    background-image: none;

    color: #111827;

    font-family: inherit;
    font-size: 15px;

    line-height: normal;

    opacity: 1;

    box-shadow: none;

    transition:
            border-color 0.2s ease,
            box-shadow 0.2s ease,
            background-color 0.2s ease;
}


#drc-calculator input[type="text"],
#drc-calculator input[type="date"],
#drc-calculator input[type="time"],
#drc-calculator input[type="number"] {
    height: 48px;

    padding: 0 15px;
}


#drc-calculator textarea {
    min-height: 100px;

    padding: 13px 15px;

    line-height: 1.5;

    resize: vertical;
}


/* ==========================================================
   INPUT HOVER
   ========================================================== */

#drc-calculator input[type="text"]:hover,
#drc-calculator input[type="date"]:hover,
#drc-calculator input[type="time"]:hover,
#drc-calculator input[type="number"]:hover,
#drc-calculator textarea:hover {
    border-color: #9ca3af;
}


/* ==========================================================
   INPUT FOCUS
   ========================================================== */

#drc-calculator input[type="text"]:focus,
#drc-calculator input[type="date"]:focus,
#drc-calculator input[type="time"]:focus,
#drc-calculator input[type="number"]:focus,
#drc-calculator textarea:focus {
    outline: none;

    border-color: #2563eb;

    box-shadow:
            0 0 0 3px rgba(37, 99, 235, 0.15);
}


/* ==========================================================
   LOCATION INPUT WRAPPER
   ========================================================== */

#drc-calculator .drc-location-input-wrap {
    position: relative;

    display: block;

    width: 100%;

    overflow: visible;
}


/* ==========================================================
   LOCATION INPUT
   ========================================================== */

#drc-calculator .drc-location-input-wrap input[type="text"] {
    position: relative;

    display: block;

    width: 100%;
    height: 48px;

    padding: 0 48px 0 15px;

    background: #ffffff;
    background-color: #ffffff;
    background-image: none;

    color: #111827;

    touch-action: manipulation;

    -webkit-tap-highlight-color: transparent;
}


/* ==========================================================
   CLEAR BUTTON
   ========================================================== */

#drc-calculator .drc-location-clear {
    position: absolute;

    top: 50%;
    right: 10px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    color: #777777;

    font-family: inherit;
    font-size: 24px;
    font-weight: 400;

    line-height: 28px;

    text-align: center;

    cursor: pointer;

    transform: translateY(-50%);

    appearance: none;
    -webkit-appearance: none;

    box-shadow: none;

    opacity: 1;

    touch-action: manipulation;

    -webkit-tap-highlight-color: transparent;

    z-index: 2;
}


#drc-calculator .drc-location-clear:hover {
    color: #111111;
    background: #f3f4f6;
}


#drc-calculator .drc-location-clear:active {
    color: #000000;
    background: #e5e7eb;
}


#drc-calculator .drc-location-clear:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}


#drc-calculator .drc-location-clear[hidden] {
    display: none !important;
}


/* ==========================================================
   LOCATION DROPDOWN
   ========================================================== */

#drc-calculator .drc-results {
    position: absolute;

    top: calc(100% + 8px);
    left: 0;

    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    background: #ffffff;
    background-color: #ffffff;
    background-image: none;

    border: 1px solid #e5e7eb;
    border-radius: 12px;

    box-shadow:
            0 14px 32px rgba(0, 0, 0, 0.14),
            0 4px 12px rgba(0, 0, 0, 0.08);

    max-height: 320px;

    overflow-x: hidden;
    overflow-y: auto;

    z-index: 50;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: none;
    filter: none;

    isolation: auto;
    contain: none;

    mix-blend-mode: normal;

    touch-action: manipulation;

    -webkit-overflow-scrolling: touch;

    overscroll-behavior: contain;

    -webkit-tap-highlight-color: transparent;
}


/*
 * Never allow hidden dropdowns to participate in layout
 * or pointer interaction.
 */

#drc-calculator .drc-results[hidden] {
    display: none !important;

    visibility: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


#drc-calculator .drc-results:empty {
    display: none !important;
}


/* ==========================================================
   DROPDOWN CHILD RESET
   ========================================================== */

#drc-calculator .drc-results > *,
#drc-calculator .drc-results > * > *,
#drc-calculator .drc-results > * > * > * {
    opacity: 1;

    transform: none;

    filter: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    mix-blend-mode: normal;
}


/* ==========================================================
   LOCATION RESULT
   ========================================================== */

#drc-calculator .drc-results .drc-location {
    position: relative;

    display: block;

    width: 100%;

    min-height: 48px;

    margin: 0;
    padding: 14px 16px;

    border: 0;
    border-bottom: 1px solid #f3f4f6;

    border-radius: 0;

    background: #ffffff;
    background-color: #ffffff;
    background-image: none;

    color: #111827;

    font-family: inherit;
    font-size: 15px;

    line-height: 1.4;

    text-align: left;

    cursor: pointer;

    pointer-events: auto;

    appearance: none;
    -webkit-appearance: none;

    opacity: 1;

    transform: none;
    filter: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    mix-blend-mode: normal;

    touch-action: manipulation;

    -webkit-user-select: none;
    user-select: none;

    -webkit-tap-highlight-color: transparent;
}


#drc-calculator .drc-results .drc-location:last-child {
    border-bottom: 0;
}


/* ==========================================================
   RESULT HOVER
   ========================================================== */

@media (hover: hover) and (pointer: fine) {

    #drc-calculator .drc-results .drc-location:hover {
        background: #f8fafc;
        background-color: #f8fafc;
    }

}


/* ==========================================================
   RESULT ACTIVE / FOCUS
   ========================================================== */

#drc-calculator .drc-results .drc-location:active {
    background: #eef2ff;
    background-color: #eef2ff;
}


#drc-calculator .drc-results .drc-location:focus {
    outline: none;
}


#drc-calculator .drc-results .drc-location:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}


/* ==========================================================
   RESULT TEXT
   ========================================================== */

#drc-calculator .drc-results .drc-location strong {
    display: block;

    margin: 0;

    color: #111827;

    font-size: 15px;
    font-weight: 600;

    line-height: 1.4;

    opacity: 1;
}


#drc-calculator .drc-results .drc-location span {
    display: block;

    margin-top: 5px;

    color: #6b7280;

    font-size: 13px;

    line-height: 1.4;

    opacity: 1;
}


/* ==========================================================
   RESULT LINKS
   ========================================================== */

#drc-calculator .drc-results .drc-location a {
    position: relative;

    display: inline-block;

    color: #2563eb;

    text-decoration: underline;

    opacity: 1;

    pointer-events: auto;

    touch-action: manipulation;

    -webkit-user-select: text;
    user-select: text;
}


#drc-calculator .drc-results .drc-location a:hover {
    color: #1d4ed8;
}


/* ==========================================================
   SEARCH STATES
   ========================================================== */

#drc-calculator .drc-results .drc-search-loading,
#drc-calculator .drc-results .drc-search-empty,
#drc-calculator .drc-results .drc-search-error {
    display: block;

    width: 100%;

    margin: 0;
    padding: 16px;

    background: #ffffff;
    background-color: #ffffff;
    background-image: none;

    color: #6b7280;

    font-size: 14px;

    line-height: 1.5;

    pointer-events: auto;

    opacity: 1;
}


#drc-calculator .drc-results .drc-search-error {
    color: #dc2626;
}


/* ==========================================================
   MORE RESULTS
   ========================================================== */

#drc-calculator .drc-results .drc-more-results,
#drc-calculator .drc-results .drc-load-more {
    display: block;

    width: 100%;

    min-height: 48px;

    margin: 0;
    padding: 14px;

    border: 0;
    border-top: 1px solid #e5e7eb;

    border-radius: 0;

    background: #f9fafb;
    background-color: #f9fafb;

    color: #2563eb;

    font-family: inherit;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.4;

    text-align: center;

    cursor: pointer;

    pointer-events: auto;

    opacity: 1;

    appearance: none;
    -webkit-appearance: none;

    touch-action: manipulation;

    -webkit-tap-highlight-color: transparent;
}


#drc-calculator .drc-results .drc-more-results:hover,
#drc-calculator .drc-results .drc-load-more:hover {
    background: #f3f4f6;
    background-color: #f3f4f6;
}


#drc-calculator .drc-results .drc-more-results:active,
#drc-calculator .drc-results .drc-load-more:active {
    background: #eef2ff;
    background-color: #eef2ff;
}


/* ==========================================================
   SELECTED LOCATION
   ========================================================== */

#drc-calculator .drc-selected-location {
    display: none;

    margin-top: 12px;
    padding: 14px 16px;

    border: 1px solid #f0f1f3;
    border-radius: 12px;

    background: #f9fafb;
    background-color: #f9fafb;

    color: #111827;

    opacity: 1;

    transform: none;
    filter: none;

    mix-blend-mode: normal;
}


#drc-calculator .drc-selected-location:not(:empty) {
    display: block;
}


#drc-calculator .drc-selected-location-name {
    display: block;

    margin: 0 0 5px;

    color: #111827;

    font-size: 15px;
    font-weight: 600;

    line-height: 1.4;
}


#drc-calculator .drc-selected-location-address,
#drc-calculator .drc-selected-location-phone {
    display: block;

    color: #4b5563;

    font-size: 14px;

    line-height: 1.5;
}


#drc-calculator .drc-selected-location-phone {
    margin-top: 6px;
}


#drc-calculator .drc-selected-location-map {
    display: block;

    margin-top: 7px;
}


#drc-calculator .drc-selected-location-map a {
    color: #2563eb;

    font-size: 14px;

    text-decoration: underline;

    touch-action: manipulation;
}


/* ==========================================================
   VEHICLE
   ========================================================== */

#drc-calculator .drc-vehicle-field {
    position: relative;

    z-index: 1;

    margin-top: 20px;

    overflow: visible;

    transform: none;
    filter: none;

    isolation: auto;
    contain: none;

    mix-blend-mode: normal;
}


#drc-calculator .drc-vehicle-description {
    margin: 4px 0 14px;

    color: #6b7280;

    font-size: 14px;

    line-height: 1.5;
}


/* ==========================================================
   VEHICLE OPTIONS
   ========================================================== */

#drc-calculator .drc-vehicle-options {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;

    width: 100%;
}


#drc-calculator .drc-vehicle-option {
    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 145px;

    padding: 18px 12px;

    border: 2px solid #e1e1e1;
    border-radius: 12px;

    background: #ffffff;
    background-color: #ffffff;

    color: #333333;

    font-family: inherit;

    cursor: pointer;

    transition:
            border-color 0.18s ease,
            background-color 0.18s ease,
            color 0.18s ease,
            box-shadow 0.18s ease,
            transform 0.18s ease;

    -webkit-tap-highlight-color: transparent;
}


#drc-calculator .drc-vehicle-option:hover {
    border-color: #999999;

    transform: translateY(-2px);

    box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.08);
}


#drc-calculator .drc-vehicle-option:focus-visible {
    outline: 3px solid rgba(30, 115, 190, 0.35);
    outline-offset: 2px;
}


#drc-calculator .drc-vehicle-option.is-selected {
    border-color: #2271b1;

    background: #f0f7fc;
    background-color: #f0f7fc;

    color: #2271b1;

    box-shadow:
            0 4px 14px rgba(34, 113, 177, 0.15);
}


#drc-calculator .drc-vehicle-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 72px;
    height: 62px;

    margin-bottom: 10px;

    color: #444444;
}


#drc-calculator .drc-vehicle-option.is-selected
.drc-vehicle-icon {
    color: #2271b1;
}


#drc-calculator .drc-vehicle-icon svg {
    display: block;

    width: 72px;
    height: 56px;

    max-width: 100%;
    max-height: 100%;
}


#drc-calculator .drc-vehicle-name {
    display: block;

    max-width: 100%;

    color: inherit;

    font-size: 15px;
    font-weight: 600;

    line-height: 1.3;

    text-align: center;

    white-space: nowrap;
}


#drc-calculator .drc-vehicle-check {
    position: absolute;

    top: 8px;
    right: 8px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    border-radius: 50%;

    background: #2271b1;

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    opacity: 0;

    transform: scale(0.7);

    transition:
            opacity 0.18s ease,
            transform 0.18s ease;
}


#drc-calculator .drc-vehicle-option.is-selected
.drc-vehicle-check {
    opacity: 1;

    transform: scale(1);
}


#drc-calculator .drc-vehicle-error {
    margin-top: 10px;

    color: #b32d2e;

    font-size: 14px;

    line-height: 1.5;
}


#drc-calculator .drc-vehicle-options.has-error
.drc-vehicle-option {
    border-color: #d63638;
}


/* ==========================================================
   CALCULATE BUTTON
   ========================================================== */

#drc-calculator #drc-calculate {
    position: relative;

    display: block;

    width: 100%;

    min-height: 48px;

    margin: 0;

    padding: 0 20px;

    border: 0;
    border-radius: 12px;

    background: #2563eb;
    background-color: #2563eb;

    color: #ffffff;

    font-family: inherit;

    font-size: 15px;
    font-weight: 600;

    line-height: 48px;

    text-align: center;

    cursor: pointer;

    transition:
            background-color 0.2s ease,
            opacity 0.2s ease,
            transform 0.15s ease;

    -webkit-tap-highlight-color: transparent;
}


#drc-calculator #drc-calculate:hover {
    background: #1d4ed8;
    background-color: #1d4ed8;
}


#drc-calculator #drc-calculate:active {
    transform: translateY(1px);
}


#drc-calculator #drc-calculate:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.25);
    outline-offset: 2px;
}


#drc-calculator #drc-calculate:disabled {
    opacity: 0.6;

    cursor: not-allowed;

    transform: none;
}


/* ==========================================================
   LOADING
   ========================================================== */

#drc-calculator #drc-calculator-loading {
    margin-top: 12px;

    color: #6b7280;

    font-size: 14px;

    line-height: 1.5;
}


#drc-calculator #drc-calculator-loading[hidden] {
    display: none !important;
}


/* ==========================================================
   GENERAL ERROR
   ========================================================== */

#drc-calculator #drc-calculator-error {
    margin-top: 12px;

    padding: 12px 14px;

    border: 1px solid #fecaca;
    border-radius: 10px;

    background: #fef2f2;

    color: #dc2626;

    font-size: 14px;

    line-height: 1.5;
}


#drc-calculator #drc-calculator-error[hidden] {
    display: none !important;
}


/* ==========================================================
   SIMPLE RESULT
   ========================================================== */

#drc-calculator #drc-result {
    display: block;

    margin-top: 24px;
    padding: 16px;

    background: #f9fafb;
    background-color: #f9fafb;

    border: 1px solid #e5e7eb;
    border-radius: 12px;

    color: #111827;

    font-size: 16px;

    line-height: 1.5;
}


#drc-calculator #drc-result:empty {
    display: none;
}


#drc-calculator #drc-result p {
    margin: 8px 0;
}


#drc-calculator #drc-result p:first-child {
    margin-top: 0;
}


#drc-calculator #drc-result p:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   STRUCTURED RESULTS
   ========================================================== */

#drc-calculator #drc-calculator-results {
    margin-top: 24px;

    padding: 16px;

    border: 1px solid #e5e7eb;
    border-radius: 12px;

    background: #f9fafb;
    background-color: #f9fafb;

    color: #111827;
}


#drc-calculator #drc-calculator-results[hidden] {
    display: none !important;
}


#drc-calculator #drc-calculator-results .drc-result-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding: 10px 0;

    border-bottom: 1px solid #e5e7eb;
}


#drc-calculator #drc-calculator-results .drc-result-row:first-child {
    padding-top: 0;
}


#drc-calculator #drc-calculator-results .drc-result-row:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}


#drc-calculator #drc-calculator-results .drc-result-label {
    color: #6b7280;

    font-size: 14px;

    line-height: 1.4;
}


#drc-calculator #drc-calculator-results .drc-result-value {
    color: #111827;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.4;

    text-align: right;
}


#drc-calculator #drc-calculator-results .drc-result-total {
    margin-top: 6px;

    padding-top: 14px;

    border-top: 1px solid #d1d5db;
}


#drc-calculator #drc-calculator-results
.drc-result-total
.drc-result-label {
    color: #111827;

    font-weight: 700;
}


#drc-calculator #drc-calculator-results
.drc-result-total
.drc-result-value {
    color: #111827;

    font-size: 18px;
    font-weight: 700;
}


/* ==========================================================
   RESULT VALUES
   ========================================================== */

#drc-calculator #drc-route-distance,
#drc-calculator #drc-route-duration,
#drc-calculator #drc-price-per-km,
#drc-calculator #drc-minimum-price,
#drc-calculator #drc-base-price,
#drc-calculator #drc-commission,
#drc-calculator #drc-total-price {
    font-weight: 600;
}


#drc-calculator #drc-total-price {
    color: #111827;

    font-size: 18px;
    font-weight: 700;
}


/* ==========================================================
   GENERIC ERROR
   ========================================================== */

#drc-calculator #drc-result .drc-error,
#drc-calculator .drc-error {
    color: #dc2626;
}


/* ==========================================================
   WHATSAPP
   ========================================================== */

#drc-calculator .drc-whatsapp {
    position: relative;

    display: block;

    width: 100%;

    min-height: 48px;

    margin-top: 15px;

    padding: 0 20px;

    border: 0;
    border-radius: 12px;

    background: #25d366;
    background-color: #25d366;

    color: #ffffff;

    font-family: inherit;

    font-size: 15px;
    font-weight: 600;

    line-height: 48px;

    text-align: center;

    cursor: pointer;

    transition:
            background-color 0.2s ease,
            opacity 0.2s ease,
            transform 0.15s ease;

    -webkit-tap-highlight-color: transparent;
}


#drc-calculator .drc-whatsapp[hidden] {
    display: none !important;
}


#drc-calculator .drc-whatsapp:hover {
    background: #1ebe5d;
    background-color: #1ebe5d;
}


#drc-calculator .drc-whatsapp:active {
    transform: translateY(1px);
}


#drc-calculator .drc-whatsapp:focus-visible {
    outline: 3px solid rgba(37, 211, 102, 0.25);
    outline-offset: 2px;
}


#drc-calculator .drc-whatsapp:disabled {
    opacity: 0.6;

    cursor: not-allowed;
}


/* ==========================================================
   DATE / TIME
   ========================================================== */

#drc-calculator input[type="date"],
#drc-calculator input[type="time"] {
    position: relative;

    z-index: 1;

    appearance: auto;
    -webkit-appearance: auto;

    cursor: pointer;

    touch-action: manipulation;

    -webkit-tap-highlight-color: transparent;
}


#drc-calculator
input[type="date"]::-webkit-calendar-picker-indicator,
#drc-calculator
input[type="time"]::-webkit-calendar-picker-indicator {
    width: 18px;
    height: 18px;

    cursor: pointer;

    opacity: 0.65;
}


/* ==========================================================
   PLACEHOLDER
   ========================================================== */

#drc-calculator input::placeholder,
#drc-calculator textarea::placeholder {
    color: #9ca3af;

    opacity: 1;
}


/* ==========================================================
   HIDDEN INPUTS
   ========================================================== */

#drc-calculator input[type="hidden"] {
    display: none !important;
}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

/*
 * IMPORTANT:
 * Do NOT use:
 *
 * #drc-calculator button { ... }
 *
 * with global properties that could affect layout outside
 * the calculator.
 *
 * Everything remains scoped here.
 */

#drc-calculator button {
    -webkit-tap-highlight-color: transparent;
}


#drc-calculator button:focus-visible,
#drc-calculator input:focus-visible,
#drc-calculator textarea:focus-visible {
    outline-offset: 2px;
}


/* ==========================================================
   OPEN DROPDOWN
   ========================================================== */

/*
 * IMPORTANT:
 *
 * We intentionally DO NOT disable pointer-events on all
 * following calculator fields here.
 *
 * Doing so can create unexpected mobile hit-testing and
 * stacking interactions with themes/page navigation.
 *
 * Dropdown z-index is handled locally by the location field.
 */


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 700px) {

    #drc-calculator .drc-vehicle-options {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 600px) {

    #drc-calculator {
        width: 100%;
        max-width: 100%;

        padding: 20px;

        border-radius: 14px;

        overflow: visible;
    }


    #drc-calculator .drc-field {
        margin-bottom: 20px;

        overflow: visible;
    }


    /*
     * Local stacking only.
     */

    #drc-calculator .drc-pickup-location-field {
        z-index: 30;
    }


    #drc-calculator .drc-dropoff-location-field {
        z-index: 20;
    }


    #drc-calculator .drc-field:not(.drc-location-field) {
        z-index: 1;
    }


    #drc-calculator .drc-location-input-wrap {
        overflow: visible;
    }


    /* Location input */

    #drc-calculator
    .drc-location-input-wrap
    input[type="text"] {
        width: 100%;
        height: 48px;

        padding-right: 48px;

        background: #ffffff;
        background-color: #ffffff;

        color: #111827;

        opacity: 1;

        touch-action: manipulation;

        -webkit-tap-highlight-color: transparent;
    }


    /* Dropdown */

    #drc-calculator .drc-results {
        top: calc(100% + 6px);

        max-height: min(320px, 55vh);

        border-radius: 10px;

        box-shadow:
                0 16px 32px rgba(0, 0, 0, 0.15),
                0 5px 14px rgba(0, 0, 0, 0.08);

        overflow-x: hidden;
        overflow-y: auto;

        pointer-events: auto;

        touch-action: manipulation;

        -webkit-overflow-scrolling: touch;

        overscroll-behavior: contain;
    }


    /* Result */

    #drc-calculator .drc-results .drc-location {
        min-height: 48px;

        padding: 14px;

        background: #ffffff;
        background-color: #ffffff;

        opacity: 1;

        transform: none;
        filter: none;

        backdrop-filter: none;
        -webkit-backdrop-filter: none;

        mix-blend-mode: normal;

        pointer-events: auto;

        touch-action: manipulation;
    }


    /* Search messages */

    #drc-calculator .drc-results .drc-search-loading,
    #drc-calculator .drc-results .drc-search-empty,
    #drc-calculator .drc-results .drc-search-error {
        padding: 15px;

        pointer-events: auto;
    }


    /* More results */

    #drc-calculator .drc-results .drc-more-results,
    #drc-calculator .drc-results .drc-load-more {
        min-height: 48px;

        padding: 14px;

        pointer-events: auto;

        touch-action: manipulation;
    }


    /* Date/time */

    #drc-calculator input[type="date"],
    #drc-calculator input[type="time"] {
        z-index: 1;
    }


    /* Vehicle */

    #drc-calculator .drc-vehicle-options {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* Results */

    #drc-calculator #drc-calculator-results
    .drc-result-row {
        align-items: flex-start;
    }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 420px) {

    #drc-calculator {
        padding: 16px;

        border-radius: 12px;

        overflow: visible;
    }


    #drc-calculator .drc-results {
        top: calc(100% + 6px);

        max-height: min(300px, 50vh);

        border-radius: 9px;
    }


    #drc-calculator .drc-results .drc-location {
        min-height: 48px;

        padding: 13px 14px;
    }


    #drc-calculator .drc-vehicle-options {
        gap: 8px;
    }


    #drc-calculator .drc-vehicle-option {
        min-height: 125px;

        padding: 14px 8px;
    }


    #drc-calculator .drc-vehicle-icon {
        width: 60px;
        height: 52px;
    }


    #drc-calculator .drc-vehicle-icon svg {
        width: 60px;
        height: 48px;
    }


    #drc-calculator .drc-vehicle-name {
        font-size: 14px;
    }


    #drc-calculator #drc-calculator-results {
        padding: 14px;
    }


    #drc-calculator #drc-calculator-results
    .drc-result-row {
        gap: 10px;
    }


    #drc-calculator #drc-calculator-results
    .drc-result-label,
    #drc-calculator #drc-calculator-results
    .drc-result-value {
        font-size: 13px;
    }

}


/* ==========================================================
   TOUCH DEVICES
   ========================================================== */

@media (hover: none) and (pointer: coarse) {

    #drc-calculator .drc-results .drc-location:hover {
        background: #ffffff;
        background-color: #ffffff;
    }


    #drc-calculator .drc-results .drc-location:active {
        background: #eef2ff;
        background-color: #eef2ff;
    }


    #drc-calculator .drc-results
    .drc-more-results:hover,
    #drc-calculator .drc-results
    .drc-load-more:hover {
        background: #f9fafb;
        background-color: #f9fafb;
    }


    #drc-calculator .drc-results
    .drc-more-results:active,
    #drc-calculator .drc-results
    .drc-load-more:active {
        background: #eef2ff;
        background-color: #eef2ff;
    }


    /*
     * Dropdown remains tappable.
     */

    #drc-calculator .drc-results,
    #drc-calculator .drc-results .drc-location,
    #drc-calculator .drc-results .drc-more-results,
    #drc-calculator .drc-results .drc-load-more {
        pointer-events: auto;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    #drc-calculator *,
    #drc-calculator *::before,
    #drc-calculator *::after {
        scroll-behavior: auto;

        transition-duration: 0.01ms;

        animation-duration: 0.01ms;

        animation-iteration-count: 1;
    }

}