.transfer-demo {--blue:var(--sky);
    --green:var(--success);
    --border:var(--line);
    --yellow:var(--paper)}
.transfer-demo * {box-sizing:border-box}
.transfer-demo {margin:0;
    color:var(--ink);
    background:#fff;
    font:14px/1.6 Inter,Arial,sans-serif}
.transfer-demo button, .transfer-demo input, .transfer-demo select {font:inherit}
.transfer-demo button, .transfer-demo summary, .transfer-demo select {cursor:pointer}
.transfer-demo button {color:inherit}
.transfer-demo button:focus-visible, .transfer-demo summary:focus-visible, .transfer-demo input:focus-visible, .transfer-demo select:focus-visible {outline:3px solid #0079b5;
    outline-offset:3px}
.transfer-demo [hidden] {display:none!important}
.transfer-demo h1, .transfer-demo h2, .transfer-demo h3, .transfer-demo p {margin:0}
.transfer-demo h2 {font-size:18px;
    font-weight:600}
.transfer-demo h3 {font-size:16px;
    font-weight:600}
.transfer-demo p {margin:8px 0}
.transfer-demo small {font-size:12px}
.transfer-demo i {flex-shrink:0}
.transfer-demo button {border:0;
    background:none}
.transfer-demo input, .transfer-demo select {min-width:0}
.transfer-demo input:not([type=checkbox]):not([type=radio]), .transfer-demo select {width:100%;
    height:36px;
    padding:6px 10px;
    color:var(--ink);
    background:#fff;
    border:1px solid #c1c7ca;
    border-radius:2px}
.transfer-demo input[type=checkbox], .transfer-demo input[type=radio] {width:17px;
    height:17px;
    margin:3px 8px 0 0;
    accent-color:var(--blue);
    flex-shrink:0}
.transfer-demo input:disabled {background:#fafbfc!important;
    color:#90979d!important}
.transfer-demo input::placeholder {color:#939ba1}
.transfer-demo .demo-note {text-align:center;
    padding:7px 16px;
    background:#f5f9fb;
    color:#5a7481;
    font-size:12px}
.transfer-demo .hero {min-height:490px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#247ba0 url('./coast.png') center 58%/cover;
    position:relative}
.transfer-demo .hero:before {content:"";
    position:absolute;
    inset:0;
    background:rgba(7,43,66,.28)}
.transfer-demo .hero-content {position:relative;
    width:min(1320px,94%);
    padding:60px 0 85px;
    color:white;
    text-align:center}
.transfer-demo .hero h1 {font-size:40px;
    line-height:1.2;
    font-weight:700;
    letter-spacing:-.6px}
.transfer-demo .hero-content>p {font-size:20px;
    margin:8px auto 28px}
.transfer-demo .search-box {position:relative;
    display:grid;
    grid-template-columns:1.4fr 1.25fr 1.13fr 1.13fr .83fr auto;
    gap:8px;
    padding:9px;
    background:var(--yellow);
    border-radius:4px;
    text-align:left;
    color:var(--ink)}
.transfer-demo .search-field {display:flex;
    align-items:center;
    gap:10px;
    border:1px solid #c5b14a;
    background:white;
    border-radius:3px;
    padding:10px;
    min-height:64px;
    min-width:0}
.transfer-demo .search-field>i {font-size:18px;
    color:#666}
.transfer-demo .search-field span {min-width:0;
    flex:1}
.transfer-demo .search-field small {display:block;
    color:#72808a;
    white-space:nowrap}
.transfer-demo .search-field input:not([type=checkbox]), .transfer-demo .search-field select {border:0;
    padding:0;
    height:26px;
    background:transparent;
    font-size:14px;
    outline-offset:0}
.transfer-demo .search-field input[type=datetime-local] {font-size:12px}
.transfer-demo .swap {position:absolute;
    top:24px;
    left:21.4%;
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid #0098d1;
    background:white;
    color:#0098d1;
    z-index:1;
    font-size:18px}
.transfer-demo .button {display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:var(--green);
    color:white;
    font-size:18px;
    font-weight:700;
    padding:11px 20px;
    border-radius:4px;
    border-bottom:3px solid #13982a;
    line-height:1.4;
    text-decoration:none}
.transfer-demo .button:hover {background:#08b419}
.transfer-demo .benefits {display:flex;
    justify-content:center;
    gap:32px;
    flex-wrap:wrap;
    margin-top:23px;
    font-size:16px;
    font-weight:600}
.transfer-demo .benefits i {margin-right:7px}
.transfer-demo .statistics {display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap;
    border-bottom:1px solid #e1e6ea;
    padding:20px;
    font-size:16px}
.transfer-demo .statistics b, .transfer-demo .statistics i {color:#159fff}
.transfer-demo .statistics i {font-size:21px;
    margin-right:7px}
.transfer-demo .booking {max-width:1140px;
    margin:0 auto;
    padding:0 10px 35px}
.transfer-demo .steps {list-style:none;
    display:flex;
    padding:0;
    margin:15px 0 28px}
.transfer-demo .steps li {width:20%;
    position:relative;
    text-align:center}
.transfer-demo .steps li:not(:last-child):after {content:"";
    position:absolute;
    height:1px;
    background:var(--border);
    left:50%;
    right:-50%;
    top:19px;
    z-index:0}
.transfer-demo .steps li.complete:after {background:var(--blue)}
.transfer-demo .steps button {position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    flex-direction:column;
    gap:6px;
    margin:auto;
    padding:0 3px}
.transfer-demo .steps button>span {display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid var(--border);
    background:#eeece8;
    font-size:20px;
    color:#9a9690}
.transfer-demo .steps small {text-transform:uppercase;
    font-size:12px;
    color:#92908c}
.transfer-demo .steps li.active span {background:var(--blue);
    border-color:var(--blue);
    color:white;
    font-weight:700}
.transfer-demo .steps li.complete span {background:#50b1ce;
    color:white}
.transfer-demo .steps li.active small {color:var(--ink)}
.transfer-demo .booking-grid {display:grid;
    grid-template-columns:300px minmax(0,1fr);
    gap:24px}
.transfer-demo .main-content {min-width:0}
.transfer-demo #search-sidebar .search-box {grid-template-columns:1fr 1fr;
    gap:8px;
    padding:10px}
.transfer-demo #search-sidebar .search-field {grid-column:1/-1;
    min-height:54px;
    padding:5px 8px}
.transfer-demo #search-sidebar .date-field {grid-column:auto}
.transfer-demo #search-sidebar .date-field input {font-size:10px}
.transfer-demo #search-sidebar .date-field>i {display:none}
.transfer-demo #search-sidebar .button {grid-column:2;
    justify-self:end}
.transfer-demo #search-sidebar .swap {left:auto;
    right:58px;
    top:51px}
.transfer-demo .summary {background:#f5f6f6;
    border:1px solid #e0e3e5;
    padding:17px 16px;
    color:var(--ink)}
.transfer-demo .section-heading {display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:8px;
    margin-bottom:14px}
.transfer-demo .section-heading h2, .transfer-demo .section-heading h3 {margin:0}
.transfer-demo .text-link {padding:0;
    color:#008bda;
    text-decoration:underline;
    white-space:nowrap;
    font-size:13px}
.transfer-demo .journey {display:flex;
    align-items:flex-start;
    gap:12px;
    margin:20px 0}
.transfer-demo .journey>i {display:grid;
    place-items:center;
    width:28px;
    height:28px;
    background:white;
    border:1px solid #d2d5d5;
    border-radius:50%;
    color:#628089}
.transfer-demo .journey p {font-size:13px;
    line-height:1.5;
    margin:4px 0}
.transfer-demo .journey .green-icon {background:#00b888;
    border-color:#00b888;
    color:#fff}
.transfer-demo .summary hr {border:0;
    border-top:1px solid #ccd0d0;
    margin:24px 0}
.transfer-demo .summary h2 {margin-bottom:12px}
.transfer-demo .summary .section-heading h2 {margin:0}
.transfer-demo .summary-vehicle {display:flex;
    align-items:flex-start;
    gap:12px}
.transfer-demo .summary-vehicle img {width:56px;
    height:56px;
    object-fit:contain;
    background:#fff;
    border-radius:7px}
.transfer-demo .summary-vehicle>div {min-width:0;
    flex:1}
.transfer-demo .summary-vehicle .section-heading {margin-bottom:0}
.transfer-demo .summary-vehicle p {font-size:13px}
.transfer-demo .summary .total {margin-bottom:0}
.transfer-demo .total strong {font-size:20px}
.transfer-demo #extras-summary p {font-size:13px}
.transfer-demo #contact-summary p {margin:2px 0;
    overflow-wrap:anywhere}
.transfer-demo .help {border:1px solid var(--border);
    border-top:3px solid var(--blue);
    margin-top:20px;
    padding:10px}
.transfer-demo .help summary {display:flex;
    align-items:center;
    gap:10px;
    font-size:18px}
.transfer-demo .help summary>i {font-size:36px;
    color:var(--blue)}
.transfer-demo .help small {display:block;
    color:#0088c1}
.transfer-demo .help p {font-size:13px}
.transfer-demo .trust {display:flex;
    align-items:center;
    gap:12px;
    padding:12px;
    border:1px solid #00bf8b;
    margin-top:14px;
    font-size:13px}
.transfer-demo .trust>i {font-size:31px;
    color:#00a785}
.transfer-demo .trust small {display:block}
.transfer-demo .notice {display:flex;
    align-items:center;
    gap:12px;
    color:#06b823;
    background:#eaf8ee;
    border:1px solid #09c823;
    border-left-width:5px;
    padding:12px 15px;
    margin-bottom:18px;
    font-weight:600;
    border-radius:3px}
.transfer-demo .notice>i {font-size:27px;
    color:#29b543}
.transfer-demo .vehicle-card {display:grid;
    grid-template-columns:150px minmax(0,1fr) 274px;
    border:1px solid var(--border);
    border-left:5px solid var(--blue);
    border-radius:4px;
    min-height:212px;
    margin-bottom:18px}
.transfer-demo .vehicle-card.shared {border-left-color:#b4b0a6}
.transfer-demo .vehicle-card.premium {border-left-color:#ed3968}
.transfer-demo .vehicle-image {padding:14px 10px 0}
.transfer-demo .vehicle-image img {width:100%;
    height:86px;
    object-fit:contain}
.transfer-demo .vehicle-image small {font-size:11px}
.transfer-demo .stars {color:#ffcf4d;
    font-size:12px;
    letter-spacing:1px}
.transfer-demo .vehicle-info {padding:13px 12px 16px 15px}
.transfer-demo .vehicle-info h2 {font-size:27px;
    color:#474641;
    line-height:1.35;
    margin:0 0 5px;
    letter-spacing:-.4px}
.transfer-demo .badge {display:inline-block;
    vertical-align:middle;
    font-size:9px;
    padding:2px 5px;
    background:#efebe8;
    border-radius:3px;
    letter-spacing:0;
    white-space:nowrap}
.transfer-demo .premium .badge {background:#ed3968;
    color:white}
.transfer-demo .vehicle-info p {font-size:13px;
    margin:4px 0}
.transfer-demo .vehicle-info p>i {color:#039ccd;
    width:17px}
.transfer-demo .vehicle-info p.duration {margin-top:16px}
.transfer-demo .vehicle-info .duration>i {color:#4a4944}
.transfer-demo .service {margin-top:15px}
.transfer-demo .service>summary {display:inline-block;
    border:1px solid #009eda;
    color:#008bc1;
    border-radius:2px;
    padding:2px 6px;
    font-size:12px;
    box-shadow:0 2px 3px #00000012}
.transfer-demo .service[open]>summary {background:#edf8fc}
.transfer-demo .service p {font-size:12px;
    color:#60727d}
.transfer-demo .vehicle-price {border-left:1px dashed var(--border);
    text-align:center;
    padding:13px 12px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center}
.transfer-demo .vehicle-price>strong {font-size:34px;
    line-height:1.4;
    color:#454440}
.transfer-demo .vehicle-price p {margin:1px 0;
    font-size:13px}
.transfer-demo .vehicle-price .button {font-size:16px;
    width:100%;
    margin-top:23px;
    padding:11px 7px}
.transfer-demo .green {color:#06bd21}
.transfer-demo .blue {color:#00a6df}
.transfer-demo .muted {color:var(--muted)}
.transfer-demo .catalog-note {text-align:center;
    color:var(--muted);
    font-size:13px}
.transfer-demo .panel {border:1px solid var(--border);
    padding:15px;
    margin-bottom:14px}
.transfer-demo .panel>h2 {font-weight:400;
    margin-bottom:14px;
    color:#3f4142}
.transfer-demo .panel p {font-size:13px}
.transfer-demo .panel-title {padding:15px;
    margin:0!important;
    border-bottom:1px solid #d9d9d5}
.transfer-demo .extras-panel {padding:0 14px}
.transfer-demo .extras-panel .panel-title {margin:0 -14px!important;
    font-weight:600}
.transfer-demo .extra-row {display:grid;
    grid-template-columns:38px minmax(0,1fr) 145px;
    gap:14px;
    padding:17px 0;
    min-height:130px;
    border-bottom:1px solid #d9d9d5}
.transfer-demo .extra-row:last-child {border:0}
.transfer-demo .extra-row>i {font-size:32px;
    color:var(--blue);
    padding-top:5px}
.transfer-demo .extra-row h3 {font-size:14px}
.transfer-demo .pill {display:inline-block;
    border:1px solid #00c522;
    color:#00b51c;
    padding:0 5px;
    border-radius:20px;
    font-weight:400;
    white-space:nowrap}
.transfer-demo .extra-controls {text-align:right}
.transfer-demo .extra-controls>strong {display:block;
    font-size:20px;
    margin:6px 0 2px;
    color:#4b4b48}
.transfer-demo .quantity-pair {display:flex;
    gap:10px;
    justify-content:flex-end}
.transfer-demo .quantity-pair label {font-size:12px;
    text-align:left}
.transfer-demo .quantity-pair select {display:block;
    width:65px;
    height:32px;
    border-color:#c5d3d8;
    padding:4px 8px}
.transfer-demo .actions {display:flex;
    justify-content:space-between;
    gap:15px;
    align-items:flex-start;
    margin:12px 0 0}
.transfer-demo .actions>.button {min-width:230px}
.transfer-demo .previous {padding:0;
    font-size:17px;
    text-transform:uppercase}
.transfer-demo .form-grid {display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px 15px}
.transfer-demo .form-grid label {display:block}
.transfer-demo .form-grid label input {display:block;
    margin-top:6px}
.transfer-demo .form-grid label small {display:block;
    color:var(--muted);
    margin-top:3px;
    font-size:13px}
.transfer-demo .full {grid-column:1/-1}
.transfer-demo .choice {display:flex;
    align-items:flex-start;
    gap:0;
    margin:17px 0}
.transfer-demo .choice small {display:block;
    margin-top:5px;
    font-size:13px}
.transfer-demo .transfer-panel {padding:0}
.transfer-demo .dark-title {background:#46443e;
    color:white!important;
    padding:10px;
    font-size:13px;
    font-style:italic;
    text-transform:uppercase;
    margin:0!important}
.transfer-demo .transfer-fields {display:grid;
    grid-template-columns:35% minmax(0,1fr);
    gap:15px;
    padding:15px}
.transfer-demo .destination-label {margin-top:130px}
.transfer-demo .price-detail {display:grid;
    grid-template-columns:35% minmax(0,1fr);
    gap:16px}
.transfer-demo .price-detail>p {margin:0}
.transfer-demo .price-detail dl {margin:0}
.transfer-demo .price-detail dl>div {display:flex;
    justify-content:space-between;
    gap:12px;
    padding:10px;
    margin-bottom:8px;
    background:#eff6fc;
    font-size:13px}
.transfer-demo .price-detail dd {margin:0;
    white-space:nowrap}
.transfer-demo .price-detail .grand-total {color:#00a9e9;
    font-weight:600;
    font-size:15px}
.transfer-demo .payment-total {display:flex;
    justify-content:space-between;
    align-items:flex-start;
    border-radius:4px;
    margin-bottom:0}
.transfer-demo .payment-total h2 {font-weight:600}
.transfer-demo .payment-total>div {text-align:right}
.transfer-demo .payment-total strong {display:block;
    font-size:25px;
    color:#474641}
.transfer-demo .payment-total small {display:block;
    color:var(--muted)}
.transfer-demo .payment-panel {border-top:3px solid #ffdb52;
    border-bottom:3px solid #ffdb52}
.transfer-demo .payment-method {border:2px solid #ddd;
    border-radius:4px;
    margin:8px 0;
    padding:0 16px}
.transfer-demo .payment-method.active {border-color:#09c323}
.transfer-demo .payment-method .choice {align-items:center;
    gap:4px;
    min-height:25px}
.transfer-demo .payment-method .choice>i {margin-left:auto;
    font-size:27px;
    color:#0075b9}
.transfer-demo .payment-method .form-grid {padding:0 0 20px;
    gap:16px}
.transfer-demo .payment-method input:disabled {height:40px;
    border-radius:5px}
.transfer-demo .card-brands {font-size:23px;
    color:#0078b4;
    line-height:1}
.transfer-demo .payment-panel .actions {margin:15px 0 4px}
.transfer-demo .demo-result {margin-top:20px}
.transfer-demo .restart {display:block;
    margin:15px auto}
.transfer-demo .no-script {padding:20px;
    text-align:center}

@media(min-width:1400px){.transfer-demo .hero-content {width:1320px}
.transfer-demo .hero {min-height:490px}
.transfer-demo .hero-content {padding-top:45px}
.transfer-demo .search-box {margin:0 auto}
.transfer-demo .search-field input {font-size:15px}
}

@media(max-width:1100px){.transfer-demo .hero h1 {font-size:34px}
.transfer-demo .hero-content>p {font-size:17px}
.transfer-demo .search-box {grid-template-columns:1fr 1fr 1fr}
.transfer-demo .swap {left:32%;
    top:24px}
.transfer-demo .booking-grid {grid-template-columns:265px minmax(0,1fr);
    gap:20px}
.transfer-demo .vehicle-card {grid-template-columns:125px minmax(0,1fr)}
.transfer-demo .vehicle-price {grid-column:1/-1;
    border-left:0;
    border-top:1px dashed var(--border);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 15px}
.transfer-demo .vehicle-price>strong {grid-row:1/3;
    grid-column:2}
.transfer-demo .vehicle-price .button {grid-column:1/-1;
    margin-top:12px}
.transfer-demo .vehicle-info h2 {font-size:24px}
}

@media(max-width:760px){.transfer-demo .demo-note {font-size:10px}
.transfer-demo .hero {min-height:0}
.transfer-demo .hero-content {padding:45px 0;
    width:92%}
.transfer-demo .hero h1 {font-size:29px}
.transfer-demo .hero-content>p {font-size:15px;
    margin-bottom:22px}
.transfer-demo .search-box {grid-template-columns:1fr 1fr}
.transfer-demo .search-field:nth-of-type(1), .transfer-demo .search-field:nth-of-type(2) {grid-column:1/-1}
.transfer-demo .search-box .button {font-size:16px}
.transfer-demo .swap {right:24px;
    left:auto;
    top:57px}
.transfer-demo .benefits {gap:12px 20px;
    font-size:12px}
.transfer-demo .statistics {gap:10px;
    padding:15px;
    font-size:12px}
.transfer-demo .statistics i {font-size:16px}
.transfer-demo .booking {padding:0 12px 25px}
.transfer-demo .steps {margin:15px 0 22px}
.transfer-demo .steps small {font-size:9px;
    max-width:75px;
    overflow-wrap:anywhere}
.transfer-demo .steps button>span {height:32px;
    width:32px;
    font-size:17px}
.transfer-demo .steps li:not(:last-child):after {top:16px}
.transfer-demo .booking-grid {grid-template-columns:1fr;
    gap:18px}
.transfer-demo .booking aside {display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px}
.transfer-demo .summary, .transfer-demo #search-sidebar {grid-column:1/-1}
.transfer-demo .help, .transfer-demo .trust {margin:0}
.transfer-demo .help summary {font-size:15px}
.transfer-demo .help summary>i {font-size:26px}
.transfer-demo .trust {font-size:12px}
.transfer-demo .trust>i {font-size:25px}
.transfer-demo .summary {padding:14px}
.transfer-demo .summary .journey {margin:12px 0}
.transfer-demo .summary hr {margin:15px 0}
.transfer-demo .summary h2 {font-size:16px}
.transfer-demo .summary-vehicle img {width:65px}
.transfer-demo .vehicle-card {grid-template-columns:120px minmax(0,1fr)}
.transfer-demo .vehicle-info h2 {font-size:24px}
.transfer-demo .notice {font-size:13px}
.transfer-demo .extra-row {grid-template-columns:28px minmax(0,1fr);
    gap:10px}
.transfer-demo .extra-row>i {font-size:27px}
.transfer-demo .extra-controls {grid-column:2;
    display:flex;
    justify-content:space-between;
    align-items:center}
.transfer-demo .transfer-fields, .transfer-demo .price-detail {grid-template-columns:1fr}
.transfer-demo .destination-label {margin-top:15px}
.transfer-demo .form-grid {gap:15px}
.transfer-demo .actions>.button {min-width:160px}
.transfer-demo .previous {font-size:14px}
.transfer-demo .panel {padding:13px}
.transfer-demo .transfer-panel {padding:0}
.transfer-demo .extras-panel {padding:0 13px}
.transfer-demo .payment-panel .actions {align-items:center}
.transfer-demo .payment-panel .button {font-size:15px;
    padding:10px}
.transfer-demo .payment-total strong {font-size:22px}
}

@media(prefers-reduced-motion:no-preference){.transfer-demo button {transition:background-color .15s}
.transfer-demo {scroll-behavior:smooth}
}


/* Use the public site's typography, colors and component treatment. */
.transfer-demo {
    background: var(--mist);
}
.transfer-demo .demo-note {
    background: var(--pale-blue);
    color: var(--navy);
    font-size: 11px;
}
.transfer-demo .hero {
    min-height: 460px;
    padding: 0;
    background-color: var(--navy);
}
.transfer-demo .hero:before {
    background: rgba(10, 42, 67, .48);
}
.transfer-demo .hero-content {
    width: min(calc(100% - 40px), var(--shell));
    padding: 54px 0 60px;
}
.transfer-demo .hero__kicker {
    color: var(--navy);
    font-family: Inter, Arial, sans-serif;
}
.transfer-demo .hero h1 {
    max-width: 850px;
    margin: 0 auto 16px;
    color: white;
    font-size: clamp(32px, 3.5vw, 48px);
    font-weight: 600;
    letter-spacing: -.025em;
}
.transfer-demo .hero-content > p {
    max-width: 810px;
    margin: 0 auto 30px;
    color: #eaf4fc;
    font-size: 16px;
    line-height: 1.7;
}
.transfer-demo .search-box {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--paper);
    box-shadow: var(--shadow-md);
}
.transfer-demo .search-field {
    min-height: 64px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--mist);
}
.transfer-demo .search-field > i,
.transfer-demo .swap {
    color: var(--sky);
}
.transfer-demo .swap {
    border-color: var(--line);
    box-shadow: var(--shadow-sm);
}
.transfer-demo .search-field small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
}
.transfer-demo .button {
    min-height: 46px;
    border: 0;
    border-radius: 24px;
    background: var(--orange);
    color: white;
    box-shadow: 0 8px 20px rgba(255, 122, 51, .2);
    font-family: Poppins, Inter, sans-serif;
    font-size: 14px;
    font-weight: 600;
}
.transfer-demo .button:hover {
    background: #f06d27;
}
.transfer-demo .benefits {
    font-size: 13px;
    font-weight: 500;
}
.transfer-demo .statistics {
    padding: 24px 20px;
    border-color: var(--line);
    background: white;
    font-size: 14px;
}
.transfer-demo .statistics b,
.transfer-demo .statistics i {
    color: var(--sky);
}
.transfer-demo .booking {
    width: min(calc(100% - 40px), var(--shell));
    max-width: none;
    padding: 30px 0 60px;
}
.transfer-demo .steps {
    margin: 0 0 28px;
    padding: 22px 10px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: white;
    box-shadow: var(--shadow-sm);
}
.transfer-demo .steps button > span {
    background: var(--mist);
    border-color: var(--line);
    color: var(--muted);
    font-family: Inter, Arial, sans-serif;
    font-size: 16px;
}
.transfer-demo .steps li.active span {
    color: white;
    background: var(--orange);
    border-color: var(--orange);
}
.transfer-demo .steps li.complete span {
    color: var(--navy);
    background: var(--pale-blue);
    border-color: #d4e7f5;
}
.transfer-demo .steps li.complete:after {
    background: var(--sky);
}
.transfer-demo .steps small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
}
.transfer-demo .booking-grid {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 26px;
}
.transfer-demo .summary,
.transfer-demo .panel,
.transfer-demo .vehicle-card,
.transfer-demo .help,
.transfer-demo .trust {
    background: white;
    border-color: var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}
.transfer-demo .summary {
    padding: 22px;
}
.transfer-demo .summary h2,
.transfer-demo .section-heading h2 {
    font-family: Fraunces, Georgia, serif;
    font-size: 19px;
    line-height: 1.3;
}
.transfer-demo .summary h3,
.transfer-demo .extra-row h3,
.transfer-demo .transfer-fields h3 {
    color: var(--navy);
    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
}
.transfer-demo .summary hr {
    opacity: 1;
    border-color: var(--line);
}
.transfer-demo .summary .journey > i {
    border-color: var(--line);
    color: var(--sky);
    background: var(--pale-blue);
}
.transfer-demo .summary .journey .green-icon {
    background: #eaf7f0;
    color: var(--success);
}
.transfer-demo .text-link,
.transfer-demo .blue {
    color: var(--sky);
}
.transfer-demo .text-link {
    text-underline-offset: 3px;
    font-size: 12px;
}
.transfer-demo .summary .total strong {
    color: var(--orange);
}
.transfer-demo .help {
    border-top: 3px solid var(--sky);
    padding: 15px;
}
.transfer-demo .help summary {
    font-family: Fraunces, Georgia, serif;
}
.transfer-demo .help small {
    margin-top: 3px;
    font-family: Inter, Arial, sans-serif;
}
.transfer-demo .trust {
    padding: 16px;
}
.transfer-demo .trust > i {
    color: var(--orange);
}
.transfer-demo .notice {
    padding: 15px 18px;
    border: 1px solid #d4ecdf;
    border-radius: 12px;
    background: #edf8f1;
    color: #257c52;
    font-size: 13px;
    font-weight: 500;
}
.transfer-demo .notice > i,
.transfer-demo .green {
    color: var(--success);
}
.transfer-demo .vehicle-card {
    grid-template-columns: 150px minmax(0, 1fr) 250px;
    border-left: 3px solid var(--sky);
    overflow: hidden;
}
.transfer-demo .vehicle-card.shared {
    border-left-color: #b9d5e8;
}
.transfer-demo .vehicle-card.premium {
    border-left-color: var(--orange);
}
.transfer-demo .vehicle-info {
    padding-top: 20px;
    padding-bottom: 20px;
}
.transfer-demo .vehicle-info h2 {
    color: var(--navy);
    font-family: Fraunces, Georgia, serif;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -.02em;
}
.transfer-demo .vehicle-info p > i,
.transfer-demo .vehicle-info .duration > i {
    color: var(--sky);
}
.transfer-demo .badge {
    padding: 4px 7px;
    background: var(--pale-blue);
    color: var(--navy);
    font-family: Inter, Arial, sans-serif;
    font-size: 9px;
    font-weight: 600;
    border-radius: 6px;
}
.transfer-demo .premium .badge {
    color: #a3430d;
    background: #fff0e7;
}
.transfer-demo .vehicle-image {
    padding: 22px 10px 10px;
}
.transfer-demo .vehicle-price {
    padding: 20px 16px;
    background: #fafcfe;
    border-left: 1px solid var(--line);
}
.transfer-demo .vehicle-price > strong {
    margin-bottom: 4px;
    color: var(--navy);
    font-family: Fraunces, Georgia, serif;
    font-size: 33px;
}
.transfer-demo .vehicle-price .button {
    font-size: 12px;
}
.transfer-demo .service > summary {
    padding: 5px 9px;
    border-color: var(--line);
    border-radius: 6px;
    color: var(--navy);
    background: var(--pale-blue);
    box-shadow: none;
    font-size: 11px;
}
.transfer-demo .panel {
    padding: 22px;
    margin-bottom: 18px;
}
.transfer-demo .panel > h2 {
    color: var(--navy);
    font-family: Fraunces, Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    text-transform: none;
}
.transfer-demo .extras-panel {
    padding: 0 22px;
}
.transfer-demo .extras-panel .panel-title {
    margin: 0 -22px !important;
    padding: 20px 22px;
    border-color: var(--line);
}
.transfer-demo .extra-row {
    border-color: var(--line);
}
.transfer-demo .pill {
    padding: 2px 7px;
    border-color: #d4ecdf;
    color: #257c52;
    background: #edf8f1;
    font-size: 10px;
}
.transfer-demo .form-grid input,
.transfer-demo .quantity-pair select {
    height: 44px;
    border-color: #dce4ea;
    border-radius: 9px;
}
.transfer-demo .form-grid label {
    font-size: 13px;
    font-weight: 500;
}
.transfer-demo .form-grid label small {
    font-weight: 400;
}
.transfer-demo .transfer-panel {
    padding: 0;
    overflow: hidden;
}
.transfer-demo .panel > .dark-title {
    padding: 16px 22px;
    background: var(--pale-blue);
    color: var(--navy) !important;
    font-family: Inter, Arial, sans-serif;
    font-size: 12px;
    font-style: normal;
}
.transfer-demo .transfer-fields {
    padding: 22px;
}
.transfer-demo .price-detail dl > div {
    background: var(--mist);
    border-radius: 8px;
}
.transfer-demo .price-detail .grand-total {
    background: var(--pale-blue);
    color: var(--navy);
}
.transfer-demo .previous {
    padding: 12px 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}
.transfer-demo .payment-panel {
    border-top: 3px solid var(--orange);
    border-bottom: 1px solid var(--line);
}
.transfer-demo .payment-method {
    display: block;
    width: auto;
    height: auto;
    min-width: 0;
    background: white;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: none;
}
.transfer-demo .payment-method.active {
    border-color: var(--sky);
}
.transfer-demo .payment-total strong {
    color: var(--navy);
    font-family: Fraunces, Georgia, serif;
}
.transfer-demo .restart {
    margin-top: 25px;
}
@media (max-width: 1100px) {
    .transfer-demo .booking-grid { grid-template-columns: 265px minmax(0, 1fr); gap: 20px; }
    .transfer-demo .vehicle-card { grid-template-columns: 125px minmax(0, 1fr); }
    .transfer-demo .vehicle-price { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
    .transfer-demo .hero-content { width: calc(100% - 28px); padding: 38px 0; }
    .transfer-demo .hero-content > p { font-size: 14px; }
    .transfer-demo .hero { min-height: 0; }
    .transfer-demo .hero h1 { font-size: 32px; }
    .transfer-demo .benefits { font-size: 11px; }
    .transfer-demo .statistics { gap: 14px; font-size: 12px; }
    .transfer-demo .booking { width: calc(100% - 24px); padding: 20px 0 40px; }
    .transfer-demo .booking-grid { grid-template-columns: 1fr; }
    .transfer-demo .steps { padding: 16px 2px; border-radius: 12px; }
    .transfer-demo .steps small { font-size: 8px; }
    .transfer-demo .vehicle-card { grid-template-columns: 105px minmax(0, 1fr); }
    .transfer-demo .vehicle-info h2 { font-size: 23px; }
    .transfer-demo .summary, .transfer-demo .panel { padding: 16px; }
    .transfer-demo .transfer-panel { padding: 0; }
    .transfer-demo .extras-panel { padding: 0 16px; }
    .transfer-demo .extras-panel .panel-title { margin: 0 -16px !important; padding: 16px; }
    .transfer-demo .transfer-fields { padding: 16px; }
    .transfer-demo .panel > h2 { font-size: 20px; }
    .transfer-demo .panel > .dark-title { font-size: 12px; }
}
.transfer-demo .route-overview {max-width:1200px;margin:20px auto;padding:0 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.transfer-demo .route-overview p {width:100%;margin:0}
.transfer-demo #location-modal {width:min(760px,calc(100% - 24px));max-height:90dvh;overflow:auto;border:0;border-radius:20px;padding:24px;color:var(--ink);box-shadow:0 24px 80px #0004}
.transfer-demo #location-modal::backdrop {background:#08213799;backdrop-filter:blur(4px)}
.transfer-demo #location-modal header,.transfer-demo #location-modal footer {display:flex;align-items:center;justify-content:space-between;gap:16px}
.transfer-demo #location-modal header h2 {margin:0;font-size:22px}
.transfer-demo #location-close {border:0;background:var(--mist);border-radius:50%;width:40px;height:40px;font-size:26px}
.transfer-demo #location-search {margin:20px 0 12px}
.transfer-demo #location-search > div {display:flex;gap:10px;margin-top:8px}
.transfer-demo #location-query {min-width:0;flex:1;border:1px solid var(--line);border-radius:10px;padding:12px}
.transfer-demo #route-map {height:350px;width:100%;border-radius:12px;background:var(--mist)}
.transfer-demo #location-name {display:block;margin:12px 0;overflow-wrap:anywhere}
.transfer-demo #location-modal footer {border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.transfer-demo #location-confirm:disabled {opacity:.5;cursor:not-allowed}
.transfer-demo #departure,.transfer-demo #destination {cursor:pointer;text-overflow:ellipsis}
@media(max-width:600px){.transfer-demo #location-modal {padding:16px}.transfer-demo #route-map {height:300px}.transfer-demo #location-search > div {flex-wrap:wrap}}