/* =========================================================
   RITHCABS - CHOOSE YOUR CAB
   Premium Travel UI
   Database Dynamic Cab Slider
   ========================================================= */


/* =========================================================
   FONT
   ========================================================= */

.rithcabs-choose-cab,
.rithcabs-choose-cab *,
.rithcabs-choose-cab button {
    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;
}


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

.rithcabs-choose-cab {
    width: 100%;

    padding: 24px 10px 34px;

    background: #ffffff;

    box-sizing: border-box;
}


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

.choose-cab-container {
    width: 100%;

    max-width: 1440px;

    margin: 0 auto;

    box-sizing: border-box;
}


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

.choose-cab-heading {
    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

    text-align: center;
}


/* =========================================================
   TITLE
   ========================================================= */

.choose-cab-heading h2 {
    margin: 0;

    color: #071b32;

    font-size: 27px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -0.6px;
}


/* =========================================================
   GOLD UNDERLINE
   ========================================================= */

.choose-cab-heading-line {
    display: block;

    width: 48px;

    height: 3px;

    margin-top: 7px;

    background: #f5b800;

    border-radius: 20px;
}


/* =========================================================
   SLIDER
   ========================================================= */

.cab-slider {
    width: 100%;

    position: relative;

    display: flex;

    align-items: center;

    box-sizing: border-box;
}


/* =========================================================
   CAB LIST
   DATABASE DYNAMIC HORIZONTAL SLIDER
   ========================================================= */

.cab-list {
    width: 100%;

    display: flex;

    flex-wrap: nowrap;

    align-items: stretch;

    gap: 16px;

    padding: 0 46px;

    box-sizing: border-box;

    overflow-x: auto;

    overflow-y: hidden;

    scroll-behavior: smooth;

    scrollbar-width: none;

    -ms-overflow-style: none;
}


/* =========================================================
   HIDE SCROLLBAR
   ========================================================= */

.cab-list::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   CAB CARD
   IMPORTANT:
   4 CARDS VISIBLE IN DESKTOP
   ========================================================= */

.cab-card {
    width:
        calc((100% - 48px) / 4);

    min-width:
        calc((100% - 48px) / 4);

    max-width:
        calc((100% - 48px) / 4);

    flex:
        0 0 calc((100% - 48px) / 4);

    height: 148px;

    padding: 15px 16px;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(145deg,
            #ffffff 0%,
            #f9fbfd 100%);

    border: 1px solid #dfe7ef;

    border-radius: 14px;

    box-sizing: border-box;

    box-shadow:
        0 6px 20px rgba(7, 27, 50, 0.055);

    scroll-snap-align: start;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}


/* =========================================================
   PREMIUM CARD TOP LINE
   ========================================================= */

.cab-card::before {
    content: "";

    position: absolute;

    top: 0;

    left: 22%;

    right: 22%;

    height: 3px;

    background: #f5b800;

    border-radius:
        0 0 10px 10px;

    opacity: 0;

    transition:
        left 0.3s ease,
        right 0.3s ease,
        opacity 0.3s ease;
}


/* =========================================================
   SOFT CARD GLOW
   ========================================================= */

.cab-card::after {
    content: "";

    position: absolute;

    width: 160px;

    height: 160px;

    right: -90px;

    bottom: -100px;

    border-radius: 50%;

    background:
        rgba(7, 27, 50, 0.025);

    pointer-events: none;
}


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

.cab-card:hover {
    transform:
        translateY(-4px);

    background:
        linear-gradient(145deg,
            #ffffff 0%,
            #f6f9fc 100%);

    border-color: #cfdbe7;

    box-shadow:
        0 15px 32px rgba(7, 27, 50, 0.11);
}


.cab-card:hover::before {
    left: 12%;

    right: 12%;

    opacity: 1;
}


/* =========================================================
   CARD TOP
   ========================================================= */

.cab-card-top {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    position: relative;

    z-index: 5;
}


/* =========================================================
   CAB NAME
   ========================================================= */

.cab-card-top h3 {
    margin: 0;

    color: #071b32;

    font-size: 17px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -0.3px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   CAPACITY
   ========================================================= */

.cab-capacity {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;

    color: #344255;

    font-size: 10px;

    line-height: 1;

    font-weight: 600;

    white-space: nowrap;

    flex-shrink: 0;
}


.cab-capacity span {
    display: inline-flex;

    align-items: center;

    gap: 4px;
}

.cab-capacity i {
    color: #0B77C5;
    font-size: 12px;
}


/* =========================================================
   CARD BODY
   ========================================================= */

.cab-card-body {
    width: 100%;

    height:
        calc(100% - 28px);

    position: relative;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;
}


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

.cab-details {
    position: relative;

    z-index: 5;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-end;

    padding-bottom: 5px;
}


/* =========================================================
   STARTING TEXT
   ========================================================= */

.cab-starting {
    display: block;

    margin-bottom: 4px;

    color: #657383;

    font-size: 12px;

    line-height: 1.25;

    font-weight: 500;
}


/* =========================================================
   PRICE
   ========================================================= */

.cab-price {
    display: block;

    color: #159447;

    font-size: 19px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -0.25px;

    white-space: nowrap;
}


/* =========================================================
   PRICE / KM
   ========================================================= */

.cab-price small {
    color: #159447;

    font-size: 10px;

    line-height: 1;

    font-weight: 600;
}


/* =========================================================
   CAB IMAGE
   ========================================================= */

.cab-image {
    position: absolute;

    right: -3px;

    bottom: -5px;

    width: 67%;

    height: 91px;

    display: flex;

    align-items: flex-end;

    justify-content: flex-end;

    z-index: 2;

    pointer-events: none;
}


/* =========================================================
   IMAGE
   ========================================================= */

.cab-image img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

    object-position:
        right bottom;

    filter:
        drop-shadow(0 7px 9px rgba(7, 27, 50, 0.10));

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}


/* =========================================================
   IMAGE HOVER
   ========================================================= */

.cab-card:hover .cab-image img {
    transform:
        translateY(-3px) scale(1.035);

    filter:
        drop-shadow(0 10px 13px rgba(7, 27, 50, 0.15));
}


/* =========================================================
   DIFFERENT CAB IMAGE SIZES
   ========================================================= */

.cab-card[data-cab="mini"] .cab-image {
    width: 63%;

    height: 88px;
}


.cab-card[data-cab="sedan"] .cab-image {
    width: 66%;

    height: 90px;
}


.cab-card[data-cab="suv"] .cab-image {
    width: 68%;

    height: 94px;
}


.cab-card[data-cab="premium"] .cab-image {
    width: 68%;

    height: 92px;
}


/* =========================================================
   DATABASE CAB TYPES
   Dynamic cab names should keep same image behavior
   ========================================================= */

.cab-card:not([data-cab="mini"]):not([data-cab="sedan"]):not([data-cab="suv"]):not([data-cab="premium"]) .cab-image {
    width: 68%;

    height: 92px;
}


/* =========================================================
   SLIDER BUTTON
   ========================================================= */

.cab-slider-btn {
    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    color: #071b32;

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

    border: 1px solid #dce4ec;

    border-radius: 50%;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 24px;

    line-height: 1;

    cursor: pointer;

    z-index: 20;

    box-shadow:
        0 5px 15px rgba(7, 27, 50, 0.10);

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* =========================================================
   BUTTON HOVER
   ========================================================= */

.cab-slider-btn:hover {
    color: #ffffff;

    background: #071b32;

    border-color: #071b32;

    transform:
        translateY(-50%) scale(1.06);

    box-shadow:
        0 8px 20px rgba(7, 27, 50, 0.18);
}


/* =========================================================
   PREVIOUS
   ========================================================= */

.cab-prev {
    left: 0;
}


/* =========================================================
   NEXT
   ========================================================= */

.cab-next {
    right: 0;
}


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

@media (max-width: 1100px) {

    .rithcabs-choose-cab {
        padding:
            22px 10px 30px;
    }


    .choose-cab-heading {
        margin-bottom: 17px;
    }


    .choose-cab-heading h2 {
        font-size: 25px;
    }


    .cab-list {
        gap: 13px;

        padding:
            0 42px;
    }


    /* 3 cards visible */

    .cab-card {
        width:
            calc((100% - 26px) / 3);

        min-width:
            calc((100% - 26px) / 3);

        max-width:
            calc((100% - 26px) / 3);

        flex:
            0 0 calc((100% - 26px) / 3);

        height: 142px;

        padding:
            14px;
    }


    .cab-card-top h3 {
        font-size: 16px;
    }


    .cab-capacity {
        font-size: 9px;

        gap: 8px;
    }


    .cab-price {
        font-size: 18px;
    }


    .cab-image {
        height: 85px;
    }
}


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

@media (max-width: 900px) {

    .cab-list {
        gap: 12px;

        padding:
            0 42px;
    }


    /* 2 cards visible */

    .cab-card {
        width:
            calc((100% - 12px) / 2);

        min-width:
            calc((100% - 12px) / 2);

        max-width:
            calc((100% - 12px) / 2);

        flex:
            0 0 calc((100% - 12px) / 2);

        height: 145px;
    }


    .cab-image {
        height: 88px;
    }
}


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

@media (max-width: 600px) {

    .rithcabs-choose-cab {
        padding:
            22px 8px 28px;
    }


    .choose-cab-heading {
        margin-bottom: 16px;
    }


    .choose-cab-heading h2 {
        font-size: 23px;

        letter-spacing: -0.45px;
    }


    .choose-cab-heading-line {
        width: 44px;

        height: 3px;

        margin-top: 6px;
    }


    /* ---------------------------------------------
       Horizontal Cab Slider
       --------------------------------------------- */

    .cab-list {
        display: flex;

        flex-wrap: nowrap;

        overflow-x: auto;

        gap: 12px;

        padding:
            0 40px;

        scroll-behavior: smooth;

        scroll-snap-type: x mandatory;

        scrollbar-width: none;
    }


    .cab-list::-webkit-scrollbar {
        display: none;
    }


    /* One card at a time */

    .cab-card {
        flex:
            0 0 calc(100% - 18px);

        width:
            calc(100% - 18px);

        min-width:
            calc(100% - 18px);

        max-width:
            calc(100% - 18px);

        height: 145px;

        padding:
            14px;

        scroll-snap-align: center;

        border-radius: 14px;
    }


    .cab-card-top h3 {
        font-size: 17px;
    }


    .cab-capacity {
        font-size: 9px;

        gap: 8px;
    }


    .cab-price {
        font-size: 19px;
    }


    .cab-starting {
        font-size: 9px;
    }


    .cab-image {
        width: 65%;

        height: 88px;
    }


    .cab-slider-btn {
        width: 34px;

        height: 34px;

        font-size: 22px;
    }
}


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

@media (max-width: 420px) {

    .rithcabs-choose-cab {
        padding:
            20px 7px 26px;
    }


    .choose-cab-heading h2 {
        font-size: 21px;
    }


    .choose-cab-heading-line {
        width: 40px;

        height: 2px;
    }


    .cab-list {
        gap: 10px;

        padding:
            0 36px;
    }


    .cab-card {
        flex:
            0 0 calc(100% - 14px);

        width:
            calc(100% - 14px);

        min-width:
            calc(100% - 14px);

        max-width:
            calc(100% - 14px);

        height: 138px;

        padding:
            12px;

        border-radius: 13px;
    }


    .cab-card-top h3 {
        font-size: 16px;
    }


    .cab-capacity {
        font-size: 8px;

        gap: 7px;
    }


    .cab-starting {
        font-size: 8px;

        margin-bottom: 3px;
    }


    .cab-price {
        font-size: 18px;
    }


    .cab-price small {
        font-size: 8px;
    }


    .cab-image {
        height: 82px;
    }


    .cab-slider-btn {
        width: 31px;

        height: 31px;

        font-size: 20px;
    }
}


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

@media (max-width: 360px) {

    .cab-list {
        padding:
            0 33px;
    }


    .cab-card {
        height: 134px;

        padding:
            11px;
    }


    .cab-card-top h3 {
        font-size: 15px;
    }


    .cab-price {
        font-size: 17px;
    }


    .cab-image {
        height: 77px;
    }
}