/* =========================================================
   ASHRAY CABS
   COMPLETE BOOKING PAGE CSS
   booking.html uses THIS FILE ONLY
   ========================================================= */


/* =========================================================
   GOOGLE FONTS
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap");


/* =========================================================
   VARIABLES
   ========================================================= */

:root {
    --navy: #020817;
    --navy-light: #07132c;
    --navy-card: #071735;

    --white: #ffffff;
    --text: #d8dce8;
    --muted: #9299aa;

    --border: rgba(255,255,255,0.10);

    --yellow: #ffd000;
    --yellow-bright: #ffdf3d;

    --purple-dark: #49225b;
    --purple: #6e3482;
    --purple-light: #a56abd;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: auto;
    background: #020817;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family: "Manrope", sans-serif;

    color: var(--text);

    background:
        radial-gradient(
            circle at 50% -15%,
            transparent 42%
        ),
        linear-gradient(
            180deg,
            var(--purple-dark) 0%,
            var(--purple) 55%,
            var(--purple-light) 100%
        );

    animation: none;

    /*
       Space for the fixed header.
    */
    padding-top: 78px;
}


/* =========================================================
   HEADINGS
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Space Grotesk", sans-serif;
    color: var(--white);
}


.main-header {
    position: relative !important;

    top: auto !important;
    left: auto !important;

    width: 100% !important;
    height: 78px !important;
    min-height: 78px !important;

    margin: 0 !important;
    padding: 0 45px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    box-sizing: border-box !important;

    /* SLIGHTLY DARKER PURPLE */
    background: rgba(60, 28, 72, 0.72) !important;
    background-color: rgba(60, 28, 72, 0.72) !important;

    color: #ffffff !important;

    border-bottom: 1px solid rgba(255,255,255,0.18);

    box-shadow: 0 4px 18px rgba(0,0,0,0.12);

    z-index: 1000 !important;
}


/* =========================================================
   LOGO
   ========================================================= */

.logo-container {
    display: flex;
    align-items: center;

    gap: 12px;

    flex-shrink: 0;
}

.logo-container a {
    display: flex;
    align-items: center;

    text-decoration: none;
}

.site-logo {
    width: 165px;
    height: auto;

    object-fit: contain;
    object-position: center;

    display: block;

    border-radius: 6px;

    transition: none;
}

.site-logo:hover {
    transform: scale(1.04);
}

.logo-text {
    color: white;

    font-size: 1.35rem;
    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.main-header nav {
    display: flex;
    align-items: center;

    gap: 28px;
}

.main-header nav a {
    color: white;

    text-decoration: none;

    font-size: 1rem;
    font-weight: 600;

    transition: none;
}

.main-header nav a:hover {
    color: var(--yellow);

    transform: translateY(-2px);
}


/* =========================================================
   COMMON FORM FONT
   ========================================================= */

label {
    font-family: "Manrope", sans-serif;
    font-weight: 600;
}

input,
select,
textarea {
    font-family: "Manrope", sans-serif;
}


/* =========================================================
   COMMON BUTTONS
   ========================================================= */

button,
.btn,
a.btn,
.pay-button {
    font-family: "Manrope", sans-serif;
}


.booking-page {
    min-height: 100vh;
    padding: 70px 20px;
    display: flex;
    justify-content: center;
    align-items: center;

    background:
        radial-gradient(
            circle at 50% -15%,
            rgba(123, 53, 201, 0.25),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #49225b 0%,
            #6e3482 55%,
            #a56abd 100%
        ) !important;
}


/* =========================================================
   BOOKING CARD
   ========================================================= */

.booking-card {
    width: 100%;
    max-width: 600px;

    padding: 40px;

    border-radius: 24px;

    background: rgba(73,34,91,0.88);

    border: 1px solid rgba(255,255,255,0.15);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 8px 32px rgba(0,0,0,0.20),
        inset 0 1px 1px rgba(255,255,255,0.25);

    color: #ffffff;
}


/* =========================================================
   BOOKING HEADINGS
   ========================================================= */

.booking-card h2 {
    margin-bottom: 10px;

    text-align: center;

    font-size: 2rem;

    color: #ffffff;
}

.booking-card > p {
    margin-bottom: 28px;

    text-align: center;

    color: #ffffff;
}


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

.booking-card label {
    display: block;

    margin: 15px 0 7px;

    color: #ffffff;

    font-weight: 600;
}


/* =========================================================
   ALL BOOKING FIELDS
   TRANSPARENT GLASS
   ========================================================= */

.booking-card input,
.booking-card select,
.booking-card textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 13px;

    background: transparent !important;
    background-color: transparent !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    border: 1px solid rgba(255,255,255,0.30);

    border-radius: 10px;

    outline: none;

    box-shadow: none;

    font-family: "Manrope", sans-serif;
}

.booking-card input:focus,
.booking-card select:focus,
.booking-card textarea:focus {
    background: transparent !important;
    background-color: transparent !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    border-color: rgba(255,208,0,0.70);

    outline: none;

    box-shadow: none;
}

.booking-card input::placeholder,
.booking-card textarea::placeholder {
    color: rgba(255,255,255,0.65);

    opacity: 1;
}


/* =========================================================
   FROM / TO
   ========================================================= */

#bookingSection #from,
#bookingSection #to {
    width: 100% !important;

    height: 52px !important;
    min-height: 52px !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    padding: 0 16px !important;

    background: transparent !important;
    background-color: transparent !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    border: 1px solid rgba(255,255,255,0.30) !important;

    border-radius: 14px !important;

    outline: none !important;

    box-shadow: none !important;

    appearance: none;
    -webkit-appearance: none;

    font-family: "Manrope", sans-serif;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.2;
}

#bookingSection #from:focus,
#bookingSection #to:focus {
    height: 52px !important;

    background: transparent !important;
    background-color: transparent !important;

    border-color: rgba(255,208,0,0.70) !important;

    box-shadow: none !important;

    outline: none !important;
}

#bookingSection #from::placeholder,
#bookingSection #to::placeholder {
    color: rgba(255,255,255,0.65) !important;

    opacity: 1 !important;

    font-size: 16px;
}


/* =========================================================
   FROM / TO AUTOFILL
   ========================================================= */

#bookingSection #from:-webkit-autofill,
#bookingSection #from:-webkit-autofill:hover,
#bookingSection #from:-webkit-autofill:focus,
#bookingSection #from:-webkit-autofill:active,
#bookingSection #to:-webkit-autofill,
#bookingSection #to:-webkit-autofill:hover,
#bookingSection #to:-webkit-autofill:focus,
#bookingSection #to:-webkit-autofill:active {
    background: transparent !important;
    background-color: transparent !important;

    -webkit-text-fill-color: #ffffff !important;

    transition: none;

    box-shadow: none !important;
}


/* =========================================================
   LOCATION ERROR
   ========================================================= */

.booking-card input.location-error {
    border: 2px solid #ff6b6b;

    box-shadow:
        0 0 0 3px rgba(255,107,107,0.25);
}

.location-error-message {
    display: none;

    margin-top: 8px;

    text-align: left;

    color: #ffe1e1;

    font-size: 0.9rem;

    font-weight: 600;
}

.location-error-message.show {
    display: block;
}


/* =========================================================
   JOURNEY TYPE
   ========================================================= */

.journey-type-group {
    width: 100%;

    margin-bottom: 18px;
}

.journey-type-label {
    display: block;

    margin-bottom: 8px;

    color: #ffffff;

    font-size: 15px;

    font-weight: 600;
}

.journey-type-options {
    display: flex;

    gap: 12px;

    width: 100%;
}

.journey-option {
    position: relative;

    flex: 1;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 13px;

    min-height: 42px;

    border-radius: 10px;

    cursor: pointer;

    background: rgba(73,34,91,0.70);

    border: 1px solid rgba(255,255,255,0.20);

    color: #ffffff;

    box-sizing: border-box;

    transition: none;
}

.journey-option:hover {
    background: rgba(73,34,91,0.85);
}


/* Hide real radio */

.journey-option input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}


/* Visible radio circle */

.journey-option .radio-circle {
    display: block !important;

    width: 19px !important;
    height: 19px !important;

    min-width: 19px !important;
    min-height: 19px !important;

    border: 2px solid rgba(255,255,255,0.80) !important;

    border-radius: 50% !important;

    position: relative !important;

    box-sizing: border-box !important;

    flex-shrink: 0 !important;
}


/* Selected container */

.journey-option:has(input[type="radio"]:checked) {
    background: rgba(255,208,0,0.10);

    border-color: #ffd000;

    box-shadow:
        0 0 14px rgba(255,208,0,0.10);
}


/* Selected circle */

.journey-option:has(input[type="radio"]:checked)
.radio-circle {
    border-color: #ffd000 !important;
}


/* Selected yellow dot */

.journey-option:has(input[type="radio"]:checked)
.radio-circle::after {
    content: "";

    display: block !important;

    position: absolute !important;

    width: 9px !important;
    height: 9px !important;

    left: 50% !important;
    top: 50% !important;

    transform: translate(-50%,-50%) !important;

    border-radius: 50% !important;

    background: #ffd000 !important;
}


/* Journey text */

.journey-text {
    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.2;
}

.journey-option:has(input[type="radio"]:checked)
.journey-text {
    color: #ffd000;

    font-weight: 700;
}


/* =========================================================
   DATE PICKER
   ========================================================= */

.date-picker-wrapper {
    position: relative;

    width: 100%;

    margin-bottom: 12px;

    z-index: 30;
}

#date {
    cursor: pointer;
}


/* Calendar */

.date-picker-wrapper .custom-calendar {
    display: none !important;

    position: absolute !important;

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

    width: 310px !important;
    max-width: 100% !important;

    padding: 16px !important;

    background: rgba(45,22,55,0.98) !important;

    border: 1px solid rgba(255,255,255,0.25) !important;

    border-radius: 14px !important;

    box-shadow:
        0 15px 40px rgba(0,0,0,0.45) !important;

    z-index: 99999 !important;

    box-sizing: border-box !important;
}

.date-picker-wrapper .custom-calendar.active {
    display: block !important;
}


/* Calendar header */

.custom-calendar .calendar-header {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 15px;
}

.custom-calendar .calendar-title {
    color: #ffffff;

    font-size: 16px;

    font-weight: 700;
}

.custom-calendar .calendar-nav {
    display: flex;

    gap: 6px;
}


/* Calendar arrows */

.custom-calendar .calendar-nav button {
    width: 34px !important;
    height: 34px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 1px solid rgba(255,255,255,0.20) !important;

    border-radius: 8px !important;

    background: rgba(255,255,255,0.10) !important;

    color: #ffffff !important;

    font-size: 22px !important;

    line-height: 1 !important;

    cursor: pointer;
}

.custom-calendar .calendar-nav button:hover {
    background: rgba(255,208,0,0.18) !important;
}

.custom-calendar .calendar-nav button:disabled {
    opacity: 0.3 !important;

    cursor: not-allowed !important;
}


/* Weekdays */

.custom-calendar .calendar-weekdays {
    display: grid !important;

    grid-template-columns:
        repeat(7,1fr) !important;

    gap: 5px !important;

    margin-bottom: 7px;
}

.custom-calendar .calendar-weekdays div {
    text-align: center;

    color: rgba(255,255,255,0.65);

    font-size: 12px;

    font-weight: 600;
}


/* Calendar days */

.custom-calendar .calendar-days {
    display: grid !important;

    grid-template-columns:
        repeat(7,1fr) !important;

    gap: 5px !important;
}

.custom-calendar .calendar-day {
    width: 100% !important;

    height: 34px !important;

    display: flex !important;

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

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 7px;

    color: #ffffff;

    font-size: 13px;

    cursor: pointer;

    box-sizing: border-box;
}

.custom-calendar .calendar-day:hover {
    background: rgba(255,208,0,0.18);
}

.custom-calendar .calendar-day.today {
    border: 1px solid #ffd000;
}

.custom-calendar .calendar-day.selected {
    background: #ffd000 !important;

    color: #351d3d !important;

    font-weight: 700;
}

.custom-calendar .calendar-day.disabled {
    opacity: 0.25;

    cursor: not-allowed;

    pointer-events: none;
}

.custom-calendar .calendar-day.empty {
    pointer-events: none;
}


/* =========================================================
   TIME PICKER
   ========================================================= */

.time-picker-wrapper {
    position: relative;

    width: 100%;
}

#time {
    width: 100%;

    box-sizing: border-box;

    cursor: pointer;
}

.custom-time-picker {
    display: none;

    position: absolute;

    top: calc(100% + 10px);

    left: 0;

    width: 285px;

    padding: 18px;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            rgba(48,35,91,0.96),
            rgba(24,17,52,0.98)
        );

    border: 1px solid rgba(255,255,255,0.20);

    border-radius: 22px;

    box-shadow:
        0 20px 50px rgba(0,0,0,0.45);

    backdrop-filter: blur(25px);

    color: white;

    z-index: 10000;
}

.custom-time-picker.show {
    display: block;

    animation: none;
}

.time-picker-header {
    text-align: center;

    font-size: 16px;

    font-weight: 700;

    margin-bottom: 16px;
}

.time-picker-columns {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;
}

.time-column {
    width: 92px;

    text-align: center;
}

.time-column-title {
    font-size: 11px;

    font-weight: 600;

    margin-bottom: 7px;

    color: rgba(255,255,255,0.58);
}

.time-scroll-list {
    width: 100%;

    height: 132px;

    overflow-y: auto;

    padding: 42px 4px;

    border-radius: 15px;

    background:
        rgba(255,255,255,0.06);

    border:
        1px solid rgba(255,255,255,0.13);

    scrollbar-width: none;

    scroll-behavior: smooth;
}

.time-scroll-list::-webkit-scrollbar {
    display: none;
}

.time-option {
    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 2px;

    border-radius: 9px;

    font-size: 14px;

    color: rgba(255,255,255,0.68);

    cursor: pointer;
}

.time-option:hover {
    background: rgba(255,255,255,0.08);

    color: white;
}

.time-option.selected {
    background:
        linear-gradient(
            135deg,
            #9b63ff,
            #7c3aed
        );

    color: white;

    font-weight: 700;
}

.time-separator {
    font-size: 21px;

    font-weight: 700;

    color: white;
}

.time-done-button {
    width: 100%;

    height: 44px;

    margin-top: 16px;

    border: none;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #ffd000,
            #ffc400
        );

    color: #020817;

    font-weight: 700;

    cursor: pointer;
}


/* =========================================================
   CUSTOMER DETAILS
   ========================================================= */

#bookingSection #name,
#bookingSection #phone,
#bookingSection #email,
#bookingSection #notes {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 52px !important;
    padding: 13px 15px !important;
    margin: 0 0 18px 0 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #222222 !important;
    -webkit-text-fill-color: #222222 !important;
    border: 2px solid #9a9a9a !important;
    border-style: solid !important;
    border-radius: 8px !important;
    outline: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    font-size: 15px !important;
}

#bookingSection #notes {
    min-height: 120px !important;
    height: 120px !important;
    resize: vertical !important;
}

#bookingSection #name:focus,
#bookingSection #phone:focus,
#bookingSection #email:focus,
#bookingSection #notes:focus {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #222222 !important;
    -webkit-text-fill-color: #222222 !important;
    border: 2px solid #6e3482 !important;
    border-style: solid !important;
    box-shadow: 0 0 0 2px rgba(110,52,130,0.12) !important;
}

#bookingSection #name::placeholder,
#bookingSection #phone::placeholder,
#bookingSection #email::placeholder,
#bookingSection #notes::placeholder {
    color: #777777 !important;
    -webkit-text-fill-color: #777777 !important;
    opacity: 1 !important;
}


/* =========================================================
   CUSTOMER DETAILS HEADING
   ========================================================= */

#bookingSection h3 {
    text-align: center !important;

    margin-top: 30px !important;

    margin-bottom: 22px !important;
}


/* =========================================================
   TERMS & CONDITIONS
   ========================================================= */

.terms-conditions {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 25px 0 !important;
    padding: 20px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 2px solid #9a9a9a !important;
    border-style: solid !important;
    border-radius: 10px !important;
    color: #222222 !important;
    opacity: 1 !important;
}

.terms-conditions h3 {
    margin: 0 0 14px !important;
    padding: 0 !important;
    color: #222222 !important;
    text-align: center !important;
    font-size: 18px !important;
}

.terms-conditions ol {
    display: block !important;
    margin: 0 !important;
    padding-left: 24px !important;
}

.terms-conditions li {
    display: list-item !important;
    margin: 0 0 8px !important;
    color: #333333 !important;
    line-height: 1.5 !important;
    font-size: 14px !important;
}

.terms-conditions li::marker {
    color: #6e3482 !important;
}


/* =========================================================
   TERMS CHECKBOX
   ========================================================= */

.terms-checkbox {
    display: flex;

    align-items: center;

    gap: 10px;

    width: 100%;

    margin-top: 18px;

    font-size: 16px;

    font-weight: 600;

    color: white;

    cursor: pointer;
}

.terms-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;

    margin: 0;

    flex: 0 0 18px;
}


/* =========================================================
   BOOKING BUTTON
   ========================================================= */

.booking-card .btn {
    width: 100%;

    margin-top: 25px;

    padding: 12px 24px;

    border-radius: 25px;

    background: var(--yellow);

    color: var(--navy);

    border:
        1px solid var(--yellow);

    font-weight: 700;

    cursor: pointer;

    transition: none;
}

.booking-card .btn:hover {
    background: var(--yellow-bright);

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(0,0,0,0.15);
}

.booking-card .btn:active {
    transform:
        translateY(0) scale(0.98);
}


/* =========================================================
   PAYMENT SECTION
   ========================================================= */

#paymentSection {
    width: 100%;

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 70px 20px;

    box-sizing: border-box;

    overflow: visible !important;
}

#paymentSection .booking-card {
    width: 100%;

    max-width: 700px;

    margin: 0 auto;

    background:
        rgba(73,34,91,0.88);

    border:
        1px solid rgba(255,255,255,0.15);
}


/* =========================================================
   PAYMENT DETAILS
   ========================================================= */

#paymentSection .payment-details {
    width: 100%;

    max-width: 600px;

    margin: 20px auto 0;

    padding: 10px 0;

    background: transparent;

    border: none;

    color: white;
}

#paymentSection .payment-details h3 {
    color: white;

    font-size: 1.2rem;

    margin-bottom: 15px;
}

#paymentSection .summary-row {
    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 0;

    border-bottom:
        1px solid rgba(255,255,255,0.30);

    color: white;
}

#paymentSection .summary-row span,
#paymentSection .summary-row strong {
    color: white;
}

#paymentSection .total-row {
    margin-top: 10px;

    padding-top: 18px;

    border-top: 1px solid white;

    border-bottom: none;

    font-size: 1.2rem;
}

#paymentSection .total-row strong {
    font-size: 1.3rem;

    color: var(--yellow);
}


/* =========================================================
   CHOOSE PAYMENT AMOUNT
   ========================================================= */

.payment-amount-section {
    width: 100% !important;

    max-width: 600px !important;

    margin: 25px auto !important;

    padding: 0 !important;

    display: grid !important;

    grid-template-columns:
        1fr 1fr !important;

    column-gap: 45px !important;

    row-gap: 10px !important;

    box-sizing: border-box !important;
}

.payment-amount-section h3 {
    grid-column: 1 / -1 !important;

    width: 100% !important;

    margin: 0 0 18px 0 !important;

    padding: 0 !important;

    text-align: center !important;

    font-size: 22px !important;

    line-height: 1.3 !important;

    color: #ffffff !important;
}


/* Payment amount option */

.payment-amount-option {
    width: 100% !important;

    min-width: 0 !important;

    min-height: 70px !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: flex-start !important;

    gap: 12px !important;

    margin: 0 !important;

    padding: 0 !important;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    text-align: left !important;

    color: #ffffff !important;

    box-sizing: border-box !important;

    cursor: pointer;
}


/* Payment amount radio */

.payment-amount-option input[type="radio"] {
    width: 20px !important;

    height: 20px !important;

    min-width: 20px !important;

    min-height: 20px !important;

    margin: 2px 0 0 0 !important;

    padding: 0 !important;

    flex: 0 0 20px !important;

    appearance: auto !important;

    -webkit-appearance: radio !important;

    -moz-appearance: radio !important;

    background: transparent !important;

    border: none !important;

    accent-color: #ffffff !important;

    cursor: pointer !important;
}


/* Text beside radio */

.payment-amount-option > span {
    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    gap: 3px !important;

    margin: 0 !important;

    padding: 0 !important;

    text-align: left !important;

    color: #ffffff !important;

    line-height: 1.3;
}

.payment-amount-option strong {
    display: block !important;

    margin: 0 !important;

    padding: 0 !important;

    color: #ffffff !important;

    font-size: 17px !important;

    font-weight: 700 !important;

    line-height: 1.3 !important;
}

.payment-amount-option small {
    display: block !important;

    margin: 0 !important;

    padding: 0 !important;

    color: #ffffff !important;

    font-size: 14px !important;

    line-height: 1.4 !important;
}

.payment-amount-option b {
    color: #ffffff !important;

    font-size: 15px !important;
}


/* =========================================================
   CHOOSE PAYMENT METHOD
   ========================================================= */

.payment-methods {
    width: 100% !important;

    margin: 22px 0 0 0 !important;

    padding: 0 !important;

    text-align: center !important;

    box-sizing: border-box !important;
}

.payment-methods h3 {
    width: 100% !important;

    margin: 0 0 6px 0 !important;

    padding: 0 !important;

    text-align: center !important;

    font-size: 22px !important;

    line-height: 1.3 !important;

    color: #ffffff !important;
}

.payment-methods .payment-instruction {
    width: 100% !important;

    margin: 0 0 20px 0 !important;

    padding: 0 !important;

    text-align: center !important;

    color:
        rgba(255,255,255,0.85) !important;

    font-size: 15px !important;
}


/* =========================================================
   PAYMENT METHOD OPTIONS
   ========================================================= */

.payment-method-options {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        repeat(3,1fr) !important;

    gap: 15px !important;

    align-items: stretch !important;
}

.payment-method-option {
    width: 100% !important;

    min-height: 55px !important;

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    padding: 12px 15px !important;

    box-sizing: border-box !important;

    background: transparent !important;

    border:
        1px solid rgba(255,255,255,0.25) !important;

    border-radius: 10px !important;
}

.payment-method-option input[type="radio"] {
    width: 18px !important;

    height: 18px !important;

    min-width: 18px !important;

    margin: 0 !important;

    accent-color: #ffffff !important;
}

.payment-method-option span {
    color: #ffffff !important;

    font-size: 15px !important;
}


/* =========================================================
   PAYMENT BUTTON
   ========================================================= */

#paymentSection #payButton {
    width: 100%;

    max-width: 600px;

    margin: 25px auto 0;

    display: block;

    padding: 16px;

    border-radius: 12px;

    background: var(--yellow);

    color: var(--navy);

    border: none;

    font-size: 18px;

    font-weight: 700;

    cursor: pointer;
}

#paymentSection #payButton:hover {
    background: var(--yellow-bright);
}
/* =========================================================
   FINAL BACK TO BOOKING BUTTON
   CENTERED INSIDE PAYMENT CARD
   ========================================================= */

#paymentSection #backButton {
    display: block !important;

    width: 225px !important;
    height: 48px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    margin-top: 30px !important;
    margin-bottom: 20px !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    float: none !important;

    clear: both !important;

    transform: none !important;

    text-align: center !important;

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

    color: #000000 !important;
    background: #ffd91a !important;

    border: none !important;
    border-radius: 24px !important;

    cursor: pointer !important;

    font-size: 15px !important;
    font-weight: 700 !important;

    line-height: 48px !important;

    white-space: nowrap !important;
}

/* HOVER */
#paymentSection #backButton:hover {
    color: #000000 !important;
    background: #ffffff !important;

    transform: translateY(-1px) !important;
}
/* =========================================================
   QR PAYMENT
   ========================================================= */

.desktop-qr-payment {
    display: block;

    width: 100%;

    text-align: center;

    margin: 28px auto;
}

.desktop-qr-payment h3 {
    margin-bottom: 15px;

    color: white;
}

#desktopUpiQr {
    width: 240px !important;

    height: 240px !important;

    margin: 20px auto !important;

    padding: 0 !important;

    display: block !important;

    overflow: hidden !important;

    background: white;
}

#desktopUpiQr canvas,
#desktopUpiQr img {
    display: block !important;

    width: 240px !important;

    height: 240px !important;

    margin: 0 !important;

    padding: 0 !important;

    object-fit: contain;
}

#desktopQrAmount {
    font-size: 20px;

    color: white;
}


/* =========================================================
   UPI OPTIONS
   ========================================================= */

.upi-options {
    display: flex;

    flex-direction: column;

    gap: 14px;

    width: 100%;

    max-width: 650px;

    margin: 28px auto 0;
}

.upi-option {
    width: 100%;

    min-height: 72px;

    padding: 10px 22px;

    display: flex;

    align-items: center;

    gap: 16px;

    background: #d9ba3f;

    border: none;

    border-radius: 14px;

    cursor: pointer;

    text-align: left;
}

.upi-option:hover {
    transform: translateY(-2px);

    box-shadow:
        0 9px 20px rgba(0,0,0,0.22);
}

.upi-logo {
    width: 52px;
    height: 52px;

    min-width: 52px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        rgba(255,255,255,0.9);

    flex-shrink: 0;
}

.upi-logo img {
    width: 44px;
    height: 44px;

    object-fit: contain;
}

.upi-option-text {
    display: flex;

    flex-direction: column;

    gap: 3px;
}

.upi-option-title {
    font-size: 17px;

    font-weight: 700;

    color: white;
}

.upi-option-subtitle {
    font-size: 13px;

    color:
        rgba(255,255,255,0.92);
}


/* =========================================================
   UPI AMOUNT
   ========================================================= */

.upi-payment-amount {
    width: 100%;

    margin: 18px auto;

    padding: 15px 18px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-radius: 12px;

    background:
        rgba(255,255,255,0.08);

    border:
        1px solid rgba(255,255,255,0.22);

    color: white;
}

.upi-payment-amount strong {
    font-size: 1.2rem;

    color: #ffd91a;
}

.qr-amount-text {
    margin-top: 12px;

    text-align: center;

    font-size: 17px;

    font-weight: 600;

    color: white;
}

.qr-amount-text strong {
    color: #ffd91a;

    font-size: 20px;
}


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

.mobile-upi-payment {
    display: none;
}


/* =========================================================
   CONFIRMATION PAGE
   ========================================================= */

.confirmation-page {
    width: 100%;

    min-height:
        calc(100vh - 90px);

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 60px 20px;

    box-sizing: border-box;
}

.confirmation-card {
    width: 100%;

    max-width: 680px;

    margin: 0 auto;

    padding: 40px;

    border-radius: 24px;

    background:
        rgba(73,34,91,0.88);

    border:
        1px solid rgba(255,255,255,0.15);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    color: white;

    text-align: center;
}

.confirmation-card h2 {
    color: var(--yellow);

    text-align: center;
}

.confirmation-card > p {
    text-align: center;

    color: white;
}


/* =========================================================
   RECEIPT
   ========================================================= */

.confirmation-card .receipt {
    width: 100%;

    margin-top: 25px;
}

.confirmation-card .summary-row {
    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    padding: 14px 0;

    border-bottom:
        1px solid rgba(255,255,255,0.15);
}

.confirmation-card .summary-row span {
    text-align: left;

    color:
        rgba(255,255,255,0.75);
}

.confirmation-card .summary-row strong {
    text-align: right;

    color: white;
}


/* =========================================================
   CONFIRMATION BUTTONS
   ========================================================= */

.confirmation-buttons {
    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 25px;
}

.confirmation-buttons .back-button {
    padding: 10px 20px;

    background: transparent;

    border: none;

    color: white;

    cursor: pointer;

    font-weight: 600;
}

.confirmation-buttons .back-button:hover {
    color: var(--yellow);

    text-decoration: underline;
}


/* =========================================================
   BOOKING / CONFIRMATION VISIBILITY
   ========================================================= */

#bookingForm {
    display: block;
}

#confirmationSection {
    display: none;
}

#confirmationSection[style*="display: block"] {
    display: flex !important;

    justify-content: center;

    align-items: center;
}

#bookingForm[style*="display: none"] {
    display: none !important;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes pageFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes timePickerOpen {
    from {
        opacity: 0;

        transform:
            translateY(-8px) scale(0.96);
    }

    to {
        opacity: 1;

        transform:
            translateY(0) scale(1);
    }
}


/* =========================================================
   FIELD ANIMATION
   ========================================================= */

.booking-card label,
.booking-card input,
.booking-card select,
.booking-card textarea {
    animation:
        fieldAppear 0.6s ease-out both;
}

@keyframes fieldAppear {
    from {
        opacity: 0;

        transform:
            translateY(8px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


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

@media (max-width: 900px) {

    .main-header {
        padding: 0 25px;
    }

    .main-header nav {
        gap: 16px;
    }

    .main-header nav a {
        font-size: 0.9rem;
    }

    .logo-text {
        font-size: 1.25rem;
    }

    .site-logo {
        width: 90px;
        height: 50px;
    }
}


@media (max-width: 767px) {

    .desktop-qr-payment {
        display: none;
    }

    .mobile-upi-payment {
        display: block;

        width: 100%;
    }

    #paymentSection {
        padding: 40px 15px;
    }

    #paymentSection .booking-card {
        max-width: 100%;

        padding: 25px;
    }

    #paymentSection .summary-row {
        flex-direction: column;

        align-items: flex-start;

        gap: 5px;
    }

    #paymentSection .summary-row strong {
        text-align: left;
    }

    .upi-option {
        min-height: 68px;

        padding: 9px 16px;
    }

    .upi-logo {
        width: 48px;
        height: 48px;

        min-width: 48px;
    }

    .upi-logo img {
        width: 40px;
        height: 40px;
    }
}


@media (max-width: 700px) {

    .payment-amount-section {
        grid-template-columns: 1fr !important;

        column-gap: 0 !important;
    }

    .payment-amount-section h3 {
        grid-column: 1 !important;
    }

    .payment-method-options {
        grid-template-columns: 1fr !important;
    }
}


@media (max-width: 650px) {

    .main-header {
        height: auto;

        min-height: 70px;

        padding: 10px 15px;

        flex-direction: column;

        gap: 8px;
    }

    .logo-container {
        justify-content: center;
    }

    .site-logo {
        width: 85px;
        height: 45px;
    }

    .main-header nav {
        width: 100%;

        justify-content: center;

        gap: 12px;

        flex-wrap: wrap;
    }

    .main-header nav a {
        font-size: 0.8rem;
    }
    .booking-page {
        padding: 40px 15px;

        align-items: flex-start;
    }

    .booking-card {
        max-width: 100%;

        padding: 25px;

        border-radius: 20px;
    }

    .booking-card h2 {
        font-size: 1.7rem;
    }

    .journey-type-options {
        flex-direction: column;

        gap: 10px;
    }

    .journey-option {
        width: 100%;
    }

    .custom-calendar {
        width: 270px !important;
    }

    .confirmation-page {
        padding: 30px 15px;

        align-items: flex-start;
    }

    .confirmation-card {
        padding: 25px 18px;
    }

    .confirmation-card .summary-row {
        gap: 10px;
    }
}


@media (max-width: 400px) {

    .custom-calendar {
        width: 255px !important;
    }
}
/* ==================================================
   CALCULATE / BOOKING BUTTON
   ================================================== */

#bookingForm button[type="submit"] {
    display: block !important;
    width: 100% !important;
    min-height: 52px !important;

    padding: 14px 24px !important;

    background: #ffd91a !important;
    background-color: #ffd91a !important;

    color: #49225b !important;
    -webkit-text-fill-color: #49225b !important;

    border: none !important;
    border-radius: 12px !important;

    font-size: 16px !important;
    font-weight: 700 !important;

    text-align: center !important;
    cursor: pointer !important;

    opacity: 1 !important;
    visibility: visible !important;

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.20) !important;

    transition: none;
}

#bookingForm button[type="submit"]:hover {
    background: #ffe44d !important;
    background-color: #ffe44d !important;

    color: #49225b !important;
    -webkit-text-fill-color: #49225b !important;

    transform: translateY(-2px) !important;

    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25) !important;
}

#bookingForm button[type="submit"]:disabled {
    display: block !important;

    background: #ffd91a !important;
    background-color: #ffd91a !important;

    color: #49225b !important;
    -webkit-text-fill-color: #49225b !important;

    opacity: 1 !important;
    visibility: visible !important;

    cursor: wait !important;
}
html,
body {
    margin: 0 !important;
    padding-top: 0 !important;
}
/* =========================================
   CHOOSE PAYMENT AMOUNT
   ========================================= */

.payment-amount-section {
    width: 100% !important;
    max-width: 600px !important;

    margin: 28px auto !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.payment-amount-section h3 {
    width: 100% !important;

    margin: 0 0 20px 0 !important;
    padding: 0 !important;

    text-align: center !important;

    color: #ffffff !important;

    font-size: 22px !important;
    font-weight: 700 !important;
}


/* TWO PAYMENT AMOUNT CONTAINERS */

.payment-amount-option {
    width: 100% !important;

    margin: 0 0 14px 0 !important;
    padding: 16px 18px !important;

    display: flex !important;
    align-items: center !important;

    box-sizing: border-box !important;

    /* GLASS CONTAINER */
    background: rgba(255,255,255,0.08) !important;

    border: 1px solid rgba(255,255,255,0.22) !important;

    border-radius: 14px !important;

    box-shadow:
        0 4px 14px rgba(0,0,0,0.10),
        inset 0 1px 1px rgba(255,255,255,0.12) !important;

    cursor: pointer !important;

    transition: none;
}


/* RADIO BUTTON */

.payment-amount-option input[type="radio"] {
    width: 20px !important;
    height: 20px !important;

    min-width: 20px !important;
    min-height: 20px !important;

    margin: 0 14px 0 0 !important;

    accent-color: #ffd91a !important;

    cursor: pointer !important;
}


/* TEXT INSIDE CONTAINER */

.payment-amount-option span {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;
}


.payment-amount-option strong {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 17px !important;
    font-weight: 700 !important;
}


.payment-amount-option small {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: rgba(255,255,255,0.82) !important;

    font-size: 14px !important;
}


.payment-amount-option b {
    color: #ffd91a !important;
}


/* HOVER */

.payment-amount-option:hover {
    background: rgba(255,255,255,0.13) !important;

    border-color: rgba(255,255,255,0.35) !important;

    transform: translateY(-1px) !important;
}
.minimum-billing-text {
    margin-top: 6px;
    color: #ffd91a;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
}

/* =========================================================
   SIMPLE WHITE BOOKING PAGE OVERRIDE
   - White page background
   - White booking form
   - White fields with dark text
   - No animations
   - No hover movement
   ========================================================= */

/* PAGE */
html,
body {
    background: #ffffff !important;
    color: #222222 !important;
    animation: none !important;
    transition: none !important;
}

/* Keep the header purple */


/* BOOKING PAGE BACKGROUND */
.booking-page {
    min-height: 100vh !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #222222 !important;
    animation: none !important;
    transition: none !important;
}

/* MAIN BOOKING CARD */
.booking-card {
    background: #ffffff !important;
    background-image: none !important;
    color: #222222 !important;
    border: 1px solid #dddddd !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    transition: none !important;
}

/* HEADINGS AND TEXT */
.booking-card h1,
.booking-card h2,
.booking-card h3,
.booking-card h4,
.booking-card h5,
.booking-card h6,
.booking-card p,
.booking-card label,
.booking-card span,
.booking-card strong,
.booking-card small {
    color: #222222 !important;
}

/* MAIN HEADING */
.booking-card h2 {
    color: #222222 !important;
}

/* ALL FORM FIELDS */
.booking-card input,
.booking-card select,
.booking-card textarea {
    background: #ffffff !important;
    background-image: none !important;
    color: #222222 !important;
    -webkit-text-fill-color: #222222 !important;
    border: 1px solid #cccccc !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    transition: none !important;
}

/* FIELD FOCUS */
.booking-card input:focus,
.booking-card select:focus,
.booking-card textarea:focus {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #222222 !important;
    -webkit-text-fill-color: #222222 !important;
    border-color: #49225b !important;
    box-shadow: none !important;
    outline: none !important;
}

/* PLACEHOLDERS */
.booking-card input::placeholder,
.booking-card textarea::placeholder {
    color: #888888 !important;
    opacity: 1 !important;
}

/* FROM / TO */
#bookingSection #from,
#bookingSection #to {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #222222 !important;
    -webkit-text-fill-color: #222222 !important;
    border: 1px solid #cccccc !important;
    box-shadow: none !important;
}

#bookingSection #from:focus,
#bookingSection #to:focus {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #222222 !important;
    -webkit-text-fill-color: #222222 !important;
    border-color: #49225b !important;
    box-shadow: none !important;
}

#bookingSection #from::placeholder,
#bookingSection #to::placeholder {
    color: #888888 !important;
}

/* AUTOFILL */
#bookingSection #from:-webkit-autofill,
#bookingSection #from:-webkit-autofill:hover,
#bookingSection #from:-webkit-autofill:focus,
#bookingSection #from:-webkit-autofill:active,
#bookingSection #to:-webkit-autofill,
#bookingSection #to:-webkit-autofill:hover,
#bookingSection #to:-webkit-autofill:focus,
#bookingSection #to:-webkit-autofill:active {
    -webkit-text-fill-color: #222222 !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    transition: none !important;
}

/* JOURNEY TYPE */
.journey-type-label {
    color: #222222 !important;
}

.journey-option {
    background: #ffffff !important;
    background-image: none !important;
    color: #222222 !important;
    border: 1px solid #cccccc !important;
    box-shadow: none !important;
    animation: none !important;
    transition: none !important;
}

.journey-option:hover {
    background: #ffffff !important;
    transform: none !important;
}

.journey-text {
    color: #222222 !important;
}

.journey-option:has(input[type="radio"]:checked) {
    background: #fff9d9 !important;
    border-color: #ffd000 !important;
    box-shadow: none !important;
}

.journey-option:has(input[type="radio"]:checked) .journey-text {
    color: #49225b !important;
}

/* LOCATION ERROR */
.location-error-message {
    color: #d93025 !important;
}

.booking-card input.location-error {
    border-color: #d93025 !important;
    box-shadow: none !important;
}

/* CALENDAR */
.date-picker-wrapper .custom-calendar {
    background: #ffffff !important;
    background-image: none !important;
    color: #222222 !important;
    border: 1px solid #dddddd !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.10) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    transition: none !important;
}

.custom-calendar .calendar-title,
.custom-calendar .calendar-weekdays div,
.custom-calendar .calendar-day {
    color: #222222 !important;
}

.custom-calendar .calendar-weekdays div {
    color: #777777 !important;
}

.custom-calendar .calendar-nav button {
    background: #ffffff !important;
    color: #222222 !important;
    border-color: #cccccc !important;
    transition: none !important;
}

.custom-calendar .calendar-nav button:hover {
    background: #f5f5f5 !important;
}

.custom-calendar .calendar-day:hover {
    background: #f5f5f5 !important;
}

.custom-calendar .calendar-day.selected {
    background: #ffd000 !important;
    color: #222222 !important;
}

.custom-calendar .calendar-day.today {
    border-color: #49225b !important;
}

/* TIME PICKER */
.custom-time-picker {
    background: #ffffff !important;
    background-image: none !important;
    color: #222222 !important;
    border: 1px solid #dddddd !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.10) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    transition: none !important;
}

.time-picker-header,
.time-column-title {
    color: #222222 !important;
}

.time-scroll-list {
    background: #f8f8f8 !important;
    border-color: #dddddd !important;
}

.time-option {
    color: #222222 !important;
}

/* TERMS */
.booking-card .terms-box,
.booking-card .terms-container {
    background: #ffffff !important;
    background-image: none !important;
    color: #222222 !important;
    border-color: #dddddd !important;
    box-shadow: none !important;
}

/* PAYMENT / CONFIRMATION AREAS */
.payment-section,
.payment-card,
.payment-amount-section,
.payment-amount-container,
.confirmation-card {
    background: #ffffff !important;
    background-image: none !important;
    color: #222222 !important;
    border-color: #dddddd !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    transition: none !important;
}

/* PAYMENT TEXT */
.payment-section h1,
.payment-section h2,
.payment-section h3,
.payment-section h4,
.payment-section p,
.payment-section label,
.payment-section span,
.confirmation-card h1,
.confirmation-card h2,
.confirmation-card h3,
.confirmation-card h4,
.confirmation-card p,
.confirmation-card label,
.confirmation-card span {
    color: #222222 !important;
}

/* REMOVE HOVER MOVEMENT FROM COMMON BOOKING ELEMENTS */
.booking-card *,
.booking-card *::before,
.booking-card *::after {
    animation: none !important;
}

.booking-card button:hover,
.booking-card .btn:hover,
.booking-card a.btn:hover,
.journey-option:hover,
.site-logo:hover {
    transform: none !important;
}

/* NO TRANSITIONS ANYWHERE ON THIS PAGE */
.booking-page *,
.booking-page *::before,
.booking-page *::after {
    animation: none !important;
    transition: none !important;
}


/* FINAL VISIBILITY OVERRIDES */
.booking-card label[for="name"],
.booking-card label[for="phone"],
.booking-card label[for="email"],
.booking-card label[for="notes"] {
    color: #222222 !important;
}

.terms-checkbox {
    color: #222222 !important;
}

.terms-checkbox input[type="checkbox"] {
    accent-color: #6e3482 !important;
}
/* ==========================================
   DISTANCE ROW
   130 KM TEXT UNDER DISTANCE
   ========================================== */

#paymentSection .summary-row:has(#summaryDistance) {
    display: grid !important;

    grid-template-columns: 1fr auto !important;

    align-items: center !important;

    column-gap: 20px !important;

    row-gap: 4px !important;

    justify-content: initial !important;

    min-height: 62px !important;

    box-sizing: border-box !important;
}


/* Distance label */
#paymentSection .summary-row:has(#summaryDistance) > span:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;

    align-self: center !important;

    text-align: left !important;

    white-space: nowrap !important;
}


/* Distance value */
#paymentSection .summary-row:has(#summaryDistance) #summaryDistance {
    grid-column: 2 !important;
    grid-row: 1 !important;

    margin: 0 !important;

    text-align: right !important;

    white-space: nowrap !important;

    justify-self: end !important;
}


/* 130 KM / Day Included */
#paymentSection .summary-row:has(#summaryDistance) .minimum-billing-text {
    grid-column: 2 !important;
    grid-row: 2 !important;

    margin: 0 !important;
    padding: 0 !important;

    width: auto !important;

    text-align: right !important;

    justify-self: end !important;

    white-space: nowrap !important;

    color: #000000 !important;

    font-size: 12px !important;

    font-weight: 700 !important;

    line-height: 16px !important;
}


/* Mobile */
@media (max-width: 700px) {

    #paymentSection .summary-row:has(#summaryDistance) {
        column-gap: 10px !important;
        min-height: 62px !important;
    }

    #paymentSection .summary-row:has(#summaryDistance)
    .minimum-billing-text {
        font-size: 11px !important;
    }
}