/* ==================================================
   Shared Trip Planner
   ================================================== */

.trip-planner.trip-planner-shared {
    width: 100%;
    max-width: 430px;
    padding: 24px;
    position: relative;
    border: 1px solid #d5dce5;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 35, 90, 0.14);
    box-sizing: border-box;
}

/* ==================================================
   Header
   ================================================== */

.trip-planner-shared .tp-header {
    margin-bottom: 20px;
}

.trip-planner-shared .tp-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.trip-planner-shared .tp-heading i {
    color: #173b7a;
    font-size: 27px;
    line-height: 1;
}

.trip-planner-shared .tp-heading h2 {
    margin: 0;
    color: #3f741f;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.2;
}

.trip-planner-shared .tp-header p {
    margin: 8px 0 0;
    color: #555;
    font-size: 14px;
    line-height: 1.45;
}

/* ==================================================
   Form Fields
   ================================================== */

.trip-planner-shared .tp-field {
    width: 100%;
    min-width: 0;
    margin-bottom: 16px;
}

.trip-planner-shared .tp-field label,
.trip-planner-shared .tp-type-options legend {
    display: block;
    margin-bottom: 7px;
    color: #173b7a;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

/*
This selector intentionally has greater specificity than
the old .trip-planner input[type=text] rule.
*/

.trip-planner.trip-planner-shared .tp-field input[type="text"],
.trip-planner.trip-planner-shared .tp-field input[type="time"] {
    display: block;
    width: 100%;
    min-width: 0;
    height: 46px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #8997a8;
    border-radius: 6px;
    background: #fff;
    color: #222;
    font-family: inherit;
    font-size: 16px;
    line-height: 46px;
    box-sizing: border-box;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}

.trip-planner.trip-planner-shared .tp-field input[type="text"]::placeholder {
    color: #666;
    opacity: 1;
}

.trip-planner.trip-planner-shared .tp-field input[type="text"]:hover,
.trip-planner.trip-planner-shared .tp-field input[type="time"]:hover {
    border-color: #52657c;
}

.trip-planner.trip-planner-shared .tp-field input[type="text"]:focus,
.trip-planner.trip-planner-shared .tp-field input[type="time"]:focus {
    border-color: #173b7a;
    outline: 3px solid rgba(23, 59, 122, 0.2);
    outline-offset: 1px;
}

/* ==================================================
   Starting Location and Destination
   ================================================== */

.trip-planner.trip-planner-shared #tp-input-start,
.trip-planner.trip-planner-shared #tp-input-end {
    width: 100%;
    margin: 0;
}

/* ==================================================
   Date and Time
   ================================================== */

.trip-planner-shared .tp-date-time-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 20px;
}

.trip-planner-shared .tp-date-time-row .tp-field {
    margin-bottom: 0;
}

.trip-planner.trip-planner-shared #tp-input-date,
.trip-planner.trip-planner-shared #tp-input-time {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 12px;
    box-sizing: border-box;
}

/* Leave room for the date-picker icon */
.trip-planner.trip-planner-shared #tp-input-date.tcal {
    padding-right: 42px;
}

/* Keep the native time picker usable */
.trip-planner.trip-planner-shared input[type="time"] {
    appearance: auto;
    -webkit-appearance: auto;
    line-height: normal;
}

.trip-planner.trip-planner-shared input[type="time"]::-webkit-calendar-picker-indicator {
    margin-left: 6px;
    cursor: pointer;
    opacity: 0.8;
}
/* ==================================================
   Trip Type
   ================================================== */

.trip-planner-shared .tp-type-options {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.trip-planner-shared .tp-option-row {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.trip-planner-shared .tp-option {
    display: flex;
    align-items: center;
    gap: 7px;
}

.trip-planner-shared .tp-option input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #173b7a;
}

.trip-planner-shared .tp-option label {
    margin: 0;
    color: #333;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
}

/* ==================================================
   Submit Button
   ================================================== */

.trip-planner.trip-planner-shared .tp-submit {
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 11px 18px;
    border: 0;
    border-radius: 6px;
    background: #173b7a;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    box-sizing: border-box;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.trip-planner.trip-planner-shared .tp-submit:hover {
    background: #0f2f65;
    transform: translateY(-2px);
    box-shadow: 0 7px 16px rgba(23, 59, 122, 0.25);
}

.trip-planner.trip-planner-shared .tp-submit:focus-visible {
    outline: 3px solid #fdb515;
    outline-offset: 3px;
}

/* ==================================================
   Responsive
   ================================================== */

@media (max-width: 670px) {
    .trip-planner.trip-planner-shared {
        max-width: none;
        padding: 20px;
    }
}

@media (max-width: 460px) {
    .trip-planner-shared .tp-date-time-row {
        grid-template-columns: 1fr;
    }

    .trip-planner-shared .tp-option-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .trip-planner-shared .tp-submit {
        transition: none;
    }
}