@font-face {
        font-family: 'Inter-fallback';
        size-adjust: 107.00%;
        ascent-override: 90%;
        src: local('Arial');
    }

    @font-face {
        font-family: 'Tomorrow-fallback';
        size-adjust: 107.87%;
        ascent-override: 80%;
        src: local('Arial');
    }

    html, body {
        font-family: 'Inter', 'Inter-fallback';
        font-size: 16px;
        margin: 0;
        padding: 0;
        height: 100%;
    }

    [v-cloak] {
      display: none;
    }

    /* Set user-select to none to prevent accidental highlight */
    .genericbutton,
    .select-trip-btn,
    .search__input button,
    .viewselect button,
    .third-party-sign-in,
    .button-minus,
    .button-plus,
    #NavBar,
    #textlogo,
    li a,
    .filters__category_label,
    .filter_label,
    .custom-checkbox,
    .custom-radio,
    .custom-switch,
    .custom-checkbox label,
    .custom-radio label,
    .timebar,
    .timebar-label,
    .timebar-col,
    .timebar-background,
    .results-row,
    .duration-label,
    .flight-detail-grid p,
    .sortby,
    .displaystyle,
    .viewselect,
    .locationdate,
    .locationdate__trip,
    .result__timebar-header,
    .search__calendars,
    .calendar-grid,
    .weekday,
    .date-cell,
    .month-title,
    .search__calendar_advance,
    .calendar-overlay,
    .confirmation__trip,
    .trip_card,
    .trip_timeline,
    .timeline_item,
    .timeline_dot,
    .transport_icon,
    .duration,
    .cost_breakdown,
    .cost_item,
    .trip_total,
    .change_trip,
    .change_trip_link,
    .action_buttons,
    .share_section,
    .slider-multithumb,
    .slider-group,
    .thumb,
    .rail,
    .range,
    .minimum,
    .maximum,
    .ft-card__header,
    .confirmation_header,
    .confirmation_title,
    .trip_timestamp,
    .home__card .circle,
    .right_bg_card,
    .right_bg,
    img,
    svg,
    .ft-tooltip-icon,
    .ft-tooltip,
    .loading_container,
    .loading_subcontainer,
    .loading_bar,
    .loading_progress,
    .loading_text,
    .return-trip-message,
    .return-trip-content,
    .no-results-container,
    .no-results-content {
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    textarea,
    .slider-multithumb input {
        user-select: text;
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
    }


/* Main Font Styling */
    h1 {
        font-family: 'Inter', 'Inter-fallback';
        font-weight: 700;
        font-size: 48px;
    }

    h2 {
        font-family: 'Inter', 'Inter-fallback';
        font-weight: 700;
        font-size: 24px;
    }

    h3 {
        font-family: 'Inter', 'Inter-fallback';
        font-weight: 600;
        font-size: 20px;
        margin: 0 0;
    }

    h4 {
        font-family: 'Inter', 'Inter-fallback';
        font-weight: 700;
        font-size: 16px;
    }
    h4.font_type_semi {
        font-family: 'Inter', 'Inter-fallback';
        font-weight: 600;
        font-size: 16px;
        margin: 0 0;
    }
    h4.font_type_medium {
        font-family: 'Inter', 'Inter-fallback';
        font-weight: 500;
        font-size: 16px;
        margin: 0 0;        
    }
    h4.font_type_regular {
        font-family: 'Inter', 'Inter-fallback';
        font-weight: 400;
        font-size: 16px;
        margin: 0 0;
    }

    h5 {
        font-family: 'Inter', 'Inter-fallback';
        font-weight: 600;
        font-size: 14px;
    }
    h5.font_type_regular {
        font-family: 'Inter', 'Inter-fallback';
        font-size: 14px;        
        font-weight: 400;
        margin: 0 0;
    }

    p {
        font-family: 'Inter', 'Inter-fallback';
        font-weight: 500;
        font-size: 12px;
    }

/* browser specific overrides */
    input[type="password"]::-ms-reveal,
    input[type="password"]::-ms-clear {
      display: none;
    }

/*multipage elements*/
    .genericbutton {
        border: none;
        border-radius: 10px;
        padding: 10px 10px;
        height: 50px;
        width: 250px;
        text-align: center;
        text-decoration: none;
        font-size: 24px;
        font-family: 'Inter', 'Inter-fallback';
        font-weight: 700;
        cursor: pointer;
        background-color: #7F00BA;
        color: white;
    }

    .genericbutton:hover {
        background-color: #B669D8;
        color: #ffffff;
    }

    .genericbutton:disabled,
    .genericbutton[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
        background-color: #9E9E9E;
    }

    .backspacer {
        background-color: #F3DEFF;
        background-attachment: scroll;
        width: 100%;
        margin-top: 0;
        height: 808px;
        background-size: cover;
        display: grid;
    }

/* Animations for all components */
    * {
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    
    #imagelogo {
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 8px;
        margin-bottom: 8px;
        float: left;
    }

    #textlogo {
        font-family: 'Tomorrow', 'Tomorrow-fallback';
        font-style: italic;
        font-size: 32px;
        font-weight: 700;
        padding-top: 16px;
        padding-bottom: 17px;
        padding-left: 5px;
    }
    
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        position: sticky;
        overflow: hidden;
        background-color: #e7e7e7;
    }
     
    li {
        float: left;
    }

    li a {
        display: block;
        color: #000000;
        text-align: center;
        padding: 25px 25px;
        text-decoration: none;
    }
      
    li a.table:hover:not(.active) {
        text-decoration: underline;
        text-decoration-thickness: 5px;
        text-decoration-color: #C174E3;
        text-underline-offset: 8px;
    }
      
    li a.table.active {
        text-decoration: underline;
        text-decoration-thickness: 5px;
        text-decoration-color: #C174E3;
        text-underline-offset: 8px;
        transition-duration: .10s;
    }
    
    #NavBar {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        position: relative;
    }

/* Icon pinning: place the icon at corners within the nearest positioned ancestor */
    .ft-tooltip-anchor {
        position: relative;
    }

    .ft-tooltip-wrapper {
        position: absolute;
        top: 0; right: 0;
        /* Shift one icon width right and up */
        transform: translate(50%, -50%);
    }

/* Tooltip (InfoBadge) */
    .ft-tooltip-icon {
        display: inline-block;
        cursor: help;
        margin-left: 6px;
    }

    .ft-tooltip {
        position: absolute;
        z-index: 1000;
        background: #929292;
        color: #fff;
        border-radius: 6px;
        padding: 8px 10px;
        font-size: 12px;
        line-height: 1.4;
        box-shadow: 0 8px 24px rgba(0,0,0,0.18);
        white-space: normal;
        text-align: center;
    }

    .ft-tooltip[data-placement="top"] {
        bottom: 100%;
        left: 50%;
        transform: translate(-50%, -8px);
        margin-bottom: 8px;
    }
    .ft-tooltip[data-placement="bottom"] {
        top: 100%;
        left: 50%;
        transform: translate(-50%, 8px);
        margin-top: 8px;
    }
    .ft-tooltip[data-placement="left"] {
        right: 100%;
        top: 50%;
        transform: translate(-8px, -50%);
        margin-right: 8px;
    }
    .ft-tooltip[data-placement="right"] {
        left: 100%;
        top: 50%;
        transform: translate(8px, -50%);
        margin-left: 8px;
    }

    /* Corner placements */
    .ft-tooltip[data-placement="top-right"] {
        bottom: 100%;
        left: 100%;
        transform: translate(-8px, -8px);
        margin-bottom: 8px;
        margin-left: -8px;
    }
    .ft-tooltip[data-placement="top-left"] {
        bottom: 100%;
        right: 100%;
        transform: translate(8px, -8px);
        margin-bottom: 8px;
        margin-right: -8px;
    }
    .ft-tooltip[data-placement="bottom-right"] {
        top: 100%;
        left: 100%;
        transform: translate(-8px, 8px);
        margin-top: 8px;
        margin-left: -8px;
    }
    .ft-tooltip[data-placement="bottom-left"] {
        top: 100%;
        right: 100%;
        transform: translate(8px, 8px);
        margin-top: 8px;
        margin-right: -8px;
    }
    
    
/*home*/
    .homeslogan {
        text-align: center;
        margin: auto;
    }

    .home__background {
        background-image: url('starry-sky.webp');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        min-height: 100vh;
        margin: 0;
        padding: 0;
    }
    
    .homecontainer {
        text-align: center;
    }

    .home__cards {
        display:flex;
        justify-content: space-evenly;
        margin-top: 100px;
        height: 310px;
    }

    .home__card {
        position: relative;
        text-align: center;
        background-color: #F0F0F0;
        height: 310px;
        width: 310px;
        border-top-right-radius: 50px;
        border-bottom-left-radius: 50px;
        box-shadow: 0 4px 4px 0 #00000025;
    }

    .home__card h2{
        margin: 16px 16px;
    }

    .home__card p{
        font-family: 'Inter', 'Inter-fallback';
        font-size: 18px;
        font-weight: 400;
        margin: 16px 16px;
    }

    .home__card .circle {
        position: absolute;
        top: -5%;
        left: -5%;
        background-color: #7F00BA;
        color: #ffffff;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Inter', 'Inter-fallback';
        font-style: normal;
        font-weight: 600;
        font-size: 36px;
    }


/* Login and Signup */
    .signin__background {
        position: relative;
        display: flex;
        align-items: center;
    }

    .signin__form *{
        display:block;
    }

    .signin__form {
        background-color: #e7e7e7;
        margin-top: 79px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 80px;
        border-radius: 10px;
        padding-top: 10px;
        padding-left: 230px;
        padding-right: 230px;
        padding-bottom: 60px;
        box-shadow: 0 0 8px 4px #00000040;
    }

    .signin__form h1 {
        font-size: 48px;
        color:#7F00BA;
        margin: 0px 0px 32px 0px;
    }

    .signin__form > div {
        padding: 0px 0px 20px 0px;
    }

    .signin__form div input {
        width: 680px;
        height: 60px;
        border-radius: 10px;
        font-size: 20px;
        padding-left: 10px;
        border: solid 2px #929292;
    }

    .signin__form div h3 {
        margin-left: 10px;
        margin-bottom: 0px;
        margin-top: 5px;
    }

    #signin__button {
        width: 420px;
        height: 50px;
        border-radius: 10px;
        font-size: 24px;
    }

    #signin__password {
        position: relative;
    }

    #signin__password img{
        position: absolute;
        transform: translateY(-25%);
        right: 10px;
        top: 50%;
        cursor: pointer;
        width: 40px;
        height: 40px;
    }

    .signin__page_swap {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: auto;
    }

    .signin__page_swap :first-child{
        font-weight: bold;
        margin-right: 5px;
    }

    .signin__page_swap :last-child{
        font-weight: bold;
        border-bottom: 1px solid #7F00BA;
        color: #7F00BA;
        box-sizing: border-box
    }

    .third-party-sign-in-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Creates 2 columns */
        column-gap: 50px; /* Space between buttons */
        row-gap: 34px;
        justify-content: center; /* Centers the grid */
        width: 100%;
        max-width: 620px; /* Ensures grid width doesn't stretch too far */
        margin: auto;
    }

    button.third-party-sign-in {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 300px;
        background-color: #FFFFFF;
        padding: 10px;
        border: none;
        cursor: pointer;
        font-size: 16px;
        font-weight: bold;
        border-radius: 5px;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
        transition: background-color 0.3s ease;
    }

    button.third-party-sign-in img {
        width: 30px;
        height: 30px;
        margin-right: 10px;
    }

    button.third-party-sign-in.facebook {
        background-color: #3b5998;
        color: white;
    }

    button.third-party-sign-in.apple {
        background-color: #000000;
        color: white;
    }

    #signin_or {
        display: flex;
        align-items: center;
        padding: 20px 0px;
    }

    #signin_or div{
        height: 2px;
        width: 100%;
        background-color: #B6B6B6;
    }

    #signin_or h2{
        text-align: center;
        font-size: 24px;
        margin: 0px 20px;
        color: #B6B6B6
    }


/* Search */
    .search__input {
        margin: 0 auto;
    }

    .search__input div{
        margin: 2px 0px;
        justify-content: space-between;
    }

    .search__input div button{
        height: 30px;
        width: 30px;
        border-radius: 50%;
        color: #FFFFFF;
        border: none;
        display: flex;
        cursor: pointer;
    }

    .button-minus, .button-plus {
      cursor: pointer;
    }

    .button-minus:hover, .button-plus:hover {

    }

    .button-minus.disabled {
      opacity: 0.5;
      pointer-events: none;
    }

    .button-plus.disabled {
      opacity: 0.5;
      pointer-events: none;
    }

    .search__input div p{
        margin: auto 10px;
    }

    .search__input button{
        display:block;
        width: 120px;
        height: 40px;
        margin-top: 10px;
        margin-bottom: 20px;
        border-radius: 100px;
        background-color: #FFFFFF;
        border: 2px solid #929292;
        cursor: pointer;
        box-shadow: 0 0 4.5px 0 #00000030;
    }

    .search__input button:hover {
        border-color: #7F00BA;
        background-color: #F3DEFF;
    }

    .search__input button.active{
        background-color: #7F00BA;
        border: 2px solid #7F00BA;
        color: #FFFFFF;
        cursor: default;
    }

    .search__input input {
        border: 2px solid #929292;
        height: 40px;
        border-radius: 10px;
        padding-left: 10px;
        font-size: 16px;
        box-shadow: 0 0 6.6px 0 #00000025;
    }

    /* Destinations row: make start/end inputs fluid */
    .destinations-inputs {
        display: flex;
        gap: 13px;
        width: 85%;
        margin-top: 10px;
    }

    .destinations-inputs input {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        box-sizing: border-box;
    }

    /* Generic Card styles used on Search page */
    .ft-card {
        background-color: #FFFFFF;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        border: 1px solid #E5E5E5;
        margin: 20px 75px;
    }

    .ft-card__header {
        background-color: #F3DEFF;
        padding: 12px 16px;
    }

    .ft-card__header h2 {
        margin: 0;
        text-align: center;
    }

    .ft-card__body {
        padding: 0px;
        background-color: #FFFFFF;
    }

    /* Specific spacing tweaks for search page cards */
    .search-card .search__input h2 {
        margin-top: 0;
    }

    .calendar-card .month-container {
        /* keep calendar columns tidy within the card */
        margin: 0 30px;
    }

    .search__calendars {
        display:flex;
        justify-content: center;
        height: 475px;
    }

    .calendar-navigation {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .calendar-navigation h2{
      margin: 0px;
    }

    .calendar-navigation button {
      background: none;
      border: none;
      font-size: 20px;
      cursor: pointer;
    }

    .calendar-navigation button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

        /* Month container */
    .month-container {
        margin: 0px 50px 0px 50px;
        display:flex;
        flex-direction: column;
    }

    /* Month title */
    .month-title {
        display: grid;
        grid-template-columns: 1fr auto 1fr; /* Left | Center | Right */
        align-items: center;
        gap: 8px; /* Optional spacing */
    }

    .month-title__text {
        grid-column: 2; /* Forces h3 into the center column */
        text-align: center;
        margin: 7px;
    }

    .search__calendar_advance {
        width: 30px;
        height: 30px;
        border: 2px solid currentColor;
        border-radius: 5px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Disabled state styles */
    .search__calendar_advance.disabled {
        background-color: #DFDFDF;
        border-color: #929292;
        cursor: not-allowed;
    }

    .search__calendar_advance.disabled img {
        filter: brightness(0) invert(50%);
    }


    /* Calendar grid */
    .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        text-align: center;
        border: 1px solid #ccc;
        font-size: 10px;
        border: none;
    }

    /* Weekday header */
    .weekday {
        font-weight: bold;
        height: 24px;
        width: 60px;
        border-bottom: 1px solid #ccc;
        background: #F3DEFF;
        margin: 2px;
        border-radius: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .empty-cell {
        padding: 10px;
        visibility: hidden;
    }

    .date-cell {
        box-sizing: border-box;
        margin: 3px;
        padding: 1px;
        border: 1px solid #000000;
        border-radius: 2px;
        height: 60px;
        width: 60px;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .date-cell:hover {
      background-color: #eeeeee;
    }

    .date-cell.selected {
      border: 3px solid #7F00BA;
      background-color: #F3DEFF
    }

    .date-cell.in-range {
      background-color: #F3DEFF; /* Light purple */
    }

    .date-cell.past {
      color: gray;
      cursor: not-allowed;
      opacity: 0.5;
    }

    /* Calendar blur/overlay when route not provided */
    .calendar-blur-container {
        position: relative;
    }
    .calendar-blur-container .blurred {
        filter: blur(3px);
        pointer-events: none;
        user-select: none;
    }
    /* New wrapper used to blur the entire calendar card content (header + body) */
    .calendar-card-content.blurred {
        filter: blur(3px);
        pointer-events: none;
        user-select: none;
    }
    .calendar-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 16px;
        background: rgba(255, 255, 255, 0.6);
        z-index: 2;
    }
    .calendar-overlay { border-radius: inherit; }
    .calendar-overlay p {
        margin: 0;
        font-family: 'Inter', 'Inter-fallback';
        font-weight: 600;
        color: #555;
    }

    /* Date text */
    .date-text {
        margin: 7px;
        text-align: left;
    }

    /* Price section */
    .price {
        flex-grow: 1;
        display: flex;
        justify-content: center;
    }

    /* Price color indicators based on cost flags */
    .price-low-cost {
        color: #039C1D; /* Green for low-cost */
    }

    .price-high-cost {
        color: #D81414; /* Red for high-cost */
    }
    
/* Search Loading Bar */
    .loading_container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(217, 217, 217, 0.7);
        backdrop-filter: blur(2px);
    }

    .loading_subcontainer {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 800px;
        height: 350px;
        border-radius: 30px;
        border: 3px solid #929292;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
        background-color: white;
        padding: 20px;
    }
    .joke_display {
        opacity: 1;
        transition: opacity 1s ease-in-out;
    }
    .joke_display.fade-out {
        opacity: 0;
    }
    .loading_text {
        display: flex;
        margin-bottom: 5px;
        color: #555;
        font-family: 'Tomorrow', 'Tomorrow-fallback';
        font-style: italic;
        font-weight: 600;
        font-size: 20px;
        color: #000000;
        justify-content: space-between;
    }
    .loading_bar {
        width: 550px;
        height: 40px;
        border: 5px solid #7F00BA;
        border-radius: 11px;
        position: relative;
        overflow: hidden;
        background-color: #F3DEFF;
    }
    .confirmation__trip {
        position: relative;
        overflow: hidden; /* clip background within rounded card if any */
        display: grid;
        grid-template-columns: 16px 2fr 16px 1fr; /* mirror inner grid */
        grid-auto-rows: auto;
        padding: 20px 40px;
    }

    /* Make header, grid content, and footer span full card width */
    .confirmation__trip > .confirmation__trip_header,
    .confirmation__trip > .trip_content,
    .confirmation__trip > .change_trip {
        grid-column: 1 / -1;
        position: relative;
        z-index: 1; /* above right_bg_card */
    }
    .right_bg_card {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0; /* ensures height: 100% of the card */
        width: calc(34% + 32px); /* ~1/3 content + 16px dot col + 16px gap */
        background-color: #E8D5FF;
        z-index: 0;
        pointer-events: none;
    }
    .loading_progress {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 0%;
        background-color: #7F00BA;
        transition: width 0.1s linear;
    }
    .loading_progress::after {
        content: '';
        position: absolute;
        right: -40px;
        top: 0;
        width: 50px;
        height: 100%;
        background: #7F00BA;
        transform: skewX(-40deg);
        transform-origin: top right;
    }

/* Results */
    .content {
        font-size: 14px;
        display: grid;
        grid-template-areas:
        'showingresults locationdate'
        'filters resultsandview';
        grid-template-columns: 275px auto;
        grid-template-rows: 60px auto;
        gap: 10px;
    }

    .locationdate {
        grid-area: locationdate;
        margin-top: 10px;
        margin-left: 0%;
        margin-right: 10px;
        padding-bottom: 0%;
    }
    .locationdate__trip {
        display: inline-flex;
        align-items: center;
        box-shadow: 0 0 4px 0 #00000025;
        border-radius: 4px;
        width: fit-content;
    }

    .locationdate__trip h2{
        padding-left: 8px;
        text-align: center;
        margin: 10px;
    }

    .locationdate__trip :not(:first-child){
        color: #7E00C2;
        padding-right: 8px;
    }

    .location {
        float: left;
    }
    .startinglocation {
        float: left;
    }
    .startinglocation input {
        border-top-right-radius: 0%;
        border-bottom-right-radius: 0%;
        border-top-left-radius: 7px;
        border-bottom-left-radius: 7px;
        border-style: solid;
        border-width: 1px;
        border-color: #b6b6b6;
    }
    .endinglocation {
        float: right;
    }
    .endinglocation input {
        border-top-right-radius: 7px;
        border-bottom-right-radius: 7px;
        border-top-left-radius: 0%;
        border-bottom-left-radius: 0%;
        border-style: solid;
        border-width: 1px;
        border-color: #b6b6b6;
    }
    .date {
        float: right;
    }
    .departuredate {
        float: left;
    }
    .departuredate input {
        border-top-right-radius: 0%;
        border-bottom-right-radius: 0%;
        border-top-left-radius: 7px;
        border-bottom-left-radius: 7px;
        border-style: solid;
        border-width: 1px;
        border-color: #b6b6b6;
    }
    .returndate {
        float: right;
    }
    .returndate input {
        border-top-right-radius: 7px;
        border-bottom-right-radius: 7px;
        border-top-left-radius: 0%;
        border-bottom-left-radius: 0%;
        border-style: solid;
        border-width: 1px;
        border-color: #b6b6b6;
    }

    .showingresults {
        font-weight: bold;
        font-style: italic;
        font-size: 16px;
        grid-area: showingresults;
        margin: auto 0 0 10px;
    }

    #reset-filters {
            border: none; 
            border-radius: 8px; 
            padding: 6px 10px; 
            font-size: 14px; 
            font-weight: 600;
            font-family: 'Inter', 'Inter-fallback'; 
            cursor: pointer; 
            background-color: #7F00BA; 
            color: white;
    }

    #reset-filters:hover {
    background-color: #B669D8;
    }

    .filters {
        background-color: #FFFFFF;
        grid-area: filters;
        margin-top: 0%;
        margin-bottom: 10px;
        margin-left: 10px;
        margin-right: 0%;
    }
    .filters p {
        margin-bottom: 0%;
        margin-top: 0%;
    }

    .filters__category_label{
        background-color: #e7e7e7;
        border-width: 1px;
        border-style: solid;
        border-color: #929292;
        border-radius: .5px;
        font-weight: bold;
        padding-left: 4px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    /* Set p to be on left and img to be on right */
    .filters__category_label, .filter_label {
        display: flex;
        justify-content: space-between;
        cursor: pointer;
    }
    .filters__category_label p, .filter_label p{
        flex: 1;
    }
    .filters__category_label img, .filter_label img{
        margin-right: 7px;
    }

    /* Indent content under filter_label to make it look like a title */
    .filter_label ~ .slider-multithumb,
    .filter_label ~ .custom-checkbox,
    .filter_label ~ .custom-radio,
    .filter_label ~ .custom-switch {
        margin-left: 15px;
    }

    .custom-checkbox, .custom-radio {
        margin: 0px 0px 0px 0px;
    }

    .custom-checkbox label h5 {
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: 5px;
    }

    /* For arrow inversion */
    img {
      transition: transform 0.3s ease;
    }
    img.inverted {
      transform: scaleY(-1);
    }

    .filter {
        padding: 10px 0px;
        margin: 0px 20px 0px 10px;
        border-bottom: 1px solid #929292;
    }
    .filters__category > .filter:last-of-type {
        border: none;
    }

    /* Advanced Filters toggle should not show a bottom border only when it's
       effectively the last visible filter (when advanced filters are off) */
    .filters__category .advanced-filters-toggle.no-bottom-border {
        border-bottom: none;
    }

    .filter input {
        cursor: pointer;
        margin: 2px 2px;
    }
    .filter p{
        font-weight: bold;
        padding-bottom: 3px;
    }
    .checkboxp {
        display: inline;
    }

    .timebar-col_day_change {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .resultsandview {
        grid-area: resultsandview;
        border: solid #929292 1px;
        margin-top: 0%;
        margin-bottom: 10px;
        margin-left: 0%;
        margin-right: 10px;
    }
    .viewselect {
        background-color: #e7e7e7;
        border-top: 0px;
        border-left: 0px;
        border-right: 0px;
        border-bottom: 1px;
        border-style: solid;
        border-color: #929292;
        border-radius: 1px;
        box-shadow: 0 2px 4px 0 #00000025;
        padding-left: 13px;
        padding-right: 13px;
        padding-top: 10px;
        padding-bottom: 10px;
        display: flex;
        justify-content: space-between;
    }
    .viewselect h4.font_type_medium {
        margin: 4px 4px;
        float: left;
    }
    .viewselect button {
        margin-right: 2px;
        float: left;
        border-width: 2px;
        border-radius: 4px;
        border-color: #929292;
        border-style: solid;
        background-color: #ffffff;
        color: #000000;
        padding: 3px 7px;
        cursor: pointer;
        display: flex;
        justify-content: space-around;
    }

    .viewselect button img {
        padding-left: 5px;
    }

    .viewselect button:hover {
        background-color: #F3DEFF;
        border-color: #7F00BA;
    }    

    .viewselect button.active {
        background-color: #7F00BA;
        border-width: 2px;
        border-radius: 4px;
        border-color: #7F00BA;
        border-style: solid;
        color: #FFFFFF;
        }

    .sortby {
        float: left;
        display: flex;
        align-items: center;
    }

    .displaystyle {
        float: right;
        display: flex;
        align-items: center;
    }

/* Custom Checkbox */
    .custom-checkbox {
        display: flex;
        padding-top: 7px;
    }

    .custom-checkbox label {
        display: flex;
    }

    /* Hide the default checkbox */
    .custom-checkbox label input {
        position: absolute;
        opacity: 0;
        height: 0;
        width: 0;
    }

    /* Checkbox */
    .custom-checkbox label .checkmark {
        box-sizing: border-box;
        position: relative;
        display: inline-block;
        height: 20px;
        width: 20px;
        background-color: #FFFFFF;
        border: 1.5px solid #929292;
        border-radius: 3px;
        margin-right: 0px;
        transition: .2s;
        cursor: pointer;
        box-shadow: 0px 0px 4px 0px #00000025;
    }

    .custom-checkbox label .checkmark:hover {
        background-color: #F3DEFF;
        border: 1.5px solid #7F00BA;
    }

    /* Show the checkmark when the checkbox is checked */
    .custom-checkbox label input:checked ~ .checkmark:after {
        display: block;
    }

    /* Change the background color when the checkbox is checked */
    .custom-checkbox label input:checked ~ .checkmark {
        background-color: #7F00BA;
        border: 1.5px solid #7F00BA;
        border-radius: 3px;
    }

    .custom-checkbox label input:checked:hover ~ .checkmark {
        background-color: #B669D8;
        border: 1.5px solid #B669D8;
    }

/* Custom Switch */
    /* The switch - the box around the slider */
    .custom-switch {
        position: relative;
        display: inline-block;
        width: 40px;
        height: 20px;
        margin: 5px 0px 0px 18px;
        vertical-align: middle;
    }

    /* Hide default HTML checkbox */
    .custom-switch input {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }
    
    /* SVG icon styling */
    .custom-switch .switch-icon {
        position: absolute;
        left: 0;
        width: 22px;
        height: 22px;
        cursor: pointer;
        vertical-align: middle;
    }

    /* Round slider background styling */
    .round-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #9E9E9E;
        border-radius: 16px;
        transition: 0.4s;
    }

    input:checked + .round-slider {
        background-color: #7F00BA;
    }

    input:focus + .round-slider {
        box-shadow: 0 0 1px #9B00DE;
    }
    
    /* SVG icon styling - replaces the inner circle */
    .switch-icon {
        position: absolute;
        z-index: 2;
        width: 22px;
        height: 22px;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        transition: 
            transform 0.4s ease,
            opacity 0.2s ease; /* Add opacity transition */
        pointer-events: none;
        opacity: 1; /* Default state */
    }
    
    /* When checked, move and fade out current icon */
    input:checked ~ .switch-icon {
        transform: translate(18px, -50%);
        opacity: 0;
    }
    
    /* New icon state (alternate icon) */
    .switch-icon-alternate {
        opacity: 0;
        transform: translate(0, -50%);
        position: absolute;
        z-index: 2;
        width: 22px;
        height: 22px;
        top: 50%;
        left: 0;
        transition: 
            transform 0.4s ease,
            opacity 0.3s ease;
        pointer-events: none;
    }
    
    input:checked ~ .switch-icon-alternate {
        opacity: 1;
        transform: translate(18px, -50%);
        transition: 
            transform 0.4s ease,
            opacity 0.3s ease; /* Delay fade-in */
    }

/* Custom Radio */
    .custom-radio {
        position: relative;
        display: block;
        height: 20px;
        margin: 5px 0px 0px 18px;
        transition: 0.4s;
    }

    .custom-radio label {
        margin-left: 30px;
    }

    /* Hide the default radio button */
    .custom-radio input[type='radio'] {
        display: none;
    }

    /* Outer circle for unchecked state */
    .custom-radio .outer-circle {
        position: absolute;
        top: 0;
        left: 0;
        width: 18px;
        height: 18px;
        border: 1.5px solid black;
        border-radius: 50%;
        background-color: white;
        cursor: pointer;
    }

    /* Style for checked state */
    .custom-radio input[type='radio']:checked + .outer-circle {
        border-color: #7F00BA;
        background-color: #7F00BA;
        cursor: default;
    }

    .custom-radio input[type='radio']:checked + .outer-circle::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #7F00BA;
        border: 2px solid white;
        cursor: default;
    }

    text {
        font-family: 'Roboto Mono';
        font-size: 15px;
        font-weight: 500;
    }

    .result__timebar-header, .results-row, .timebar-background{
        display: grid;
        grid-template-columns: 200px auto;
    }

    .result__timebar-header div{
        display:flex;
    }

    .result__timebar-header div h5.font_type_regular{
        margin: auto;
        flex: 1;
        text-align: center;
    }

    .results-rows{
        position: relative;
    }

/* No Results Container */
    .no-results-container {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 400px;
        padding: 40px;
    }

    .no-results-content {
        text-align: center;
        padding: 40px;
        border-radius: 30px;
        border: 3px solid #e0e0e0;
    }

    .no-results-content h3 {
        font-family: 'Tomorrow', 'Tomorrow-fallback';
        color: #333;
        margin-bottom: 10px;
        font-size: 24px;
    }

/* Timebar */

    .timebar {
        display: flex;
        flex: 1;
        padding: 9px 0px;
        grid-column-start: 2;
    }

    .timebar-col{
        flex: 2;
        border-left: solid black 1px;
    }

    .timebar-col_day_change {
        border-left: solid black 3px;
    }

    .timebar-background{
        position: absolute; /* Position timebar-background absolutely */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .timebar-background :nth-child(2){
        display: flex;
    }

    .timebar-background :first-child{
        border: none;
    }

    .timebar-background :first-child, .timebar-background :last-child{
        flex: 1;
    }

    .timebar-label{
        border: solid 1px;
        width: 165px;
        margin: 9px 7px 9px 25px;
        background-color: #FFFFFF;
        grid-column-start: 1;
        justify-content: space-evenly;
    }

    .timebar-label-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .timebar-label-left {
        text-align: left;
        flex: 0 1 auto;
        white-space: nowrap;
        overflow: hidden;
    }

    .timebar-label-center {
        text-align: center;
        flex: 0 0 40px;
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 4px;
    }

    .timebar-label-right {
        text-align: right;
        flex: 0 1 auto;
        white-space: nowrap;
        overflow: hidden;
    }

    /* Enhanced styling only when expanded */
    .results-row.expanded .timebar-label {
        border: solid 1px #929292;
        height: auto;
        align-items: center;
        border-radius: 2px;
    }

    /* Removed unused CSS classes: driving-info, flying-info, driving-only, total-time, select-section */
    /* These classes are no longer used after HTML structure simplification */

    .select-trip-btn {
        background-color: #7F00BA;
        color: white;
        border: none;
        border-radius: 10px;
        font-size: 11px;
        font-weight: bold;
        cursor: pointer;
        display: block;
        margin: 0 auto;
    }

    .select-trip-btn:hover {
        background-color: #B669D8;
    }

    .select-trip-btn.selected {
        background-color: #28a745;
    }

    .select-trip-btn.selected:hover {
        background-color: #218838;
    } 

    .timebar-label{
        border-color: #929292;
        border-style: solid;
        border-radius: 2px;
        border-width: 1px;
    }

    .timebar-label h4 {
        margin: 8px;
    }

    .timebar-label-left,
    .timebar-label-center,
    .timebar-label-right {
        margin: 0;
    }

    .timebar-label img{
        height: 20px;
    }

    .timebar-label-center img {
        height: 20px;
        width: auto;
        display: block;
    }

    .timebar * {
       height:40px;
    }

    .timebar > *:nth-child(2){
        border-radius: 5px 0px 0px 5px;
    }

    .timebar > *:nth-last-child(2){
        border-radius: 0px 5px 5px 0px;
    }


    .timebar .car {
        background-color: #52C05B;
    }

    .timebar .plane{
        background-color: #40A3FF
    }

    .timebar .layover{
        background: repeating-linear-gradient(
            -40deg,
            #40A3FF,
            #40A3FF 2.5px,
            #838383 2.5px,
            #838383 5px
        );
    }

    /* Set solid background for layover containers to prevent gradient bleeding */
    .timebar .layover .duration-label{
        background-color: #40A3FF;
        width: 100%;
        bottom: 0;
    }

    .timebar .wait{
        background-color: #838383
    }

    .timebar * {
        overflow: hidden;
    }

    .timebar * img, .timebar * svg{
        margin: auto;
        display: block;
    }

    /* Expanded Flight Row Styling */
    .results-row {
        transition: all 0.3s ease;
    }

    .results-row.expanded .timebar {
        height: 120px; /* Double the normal height */
        position: relative;
    }

    .results-row:not(.expanded) .timebar {
        height: 40px; /* Normal height */
    }

    .duration-label {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        color: #333;
        border-radius: 3px;
        white-space: nowrap;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        text-align: center;
        font-family: 'Inter', 'Inter-fallback';
        font-size: 16px;
        font-weight: 500;
    }

    /* Ensure timebar segments are positioned relatively for duration labels */
    .timebar > div {
        position: relative;
        height: 100%;
    }

    /* Selected flight styling */
    .results-row.selected {
        border: 2px solid #007bff;
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
    }

    .results-row.selected .timebar-label {
        background-color: #e3f2fd;
    }

    
    /* Flight detail grid for expanded timebar-label */
    .flight-detail-grid {
        display: grid;
        grid-template-columns: max-content max-content max-content;
        grid-template-rows: auto auto;
        gap: 4px 8px;
        align-items: center;
        justify-self: center;
        width: 100%;
        justify-content: center;
        margin: 4px 0;
    }

    .flight-detail-grid p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0;
    }

/* Summary View Styling */
    /* Hide timebar-label in summary view */
    .results-row.summary-view .timebar-label {
        display: none;
    }

    /* Add border to summary view rows */
    .results-row.summary-view {
        border: 1.5px solid #929292;
        border-radius: 3px;
        margin: 8px;
        background-color: white;
    }

    .summary-container {
        display: grid;
        grid-template-columns: 50px 65px 120px 90px 120px 60px 1fr 120px;
        align-items: center;
        gap: 5px;
        grid-column-start: 1;
        grid-column-end: 3;
        padding: 12px 16px;
    }

    /* Left Section: Icon + Cost + Time columns */
    .summary-left {
        display: contents;
    }

    .summary-airline-icon {
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        padding: 4px;
    }

    .summary-airline-icon img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .summary-section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
    }
    
    .summary-section.summary-total {
        align-items: flex-start;
    }

    .summary-section h3,
    .summary-section h4 {
        margin: 0;
        font-size: 18px;
        line-height: 1.1;
        text-align: left;
        font-weight: 700;
        color: #000;
    }

    .summary-label {
        font-size: 11px;
        line-height: 1.4;
        color: #666;
        display: grid;
        grid-template-columns: 50px 1fr;
        gap: 6px;
        align-items: baseline;
    }
    
    .summary-label span:first-child {
        white-space: nowrap;
        font-weight: 500;
        text-align: right;
    }
    
    .summary-label span:last-child {
        white-space: nowrap;
        text-align: left;
    }

    /* Center Section: Time + Diagram + Time */
    .summary-center {
        display: contents;
    }

    .summary-time-display {
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        font-family: 'Inter', 'Inter-fallback';
        color: #333;
    }
    
    .summary-center > .summary-time-display:first-child {
        text-align: right;
    }

    .summary-diagram {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 3px;
        min-width: 0;
        overflow: hidden;
    }
    
    .summary-diagram .summary-time-display {
        text-align: left;
    }

    .diagram-segment {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        position: relative;
    }
    
    /* Segment boxes (car and flight) */
    .segment-box {
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    
    .segment-icon {
        width: 35px;
    }
    
    .segment-arrow {
        flex-shrink: 0;
    }
    
    .segment-duration {
        font-size: 8px;
        font-weight: 600;
        color: #000;
        white-space: nowrap;
        text-align: center;
    }
    
    /* Car segment */
    .car-segment {
        height: 30px;
    }
    
    .car-segment .segment-box {
        width: 45px;
    }
    
    .car-segment .segment-arrow {
        width: 21px;
        height: 30px;
    }
    
    /* Airport segment */
    .airport-segment {
        flex-direction: column;
        justify-content: center;
    }
    
    .airport-code {
        font-size: 11px;
        font-weight: bold;
        color: #000;
        text-align: center;
    }
    
    .airport-code-label {
        font-size: 11px;
        font-weight: bold;
        color: #000;
        text-align: center;
        margin-bottom: 2px;
    }
    
    .airport-line {
        width: 35px;
        height: 2px;
        border-radius: 1px;
    }
    
    .airport-duration {
        font-size: 9px;
        color: #000;
        text-align: center;
    }
    
    /* Flight segment */
    .flight-segment {
        height: 55px;
    }
    
    .flight-segment .segment-box {
        width: 60px;
        height: 50px;
    }
    
    .flight-time {
        font-size: 8px;
        font-weight: 600;
        color: #000;
        line-height: 1;
        text-align: center;
    }
    
    .flight-departure-info,
    .flight-arrival-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 1px;
    }
    
    .flight-airport-code {
        font-size: 9px;
        font-weight: 700;
        color: #000;
        line-height: 1;
        text-align: center;
    }
    
    .flight-segment .segment-arrow {
        width: 21px;
        height: 40px;
    }

    /* Right Section: Select Button */
    .summary-select-btn {
        background-color: #7E00C2;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 10px 16px;
        cursor: pointer;
        transition: background-color 0.2s;
        white-space: nowrap;
        font-family: 'Inter', 'Inter-fallback';
        justify-self: end;
        height: fit-content;
    }

    .summary-select-btn:hover {
        background-color: #6a00a3;
    }

    .summary-select-btn h4 {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
    }

    /* Ensure planner view maintains grid layout */
    .results-row:not(.summary-view) {
        display: grid;
        grid-template-columns: 200px auto;
    }

    /* Adjust results-row grid for summary view */
    .results-row.summary-view {
        display: block;
    }

    /* Hide timebar background in summary view */
    .results-row.summary-view + .timebar-background {
        display: none;
    }

/* Slider */
    .slider-multithumb input.max-input {
        width: 45px;
        height: 30px;
        border-style: solid;
        border-width: 1px;
        border-color: #929292;
        border-radius: 2px;
        text-align: center;
        padding: 0 0 0 12px;
    }

    .slider-multithumb input.min-input {
        width: 45px;
        height: 30px;
        border-style: solid;
        border-width: 1px;
        border-color: #929292;
        border-radius: 2px;
        text-align: center; 
        padding: 0 0 0 12px;
    }

    .currency-input-wrapper {
        position: relative;
        display: inline-block;
    }

    .currency-prefix {
        position: absolute;
        left: 6px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        font-family: 'Inter', 'Inter-fallback';
        font-weight: 400;
        font-size: 14px;
        color: #000;
        z-index: 1;
    }

    .slider-multithumb input.hours-input,
    .slider-multithumb input.minutes-input {
        width: 30px;
        height: 30px;
        border-style: solid;
        border-width: 1px;
        border-color: #929292;
        border-radius: 2px;
        text-align: center;
        padding: 0;
        font-family: 'Inter', 'Inter-fallback';
        font-weight: 400;
        font-size: 14px;
    }

    .slider-group {
        width: 100%;
        height: 30px;
        position: relative;
        margin: 0 auto;
        border-radius: 5px;
    }

    .rail rect {
        fill: #000000;
        border-radius: 5px;
    }

    .range rect {
        fill: #7F00BA;
        stroke: #7F00BA;
        border-radius: 5px;
    }

    .minimum, .maximum {
        cursor: pointer;
    }

    .thumb {
        fill: #7F00BA;
        stroke: #7F00BA;
        stroke-width: 2;
    }

    .value {
        font-size: 14px;
        fill: #4CAF50;
        text-anchor: middle;
    }

/* Confirmation Page Styles */
    .confirmation_container {
        margin-top: 2%;
        padding-bottom: 4%;
        margin-left: 10%;
        margin-right: 10%;
    }

    .card {
        border-radius: 10px;
        border: 1px solid #e0e0e0;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
        border-radius: 10px;
        border: 1px solid #e0e0e0;
        margin-bottom: 30px;
    }

    .confirmation_header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 25px 50px;
    }

    .confirmation_title {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .confirmation_title h1 {
        margin: 0;
        color: #7E00C2;
    }

    .trip_timestamp {
        text-align: right;
        font-size: 12px;
    }

    .trip_timestamp p {
        margin: 2px 0;
    }

    .confirmation__trip {
        background-color: white;
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        margin-bottom: 20px;
        overflow: hidden;
    }

    .trip_card {
        background-color: white;
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        margin-bottom: 20px;
        overflow: hidden;
    }

    .trip_card_header {
        background-color: #f8f9fa;
        padding: 15px 20px;
        border-bottom: 1px solid #e0e0e0;
    }

    .confirmation__trip_header h2, .trip_card_header h2 {
        margin: 0;
        color: #7E00C2;
    }

    #confirmation_button {
        width: auto;
        height: auto;
    }

    /* Two-column layout for trip content */
    .trip_content {
        display: flex;
        min-height: 300px;
    }

    /* Left column - Timeline */
    .trip_timeline_column {
        flex: 1;
        background-color: white;
        padding: 10px 50px;
        position: relative;
    }

    .trip_timeline {
        position: relative;
        z-index: 2;
    }

    .timeline_item {
        position: relative;
        padding-left: 25px;
    }

    .timeline_content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
        position: relative; /* anchor for item_connector */
    }

    /* Explicit connector below each non-final item to the next dot */
    .item_connector {
        position: absolute;
        left: -21px; /* aligns with .timeline_dot center given left:-25px and 12px size */
        top: 38px; /* starts below the location_time_row */
        bottom: 0;
        width: 3px;
        background-color: #999;
        z-index: 1;
    }

    .location_time_row {
        display: flex;
        align-items: baseline;
        width: 100%;
        position: relative; /* ensure .timeline_dot positions against this row */
        padding-top: 5px;
    }

    .transport_row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 20px;
    }

    /* Grey dots */
    .timeline_dot {
        width: 12px;
        height: 12px;
        border: 3px solid #999;
        border-radius: 50%;
        box-sizing: border-box;
        position: absolute;
        left: -25px;
        top: 50%;
        transform: translateY(-50%);
    }

    .location_info {
        flex: 1;
        margin-right: 15px;
    }

    .location_name {
        font-family: Inter;
        font-size: 20px;
        font-weight: 600;
        padding-right: 12px;
    }

    .time {
        margin: 0;
        white-space: nowrap;
        margin-left: 15px;
    }

    /* Transport info - icon and duration in transport_row */
    .transport_icon {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .transport_icon img {
        width: 30px;
        height: 30px;
    }

    .duration {
        margin: 0;
        text-align: center;
        white-space: nowrap;
    }

    /* Hide transport info for final destination */
    .timeline_item.final .transport_info {
        display: none;
    }

    /* Right column - Cost Summary */
    .trip_cost_summary {
        flex: 0 0 300px;
        background-color: #E8D5FF;
        /* Match left column's top padding so baselines line up */
        padding: 10px 20px 20px 20px;
        /* Grid: 2 columns (dots | content); rows are set dynamically inline */
        display: grid;
        grid-template-columns: 16px 1fr;
        align-items: center;
        align-content: start; /* ensure grid starts at the top */
        position: relative;
        row-gap: 0;
    }

    .cost_breakdown {
        /* Flatten so cost_item children participate in parent grid */
        display: contents;
    }

    .cost_item {
        /* Place cost rows in the content column; gridRow is set dynamically inline */
        grid-column: 2;
        align-self: center;
        display: grid;
        grid-template-columns: 1fr auto 1fr auto 1fr;
        column-gap: 8px;
        padding: 8px 15px;
        border-radius: 6px;
        font-size: 14px;
        z-index: 1;
    }

    /* Dot inside cost rows participates in the grid (not absolutely positioned) */
    /* Hide any legacy inner dots inside cost items; use the dot column instead */
    .trip_cost_summary .cost_item .timeline_dot { display: none; }

    /* Dots column participates in the parent grid */
    .trip_cost_summary .cost_dots_column { display: contents; }
    .trip_cost_summary .cost_dots_column .connector {
        grid-column: 1;
        grid-row: 1 / -1; /* span all rows */
        justify-self: center;
        width: 3px;
        background-color: #999;
    }
    .trip_cost_summary .cost_dots_column .cost_dot {
        grid-column: 1;
        justify-self: center;
        align-self: center;
        width: 12px;
        height: 12px;
        border: 3px solid #999;
        border-radius: 50%;
        box-sizing: border-box;
        background: #E8D5FF; /* match background */
    }

    /* Make total span both columns below the 7-row grid */
    .trip_total {
        grid-column: 1 / -1;
    }

    .cost_multiply, .cost_equals {
        font-weight: bold;
        color: #333;
        font-size: 16px;
        text-align: center;
    }

    .cost_detail {
        text-align: center;
    }

    .cost_total {
        text-align: right;
    }

    .trip_total {
        display: flex;
        align-items: end;
        gap: 6px;
        padding: 10px 14px;
        margin: 8px 0;
        background-color: #FFFFFF; /* small white box */
        box-shadow: inset 0 0 8px #00000065;
        border-radius: 10px;
        flex-direction: column;
        z-index: 1; /* above right_bg */
        width: 70%;
    }

    .trip_total h2 {
        margin: 5px;
    }

    .total_amount {
        text-align: right;
    }

    /* Change trip link in white section */
    .trip_timeline_column .change_trip {
        text-align: right;
        margin-top: 20px;
        padding-top: 15px;
    }

    .trip_timeline_column .change_trip a {
        color: #7E00C2;
    }

    .trip_timeline_column .change_trip a:hover {
        text-decoration: underline;
    }

    .show_details {
        display: flex;
        color: #7E00C2;
        text-decoration: underline;
        padding-left: 20px;
    }

    .section {
        margin-top: 30px;
    }

    .final_total_section {
        text-align: center;
        padding: 25px;
    }

    .final_amount {
        margin: 0 0 30px 0;
    }

    .action_buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* TripCard 4-column grid: [left-dots | left-content | right-dots | right-content] */
    .trip_content.grid-4col {
        display: grid;
        /* Left content gets 2fr, right content gets 1fr (≈1/3 of total content width) */
        grid-template-columns: 16px 2fr 16px 1fr;
        align-items: start;
    }

    /* Make dot columns participate directly in the parent grid */
    .left_dots_column,
    .cost_dots_column { display: contents; }

    /* Vertical connectors spanning all rows (left dots column) */
    .left_dots_column .dots_connector {
        grid-column: 1;
        grid-row: 1 / -1;
        justify-self: center;
        width: 3px;
        background-color: #999;
        z-index: 0;
    }
    .cost_dots_column .dots_connector {
        grid-column: 3;
        grid-row: 1 / -1;
        justify-self: center;
        width: 3px;
        background-color: #999;
        z-index: 0;
    }

    /* Dots */
    .left_dots_column .left_dot,
    .cost_dots_column .cost_dot {
        justify-self: center;
        align-self: center;
        width: 12px;
        height: 12px;
        border: 3px solid #999;
        border-radius: 50%;
        box-sizing: border-box;
        z-index: 1;
    }
    .left_dots_column .left_dot { grid-column: 1; }
    .cost_dots_column .cost_dot { grid-column: 3; }

    /* Per-row segment connectors placed in even rows between dots */
    .left_dots_column .segment_connector {
        grid-column: 1;
        justify-self: center;
        align-self: stretch; /* fill the cell height */
        width: 3px;
        background-color: #999;
        z-index: 0;
    }
    .cost_dots_column .segment_connector {
        grid-column: 3;
        justify-self: center;
        align-self: stretch; /* fill the cell height */
        width: 3px;
        background-color: #999;
        z-index: 0;
    }

    /* Left content blocks and cost items placed in their columns; rows set inline */
    .left_content { display: contents; }
    .left_content .left_location { grid-column: 2; }
    .left_content .left_transports { grid-column: 2; }

    .cost_breakdown { display: contents; }
    .cost_breakdown .cost_item { grid-column: 4; }

    /* Make the total bar span all columns below the grid rows */
    .trip_total_full { 
        grid-column: 3 / 5;
        grid-row: -1;
        display: flex; 
        justify-content: center;
    }

    .change_trip {
        text-align: right;
        grid-column: 2;
        grid-row: -1;
        align-self: end;
        padding: 0 8px 8px 8px;
    }

    /* H3 Change Trip link styling (no underline, clickable, purple) */
    .change_trip_link {
        color: #7E00C2;
        text-decoration: none;
        cursor: pointer;
        margin-right: 50px;
    }
    .change_trip_link:hover,
    .change_trip_link:focus {
        text-decoration: none; /* keep no underline on hover/focus */
    }

    /* Right side background spanning dots + content (columns 3-4) */
    .right_bg {
        grid-column: 3 / 5;
        grid-row: 1 / -1;
        background-color: #E8D5FF;
        z-index: 0; /* sit behind dots and content */
        height: 100%
    }

    .share_section {
        display: flex;
        align-items: center;
        padding: 8px;
        cursor: pointer;
        background-color: #FFFFFF;
        border: 2px solid #929292;
        border-radius: 8px;
        cursor: pointer;
        margin-top: 12px;
        margin-bottom: 0px;
    }

    .share_icon {
        width: 20px;
        height: 20px;
    }

    .share_section:hover {
        border-color: #7F00BA;
        background-color: #F3DEFF;
        }

    .share_text{
        padding: 0px 5px;
    }

    /* Return trip selection message */
    .return-trip-message {
        background: linear-gradient(135deg, #7E00C2 0%, #9B1FD8 100%);
        border-radius: 12px;
        margin: 20px 0;
        padding: 20px;
        box-shadow: 0 4px 12px rgba(126, 0, 194, 0.2);
        animation: slideInFromTop 0.5s ease-out;
    }

    .return-trip-content {
        text-align: center;
        color: white;
    }

    .return-trip-content h3 {
        margin: 0 0 8px 0;
        font-family: 'Inter', sans-serif;
        font-weight: 700;
        font-size: 20px;
    }

    .return-trip-content p {
        margin: 0;
        font-family: 'Inter', sans-serif;
        font-weight: 400;
        font-size: 16px;
        opacity: 0.9;
    }

    @keyframes slideInFromTop {
        0% {
            transform: translateY(-20px);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }