/* =========================================================
   AKAP DETAIL PAGE
   ========================================================= */

.v2-akap-detail {
    padding: 2rem 0 4.5rem;
    background: transparent;
    color: #203554;
}

.v2-akap-detail .v2-container {
    width: min(100% - 2rem, 75rem);
    margin: 0 auto;
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.v2-akap-detail-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: 1.15rem;

    color: #71819a;
    font-size: .8rem;
}

.v2-akap-detail-breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}

.v2-akap-detail-breadcrumb a:hover {
    color: #265ed1;
}

.v2-akap-detail-breadcrumb i {
    color: #a0adbd;
    font-size: .62rem;
}


/* =========================================================
   IDENTITY
   ========================================================= */

.v2-akap-detail-identity {
    margin-bottom: 1rem;
}

.v2-akap-detail-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
}

.v2-akap-detail h1,
.v2-akap-detail h2,
.v2-akap-gallery-modal h2 {
    margin: 0;
    color: #18315a;

    font-family:
        "Manrope",
        "Plus Jakarta Sans",
        sans-serif;

    font-weight: 800;
}

.v2-akap-detail h1 {
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: -.04em;
}

.v2-akap-detail h2 {
    font-size: 1rem;
}


/* =========================================================
   RATING
   ========================================================= */

.v2-akap-detail-rating {
    display: inline-flex;
    align-items: center;
    gap: .3rem;

    padding: .38rem .58rem;

    border: 1px solid #e7edf5;
    border-radius: .55rem;

    background: #fff;
    color: #354a66;

    font-size: .76rem;
    font-weight: 750;
}

.v2-akap-detail-rating i,
.v2-akap-detail-review-score i {
    color: #f5b83b;
}

.v2-akap-detail-rating small {
    color: #7a899e;
    font-size: .7rem;
    font-weight: 600;
}


/* =========================================================
   META
   ========================================================= */

.v2-akap-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .7rem;
}

.v2-akap-detail-meta span {
    display: inline-flex;
    align-items: center;
    gap: .42rem;

    padding: .42rem .68rem;

    border-radius: 999px;

    background: #ffffff;
    color: #344a6d;

    font-size: .75rem;
    font-weight: 700;
}

.v2-akap-detail-meta i {
    color: #2864d7;
    font-size: .82rem;
}


/* =========================================================
   GALLERY
   ========================================================= */

.v2-akap-detail-gallery {
    display: grid;
    grid-template-columns: 1.18fr .94fr;
    gap: .55rem;
    height: clamp(18rem, 31vw, 23rem);
    min-height: 0;
}

.v2-akap-detail-gallery a,
.v2-akap-detail-gallery-main,
.v2-akap-detail-gallery-grid > * {
    position: relative;
    overflow: hidden;

    border-radius: .9rem;
    background: #eaf0f7;
    box-shadow: 0 .5rem 1.25rem rgba(27, 54, 94, .08);
}

.v2-akap-detail-gallery img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .3s ease;
}

.v2-akap-detail-gallery a:hover img {
    transform: scale(1.035);
}

.v2-akap-detail-gallery-caption {
    position: absolute;
    right: .55rem;
    bottom: .55rem;
    left: .55rem;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .42rem .55rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: .55rem;
    background: linear-gradient(90deg, rgba(19, 37, 65, .82), rgba(19, 37, 65, .48));
    color: #fff;
    font-size: .66rem;
    font-weight: 750;
    backdrop-filter: blur(8px);
}

.v2-akap-detail-gallery-caption i { color: #9cc0ff; }
.v2-akap-detail-gallery-main .v2-akap-detail-gallery-caption { right: .7rem; bottom: .7rem; left: auto; font-size: .72rem; }

.v2-akap-detail-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    min-height: 0;
}

/* Keep the thumbnail column balanced when a bus has fewer than five photos. */
.v2-akap-detail-gallery-grid > a:only-child {
    grid-row: 1 / -1;
    grid-column: 1 / -1;
}

.v2-akap-detail-gallery-grid > a:first-child:nth-last-child(2),
.v2-akap-detail-gallery-grid > a:first-child:nth-last-child(2) ~ a,
.v2-akap-detail-gallery-grid > a:nth-child(3):last-child {
    grid-column: 1 / -1;
}

.v2-akap-detail-gallery-empty {
    display: grid;
    place-items: center;
    grid-column: span 2;

    color: #74849b;
    font-size: .82rem;
}

.v2-akap-detail-gallery-more {
    position: absolute;
    right: .6rem;
    bottom: .6rem;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: .4rem;

    padding: .55rem .72rem;

    border: 0;
    border-radius: .58rem;

    background: rgba(20, 35, 57, .84);
    color: #fff;

    backdrop-filter: blur(7px);

    font-size: .72rem;
    font-weight: 700;

    cursor: pointer;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.v2-akap-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 19rem);
    gap: 1.35rem;

    align-items: start;

    margin-top: 1.35rem;
}

.v2-akap-detail-content {
    min-width: 0;
}


/* =========================================================
   MODERN TRIP SUMMARY
   ========================================================= */

.v2-akap-detail-summary {
    overflow: hidden;

    width: 100%;

    border: 1px solid #e4eaf3;
    border-radius: 18px;

    background: #fff;

    box-shadow:
        0 10px 30px rgba(33, 62, 105, .05);
}


/* =========================================================
   TRIP ROUTE
   ========================================================= */

.v2-akap-trip-route {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(150px, .72fr)
        minmax(0, 1fr);

    align-items: center;
    gap: 22px;

    padding: 24px 26px;
}

.v2-akap-trip-location {
    display: flex;
    align-items: center;
    gap: 13px;

    min-width: 0;
}

.v2-akap-trip-location.is-destination {
    flex-direction: row-reverse;
    text-align: right;
}

.v2-akap-trip-marker {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    border-radius: 13px;

    background: #f0f5ff;
    color: #356cdf;

    font-size: 17px;
}

.v2-akap-trip-location.is-destination
.v2-akap-trip-marker {
    background: #eef8f4;
    color: #29845f;
}

.v2-akap-trip-location-text {
    display: grid;
    gap: 3px;

    min-width: 0;
}

.v2-akap-trip-location-text small {
    color: #8a98aa;

    font-size: 11px;
    font-weight: 600;
}

.v2-akap-trip-location-text strong {
    overflow: hidden;

    color: #17345f;

    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;

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

.v2-akap-trip-location-text span {
    overflow: hidden;

    color: #8190a4;

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

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


/* =========================================================
   TRIP ROUTE LINE
   ========================================================= */

.v2-akap-trip-line {
    display: flex;
    align-items: center;

    width: 100%;
}

.v2-akap-trip-line-track {
    flex: 1;

    height: 1px;

    background-image:
        linear-gradient(
            to right,
            #cad5e5 50%,
            transparent 50%
        );

    background-size: 8px 1px;
}

.v2-akap-trip-bus {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    margin: 0 9px;

    border: 6px solid #f4f7fc;
    border-radius: 50%;

    background: #fff;
    color: #3269d6;

    box-shadow:
        0 4px 12px rgba(38, 82, 151, .08);

    font-size: 15px;
}


/* =========================================================
   TRIP INFORMATION
   ========================================================= */

.v2-akap-trip-info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    padding: 0 26px;

    border-top: 1px solid #edf1f6;

    background: #fbfcfe;
}

.v2-akap-trip-info-item {
    display: flex;
    align-items: center;
    gap: 12px;

    min-width: 0;

    padding: 18px 20px;
}

.v2-akap-trip-info-item:first-child {
    padding-left: 0;
}

.v2-akap-trip-info-item:last-child {
    padding-right: 0;
}

.v2-akap-trip-info-item:not(:last-child) {
    border-right: 1px solid #e8edf4;
}

.v2-akap-trip-info-icon {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 38px;
    height: 38px;

    border-radius: 11px;

    background: #eef4ff;
    color: #336bd5;

    font-size: 15px;
}

.v2-akap-trip-info-item > div {
    display: grid;
    gap: 2px;

    min-width: 0;
}

.v2-akap-trip-info-item small {
    color: #8996a8;

    font-size: 11px;
    font-weight: 500;
}

.v2-akap-trip-info-item strong {
    overflow: hidden;

    color: #203b65;

    font-size: 15px;
    font-weight: 750;
    line-height: 1.4;

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

.v2-akap-trip-info-item span:not(.v2-akap-trip-info-icon) {
    color: #8290a4;

    font-size: 12px;
}


/* =========================================================
   GENERIC SECTION
   ========================================================= */

.v2-akap-detail-section {
    padding: 1.35rem .1rem;

    border-bottom: 1px solid #e7edf5;
}

.v2-akap-detail-section > p {
    margin: .65rem 0 0;

    color: #596b83;

    font-size: .82rem;
    line-height: 1.75;
}


/* =========================================================
   FACILITIES
   ========================================================= */

.v2-akap-detail-facilities {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: .55rem;

    margin-top: .85rem;
}

.v2-akap-detail-facilities span {
    display: flex;
    align-items: center;
    gap: .5rem;

    min-width: 0;

    padding: .52rem .55rem;

    border: 1px solid #e6edf7;
    border-radius: .65rem;

    color: #4d607a;

    font-size: .73rem;
    font-weight: 700;
}

.v2-akap-detail-facilities i {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 1.7rem;
    height: 1.7rem;

    border-radius: .48rem;

    background: #eff4ff;
    color: #3265d2;

    font-size: .8rem;
}

.v2-akap-detail-facilities .is-empty {
    grid-column: 1 / -1;
    color: #8492a5;
}


/* =========================================================
   ROUTE PREVIEW
   ========================================================= */

.v2-akap-detail-route-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;
}

.v2-akap-detail-route-preview > div {
    display: grid;
    gap: .3rem;
}

.v2-akap-detail-route-preview p {
    margin: 0;

    color: #7c8da5;
    font-size: .75rem;
}

.v2-akap-detail-route-preview button {
    display: inline-flex;
    align-items: center;
    gap: .4rem;

    padding: .55rem .78rem;

    border: 1px solid #dce7f5;
    border-radius: .6rem;

    background: #fff;
    color: #2d67d8;

    font-size: .73rem;
    font-weight: 750;

    cursor: pointer;

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

.v2-akap-detail-route-preview button:hover {
    border-color: #c8d8ee;
    background: #f6f9fe;
}


/* =========================================================
   POLICIES
   ========================================================= */

.v2-akap-detail-policies {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 1rem;

    margin-top: .85rem;
}

.v2-akap-detail-policies div {
    display: grid;
    gap: .35rem;
}

.v2-akap-detail-policies i {
    color: #2f68d8;
    font-size: 1.05rem;
}

.v2-akap-detail-policies strong {
    color: #425671;
    font-size: .73rem;
}

.v2-akap-detail-policies span {
    color: #7d8da2;

    font-size: .68rem;
    line-height: 1.55;
}


/* =========================================================
   REVIEWS
   ========================================================= */

.v2-akap-detail-review-score {
    display: flex;
    align-items: center;
    gap: .9rem;

    margin-top: .75rem;
}

.v2-akap-detail-review-score strong {
    color: #244b8e;
    font-size: 2rem;
}

.v2-akap-detail-review-score span {
    display: flex;
    align-items: center;
    gap: .3rem;

    color: #70819a;
    font-size: .72rem;
}


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

.v2-akap-detail-booking {
    position: static;
    align-self: start;
    min-width: 0;

    padding: 1.15rem;

    border: 1px solid #e5ebf4;
    border-radius: 1.1rem;

    background: #fff;

    box-shadow:
        0 14px 35px rgba(34, 64, 105, .07);
}

.v2-akap-booking-form {
    display: grid;
    gap: 1rem;
}


/* =========================================================
   BOOKING HEADING
   ========================================================= */

.v2-akap-booking-heading {
    display: flex;
    align-items: center;
    gap: .7rem;

    padding-bottom: 1rem;

    border-bottom: 1px solid #edf1f6;
}

.v2-akap-booking-heading-icon {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 2.75rem;
    height: 2.75rem;

    border-radius: .8rem;

    background: #eef4ff;
    color: #2864d7;

    font-size: 1.1rem;
}

.v2-akap-booking-heading > div:last-child {
    min-width: 0;
}

.v2-akap-booking-heading h2 {
    margin: 0;

    color: #18315a;

    font-size: .95rem;
    font-weight: 800;
}

.v2-akap-booking-heading p {
    margin: .18rem 0 0;

    color: #8190a4;

    font-size: .7rem;
}


/* =========================================================
   BOOKING FIELD
   ========================================================= */

.v2-akap-booking-field {
    position: relative;
}

.v2-akap-booking-field > label {
    display: flex;
    align-items: center;
    gap: .35rem;

    margin: 0 0 .42rem;

    color: #425671;

    font-size: .74rem;
    font-weight: 750;
}

.v2-akap-booking-field > label i {
    color: #356dd2;
    font-size: .82rem;
}


/* =========================================================
   HIDE NATIVE SELECT
   ========================================================= */

.v2-akap-native-select {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: -1px !important;
    padding: 0 !important;

    overflow: hidden;

    border: 0 !important;

    clip: rect(0 0 0 0);
    white-space: nowrap;

    opacity: 0;

    pointer-events: none;
}


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

.v2-akap-custom-select {
    position: relative;
}

.v2-akap-custom-select.is-open {
    z-index: 50;
}

.v2-akap-custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: .7rem;

    width: 100%;
    min-height: 3.35rem;

    padding: .55rem .68rem;

    border: 1px solid #dfe7f1;
    border-radius: .82rem;

    background: #fff;
    color: #344963;

    cursor: pointer;

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

.v2-akap-custom-select-trigger:hover {
    border-color: #cbd8e9;
    background: #fbfcfe;
}

.v2-akap-custom-select-trigger:disabled {
    cursor: default;
    border-color: #dfe7f1;
    background: #fbfcfe;
    color: #52657d;
}

.v2-akap-custom-select.is-locked .v2-akap-custom-select-menu {
    display: none;
}

.v2-akap-custom-select.is-open
.v2-akap-custom-select-trigger {
    border-color: #7ca2e7;

    background: #fff;

    box-shadow:
        0 0 0 3px rgba(61, 112, 204, .1);
}

.v2-akap-custom-select-main {
    display: flex;
    align-items: center;
    gap: .62rem;

    min-width: 0;
}

.v2-akap-custom-select-icon {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 2rem;
    height: 2rem;

    border-radius: .58rem;

    background: #eef4ff;
    color: #2864d7;

    font-size: .88rem;
}

.v2-akap-custom-select-icon.is-destination {
    background: #edf8f3;
    color: #26805e;
}

.v2-akap-custom-select-text {
    overflow: hidden;

    color: #304661;

    font-size: .77rem;
    font-weight: 650;

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

.v2-akap-custom-select-arrow {
    flex: 0 0 auto;

    color: #8291a5;

    font-size: .72rem;

    transition: transform .2s ease;
}

.v2-akap-custom-select.is-open
.v2-akap-custom-select-arrow {
    transform: rotate(180deg);
}


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

.v2-akap-custom-select-menu {
    position: absolute;

    top: calc(100% + .45rem);
    right: 0;
    left: 0;

    z-index: 60;

    visibility: hidden;

    overflow: hidden;

    border: 1px solid #dfe7f1;
    border-radius: .9rem;

    background: #fff;

    box-shadow:
        0 18px 45px rgba(31, 54, 88, .15);

    opacity: 0;

    transform: translateY(-5px);

    pointer-events: none;

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

.v2-akap-custom-select.is-open
.v2-akap-custom-select-menu {
    visibility: visible;

    opacity: 1;

    transform: translateY(0);

    pointer-events: auto;
}

.v2-akap-custom-select-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: .5rem;

    padding: .72rem .82rem;

    border-bottom: 1px solid #edf1f6;

    background: #fafbfd;
}

.v2-akap-location-search {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 .65rem .45rem;
    padding: 0 .6rem;
    border: 1px solid #dfe7f1;
    border-radius: .6rem;
    background: #f8faff;
    color: #6980a0;
}

.v2-akap-location-search:focus-within {
    border-color: #7ca2e7;
    box-shadow: 0 0 0 3px rgba(61, 112, 204, .1);
}

.v2-akap-location-search input {
    width: 100%;
    min-height: 2.35rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: #304661;
    font-size: .72rem;
}

.v2-akap-location-search input::placeholder { color: #95a4b7; }

.v2-akap-location-empty {
    margin: .2rem .8rem .7rem;
    color: #7c8ca3;
    font-size: .7rem;
    text-align: center;
}

.v2-akap-custom-select-menu-header span {
    color: #354a68;

    font-size: .72rem;
    font-weight: 750;
}

.v2-akap-custom-select-menu-header small {
    color: #8997aa;
    font-size: .63rem;
}

.v2-akap-custom-select-options {
    max-height: 15rem;

    padding: .35rem;

    overflow-y: auto;
}

.v2-akap-custom-select-options::-webkit-scrollbar {
    width: 5px;
}

.v2-akap-custom-select-options::-webkit-scrollbar-track {
    background: transparent;
}

.v2-akap-custom-select-options::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: #d6deea;
}


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

.v2-akap-custom-select-option {
    display: grid;
    grid-template-columns:
        2rem
        minmax(0, 1fr)
        auto;

    align-items: center;
    gap: .6rem;

    width: 100%;

    padding: .62rem;

    border: 0;
    border-radius: .65rem;

    background: transparent;
    color: #425571;

    cursor: pointer;
    text-align: left;

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

.v2-akap-custom-select-option:hover {
    background: #f5f8fd;
}

.v2-akap-custom-select-option.is-selected {
    background: #edf4ff;
}

.v2-akap-select-option-icon {
    display: grid;
    place-items: center;

    width: 2rem;
    height: 2rem;

    border-radius: .58rem;

    background: #f1f5fb;
    color: #3970d3;

    font-size: .8rem;
}

.v2-akap-select-option-icon.is-destination {
    background: #edf8f3;
    color: #25805f;
}

.v2-akap-custom-select-option > span:nth-child(2) {
    display: grid;
    gap: .12rem;

    min-width: 0;
}

.v2-akap-custom-select-option strong {
    overflow: hidden;

    color: #334964;

    font-size: .74rem;
    font-weight: 700;

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

.v2-akap-custom-select-option small {
    overflow: hidden;

    color: #8492a5;

    font-size: .65rem;

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

.v2-akap-select-check {
    visibility: hidden;

    color: #2864d7;

    font-size: .8rem;

    opacity: 0;
}

.v2-akap-custom-select-option.is-selected
.v2-akap-select-check {
    visibility: visible;
    opacity: 1;
}


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

.v2-akap-booking-passengers {
    display: grid;
    padding-top: .1rem;
}

.v2-akap-passenger-control {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: .8rem;

    padding: .68rem 0;
}

.v2-akap-passenger-control +
.v2-akap-passenger-control {
    border-top: 1px solid #edf1f6;
}

.v2-akap-passenger-info {
    display: flex;
    align-items: center;
    gap: .6rem;

    min-width: 0;
}

.v2-akap-passenger-icon {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 2rem;
    height: 2rem;

    border-radius: .58rem;

    background: #f1f5fb;
    color: #426fae;

    font-size: .88rem;
}

.v2-akap-passenger-info > span:last-child {
    display: grid;
    gap: .1rem;
}

.v2-akap-passenger-info strong {
    color: #3d526f;

    font-size: .74rem;
    font-weight: 750;
}

.v2-akap-passenger-info small {
    color: #8794a6;
    font-size: .64rem;
}


/* =========================================================
   STEPPER
   ========================================================= */

.v2-akap-stepper {
    display: flex;
    align-items: center;

    gap: .22rem;

    flex: 0 0 auto;

    padding: .22rem;

    border: 1px solid #e0e7f1;
    border-radius: .68rem;

    background: #fafbfd;
}

.v2-akap-stepper button {
    display: grid;
    place-items: center;

    width: 1.85rem;
    height: 1.85rem;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: .48rem;

    background: #fff;
    color: #416590;

    box-shadow:
        0 1px 3px rgba(36, 58, 89, .08);

    font-size: .7rem;

    cursor: pointer;

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

.v2-akap-stepper button:hover {
    background: #edf4ff;
    color: #2864d7;
}

.v2-akap-stepper input {
    width: 2rem !important;
    min-height: auto !important;

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

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    color: #31445f;

    box-shadow: none !important;

    font-size: .78rem !important;
    font-weight: 750;

    text-align: center;

    appearance: textfield;
}

.v2-akap-stepper input:focus {
    outline: none;
    box-shadow: none !important;
}

.v2-akap-stepper input::-webkit-inner-spin-button,
.v2-akap-stepper input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}


/* =========================================================
   BOOKING SUBMIT
   ========================================================= */

.v2-akap-booking-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: .6rem;

    width: 100%;
    min-height: 3rem;

    margin-top: .05rem;
    padding: 0 .95rem;

    border: 0;
    border-radius: .82rem;

    background: #2461cf;
    color: #fff;

    font-size: .77rem;
    font-weight: 750;

    cursor: pointer;

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

.v2-akap-booking-submit:hover {
    background: #1f57bc;

    box-shadow:
        0 8px 20px rgba(39, 97, 201, .18);
}

.v2-akap-booking-submit:active {
    transform: translateY(1px);
}

.v2-akap-booking-submit i {
    font-size: .9rem;
}


/* =========================================================
   BOOKING SECURITY
   ========================================================= */

.v2-akap-booking-security {
    display: flex;
    align-items: flex-start;
    gap: .4rem;

    color: #8190a4;

    font-size: .65rem;
    line-height: 1.5;
}

.v2-akap-booking-security i {
    flex: 0 0 auto;

    margin-top: .08rem;

    color: #36805b;

    font-size: .75rem;
}


/* =========================================================
   ROUTE MODAL
   ========================================================= */

.v2-akap-route-dialog {
    max-width: 36rem;
}

.v2-akap-route-modal {
    overflow: hidden;

    border: 0;
    border-radius: 1.2rem;

    background: #fff;

    box-shadow:
        0 30px 80px rgba(21, 39, 67, .2);
}


/* =========================================================
   ROUTE MODAL HEADER
   ========================================================= */

.v2-akap-route-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 1rem;

    padding: 1.2rem 1.3rem 1rem;

    border-bottom: 1px solid #edf1f6;
}

.v2-akap-route-header-main {
    display: flex;
    align-items: flex-start;
    gap: .75rem;

    min-width: 0;
}

.v2-akap-route-header-icon {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 2.7rem;
    height: 2.7rem;

    border-radius: .8rem;

    background: #eef4ff;
    color: #2864d7;

    font-size: 1.05rem;
}

.v2-akap-route-eyebrow {
    display: block;

    margin-bottom: .18rem;

    color: #72839a;

    font-size: .67rem;
    font-weight: 700;
}

.v2-akap-route-modal-header h2 {
    margin: 0;

    color: #18315a;

    font-size: 1.05rem;
    font-weight: 800;
}

.v2-akap-route-modal-header p {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;

    margin: .28rem 0 0;

    color: #71819a;
    font-size: .7rem;
}

.v2-akap-route-modal-header p i {
    color: #4678d3;
    font-size: .62rem;
}

.v2-akap-route-close {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 2rem;
    height: 2rem;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #f4f6f9;
    color: #64758c;

    cursor: pointer;

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

.v2-akap-route-close:hover {
    background: #e9eef5;
    color: #263c5b;
}


/* =========================================================
   ROUTE SUMMARY
   ========================================================= */

.v2-akap-route-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    padding: .85rem 1.3rem;

    background: #f8faff;
}

.v2-akap-route-summary > div {
    display: flex;
    align-items: center;
    gap: .52rem;

    min-width: 0;
}

.v2-akap-route-summary > div:not(:last-child) {
    padding-right: .8rem;
    margin-right: .8rem;

    border-right: 1px solid #e2e8f1;
}

.v2-akap-route-summary i {
    flex: 0 0 auto;

    color: #3970d5;
    font-size: .85rem;
}

.v2-akap-route-summary span {
    display: grid;
    gap: .1rem;

    min-width: 0;
}

.v2-akap-route-summary small {
    color: #8995a7;
    font-size: .61rem;
}

.v2-akap-route-summary strong {
    overflow: hidden;

    color: #3b506c;

    font-size: .69rem;
    font-weight: 750;

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


/* =========================================================
   ROUTE MODAL BODY
   ========================================================= */

.v2-akap-route-modal-body {
    max-height: min(61vh, 31rem);

    padding: 1.15rem 1.3rem;

    overflow-y: auto;
}

.v2-akap-route-modal-body::-webkit-scrollbar {
    width: 5px;
}

.v2-akap-route-modal-body::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: #d8e0eb;
}

.v2-akap-route-title-section {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 1.2rem;
}

.v2-akap-route-title-section h3 {
    margin: 0;

    color: #344b69;

    font-size: .78rem;
    font-weight: 800;
}

.v2-akap-route-title-section p {
    margin: .2rem 0 0;

    color: #8995a7;
    font-size: .67rem;
}

.v2-akap-route-title-section p strong {
    color: #60748e;
}

.v2-akap-route-title-section > span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;

    flex: 0 0 auto;

    padding: .36rem .58rem;

    border-radius: 999px;

    background: #eef4ff;
    color: #3266c6;

    font-size: .63rem;
    font-weight: 750;
}


/* =========================================================
   ROUTE TIMELINE
   ========================================================= */

.v2-akap-route-timeline {
    margin: 0;
    padding: 0;

    list-style: none;
}

.v2-akap-route-timeline > li {
    position: relative;

    display: grid;
    grid-template-columns:
        2rem
        minmax(0, 1fr)
        auto;

    gap: .72rem;

    min-height: 4.4rem;
}

.v2-akap-route-timeline > li:not(:last-child)::before {
    position: absolute;

    top: 1.75rem;
    bottom: -.25rem;
    left: .94rem;

    width: 2px;

    border-radius: 999px;

    background: #dce5f2;

    content: "";
}


/* =========================================================
   ROUTE MARKER
   ========================================================= */

.v2-akap-route-marker {
    position: relative;
    z-index: 1;
}

.v2-akap-route-marker > span {
    display: grid;
    place-items: center;

    width: 1.9rem;
    height: 1.9rem;

    border: 4px solid #f2f6fb;
    border-radius: 50%;

    background: #fff;
    color: #8797ab;

    font-size: .52rem;
}

.v2-akap-route-timeline .is-start
.v2-akap-route-marker > span {
    border-color: #e8f0ff;

    background: #2e68d5;
    color: #fff;

    font-size: .68rem;
}

.v2-akap-route-timeline .is-end
.v2-akap-route-marker > span {
    border-color: #e8f7ef;

    background: #2d8660;
    color: #fff;

    font-size: .67rem;
}


/* =========================================================
   ROUTE POINT
   ========================================================= */

.v2-akap-route-point {
    display: grid;
    align-content: start;
    gap: .14rem;

    min-width: 0;

    padding-top: .06rem;
}

.v2-akap-route-point-type {
    color: #8896a8;

    font-size: .6rem;
    font-weight: 750;

    letter-spacing: .04em;
    text-transform: uppercase;
}

.v2-akap-route-timeline .is-start
.v2-akap-route-point-type {
    color: #3269d0;
}

.v2-akap-route-timeline .is-end
.v2-akap-route-point-type {
    color: #31805e;
}

.v2-akap-route-point strong {
    color: #374d6b;

    font-size: .77rem;
    font-weight: 750;
    line-height: 1.4;
}

.v2-akap-route-point small {
    display: flex;
    align-items: center;
    gap: .25rem;

    margin-top: .12rem;

    color: #8996a8;
    font-size: .65rem;
}

.v2-akap-route-point small i {
    color: #758aa5;
    font-size: .62rem;
}


/* =========================================================
   ROUTE TIME
   ========================================================= */

.v2-akap-route-timeline time {
    display: inline-flex;
    align-items: center;
    gap: .3rem;

    height: max-content;

    padding: .33rem .5rem;

    border-radius: .5rem;

    background: #f2f6fb;
    color: #58718f;

    font-size: .64rem;
    font-weight: 750;

    white-space: nowrap;
}

.v2-akap-route-timeline time i {
    font-size: .62rem;
}


/* =========================================================
   EMPTY ROUTE
   ========================================================= */

.v2-akap-route-timeline .is-empty {
    display: block;

    min-height: 0;
}

.v2-akap-route-empty {
    display: flex;
    align-items: center;
    gap: .7rem;

    padding: .95rem;

    border: 1px dashed #dce5ef;
    border-radius: .8rem;

    background: #fafbfd;
}

.v2-akap-route-empty > i {
    color: #7990ae;
    font-size: 1rem;
}

.v2-akap-route-empty div {
    display: grid;
    gap: .12rem;
}

.v2-akap-route-empty strong {
    color: #435975;
    font-size: .73rem;
}

.v2-akap-route-empty span {
    color: #8996a8;
    font-size: .65rem;
}


/* =========================================================
   ROUTE MODAL FOOTER
   ========================================================= */

.v2-akap-route-footer {
    display: flex;
    align-items: flex-start;
    gap: .42rem;

    padding: .78rem 1.3rem;

    border-top: 1px solid #edf1f6;

    background: #fafbfd;

    color: #8290a4;

    font-size: .63rem;
    line-height: 1.5;
}

.v2-akap-route-footer i {
    flex: 0 0 auto;

    margin-top: .06rem;

    color: #4971ad;
    font-size: .7rem;
}


/* =========================================================
   GALLERY MODAL
   ========================================================= */

.v2-akap-gallery-modal {
    overflow: hidden;

    border: 0;
    border-radius: 1rem;

    background: #fff;
}

.v2-akap-gallery-modal .modal-header {
    border-bottom: 1px solid #e7edf5;
}

.v2-akap-gallery-modal .modal-body {
    padding: .7rem;

    background: #101d31;
}

.v2-akap-gallery-modal .carousel-item img {
    display: block;

    width: 100%;
    height: min(72vh, 42rem);

    border-radius: .55rem;

    object-fit: contain;
}

.v2-akap-gallery-modal .carousel-control-prev,
.v2-akap-gallery-modal .carousel-control-next {
    width: 10%;
}


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

@media (max-width: 1100px) {

    .v2-akap-detail-layout {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   RESPONSIVE SUMMARY
   ========================================================= */

@media (max-width: 900px) {

    .v2-akap-trip-route {
        grid-template-columns:
            minmax(0, 1fr)
            110px
            minmax(0, 1fr);

        gap: 14px;

        padding: 22px;
    }

    .v2-akap-trip-location-text strong {
        font-size: 16px;
    }
}


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

@media (max-width: 760px) {

    .v2-akap-detail {
        padding-top: 1.2rem;
        padding-bottom: 3rem;
    }

    .v2-akap-detail .v2-container {
        width: min(100% - 1.2rem, 75rem);
    }


    /* Breadcrumb */

    .v2-akap-detail-breadcrumb {
        margin-bottom: .9rem;
        font-size: .72rem;
    }


    /* Title */

    .v2-akap-detail h1 {
        font-size: 1.6rem;
    }


    /* Gallery */

    .v2-akap-detail-gallery {
        grid-template-columns: 1fr;

        height: auto;
    }

    .v2-akap-detail-gallery-main {
        height: 14rem;
    }

    .v2-akap-detail-gallery-grid {
        height: 8rem;
    }


    /* Facilities */

    .v2-akap-detail-facilities {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* Policies */

    .v2-akap-detail-policies {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: .9rem;
    }


    /* Booking */

    .v2-akap-detail-booking {
        padding: 1rem;

        border-radius: 1rem;
    }


    /* Dropdown bottom sheet */

    .v2-akap-custom-select-menu {
        position: fixed;

        top: auto;
        right: .6rem;
        bottom: .6rem;
        left: .6rem;

        z-index: 1060;

        max-width: none;

        border-radius: 1rem;

        transform: translateY(12px);
    }

    .v2-akap-custom-select.is-open
    .v2-akap-custom-select-menu {
        transform: translateY(0);
    }

    .v2-akap-custom-select-menu-header {
        padding: .85rem;
    }

    .v2-akap-custom-select-options {
        max-height: 45vh;

        padding: .4rem;
    }


    /* Route modal */

    .v2-akap-route-dialog {
        max-width: none;

        margin: .6rem;
    }

    .v2-akap-route-modal {
        border-radius: 1rem;
    }

    .v2-akap-route-modal-header {
        padding: 1rem;
    }

    .v2-akap-route-summary {
        grid-template-columns: 1fr;

        gap: .65rem;

        padding: .8rem 1rem;
    }

    .v2-akap-route-summary > div:not(:last-child) {
        margin: 0;
        padding: 0 0 .6rem;

        border-right: 0;
        border-bottom: 1px solid #e4eaf2;
    }

    .v2-akap-route-modal-body {
        padding: 1rem;
    }

    .v2-akap-route-footer {
        padding: .75rem 1rem;
    }

    .v2-akap-route-title-section {
        align-items: flex-start;
    }

    .v2-akap-route-timeline > li {
        grid-template-columns:
            2rem
            minmax(0, 1fr);

        min-height: 4.8rem;
    }

    .v2-akap-route-timeline time {
        grid-column: 2;

        justify-self: start;

        margin-top: .2rem;
    }
}


/* =========================================================
   MOBILE TRIP SUMMARY
   ========================================================= */

@media (max-width: 680px) {

    .v2-akap-detail-summary {
        border-radius: 16px;
    }

    .v2-akap-trip-route {
        grid-template-columns:
            minmax(0, 1fr)
            58px
            minmax(0, 1fr);

        gap: 8px;

        padding: 18px 16px;
    }

    .v2-akap-trip-location {
        display: grid;
        gap: 7px;
    }

    .v2-akap-trip-location.is-destination {
        display: grid;

        text-align: right;
    }

    .v2-akap-trip-location.is-destination
    .v2-akap-trip-marker {
        justify-self: end;
    }

    .v2-akap-trip-marker {
        width: 34px;
        height: 34px;

        border-radius: 10px;

        font-size: 14px;
    }

    .v2-akap-trip-location-text small {
        display: none;
    }

    .v2-akap-trip-location-text strong {
        font-size: 14px;
    }

    .v2-akap-trip-location-text span {
        font-size: 11px;
    }

    .v2-akap-trip-bus {
        width: 34px;
        height: 34px;

        margin: 0 4px;

        border-width: 5px;

        font-size: 12px;
    }

    .v2-akap-trip-info {
        grid-template-columns: 1fr;

        padding: 0 16px;
    }

    .v2-akap-trip-info-item {
        padding: 13px 0;
    }

    .v2-akap-trip-info-item:not(:last-child) {
        border-right: 0;
        border-bottom: 1px solid #e8edf4;
    }

    .v2-akap-trip-info-icon {
        width: 35px;
        height: 35px;

        border-radius: 10px;

        font-size: 14px;
    }

    .v2-akap-trip-info-item strong {
        font-size: 14px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .v2-akap-detail .v2-container {
        width: calc(100% - 1rem);
    }

    .v2-akap-detail h1 {
        font-size: 1.45rem;
    }


    /* Gallery */

    .v2-akap-detail-gallery-main {
        height: 12.5rem;
    }

    .v2-akap-detail-gallery-grid {
        height: 7rem;
    }


    /* Trip route */

    .v2-akap-trip-route {
        grid-template-columns:
            minmax(0, 1fr)
            46px
            minmax(0, 1fr);

        gap: 6px;

        padding: 16px 14px;
    }

    .v2-akap-trip-line-track {
        background-size: 6px 1px;
    }

    .v2-akap-trip-bus {
        width: 30px;
        height: 30px;

        margin: 0 2px;

        font-size: 11px;
    }


    /* Facility and policy */

    .v2-akap-detail-facilities,
    .v2-akap-detail-policies {
        grid-template-columns: 1fr;
    }


    /* Route preview */

    .v2-akap-detail-route-preview {
        display: grid;
    }

    .v2-akap-detail-route-preview button {
        width: max-content;
    }


    /* Passenger */

    .v2-akap-passenger-control {
        gap: .5rem;
    }

    .v2-akap-passenger-info small {
        display: none;
    }


    /* Modal */

    .v2-akap-route-header-icon {
        width: 2.45rem;
        height: 2.45rem;
    }
}