.tn-hero__content {
    padding: 180px 0 220px;
}
.tn-booking {
	top: -120px !important;
	margin-bottom: -80px !important;
}
.country-select {
    width: 1px !important;
    margin-right: 1px !important;
}
.tn-header__action {
     margin-left: 1px !important;
}

/* ==========================================================================
   Theme palette
   Brand colours come from config/theme.php as CSS custom properties
   (frontend/layouts/theme-tokens.blade.php, docs/theme-colors.md). Use
   var(--gl-*) / var(--tn-theme-color) for anything brand-coloured, never a hex.
   Seat-status and alert colours are deliberately outside the palette.
   ========================================================================== */

/* Header top bar, and the line between it and the logo/menu row */
.tn-header__top {
    background-color: var(--gl-topbar-bg);
    border-bottom: 1px solid var(--gl-header-border);
}
/* The template's angled shape on the right; greenline-v1 paints it the bar colour */
.tn-header__top::after {
    background-color: var(--gl-topbar-accent);
}
.tn-header__info,
.tn-header__info a,
.tn-header__info-right,
.tn-header__info-right a {
    color: var(--gl-topbar-text);
}
.tn-header__info a:hover,
.tn-header__info:hover i,
.tn-header__info-right:hover a {
    color: var(--gl-primary-hover);
}
.tn-header__info-right:nth-last-child(1) {
    border-left-color: rgba(var(--tn-theme-color-rgb), 0.4);
    border-left-color: color-mix(in srgb, var(--gl-topbar-text) 45%, transparent);
}

/* Primary buttons: brand fill; the template's hover sweep (::before/::after)
   runs in the darker shade. .tn-btn.bg-title keeps its !important dark fill. */
.tn-btn,
.tn-btn__red {
    background-color: var(--gl-primary);
    color: var(--gl-on-primary);
}
.tn-btn::before,
.tn-btn::after,
.tn-btn__red::before,
.tn-btn__red::after {
    background-color: var(--gl-primary-hover);
}
.tn-btn:hover,
.tn-btn:focus-visible {
    color: var(--gl-on-primary);
}

/* Template artwork that shipped as red PNGs, repainted from the palette by
   using the artwork as a mask. Home "About" ring: accent arcs + dark arc
   (masks split from assets-new/about-imgBg-h1.png, 462x485). */
.tn-about--left .tn-about__ring {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 462 / 485;
}
/* One layer per colour; a mask on the span itself would also clip its children. */
.tn-about--left .tn-about__ring::before,
.tn-about--left .tn-about__ring::after {
    content: "";
    position: absolute;
    inset: 0;
}
.tn-about--left .tn-about__ring::before {
    background-color: var(--tn-theme-color1);
    -webkit-mask: url(../../assets-new/theme/about-ring-base.png) 0 0 / 100% 100% no-repeat;
    mask: url(../../assets-new/theme/about-ring-base.png) 0 0 / 100% 100% no-repeat;
}
.tn-about--left .tn-about__ring::after {
    background-color: var(--tn-theme-color);
    -webkit-mask: url(../../assets-new/theme/about-ring-accent.png) 0 0 / 100% 100% no-repeat;
    mask: url(../../assets-new/theme/about-ring-accent.png) 0 0 / 100% 100% no-repeat;
}
/* About list tick (was clicko/image/icons/check-icon.png: one colour, tick cut out) */
.tn-check {
    display: inline-block;
    position: relative;
    top: -2px;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    vertical-align: middle;
    background-color: var(--tn-theme-color);
    -webkit-mask: url(../image/icons/check-icon.png) center / contain no-repeat;
    mask: url(../image/icons/check-icon.png) center / contain no-repeat;
}

.tn-breadcrumb-2 {
    padding: 40px 0 !important;
}

.tn-breadcrumb::after {
    /*background-color: rgba(var(--tn-theme-color-rgb), 0.12);*/
    background-color: var(--tn-theme-color2);
}


.tn-breadcrumb_bottom {
    border-bottom: 3px solid var(--tn-theme-color1);
}

/* Compact breadcrumb for portal pages (About/Service/Query/FAQ/etc.).
   Scoped to .tn-breadcrumb--compact so it never touches the full-height
   breadcrumb used elsewhere (e.g. the trips page). No background image,
   short height, thin separator lines top & bottom. */
.tn-breadcrumb.tn-breadcrumb--compact {
    position: relative;
    padding: 26px 0 !important;
    background-image: none !important;
    background-color: #f6f8fb;
    border-top: 1px solid #e6eaf0;
    border-bottom: none;
    box-shadow: 0 3px 10px rgba(var(--tn-theme-color1-rgb), 0.06);
}
.tn-breadcrumb.tn-breadcrumb--compact::after {
    display: none;            /* kill the tinted overlay */
}
/* Gradient accent bar at the bottom — picks up the theme red and fades out
   toward the edges so it reads as a designed divider, not a plain line. */
.tn-breadcrumb.tn-breadcrumb--compact::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    z-index: 1;
    background: linear-gradient(
        90deg,
        rgba(var(--tn-theme-color-rgb), 0) 0%,
        rgba(var(--tn-theme-color-rgb), 0.85) 25%,
        var(--tn-theme-color) 50%,
        rgba(var(--tn-theme-color-rgb), 0.85) 75%,
        rgba(var(--tn-theme-color-rgb), 0) 100%
    );
}
.tn-breadcrumb--compact .tn-breadcrumb__wrapper h2 {
    margin-bottom: 8px !important;
    font-size: 26px;
    line-height: 1.2;
}
.tn-breadcrumb--compact .breadcrumb {
    margin-bottom: 0;
}
.tn-breadcrumb--compact .breadcrumb-item {
    font-size: 15px;
}
.tn-breadcrumb--compact .breadcrumb-item + .breadcrumb-item::before {
    color: var(--tn-title-color);
    padding: 0 10px;
}
@media (max-width: 991px) {
    .tn-breadcrumb.tn-breadcrumb--compact {
        padding: 20px 0 !important;
    }
    .tn-breadcrumb--compact .tn-breadcrumb__wrapper h2 {
        font-size: 22px;
    }
}

/* Flight-card details: make room for the seat-layout block.
   Theme defines grid-template-columns: 1fr 3fr and max-height: 260px when .active,
   which clips and misaligns any extra child. We collapse to a single column so the
   seat block sits beneath flight-date/flight-info, and raise the max-height so the
   slide-down stays animated but doesn't crop. */ 
   
/* Details panel: Date/Time/Class now live inside route-details__head, so the
   theme's left "flight-date" column is gone. Force a single full-width column
   at every breakpoint so flight-info spans the whole panel. */
.tn-flight .flight-card__details {
    grid-template-columns: 1fr !important;
}
.tn-flight .flight-card__details.active {
    max-height: 2000px;
}
.tn-flight .flight-card__details .flight-card__extra {
    grid-column: 1 / -1;
    padding: 0 35px 35px;
}

.view-seats-btn {
	background-color: var(--tn-theme-color) !important;
}
a.view-seats-btn:hover {
    color: white !important;
}

/* ====================================================== */
/* ====================== ssmain.css Begins============== */
.abs,
.bbs,
.csdb,
.rsdz,
.tab-link{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.error-border{
    border: 1px solid red !important;
}
.abdvb{
    width: 90px;
    border-radius: 0 !important;
    margin-top: 5px !important;
}
.eabd h4,.eabd p{
    margin: 0;
}
.eabd{
    padding: 15px 10px;
    background-color: #fff;
    transition: 0.3s;
    border: 1px solid #ddd;
}
.eabzn{
    margin: 5px 0;
}
.eabd:hover{
    box-shadow: 0 0 4px #999;
    background-color: #f7f7f7;
}
.lvwrfsd{
    width: 90px;
    overflow: hidden;
    height: 10px;
    margin-top: -6px;
}
.lvwrfsd img{
    width: 100%;
    height: auto
}
.mscm1,.mscm2{
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0 5px 0 0;
}

.mscm1{background-color: green}
.mscm2{background-color: #c60000}
.mvbs{
    width: 35px;
    margin: 2px;
    text-align: center;
    line-height: 30px;
    height: 30px;

}
.sdg{
    width: 20px;
}
.abs{    
    background-color: green;
    cursor: pointer;
}
.bbs{    
    background-color: #c60000; 
    cursor: not-allowed;
}
.msaws{
   border: 1px solid #ddd;
}
.abs,.bbs{
    color: white;    
    box-shadow: 0 0 3px #07363e;

}
.dbs{
    box-shadow: 0 0 3px #07363e;
    background-color: #373a3e;
}
.abs:hover{
    opacity: 0.8
}

.smt{
    border:1px solid #ddd;
    background-color: #fff;
    box-shadow: 0 0 3px #07363e;
    width:auto;
}
.smt td{
    padding:5px !important;
    vertical-align:middle;
    border:none !important;
}

.smtt{
    text-align: center;
    margin: 0 2px 25px 2px;
    padding: 5px;
    border: 1px solid #ddd;
    font-weight: bold;
    box-shadow: 0 0 10px #ddd inset;
}
.sbdt{
    width:100%;
    max-width: 500px
}
.sbdt th,.sbdt td{
    border:1px solid #ddd;
    padding: 5px;
    text-align: center;
}
.bpts{
    padding: 5px;
    min-width: 250px;
    min-height: 30px;
}
.atcbys{
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    color: #084e6f;
    font-weight: 600;
    text-align: center
}
.swsdv{
    background-color: #fff;
    padding: 10px;
}
.aswsv{
    border: 1px solid #999;
    box-shadow: 0 0 3px #999;
    margin: 5px 0;
}
.csdb{
    width: 15px;
    height: 15px;
    margin: auto !important;
    border: 1px solid gray;
    line-height: 12px;
    box-shadow: 0 0 3px #999;
    color: red;
    cursor: pointer;
}
.csdb:hover{
    border: 1px solid red;
    font-weight: bold
}
.imfgn{
    color:red;
}
.rsdz{
    margin: 0;
    padding: 5px;
    border: 1px solid #ccc;
    height: 25px;
    line-height: 15px;
    width: 23px;
    text-align: center;
    cursor: pointer;
}
.rsdz:hover{
    border: 1px solid red;
    color: red;
}
p{
    margin:0 !important;
}
/*---------------TAB-----------------*/
ul.sstab{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
ul.sstab li{
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
    font-weight: bold
}

ul.sstab li.active_tab{
       background: var(--gl-primary);
    color: var(--gl-accent);

}

.sstab-content{
    display: none;
    padding: 15px;
}

.sstab-content.active_tab{
    display: inherit;
}
/*---------------TAB-----------------*/
.sstabzn{
    margin: 10px 0;
}
.cslit p{
    width: 40px;
    height: 25px;
    background-color: #ffffa3;
    padding: 0;
    text-align: center;
    line-height: 24px;
    margin: auto !important;
    border: 1px solid #ddd;
}
[name='pgen'] {
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    outline: none;
    border: 1.5px solid #444;
    margin: 12px 0 0 0;
    border-radius: 50%;
}

[name='pgen']:before {
    content: '';
    display: block;
    width: 60%;
    height: 60%;
    margin: 20% auto;
    border-radius: 50%;
}

[name='pgen']:checked:before {
    background: #444;

}

[name='papol']{
    -moz-appearance:none;
    -webkit-appearance:none;
    -o-appearance:none;
    outline: none;
}

[name='papol']:before {
    font-family: "FontAwesome";
    content: "\f00c";
    color: transparent !important;
    display: block;
    width: 18px;
    height: 18px;
    border: 1.5px solid #444;
}

[name='papol']:checked:before {
    color: #444 !important;
}
.check-error:before{
    border: 1.5px solid red !important;
}
.ssbgclr{
    background-color: #ffffa3;
    color: black;
}
/* ====================== ssmain.css ends =============== */
/* ====================================================== */

/* ====================================================== */
/* ============ Seat layout designs (SP vs General) ===== */
/* Driven by `.seat-type-sp` / `.seat-type-general` on the */
/* #seat-layout-* wrapper (see partials/seat_view.blade).  */
/* SP  -> sleeper-seats.png pattern (rounded bar seat)     */
/* else -> generel-seats.png pattern (chair/armrest seat)  */
/* Shared colour semantics for BOTH patterns:              */
/*   available = white | booked = red | selected = green   */

/* Strip the old container chrome for a flat, modern look */
.seat-design .smt {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
.seat-design .smt td {
    padding: 4px !important;
}
.seat-design .smtt {
    box-shadow: none;
    border-color: #e4e7ec;
    color: #475467;
}
.seat-design .msaws {
    border: none;
    color: #98a2b3;
    font-weight: 600;
}

/* ---- Shared seat base (overrides .mvbs / .abs / .bbs) ---- */
.seat-design .mvbs {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px;
    height: auto;
    line-height: 1;
    font-size: 13px;
    font-weight: 600;
    color: #344054;
    background: #fff;
    border: 1.5px solid #d0d5dd;
    box-shadow: none;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

/* available */
.seat-design .mvbs.abs {
    background: #fff;
    border-color: #d0d5dd;
    color: #344054;
    cursor: pointer;
    --seat-accent: #98a2b3;
}
.seat-design .mvbs.abs:hover {
    opacity: 1;
    background: #f0fdf4;
    border-color: #12b76a;
    --seat-accent: #12b76a;
}
/* booked / sold */
.seat-design .mvbs.bbs {
    background: #fdecea;
    border-color: #f04438;
    color: #f04438;
    cursor: not-allowed;
    --seat-accent: #f04438;
}
/* selected (class added on top of .abs by ssmainjs.js) */
.seat-design .mvbs.ssbgclr {
    background: #e7f6ec;
    border-color: #12b76a;
    color: #067647;
    box-shadow: inset 0 0 0 1px #12b76a;
    --seat-accent: #12b76a;
}

/* ---- General pattern: chair with two armrests ---- */
.seat-type-general .mvbs {
    width: 42px;
    height: 40px;
    border-radius: 12px 12px 7px 7px;
}
.seat-type-general .mvbs::before,
.seat-type-general .mvbs::after {
    content: '';
    position: absolute;
    bottom: 4px;
    width: 5px;
    height: 16px;
    border-radius: 6px;
    background: var(--seat-accent, #d0d5dd);
}
.seat-type-general .mvbs::before { left: -3px; }
.seat-type-general .mvbs::after  { right: -3px; }

/* ---- Sleeper (SP) pattern: tall (height-wise) berth seat ---- */
.seat-type-sp .mvbs {
    width: 40px;
    height: 56px;
    padding-bottom: 10px;       /* room for the bottom accent bar */
    border-radius: 8px;
}
.seat-type-sp .mvbs::before {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 4px;
    border-radius: 4px;
    background: var(--seat-accent, #d0d5dd);
}

/* ---- Row series label (A, B, C ...): NOT a seat ---- */
/* Shares .mvbs for layout only; strip every seat visual so it */
/* reads as a plain column/row marker instead of a seat tile.  */
.seat-design .mvbs.seat-series-label {
    width: auto;
    min-width: 18px;
    height: auto;
    padding: 0 6px;
    margin: 4px 2px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: #98a2b3;
    font-size: 12px;
    font-weight: 700;
    cursor: default;
}
.seat-design .mvbs.seat-series-label::before,
.seat-design .mvbs.seat-series-label::after {
    content: none;
    display: none;
}

/* ---- Selected-seat chips in the summary table (.sbdt) ---- */
.seat-design .cslit p {
    background: #e7f6ec;
    border: 1.5px solid #12b76a;
    color: #067647;
    border-radius: 6px;
    font-weight: 600;
}

/* ---- Legend ---- */
.seat-design .seat-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 12px;
}
.seat-design .seat-legend__item {
    display: inline-flex;
    align-items: center;
}
.seat-design .seat-legend__swatch {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 6px;
    border-radius: 4px;
}
.seat-design .mscm1 { background: #fff !important; border: 1.5px solid #d0d5dd; }
.seat-design .mscm2 { background: #fdecea !important; border: 1.5px solid #f04438; }
.seat-design .mscm3 { background: #e7f6ec; border: 1.5px solid #12b76a; }

/* ---- Right panel: selection summary + boarding + actions ---- */
/* Re-skinned to match the flat / rounded left-side seat layout. */
.seat-design .sbarc {
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.seat-design .sbarc b {
    color: #344054;
    font-size: 14px;
}

/* Non-cancellable warning notice (re-skinned soft warning card) */
.seat-design .seat-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid #fec84b;
    border-left: 4px solid #f79009;
    border-radius: 10px;
    background: #fffaeb;
    color: #b54708;
    font-size: 13px;
    line-height: 1.45;
}
.seat-design .seat-alert__icon {
    margin-top: 2px;
    color: #f79009;
    font-size: 15px;
    flex-shrink: 0;
}
.seat-design .seat-alert__text strong { color: #93370d; }

/* Selected-seats summary table */
.seat-design .sbdt {
    width: 100%;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 8px;
}
.seat-design .sbdt th,
.seat-design .sbdt td {
    border: none;
    border-bottom: 1px solid #f0f1f3;
    padding: 10px 8px;
    text-align: center;
    font-size: 13px;
    color: #475467;
}
.seat-design .sbdt thead th {
    background: #f9fafb;
    color: #667085;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: 11px;
}
.seat-design .sbdt tfoot td {
    background: #f9fafb;
    border-bottom: none;
    color: #344054;
}
.seat-design .sbdt tfoot .bsta { color: #067647; }

/* Remove-seat ("x") control */
.seat-design .csdb {
    width: 22px;
    height: 22px;
    line-height: 20px;
    margin: auto !important;
    border: 1px solid #fda29b;
    border-radius: 50%;
    background: #fef3f2;
    color: #f04438;
    box-shadow: none;
    font-weight: 700;
    transition: all .15s ease;
}
.seat-design .csdb:hover {
    background: #f04438;
    border-color: #f04438;
    color: #fff;
    font-weight: 700;
}

/* Boarding point select */
.seat-design .bpts {
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 10px 12px;
    margin-top: 8px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    background: #fff;
    color: #344054;
    font-size: 14px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.seat-design .bpts:focus {
    border-color: #12b76a;
    box-shadow: 0 0 0 3px rgba(18, 183, 106, .12);
}

/* Next / submit button (border-radius intentionally > 12px) */
.seat-design .sbnsb {
    border-radius: 14px !important;
    width: 160px;
    padding: 10px 16px;
    background: var(--gl-primary);
    border: none;
    color: var(--gl-on-primary);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
    transition: background-color .15s ease;
}
/* An action, so brand-coloured; the selected-seat cells keep the status green. */
.seat-design .sbnsb:hover,
.seat-design .sbnsb:focus {
    background: var(--gl-primary-hover);
    color: var(--gl-on-primary);
}
.seat-design .sbnsb.disabled { opacity: .6; cursor: not-allowed; }
.seat-design .imfgn { margin-top: 8px !important; }

/* ---- Responsive ---- */
@media (max-width: 767px) {
    .seat-design .sbarc { padding: 14px; }
    .seat-design .sbnsb { width: 100%; }
    /* The seat column goes full-width when stacked, so centre the grid
       (equal empty space left & right) instead of letting the shrink-to-fit
       table hug the left edge. */
    .seat-design .seat-grid-wrap {
        overflow-x: auto;            /* safety net for very wide coaches */
        -webkit-overflow-scrolling: touch;
        text-align: center;
    }
    .seat-design .smt {
        margin-left: auto;
        margin-right: auto;
    }
    .seat-design .seat-legend {
        justify-content: center;
    }

    /* Roomier, less cramped seats on phones. */
    .seat-type-general .mvbs {
        width: 46px;
        height: 44px;
        font-size: 14px;
    }
    .seat-type-general .mvbs::before,
    .seat-type-general .mvbs::after {
        height: 18px;
    }
    .seat-type-sp .mvbs {
        width: 38px;
        height: 52px;
        font-size: 14px;
    }
    .seat-design .mvbs { margin: 5px; }
    .seat-design .smt td { padding: 4px !important; }
}
/* ================ Seat layout designs end ============= */
/* ====================================================== */

/* ====================================================== */
/* ====================== Custom (old) css begings ====== */

.margin-lt-1 {
    margin-left: 1%;
}

@media only screen and (max-width: 767px) {
    .bldec {
        display: flex;
        margin: 10px 0
    }

    .bldec small {
        font-size: 14px;
    }

    .vliss {
        width: 100px;
    }

    .vsiss {
        width: 15px;
    }

    .hidden_xs {
        display: none;
    }
}

#tnd {
    border: 1px solid red;
    text-align: center;
    margin-bottom: 10px;
    padding: 2px
}

.trips-grid-header {
    padding: 15px; 
    border: 1px solid #ddd; 
    background-color: #fff; 
}

.font_size{
    font-size: 26px;
    font-weight: 700;
}
.font_size_2{
    font-size: 20px;
    font-weight: 700;
}
.font_size_3{
    font-size: 17px;
    font-weight: 400;
    color: rgb(104, 112, 116);
}
.trip_time_font_icons {
    font-size: 22px;
    text-align: center;
    font-weight: 700;
    margin-right: 6px;
}
.abdvb {
    width: 100px;
}
.taka {
    font-weight: bold;
    font-size: 17px;
}
.top-dotted-border {
    border-top: 2.5px dotted #ccc;
    padding-top: 3px;
}
/* Row holding the left "View Details & Seats" button and the right-aligned tags */
.trip-tags-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
}
/* Let the tags grow so "Seats Left" (margin-left:auto) is pushed to the far right */
.trip-tags-bar .ticket-tags {
    flex: 1 1 auto;
}

/* Standalone left toggle button — independent of the theme .details-btn */
.trip-details-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    color: var(--gl-accent);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.3s ease-in-out;
}
.trip-details-btn i {
    transition: transform 0.3s ease-in-out;
}
.trip-details-btn:hover {
    color: var(--tn-theme-color);
}
.trip-details-btn.active i {
    transform: rotate(180deg);
}

@media (max-width: 575px) {
    .trip-details-btn {
        font-size: 13px;
    }
}

.ticket-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ticket-tags .tag {
    margin-top: 3px;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    padding: 4px 10px;
    border: 1px solid #dcdcdc;
    border-radius: 20px;
    background: #fff;
    color: #555;
    line-height: 1;
    transition: all 0.2s ease;    
}
.ticket-tags .tag i {
    margin-right: 5px;
    font-size: 12px;
}
.ticket-tags .tag:hover {
    border-color: #aaa;
    background: #f7f7f7;
}
.ticket-tags .tag.ac {
    border-color: #5bc0de;
    color: #31b0d5;
}
.ticket-tags .tag.business {
    border-color: #f0ad4e;
    color: #ec971f;
}
.ticket-tags .tag.open_seats {
    border-color: #d9534f;
    color: #d9534f;
    margin-left: auto;
}
.ticket-tags .tag.active {
    background: #337ab7;
    color: #fff;
    border-color: #2e6da4;
}
.ticket-tags .tag:last-child {
    margin-right: 0;
}

/* Custom Search Form Box */
.custom-search-box-wrapper {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 20px 20px 0px 20px;
    margin-top: 15px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    text-align: left;
}

.custom-search-title {
    color: var(--gl-accent);
    font-size: 18px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--gl-primary);
    display: inline-block;
    padding-bottom: 5px;
}

.custom-search-form {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.custom-search-form .form-group {
    margin-bottom: 0; 
    flex: 1;
}

.form-control-custom {
    width: 100% !important;
    height: 42px;
    border-radius: 4px;
    border: 1px solid #ced4da;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
    box-sizing: border-box;
    margin: 0;
}

.btn-search-custom {
    background-color: var(--gl-primary);
    color: #fff;
    border: 1px solid transparent;
    height: 42px;
    padding: 0 25px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
    transition: background-color 0.3s;
    box-sizing: border-box;
    margin: 20px 0px 30px 0px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-search-custom:hover {
    background-color: var(--gl-primary-hover);
    color: #fff;
}

@media only screen and (max-width: 767px) {
    .custom-search-form {
        flex-direction: column;
        align-items: stretch;
    }
    .custom-search-form .form-group {
        width: 100%;
        margin-bottom: 15px;
    }
    .btn-search-custom {
        width: 100%;
    }
    .coach-name-max-with{
        word-break: break-all;
        max-width: 252px;
    }
}

.date-field {
    height: 41px !important;
}

/* Filter Sidebar Styles */
.filter-sidebar {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    margin-top: 10px;
}

.filter-section {
    margin-bottom: 20px;
}

.filter-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--gl-accent);
    margin-bottom: 12px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-link-btn {
    display: inline-block;
    padding: 6px 12px;
    font-size: 13px;
    color: #555;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 20px;
    text-decoration: none !important;
    transition: all 0.3s;
    cursor: pointer;
    text-transform: capitalize;
}

.filter-link-btn:hover {
    background: #f7f7f7;
    border-color: #aaa;
    color: #333;
}

.filter-link-btn.active {
    background: var(--gl-primary);
    color: #fff;
    border-color: var(--gl-primary);
    box-shadow: 0 2px 4px rgba(var(--tn-theme-color-rgb), 0.3);
}

.filter-link-btn.date-link {
    background: #fdfdfd;
}

.boarding-points-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.boarding-point-item {
    margin-bottom: 8px;
}

.boarding-point-item label {
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #555;
    margin-bottom: 0;
}

.boarding-point-item input[type="radio"] {
    margin: 0;
}

.reset-filter-link {
    color: #d9534f;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
    font-weight: 600;
}

.reset-filter-link:hover {
    color: #c9302c;
}

.btn-view-seats {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin: 0;

    background: linear-gradient(45deg, #31b0d5, #269abc);
    color: #fff;
    padding: 9px 0px 7px 6px;
    font-size: 12px;

    border-radius: 30px !important;
    transition: all 0.25s ease;
}
.btn-view-seats i {
    font-size: 12px;
}
.btn-view-seats:hover {
    background: linear-gradient(45deg, #269abc, #31b0d5);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transform: translateY(-1px);
}
.btn-view-seats:active {
    transform: scale(0.96);
}
@media (max-width: 768px) {
    .btn-view-seats {
        font-size: 11px;
        padding: 4px 10px;
    }
}

.trip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto; 
  padding: 5px 10px; 
  margin-top: 6px; 
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px; 
  font-weight: 500;
  line-height: 1.4; 
  color: #fff;
  background-color: var(--gl-primary);
  border-radius: 12px !important; 
  cursor: pointer;
  user-select: none;
  text-decoration: none; 
  transition: all 0.2s ease-in-out;
  float: right;
}

.trip-btn i {
  margin-right: 5px;
  font-size: 13px;
}

.trip-btn:hover {
  background-color: var(--gl-primary-hover);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.trip-btn:active {
  background-color: var(--gl-primary-hover);
  transform: scale(0.97);
}

.trip-btn.sm {
  padding: 3px 8px;
  font-size: 12px;
}

.trip-btn.sm i {
  font-size: 12px;
  margin-right: 4px;
}

.trip-btn.info {
  background-color: #5bc0de !important;
}

.trip-btn.info:hover,
.trip-btn.info:focus {
  background-color: #46b8da !important;
}

.trip-btn.warning {
  background-color: #f0ad4e !important;
}

.trip-btn.warning:hover,
.trip-btn.warning:focus {
  background-color: #ec971f !important;
}

.trip-btn.danger {
  background-color: #d9534f;
}

.trip-btn.danger:hover 
.trip-btn.danger:focus {
  background-color: #c9302c;
}
/* ===========Trip button Ends=============  */

/* Seat layout close icon */
.tn-flight .flight-card__details {
    position: relative;
}
.tn-flight .flight-card__details .seat-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 2;
}
.seat-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50% !important;
    background-color: #d9534f;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}
.seat-close-btn:hover {
    background-color: #c9302c;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.seat-close-btn:active {
    transform: scale(0.95);
}
/* ====================== Custom (old) css ends ====== */
/* ====================================================== */

/* Trips Prev / Next navigation buttons */
.trips-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 15px;
}
.trips-nav__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background-color: var(--gl-primary);
    border: 1px solid transparent;
    border-radius: 30px;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.25s ease;
}
.trips-nav__btn i {
    font-size: 13px;
}
.trips-nav__btn:hover {
    background-color: var(--gl-primary-hover);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}
.trips-nav__btn:active {
    transform: scale(0.97);
}
.trips-nav__btn.disabled {
    background-color: #cfcfcf;
    color: #fff;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}
.trips-nav__current {
    margin-top: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--gl-accent);
}

.flight-info__box img{
    height: auto !important;
}
.flight-info__box p {
    line-height: 22px !important;
}

/* ===== Trip "View Details" — route details & boarding timeline ===== */
/* flight-info now spans the full panel width (the left Date column is gone),
   so give it its own breathing room. */
.tn-flight .flight-card__details .flight-info {
    padding: 26px 30px;
}
/* Outer box: drop the theme's tint, padding, indent margin and divider line —
   the two inner panels (head + timeline) carry their own styling. The high
   specificity is needed to beat the theme's `.flight-info__box { display:flex }`. */
.tn-flight .flight-card__details .flight-info__box.route-details {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* head & timeline each take 50% */
    gap: 18px;
    align-items: stretch;   /* both boxes match the taller one's height */
    width: 100%;
    margin: 14px 0 0;
    padding: 0;
    background: transparent;
}
.tn-flight .flight-card__details .flight-info__box.route-details::after {
    display: none;   /* remove the old date/box divider line */
}
/* Space the destination (to_city) heading away from the route box above it. */
.tn-flight .flight-card__details .flight-info__box.route-details + h3 {
    margin-top: 18px;
}
@media (max-width: 991px) {
    /* stack head over timeline (one above the other) on mobile & tablet */
    .tn-flight .flight-card__details .flight-info__box.route-details {
        grid-template-columns: 1fr;
    }
}
.route-details__head {
    display: flex;
    flex-direction: column;
    justify-content: center;   /* centre content when this box is the shorter one */
    gap: 8px;
    padding: 14px 16px;
    background: #f6f8fb;
    border: 1px solid #e6eaf0;
    border-radius: 10px;
}
.route-details__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}
.route-details__label {
    flex: 0 0 110px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}
.route-details__label i {
    color: var(--gl-accent);
    margin-right: 4px;
}
.route-details__value {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}
.route-details__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--gl-accent);
    background: #ececfb;
    border-radius: 20px;
}
.route-details__chip i {
    font-size: 11px;
}

/* Timeline */
.route-timeline {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;   /* always top-align, even with 1–2 stops */
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 10px;
}
.route-timeline__title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gl-accent);
    margin-bottom: 12px;
}
.route-stops {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.route-stop {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* symmetric vertical padding keeps each dot at the row's exact centre,
       so the connecting line can run dead-straight from centre to centre. */
    padding: 10px 0 10px 28px;
}
/* connecting line: from this dot's centre down to the next dot's centre */
.route-stop:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    height: 100%;
    width: 2px;
    background: #c9cfdc;
}
.route-stop__dot {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--gl-primary);
    z-index: 1;
}
.route-stop--arrival .route-stop__dot {
    border-color: #e2495a;
    background: #e2495a;
}
.route-stop.is-start .route-stop__dot {
    border-color: var(--gl-accent);
    background: var(--gl-accent);
}
.route-stop__info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.route-stop__name {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}
.route-stop__point {
    font-size: 12px;
    color: #6b7280;
}
.route-stop__time {
    flex-shrink: 0;
    text-align: right;
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
}
.route-stop__time small {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--gl-primary);
}
.route-stop--arrival .route-stop__time small {
    color: #e2495a;
}

/* Notes */
.route-details__notes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed #d6dbe6;
}
.route-details__notes span {
    font-size: 12.5px;
    color: #6b7280;
}
.route-details__notes i {
    color: var(--gl-accent);
    margin-right: 5px;
}
/* Notes now live inside the head box — tighten the top spacing. */
.route-details__head .route-details__notes {
    margin-top: 6px;
    padding-top: 10px;
}

@media (max-width: 575px) {
    .route-details__label {
        flex: 0 0 100%;
    }
}

@media (max-width: 575px) {
    .tn-flight .flight-card__details .flight-card__extra {
        padding: 0 20px 20px;
    }
}
/*1. Mobile First*/
@media (min-width: 576px) { }   /* small phones landscape */
@media (min-width: 768px) { }   /* tablets */
@media (min-width: 992px) { }   /* laptops */
@media (min-width: 1200px) { }  /* desktops */
@media (min-width: 1400px) { 
    .tn-hero__content {
        padding: 80px 0 240px;
    }
}  /* large screens */

/*2. Desktop First*/
@media (max-width: 1400px) { }  /* large devices */
@media (max-width: 1200px) { }  /* desktops */
@media (max-width: 992px) { }   /* tablets landscape */

@media (max-width: 768px) {
    .tn-hero__content {
        padding: 260px 15px 20px;
    }
}

@media (max-width: 576px) { }   /* phones */
@media (max-width: 400px) { }   /* small phones */

/* ===== Journey Details card ===== */
.booking-detail-sidebar .widget__airline {
    margin-bottom: 35px;
}

.journey-info {
    list-style: none;
    margin: 0;
    padding: 0;
}

.journey-info__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 11px 0;
    border-bottom: 1px dashed rgba(var(--tn-title-color-rgb), 0.18);
}

.journey-info__item:first-child {
    padding-top: 0;
}

.journey-info__item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.journey-info__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--tn-body-color);
    text-transform: capitalize;
    white-space: nowrap;
}

.journey-info__label i {
    font-size: 15px;
    line-height: 1;
    color: var(--tn-theme-color);
}

.journey-info__value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tn-title-color);
    text-align: right;
}

.journey-info__value i {
    font-size: 11px;
    color: var(--tn-theme-color);
}

.journey-info__value small {
    font-size: 12px;
    font-weight: 400;
    color: var(--tn-body-color);
}

.journey-info__seat {
    display: inline-block;
    min-width: 30px;
    padding: 3px 10px;
    border-radius: 6px;
    background: var(--tn-theme-color);
    color: var(--tn-white-color);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
}

/* ===== Gender radios: keep focusable for native validation ===== */
/* style.css hides these with display:none, which makes a required radio
   non-focusable and silently blocks form submission. Visually hide instead. */
.booking-detail__gender .G-item {
    position: relative;
}

.booking-detail__gender .G-item input {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

/* ===== Proceed to pay button ===== */
.proceed-pay {
    padding: 0 40px 30px;
}

@media (max-width: 380px) {
    .proceed-pay {
        padding: 0 20px 25px;
    }
}

/* ===== Payment method tabs ===== */
.payment-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.payment-tabs__btn {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid rgba(var(--tn-title-color-rgb), 0.15);
    border-radius: 10px;
    background: var(--tn-white-color);
    color: var(--tn-title-color);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.2s ease;
}

.payment-tabs__btn i {
    font-size: 18px;
    color: var(--tn-theme-color);
    transition: color 0.2s ease;
}

.payment-tabs__btn:hover {
    border-color: var(--tn-theme-color);
}

.payment-tabs__btn.active {
    background: var(--tn-theme-color);
    border-color: var(--tn-theme-color);
    color: var(--tn-white-color);
}

.payment-tabs__btn.active i {
    color: var(--tn-white-color);
}

.payment-pane {
    display: none;
}

.payment-pane.active {
    display: block;
}

@media (max-width: 575px) {
    .payment-tabs__btn {
        flex: 1 1 100%;
    }
}

/* ===== Payment secure notice ===== */
.payment-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 25px 0;
    padding: 16px 18px;
    border: 1px solid rgba(var(--tn-theme-color-rgb), 0.20);
    border-left: 4px solid var(--tn-theme-color);
    border-radius: 10px;
    background: rgba(var(--tn-theme-color-rgb), 0.06);
}

.payment-notice__icon {
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1.4;
    color: var(--tn-theme-color);
}

.payment-notice__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--tn-body-color);
}

/* ===== Terms & Conditions checkbox ===== */
.terms-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 40px;
    padding: 16px 18px;
    border: 1px solid rgba(var(--tn-title-color-rgb), 0.12);
    border-radius: 10px;
    background: var(--tn-theme-color2);
}

@media (max-width: 575px) {
    .terms-check {
        margin: 0 40px;
    }
}

@media (max-width: 380px) {
    .terms-check {
        margin: 0 20px;
    }
}

.terms-check__input {
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    margin-top: 2px;
    border: 1.5px solid rgba(var(--tn-title-color-rgb), 0.30);
    border-radius: 5px;
    background: var(--tn-white-color);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.terms-check__input:hover {
    border-color: var(--tn-theme-color);
}

.terms-check__input:checked {
    background: var(--tn-theme-color);
    border-color: var(--tn-theme-color);
}

.terms-check__input:checked::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 6px;
    width: 5px;
    height: 9px;
    border: solid var(--tn-white-color);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.terms-check__label {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--tn-body-color);
    cursor: pointer;
}

.terms-check__label a {
    color: var(--tn-theme-color);
    font-weight: 600;
    text-decoration: none;
}

.terms-check__label a:hover {
    text-decoration: underline;
}
/* ===== Policy / Terms & Conditions / Cancellation Policy pages ===== */
.tn-policy {
    color: var(--tn-body-color);
    line-height: 1.8;
}

.tn-policy p {
    margin-bottom: 8px;
}

.tn-policy__bn {
    color: #555;
    font-size: 15px;
    margin-bottom: 18px !important;
}

.tn-policy__heading {
    margin-top: 36px;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--tn-theme-color);
    font-size: 24px;
    color: var(--tn-title-color);
}

.tn-policy__heading span {
    font-size: 18px;
    font-weight: 500;
    color: #555;
}

.tn-policy__subheading {
    margin-top: 26px;
    margin-bottom: 14px;
    font-size: 19px;
    color: var(--tn-title-color);
}

.tn-policy__list,
.tn-policy__sublist {
    padding-left: 22px;
    margin-bottom: 20px;
}

.tn-policy__list > li {
    margin-bottom: 18px;
}

.tn-policy__sublist {
    margin-top: 10px;
    list-style: disc;
}

.tn-policy__sublist > li {
    margin-bottom: 12px;
}

.tn-policy__list > li p,
.tn-policy__sublist > li p {
    margin-bottom: 4px;
}

.tn-policy__table {
    margin: 18px 0 24px;
    width: 100%;
}

.tn-policy__table th {
    background-color: var(--tn-theme-color);
    color: #fff;
    font-weight: 600;
}

.tn-policy__table th,
.tn-policy__table td {
    padding: 10px 14px;
    border: 1px solid #ddd;
}

.tn-policy__note {
    margin-top: 30px;
    padding: 18px 22px;
    background-color: #fff6f6;
    border-left: 4px solid var(--tn-theme-color);
    border-radius: 6px;
}

.tn-policy__note p:last-child,
.tn-policy__contact p:last-child {
    margin-bottom: 0;
}

.tn-policy__contact {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid #eee;
}

.tn-policy__contact a {
    color: var(--tn-theme-color);
    font-weight: 600;
}

/* ===== About Us — Mission / Vision / Founder blocks & Management team ===== */
.tn-about-block {
    padding: 32px 30px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.tn-about-block__icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 50%;
    background-color: var(--tn-theme-color);
    color: #fff;
    font-size: 24px;
}

.tn-about-block__title {
    margin-bottom: 14px;
    font-size: 24px;
    color: var(--tn-title-color);
}

.tn-team {
    padding: 36px 24px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tn-team:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.tn-team__icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(var(--tn-theme-color-rgb, 220, 38, 38), 0.1);
    color: var(--tn-theme-color);
    font-size: 34px;
}

.tn-team__name {
    margin-bottom: 6px;
    font-size: 20px;
    color: var(--tn-title-color);
}

.tn-team__role {
    color: var(--tn-theme-color);
    font-weight: 600;
}

/* ===== Service — route lists (Greenline Paribahan / Water Ways) ===== */
.tn-route-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tn-route-list li {
    position: relative;
    padding: 10px 0 10px 28px;
    border-bottom: 1px dashed #eee;
    color: var(--tn-title-color);
    font-weight: 500;
    break-inside: avoid;
}

.tn-route-list li:last-child {
    border-bottom: 0;
}

.tn-route-list li i {
    position: absolute;
    top: 15px;
    left: 0;
    font-size: 13px;
    color: var(--tn-theme-color);
}

/* The bus list is long — split it into two columns from tablet up. */
.tn-route-list--split {
    column-count: 2;
    column-gap: 34px;
}

@media (max-width: 767px) {
    .tn-route-list--split {
        column-count: 1;
    }
}

/* ===== Contact — Head Office / Call Center detail lines ===== */
.tn-contact-address {
    margin-bottom: 18px;
    color: var(--tn-title-color);
    font-weight: 500;
}

.tn-contact-lines {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tn-contact-lines li {
    display: flex;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
}

.tn-contact-lines li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.tn-contact-lines__label {
    flex: 0 0 58px;
    padding-top: 2px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tn-theme-color);
}

.tn-contact-lines__value {
    color: var(--tn-title-color);
    font-weight: 500;
}

.tn-contact-lines__value a {
    color: inherit;
    transition: color 0.3s ease;
}

.tn-contact-lines__value a:hover {
    color: var(--tn-theme-color);
}

@media (max-width: 400px) {
    .tn-contact-lines li {
        flex-direction: column;
        gap: 2px;
    }

    /* In a column the 58px basis becomes a height — let the label size to its text. */
    .tn-contact-lines__label {
        flex: none;
    }
}

/* ===== Album — photo grid with lightbox ===== */
.tn-album__item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 12px;
}

.tn-album__item img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Panorama shots keep their letterbox shape instead of being cropped. */
.tn-album__item--wide img {
    aspect-ratio: 3 / 1;
}

.tn-album__item::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.tn-album__item:hover img {
    transform: scale(1.06);
}

.tn-album__item:hover::after {
    opacity: 1;
}

.tn-album__icon {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 54px;
    height: 54px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--tn-theme-color);
    color: #fff;
    font-size: 18px;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.tn-album__item:hover .tn-album__icon {
    opacity: 1;
    transform: scale(1);
}

/* ====================================================== */
/* ============ Per-seat fares (discounts) ============== */
/* The operator prices every seat on its own, so three     */
/* places now show a list price struck through next to     */
/* what is actually charged: the trip card, the seat        */
/* selection summary, and the booking form's sidebar.       */
/* ====================================================== */

/* Trip card price (search results) */
.trip-fare__was {
    display: inline-block;
    margin-right: 4px;
    color: #98a2b3;
    font-size: .72em;
    font-weight: 400;
    text-decoration-thickness: 1px;
}

/* Selected-seat summary row (seat view) */
.seat-design .sbdt .cspf__was {
    display: inline-block;
    margin-right: 4px;
    color: #98a2b3;
    font-size: .85em;
    text-decoration-thickness: 1px;
}

/* Booking form sidebar: one line per seat */
.booking-detail-sidebar .widget__summary .seat-fare-line {
    color: #667085;
    font-size: 13px;
}

.booking-detail-sidebar .widget__summary .seat-fare-line span {
    color: #344054;
}

.seat-fare-line__was {
    margin-right: 4px;
    color: #98a2b3;
    font-size: .85em;
    font-weight: 400;
    text-decoration-thickness: 1px;
}

/* ------------------------------------------------------------------
   Home: Popular Bus Routes (frontend/sections/popular-routes)
   ------------------------------------------------------------------ */
.tn-routes {
    background-color: #ffffff;
}

.tn-routes__head .tn-title__main {
    margin: 0;
}

.tn-route-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 18px 20px;
    background-color: #ffffff;
    border: 1px solid rgba(var(--tn-title-color-rgb), 0.1);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(var(--tn-title-color-rgb), 0.04);
    color: var(--tn-title-color);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* dashed "road" behind the bus icon */
.tn-route-card::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 50%;
    border-left: 1px dashed rgba(var(--tn-title-color-rgb), 0.15);
}

.tn-route-card:hover,
.tn-route-card:focus-visible {
    border-color: var(--gl-primary);
    box-shadow: 0 8px 20px rgba(var(--tn-theme-color-rgb), 0.15);
    transform: translateY(-2px);
    color: var(--tn-title-color);
}

.tn-route-card:focus-visible {
    outline: 2px solid var(--gl-primary);
    outline-offset: 2px;
}

.tn-route-card__city {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tn-route-card__city--to {
    text-align: right;
}

.tn-route-card__city strong {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .3px;
}

.tn-route-card__city small {
    margin-top: 4px;
    font-size: 12px;
    color: var(--tn-body-color);
    text-transform: uppercase;
    letter-spacing: .4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tn-route-card__icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--gl-primary-soft);
    color: var(--gl-primary);
    font-size: 15px;
    transition: background-color .2s ease, color .2s ease;
}

.tn-route-card:hover .tn-route-card__icon,
.tn-route-card:focus-visible .tn-route-card__icon {
    background-color: var(--gl-primary);
    color: var(--gl-on-primary);
}

/* ------------------------------------------------------------------
   Search results sidebar: Boarding Point filter (trips_sidebar)
   ------------------------------------------------------------------ */
.tn-flight__sidebar .point-filter {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 320px;
    overflow-y: auto;
}

.tn-flight__sidebar .point-filter__item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 7px 10px;
    border-radius: 6px;
    font-family: var(--tn-title-font);
    font-size: 15px;
    color: var(--tn-body-color);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.tn-flight__sidebar .point-filter__item:hover {
    background-color: var(--gl-primary-soft);
    color: var(--tn-theme-color);
}

.tn-flight__sidebar .point-filter__item input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--gl-primary);
    cursor: pointer;
}

.tn-flight__sidebar .point-filter__item:has(input:checked) {
    color: var(--tn-theme-color);
    font-weight: 600;
}