/* =========================================================
   HOMEPAGE BOOKING FORM
   MODERN / CLEAN / SOFT / STABLE
   ========================================================= */

:root {
    --v6-field-height: 46px;
    --v6-radius: 11px;

    --v6-border: #e2e8f0;
    --v6-border-hover: #cfd8e6;

    --v6-text: #26364f;
    --v6-muted: #8795a8;
    --v6-icon: #647b9f;

    --v6-primary: #315fbc;
    --v6-primary-hover: #274f9e;
}


/* =========================================================
   HERO
   ========================================================= */

.v6-hero {
    --hero-height: clamp(29rem, 40vw, 34rem);
    --nav-offset: 7.75rem;

    position: relative;
    z-index: 20;

    margin-top: calc(var(--nav-offset) * -1);

    padding:
        calc(var(--hero-height) - 5.6rem)
        0
        .8rem;

    font-family:
        "Plus Jakarta Sans",
        "Segoe UI",
        sans-serif;
}

/* Reused on service pages: show one form without landing hero spacing or tabs. */
.v6-hero--booking-only {
    min-height: 0;

    margin-top: 0;
    padding: 0;
}

/* Service pages use one form, so remove the inner white layers. */
.v6-hero--booking-only .v6-service-panel,
.v6-hero--booking-only .v6-search-form {
    background: transparent;
}

.v6-hero--booking-only .v6-search-form {
    padding-top: 8px;
}

.v6-hero--booking-only .v6-booking-card {
    padding-top: 2px;
}

.v2-service-hero + .v6-hero--booking-only,
.v2-akap-hero + .v6-hero--booking-only {
    position: relative;
    z-index: 10;

    margin-top: -3.5rem;
    margin-bottom: 1.5rem;
}

.v6-hero-media {
    position: absolute;

    inset: 0 0 auto;

    height: var(--hero-height);

    overflow: hidden;
}

.v6-hero-media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.v6-hero-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.v6-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(8, 20, 41, .26),
            transparent 68%
        ),
        linear-gradient(
            180deg,
            transparent 62%,
            rgba(8, 20, 41, .1)
        );
}


/* =========================================================
   CONTAINER
   ========================================================= */

.v6-hero .v6-container {
    width: min(calc(100% - 28px), 1280px);

    margin-inline: auto;
}


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

.v6-booking-card {
    position: relative;

    z-index: 30;

    width: 100%;
    min-width: 0;

    padding:
        0
        14px
        12px;

    border:
        1px solid
        rgba(225, 232, 241, .95);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, .985);

    box-shadow:
        0 16px 38px
        rgba(34, 52, 80, .075);
}

.v6-service-tabs {
    gap: .38rem;
    padding-inline: .52rem;
}

.v6-service-tab {
    padding-inline: .85rem;
}


/* =========================================================
   LAYOUT / OVERFLOW
   ========================================================= */

.v6-booking-card {
    overflow: visible;
}

.v6-panels {
    position: relative;
    z-index: 1;

    width: 100%;
    min-width: 0;

    overflow: visible;
}

.v6-service-panel {
    position: relative;

    width: 100%;
    min-width: 0;

    overflow: visible;
}

.v6-search-form {
    position: relative;

    width: 100%;
    min-width: 0;

    overflow: visible;
}

.v6-field-group,
.v6-custom-select,
.v6-passenger-select {
    position: relative;

    min-width: 0;

    overflow: visible;
}

/* =========================================================
   SERVICE TABS
   CHROME-STYLE TABS
   ========================================================= */

.v6-service-tabs {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: flex-end;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 8px 8px 0;

    gap: 2px;

    background: #f4f6f9;

    border-radius: 16px 16px 0 0;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.v6-service-tabs::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   TAB ITEM
   ========================================================= */

.v6-service-tab {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 1 0 0;

    min-width: 145px;
    height: 48px;

    gap: 8px;

    margin: 0;
    padding: 0 16px;

    border: 0;
    outline: 0;

    border-radius: 12px 12px 0 0;

    background: transparent;

    color: #75849a;

    box-shadow: none;

    cursor: pointer;

    transition:
        background .16s ease,
        color .16s ease;
}


/* =========================================================
   TAB HOVER
   ========================================================= */

.v6-service-tab:hover:not(.is-active) {
    background: rgba(255, 255, 255, .48);

    color: #415b80;
}


/* =========================================================
   ACTIVE TAB
   ========================================================= */

.v6-service-tab.is-active {
    z-index: 4;

    background: #fff;

    color: var(--v6-primary);

    font-weight: 650;

    box-shadow:
        0 -1px 0 #e5eaf1,
        -1px 0 0 #e5eaf1,
        1px 0 0 #e5eaf1;
}


/* =========================================================
   CHROME CURVE - LEFT
   ========================================================= */

.v6-service-tab.is-active::before {
    content: "";

    position: absolute;

    left: -12px;
    bottom: 0;

    width: 12px;
    height: 12px;

    background: transparent;

    border-radius: 0 0 12px 0;

    box-shadow:
        6px 6px 0 6px #fff;

    pointer-events: none;
}


/* =========================================================
   CHROME CURVE - RIGHT
   ========================================================= */

.v6-service-tab.is-active::after {
    content: "";

    position: absolute;

    right: -12px;
    bottom: 0;

    width: 12px;
    height: 12px;

    background: transparent;

    border-radius: 0 0 0 12px;

    box-shadow:
        -6px 6px 0 6px #fff;

    pointer-events: none;
}


/* =========================================================
   TAB ICON
   ========================================================= */

.v6-service-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 26px;

    width: 26px;
    height: 26px;

    margin: 0;

    border: 0;
    border-radius: 0;

    background: transparent;
}

.v6-service-tab-icon img {
    display: block;

    width: 23px;
    height: 23px;

    object-fit: contain;

    opacity: .68;

    transition:
        opacity .16s ease,
        transform .16s ease;
}

.v6-service-tab:hover
.v6-service-tab-icon img {
    opacity: .82;
}

.v6-service-tab.is-active
.v6-service-tab-icon img {
    opacity: 1;

    transform: translateY(-1px);
}


/* =========================================================
   TAB LABEL
   ========================================================= */

.v6-service-tab-label {
    display: block;

    min-width: 0;

    color: inherit;

    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   PANELS
   MENYATU DENGAN ACTIVE TAB
   ========================================================= */

.v6-panels {
    position: relative;
    z-index: 2;

    width: 100%;
    min-width: 0;

    margin: 0;

    padding: 0;

    background: #fff;

    overflow: visible;
}


/* hilangkan jarak antara tab dan form */
.v6-service-panel {
    position: relative;

    width: 100%;
    min-width: 0;

    margin: 0;

    padding: 0;

    background: #fff;

    overflow: visible;
}

.v6-search-form {
    position: relative;

    width: 100%;
    min-width: 0;

    margin: 0;

    padding: 14px 0 0;

    background: #fff;

    overflow: visible;
}


/* =========================================================
   OPTIONAL SEPARATOR NON ACTIVE
   ========================================================= */

.v6-service-tab:not(.is-active)
+ .v6-service-tab:not(.is-active)::before {
    content: "";

    position: absolute;

    left: -1px;
    top: 14px;
    bottom: 14px;

    width: 1px;

    background: #dfe4eb;

    pointer-events: none;
}


/* jangan tampilkan separator dekat active tab */
.v6-service-tab.is-active
+ .v6-service-tab::before,
.v6-service-tab:has(+ .v6-service-tab.is-active)::after {
    display: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1180px) {

    .v6-service-tabs {
        justify-content: flex-start;

        padding:
            7px
            7px
            0;
    }

    .v6-service-tab {
        flex: 0 0 auto;

        min-width: 138px;
        height: 46px;

        padding:
            0
            14px;
    }
}


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

@media (max-width: 680px) {

    .v2-service-hero + .v6-hero--booking-only,
    .v2-akap-hero + .v6-hero--booking-only {
        margin-top: -2.2rem;
        margin-bottom: 1rem;
    }

    .v6-service-tabs {
        padding:
            6px
            6px
            0;

        gap: 1px;

        border-radius:
            13px
            13px
            0
            0;
    }

    .v6-service-tab {
        flex: 0 0 auto;

        min-width: 116px;
        height: 44px;

        gap: 6px;

        padding:
            0
            11px;

        border-radius:
            10px
            10px
            0
            0;
    }

    .v6-service-tab-icon {
        flex-basis: 22px;

        width: 22px;
        height: 22px;
    }

    .v6-service-tab-icon img {
        width: 20px;
        height: 20px;
    }

    .v6-service-tab-label {
        font-size: 10.5px;
    }

    .v6-service-tab.is-active::before {
        left: -10px;

        width: 10px;
        height: 10px;

        border-radius:
            0
            0
            10px
            0;

        box-shadow:
            5px
            5px
            0
            5px
            #fff;
    }

    .v6-service-tab.is-active::after {
        right: -10px;

        width: 10px;
        height: 10px;

        border-radius:
            0
            0
            0
            10px;

        box-shadow:
            -5px
            5px
            0
            5px
            #fff;
    }
}

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

.v6-search-form {
    position: relative;

    width: 100%;
    min-width: 0;

    margin: 0;

    padding: 12px 0 0;

    overflow: visible;
}

.v6-search-grid,
.v6-ticket-route-row,
.v6-ticket-meta-row {
    display: grid;

    align-items: end;

    width: 100%;
    min-width: 0;

    gap: 10px;
}

.v6-search-grid > *,
.v6-ticket-route-row > *,
.v6-ticket-meta-row > * {
    min-width: 0;
}


/* =========================================================
   BUS & TRAVEL / AKAP
   ========================================================= */

.v6-search-grid--akap,
.v6-service-panel[data-v6-panel="akap"]
.v6-search-grid {
    grid-template-columns:
        minmax(0, 1fr)
        42px
        minmax(0, 1fr)
        minmax(190px, .82fr)
        46px;
}


/* =========================================================
   BUS PARIWISATA
   ========================================================= */

.v6-search-grid--pariwisata {
    grid-template-columns:
        minmax(135px, .72fr)
        minmax(0, 1fr)
        42px
        minmax(0, 1fr)
        minmax(150px, .78fr)
        minmax(150px, .78fr)
        46px;
}


/* =========================================================
   MOBIL
   ========================================================= */

.v6-search-grid--mobil,
.v6-service-panel[data-v6-panel="mobil"]
.v6-search-grid {
    grid-template-columns:
        minmax(120px, .78fr)
        minmax(130px, .82fr)
        minmax(130px, .8fr)
        minmax(130px, .8fr)
        minmax(105px, .65fr)
        minmax(105px, .65fr)
        46px;
}


/* =========================================================
   MOTOR / SEWA KAPAL
   ========================================================= */

.v6-search-grid--motor,
.v6-search-grid--kapal,
.v6-service-panel[data-v6-panel="motor"]
.v6-search-grid,
.v6-service-panel[data-v6-panel="kapal"]
.v6-search-grid {
    grid-template-columns:
        minmax(145px, 1fr)
        minmax(135px, .88fr)
        minmax(135px, .88fr)
        minmax(110px, .7fr)
        minmax(110px, .7fr)
        46px;
}


/* =========================================================
   TIKET KAPAL
   ========================================================= */

.v6-ticket-ship-form {
    display: flex;

    flex-direction: column;

    gap: 10px;
}

.v6-ticket-route-row {
    grid-template-columns:
        minmax(0, 1.1fr)
        42px
        minmax(0, 1.1fr)
        minmax(190px, .9fr);
}

.v6-ticket-meta-row {
    grid-template-columns:
        minmax(170px, .86fr)
        minmax(190px, .92fr)
        minmax(220px, 1fr)
        46px;
}


/* =========================================================
   FIELD GROUP
   ========================================================= */

.v6-field-group {
    position: relative;

    min-width: 0;
}

.v6-field-group > label {
    display: block;

    margin:
        0
        0
        6px
        2px;

    color: #60708a;

    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
}


/* =========================================================
   FIELD SHELL
   ========================================================= */

.v6-field-shell,
.v6-custom-select-trigger,
.v6-passenger-trigger {
    width: 100%;
    min-width: 0;

    height: var(--v6-field-height);

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

    border-radius:
        var(--v6-radius);

    background: #fff;

    box-shadow: none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.v6-field-shell {
    display: flex;

    align-items: center;

    padding-inline: 12px;
}

.v6-field-shell:hover,
.v6-custom-select-trigger:hover,
.v6-passenger-trigger:hover {
    border-color:
        var(--v6-border-hover);
}

.v6-field-shell:focus-within,
.v6-custom-select.is-open
.v6-custom-select-trigger,
.v6-passenger-trigger[aria-expanded="true"] {
    border-color: #a9bcdd;

    box-shadow:
        0 0 0 3px
        rgba(49, 95, 188, .065);
}


/* =========================================================
   DISABLED
   ========================================================= */

.v6-field-shell:has(.v6-field-select:disabled),
.v6-field-shell:has(.v6-field-input:disabled) {
    background: #f8fafc;
}

.v6-field-select:disabled,
.v6-field-input:disabled {
    opacity: 1;

    color: #9aa7b8;
}


/* =========================================================
   FIELD ICON
   ========================================================= */

.v6-field-icon {
    display: inline-flex;

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

    flex:
        0
        0
        18px;

    width: 18px;
    height: 18px;

    margin-right: 9px;

    color:
        var(--v6-icon);

    font-size: 14px;
    line-height: 1;
}


/* =========================================================
   INPUT / SELECT
   ========================================================= */

.v6-field-input,
.v6-field-select {
    display: block;

    width: 100%;
    min-width: 0;

    height: 100%;

    margin: 0;
    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color:
        var(--v6-text);

    font-size: 12.5px;
    font-weight: 500;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    appearance: none;
    -webkit-appearance: none;
}

.v6-field-input::placeholder {
    color: #9aa7b8;
}


/* native select arrow */
.v6-field-select {
    padding-right: 20px;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #8e9db2 50%
        ),
        linear-gradient(
            135deg,
            #8e9db2 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 8px) 21px,
        calc(100% - 4px) 21px;

    background-size:
        4px 4px,
        4px 4px;

    background-repeat: no-repeat;
}


/* =========================================================
   CUSTOM SELECT
   ========================================================= */

.v6-custom-select {
    position: relative;

    min-width: 0;
}

.v6-field-shell > .v6-custom-select--inline {
    position: relative;
    z-index: 5;

    width: 0;
    min-width: 0;
    flex: 1 1 auto;
}

/* Remove legacy select spacers so the value starts beside its icon. */
.v6-field-shell--overlay-select > i:empty {
    display: none;
}

.v6-field-shell--overlay-select > .v6-field-icon {
    margin-right: 6px;
}

/* Keep fields usable if a page script has not enhanced the select yet. */
.v6-field-select--overlay:not(.v6-native-select-hidden) {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    opacity: 1 !important;
    z-index: auto !important;
}

/* Keep the native select out of the flex layout after it is enhanced. */
.v6-field-select.v6-native-select-hidden {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.v6-custom-select-trigger {
    display: flex;

    align-items: center;

    padding:
        0
        11px;

    cursor: pointer;
}

.v6-custom-select-value {
    flex: 1;

    min-width: 0;

    overflow: hidden;

    color:
        var(--v6-text);

    font-size: 12.5px;
    font-weight: 500;

    text-align: left;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.v6-custom-select-value.is-placeholder {
    color: #9aa7b8;
}

.v6-custom-select-arrow,
.v6-passenger-arrow {
    flex:
        0
        0
        auto;

    margin-left: 8px;

    color: #8b9bb0;

    font-size: 10px;
}


/* =========================================================
   DROPDOWN BASE
   ========================================================= */

.v6-custom-select-menu {
    position: absolute;

    top: calc(100% + 7px);
    left: 0;

    z-index: 999;

    width:
        max(
            100%,
            220px
        );

    max-width:
        min(
            360px,
            calc(100vw - 32px)
        );

    padding: 0;

    border:
        1px solid
        #e3e9f2;

    border-radius: 14px;

    background: #fff;

    overflow: hidden;

    box-shadow:
        0 16px 36px
        rgba(32, 49, 76, .11);

    transform: none;
    translate: none;
}


/* right edge dropdown */
.v6-field-group:nth-last-child(-n + 2)
.v6-custom-select-menu {
    right: 0;
    left: auto;
}


/* =========================================================
   DROPDOWN SEARCH
   ========================================================= */

.v6-custom-select-search {
    display: flex;

    align-items: center;

    gap: 9px;

    min-height: 46px;

    padding:
        0
        14px;

    border: 0;
    border-bottom:
        1px solid
        #e9eef5;

    background: #fff;

    color: #60779a;
}

.v6-custom-select-search i {
    flex:
        0
        0
        auto;

    font-size: 14px;
}

.v6-custom-select-search-input {
    width: 100%;
    min-width: 0;

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color:
        var(--v6-text);

    font:
        500
        12px/1.4
        "Plus Jakarta Sans",
        "Segoe UI",
        sans-serif;
}

.v6-custom-select-search-input::placeholder {
    color: #9aa7b8;
}

.v6-custom-select-search:focus-within {
    background: #f9fbfe;

    color:
        var(--v6-primary);
}


/* =========================================================
   DROPDOWN OPTIONS
   ========================================================= */

.v6-custom-select-options {
    padding: 5px;
}

.v6-custom-select-empty {
    padding: 18px 14px;

    color: #7b8aa1;

    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

.v6-custom-select-option {
    display: flex;

    align-items: center;

    width: 100%;

    padding:
        9px
        10px;

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: #45556c;

    font-size: 11.5px;
    font-weight: 500;

    text-align: left;

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease;
}

.v6-custom-select-option:hover {
    background: #f6f8fb;

    color:
        #315b9f;
}


/* =========================================================
   LOCATION DROPDOWN
   ========================================================= */

.v6-custom-select--location
.v6-custom-select-menu {
    left: 0;
    right: auto;

    width:
        min(
            460px,
            calc(100vw - 32px)
        );

    max-width:
        calc(100vw - 32px);

    border-color: #dfe7f1;
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(32, 49, 76, .14);
}

.v6-custom-select--location
.v6-custom-select-options {
    max-height: 390px;

    padding: 0;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;

    scrollbar-color:
        #d8e0eb
        transparent;
}


/* =========================================================
   LOCATION ITEM
   ========================================================= */

.v6-location-group-title {
    padding: 11px 14px 7px;

    color: #20385f;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

.v6-location-option {
    position: relative;

    display: grid;

    align-items: center;

    width: 100%;
    min-width: 0;

    margin: 0;

    border: 0;

    background: #fff;

    text-align: left;

    cursor: pointer;

    transition:
        background .16s ease,
        color .16s ease;
}

.v6-location-option:hover {
    background: #f8faff;
}

.v6-location-option-title,
.v6-location-option-subtitle {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.v6-location-option-title {
    color: #253b60;

    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
}

.v6-location-option-subtitle {
    margin-top: 3px;

    color: #8997aa;

    font-size: 10.5px;
    font-weight: 450;
    line-height: 1.35;
}


/* Parent city followed by its selectable pickup/dropoff points. */
.v6-location-group {
    overflow: hidden;

    border-bottom: 1px solid #e9eef5;

    background: #fff;
}

.v6-location-group:last-child {
    border-bottom: 0;
}

.v6-location-option--all {
    grid-template-columns: 40px minmax(0, 1fr) 18px;
    gap: 10px;
    min-height: 66px;
    padding: 10px 14px;

    background: linear-gradient(90deg, #fbfcff, #fff);
}

.v6-location-option--all:hover {
    background: #f5f8ff;
}

.v6-location-option-parent-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #dfe7f4;
    border-radius: 10px;
    background: #f4f7fd;
    color: #416fda;
    font-size: 17px;
}

.v6-location-option-copy {
    display: block;
    min-width: 0;
}

.v6-location-option--all .v6-location-option-title {
    display: block;
    color: #20385f;
    font-size: 13.5px;
    font-weight: 700;
}

.v6-location-option--all .v6-location-option-subtitle {
    display: block;
    margin-top: 2px;
    font-size: 10px;
}

.v6-location-option-parent-arrow {
    color: #4771c6;
    font-size: 13px;
}

.v6-location-option--point {
    grid-template-columns: 26px minmax(0, 1fr) auto 12px;
    gap: 10px;
    min-height: 66px;
    padding: 10px 14px;
}

.v6-location-option--point + .v6-location-option--point {
    border-top: 1px solid #eef2f7;
}

.v6-location-option-route {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
    justify-content: center;
}

.v6-location-option-route::before {
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: 50%;
    width: 1px;
    background: #dce4ef;
    transform: translateX(-50%);
}

.v6-location-option-dot {
    position: relative;
    z-index: 1;
    width: 8px;
    height: 8px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #4774d2;
    box-shadow: 0 0 0 2px #e0e8fa;
}

.v6-location-option--point:first-of-type .v6-location-option-route::before {
    top: 50%;
}

.v6-location-option--all + .v6-location-option--point
.v6-location-option-route::before {
    top: 50%;
}

.v6-location-option--point:last-child .v6-location-option-route::before {
    bottom: 50%;
}

.v6-location-option--point .v6-location-option-title {
    display: block;
    font-size: 13px;
}

.v6-location-option--point .v6-location-option-subtitle {
    display: block;
}

.v6-location-option-action {
    padding: 6px 9px;
    border-radius: 999px;
    background: #edf3ff;
    color: #416fda;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.v6-location-option.v6-location-option--point .v6-location-option-chevron {
    display: inline-block !important;
    color: #74849b;
    font-size: 11px;
}

.v6-location-option.is-selected {
    background: #f3f7ff;
}

.v6-location-option--point:hover .v6-location-option-action,
.v6-location-option--point.is-selected .v6-location-option-action {
    background: #dfeaff;
}

/* Keep an opened ticket-ship port menu above fields in the following row. */
.v6-ticket-ship-form .v6-field-group:has(.v6-custom-select.is-open) {
    z-index: 1002;
}

.v6-ticket-ship-form .v6-passenger-select {
    z-index: 1;
}


/* =========================================================
   SWAP BUTTON
   ========================================================= */

.v6-field-group--swap {
    display: flex;

    align-items: flex-end;
    justify-content: center;

    padding-bottom: 3px;
}

.v6-route-switch {
    display: inline-flex;

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

    width: 40px;
    height: 40px;

    padding: 0;

    border:
        1px solid
        #dde5ef;

    border-radius: 10px;

    background: #f8fafc;

    color: #627a9f;

    font-size: 14px;

    box-shadow: none;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .15s ease;
}

.v6-route-switch:hover {
    background: #f1f5fb;

    border-color: #cbd7e6;

    color:
        var(--v6-primary);

    transform:
        translateY(-1px);
}


/* =========================================================
   SEARCH BUTTON
   ========================================================= */

.v6-search-action {
    display: flex;

    align-items: flex-end;
    justify-content: flex-end;

    min-width: 46px;
}

.v6-search-button {
    display: inline-flex;

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

    width: 46px;
    min-width: 46px;

    height: 46px;
    min-height: 46px;

    padding: 0;

    border: 0;

    border-radius: 12px;

    background:
        var(--v6-primary);

    color: #fff;

    cursor: pointer;

    box-shadow:
        0 7px 16px
        rgba(49, 95, 188, .18);

    transition:
        background .16s ease,
        transform .16s ease,
        box-shadow .16s ease;
}

.v6-search-button:hover {
    background:
        var(--v6-primary-hover);

    transform:
        translateY(-1px);

    box-shadow:
        0 9px 20px
        rgba(49, 95, 188, .22);
}


/* hide text */
.v6-search-button > span:first-child {
    display: none !important;
}


/* icon only */
.v6-search-button-icon {
    display: inline-flex;

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

    width: 20px;
    height: 20px;

    flex:
        0
        0
        20px;

    border: 0;

    background: transparent;

    font-size: 16px;
    line-height: 1;
}

.v6-search-button-icon i {
    font-size: 16px;
    line-height: 1;
}


/* =========================================================
   PASSENGER
   ========================================================= */

.v6-passenger-select {
    position: relative;

    min-width: 0;
}

.v6-passenger-trigger {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding:
        0
        11px;

    cursor: pointer;
}

.v6-passenger-trigger-main {
    display: flex;

    align-items: center;

    min-width: 0;
}

.v6-passenger-summary {
    min-width: 0;

    overflow: hidden;

    color:
        var(--v6-text);

    font-size: 12.5px;
    font-weight: 500;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.v6-passenger-dropdown {
    position: absolute;

    top: calc(100% + 7px);
    right: 0;

    z-index: 999;

    width:
        min(
            300px,
            calc(100vw - 32px)
        );

    max-width:
        calc(100vw - 32px);

    padding: 7px;

    border:
        1px solid
        #e5eaf1;

    border-radius: 12px;

    background: #fff;

    box-shadow:
        0 14px 32px
        rgba(32, 48, 73, .11);
}


/* =========================================================
   FORM HELPER
   ========================================================= */

.v6-form-helper {
    position: static;
    z-index: auto;

    display: flex;
    align-items: flex-start;

    width: 100%;
    min-width: 0;

    gap: 6px;

    margin: 8px 0 0;

    padding: 7px 2px 0;

    border: 0;
    border-top: 1px solid #eef2f6;

    background: transparent;

    color: #7b899d;

    font-size: 10.5px;
    font-weight: 450;
    line-height: 1.45;

    transform: none;
}

.v6-form-helper > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 14px;

    width: 14px;
    height: 14px;

    margin-top: 1px;

    color: #7084a3;

    font-size: 11px;
}

.v6-form-helper > span {
    flex: 1;

    min-width: 0;
}

/* =========================================================
   PANEL NOTE
   ========================================================= */

.v6-panel-note {
    margin-bottom: 9px;
}

.v6-panel-note-pill {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding:
        5px
        9px;

    border: 0;

    border-radius: 999px;

    background: #f4f7fb;

    color: #6f8099;

    font-size: 10.5px;
    font-weight: 550;
}


/* =========================================================
   IMPORTANT
   PREVENT DOUBLE / STACKED VISUAL
   ========================================================= */

/* Prevent pseudo content from older CSS */
.v6-field-shell::before,
.v6-field-shell::after,
.v6-custom-select-trigger::before,
.v6-custom-select-trigger::after {
    content: none !important;
}


/* prevent duplicated icon */
.v6-field-shell
> .v6-field-icon
~ .v6-field-icon {
    display: none !important;
}


/* only one visible value inside custom trigger */
.v6-custom-select-trigger
[data-v6-select-value]
~ [data-v6-select-value] {
    display: none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1180px) {

    .v6-service-tabs {
        justify-content: flex-start;

        padding-inline: 2px;
    }

    .v6-service-tab {
        flex: 0 0 auto;

        min-width: 128px;
    }

    .v6-search-grid--pariwisata,
    .v6-search-grid--mobil {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .v6-search-grid--akap,
    .v6-search-grid--motor,
    .v6-search-grid--kapal,
    .v6-ticket-route-row,
    .v6-ticket-meta-row {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .v6-field-group--swap {
        justify-content: flex-start;

        padding-bottom: 0;
    }

    .v6-search-action {
        justify-content: flex-start;
    }
}


/* =========================================================
   TABLET SMALL
   ========================================================= */

@media (max-width: 980px) {

    .v6-hero {
        --nav-offset: 4.7rem;
        --hero-height: 21rem;

        padding-bottom: .65rem;
    }

    .v6-hero-image {
        object-position:
            60%
            center;
    }
}


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

@media (max-width: 680px) {

    .v6-hero
    .v6-container {
        width:
            calc(100% - 16px);
    }

    .v6-booking-card {
        padding:
            0
            10px
            10px;

        border-radius: 14px;
    }

    .v6-search-form {
        padding-top: 9px;
    }

    .v6-search-grid--pariwisata,
    .v6-search-grid--akap,
    .v6-search-grid--mobil,
    .v6-search-grid--motor,
    .v6-search-grid--kapal,
    .v6-service-panel[data-v6-panel]
    .v6-search-grid,
    .v6-ticket-route-row,
    .v6-ticket-meta-row {
        grid-template-columns:
            1fr;

        gap: 8px;
    }


    /* swap */
    .v6-field-group--swap {
        display: flex;

        justify-content: flex-end;

        margin:
            -2px
            0;

        padding: 0;
    }

    .v6-route-switch {
        width: 38px;
        height: 36px;

        border-radius: 9px;
    }

    .v6-route-switch i {
        transform:
            rotate(90deg);
    }


    /* search */
    .v6-search-action {
        justify-content: flex-end;
    }

    .v6-search-button {
        width: 44px;
        min-width: 44px;

        height: 44px;
        min-height: 44px;
    }


    /* dropdown */
    .v6-custom-select-menu,
    .v6-custom-select--location
    .v6-custom-select-menu,
    .v6-passenger-dropdown {
        left: 0;
        right: auto;

        width: 100%;

        min-width: 0;

        max-width:
            calc(100vw - 32px);
    }

    .v6-location-option--all {
        grid-template-columns: 36px minmax(0, 1fr) 16px;
        min-height: 58px;
        padding: 9px 12px;
    }

    .v6-location-option-parent-icon {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        font-size: 15px;
    }

    .v6-location-option--point {
        grid-template-columns: 22px minmax(0, 1fr) auto 10px;
        gap: 8px;
        min-height: 60px;
        padding: 9px 12px;
    }

    .v6-location-option--point .v6-location-option-title {
        font-size: 12px;
    }

    .v6-location-option-action {
        padding: 5px 8px;
        font-size: 9.5px;
    }

    /* label */
    .v6-field-group > label {
        font-size: 10.5px;
    }

    .v6-form-helper {
        font-size: 10px;
    }
}

.v6-service-tabs {
    margin: 0;

    padding: 0;

    gap: 0;
}

.v6-service-tab {
    flex: 0 0 auto;

    min-width: 112px;
    min-height: 54px;

    gap: 6px;

    padding: 8px 10px;
}

.v6-service-tab-icon {
    flex-basis: 24px;

    width: 24px;
    height: 24px;
}

.v6-service-tab-icon img {
    width: 21px;
    height: 21px;
}

.v6-service-tab-label {
    font-size: 10.5px;
}

@media (min-width: 681px) {
    .v6-service-tabs {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        width: calc(100% + 28px);
        margin-inline: -14px;
    }

    .v6-service-tab {
        width: 100%;
        min-width: 0;
        flex: initial;
    }
}

.v6-form-helper {
    margin-top: 7px;

    padding-top: 6px;

    font-size: 10px;
}