/* The ride estimate is a prototype garage, not a payment or booking screen. */
html.tappa-ride #payModal {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #f3fbff;
}
html.tappa-ride #payModal .modal-dialog { max-width: 630px; }
html.tappa-ride #payModal .modal-content {
    max-height: calc(100dvh - 28px);
    overflow-y: auto;
    border: 1px solid rgba(94, 188, 220, .38);
    border-radius: 22px;
    background: #09243a;
    box-shadow: 0 25px 70px rgba(0, 14, 28, .55);
    color: #f3fbff;
}
html.tappa-ride #payModal .modal-header {
    align-items: center;
    padding: 18px 22px 14px;
    border-bottom: 1px solid rgba(201, 237, 255, .12);
}
html.tappa-ride #payModal .modal-title {
    color: #f3fbff;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.03em;
}
html.tappa-ride #payModal .btn-close {
    flex: none;
    filter: invert(1);
    opacity: .8;
}
html.tappa-ride #payModal .btn-close:hover { opacity: 1; }
html.tappa-ride #payModal #pay_body { padding: 0; }
html.tappa-ride #payModal #pay_body.tappa-garage-ready::after { display: none; }

.tappa-garage { padding: 16px 18px 0; }
.tappa-garage-stage {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    grid-template-rows: auto 150px auto;
    align-items: center;
    overflow: hidden;
    min-height: 242px;
    padding: 13px;
    border: 1px solid rgba(194, 239, 255, .5);
    border-radius: 18px;
    background: radial-gradient(circle at 49% 26%, #b8edff 0, #75bddb 42%, #28658d 100%);
    color: #08243a;
    outline: none;
}
.tappa-garage-stage:focus-visible { box-shadow: 0 0 0 3px #4bdbff; }
.tappa-garage-stage-top {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
}
.tappa-garage-stage-top em { font-style: normal; color: #36637a; }
.tappa-garage-arrow {
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(10, 45, 70, .3);
    border-radius: 50%;
    background: rgba(255, 255, 255, .72);
    color: #09243a;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}
.tappa-garage-arrow:hover, .tappa-garage-arrow:focus-visible {
    background: #fff;
    box-shadow: 0 0 0 3px rgba(7, 43, 66, .18);
    outline: none;
}
.tappa-garage-art {
    display: grid;
    place-items: center;
    width: 100%;
    height: 150px;
    min-width: 0;
}
.tappa-garage-art img, .tappa-garage-art svg {
    display: block;
    width: min(100%, 410px);
    max-height: 145px;
    object-fit: contain;
    filter: drop-shadow(0 13px 11px rgba(1, 25, 40, .26));
}
.tappa-garage-car-info {
    grid-column: 1 / -1;
    text-align: center;
}
.tappa-garage-car-info span {
    color: #164965;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.tappa-garage-car-info h3 {
    margin: 1px 0 0;
    color: #071e31;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.035em;
}
.tappa-garage-heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 17px 2px 9px;
}
.tappa-garage-heading h3 { margin: 0; font-size: 15px; font-weight: 800; }
.tappa-garage-heading span { color: #a0c5d8; font-size: 11px; }
.tappa-garage-options {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: #34718f transparent;
}
.tappa-garage-option {
    flex: 1 0 104px;
    display: grid;
    justify-items: start;
    align-content: start;
    min-height: 104px;
    padding: 10px;
    border: 1px solid rgba(145, 203, 226, .27);
    border-radius: 13px;
    background: #10334b;
    color: #f3fbff;
    text-align: left;
    scroll-snap-align: center;
    cursor: pointer;
}
.tappa-garage-option:hover, .tappa-garage-option:focus-visible {
    border-color: #66d5f4;
    outline: none;
}
.tappa-garage-option.is-selected {
    border-color: #42d8ff;
    background: #154764;
    box-shadow: inset 0 0 0 1px #42d8ff;
}
.tappa-garage-option-art {
    display: grid;
    place-items: center;
    width: 100%;
    height: 47px;
    margin-bottom: 4px;
}
.tappa-garage-option-art img, .tappa-garage-option-art svg {
    display: block;
    width: 100%;
    max-height: 47px;
    object-fit: contain;
}
.tappa-garage-option strong {
    overflow: hidden;
    width: 100%;
    color: #f3fbff;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.tappa-garage-option small { color: #a7d6e9; font-size: 11px; }
.tappa-garage-fare {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 12px;
    margin-top: 4px;
    padding: 15px 17px;
    border: 1px solid rgba(71, 216, 255, .42);
    border-radius: 15px;
    background: linear-gradient(115deg, #154a67, #10334b 80%);
}
.tappa-garage-fare-label, .tappa-garage-rate span {
    display: block;
    color: #b5d9e9;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}
.tappa-garage-fare [data-garage-fare] {
    display: block;
    color: #fff;
    font-size: clamp(30px, 6vw, 40px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.045em;
}
.tappa-garage-rate { text-align: right; white-space: nowrap; }
.tappa-garage-rate strong { color: #74e2ff; font-size: 13px; }
.tappa-garage-disclaimer {
    margin: 9px 2px 0;
    color: #b2cedc;
    font-size: 11px;
    line-height: 1.45;
}
html.tappa-ride #payModal #tappaRideQuoteDetails {
    padding: 8px 20px 0 !important;
    color: #b9d8e7 !important;
    font-size: 12px;
}
html.tappa-ride #payModal #tappaRideRouteStatus {
    padding: 6px 20px 12px !important;
    color: #a2c7da !important;
    font-size: 11px;
}
html.tappa-ride #payModal .modal-footer {
    padding: 12px 20px;
    border-top: 1px solid rgba(201, 237, 255, .12);
}
html.tappa-ride #payModal .modal-footer .btn {
    min-height: 42px;
    padding: 9px 18px;
    border: 0;
    border-radius: 10px;
    background: #54d9ff;
    color: #08243a;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
html.tappa-ride #payModal .modal-footer .btn:hover,
html.tappa-ride #payModal .modal-footer .btn:focus-visible { background: #9deaff; }
@media (max-width: 600px) {
    html.tappa-ride #payModal .modal-dialog { max-width: calc(100vw - 20px); margin: 10px auto; }
    html.tappa-ride #payModal .modal-header { padding: 13px 16px 10px; }
    .tappa-garage { padding: 10px 11px 0; }
    .tappa-garage-stage { min-height: 207px; grid-template-rows: auto 116px auto; padding: 10px; }
    .tappa-garage-art { height: 116px; }
    .tappa-garage-art img, .tappa-garage-art svg { max-height: 112px; }
    .tappa-garage-car-info h3 { font-size: 19px; }
    .tappa-garage-option { flex: 0 0 112px; min-height: 98px; }
}
@media (max-height: 700px) and (max-width: 600px) {
    .tappa-garage-stage { min-height: 183px; grid-template-rows: auto 94px auto; }
    .tappa-garage-art { height: 94px; }
    .tappa-garage-art img, .tappa-garage-art svg { max-height: 92px; }
    .tappa-garage-heading { padding-top: 11px; }
    .tappa-garage-option { min-height: 91px; }
    .tappa-garage-option-art { height: 39px; }
    .tappa-garage-option-art img, .tappa-garage-option-art svg { max-height: 39px; }
}