html{
    --scrollbarBG: #CFD8DC;
    --thumbBG: #052475;
    scroll-behavior: smooth;
}


.hide-loaders{
    display:none !important;
}

.hide-element{
    display:none !important;
}

.hide-routes{
    display:none !important;
}

.disable-elements{
    pointer-events: none;
}

.label-error {
    height: 10px;
    margin-top: 4px;
    font-size: 10px;
    color: #DC3545;
}
.error {
    border: 1px solid #DC3545 !important;
}

.dropdown.bootstrap-select{
    padding: 0px 0px 3px 30px !important;
}

.dropdown-menu .inner{
    display:block !important;
}

.dropdown-menu .inner {
    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

.dropdown-menu .inner::-webkit-scrollbar {
    width: 10px;
}

.dropdown-menu .inner::-webkit-scrollbar-track {
    background: var(--scrollbarBG);
}
.dropdown-menu .inner::-webkit-scrollbar-thumb {
    background-color: var(--thumbBG) ;
    border-radius: 6px;
    border: 3px solid var(--scrollbarBG);
}

.dropdown-item.active, .dropdown-item:active{
    background-color: #052475;
}

.dropdown-menu.inner li{
    width:100% !important;
}

/* index */
.hero-wrp .hero-block{
    z-index:122;
}

.hero-wrp .hero-block .hero-frm .date-info ul li:nth-child(1){
    width:40%;
}
.hero-wrp .hero-block .hero-frm .date-info ul li{
    width:20%;
}


.loader-container-ports {
    position: absolute;
    left: 50%;
    top: 25%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    border-top: 4px solid #052475;
    border-right: 4px solid transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}
.loader-container-ports::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border-left: 4px solid #FF3D00;
    border-bottom: 4px solid transparent;
    animation: rotation 0.5s linear infinite reverse;
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


.pleasewait-loading{
    height: 150px;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: inline-block;
    /* adding gradients */
    -webkit-mask: linear-gradient(120deg, #000 25%, #0005, #000 75%) right/250% 100%;
    /* shimmer effect animation */
    animation: shimmer 1s infinite;
    background-repeat: no-repeat;
}
@keyframes shimmer {
    100% {
        /* setting up mask position at left side */
        -webkit-mask-position: left
    }
}


.piraeus-wrp .souvala-block .souvala-box .box-body .time-box ul li.same-day:last-child:before{
    background-image:none;
}

.piraeus-wrp .souvala-block .souvala-box .box-body .facilities-box ul li a span{
    /*width: 77px;*/
}

.piraeus-wrp .souvala-block .souvala-box .box-body .ferries-box img{
    border-radius:15px;
    max-height: 64px;
}

.faq-block .accordion .accordion-item .accordion-button img{
    border-radius: 15px;
    max-height: 64px;
}

.piraeus-wrp .souvala-block .expired-box{
    pointer-events:none;
}

.piraeus-wrp .souvala-block .souvala-box .box-body .facilities-box ul li a span.cabin-span {
    background-image:url("../../../assets/images/tooltip-bg-up-arrow.png");
    top:30px;
    padding:7px 0 0;
}
.piraeus-wrp .souvala-block .souvala-box .box-body .facilities-box ul li a span.enough-cabin-span{
    background-image:url("../../../assets/images/tooltip-bg-green-up-arrow..png");
}

.piraeus-wrp .souvala-block .souvala-box .box-body .facilities-box ul li a span.enough-span{
    background-image:url("../../../assets/images/tooltip-bg-green.png");
}

.route-types{
    text-align:center;
    padding:10px 0;
    background-color: #f9f9f9 !important;
    background-clip: padding-box;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 4px;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.175);
    color: #353e44;
    width: 100%;
    margin: 0;
}

.faq-block{
    display:none;
}

/* itineraries */
.pricing-itineraries-seats {
    border-collapse: collapse;
    width: 100%;
}
.pricing-itineraries-seats td, .pricing-itineraries-seats th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

.pricing-itineraries-seats tr:nth-child(even) {
    background-color: #dddddd;
}

.pricing-itineraries-seats-div{
    max-height: 200px;
    overflow: scroll;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.myBirthDate{
    width:100%;
}
@media only screen and (min-width: 768px) {
    .myBirthDate select{
        width:32.5%;
    }
}

@media only screen and (min-width: 1200px) {
    .myBirthDate select{
        width:32%;
    }
    .tickets-wrp .ticket-block ul .form-group-width4{
        min-width: 260px;
    }
}

.highlight {
    background-color: yellow;
    font-weight: bold;
}

.highlight-error {
    background-color: #ffeaea;
    transition: background-color 0.6s ease;
}

.calander-box .daterangepicker.single{
    width: 100% !important;
}

.calander-box .drp-calendar.single{
    display:inline !important;
}

.calander-block .info-txt{
    display:none;
}

.inner-banner .banner-block ul li input{
    width:194px;
}

.vehicles-ticket-block ul div {
    padding: 0 0 15px;
}

.enhanced-title {
    background-color: #f4f8ff;
    border-left: 5px solid #007bff;
    padding: 12px 15px;
    margin: 30px 0 20px;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.enhanced-title h6 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.enhanced-breadcrumbs {
    padding: 15px 20px;
    background-color: #f5f9ff;
    border-radius: 8px;
    border: 1px solid #e0e6ed;
    margin-bottom: 30px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.route-info {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: #2c3e50;
}

.route-info li i {
    color: #d69e08;
    margin-right: 5px;
}

.arrow-icon {
    width: 18px;
    height: auto;
    opacity: 0.7;
}

.departure-time {
    font-size: 16px;
    color: #2c3e50;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.departure-time i {
    color: #d69e08;
}

.latin-uppercase {
    text-transform: uppercase;
}

/* calculate page error handling */

/* error visuals */
.form-control.has-error { border-color:#ef4444 !important; box-shadow:0 0 0 .2rem rgba(239,68,68,.15) !important; }
.form-group.has-error > label { color:#ef4444; }

/* bubble */
/* base bubble styles */
.error-bubble{
    position:absolute;
    z-index:10000;
    background:#111827;
    color:#fff;
    font-size:13px;
    line-height:1.4;
    padding:10px 12px;
    border-radius:12px;
    box-shadow:0 12px 30px rgba(17,24,39,.25);
    max-width:280px;
    text-align:left;
    word-wrap:break-word;

    opacity:0;
    transform: translateY(6px) scale(.98);
    transition: opacity .18s ease-out, transform .18s ease-out;
    transform-origin: bottom center;
}

/* arrow anchored at bottom-center */
.error-bubble .error-arrow{
    position:absolute;
    bottom:-8px; /* place below bubble */
    left:50%;
    transform:translateX(-50%);
    width:0;
    height:0;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-top:8px solid #111827;
}

.error-bubble.is-in{
    opacity:1;
    transform: translateY(0) scale(1);
}


/* accessibility: disable motion if user requests reduced motion */
@media (prefers-reduced-motion: reduce){
    .error-bubble{ transition:none; transform:none; }
}

.error-wrap{ position:relative; }

/* inline spinner on the right */
.btn-loading {
    position: relative;
    pointer-events: none;          /* no double-clicks */
    opacity: .9;
}
.btn-loading::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btnspin .6s linear infinite;
}
@keyframes btnspin { to { transform: translateY(-50%) rotate(360deg); } }

/* optional: visually disable anchor buttons */
a.btn-main.disabled,
a.btn-main[aria-disabled="true"] {
    pointer-events: none;
    opacity: .6;
}


.departure-time-breakdown{
    justify-content: flex-start;
}

.inner-footer .availability-block{
    box-shadow:none;
    border-top:none;
}

/* pill badge that sits near the label */
.auto-fix-note {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1.4;
    color: #1d4ed8;                /* blue-700 */
    background: #eef2ff;           /* indigo-50 */
    border: 1px solid #c7d2fe;     /* indigo-200 */
    border-radius: 9999px;         /* pill */
    box-shadow: 0 2px 6px rgba(29,78,216,.12);
    opacity: 0; transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease;
}
.auto-fix-note.show {
    opacity: 1; transform: translateY(0);
}

#calculate-submit-btn.is-disabled {
    opacity: .6;
    pointer-events: none; /* double safety along with disabled */
}

/* fix for the radio in itineraries */
/* default fake radio */
.piraeus-wrp .souvala-block .souvala-box .box-body::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translate(0, -50%);
    height: 16px;
    width: 16px;
    border: 1px solid #2C7B42;
    border-radius: 100%;
    background: #fff; /* unselected is white */
}

/* when selected (from JS), simulate checked */
.piraeus-wrp .souvala-block .souvala-box.selected .box-body::before {
    background: #2C7B42;
    box-shadow: inset 0 0 0 3px #fff; /* small white dot */
}

.price-txt .per-person{
    font-weight:normal;
    font-size:0.775em;
    color: rgba(0, 0, 0, 0.6);
}

@media (max-width: 576px) {
    .price-txt .per-person {
        display: block;   /* forces wrap to new line */
        margin-top: 2px;  /* optional spacing */
    }
}

.piraeus-block .instruction {
    position: relative;
}

/* Desktop/tablet: keep it absolutely centered */
@media (min-width: 768px) {
    .piraeus-block .instruction .left-texts .trip-date {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
        font-weight: 700 !important;
        z-index: 1;
    }
}

/* Mobile: let it flow, centered, with spacing */
@media (max-width: 767.98px) {
    .piraeus-block .instruction .left-texts .trip-date {
        position: static;
        transform: none;
        display: block;
        text-align: center;
        margin: 6px 0 8px;
        white-space: normal;
        font-weight:600 !important;
    }
}

.piraeus-block .instruction .left-texts{
    font-weight: 600 !important;
}

.piraeus-block .instruction .right-texts{
    font-weight: 600 !important;
}


/* container */
.pricing-itineraries-seats-div{
    max-height: 220px;            /* scroll when long */
    overflow: auto;
    border-radius: 8px;
    border: 1px solid #e6e8eb;
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
}

/* table basics */
.pricing-itineraries-seats{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

.pricing-itineraries-seats thead th{
    position: sticky; top: 0;
    background: #f6f7f9;
    color: #374151;
    text-align: left;
    font-weight: 600;
    padding: 10px 12px;
    border-bottom: 1px solid #e6e8eb;
    z-index: 1;
}
.pricing-itineraries-seats thead .th-status{ width: 170px; }

.pricing-itineraries-seats tbody td{
    padding: 10px 12px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f2f5;
}

.pricing-itineraries-seats .price{
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color:#000;
}

/* code chip before description */
.pricing-itineraries-seats .code{
    display: inline-block;
    font-weight: 700;
    padding: 2px 6px;
    margin-right: 6px;
    border-radius: 6px;
    background: #eef2ff;
    color: #000000;
    font-size: 12px;
}

/* status badge */
.pricing-itineraries-seats .badge{
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
}

/* row states */
.pricing-itineraries-seats tbody tr.is-available{
    background: #f4f6f9;          /* green */
    color: #fff;
}
.pricing-itineraries-seats tbody tr.is-available .badge{ background:#0c6f15; }

.pricing-itineraries-seats tbody tr.is-limited{
    background: #f4f6f9;          /* amber */
    color: #111827;
}
.pricing-itineraries-seats tbody tr.is-limited .badge{ background:#b45309; color:#fff; }

.pricing-itineraries-seats tbody tr.is-none{
    background: #e5e7eb;          /* gray */
    color: #6b7280;
}
.pricing-itineraries-seats tbody tr.is-none .badge{ background:#9ca3af; }

/* rounded corners */
.pricing-itineraries-seats thead th:first-child{ border-top-left-radius: 8px; }
.pricing-itineraries-seats thead th:last-child{ border-top-right-radius: 8px; }
.pricing-itineraries-seats tbody tr:last-child td:first-child{ border-bottom-left-radius: 8px; }
.pricing-itineraries-seats tbody tr:last-child td:last-child{ border-bottom-right-radius: 8px; }

/* hover (only for rows that are available or limited) */
.pricing-itineraries-seats tbody tr.is-available:hover{
    filter: brightness(0.95);
}
.pricing-itineraries-seats tbody tr.is-limited:hover{
    filter: brightness(0.97);
}

/* mobile: stack to “cards” feel */
@media (max-width: 640px){
    .pricing-itineraries-seats thead{ display:none; }
    .pricing-itineraries-seats,
    .pricing-itineraries-seats tbody,
    .pricing-itineraries-seats tr,
    .pricing-itineraries-seats td{
        display:block; width:100%;
    }
    .pricing-itineraries-seats tbody tr{
        margin: 8px 8px;
        border-radius: 10px;
        overflow: hidden;
    }
    .pricing-itineraries-seats tbody td{
        border-bottom: none;
    }
    .pricing-itineraries-seats .price{
        margin-top: 6px;
        text-align: left;
        font-size: 16px;
        font-weight: 700;
    }
    .pricing-itineraries-seats .status{
        margin: 8px 0 4px;
    }
}


.custom-summary-card {
    border: 1px solid #ddd;
    background: #fdfdfd;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.summary-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.summary-logo {
    width: 50px;
    height: auto;
    margin-right: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.summary-info {
    line-height: 1.2;
}

.custom-summary-card p {
    margin: 6px 0;
    color: #444;
}

.custom-summary-card i {
    color: #00498F;
    margin-right: 6px;
}


.summary-flex {
    display: flex;
    gap: 20px;
    flex-wrap: wrap; /* allows stacking on smaller screens */
    justify-content: space-between;
}

.summary-column {
    flex: 1;
    min-width: 300px; /* adjusts for responsiveness */
}

#selected-summary {
    max-width: 1000px;
    margin: 20px auto;
}

/* chips */
.chips { display:flex; flex-wrap:wrap; gap:6px; margin:.35rem 0 .5rem; }
.chip {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 10px; border-radius:999px; font-size:14px; line-height:1;
    background:#f2f4f7; color:#111; border:1px solid #e5e7eb;
}
.chip i { font-size:12px; opacity:.75; }
.chip--dep   { background:#e9f2ff; border-color:#d6e7ff; color:#0d47a1; }
.chip--arr   { background:#eafaf0; border-color:#d6f5e1; color:#0b5d2a; }
.chip--time  { background:#f8f9fb; }
.chip--price { background:#fff3d6; border-color:#ffe6a8; color:#8a5a00; font-weight:600; }

.summary-header { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.summary-logo   { width:28px; height:28px; object-fit:contain; }
.summary-info   { line-height:1.2; }
.custom-summary-card p { margin:0; }

/* mobile calendar snippet */
/* Base sidebar hidden by default */
@media (max-width: 767px) {
    .calander-sidebar {

        position: fixed;
        top: 0;
        left: -100%;
        bottom: 0;
        height: 100%;
        width: 100%;
        background-color: #fff;
        z-index: 122;
        padding: 15px 20px;
        overflow: auto;
        -webkit-transition: all 0.3s linear;
        transition: all 0.3s linear;

    }
    .daterangepicker.single .ranges, .daterangepicker.single .drp-calendar{
        float:none !important;
    }

    /* When active (opened) */
    .calander-sidebar.show-sidebar {
        transform: translateY(0);      /* slide up */
    }

    /* Header */
    .calander-sidebar .sidebar-block {
        padding: 14px 16px;
        border-bottom: 1px solid #eee;
        display:flex; align-items:center; justify-content:space-between;
    }
    .calander-sidebar h2 {font-size: 16px; font-weight: 700; margin: 0;}
    .calander-sidebar .close-sidebar img{width:22px;height:22px}
    .calander-sidebar .close-sidebar{padding:6px;}

    /* Content scroll area */
    .calander-block{
        height: calc(80vh - 56px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 12px 16px;
    }

/* Tabs, calendars, legend, buttons — same as before */
/* Mobile polish for the inline daterangepicker inside the sheet */

    /* Make the picker fill the sheet and sit inline */
    .calander-sidebar .daterangepicker {
        position: static !important;
        inset: auto !important;        /* ignore left/top from plugin */
        width: 100%;
        max-width: 100%;
        margin-top: 8px;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        box-shadow: none;
    }

    /* Header + month title */
    .daterangepicker .calendar-table .month {
        font-weight: 700;
        font-size: 16px;
        text-align: center;
    }
    .daterangepicker .prev span,
    .daterangepicker .next span {
        display: inline-block;
        width: 20px; height: 20px;
        line-height: 20px;
        border-radius: 6px;
        text-align: center;
    }

    /* Week row + cells spacing */
    .daterangepicker .calendar-table th,
    .daterangepicker .calendar-table td {
        padding: 5px 5px;             /* bigger tap targets */
        font-size: 14px;
    }

    /* Hover/active styling */
    .daterangepicker td.available:hover {
        background: #f6f8fb;
        border-radius: 8px;
    }
    .daterangepicker td.active,
    .daterangepicker td.active:hover,
    .daterangepicker td.in-range {
        background: #0d6efd;
        color: #fff !important;
        border-radius: 8px;
    }

    /* Hide plugin buttons; use your bottom buttons instead */
    .daterangepicker .drp-buttons,
    .daterangepicker .drp-selected {
        display: none !important;
    }

    /* Tighten empty right calendar (single mode sometimes renders both) */
    .daterangepicker .drp-calendar.right {
        display: none !important;
    }

    /* Keep your sheet content comfy */
    .calander-block { padding-bottom: 16px; }

}

/* mobile calendar snipper */

.trip-list {
    display:flex;
    align-items:center;
    gap:8px;
    list-style:none;
    padding:0;
    margin:0;
    flex-wrap:wrap; /* wrap nicely on small screens */
}
.trip-list li {
    font-size:14px;
}

/* Base chip */
.chip--header {
    display:inline-block;
    padding:4px 10px;
    border-radius:999px;
    font-weight:600;
    font-size:16px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    white-space:nowrap;
}

/* Departure chip */
.chip--dep {
    background:#e9f2ff;
    color:#0d47a1;
    border:1px solid #d6e7ff;
}

/* Arrival chip */
.chip--arr {
    background:#eafaf0;
    color:#0b5d2a;
    border:1px solid #d6f5e1;
}

/* Port chip */
.chip--port {
    background:#f8f9fb;
    color:#333;
    border:1px solid #e1e4e8;
    font-weight:500;
    text-transform:none; /* ports look nicer normal case */
}

/* Arrow chip */
.chip--arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* center horizontally */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f0f0f0;
    border: 1px solid #ddd;
    padding: 0;
}

.chip--arrow img {
    display: block;
    width: 18px;     /* control icon size here */
    height: 18px;    /* keep it square, or set one dimension and let the other auto */
    object-fit: contain;
}
@media (max-width: 420px) {
    .trip-list { row-gap: 8px; }
}

/* Port name truncation on tiny screens */
.chip--port {
    max-width: 220px;            /* adjust as you like */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Base list layout */
.trip-list {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;              /* allow wrapping on small screens */
}

/* Base chip */
.chip--header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: .3px;
    white-space: nowrap;
    line-height: 1;
    border: 1px solid #e1e4e8;
}

/* Variants */
.chip--dep   { background:#e9f2ff; color:#0d47a1; border-color:#d6e7ff; text-transform:uppercase; }
.chip--arr   { background:#eafaf0; color:#0b5d2a; border-color:#d6f5e1; text-transform:uppercase; }
.chip--port  { background:#f8f9fb; color:#333;     border-color:#e1e4e8; font-weight:500; text-transform:none; }
.chip--arrow {
    width: 32px; height: 32px; padding: 0;
    border-radius: 50%;
    background:#f0f0f0; border-color:#ddd;
}
.chip--arrow img { display:block; width:18px; height:18px; object-fit:contain; }

/* Port name truncation on tiny screens */
.chip--port {
    max-width: 220px;            /* adjust as you like */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Breakpoints ===== */

/* Small phones: tighten spacing & sizes */
@media (max-width: 420px) {
    .trip-list { gap: 6px; }
    .chip { padding: 5px 8px; font-size: 11px; }
    .chip--arrow { width: 28px; height: 28px; }
    .chip--arrow img { width: 16px; height: 16px; }
    .chip--port { max-width: 160px; }
}

/* Very small screens: allow ports to take whole line if needed */
@media (max-width: 340px) {
    .trip-list { gap: 6px; }
    .chip--port { max-width: 100%; }
}

/* Tablets and up: a bit more breathing room */
@media (min-width: 576px) {
    .trip-list { gap: 10px; }
    .chip { font-size: 13px; padding: 7px 12px; }
    .chip--arrow { width: 34px; height: 34px; }
    .chip--arrow img { width: 18px; height: 18px; }
}


.inner-footer .availability-block ul li span, .inner-footer .availability-block ul li{
    font-size:16px;
}


.guide-highlight {
    position: relative;
    z-index: 9999;
    outline: 3px solid #ffc107;
    box-shadow: 0 0 15px rgba(255,193,7,0.7);
    border-radius: 4px;
}

.guide-tooltip {
    position: absolute;
    background: #fff8dc;
    border: 1px solid #ffc107;
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    z-index: 10000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    max-width: 280px;
}

.guide-tooltip::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

.guide-tooltip-arrow-top::after {
    top: -10px;
    left: 20px;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #ffc107 transparent;
}

.guide-tooltip-arrow-bottom::after {
    bottom: -10px;
    left: 20px;
    border-width: 10px 10px 0 10px;
    border-color: #ffc107 transparent transparent transparent;
}

.resultBox{
    background-color:#fcfafa;
}

/* membership */
.tickets-wrp .ticket-block ul .form-group.checkbox-switch input:checked + label {
    background: #052475;
    border-color: #052475;
    top:-16px;
}
.tickets-wrp .ticket-block ul .form-group.checkbox-switch input + label{
    top:-30px;
    left:0;
}

/* membership */
/*Hide membership input when NOT checked */
.tickets-wrp .ticket-block ul li:has(.checkbox-switch input[type="checkbox"]:not(:checked)) .membership-input {
    display: none;
}

/* Show membership input when checked */
.tickets-wrp .ticket-block ul li:has(.checkbox-switch input[type="checkbox"]:checked) .membership-input {
    display: block;
}

/* Limit input width (adjust as needed) */
.tickets-wrp .ticket-block ul .membership-input input {
    max-width: 300px; /* or 100% for full width */
}

/* If you want switch + input aligned inline */
.membership-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.membership-input {
    flex: 1;
}

/* Hide the "Add Membership Card" text when checked */

.tickets-wrp .ticket-block ul li:has(.checkbox-switch input[type="checkbox"]:checked) .switch-label {
    display: none;
}

/* Make the button look like an icon inside input */
.input-group .btn-validate-loyalty {
    border: none;
    background: transparent;
    color: #666;
    font-size: 1rem;
    margin-left: -35px; /* overlap inside the input */
    margin-top: -7px;
    z-index: 5;
}

.input-group .btn-validate-loyalty:hover {
    color: #000;
    background: transparent;
    box-shadow: none;
}



.checkbox-switch .switch-text {
    font-weight: 500;
    color: #333;
    line-height: 1.2;
    top: -23px;
    position: absolute;
    left: 60px;
    width: 330px;
}
.switch-text {
    transition: opacity 0.3s ease;
}

.checkbox-switch input[type="checkbox"]:checked ~ .switch-text {
    opacity: 0;
    visibility: hidden;
}



/* membership */

/* man */
/* MAN Number */
/* Switch active state */
.tickets-wrp .ticket-block ul .form-group.checkbox-switch input:checked + label {
    background: #052475;
    border-color: #052475;
    top:-16px;
}
.tickets-wrp .ticket-block ul .form-group.checkbox-switch input + label {
    top:-30px;
    left:0;
}

/* Hide MAN input when NOT checked */
.tickets-wrp .ticket-block ul li:has(.checkbox-switch input[type="checkbox"]:not(:checked)) .man-input {
    display: none;
}

/* Show MAN input when checked */
.tickets-wrp .ticket-block ul li:has(.checkbox-switch input[type="checkbox"]:checked) .man-input {
    display: block;
}

/* Limit input width */
.tickets-wrp .ticket-block ul .man-input input {
    max-width: 300px; /* or 100% if you want full width */
}

/* Flex wrapper if needed */
.man-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.man-input {
    flex: 1;
}

/* Hide "Add MAN Number" text when checked */
.tickets-wrp .ticket-block ul li:has(.checkbox-switch input[type="checkbox"]:checked) .switch-label-man {
    display: none;
}

/* Icon button inside MAN input */
.input-group .btn-validate-man {
    border: none;
    background: transparent;
    color: #666;
    font-size: 1rem;
    margin-left: -35px; /* overlap inside the input */
    margin-top: -7px;
    z-index: 5;
}

.input-group .btn-validate-man:hover {
    color: #000;
    background: transparent;
    box-shadow: none;
}
/* MAN Number */

/* man */


.flash-success {
    box-shadow: 0 0 8px 2px rgba(40, 167, 69, 0.7) !important; /* green glow */
    transition: box-shadow 0.3s ease-in-out;
}
.ellipsis {
    display: inline-block;     /* needed for width to take effect */
    max-width: 300px;          /* set a fixed or max width */
    white-space: nowrap;       /* prevent line break */
    overflow: hidden;          /* hide overflowing text */
    text-overflow: ellipsis;   /* show ellipsis (…) */
    vertical-align: middle;    /* optional alignment */
}

.booking-wrp .booking-block .form-group.width16{
    width:350px;
}

/* prices breakdown */
.seg-table { border: 1px solid #eee; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.05); }
.seg-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 14px 16px; align-items: center; }
.seg-row + .seg-row { border-top: 1px solid #f2f2f2; }
.seg-head { background: #052475; font-weight: 600; display:none;}
.seg-meta { display: flex; align-items: center; gap: 12px; }
.seg-meta-chip { display: flex; align-items: center; gap: 12px; padding:6px 10px; border:1px solid #e5e7eb; border-radius: 9999px; background:#fff;}
.seg-logo { width: 36px; height: 36px; border-radius: 8px; object-fit: contain; background: #fff; border: 1px solid #eee; }
.seg-dir { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
.seg-company { font-weight: 600; }
.seg-breakdown { display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-end;}
.seg-chip { display:flex; align-items:center; gap:12px; padding:6px 10px; border:1px solid #e5e7eb; border-radius: 9999px; background:#fff; }
.seg-chip img { width:16px; height:16px; }
.seg-amt { font-weight:600; }
.seg-total { font-weight: 700; font-size: 16px;}
.seg-total-footer{font-weight: 700; font-size: 16px; color:#ffffff;}
.seg-footer { background:#052475; }
.seg-grand { display:flex; align-items:center; gap:10px; font-weight:700; }
.seg-muted { color:#6b7280; }
.seg-n-muted { color:#ffffff; }

@media (max-width: 768px) {
    .seg-row {
        grid-template-columns: 1fr; /* stack */
    }
    .seg-breakdown {
        justify-content: flex-start;
        margin-top: 12px;
    }
}

@media (max-width: 480px) {
    .seg-breakdown {
        flex-direction: column;
        gap: 8px;
    }
    .seg-chip {
        width: 100%;
        justify-content: space-between;
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 10px 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,.05);
    }
    .seg-chip .seg-muted {
        font-size: 14px;
        color: #374151;
    }
    .seg-chip .seg-amt {
        font-weight: 600;
        color: #111827;
    }

    /* Special style for the TOTAL chip */
    .seg-chip.total-chip {
        background: #052475;
        border: none;
        color: #fff;
        font-weight: 700;
    }
    .seg-chip.total-chip .seg-muted {
        color: #e5e7eb;
        font-size: 14px;
    }
    .seg-chip.total-chip .seg-total {
        color: #fff;
        font-size: 16px;
        font-weight: 700;
    }
}

.boarding-radio li{
    color: #1c1b1f;
    padding: 16px;
    box-shadow: none;
    outline: none;
    border: 1px solid #79747e;
    border-radius: 4px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
/* prices breakdown */

/*checkout form changed to forma*/

.personal-information-wrp forma {
    margin: 0 0 20px;
    padding: 0 20px;
}
.personal-information-wrp forma .form-group {
    position: relative;
    margin: 0;
}
.personal-information-wrp forma .form-group .form-control {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #1c1b1f;
    padding: 16px;
    box-shadow: none;
    outline: none;
    border: 1px solid #79747e;
    border-radius: 4px;
}
.personal-information-wrp forma .form-group label {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.4px;
    color: #49454f;
    background: #fff;
    position: absolute;
    left: 12px;
    top: -7px;
    white-space: nowrap;
    z-index: 9;
    padding: 0 4px;
}
.personal-information-wrp forma ul {
    display: flex;
    align-items: center;
}
@media (max-width: 991.98px) {
    .personal-information-wrp forma ul {
        margin: 0 -15px;
        flex-wrap: wrap;
    }
}
@media (max-width: 767.98px) {
    .personal-information-wrp forma ul {
        display: block;
        margin: 0;
    }
}
.personal-information-wrp forma ul li {
    margin-right: 20px;
}
@media (max-width: 1199.98px) {
    .personal-information-wrp forma ul li {
        padding: 0 15px;
        width: 50%;
        margin: 0 0 20px;
    }
}
@media (max-width: 991.98px) {
    .personal-information-wrp forma ul li {
        padding: 0 15px;
        width: 50%;
        margin: 0 0 20px;
    }
}
@media (max-width: 767.98px) {
    .personal-information-wrp forma ul li {
        margin: 0 0 20px;
        width: 100%;
        padding: 0;
    }
}
.personal-information-wrp forma ul .form-group1 {
    max-width: 134px;
    min-width: 134px;
}
@media (max-width: 1399.98px) {
    .personal-information-wrp forma ul .form-group1 {
        min-width: 120px;
        max-width: 120px;
    }
}
@media (max-width: 1199.98px) {
    .personal-information-wrp forma ul .form-group1 {
        width: 100%;
        min-width: 100%;
    }
}
@media (max-width: 575.98px) {
    .personal-information-wrp forma ul .form-group1 {
        width: 100%;
        min-width: 100%;
    }
}
.personal-information-wrp forma ul .form-group2 {
    max-width: 210px;
    min-width: 210px;
}
@media (max-width: 1399.98px) {
    .personal-information-wrp forma ul .form-group2 {
        min-width: 160px;
        max-width: 160px;
    }
}
@media (max-width: 1199.98px) {
    .personal-information-wrp forma ul .form-group2 {
        width: 100%;
        min-width: 100%;
    }
}
@media (max-width: 575.98px) {
    .personal-information-wrp forma ul .form-group2 {
        width: 100%;
        min-width: 100%;
    }
}
.personal-information-wrp forma ul .form-group3 {
    max-width: 210px;
    min-width: 210px;
}
@media (max-width: 1399.98px) {
    .personal-information-wrp forma ul .form-group3 {
        min-width: 160px;
        max-width: 160px;
    }
}
@media (max-width: 1199.98px) {
    .personal-information-wrp forma ul .form-group3 {
        width: 100%;
        min-width: 100%;
    }
}
@media (max-width: 575.98px) {
    .personal-information-wrp forma ul .form-group3 {
        width: 100%;
        min-width: 100%;
    }
}
.personal-information-wrp forma ul .form-group4 {
    max-width: 210px;
    min-width: 210px;
}
@media (max-width: 1399.98px) {
    .personal-information-wrp forma ul .form-group4 {
        min-width: 160px;
        max-width: 160px;
    }
}
@media (max-width: 1199.98px) {
    .personal-information-wrp forma ul .form-group4 {
        width: 100%;
        min-width: 100%;
    }
}
@media (max-width: 575.98px) {
    .personal-information-wrp forma ul .form-group4 {
        width: 100%;
        min-width: 100%;
    }
}
.personal-information-wrp forma ul .form-group5 {
    max-width: 125px;
    min-width: 125px;
}
@media (max-width: 1399.98px) {
    .personal-information-wrp forma ul .form-group5 {
        min-width: 100px;
        max-width: 100px;
    }
}
@media (max-width: 1199.98px) {
    .personal-information-wrp forma ul .form-group5 {
        width: 100%;
        min-width: 100%;
    }
}
@media (max-width: 575.98px) {
    .personal-information-wrp forma ul .form-group5 {
        width: 100%;
        min-width: 100%;
    }
}
.personal-information-wrp forma ul .form-group6 {
    max-width: 210px;
    min-width: 210px;
}
@media (max-width: 1399.98px) {
    .personal-information-wrp forma ul .form-group6 {
        min-width: 150px;
        max-width: 150px;
    }
}
@media (max-width: 1199.98px) {
    .personal-information-wrp forma ul .form-group6 {
        width: 100%;
        min-width: 100%;
    }
}
@media (max-width: 575.98px) {
    .personal-information-wrp forma ul .form-group6 {
        width: 100%;
        min-width: 100%;
    }
}
.personal-information-wrp forma ul .form-group7 {
    max-width: 595px;
    min-width: 595px;
}
@media (max-width: 1399.98px) {
    .personal-information-wrp forma ul .form-group7 {
        min-width: 400px;
        max-width: 400px;
    }
}
@media (max-width: 1199.98px) {
    .personal-information-wrp forma ul .form-group7 {
        width: 100%;
        min-width: 100%;
    }
}
@media (max-width: 575.98px) {
    .personal-information-wrp forma ul .form-group7 {
        width: 100%;
        min-width: 100%;
    }
}
.personal-information-wrp forma ul .form-group8 {
    max-width: 124px;
    min-width: 124px;
}
@media (max-width: 1399.98px) {
    .personal-information-wrp forma ul .form-group8 {
        min-width: 100px;
        max-width: 100px;
    }
}
@media (max-width: 1199.98px) {
    .personal-information-wrp forma ul .form-group8 {
        width: 100%;
        min-width: 100%;
    }
}
@media (max-width: 575.98px) {
    .personal-information-wrp forma ul .form-group8 {
        width: 100%;
        min-width: 100%;
    }
}
.personal-information-wrp forma ul .form-group9 {
    max-width: 210px;
    min-width: 210px;
}
@media (max-width: 1399.98px) {
    .personal-information-wrp forma ul .form-group9 {
        min-width: 150px;
        max-width: 150px;
    }
}
@media (max-width: 1199.98px) {
    .personal-information-wrp forma ul .form-group9 {
        width: 100%;
        min-width: 100%;
    }
}
@media (max-width: 575.98px) {
    .personal-information-wrp forma ul .form-group9 {
        width: 100%;
        min-width: 100%;
    }
}
.personal-information-wrp forma ul .form-group10 {
    max-width: 210px;
    min-width: 210px;
}
@media (max-width: 1399.98px) {
    .personal-information-wrp forma ul .form-group10 {
        min-width: 150px;
        max-width: 150px;
    }
}
@media (max-width: 1199.98px) {
    .personal-information-wrp forma ul .form-group10 {
        width: 100%;
        min-width: 100%;
    }
}
@media (max-width: 575.98px) {
    .personal-information-wrp forma ul .form-group10 {
        width: 100%;
        min-width: 100%;
    }
}
.personal-information-wrp forma ul.top-personal {
    margin: 0 0 20px;
}
@media (max-width: 1199.98px) {
    .personal-information-wrp forma ul.top-personal {
        flex-wrap: wrap;
    }
}
@media (max-width: 767.98px) {
    .personal-information-wrp forma ul.top-personal {
        flex-wrap: wrap;
        display: block;
    }
}
@media (max-width: 1199.98px) {
    .personal-information-wrp forma ul.top-personal li {
        width: 33.33%;
        margin: 0 0 20px;
    }
}
.personal-information-wrp forma .boarding-radio ul {
    justify-content: space-between;
    flex-wrap: wrap;
}
.personal-information-wrp forma .boarding-radio ul li {
    border: 1px solid rgba(5, 36, 117, 0.6);
    padding: 20px 40px 20px 20px;
}
@media (max-width: 1399.98px) {
    .personal-information-wrp forma .boarding-radio ul li {
        padding: 15px;
    }
}
@media (max-width: 1199.98px) {
    .personal-information-wrp forma .boarding-radio ul li {
        width: 100%;
    }
}
@media (max-width: 991.98px) {
    .personal-information-wrp forma .boarding-radio ul li {
        width: 100%;
    }
}
.personal-information-wrp forma .electronic-block {
    margin: 0 20px 40px;
    padding: 0 0 20px;
    border-bottom: 1px solid rgba(5, 36, 117, 0.6);
}
.personal-information-wrp forma .electronic-block h5, .personal-information-wrp forma .electronic-block .h5 {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #000000;
    margin: 20px 0 40px;
}
.personal-information-wrp forma .electronic-block ul {
    justify-content: space-between;
}
@media (max-width: 1199.98px) {
    .personal-information-wrp forma .electronic-block ul {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}
.personal-information-wrp forma .electronic-block ul li {
    margin: 0;
}
@media (max-width: 1199.98px) {
    .personal-information-wrp forma .electronic-block ul li {
        width: 33.33%;
        margin: 0 0 20px;
    }
}
@media (max-width: 991.98px) {
    .personal-information-wrp forma .electronic-block ul li {
        margin: 0 0 20px;
    }
}
.personal-information-wrp forma .electronic-block .electronic-form-group1 {
    max-width: 520px;
    min-width: 520px;
}
@media (max-width: 1399.98px) {
    .personal-information-wrp forma .electronic-block .electronic-form-group1 {
        min-width: 350px;
        max-width: 350px;
    }
}
@media (max-width: 1199.98px) {
    .personal-information-wrp forma .electronic-block .electronic-form-group1 {
        min-width: unset;
        width: 100%;
        max-width: 100%;
    }
}
.personal-information-wrp forma .electronic-block .electronic-form-group2 {
    max-width: 200px;
    min-width: 200px;
}
@media (max-width: 1399.98px) {
    .personal-information-wrp forma .electronic-block .electronic-form-group2 {
        min-width: 150px;
        max-width: 150px;
    }
}
@media (max-width: 1199.98px) {
    .personal-information-wrp forma .electronic-block .electronic-form-group2 {
        min-width: unset;
        width: 100%;
        max-width: 100%;
    }
}
.personal-information-wrp forma .electronic-block .electronic-form-group3 {
    max-width: 105px;
    min-width: 105px;
}
@media (max-width: 1399.98px) {
    .personal-information-wrp forma .electronic-block .electronic-form-group3 {
        min-width: 100px;
        max-width: 100px;
    }
}
@media (max-width: 1199.98px) {
    .personal-information-wrp forma .electronic-block .electronic-form-group3 {
        min-width: unset;
        width: 100%;
        max-width: 100%;
    }
}
.personal-information-wrp forma .electronic-block .electronic-form-group4 {
    max-width: 210px;
    min-width: 210px;
}
@media (max-width: 1399.98px) {
    .personal-information-wrp forma .electronic-block .electronic-form-group4 {
        min-width: 150px;
        max-width: 150px;
    }
}
@media (max-width: 1199.98px) {
    .personal-information-wrp forma .electronic-block .electronic-form-group4 {
        min-width: unset;
        width: 100%;
        max-width: 100%;
    }
}
.personal-information-wrp forma .electronic-block .electronic-form-group5 {
    max-width: 162px;
    min-width: 162px;
}
@media (max-width: 1399.98px) {
    .personal-information-wrp forma .electronic-block .electronic-form-group5 {
        min-width: 140px;
        max-width: 140px;
    }
}
@media (max-width: 1199.98px) {
    .personal-information-wrp forma .electronic-block .electronic-form-group5 {
        min-width: unset;
        width: 100%;
        max-width: 100%;
    }
}
.personal-information-wrp forma .electronic-block .textarea-form-group {
    margin: 20px 0 0;
}
.personal-information-wrp forma .electronic-block .textarea-form-group .form-control {
    resize: none;
}

@media only screen and (max-width: 768px) {
    .booking-wrp .booking-block ul li:last-child {
        display: block;
    }
}
@media (max-width: 991.98px) {
    .booking-wrp .booking-block ul li {
        width: 100%;
        padding: 0 10px;
        margin: 0 0 20px;
    }
    .booking-wrp .booking-block ul li:last-child {
        display: block;
    }
}
.booking-block3{
    display:inline-block !important;
}

@media (max-width: 768px) {
    .personal-information-wrp forma ul.top-personal li {
        width:100%;
    }
}

.booking-wrp{
    padding: 5px 0;
}
.booking-wrp .booking-block{
    margin: 0 0 10px;
}
/*checkout form changed to forma*/


/* email template */
@media only screen and (max-width:600px) {
    .stack-column {
        display:block !important;
        width:100% !important;
        padding-left:0 !important;
    }
    .stack-column img{
        width:90px;
    }
}
/* email template */

@media (max-width: 991.98px) {
    .inner-banner .banner-block ul li:last-child {
        margin: 0 14px 20px;
    }
}


.show-all-trips a {
    color: #2c7b42;
    font-weight: 600;
    text-decoration: none;
}
.show-all-trips a:hover {
    text-decoration: underline;
}

/* trip info modal*/
.trip-modal {
    display: none; /* hidden by default */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
}

.trip-modal-content {
    background: #fff;
    margin: 5% auto;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    animation: fadeInDown 0.3s ease;
}

.trip-modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.trip-modal-close:hover {
    color: #000;
}

@keyframes fadeInDown {
    from {opacity: 0; transform: translateY(-20px);}
    to {opacity: 1; transform: translateY(0);}
}

/* Trip modal top section */
#tripModal .box-body {
    padding: 20px;
}

#tripModal .time-box h2 {
    font-size: 20px;
    margin: 0;
    font-weight: 600;
}

#tripModal .time-box p {
    margin: 0;
    color: #555;
    font-size: 14px;
}

#tripModal .ferries-box {
    display: flex;
    align-items: center;
    gap: 12px;
}

#tripModal .ferries-box img {
    width: 70px;
    height: auto;
    object-fit: contain;
}

#tripModal .ferries-box h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

#tripModal .ferries-box p {
    margin: 2px 0 0;
    font-size: 13px;
    color: #666;
}

#tripModal .price-box {
    text-align: right;
}

#tripModal .price-box .amount {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.route-timeline {
    position: relative;
    margin-left: 25px;
    padding-left: 20px;
    border-left: 2px solid #2ecc71;
}

.route-stop {
    position: relative;
    margin-bottom: 20px;
}

.route-stop::before {
    content: "";
    position: absolute;
    left: -27px;
    top: 15px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #2ecc71;
    border: 2px solid #fff;
    box-shadow: 0 0 2px rgba(0,0,0,0.2);
}

#tripModal .col-md-6.col-sm-12, #tripModal .col-md-12.col-sm-12{
    border: 1px solid #ddd;
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    padding: 15px 20px;
    background: #fff;
}

/* trip info modal*/


/******** custom select wrapper for seats *********/
.custom-option i.fas {
    min-width: 16px;
    text-align: center;
}


.custom-option span.badge.bg-primary{
    color:#052475;
    font-size:12px;
}

.custom-option span.badge.bg-secondary{
    color:#d69e08;
    font-size:12px;
}


.tickets-wrp .ticket-block ul .form-group-width-seats {
    min-width: 480px;
}
@media (max-width: 767.98px) {
    .tickets-wrp .ticket-block ul .form-group-width-seats {
        width: 100%;
        min-width: 100%;
    }
}

.custom-select-wrapper {
    position: relative;
    width: 100%;
}

/* Hide native select but keep functional */
.custom-select-wrapper select {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/* Visible select box */
.custom-select {
    font-family: "Roboto";
    display: flex;
    font-weight: 400;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px;
    font-size: 16px;
    line-height: 24px;
    color: #1c1b1f;
    background-color: #fff;
    border: 1px solid #79747e;
    border-radius: 4px;
    letter-spacing: 0.5px;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    /*matches original arrow style*/
    background-image: url('../../../assets/images/down-arrow.svg');
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: center right 10px;
}

/* Remove pseudo arrow — we use SVG background instead */
.custom-select::after {
    content: none;
}

/* Dropdown panel */
.custom-options {
    position: absolute;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    z-index: 1000;
    max-height: 280px;
    overflow-y: auto;
    display: none;
    opacity: 0;
    transform: scaleY(0.95);
    transform-origin: top;
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Open dropdown */
.custom-options.open {
    display: block;
    opacity: 1;
    transform: scaleY(1);
}

/* Flip up */
.custom-options.above {
    bottom: 100%;
    top: auto;
    border-radius: 0.25rem 0.25rem 0 0;
    transform-origin: bottom;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.1);
}

/* Optgroup label */
.custom-optgroup {
    font-weight: 600;
    font-size: 0.95rem;
    background: #0535b2;
    color: #ffffff;
    padding: 8px 12px;
    border-top: 1px solid #e9ecef;
}

/* Option row */
.custom-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    font-size: 0.95rem;
    color: #212529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.custom-option:hover {
    background-color: #f1f1f1;
}

.custom-option.active {
    background-color: #e9ecef;
    font-weight: 500;
}

/* FA check icon for active item */
.custom-option.active i.fa-check {
    visibility: visible;
}

/* Checkmark hidden for inactive items */
.custom-option i.fa-check {
    visibility: hidden;
    font-size: 0.9rem;
    margin-left: 8px;
    color: #007bff;
}

/* Focus style */
.custom-select:hover,
.custom-select:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.1rem rgba(0,123,255,.25);
}

/* --- Seat label clean layout --- */
.custom-option .seat-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.custom-option .seat-line {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    line-height: 1.4;
}

.seat-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    color: #fff !important;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.seat-badge.bg-primary {
    background-color: #052475;
}

.seat-badge.bg-secondary {
    background-color: #d69e08;
}

.seat-price {
    font-weight: 600;
    margin-left: 4px;
}


/* ===== Mobile bottom sheet popup for custom select ===== */
@media (max-width: 767.98px) {
    .custom-select-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 2000;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        transition: background 0.3s ease;
    }

    /* Bottom sheet */
    .custom-select-overlay .custom-options {
        position: relative;
        width: 100%;
        max-height: 50vh;
        background: #fff;
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
        overflow-y: auto;
        transform: translateY(100%);
        animation: slideUpSheet 0.3s ease forwards;
    }

    @keyframes slideUpSheet {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }

    /* optional grab handle */
    .custom-select-overlay::before {
        content: "";
        display: block;
        width: 50px;
        height: 4px;
        background: #ccc;
        border-radius: 3px;
        position: absolute;
        top: 8px;
    }
}

/* Mobile popup overlay for custom select */

/******** custom select wrapper for seats *********/

input.ascii-only-names, input.ascii-only {
    text-transform: uppercase;
}


/* remove top bar*/
.header .topbar{
    display:none;
}
.header .navbar{
    padding:0;
}
.hero-wrp{
    margin-top:0;
    padding: 80px 0 0;
}

/* remove top bar*/

footer .footer-block .foot-logo img{
    margin:0 0 1px;
}
footer .footer-block .foot-logo p {
    font-size: 16px;
}

/* hide in desktop the menu items */
/* Hide left navbar on desktop only */
@media (min-width: 992px) {
    .navbar-collapse .navbar-nav:first-child {
        display: none !important;
    }
}


.details-more{
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #050505;
    margin: 0;
    background: #e5e9ea;
}