/* Return-trip upsell on the one-way checkout.
   The discount has to be the loudest thing in the block — it is the reason the
   customer stops and reads — so it gets the accent pill, and the old price is
   struck through next to the new one. */

.sm-return-offer {
    margin: 0 0 24px;
    padding: 20px 22px;
    background: #EEF4FF;
    border: 1px solid #DCE7FF;
    border-radius: 16px;
}

.sm-return-offer__body {
    display: flex;
    align-items: center;
    gap: 18px;
}

.sm-return-offer__icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #DCE7FF;
    color: #2563EB;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sm-return-offer__icon svg { width: 24px; height: 24px; }

.sm-return-offer__text { flex: 1 1 auto; min-width: 0; }

.sm-return-offer__title {
    font-size: 19px;
    font-weight: 700;
    color: #14213D;
    line-height: 1.35;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* The whole point of the block. */
.sm-return-offer__badge {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 999px;
    background: #16A34A;
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .4px;
    line-height: 1.2;
}

.sm-return-offer__sub {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: #475569;
}

.sm-return-offer__was { color: #94A3B8; margin-right: 4px; }
.sm-return-offer__now { color: #16A34A; font-size: 17px; }

.sm-return-offer__btn {
    flex: 0 0 auto;
    padding: 13px 26px;
    border: 1px solid #2563EB;
    border-radius: 10px;
    background: #fff;
    color: #2563EB;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.sm-return-offer__btn:hover { background: #2563EB; color: #fff; }

.sm-return-offer__link {
    background: none;
    border: 0;
    color: #64748B;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
    padding: 6px 4px;
}

/* The display:flex rules below would otherwise beat the [hidden] attribute the
   JS toggles, so the date panel and the confirmation would both show at once. */
.sm-return-offer [hidden] { display: none !important; }

/* Date / time panel */
.sm-return-offer__when {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #DCE7FF;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.sm-return-offer__when-row { display: flex; flex-direction: column; gap: 6px; }

.sm-return-offer__when-row label {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

.sm-return-offer__input {
    height: 44px;
    padding: 0 12px;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
    color: #14213D;
    min-width: 130px;
}

.sm-return-offer__time { display: flex; align-items: center; gap: 6px; }
.sm-return-offer__time .sm-return-offer__input { min-width: 78px; }

.sm-return-offer__when-actions { display: flex; align-items: center; gap: 10px; }

.sm-return-offer__error {
    flex: 1 0 100%;
    margin: 4px 0 0;
    color: #DC2626;
    font-size: 14px;
}

/* Confirmed state */
.sm-return-offer__added {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #DCE7FF;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #14213D;
}

.sm-return-offer__added-tick {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #16A34A;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

/* The return row in the price summary */
.sm-return-summary__badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #16A34A;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

@media (max-width: 767px) {
    .sm-return-offer { padding: 16px; }
    .sm-return-offer__body { flex-wrap: wrap; gap: 12px; }
    .sm-return-offer__icon { flex-basis: 44px; width: 44px; height: 44px; }
    .sm-return-offer__title { font-size: 17px; }
    .sm-return-offer__btn { width: 100%; }
    .sm-return-offer__when { gap: 12px; }
    .sm-return-offer__when-row { flex: 1 1 100%; }
    .sm-return-offer__input { width: 100%; }
}


/* Per-person figure.
   It lives in three places — the vehicle card, the sidebar total and the trip
   summary — because each of those is the one still on screen at some breakpoint.
   Styled here rather than inline so mobile can size it down without a rule war. */
.booking__per-person {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.4;
}

.booking__per-person--summary { margin-top: 2px; }

@media (max-width: 767px) {
    .booking__per-person { font-size: 12px; }
}