@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");

:root {
    --default-font:;
    --h1: clamp(2rem, 1.2rem + 4vw, 4.5rem);
    --h2: clamp(1.75rem, 1.11rem + 3.2vw, 3.75rem);
    --h3: clamp(1.5rem, 1.02rem + 2.4vw, 3rem);
    --h4: clamp(1.375rem, 1.095rem + 1.4vw, 2.25rem);
    --h5: clamp(1.25rem, 1.05rem + 1vw, 1.875rem);
    --h6: clamp(1.125rem, 1.005rem + 0.6vw, 1.5rem);
    --size-2: 0.125rem;
    --size-4: 0.25rem;
    --size-6: 0.375rem;
    --size-8: 0.5rem;
    --size-9: 0.5625rem;
    --size-10: 0.625rem;
    --size-11: 0.6875rem;
    --size-12: 0.75rem;
    --size-13: 0.8125rem;
    --size-16: 1rem;
    --size-20: 1.25rem;
    --size-24: 1.5rem;
    --size-24: 1.5rem;
    --size-28: 1.5rem;
    --size-32: 2rem;
    --size-36: 2rem;
    --size-40: 2.5rem;
    --size-44: 2.75rem;
    --rounded-2: 0.125rem;
    --rounded-4: 0.25rem;
    --rounded-6: 0.375rem;
    --rounded-8: 0.5rem;
    --rounded-9: 0.5625rem;
    --rounded-10: 0.625rem;
    --rounded-11: 0.6875rem;
    --rounded-12: 0.75rem;
    --rounded-13: 0.8125rem;
    --rounded-16: 1rem;
    --rounded-20: 1.25rem;
    --rounded-24: 1.5rem;
    --rounded-28: 1.5rem;
    --rounded-32: 2rem;
    --neutral-50: #f5f6fa;
    --neutral-100: #f3f4f6;
    --neutral-200: #ebecef;
    --neutral-300: #d1d5db;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --light-50: #f5f6fa;
    --light-100: #f3f4f6;
    --light-600: #e4f1ff;
    --light-700: #374151;
    --light-800: #1f2937;
    --shadow-1: 0 4px 60px 0 rgba(4, 6, 15, 0.8);
    --shadow-2: 0 4px 60px 0 rgba(4, 6, 15, 0.5);
    --shadow-3: 0 20px 100px 0 rgba(4, 6, 15, 0.8);
    --shadow-4: 4px 8px 24px 0 rgba(182, 182, 182, 0.2);
    --shadow-5: 4px 12px 32px 0 rgba(0, 169, 158, 0.1);
    --shadow-6: 4px 16px 32px 0 rgba(0, 169, 158, 0.1);
    --shadow-7: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);
    --shadow-8: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
    --shadow-9: 0px 4px 16px 0px rgba(46, 45, 116, 0.04);
    --shadow-10: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
    --color-brand: #093e84;
    --primary-50: #e4f1ff;
    --primary-500: #0062ff;
    --primary-400: #1f7bf4;
    --primary-800: #052d61;
    --primary-900: #093e84;
    --white: #ffffff;
    --white-100: #ecf0ff;
    --neutral-50: #f5f6fa;
    --neutral-100: #f3f4f6;
    --neutral-200: #ebecef;
    --neutral-300: #e2e8f0;
    --neutral-400: #9ca3af;
    --neutral-500: #718096;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1a202c;
    --neutral-900: rgba(26, 32, 44, 1);
    --base: #fff;
    --brand: var(--primary-600);
    --button-secondary: var(--primary-50);
    --black: var(--dark-2);
    --white: var(--base);
    --bg-color: var(--neutral-50);
    --text-primary-light: var(--neutral-900);
    --text-secondary-light: var(--neutral-600);
    --text-secondary-dark: var(--neutral-300);
    --input-form-light: var(--neutral-300);
    --input-form-dark: var(--neutral-500);
    --input-bg: var(--neutral-50);
    --input-stroke: var(--neutral-300);
    --border-color: #d1d5db80;
    --panel-bg: #fff;
    --muted: #718096;
    --accent: #0f63d5;
    --chip-bg: #f1f5f9;
    --chip-border: rgba(15, 99, 213, 0.08);
}

*,
::before,
::after {
    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-color);
    color: var(--text-secondary-light);
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    padding: 0;
    margin: 0;
    font-weight: 400;
    position: relative;
    line-height: 1.7;
    overflow-x: hidden;
}

    body.overlay-active::after {
        width: 100%;
    }

    body::after {
        position: absolute;
        content: "";
        top: 0;
        inset-inline-start: 0;
        width: 0;
        height: 100%;
        background-color: #000;
        opacity: 0.65;
        transition: all 0.3s;
        z-index: 2;
    }

main {
    display: block;
}

footer {
    margin-top: auto;
}

img {
    max-width: 100%;
    height: auto;
    user-select: none;
}

select {
    cursor: pointer;
}

dt {
    margin-left: 0;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    border-top-width: 1px;
    margin: 0;
    clear: both;
    color: inherit;
    opacity: 0.15;
}

pre {
    font-family: monospace, monospace;
    font-size: inherit;
}

address {
    font-style: inherit;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

button {
    cursor: pointer;
}

*:focus {
    outline: none;
}

button {
    border: none;
}

    button:focus {
        outline: none;
    }

span {
    display: inline-block;
}

a {
    text-decoration: none;
    display: inline-block;
    background-color: transparent;
    color: inherit;
}

a,
button {
    cursor: revert;
}

    a:hover {
        text-decoration: none;
    }

strong {
    font-weight: 700;
}

a:hover {
    color: var(--primary);
}

abbr[title] {
    text-decoration: underline dotted;
}

b,
strong {
    font-weight: bolder;
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: inherit;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

svg,
img,
embed,
object,
iframe {
    vertical-align: bottom;
}

button,
input,
optgroup,
select,
textarea {
    -webkit-appearance: none;
    appearance: none;
    vertical-align: middle;
    color: inherit;
    font: inherit;
    background: transparent;
    padding: 0;
    margin: 0;
    border-radius: 0;
    text-align: inherit;
    text-transform: inherit;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    cursor: pointer;
    -webkit-appearance: button;
}

    button:disabled,
    [type="button"]:disabled,
    [type="reset"]:disabled,
    [type="submit"]:disabled {
        cursor: default;
    }

:-moz-focusring {
    outline: auto;
}

select:disabled {
    opacity: inherit;
}

option {
    padding: 0;
}

fieldset {
    margin: 0;
    padding: 0;
    min-width: 0;
}

legend {
    padding: 0;
}

progress {
    vertical-align: baseline;
}

textarea {
    overflow: auto;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    outline-offset: -2px;
}

    [type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

[type="number"] {
    -moz-appearance: textfield;
}

label[for] {
    cursor: pointer;
}

details {
    display: block;
}

summary {
    display: list-item;
}

[contenteditable]:focus {
    outline: auto;
}

table {
    border-color: inherit;
    border-collapse: collapse;
}

caption {
    text-align: left;
}

td,
th {
    vertical-align: top;
    padding: 0;
}

th {
    text-align: left;
    font-weight: bold;
}

/* === reset css end === */
/* === reset css end === */
/* === color css start === */
.text-primary-50 {
    color: var(--primary-50) !important;
}

.text-primary-100 {
    color: var(--primary-100) !important;
}

.text-primary-200 {
    color: var(--primary-200) !important;
}

.text-primary-300 {
    color: var(--primary-300) !important;
}

.text-primary-400 {
    color: var(--primary-400) !important;
}

.text-primary-500 {
    color: var(--primary-500) !important;
}

.text-primary-600 {
    color: var(--primary-600) !important;
}

.text-primary-700 {
    color: var(--primary-700) !important;
}

.text-primary-800 {
    color: var(--primary-800) !important;
}

.text-primary-900 {
    color: var(--primary-900) !important;
}

.text-neutral-50 {
    color: var(--neutral-50) !important;
}

.text-neutral-100 {
    color: var(--neutral-100) !important;
}

.text-neutral-200 {
    color: var(--neutral-200) !important;
}

.text-neutral-300 {
    color: var(--neutral-300) !important;
}

.text-neutral-400 {
    color: var(--neutral-400) !important;
}

/* === spacing css end === */
/* === animation css start === */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Basic spin utility */
.animate-spin {
    animation-name: spin;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transform-origin: center;
    backface-visibility: hidden;
    /* smoother on some browsers */
}

/* === animation css end === */
/* === typography css start === */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-primary-light);
    font-weight: 600;
}

h1,
.h1 {
    font-size: var(--h1) !important;
}

h2,
.h2 {
    font-size: var(--h2) !important;
}

h3,
.h3 {
    font-size: var(--h3) !important;
}

h4,
.h4 {
    font-size: var(--h4) !important;
}

h5,
.h5 {
    font-size: var(--h5) !important;
}

h6,
.h6 {
    font-size: var(--h6) !important;
}

.text-2xxl {
    font-size: var(--font-2xxl) !important;
}

.text-2xl {
    font-size: var(--font-2xl) !important;
}

.text-xxl {
    font-size: var(--font-xxl) !important;
}

.text-xl {
    font-size: var(--font-xl) !important;
}

.text-lg {
    font-size: var(--font-lg) !important;
}

.text-md {
    font-size: var(--font-md) !important;
}

.text-sm {
    font-size: var(--font-sm) !important;
}

.text-xs {
    font-size: var(--font-xs) !important;
}

.text-xxs {
    font-size: var(--font-xxs) !important;
}

/* small utility sizes used in your original code */
.w-40px {
    width: 40px !important;
}

.h-40px {
    height: 40px !important;
}

.text-sm {
    font-size: 0.85rem;
}

.text-lg {
    font-size: 1rem;
}

/* start bookin paeg */
/* === bg css end === */
/* === shadow css start === */
.shadow-1 {
    box-shadow: var(--shadow-1);
}

.shadow-2 {
    box-shadow: var(--shadow-2);
}

.shadow-3 {
    box-shadow: var(--shadow-3);
}

.shadow-4 {
    box-shadow: var(--shadow-4);
}

.shadow-5 {
    box-shadow: var(--shadow-5);
}

.shadow-6 {
    box-shadow: var(--shadow-6);
}

.shadow-7 {
    box-shadow: var(--shadow-7);
}

.shadow-8 {
    box-shadow: var(--shadow-8);
}

.shadow-9 {
    box-shadow: var(--shadow-9);
}

.shadow-10 {
    box-shadow: var(--shadow-10);
}

.bordered-shadow {
    box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.5019607843);
}

.shadow-top {
    box-shadow: 0px -4px 30px 0px rgba(46, 45, 116, 0.05);
}

.primary-shadow {
    box-shadow: 0px 17px 30px -4px rgba(72, 127, 255, 0.4);
}

.warning-shadow {
    box-shadow: 0px 17px 30px -4px rgba(255, 159, 41, 0.3);
}

/* === shadow css end === */
/* === size css start === */
.w-2-px {
    width: 0.125rem !important;
}

.w-4-px {
    width: 0.25rem !important;
}

.w-6-px {
    width: 0.375rem !important;
}

.w-8-px {
    width: 0.5rem !important;
}

.w-9-px {
    width: 0.5625rem !important;
}

.w-10-px {
    width: 0.625rem !important;
}

.w-11-px {
    width: 0.6875rem !important;
}

.w-12-px {
    width: 0.75rem !important;
}

.w-13-px {
    width: 0.8125rem !important;
}

.w-16-px {
    width: 1rem !important;
}

.w-20-px {
    width: 1.25rem !important;
}

.w-24-px {
    width: 1.5rem !important;
}

.w-28-px {
    width: 1.5rem !important;
}

.w-32-px {
    width: 2rem !important;
}

.w-36-px {
    width: 2rem !important;
}

.w-40-px {
    width: 2.5rem !important;
}

.w-44-px {
    width: 2.75rem !important;
}

.w-48-px {
    width: 3rem !important;
}

.w-50-px {
    width: 3.125rem !important;
}

.w-56-px {
    width: 3.5rem !important;
}

.w-60-px {
    width: 3.75rem !important;
}

.w-64-px {
    width: 4rem !important;
}

.w-72-px {
    width: 4.5rem !important;
}

.w-76-px {
    width: 4.75rem !important;
}

.w-80-px {
    width: 5rem !important;
}

.w-90-px {
    width: 5.625rem !important;
}

.w-110-px {
    width: 6.875rem !important;
}

.w-120-px {
    width: 7.5rem !important;
}

.w-144-px {
    width: 9rem !important;
}

.w-160-px {
    width: 10rem !important;
}

.w-170-px {
    width: 10.625rem !important;
}

.w-190-px {
    width: 11.875rem !important;
}

.w-200-px {
    width: 12.5rem !important;
}

.w-240-px {
    width: 15rem !important;
}

.w-440-px {
    width: 27.5rem !important;
}

.py-res-120 {
    padding: clamp(3.75rem, -0.8142rem + 9.5087vw, 7.5rem) 0;
}

.w-100-px {
    width: 100px;
}

.h-80-px {
    height: 80px;
}

.h-100-px {
    height: 100px;
}

.h-100vh {
    height: 100vh;
}

.min-w-max-content {
    min-width: max-content;
}

.w-190-px {
    width: 190px;
}

.max-w-740-px {
    max-width: 740px;
}

@media (max-width: 1399px) {
    .max-w-740-px {
        max-width: 500px;
    }
}

@media (max-width: 991px) {
    .max-w-740-px {
        max-width: 350px;
    }
}

@media (max-width: 767px) {
    .max-w-740-px {
        max-width: 250px;
    }
}

.textarea-max-height {
    height: 44px;
}

.resize-none {
    resize: none;
}

.min-w-450-px {
    min-width: 450px;
}

.min-w-132-px {
    min-width: 132px;
}

.h-2-px {
    height: 0.125rem !important;
}

.h-4-px {
    height: 0.25rem !important;
}

.h-6-px {
    height: 0.375rem !important;
}

.h-8-px {
    height: 0.5rem !important;
}

.h-9-px {
    height: 0.5625rem !important;
}

.h-10-px {
    height: 0.625rem !important;
}

.h-11-px {
    height: 0.6875rem !important;
}

.h-12-px {
    height: 0.75rem !important;
}

.h-13-px {
    height: 0.8125rem !important;
}

.h-16-px {
    height: 1rem !important;
}

.h-20-px {
    height: 1.25rem !important;
}

.h-24-px {
    height: 1.5rem !important;
}

.h-28-px {
    height: 1.5rem !important;
}

.h-32-px {
    height: 2rem !important;
}

.h-36-px {
    height: 2rem !important;
}

.h-40-px {
    height: 2.5rem !important;
}

.h-44-px {
    height: 2.75rem !important;
}

.h-48-px {
    height: 3rem !important;
}

.h-50-px {
    height: 3.125rem !important;
}

.h-56-px {
    height: 3.5rem !important;
}

.h-60-px {
    height: 3.75rem !important;
}

.h-64-px {
    height: 4rem !important;
}

.h-72-px {
    height: 4.5rem !important;
}

.h-76-px {
    height: 4.75rem !important;
}

.h-80-px {
    height: 5rem !important;
}

.h-90-px {
    height: 5.625rem !important;
}

.h-110-px {
    height: 6.875rem !important;
}

.h-120-px {
    height: 7.5rem !important;
}

.max-h-258-px {
    max-height: 258px;
}

.max-h-350-px {
    max-height: 350px;
}

.max-h-266-px {
    max-height: 266px;
}

.max-h-372-px {
    max-height: 372px;
}

.max-w-100-px {
    max-width: 100px;
}

.max-w-454-px {
    max-width: 454px;
}

.max-w-650-px {
    max-width: 650px;
}

.max-w-120-px {
    max-width: 120px !important;
}

.max-h-100-px {
    max-height: 100px;
}

.max-h-400-px {
    max-height: 400px;
}

.max-h-612-px {
    max-height: 612px !important;
}

.min-h-612-px {
    min-height: 612px !important;
}

/* Min max width & height Start */
.min-w-120-px {
    min-width: 120px;
}

.min-h-320-px {
    min-height: 320px;
}

.max-w-150-px {
    max-width: 150px;
}

.max-w-135-px {
    max-width: 135px;
}

.max-w-288-px {
    max-width: 288px;
}

.max-h-135-px {
    max-height: 135px;
}

.max-h-194-px {
    max-height: 194px;
}

.max-w-440-px {
    max-width: 440px;
}

.max-w-464-px {
    max-width: 464px;
}

.max-w-500-px {
    max-width: 500px;
}

.max-w-290-px {
    max-width: 290px;
}

.max-w-634-px {
    max-width: 634px;
}

.max-w-700-px {
    max-width: 700px;
}

.max-w-1000-px {
    max-width: 1000px;
}

/* Min max width & height End */
.text-w-200-px {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-w-100-px {
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-auto {
    top: auto;
}

.bottom-3px {
    bottom: 3px;
}

@media (min-width: 1700px) {
    .row-cols-xxxl-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }
}

@media (min-width: 1600px) {
    .col-xxxl-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-xxxl-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-xxxl-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-xxxl-3 {
        flex: 0 0 auto;
        width: 25%;
    }
}

.kanban-wrapper {
    min-width: 1560px;
}

@media (min-width: 425px) and (max-width: 575px) {
    .col-xs-6 {
        width: 50%;
    }
}

.transition-2 {
    transition: 0.2s !important;
}

.text-xxs {
    font-size: 10px !important;
}

.ms--48 {
    margin-inline-start: clamp(1.5rem, 1.02rem + 2.4vw, 3rem);
}

.blog__thumb {
    width: 110px !important;
}

.blog__content {
    width: calc(100% - 110px) !important;
    padding-inline-start: 16px;
}

.height-200 .ql-editor {
    min-height: 200px;
}

@media (max-width: 1199px) {
    .countdown-item {
        width: 90px !important;
        height: 90px !important;
    }
}

@media (max-width: 767px) {
    .countdown-item {
        width: 80px !important;
        height: 80px !important;
    }
}

@media (max-width: 424px) {
    .countdown-item {
        width: 60px !important;
        height: 60px !important;
    }
}

.container--xl {
    max-width: 1620px;
}

.transform-unset {
    transform: unset !important;
}

/* === size css end === */
/* === spacing css start === */
.m-2 {
    margin: var(--size-2);
}

.m-4 {
    margin: var(--size-4);
}

.m-6 {
    margin: var(--size-6);
}

.m-8 {
    margin: var(--size-8);
}

.m-9 {
    margin: var(--size-9);
}

.m-10 {
    margin: var(--size-10);
}

.m-11 {
    margin: var(--size-11);
}

.m-12 {
    margin: var(--size-12);
}

.m-13 {
    margin: var(--size-13);
}

.m-16 {
    margin: var(--size-16);
}

.m-20 {
    margin: var(--size-20);
}

.m-24 {
    margin: var(--size-24);
}

.m-28 {
    margin: var(--size-28);
}

.m-32 {
    margin: var(--size-32);
}

.m-36 {
    margin: var(--size-36);
}

.m-40 {
    margin: var(--size-40);
}

.m-44 {
    margin: var(--size-44);
}

.m-48 {
    margin: var(--size-48);
}

.m-50 {
    margin: var(--size-50);
}

.m-56 {
    margin: var(--size-56);
}

.m-60 {
    margin: var(--size-60);
}

.m-64 {
    margin: var(--size-64);
}

.m-72 {
    margin: var(--size-72);
}

.m-76 {
    margin: var(--size-76);
}

.m-80 {
    margin: var(--size-80);
}

.m-90 {
    margin: var(--size-90);
}

.m-110 {
    margin: var(--size-110);
}

.m-120 {
    margin: var(--size-120);
}

.m-144 {
    margin: var(--size-144);
}

.m-160 {
    margin: var(--size-160);
}

.m-170 {
    margin: var(--size-170);
}

.m-190 {
    margin: var(--size-190);
}

.m-200 {
    margin: var(--size-200);
}

.m-240 {
    margin: var(--size-240);
}

.m-440 {
    margin: var(--size-440);
}

.mx-2 {
    margin-inline: var(--size-2) !important;
}

.mx-4 {
    margin-inline: var(--size-4) !important;
}

.mx-6 {
    margin-inline: var(--size-6) !important;
}

.mx-8 {
    margin-inline: var(--size-8) !important;
}

.mx-9 {
    margin-inline: var(--size-9) !important;
}

.mx-10 {
    margin-inline: var(--size-10) !important;
}

.mx-11 {
    margin-inline: var(--size-11) !important;
}

.mx-12 {
    margin-inline: var(--size-12) !important;
}

.mx-13 {
    margin-inline: var(--size-13) !important;
}

.mx-16 {
    margin-inline: var(--size-16) !important;
}

.mx-20 {
    margin-inline: var(--size-20) !important;
}

.mx-24 {
    margin-inline: var(--size-24) !important;
}

.mx-28 {
    margin-inline: var(--size-28) !important;
}

.mx-32 {
    margin-inline: var(--size-32) !important;
}

.mx-36 {
    margin-inline: var(--size-36) !important;
}

.mx-40 {
    margin-inline: var(--size-40) !important;
}

.mx-44 {
    margin-inline: var(--size-44) !important;
}

.mx-48 {
    margin-inline: var(--size-48) !important;
}

.mx-50 {
    margin-inline: var(--size-50) !important;
}

.mx-56 {
    margin-inline: var(--size-56) !important;
}

.mx-60 {
    margin-inline: var(--size-60) !important;
}

.my-2 {
    margin-block: var(--size-2) !important;
}

.my-4 {
    margin-block: var(--size-4) !important;
}

.my-6 {
    margin-block: var(--size-6) !important;
}

.my-8 {
    margin-block: var(--size-8) !important;
}

.my-9 {
    margin-block: var(--size-9) !important;
}

.my-10 {
    margin-block: var(--size-10) !important;
}

.my-11 {
    margin-block: var(--size-11) !important;
}

.my-12 {
    margin-block: var(--size-12) !important;
}

.my-13 {
    margin-block: var(--size-13) !important;
}

.my-16 {
    margin-block: var(--size-16) !important;
}

.my-20 {
    margin-block: var(--size-20) !important;
}

.my-24 {
    margin-block: var(--size-24) !important;
}

.my-28 {
    margin-block: var(--size-28) !important;
}

.my-32 {
    margin-block: var(--size-32) !important;
}

.my-36 {
    margin-block: var(--size-36) !important;
}

.my-40 {
    margin-block: var(--size-40) !important;
}

.my-44 {
    margin-block: var(--size-44) !important;
}

.my-48 {
    margin-block: var(--size-48) !important;
}

.my-50 {
    margin-block: var(--size-50) !important;
}

.my-56 {
    margin-block: var(--size-56) !important;
}

.my-60 {
    margin-block: var(--size-60) !important;
}

.my-64 {
    margin-block: var(--size-64) !important;
}

.my-72 {
    margin-block: var(--size-72) !important;
}

.my-76 {
    margin-block: var(--size-76) !important;
}

.my-80 {
    margin-block: var(--size-80) !important;
}

.my-90 {
    margin-block: var(--size-90) !important;
}

.my-110 {
    margin-block: var(--size-110) !important;
}

.my-120 {
    margin-block: var(--size-120) !important;
}

.mt-2 {
    margin-block-start: var(--size-2) !important;
}

.mt-4 {
    margin-block-start: var(--size-4) !important;
}

.mt-6 {
    margin-block-start: var(--size-6) !important;
}

.mt-8 {
    margin-block-start: var(--size-8) !important;
}

.mt-9 {
    margin-block-start: var(--size-9) !important;
}

.mt-10 {
    margin-block-start: var(--size-10) !important;
}

.mt-11 {
    margin-block-start: var(--size-11) !important;
}

.mt-12 {
    margin-block-start: var(--size-12) !important;
}

.mt-13 {
    margin-block-start: var(--size-13) !important;
}

.mt-16 {
    margin-block-start: var(--size-16) !important;
}

.mt-20 {
    margin-block-start: var(--size-20) !important;
}



.mb-4 {
    margin-block-end: var(--size-4) !important;
}

.p-2 {
    padding: var(--size-2) !important;
}

.p-4 {
    padding: var(--size-4) !important;
}

.p-6 {
    padding: var(--size-6) !important;
}

.p-8 {
    padding: var(--size-8) !important;
}

.p-9 {
    padding: var(--size-9) !important;
}

.p-10 {
    padding: var(--size-10) !important;
}

.p-11 {
    padding: var(--size-11) !important;
}

.p-12 {
    padding: var(--size-12) !important;
}

.p-13 {
    padding: var(--size-13) !important;
}

.p-16 {
    padding: var(--size-16) !important;
}

.p-20 {
    padding: var(--size-20) !important;
}

.p-24 {
    padding: var(--size-24) !important;
}

.p-28 {
    padding: var(--size-28) !important;
}

.p-32 {
    padding: var(--size-32) !important;
}

/* 

.px-2 {
  padding-inline: var(--size-2) !important;
} */

.px-4 {
    padding-inline: var(--size-4) !important;
}

.px-6 {
    padding-inline: var(--size-6) !important;
}

.px-8 {
    padding-inline: var(--size-8) !important;
}

.px-9 {
    padding-inline: var(--size-9) !important;
}

.px-10 {
    padding-inline: var(--size-10) !important;
}

.px-11 {
    padding-inline: var(--size-11) !important;
}

.px-12 {
    padding-inline: var(--size-12) !important;
}

.px-13 {
    padding-inline: var(--size-13) !important;
}

.px-16 {
    padding-inline: var(--size-16) !important;
}

.px-20 {
    padding-inline: var(--size-20) !important;
}

.px-24 {
    padding-inline: var(--size-24) !important;
}

.px-28 {
    padding-inline: var(--size-28) !important;
}

.px-32 {
    padding-inline: var(--size-32) !important;
}

.px-36 {
    padding-inline: var(--size-36) !important;
}

.px-40 {
    padding-inline: var(--size-40) !important;
}

.px-44 {
    padding-inline: var(--size-44) !important;
}

.px-48 {
    padding-inline: var(--size-48) !important;
}

.px-50 {
    padding-inline: var(--size-50) !important;
}

.px-56 {
    padding-inline: var(--size-56) !important;
}

.px-60 {
    padding-inline: var(--size-60) !important;
}

.px-64 {
    padding-inline: var(--size-64) !important;
}

.px-72 {
    padding-inline: var(--size-72) !important;
}

.py-2 {
    padding-block: var(--size-2) !important;
}

.py-4 {
    padding-block: var(--size-4) !important;
}

.py-6 {
    padding-block: var(--size-6) !important;
}

.py-8 {
    padding-block: var(--size-8) !important;
}

.py-9 {
    padding-block: var(--size-9) !important;
}

.py-10 {
    padding-block: var(--size-10) !important;
}

.py-11 {
    padding-block: var(--size-11) !important;
}

.py-12 {
    padding-block: var(--size-12) !important;
}

.py-13 {
    padding-block: var(--size-13) !important;
}

.py-16 {
    padding-block: var(--size-16) !important;
}

.py-20 {
    padding-block: var(--size-20) !important;
}

.pb-2 {
    padding-block-end: var(--size-2) !important;
}

.pb-4 {
    padding-block-end: var(--size-4) !important;
}

.pb-6 {
    padding-block-end: var(--size-6) !important;
}

.pb-8 {
    padding-block-end: var(--size-8) !important;
}

.pb-9 {
    padding-block-end: var(--size-9) !important;
}

.pb-10 {
    padding-block-end: var(--size-10) !important;
}

.pb-11 {
    padding-block-end: var(--size-11) !important;
}

.pb-12 {
    padding-block-end: var(--size-12) !important;
}

.pb-13 {
    padding-block-end: var(--size-13) !important;
}

.pb-16 {
    padding-block-end: var(--size-16) !important;
}

.pb-20 {
    padding-block-end: var(--size-20) !important;
}

.pb-24 {
    padding-block-end: var(--size-24) !important;
}

.pb-28 {
    padding-block-end: var(--size-28) !important;
}

.pb-32 {
    padding-block-end: var(--size-32) !important;
}

.pb-36 {
    padding-block-end: var(--size-36) !important;
}

.pb-40 {
    padding-block-end: var(--size-40) !important;
}

.pb-44 {
    padding-block-end: var(--size-44) !important;
}

.pb-48 {
    padding-block-end: var(--size-48) !important;
}

.pb-50 {
    padding-block-end: var(--size-50) !important;
}

.pb-56 {
    padding-block-end: var(--size-56) !important;
}

.pb-60 {
    padding-block-end: var(--size-60) !important;
}

.pb-64 {
    padding-block-end: var(--size-64) !important;
}

.pb-72 {
    padding-block-end: var(--size-72) !important;
}

.pb-76 {
    padding-block-end: var(--size-76) !important;
}

.pb-80 {
    padding-block-end: var(--size-80) !important;
}

.pb-90 {
    padding-block-end: var(--size-90) !important;
}

.pb-110 {
    padding-block-end: var(--size-110) !important;
}

.pb-120 {
    padding-block-end: var(--size-120) !important;
}

.pb-144 {
    padding-block-end: var(--size-144) !important;
}

.pb-160 {
    padding-block-end: var(--size-160) !important;
}

.pb-170 {
    padding-block-end: var(--size-170) !important;
}

.pb-190 {
    padding-block-end: var(--size-190) !important;
}

.pb-200 {
    padding-block-end: var(--size-200) !important;
}

.pb-240 {
    padding-block-end: var(--size-240) !important;
}

.pb-440 {
    padding-block-end: var(--size-440) !important;
}

.pe-0 {
    padding-right: 0 !important;
}

.pe-90-px {
    padding-inline-end: clamp(1.5rem, -2.3077rem + 7.9327vw, 5.625rem);
}

.ms--10px {
    margin-inline-start: -10px;
}

.mt--50 {
    margin-top: -50px;
}

.mt--100 {
    margin-top: -100px;
}

.mt--36 {
    margin-top: -36px;
}

.w-30 {
    width: 30%;
}

.w-70 {
    width: 70%;
}

/* Gap Css */
.gap-2 {
    gap: var(--size-2);
}

.gap-4 {
    gap: var(--size-4);
}

.gap-6 {
    gap: var(--size-6);
}

.gap-8 {
    gap: var(--size-8);
}

.gap-9 {
    gap: var(--size-9);
}

.gap-10 {
    gap: var(--size-10);
}

.gap-11 {
    gap: var(--size-11);
}

.gap-12 {
    gap: var(--size-12);
}

/* === spacing css end === */
/* === spacing css start === */
.radius-2 {
    border-radius: 0.125rem;
    -webkit-border-radius: 0.125rem;
    -moz-border-radius: 0.125rem;
    -ms-border-radius: 0.125rem;
    -o-border-radius: 0.125rem;
}

.radius-4 {
    border-radius: 0.25rem;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    -ms-border-radius: 0.25rem;
    -o-border-radius: 0.25rem;
}

.radius-6 {
    border-radius: 0.375rem;
    -webkit-border-radius: 0.375rem;
    -moz-border-radius: 0.375rem;
    -ms-border-radius: 0.375rem;
    -o-border-radius: 0.375rem;
}

.radius-8 {
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
}

.radius-9 {
    border-radius: 0.5625rem;
    -webkit-border-radius: 0.5625rem;
    -moz-border-radius: 0.5625rem;
    -ms-border-radius: 0.5625rem;
    -o-border-radius: 0.5625rem;
}

.rounded-start-top-0 {
    border-start-start-radius: 0 !important;
}

.rounded-end-bottom-0 {
    border-end-end-radius: 0 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-primary-light);
    font-weight: 600;
}

h1,
.h1 {
    font-size: var(--h1) !important;
}

h2,
.h2 {
    font-size: var(--h2) !important;
}

h3,
.h3 {
    font-size: var(--h3) !important;
}

h4,
.h4 {
    font-size: var(--h4) !important;
}

h5,
.h5 {
    font-size: var(--h5) !important;
}

h6,
.h6 {
    font-size: var(--h6) !important;
}

.text-xl {
    font-size: var(--font-xl) !important;
}

.text-lg {
    font-size: var(--font-lg) !important;
}

.text-md {
    font-size: var(--font-md) !important;
}

.text-sm {
    font-size: var(--font-sm) !important;
}

.text-xs {
    font-size: var(--font-xs) !important;
}

.line-height-1 {
    line-height: 1 !important;
}

.text-start {
    text-align: start !important;
}

.text-end {
    text-align: end !important;
}

.border {
    border: 1px solid var(--border-color) !important;
}

.border-top-0 {
    border-top: 0 !important;
}

.border-end-0 {
    border-right: 0 !important;
}

.border-start-0 {
    border-left: 0 !important;
}

.border-bottom-0 {
    border-bottom: 0 !important;
}

.border-dashed {
    border-style: dashed !important;
}

.center-border {
    position: relative;
}

    .center-border::before {
        position: absolute;
        content: "";
        width: 1px;
        height: calc(100% - 9px);
        background-color: var(--neutral-300);
        left: 50%;
        transform: translateX(-50%);
    }

.border-inline-start {
    border-inline-start: 3px solid #ff0000;
}

.border-3 {
    border-width: 3px !important;
}

/* ========================== Authentication css start ============================== */

.mb-3 {
    margin-bottom: 1rem !important;
}

.thomalex-auth {
    width: 100%;
    height: auto;
}

.thomalex-auth-left {
    background: #fff;
    height: 100%;
    position: relative;
}

.thomalex-auth-right {
    background: url("../images/auth-img.svg") no-repeat center center;
    background-size: cover;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px;
    position: relative;
}

    .thomalex-auth-right .hero-bg-scroll {
        background-attachment: scroll;
    }

.auth-right-content {
    position: relative;
    z-index: 2;
    max-width: 400px;
    margin-top: -290px;
    margin-left: 40px;
}

    .auth-right-content h2 {
        font-size: 40px !important;
        color: #fff;
    }

.thomalex-login {
    background: var(--primary-900);
    color: var(--base);
    height: 40px;
}

.thomalex-forgot {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.thomalex-logo {
    position: absolute;
    top: 30px;
    left: 30px;
}

.thomalex-logo-right {
    left: auto;
    right: 30px;
}

.thomalex-login:hover {
    background: var(--primary-800);
    color: var(--base);
}

.text-boxshadow {
    box-shadow: 0px 1px 2px 0px rgba(16, 39, 47, 0.05);
}

.center-border-horizontal::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background-color: var(--neutral-300);
    z-index: -1;
}

.line-height {
    line-height: 20px;
    color: #718096;
    font-size: 16px;
    margin-top: 10px;
}

.form-control::placeholder {
    color: #a0aec0;
    font-size: 14px;
    font-weight: 500;
    opacity: 1;
}

.mt {
    margin-top: 30px;
}

/* Flight Booking CSS*/

.thomalex-top-header {
    background-color: var(--color-brand);
    padding: 6px 20px;
}

.logo {
    width: 150px;
    height: 30px;
    margin-right: 6px;
}

.form-select {
    background-color: white;
    border: none;
    padding: 2px 30px 2px 10px;
    font-size: 0.9rem;
    border-radius: 4px;
}

.user-info {
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .user-info img {
        height: 32px;
        width: 32px;
        border-radius: 50%;
        object-fit: cover;
    }

.divider {
    border-left: 1px solid rgba(237, 221, 221, 0.1);
    height: 50px;
    margin: 0 15px;
}

.languagechange {
    width: 172px;
    height: 40px;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

/* Booking Tabs */
.nav-tabs {
    border-bottom: 1px solid #e2e8f0;
    justify-content: center;
    background-color: #fff;
}

.nav-tabs.baggage-service {
    justify-content: flex-start;
}

    .nav-tabs .nav-link {
        color: #6c757d;
        border: none;
        background: transparent;
        font-weight: 500;
        font-size: 14px;
        padding: 14px 20px;
    }

        .nav-tabs .nav-link.active {
            color: #1a202c;
            font-weight: bold;
            border: none;
            font-size: 14px;
            border-bottom: 3px solid #1f7bf4;
            background: transparent;
        }

/* Greeting Section */
.thomalex-welcome-section {
    margin-top: 40px;
    text-align: left;
}

    .thomalex-welcome-section h4 {
        font-weight: bold;
        color: #1a202c;
        font-size: 24px !important;
    }

    .thomalex-welcome-section p {
        color: var(--neutral-500);
        margin-top: 4px;
        font-size: 14px;
    }

/* Booking Box */
.thomalex-flight-booking-box {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-top: 25px;
    padding: 10px 25px;
}

.thomalex-inner-tabs {
    border-bottom: 1px solid #dee2e6;
    display: flex;
    gap: 40px;
}

    .thomalex-inner-tabs .nav-link {
        border: none;
        color: #6c757d;
        font-weight: 500;
        background: transparent;
        border-bottom: 2px solid transparent;
        padding-bottom: 10px;
    }

.user-icon {
    width: 20px;
    height: 20px;
    object-fit: scale-down;
}

.thomalex-inner-tabs .nav-link.active {
    color: #1a202c;
    font-weight: 600;
    border-bottom: 3px solid #1f7bf4;
    background: transparent;
}

.thomalex-inner-tabs .nav-link {
    transition: border-color 0.3s ease, color 0.3s ease;
}

.form-control,
.form-select {
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.9rem;
}

.add-links {
    color: #0d6efd;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
}

    .add-links:hover {
        text-decoration: underline;
    }

/* Passenger Dropdown  */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px !important;
    font-weight: 500;
    font-size: 0.95rem;
    margin-bottom: 10px;
    margin-right: 6%;
}

.filter-item {
    color: var(--neutral-800);
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    align-items: center;
    position: relative;
    display: inline-flex;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.dropdown-arrow {
    margin-left: 5px;
}

.trip-option:hover {
    background-color: #e5efff;
    border-radius: 4px;
}

.dropdown-box {
    position: absolute;
    top: 110%;
    left: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    padding: 15px;
    width: 222px;
    z-index: 100;
    display: none;
}

/* Small tablets & large phones */
@media (max-width: 992px) {
    .dropdown-box {
        width: 200px;
    }
}

    .dropdown-box.active {
        display: block;
        max-height: 20rem;
        overflow-x: auto;
    }

.dropdown-box-passengers {
    position: absolute;
    top: 110%;
    left: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    padding: 15px;
    width: 320px;
    z-index: 100;
    display: none;
}

.dropdown-search {
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    font: inherit;
    color: inherit;
}

    .dropdown-search:focus {
        outline: none;
    }

    .dropdown-search::placeholder {
        color: #94a3b8;
        font-weight: 400;
        opacity: 1;
    }

    .dropdown-search.has-selection::placeholder {
        color: #0f172a;
        font-weight: 600;
    }

.searchable-form-select::placeholder {
    color: #6c757d;
    opacity: 1;
}

.searchable-form-select.has-selection::placeholder {
    color: #212529;
}

.searchable-dropdown-box {
    width: 100%;
    max-height: 260px;
    overflow-y: auto;
}

.dropdown-option {
    display: block;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
}

    .dropdown-option:hover {
        background: #e5efff;
        border-radius: 6px;
    }

    .dropdown-option-active {
        background: #e5efff;
        border-radius: 6px;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-box-passengers.active {
    display: block;
}

.trip-option {
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.2s ease;
}

    .trip-option input[type="radio"] {
        accent-color: var(--primary-400);
        transform: scale(1.1);
    }

    .trip-option.active {
        background-color: #e5efff;
    }

.passenger-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

    .passenger-item span {
        font-size: 14px;
        font-weight: 400;
        color: #1a202c;
    }

    .passenger-item .btn {
        border-radius: 50%;
        width: 28px;
        height: 28px;
        font-weight: bold;
        color: #3f8cff;
        padding: 0;
        border: 3px solid #3f8cff;
    }

.btn-done {
    background-color: #3f8cff;
    color: #fff;
    border-radius: 10px;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    float: right;
    margin-top: 10px;
    width: auto;
}

    .btn-done:hover {
        background-color: #1f7bf4;
        color: #fff;
    }

.btn:hover {
    background-color: #e5efff;
    color: #000;
}

.fw-semibold {
    font-size: 14px;
    color: #718096;
    font-weight: bold;
}

.tm-semibold {
    font-size: 14px;
    color: #1f7bf4;
    font-weight: 500;
}

.active-bg {
    background-color: #e5efff;
}

/* end */

/* Seaarch flight  */

.arrow {
    background: none;
    border: none;
    font-size: 20px;
    color: #007bff;
    cursor: pointer;
}

.btn-area {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    gap: 10px;
}

.btn-done {
    background: #007bff;
    border: none;
    color: #fff;
    padding: 6px 16px;
    border-radius: 6px;
}

.thomalex-search-box {
    padding: 2px;
    margin: 2px auto;
}

.request-assistance-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.request-assistance-btn {
    background-color: #e9ecef;
    color: #495057;
    border: none;
    border-radius: 999px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .request-assistance-btn:hover {
        background-color: #dee2e6;
    }

/* Dropdown style */
.thomalex-destination-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    margin-top: 5px;
    display: none;
    z-index: 1000;
    max-height: 250px;
    overflow-y: auto;
    border-radius: 1px solid #e2e8f0;
}

    .thomalex-destination-dropdown.active {
        display: block;
    }

.thomalex-destination-item {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.2s;
}

    .thomalex-destination-item:hover,
    .thomalex-destination-item.active {
        background: #e5efff;
    }

.destination-icon {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    opacity: 0.7;
}

.destination-text {
    display: flex;
    flex-direction: column;
}

.destination-title {
    font-size: 16px;
    color: #1a202c;
    font-weight: 500;
}

.thomalex-form-section {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    position: relative;
}

/* Desktop */
.date-remove-wrapper {
    display:flex;
    gap:10px;
    align-items:center;
    flex: 1 1 100%;
}

.thomalex-form-section > * {
    flex: 1 1 calc(25% - 16px);
}

.thomalex-form-section > .equal-box {
    flex: 1 1 calc(50% - 8px) !important;
    max-width: calc(50% - 8px);
    min-width: 0;
}

@media (max-width: 991px) {
    .thomalex-form-section > * {
        flex: 1 1 calc(50% - 16px);
    }
}
/* Mobile (keep them in SAME LINE) */
@media (max-width: 576px) {
    .date-remove-wrapper {
        flex: 1 1 100%;
    }

        .date-remove-wrapper .small-box {
            flex: 1;
        }

    .remove-btn {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 576px) {

    .thomalex-form-section > * {
        flex: 1 1 100%;
    }

    .date-remove-wrapper {
        display: flex;
        gap: 10px;
        width: 100%;
    }

        .date-remove-wrapper .small-box {
            flex: 1;
            min-width: 0;
        }

        .date-remove-wrapper .remove-btn {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
            align-self: center;
        }
}

@media (min-width:769px) and (max-width: 912px) {
    .thomalex-form-section {
        flex-wrap: wrap;
    }

        .thomalex-form-section > * {
            flex: 1 1 100%;
        }
    .swap-icon-mulity{
        top:25% !important;
        left:50% !important;
    }
}


.thomalex-styled-input-box {
    flex: 1;
    min-width: 0;
    border: 1px solid #cbd5e0;
    border-radius: 10px;
    padding: 10px 18px;
    background-color: #fff;
    cursor: pointer;
    position: relative;
    transition: border-color 0.3s, box-shadow 0.3s;
}

    .thomalex-styled-input-box:hover {
        border-color: #1f7bf4;
        box-shadow: 0 0 6px rgba(0, 123, 255, 0.1);
    }

    .thomalex-styled-input-box.with-icon {
        padding-left: 40px;
    }

.input-label {
    font-size: 14px;
    color: #718096;
    line-height: 18px;
    font-weight: 500;
}

.input-value {
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
    font-weight: 300;
    color: #a0aec0;
}

.input-icon {
    position: absolute;
    left: 18px;
    top: 25px;
}

.swap-icon-mulity {
    position: absolute;
    top: 50%;
    left: 28.5%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    padding: 7px 8px;
    z-index: 2;
    cursor: pointer;
    transition: all 0.3s ease;
}
@media(min-width:1025px) {
    .swap-icon-mulity {
        left: 27%
    }
}

.selected-language img {
    width: 24px !important;
    height: 16px !important;
    max-width: none !important;
}


.swap-icon-mulity2 {
    position: absolute;
    left: 32.9%;
    top: calc(56% - 0px);
    transform: translate(-50%, -50%);
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    padding: 7px 8px;
    z-index: 2;
    cursor: pointer;
    margin-top: 33px;
    transition: all 0.3s ease;
}

.swap-icon {
    position: absolute;
    left: 50%;
    top: calc(50% - 0px);
    transform: translate(-50%, -50%);
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    padding: 7px 8px;
    z-index: 2;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .swap-icon:hover {
        color: #fff;
        border-color: #007bff;
    }

.bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}

.nationality-field {
    display: flex;
    flex: 0 0 calc(50% - 8px);
    max-width: calc(50% - 8px);
}

    .nationality-field select.input-value {
        border: 0;
        padding: 0;
        background-color: transparent;
        cursor: pointer;
    }

@media (max-width: 767px) {
    .nationality-field {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

.bottom-border {
    width: calc(100% + 80px);
    margin-left: -40px;
    height: 1px;
}

.bottom-links span {
    color: #1f7bf4;
    font-weight: bold;
    font-size: 14px;
    margin-right: 25px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.search-btn {
    background-color: #3f8cff;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 26px;
    font-weight: bold;
    font-size: 16px;
    transition: 0.3s;
}

    .search-btn:hover {
        background-color: #1f7bf4;
        color: #fff;
    }

/* Wait screen */
.wait-screen-logo {
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

@media only screen and (min-width: 800px) {
    .wait-screen-logo {
        max-width: 800px;
    }
}

@media only screen and (max-width: 799px) {
    .wait-screen-logo {
        max-width: 350px;
    }
}

.wait-screen-text {
    font-size: var(--size-16);
    max-width: 600px;
    line-height: 1.5;
}

/* Generic backdrop for closing dropdowns on outside click */
.dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
}

/* Shared traveler picker bar, rendered above the search tab strip */
.traveler-picker-bar {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

/* TravelerPicker trigger pill */
.traveler-picker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.traveler-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    background: #fff;
    color: #1f7bf4;
    font-size: 14px;
    font-weight: 600;
}

.traveler-picker-trigger .traveler-picker-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1f7bf4;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.traveler-picker-label {
    white-space: nowrap;
}

.traveler-picker-arrow {
    width: 14px;
    transition: transform 0.2s;
}

.traveler-picker-arrow.open {
    transform: rotate(180deg);
}

.traveler-picker-guest-link {
    color: #1f7bf4;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Selected traveler chips inside the search area */
.traveler-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e8f0fe;
    border-radius: 16px;
    padding: 3px 8px 3px 4px;
    font-size: 13px;
    color: #1f7bf4;
    font-weight: 500;
}

.traveler-chip-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1f7bf4;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.traveler-chip-remove {
    background: none;
    border: none;
    color: #1f7bf4;
    cursor: pointer;
    padding: 0;
    font-size: 12px;
    line-height: 1;
}

.traveler-search {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* Dropdown box */
.traveler-dropdown {
    position: absolute;
    top: 120%;
    left: 0;
    width: 280px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    padding: 10px;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.traveler-list {
    max-height: 300px;
    overflow-y: auto;
}

    .traveler-dropdown.active {
        display: block;
    }

.traveler-search {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 10px;
}

    .traveler-search input {
        flex: 1;
        min-width: 80px;
        border: none;
        outline: none;
        font-size: 14px;
        padding: 2px 0;
    }


.traveler-item {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
}

    .traveler-item:hover,
    .traveler-item.active {
        background: #e8f0fe;
    }

.traveler-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #fff;
    background: #6c63ff;
    margin-right: 10px;
    flex-shrink: 0;
}

    .traveler-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.traveler-name {
    font-size: 14px;
    color: #333;
    display: flex;
    flex-direction: column;
}

.traveler-username {
    font-size: 11px;
    color: #888;
}

.traveler-edit-profile {
    margin-left: auto;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    line-height: 0;
    flex-shrink: 0;
}

    .traveler-edit-profile img {
        width: 18px;
        height: 18px;
    }

    .traveler-edit-profile:hover,
    .traveler-edit-profile:focus-visible {
        border-color: #1F7BF4;
        background: #fff;
    }

/* Advanced search */

.custom-dropdown {
    min-width: 200px;
    border: 1px solid #cbd5e0;
    border-radius: 10px;
    padding: 10px 18px;
    cursor: pointer;
    position: relative;
    background-color: #fff;
    transition: border-color 0.2s ease;
    user-select: none;
}

    .custom-dropdown:hover {
        border-color: #3f8cff;
    }

.dropdown-label {
    font-size: 14px !important;
    color: #718096 !important;
    font-weight: 400;
    margin: 0;
}

.dropdown-placeholder {
    font-size: 16px;
    color: #a0aec0;
    margin-top: -4px;
}

.custom-dropdown::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-image: url("../images/arrow-down.svg");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.custom-dropdown-wrapper.show .custom-dropdown::after {
    transform: translateY(-50%) rotate(180deg);
}

.custom-dropdown-wrapper {
    position: relative;
}

.dropdown-menu-custom {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    width: 100%;
    background-color: #fff;
    border: 1px solid #edf2f7;
    border-radius: 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    max-height: 250px;
    padding: 16px;
    margin-top: 5px;
    overflow-y: auto;
}

.custom-dropdown-wrapper.show .dropdown-menu-custom {
    display: block;
}

.dropdown-item-custom {
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    color: #425466;
}

    .dropdown-item-custom:hover {
        background-color: #e5efff;
        border-radius: 6px;
    }

    .dropdown-item-custom.selected {
        font-weight: 700;
        color: #3f8cff;
        background-color: #e5efff;
        border-radius: 6px;
    }

.dropdown-placeholder.active {
    font-weight: 600;
    color: #2d3748;
}

/* Advanced Search Toggle Arrow */
.advanced-toggle-wrapper {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    color: #1a202c;
    font-weight: 500;
    user-select: none;
}

.advanced-toggle-arrow {
    margin-left: 10px;
}

.advanced-toggle-wrapper:not(.collapsed) .advanced-toggle-arrow {
    transform: rotate(-180deg);
}

/* Search input inside dropdown */
.dropdown-search-input {
    font-size: 14px;
    color: #a0aec0;
    padding-left: 10px;
    border: 1px solid #cbd5e0;
    border-radius: 10px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.input-group-text {
    border: 1px solid #ddd;
    border-right: 0;
    border-radius: 6px 0 0 6px;
    background-color: #fff;
}

.input-group {
    padding: 0 12px 8px 0px;
}

.flight-type {
    font-size: 14px;
    font-weight: 500;
    margin-left: 10px;
    color: #1a202c;
    margin-top: 20px;
}

.small-box {
    flex: 1 1 220px;
    min-width: 180px;
}

@media (max-width: 1024px) {
    .small-box {
        flex: 1 1 calc(50% - 16px);
    }
}

@media (max-width: 576px) {
    .small-box {
        flex: 1; 
    }
}


.thomalex-styled-input-box.position-relative {
    position: relative;
}

.clear-btn {
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 16px;
    color: #999;
    display: none;
}

.thomalex-styled-input-box input:not(:placeholder-shown) + .clear-btn {
    display: block;
}

.thomalex-styled-input-box:focus-within,
.thomalex-styled-input-box.active {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.thomalex-styled-input-box.has-error {
    border: 2px solid #EB5E55;
}

.input-icon {
    position: absolute;
    left: 11px;
    top: 42%;
    transform: translateY(-30%);
    /* color: #1F7BF4; */
    font-size: 18px;
}

.input-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 2px;
}

.input-value {
    border: none;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    width: 100%;
    background: transparent;
    outline: none;
}

    .input-value::placeholder {
        color: #94a3b8;
        font-weight: 400;
    }

/* ==== Calendar Styles ==== */

.slider-container {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    padding-top: 5px;
}

.calendar-wrapper {
    position: relative;
}

.calendar-container {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    padding: 20px;
    width: 620px;
    border: 1px solid #e2e8f0;
    margin: 0px;
    transition: all 0.3s ease;
}

    .calendar-container.single-month {
        width: 330px;
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        z-index: 1000;
        visibility: hidden;
    }

    .calendar-container.single-month.open-above {
        top: auto;
        bottom: calc(100% + 8px);
    }

    .calendar-container.dual-month {
        width: 620px;
    }

.thomalex-calendar-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.single-calendar {
    width: 50%;
}

label.fw-semibold {
    font-size: 14px;
}

    label.fw-semibold .tm-semibold {
        font-size: 14px;
    }

.time-window {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-weight: 600;
    width: 100%;
    font-size: 16px;
    color: #1f7bf4;
    user-select: none;
    cursor: default;
    margin-bottom: 10px;
}

.styled-select-box select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url(../images/arrow-down.svg) no-repeat right 12px center;
    padding: 1px 17px;
    color: #1f7bf4;
    cursor: pointer;
    margin-top: -5px;
}

    .styled-select-box select:hover {
        border-color: #0d6efd;
    }

.time-window .label {
    color: #1a202c !important;
    font-weight: 600;
    font-size: 14px;
}

.custom-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
    padding: 6px 12px 6px 12px;
    font-size: 14px;
    color: #1f7bf4;
    font-weight: bold;
    background-color: #fff;
    cursor: pointer;
    margin-top: -5px;
}

.time-dropdown-arrow {
    position: absolute;
    right: 31px;
    top: 53%;
    margin-top: -3px;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    pointer-events: none;
}

.plus-minus {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    font-size: 14px;
    font-weight: 700;
    margin-top: -2px;
}

    .plus-minus span {
        display: block;
        line-height: 0.9;
    }

    .plus-minus .minus {
        margin-top: -3px;
    }

.arrow-icon {
    font-size: 14px;
    color: #1f7bf4;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

    .calendar-header h5 {
        font-weight: 600;
        margin: 0;
        color: #1a202c;
        text-align: center;
        font-size: 14px !important;
    }

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .calendar-header h5 {
        flex-grow: 1;
        text-align: center;
        font-weight: 600;
        margin: 0;
    }

.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    gap: 5px;
}

.weekday-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #718096;
    margin-bottom: 15px;
}

.calendar div {
    padding: 5px;
    color: #1a202c;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    height: 32px;
}

    .calendar div.disabled {
        color: gray;
        cursor: default;
    }

    .calendar div:not(.disabled):hover {
        background: #e8f0fe;
    }

.calendar .selected {
    background: #1f7bf4;
    border-radius: 8px;
    color: white;
}

.calendar .range {
    background: #edf2f7;
    color: #1a202c;
}

.calendar .muted {
    color: #edf2f7;
    cursor: default;
}

.footer-buttons {
    text-align: right;
    margin-top: 20px;
}

    .footer-buttons button {
        border-radius: 8px;
        font-weight: 500;
    }

    .footer-buttons .btn-reset {
        color: #718096;
        border: 1px solid #cbd5e0;
    }

    .footer-buttons .btn-done {
        background: #1f7bf4;
        color: #fff;
        border: none;
        padding: 9px 16px;
        border-radius: 10px;
        margin-top: -0px;
    }

label {
    font-weight: 500;
    display: block;
    margin-bottom: 15px;
}

.slider-container {
    position: relative;
    width: 100%;
}

.range-slider {
    position: relative;
    width: 100%;
    height: 6px;
    margin-top: 10px;
}

    /* Base track */
    .range-slider::before {
        content: "";
        position: absolute;
        height: 6px;
        width: 100%;
        background: #e5e7eb;
        border-radius: 5px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
    }

    .range-slider::after {
        content: "";
        position: absolute;
        height: 6px;
        background: #1f7bf4;
        border-radius: 5px;
        top: 50%;
        transform: translateY(-50%);
        left: calc(var(--a) * 1%);
        width: calc((var(--b) - var(--a)) * 1%);
        z-index: 2;
    }

    .range-slider input[type="range"] {
        position: absolute;
        width: 100%;
        height: 6px;
        background: none;
        pointer-events: none;
        appearance: none;
        margin: 0;
        top: 0;
        z-index: 3;
        -webkit-tap-highlight-color: transparent;
    }

    .range-slider input[type="range"]:last-child {
        z-index: 4;
    }

        .range-slider input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            pointer-events: auto;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #fff;
            border: 3px solid #0d6efd;
            box-shadow: 0 0 0 5px rgba(13, 110, 253, 0.15);
            cursor: pointer;
            position: relative;
            z-index: 5;
        }

        .range-slider input[type="range"]::-moz-range-thumb {
            pointer-events: auto;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #fff;
            border: 3px solid #0d6efd;
            box-shadow: 0 0 0 5px rgba(13, 110, 253, 0.15);
            cursor: pointer;
            position: relative;
            z-index: 5;
        }

#leftMonth,
#rightMonth {
    display: none;
}

/* Add another Flight  */

#multiCityForm {
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.multi-city-flight {
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

    .multi-city-flight:last-child {
        border-bottom: none;
    }

.button-group {
    display: flex;
    gap: 10px;
}

.add-flight-btn {
    display: none;
}
.add-flight-btn img {
        width: 16px;
        margin-right: 5px;
}

.add-flight-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #fff;
    border: 1px solid #cbd5e0;
    border-radius: 10px;
    padding: 8px 20px;
    font-size: 16px !important;
    font-weight: 500;
    color: #718096;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 20px;
}

    .add-flight-btn:hover {
        background-color: #f8f9fa;
        border-color: #bfc7d1;
    }

    .add-flight-btn:active {
        background-color: #eef2f6;
        border-color: #aeb6bf;
    }

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 20px;
    color: #888;
    cursor: pointer;
}

    .close-btn:hover {
        color: #f00;
    }

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    color: #888;
    cursor: pointer;
}

    .close-button:hover {
        color: #000;
    }

.thomalex-styled-input-box.position-relative {
    position: relative;
}

.clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 16px;
    color: #999;
    display: none;
}

.thomalex-styled-input-box input:not(:placeholder-shown) + .clear-btn {
    display: block;
}

.remove-btn {
    cursor: pointer;
    margin-top: 0;
    width:35px
}

/* Flights Results - Return  */

.thomalex-flightresult {
    background: var(--white);
    border-bottom: 2px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(54, 54, 54, 0.1);
}

.thomales-results {
    padding: 15px;
}

.thomalex-results-section {
    flex-wrap: wrap;
}

.swap-icon-results {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    padding: 7px 8px;
    z-index: 2;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .swap-icon-results:hover {
        color: #fff;
        border-color: #007bff;
    }

.return-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 0px !important;
    margin-bottom: 10px;
    margin-left: -8px;
}

.filter-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.filter-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.more-options {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
    font-size: 14px;
    color: #1f7bf4;
    cursor: pointer;
}

    .more-options img {
        width: 11px;
        transition: transform 0.2s ease;
    }

    .more-options:hover img {
        transform: rotate(180deg);
    }

.thomalex-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px;
    padding: 0 20px;
    align-items: center;
    position: relative;
}

.thomalex-filter-btn {
    background: #f7fafc;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 14px;
    color: #1a202c;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .thomalex-filter-btn:hover {
        background: #e5efff;
        border-radius: 6px;
        cursor: pointer;
    }

.thomalex-filter-bar a {
    margin-left: 0;
    font-size: 14px;
    text-decoration: none;
    color: #3f8cff;
    font-weight: 600;
}

/* Dropdown Box */
.thomalex-filter-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    width: 350px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    padding: 24px;
    z-index: 999;
    display: none;
    animation: fadeDown 0.2s ease;
}

    .thomalex-filter-dropdown.active {
        display: block;
    }

    .thomalex-filter-dropdown h6 {
        font-size: 16px !important;
        font-weight: 600;
        margin-bottom: 2px;
        color: #1a202c;
    }

/* Filter Options */
.thomalex-filter-option span {
    color: #1a202c;
    line-height: 24px;
    font-size: 14px;
    font-weight: 600;
}

.text-muted {
    color: #1a202c !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.thomalex-filter-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    border-radius: 8px;
}

    .thomalex-filter-option:hover {
        background: #e5efff;
        cursor: pointer;
    }

    .thomalex-filter-option input[type="radio"] {
        width: 20px;
        height: 20px;
        accent-color: #1f7bf4;
        margin-right: 10px;
        cursor: pointer;
    }

.sort-option-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}


/* Layover Section */
.layover {
    padding-top: 16px;
}

    .layover label {
        font-size: 14px;
        color: #718096;
        font-weight: 600;
        line-height: 28px;
        margin-left: 20px;
        margin-bottom: 0;
    }

        .layover label span:last-child {
            color: #1a202c !important;
            font-weight: 500;
        }

.duration {
    color: #718096;
    font-weight: 500;
}

.layovertime {
    color: #1f7bf4;
}

.layover-graph {
    position: relative;
    margin: 16px 0 8px;
    height: 80px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

    .layover-graph div {
        background: #e2e8f0;
        border-radius: 2px;
        height: 20%;
        width: 20px;
        transition: height 0.3s, width 0.3s, background 0.3s;
    }

        /* Active bars */
        .layover-graph div.active {
            background: #1f7bf4;
        }

        .layover-graph div:nth-child(3).active {
            height: 80%;
            width: 40px;
        }

        .layover-graph div:nth-child(3).active {
            height: 50%;
        }

        .layover-graph div:nth-child(4).active {
            height: 70%;
        }

        .layover-graph div:nth-child(5).active {
            height: 40%;
        }

/* Dual Range Slider */
.thomalex-range-slider {
    position: relative;
    height: 30px;
}

    .thomalex-range-slider input[type="range"] {
        position: absolute;
        width: 100%;
        height: 30px;
        pointer-events: none;
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        z-index: 99;
    }

    .thomalex-range-slider input::-webkit-slider-thumb {
        pointer-events: all;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #fff;
        border: 4px solid #1f7bf4;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

.thomalex-slider-track {
    position: absolute;
    height: 6px;
    border-radius: 4px;
    background: #e2e8f0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    z-index: 1;
}

.thomalex-slider-track-fill {
    position: absolute;
    height: 6px;
    border-radius: 4px;
    background: #1f7bf4;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.thomalex-reset-btn {
    display: block;
    margin-top: 14px;
    border: 1px solid #cbd5e0;
    background: #f7fafc;
    border-radius: 10px;
    padding: 8px 20px;
    font-size: 14px;
    gap: 8px;
    color: #2d3748;
    font-weight: 500;
    float: right;
}

    .thomalex-reset-btn:hover {
        background: #e2e8f0;
    }

/* Airlines Dropdown  */

.thomalex-airlines-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 115px;
    width: 350px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    padding: 24px;
    z-index: 999;
    display: none;
    animation: fadeDown 0.2s ease;
    max-height: 450px;
    overflow-y: auto;
    margin-bottom: 20px;
}

    .thomalex-airlines-dropdown::-webkit-scrollbar {
        width: 8px;
    }

    .thomalex-airlines-dropdown::-webkit-scrollbar-track {
        border-radius: 10px;
    }

    .thomalex-airlines-dropdown::-webkit-scrollbar-thumb {
        background-color: #cbd5e0;
        border-radius: 10px;
    }

    .thomalex-airlines-dropdown.active {
        display: block;
    }

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.thomalex-airlines-dropdown h6 {
    font-size: 16px !important;
    font-weight: 600;
    margin-bottom: 2px;
    color: #1a202c;
}

.section-title {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    margin-top: 12px;
    margin-bottom: 8px;
}

.form-check {
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #1a202c;
    transition: background 0.2s;
}

    .form-check:hover {
        background: #e5efff;
        border-radius: 6px;
    }

.form-check-input {
    cursor: pointer;
    margin-left: 0 !important;
    color: #1f7bf4 !important;
    border-radius: 6px;
    width: 20px;
    height: 20px;
}

.form-check-label {
    font-size: 14px;
    color: #1a202c !important;
    cursor: pointer;
    line-height: 20px;
}

.mb {
    margin-bottom: 50px;
}

.price {
    color: #1a202c;
    font-weight: 400;
    font-size: 14px;
    position: relative;
    text-align: center;
}

.secondary-price {
    color: #9ca3af;
    font-weight: 400;
    text-align: center;
}

/* Bags */

.thomalex-bag-selector {
    position: absolute;
    left: 350px;
    width: 320px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    padding: 24px;
    z-index: 999;
    display: none;
    margin-top: -10px;
    animation: fadeDown 0.2s ease;
}

    .thomalex-bag-selector.active {
        display: block;
    }

    .thomalex-bag-selector h6 {
        font-size: 16px !important;
        font-weight: 600;
        margin-bottom: 2px;
        color: #1a202c;
    }

.thomalex-bag-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

    .thomalex-bag-item label {
        font-weight: bold;
        font-size: 14px;
    }

.circle-btn {
    border-radius: 50% !important;
    width: 28px;
    height: 28px;
    font-weight: bold;
    color: #3f8cff;
    padding: 0;
    border: 2px solid #3f8cff;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}

    .circle-btn:hover {
    }

.count-text {
    font-weight: 600;
    color: #333;
    min-width: 20px;
    text-align: center;
    margin: 0 8px;
}

.carry {
    color: #1a202c;
    font-size: 14px;
    font-weight: 600;
}

/* Time */
.tab-btn-group {
    display: flex;
    gap: 6px;
    padding: 3px;
    border-radius: 8px;
    margin-bottom: 16px;
    border: 1px solid #e2e8f0;
}

.tab-btn {
    flex: 1;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    background: #f8fafc;
    color: #718096;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
}

    .tab-btn.active {
        background: #e5efff;
        color: #1a202c;
        box-shadow: 0 6px 18px rgba(13, 110, 253, 0.08);
    }

/* Slider section */
.slider-section {
    margin-bottom: 14px;
}

.slider-label {
    font-weight: 600;
    color: #718096;
    font-size: 14px;
    margin-bottom: 6px;
}

.slider-time {
    color: #1f7bf4;
    font-size: 14px;
    margin-bottom: 25px;
    font-weight: 500;
}

.slider {
    width: 100%;
    height: 6px;
    background: #e6edf7;
    border-radius: 6px;
    position: relative;
}

    .slider .track {
        position: absolute;
        top: 0;
        left: 18%;
        width: 64%;
        height: 6px;
        background: #1f7bf4;
        border-radius: 6px;
    }

    .slider .thumb {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #fff;
        border: 4px solid #1f7bf4;
        box-shadow: 0 6px 14px rgba(13, 110, 253, 0.15);
    }

        .slider .thumb.start {
            left: 18%;
            transform: translate(-50%, -50%);
        }

        .slider .thumb.end {
            left: 82%;
            transform: translate(-50%, -50%);
        }

.dummy-text {
    text-align: center;
    color: #64748b;
    font-size: 0.9rem;
    padding: 25px 10px;
    background: #f8fafc;
    border-radius: 8px;
}

.mtarriv {
    margin-top: 40px;
}

/* Range track */
.price-selector {
    position: absolute;
    left: 540px;
}

.airports-selector {
    position: absolute;
    left: 740px;
}

.thomalex-pricerange-slider {
    position: relative;
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 4px;
    margin-bottom: 35px;
    margin-top: 20px;
}

    .thomalex-pricerange-slider .thomalex-track-filled {
        position: absolute;
        height: 6px;
        background: #1f7bf4;
        border-radius: 3px;
        left: 20%;
        right: 20%;
    }

    .thomalex-pricerange-slider .thumb {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        background: #fff;
        border: 4px solid #1f7bf4;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

        .thomalex-pricerange-slider .thumb.start {
            left: 20%;
        }

        .thomalex-pricerange-slider .thumb.end {
            right: 20%;
        }

    .thomalex-pricerange-slider .range {
        position: absolute;
        width: 100%;
        top: -7px;
        pointer-events: none;
        appearance: none;
        background: none;
    }

        /* Enable thumb interaction */
        .thomalex-pricerange-slider .range::-webkit-slider-thumb {
            pointer-events: all;
            appearance: none;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 4px solid #1f7bf4;
            border-radius: 50%;
            cursor: pointer;
        }

.input-group-text {
    background: #edf2f7;
    border-right: #cbd5e0;
}

.form-control {
    border-left: 1px solid #cbd5e0;
}

/* Flight Duration */
.graph-container {
    height: 60px;
    position: relative;
}

.graph {
    display: flex;
    align-items: flex-end;
    height: 100%;
    justify-content: space-around;
    padding: 0 5px;
}

.graph-bar {
    width: 3%;
    background-color: #e0e0e0;
    border-radius: 2px 2px 0 0;
    position: relative;
    transition: background-color 0.3s;
    min-height: 15px;
}

    .graph-bar.active {
        background-color: #1f7bf4;
    }

.bar-1 {
    height: 60%;
}

.bar-2 {
    height: 60%;
}

.bar-3 {
    height: 50%;
}

.slider-wrapper {
    position: relative;
    padding: 0px 0 10px;
}

.slider-track {
    height: 6px;
    background-color: #e2e8f0;
    border-radius: 4px;
    position: relative;
}

.slider-range {
    height: 6px;
    background-color: #1f7bf4;
    border-radius: 3px;
    position: absolute;
    top: 0;
    left: 0;
}

.slider-thumb {
    width: 18px;
    height: 18px;
    background-color: white;
    border: 4px solid #1f7bf4;
    border-radius: 50%;
    position: absolute;
    top: -7px;
    cursor: grab;
    z-index: 2;
}

.thomalex-airportrange-slider {
    position: relative;
    height: 30px;
}

    .thomalex-airportrange-slider input[type="range"] {
        position: absolute;
        width: 100%;
        height: 30px;
        pointer-events: none;
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        z-index: 99;
    }

    .thomalex-airportrange-slider input::-webkit-slider-thumb {
        pointer-events: all;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #fff;
        border: 4px solid #1f7bf4;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

.thomalex-airportslider-track {
    position: absolute;
    height: 6px;
    border-radius: 4px;
    background: #e2e8f0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    z-index: 1;
}

.thomalex-airportslider-track-fill {
    position: absolute;
    height: 6px;
    border-radius: 4px;
    background: #1f7bf4;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

/* Top result bar */
.thomalex-results-bar {
    display: flex;
    flex-wrap: wrap;
    width:100%;
    margin: 0px auto;
    padding: 5px 0;
    margin-top: -10px;
}

.thomalex-results-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #1a202c;
    margin-bottom: 8px;
    margin-top: 10px;
    position: relative;
}

.results-count {
    white-space: nowrap;
}
    .thomalex-results-header span {
        color: #1a202c;
        font-weight: 500;
    }

    .thomalex-results-header a {
        color: #1a202c;
        text-decoration: none;
        font-weight: 600;
    }

        .thomalex-results-header a:hover {
            color: #1f7bf4;
        }

        .thomalex-results-header a.active img {
            transform: rotate(180deg);
        }

.sort-dropdown {
    position: absolute;
    right: 0;
    top: 20px;
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 16px;
    width: 310px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    display: none;
    z-index: 100;
    animation: fadeDown 0.2s ease;
}

    .sort-dropdown.active {
        display: block;
    }

.dropdown-backdrop-transparent {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: transparent;
}

.sort-option {
    padding: 8px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    transition: background 0.2s ease;
    border-radius: 8px;
    margin: 12px 18px;
}

    .sort-option input[type="radio"] {
        accent-color: #0d6efd;
        width: 18px;
        height: 18px;
        margin: 0;
    }

    .sort-option.active {
        background-color: #e5efff;
        color: #0d6efd;
        font-weight: 500;
    }

    .sort-option:hover {
        background-color: #e5efff;
    }

.form-check-input:checked {
    background-color: #0a4ea3;
    border-color: #0a4ea3;
}

.thomalex-info-alert {
    background-color: #e8f2ff;
    color: #1f7bf4;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    display: flex;
    font-weight: 600;
    border: 1px solid #99c0ff;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

    .thomalex-info-alert i {
        color: #1f7bf4;
        font-size: 18px;
    }

    .thomalex-info-alert button {
        background: none;
        border: none;
        color: #6c757d;
        font-size: 18px;
        line-height: 1;
    }

/* Flight details */

/* ===== TOP HEADER STRIP ===== */

.tooltip-msg {
    position: absolute;
    background: #2D3748;
    color: #fff;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 6px;
    left: 50px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1;
    margin-top: -20px;
}

    .tooltip-msg::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 120px;
        margin-left: -5px;
        border-width: 10px;
        border-style: solid;
        border-color: #333435 transparent transparent transparent;
    }

.left-info {
    position: relative;
}


.thomalex-flight-header {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 8px 25px;
    max-width: 1230px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    font-size: 15px;
    font-weight: 500;
    margin: 0px auto;
}

    .thomalex-flight-header .left {
        color: #343a40;
        font-weight: 600;
    }

    .thomalex-flight-header .right {
        display: flex;
        gap: 100px;
        color: #343a40;
        margin-right: 35px;
    }



.thomalex-flight-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1230px;
    width: 100%;
    margin: 0px auto;
    margin-top: 10px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid #e6e9ef;
}

.thomalex-owc-selected-preview {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0px auto;
    margin-top: 10px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid #e6e9ef;
}

.thomalex-proposal-container {
    max-width: 1230px;
    width: 100%;
    margin: 0px auto;
    margin-top: 10px;
     background: #fff; 
    border-radius: 12px;
    overflow: hidden;
}

.accordion-button,
.accordion-button:not(.collapsed),
.accordion-button:focus,
.accordion-button:active {
    background-color: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    outline: none !important;
}

@media(max-width:991px){

    .mobile-filter-btn {
        display: flex;
        position: fixed;
        bottom: 65px;
        right: 20px;
        z-index: 3000;
        background: #2563eb;
        border: none;
        border-radius: 50%;
        width: 55px;
        height: 55px;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 15px rgba(0,0,0,0.25);
        cursor: pointer;
    }
    .filter-icon {
        width: 22px;
        height: 22px;
        filter: brightness(0) invert(1);
    }

    /* Overlay background */

    .filter-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.35);
        z-index: 1100;
        display: none;
        margin:1.75rem;
    }

        .filter-overlay.show {
            display: block;
        }
    .mobile-filter-panel {
        position: fixed;
        top: -100%;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #0000008c;
        z-index: 1150;
        transition: top 0.35s ease;
        overflow-y: auto;
        margin:auto;
    }

        .mobile-filter-panel.open {
            top: 0;
            display: block;
        }

    /* Header */

    .mobile-filter-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 5;
    }

    .mobile-filter-body {
        background: #fff;
    }
}
.filter-top div{
    font-size: 13px;
    color: #0d6efd;
    font-weight:600;
    cursor:pointer;
}
.accordion-body{
    padding:11px;
}
/* ---------- LEFT FLIGHT SECTION ---------- */
.thomalex-flight-box {
    flex: 1.0;
    position: relative;
    border-right: 1px dashed #d9dbe0;
    padding: 0;
    width:100%;
    border-radius: 12px;
    background: #fff;
}

.thomalex-flight-box:last-child {
    border-right: none;
}

.thomalex-flight-block {
    padding: 18px 28px 18px 20px;
}

    .thomalex-flight-block + .flight-block {
        border-top: 1px dashed #d9dbe0;
    }

.flight-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.left-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.flight-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}


/*.flight-airport {
  font-size: 14px;
  color: #718096;
  font-weight: bold;
  text-align: center; 
}*/

.middle-info {
    text-align: center;
    flex: 1;
    margin: 0 20px;
    position: relative;
}

/* Line + Dots + Capsule Badge */
.duration-line {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
/*    margin: 0px 30px;*/
}

    .duration-line::before,
    .duration-line::after {
        content: "";
        position: absolute;
        top: 48%;
        width: calc(50% - 28px);
        height: 2px;
        background: #CBD5E0;
        z-index: 0;
    }

    .duration-line::before {
        left: 0;
    }

    .duration-line::after {
        right: 0;
    }

.duration-dot-left,
.duration-dot-right {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    background: #CBD5E0;
    border-radius: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.duration-dot-left {
    left: 0;
}

.duration-dot-right {
    right: 0;
}

.duration-badge {
    position: relative;
    z-index: 2;
    background: #E5EFFF;
    color: #1F7BF4;
    border: 1px solid #d0e2ff;
    font-size: 14px;
    font-weight: 600;
    padding: 2px 12px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.duration-time {
    font-size: 14px;
    font-weight: 600;
    color: #1A202C;
    margin-top: 4px;
}

.right-info {
    text-align: right;
}

.flight-airline-info {
    font-size: 14px;
    color: #718096;
    line-height: 18px;
    margin-top: 8px;
}

.checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: #CBD5E0;
}

/* ---------- RIGHT FARE SECTION ---------- */
.thomalex-fare-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    border-radius: 12px 0px 0px 12px;
    background: #fff;
}

.proposal-fare-box {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    border-radius: 12px 0px 0px 12px;
    background: #fff;
}

.thomalex-fare-header {
    display: flex;
    border-bottom: 1px solid #e6e9ef;
}

    .thomalex-fare-header div {
        flex: 1;
        text-align: center;
        padding: 12px 8px;
        font-weight: 600;
        font-size: 0.9rem;
        color: #212529;
    }

.thomalex-fare-columns {
    display: flex;
    flex: 1;
}

.fare-col {
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 16px 8px;
    border-right: 1px solid #e6e9ef;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .fare-col.selected {
        background-color: #F3F8FF;
        border-radius: 10px 0px 0px 10px;
    }

    .fare-col:last-child {
        border-right: none;
    }

    .fare-col .price {
        display: block;
        line-height: 1.2;
        overflow-wrap: anywhere;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.01em;
        font-size: clamp(0.95rem, 1.6vw, 1.125rem);
    }

    .fare-col .fare-cabin {
        display: none;
    }

@media (max-width: 768px) {
    .thomalex-fare-columns {
        flex-direction: column;
    }

    .fare-col {
        border-right: none;
        border-bottom: 1px solid #e6e9ef;
        padding: 14px 16px;
    }

        .fare-col:last-child {
            border-bottom: none;
        }

        .fare-col .fare-cabin {
            display: block;
            margin-bottom: 6px;
            font-size: 0.78rem;
            font-weight: 600;
            color: #4A5568;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .fare-col .price {
            font-size: 1.125rem;
        }
}

.old-price {
    text-decoration: line-through;
    color: #4A5568;
    font-size: 12px;
    line-height: 16px;
}

.price {
    font-size: 1.3rem;
    font-weight: 700;
    color: #000;
}

.fare-code {
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 0.2rem;
}

.discount-tag {
    display: inline-block;
    background: #eaf2ff;
    color: #1F7BF4;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 3px;
}

.select-btn {
    background: #1F7BF4;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    margin: 0 auto;
    cursor: pointer;
    transition: 0.3s;
}

    .select-btn:hover {
        background: #0056d2;
    }

.no-fare {
    color: #718096;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.borderline {
    border: 1px dashed #E2E8F0;
    width: 100%;
}

.flight-details {
    color: #1F7BF4 !important;
}

.flightbg {
    background: #F3F8FF;
    padding: 20px 20px;
    margin: 0px auto;
    border: 1px solid #dfeafa;
    max-width: 1230px;
    width: 100%;
    border-radius: 10px;
}

.thomalex-flight-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.thomalex-flight-Departure {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
    padding: 16px 24px;
    margin: 0;
    width: 100%;
}


    .thomalex-flight-Departure h6 {
        font-size: 16px !important;
        color: #1A202C;
        margin: 0;
    }

        .thomalex-flight-Departure h6 span {
            color: #718096;
            font-weight: 600;
        }

    .thomalex-flight-Departure a {
        color: #3F8CFF;
        font-size: 14px;
        text-decoration: none;
        font-weight: 500;
    }

        .thomalex-flight-Departure a:hover {
            text-decoration: underline;
        }

.airline-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px;
}

    .airline-info img {
        width: 36px;
        height: auto;
    }

.airline-name {
    font-size: 14px;
    font-weight: 600;
    color: #1A202C;
}

.aircraft-type {
    font-size: 14px;
    color: #718096;
}

.operated-by {
    font-size: 12px;
    color: #A0AEC0;
    font-style: italic;
    text-transform: capitalize;
    margin-top: 2px;
}

/* Left and right section */
.thomalex-flight-body {
    padding: 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}


/* LEFT SECTION */
.thomalex-flight-path {
    flex: 1;
    min-width: 250px;
    position: relative;
    padding-left: 52px;
}

    .thomalex-flight-path::before {
        content: "";
        position: absolute;
        top: 12px;
        left: 17px;
        height: calc(100% - 24px);
        width: 2px;
        background: #d1d5db;
        z-index: 0;
    }

.flight-icon {
    position: absolute;
    top: 50%;
    left: 1px;
    transform: translateY(-50%) rotate(360deg);
    color: #2563eb;
    background: #fff;
    font-size: 16px;
    z-index: 2;
    padding: 4px;
}

.time-block.top-point::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #CBD5E0;
    position: absolute;
    left: 12px;
    top: 0;
    z-index: 2;
}

/* Arrival (bottom) */
.time-block.bottom-point::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #CBD5E0;
    position: absolute;
    left: 12px;
    bottom: 0;
    z-index: 2;
}

.flight-time {
    font-size: 18px;
    font-weight: bold;
    color: #1A202C;
    line-height: 1.2;
}

.flight-airport {
    color: #718096;
    font-size: 14px;
}

.flight-number {
    color: #718096;
    font-size: 12px;
    margin-top: 4px;
}



.thomalex-flight-time {
    font-size: 20px;
    font-weight: bold;
    color: #1A202C;
    line-height: 1.2;
}

.thomalex-flight-airport {
    color: #718096;
    font-size: 14px;
}

.flight-timebetween {
    padding: 16px 24px;
    margin: 0;
    display: flex;
    align-items: center;
    color: #1A202C;
    font-size: 14px;
}

.thomalex-duration {
    display: flex;
    align-items: center;
    color: #1A202C;
    font-size: 14px;
    margin-top: 20px;
    margin-bottom: 20px;
}

    .thomalex-duration img {
        color: #2563eb;
        margin-right: 6px;
    }

/* RIGHT SECTION */
.flight-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

/* Prevent flex overflow issues */
* {
    min-width: 0;
  }

    .flight-meta span,
    .flight-meta a {
        font-size: 14px;
        color: #4A5568;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .flight-meta i {
        color: #2563eb;
    }

    .flight-meta a {
        color: #2563eb;
        font-weight: 500;
        text-decoration: none;
    }

        .flight-meta a:hover {
            text-decoration: underline;
        }

@media (max-width: 768px) {
    .thomalex-flight-Departure {
        padding: 12px 16px;
    }

    .airline-info {
        padding: 16px;
    }

        .airline-info img {
            width: 32px;
        }

    .thomalex-flight-body {
        padding: 12px;
        gap: 12px;
    }

    .thomalex-flight-path {
        flex: 1 1 100%;
        min-width: 0;
        padding-left: 40px;
    }

    .thomalex-flight-time {
        font-size: 18px;
    }

    .thomalex-flight-airport {
        font-size: 13px;
    }

    .flight-meta {
        flex: 1 1 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px 16px;
        padding-top: 12px;
        border-top: 1px solid #e5e7eb;
    }

        .flight-meta span,
        .flight-meta a {
            font-size: 13px;
        }

    .flight-timebetween {
        padding: 12px 16px;
        font-size: 13px;
    }

    .operated-by {
        font-size: 11px;
    }
}


/* Main Scroll Container */
.scroll-container {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    gap: 16px;
}

    .scroll-container::-webkit-scrollbar {
        display: none;
    }

/* Flight Card */
.flight-card-select {
    flex: 0 0 100%;
    min-width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    overflow: hidden;
    scroll-snap-align: start;
    transition: transform 0.3s ease;
}


/* Left Column */
.flight-left-select {
    flex: 0 0 30%;
    border-right: 1px solid #eee;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

    .flight-left-select img {
        border-radius: 10px;
        object-fit: cover;
    }

.cabin-section {
    max-width: 700px;
    margin: 10px auto;
}

.main-cabin {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

    .main-cabin img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }

.side-images {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

    .side-images img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }

.see-all {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

    .see-all img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(60%);
    }

.see-all-text {
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
}


/* Right Column */
.flight-right-select {
    flex: 1;
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    /* Visible horizontal slider so users can reach all fare families */
    scrollbar-width: thin;
    scrollbar-color: #b0b0b0 #edf0f5;
    padding-bottom: 10px;
}

    .flight-right-select::-webkit-scrollbar {
        height: 8px;
    }

    .flight-right-select::-webkit-scrollbar-track {
        background: #edf0f5;
        border-radius: 4px;
    }

    .flight-right-select::-webkit-scrollbar-thumb {
        background: #b0b0b0;
        border-radius: 4px;
    }

        .flight-right-select::-webkit-scrollbar-thumb:hover {
            background: #8f8f8f;
        }

.fare-card-select {
    flex: 0 0 395px;
    border-right: 1px solid #eee;
    padding: 24px;
    position: relative;
}

    .fare-card-select:last-child {
        border-right: none;
    }

    .fare-card-select h5 {
        font-weight: 600;
        font-size: 18px !important;
    }

    .fare-card-select ul {
        list-style: none;
        padding: 0;
        margin: 10px 0 0;
        margin-top: 20px !important;
    }

        .fare-card-select ul li {
            margin-bottom: 10px;
            font-size: 14px;
            line-height: 14px;
            color: #718096;
        }

    .fare-card-select .pricee {
        font-size: 24px;
        font-weight: 700;
        color: #1A202C;
        text-align: center;
    }

.select-btn-select {
    background: #1F7BF4;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 8px 20px;
    width: 100%;
    margin-top: 10px;
    transition: background 0.3s ease;
    text-align: center;
}

    .select-btn-select:hover {
        background: #0b5ed7;
    }

    .select-btn-select:disabled {
        background: #6c757d;
        cursor: not-allowed;
        opacity: 0.65;
    }

.offers-proceed.select-btn-select,
.offers-proceed.select-btn-select:disabled {
    background: #054688;
    opacity: 1;
}

.select-btn-book {
    background: #DC3545;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 8px 20px;
    width: 100%;
    margin-top: 10px;
    transition: background 0.3s ease;
    text-align: center;
}

    .select-btn-book:hover {
        background: #b02a37;
    }

    .select-btn-book:disabled {
        background: #6c757d;
        cursor: not-allowed;
        opacity: 0.65;
    }

.fare-conditions {
    display: block;
    margin-top: 8px;
    font-weight: bold;
    line-height: 14px;
    font-size: 14px;
    color: #3F8CFF;
    text-align: center;
    text-decoration: none;
}

    .fare-conditions:hover {
        text-decoration: underline;
    }

/* Scroll Arrows */
.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .scroll-arrow:hover {
        background: #f8f9fa;
    }

#scrollLeft {
    left: -10px;
}

#scrollRight {
    right: -10px;
}

.scroll-wrapper {
    position: relative;
}

.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.firstcabin {
    color: #4A5568;
    line-height: 20px;
    font-size: 14px;
    margin-bottom: 24px;
}

.ecoclass {
    color: #718096;
    line-height: 18px;
    font-size: 14px;
}

.text-mutedd {
    font-size: 14px;
    color: #4A5568;
    line-height: 14px;
    text-align: center;
    margin-top: 30px !important;
    border-top: 1px solid var(--border-color) !important;
    padding: 20px;
}

.trip {
    font-size: 14px;
    color: #718096;
    text-align: center;
    display: flex;
    justify-content: center;
    margin-top: -15px;
}

.bordergry {
    border-bottom: 1px solid var(--border-color) !important;
    padding: 6px;
}

.discount {
    margin-top: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    margin: 0px auto;
}

style > #flightDetails {
    display: none;
}

.flight-route-bar {
    display: flex;
    border-bottom: 1px solid #E0E2E7;
    margin-bottom: 20px;
}
.flight-route-padding {
    padding: 10px 20px 0px 20px;
}

    .flight-route-bar .route {
        color: #6c757d;
        font-weight: 600;
        font-size: 14px;
        margin-right: 20px;
        position: relative;
        padding-bottom: 6px;
        cursor: pointer;
    }

        .flight-route-bar .route.active {
            color: #1A202C;
        }

            .flight-route-bar .route.active::after {
                content: "";
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 3px;
                background-color: #1F7BF4;
                border-radius: 2px;
            }

/* Overview & payment */
.p-4 {
    padding: 1.5rem !important;
}

.bg-light2 {
    background: #f7fafc;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
}

/* FULL WIDTH STRIP */
.overview-strip {
    margin-left: -24px;
    margin-right: -24px;
}

.overview-view-details {
    background: #f7fafc;
    padding: 12px 24px;
    border-top: 1px solid #e5e7eb;
    margin-bottom: -24px;
    border-radius: 0px 0px 15px 15px;
}

/* Link */
.view-details-link {
    font-size: 14px;
    font-weight: 500;
    color: #2563eb;
}

.airline-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
}


.overview-flight-header {
    font-weight: 600;
    font-size: 15px;
}

.overview-text-muted {
    color: #6b7280;
    font-size: 14px;
}

.overview-airline {
    font-size: 13px;
    color: #6b7280;
}

.check-icon {
    color: #22c55e;
    font-size: 20px;
}


.flight-details-name {
    font-size: 16px !important;
    color: #1A202C;
    font-weight: 600;
}

.overview-card-box {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.overview-flight-header {
    font-weight: 600;
    color: #1A202C;
    font-size: 16px;
}

.overview-airline {
    font-size: 14px;
    color: #6b7280;
}

.overview-time {
    font-size: 20px;
    font-weight: 700;
    color: #1A202C;
}

.overview-city {
    font-size: 14px;
    color: #718096;
}

.overview-date {
    font-size: 14px;
    color: #1A202C;
}

.overview-timeline {
    position: relative;
    height: 2px;
    background: #e5e7eb;
    margin: 20px 0;
}

    .overview-timeline::before,
    .overview-timeline::after {
        content: '';
        position: absolute;
        top: -4px;
        width: 10px;
        height: 10px;
        background: #c7d2fe;
        border-radius: 50%;
    }

    .overview-timeline::before {
        left: 0;
    }

    .overview-timeline::after {
        right: 0;
    }

.overview-stop-pill {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #e0ecff;
    color: #1F7BF4;
    font-size: 14px;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.overview-duration {
    font-size: 14px;
    color: #1A202C;
    text-align: center;
    font-weight: bold;
    margin-top: 6px;
}

.overview-check-icon {
    color: #22c55e;
    font-size: 18px;
}

.overview-price-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 15px;
}

    .overview-price-row .price {
        color: #1A202C;
        font-weight: bold;
        font-size: 14px;
    }

.overview-price-total {
    font-weight: 700;
    font-size: 18px;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
    padding: 5px;
    background: #F3F8FF;
    margin-top: 12px;
}

.overview-remove-link {
    font-size: 14px;
    color: #3F8CFF;
    font-weight: 600;
    cursor: pointer;
}


.overview-text-muted {
    color: #718096 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

.price-summary {
    color: #1A202C;
    font-size: 14px !important;
    font-weight: bold;
}

/* car details */

.car-card {
    border: 1px solid #E5EAF0;
    border-radius: 10px;
    background: #fff;
}

.car-header {
    padding: 14px 20px;
    border-bottom: 1px solid #E5EAF0;
    font-weight: 600;
}

.car-remove-link {
    color: #2F80ED;
    font-size: 14px;
    text-decoration: none;
}

.info-strip {
    background: #F8FBFF;
    border-bottom: 1px solid #E5EAF0;
}

.info-box {
    padding: 12px 16px;
    border-right: 1px solid #E5EAF0;
}

    .info-box:last-child {
        border-right: none;
    }

.info-label {
    font-size: 12px;
    color: #6B7280;
}

.info-value {
    font-size: 14px;
    font-weight: 600;
}

.brand-logo {
    max-width: 70px;
    margin-bottom: 8px;
}

.car-type {
    font-size: 14px;
    color: #718096;
}

.car-name {
    font-size: 18px;
    color: #1A202C;
    font-weight: 600;
    margin-bottom: 16px;
}

/* ===== EXACT SPEC ALIGNMENT ===== */
.spec-list {
    max-width: 320px;
    padding: 10px;
}

.spec-row {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

    .spec-row i {
        color: #2F80ED;
        font-size: 16px;
    }

.spec-label {
    font-size: 14px;
    color: #6B7280;
}

.spec-value {
    font-size: 14px;
    font-weight: 600;
    color: #1A202C;
}

.view-details {
    padding: 12px 20px;
    border-top: 1px solid #E5EAF0;
    font-size: 14px;
    font-weight: 500;
    color: #1F7BF4;
    cursor: pointer;
    background: #f7fafc;
}

@media(max-width:767px) {
    .info-box {
        border-right: none;
        border-bottom: 1px solid #E5EAF0;
    }

        .info-box:last-child {
            border-bottom: none;
        }
}

/* Hotel details */
.hotel-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.info-grid {
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

    .info-grid .col {
        padding: 16px;
        border-right: 1px solid #e5e7eb;
    }

        .info-grid .col:last-child {
            border-right: 0;
        }

.hotel-img, 
.room-img {
    width: 220px;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
}

.rating-badge {
    background: #2563eb;
    color: #fff;
    padding: 2px 6px;
    font-size: 13px;
    border-radius: 4px;
    font-weight: 600;
}

.section-divider {
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.view-link {
    color: #2563eb;
    font-weight: 500;
    cursor: pointer;
    border-top: 1px solid #E5EAF0;
    background: #f7fafc;
}


.room-meta i {
    color: #2563eb;
}

.room-label {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .room-label i {
        color: #2563eb;
        font-size: 14px;
    }

.room-value {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.room-inline-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 28px;
}

.room-inline-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.room-icon {
    font-size: 16px;
    color: #2563eb;
    flex-shrink: 0;
}

.room-inline-label {
    min-width: 85px;
    font-size: 13px;
    color: #6b7280;
}

.room-inline-value {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.hotal-name {
    color: #1A202C;
    font-size: 18px !important;
}

.hoal-text-muted {
    color: #4A5568 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.details-heading {
    font-size: 16px !important;
    color: #1A202C;
    font-weight: 600;
}

/* Mobile */
@media (max-width: 768px) {
    .room-inline-info {
        grid-template-columns: 1fr;
    }

    .service-col {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }

        .service-col:last-child {
            border-bottom: none;
        }
}

/* Outer container */
.services-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
}

.service-item {
    text-align: center;
    padding: 16px 10px;
    cursor: pointer;
    transition: background 0.2s ease;
}

    .service-item:hover {
        background: #f8fafc;
    }

/* Middle vertical borders */
.service-col {
    border-right: 1px solid #e5e7eb;
}

    .service-col:last-child {
        border-right: none;
    }

.service-icon {
    font-size: 28px;
    color: #2563eb;
    margin-bottom: 6px;
    display: block;
}

.service-text {
    font-size: 14px;
    font-weight: 500;
    color: #718096;
}


.passenger-card-box {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: visible;
}

.passenger-section-title {
    padding: 10px 24px;
    font-weight: 600;
    color: #1A202C;
    border-bottom: 1px solid #e5e7eb;
}

/* SUMMARY */
.passenger-summary-row {
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

.passenger-summary-item {
    padding: 12px 16px;
    border-right: 1px solid #e5e7eb;
}

    .passenger-summary-item:last-child {
        border-right: none;
    }

.passenger-summary-label {
    font-size: 13px;
    color: #6b7280;
}

.passenger-summary-value {
    font-size: 14px;
    font-weight: 600;
}

/* COMPANY PASSENGER ROW (UPDATED) */
.passenger-row {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 12px;
}

.passenger-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.passenger-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #0d4ea6;
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.passenger-name {
    font-weight: 600;
    color: #1A202C;
    font-size: 14px;
    line-height: 1.2;
}

.passenger-employee-id {
    font-size: 13px;
    color: #6b7280;
}

.passenger-edit-details {
    color: #2563eb;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.passenger-cost-select {
    width: 220px;
    border-radius: 8px;
}

/* INFO ALERT */
.passenger-info-alert {
    background: #E5EFFF;
    border: 1px solid #99C0FF;
    border-radius: 8px;
    padding: 10px 12px;
    color: #1F7BF4;
    font-size: 13px;
    margin-bottom: 16px;
}

/* FORM */
.passenger-form-label {
    font-size: 13px;
    color: #374151;
    margin-bottom: 4px;
}

.form-label {
    font-size: 13px;
    color: #374151;
    margin-bottom: 4px;
}

.form-control,
.form-select,
.input-group-text {
    border-radius: 8px;
    font-size: 14px;
}

.input-group-text {
    background: #f9fafb;
    color: #6b7280;
}


.passenger-collapse-link {
    color: #2563eb;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.expand-row {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid #e5e7eb;
    cursor: pointer;
    color: #2563eb;
    font-size: 14px;
    font-weight: 500;
}

    

    .expand-row i {
        font-size: 16px;
        transition: transform 0.2s ease;
    }

    /* rotate arrow when open */
    .expand-row[aria-expanded="true"] i {
        transform: rotate(180deg);
    }

.expand-content {
    padding: 12px 0 16px;
    font-size: 14px;
    color: #374151;
}

@media (max-width: 768px) {
    .passenger-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .passenger-cost-select {
        width: 100%;
    }
}

.seat-card {
    border: 1px solid #e7edf3;
    border-radius: 12px;
    padding: 20px;
    background: #fff;
}

    .seat-card h6 {
        font-size: 14px !important;
    }

.seat-table th {
    background: #f8fafc;
    font-weight: 600;
    color: #6b7280;
    font-size: 14px;
}

.seat-table td {
    vertical-align: middle;
    font-size: 15px;
}

.remove-icon {
    cursor: pointer;
    color: #9ca3af;
    font-size: 20px;
}

    .remove-icon:hover {
        color: #f43f5e;
    }

.btn-seat {
    background: #3F8CFF;
    color: #fff;
    font-size: 14px;
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 600;
}

/* Baggage */

.baggage-card-box {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
}

.baggage-small-title {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 4px;
}

.baggage-big-route {
    font-size: 16px;
    font-weight: 700;
    color: #1A202C;
    margin-bottom: 10px;
}

.baggage-name-title {
    font-size: 14px;
    font-weight: 600;
    color: #1A202C;
    margin-bottom: 8px;
}

.baggage-item-row {
    display: flex;
    font-size: 15px;
    margin-bottom: 6px;
    color: #374151;
}

.baggage-icon-green {
    color: #10b981;
    font-size: 18px;
    margin-right: 8px;
}

.baggage-icon-grey {
    color: #9ca3af;
    font-size: 18px;
    margin-right: 8px;
}

.baggage-remove-link {
    color: #3b82f6;
    font-size: 14px;
    margin-left: 10px;
    cursor: pointer;
}

.baggage-add-link {
    color: #3b82f6;
    cursor: pointer;
    font-size: 15px;
    margin-top: 6px;
    display: inline-block;
}

/* Extra baggage */

.extra-section-title {
    font-size: 14px;
    color: #718096;
    font-weight: 500;
}

.extra-name-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1A202C;
}

.extra-item-row {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-bottom: 6px;
    color: #1A202C;
}

.extra-icon-green {
    color: #10b981;
    font-size: 18px;
    margin-right: 8px;
}

.extra-icon-grey {
    color: #9ca3af;
    font-size: 18px;
    margin-right: 8px;
}

.extra-icon-blue {
    color: #10b981;
    font-size: 18px;
    margin-right: 8px;
}

.extra-remove-link {
    color: #3b82f6;
    font-size: 14px;
    margin-left: 10px;
    cursor: pointer;
}

.extra-divider-full {
    border-top: 1px solid #e5e7eb;
    width: 100%;
    margin: 8px 0;
}

.extra-no-services {
    color: #1A202C;
    font-size: 14px;
}

.baggage-header-row {
    background: #f7f9fc;
    border-bottom: 1px solid #e5e7eb;
    border-top: 1px solid #e5e7eb;
    padding: 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
}

.baggage-item-row {
    padding: 8px 0;
    border-bottom: 1px solid #e5e7eb;
}

.baggage-passenger-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #1A202C;
}

.baggage-detail-row {
    display: flex;
    align-items: center;
    font-size: 15px;
    margin-bottom: 6px;
    color: #374151;
}

.baggage-icon-green {
    color: #0CB150;
    font-size: 18px;
    margin-right: 8px;
}

.baggage-icon-grey {
    color: #9ca3af;
    font-size: 18px;
    margin-right: 8px;
}

.services-title-text {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
}

.services-sub-text {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 16px;
}

.services-action-btn {
    background: #3F8CFF;
    padding: 10px 22px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
}

.additional-table-wrap {
    border-radius: 10px;
    overflow: hidden;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

thead {
    background: #f4f6fc;
}

th, td {
    padding: 12px 14px;
    border: 1px solid #cfd4e1;
    vertical-align: top;
}

th {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    text-align: left;
}

.additional-passenger {
    font-weight: 600;
    width: 22%;
}

.additional-service-type {
    width: 22%;
}

.additional-service-details {
    width: 56%;
}

.additional-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.additional-icon-green {
    color: #10b981;
    font-size: 18px;
}

.additional-icon-grey {
    color: #9ca3af;
    font-size: 18px;
}

.additional-price {
    margin-left: auto;
    font-weight: 600;
    margin-right: 10px;
}

.additional-remove-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #f1f3f8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
}

.promo-label {
    font-size: 14px;
    font-weight: 600;
    color: #1A202C;
    margin-bottom: 6px;
    text-align: justify;
}

.promo-input {
    height: 42px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    font-size: 14px;
    text-align: justify;
}

.promo-btn {
    height: 42px;
    padding: 0 22px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    background: #3b82f6;
    border: none;
}

.flight-payment-box {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0;
    margin-bottom: 20px;
    background: #fff;
    overflow: hidden;
}


.flight-payment-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.flight-payment-radios {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    gap: 12px;
}

    .flight-payment-radios > [class*="col-"] {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

.flight-radio-option {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: 0.2s;
    background: #fff;
}

    .flight-radio-option:hover {
        border-color: #60a5fa;
    }

    .flight-radio-option.active {
        border: 1px solid #1F7BF4;
        background: #eff6ff;
    }

.flight-custom-radio {
    width: 15px;
    height: 15px;
    border: 1px solid #9ca3af;
    border-radius: 50%;
    position: relative;
    transition: 0.2s;
}

    .flight-custom-radio.checked {
        border-color: #2563eb;
    }

        .flight-custom-radio.checked::after {
            content: "";
            width: 9px;
            height: 9px;
            background: #2563eb;
            border-radius: 50%;
            position: absolute;
            top: 2px;
            left: 2px;
        }

.flight-card-box {
    border: 2px solid #E2E8F0;
    border-radius: 10px;
    padding: 12px;
    background: #fff;
    min-height: 92px;
    height: 100%;
}

.flight-card-box.active {
    border-color: #1F7BF4;
    box-shadow: 0 0 0 1px #1F7BF4;
}

.card-tile-name {
    font-weight: 700;
    color: #1A202C;
    font-size: 15px;
}

.card-tile-sep {
    margin: 8px 0;
    border: 0;
    border-top: 1px solid #E2E8F0;
    opacity: 1;
}

.card-tile-number {
    letter-spacing: 1px;
    color: #1A202C;
    font-size: 15px;
}

.card-tile-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.card-tile-expiry {
    color: #94A3B8;
    font-size: 13px;
}

.card-tile-type {
    color: #94A3B8;
    font-size: 13px;
}

.card-tile-brand {
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 4px 8px;
    background: #fff;
    line-height: 0;
}

.card-tile-brand img {
    height: 22px;
    display: block;
}

.mastercard-logo {
    width: 42px;
    height: auto;
}

.flight-new-card-box {
    background: #F0F6FF;
    border: 1px solid #BBD3FF;
    border-radius: 10px;
    min-height: 92px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-weight: 600;
    color: #1F7BF4;
    text-align: center;
    cursor: pointer;
}

.new-card-plus {
    font-size: 22px;
    line-height: 1;
}

.brand-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.flight-radio-option:focus-visible,
.flight-card-box:focus-visible,
.flight-new-card-box:focus-visible {
    outline: 2px solid #1F7BF4;
    outline-offset: 2px;
}


.payment-option {
    background: #F7FAFC;
    padding: 14px;
    width: 100%;
    border: 1px solid #CBD5E0;
}

.passenger-card-box .payment-option {
    background: #F0F6FF;
    border: none;
    border-top: 1px solid #e5e7eb;
    border-radius: 0;
    padding: 16px 18px;
}

.passenger-card-box .payment-option.payment-option-no-title {
    border-top: none;
}

.note-box {
    position: relative;
    width: 100%;
}

.custom-textarea {
    width: 100%;
    height: 120px !important;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    padding: 12px;
    text-align: justify;
    font-size: 14px;
    resize: none;
    outline: none;
}

    .custom-textarea:focus {
        border-color: #4f46e5;
        box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
    }

.char-count {
    margin-top: 6px;
    font-size: 12px;
    color: #718096;
    text-align: justify;
}

.flight-price-box {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.flight-price-header {
    background: #F7FAFC;
    border-bottom: 1px solid #E2E8F0;
    padding: 10px 12px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    color: #1A202C;
    align-items: center;
    gap: 6px;
}

.flight-price-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e5e7eb;
    padding: 12px 18px;
    font-size: 14px;
    color: #1A202C;
}

    .flight-price-row:last-child {
        border-bottom: none;
    }

    .flight-price-row .flight-label {
        flex: 1;
        color: #1A202C;
    }

    .flight-price-row .flight-value {
        font-weight: 600;
        white-space: nowrap;
    }

.flight-price-total {
    display: flex;
    justify-content: space-between;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 600;
}

    .flight-price-total .flight-total-label {
        color: #1A202C !important;
        cursor: pointer;
    }

    .flight-price-total .flight-total-amount {
        font-weight: 700 !important;
        font-size: 16px !important;
        color: #1A202C !important;
    }

.total-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 14px 18px;
    font-size: 16px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}

.flighttotal-label {
    color: #1A202C;
    font-weight: 700;
    font-size: 20px;
    margin-right: 6px;
}

.total-amount {
    font-weight: 700;
    color: #1A202C;
    font-size: 20px;
}

.charge-info-text {
    font-size: 12px;
    line-height: 1.4;
    color: #6B7280;
}

.flightbooking-footer {
    padding: 12px 0;
    flex-wrap: wrap;
}

.flightagree-text {
    font-size: 14px;
    color: #374151;
}

.flightlink-blue {
    color: #1F7BF4;
    text-decoration: none;
    font-weight: 500;
}

    .flightlink-blue:hover {
        text-decoration: underline;
    }


.flightbtn-cancel {
    background: #FFFFFF;
    border: 1px solid #CBD5E0;
    color: #4b5563;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 8px;
}


.flightbtn-complete {
    background: #0a3478;
    color: #fff;
    font-weight: 600;
    padding: 8px 22px;
    border-radius: 8px;
    border: none;
}

    .flightbtn-complete:hover {
        background: #08285c;
        color: #fff;
    }

    .flightbtn-complete:disabled,
    .flightbtn-complete[disabled] {
        background: #0a3478;
        color: #ffffff;
        opacity: 1;
        cursor: not-allowed;
    }

.mt-15 {
    margin-top: 15px;
}

.new-form-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #1A202C;
    margin: 10px -16px 18px;
    border-top: 1px solid #E2E8F0;
    padding: 24px 16px 0;
}

.new-form-label {
    font-weight: 500;
    color: #1A202C;
    margin-bottom: 6px;
    font-size: 14px;
}

.new-custom-input {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 12px;
    width: 100%;
    font-size: 14px;
    color: #111827;
}

    .new-custom-input:focus {
        border-color: #4f46e5;
        box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
    }


.new-custom-input.input-invalid,
.new-custom-input.input-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15);
}

.new-custom-select {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 12px;
    width: 100%;
    font-size: 14px;
}

.new-section-divider {
    border-top: 1px solid #e5e7eb;
    margin: 25px 0;
}

.paymentbg {
    background: #F7FAFC;
}

.payment-invalid {
    border: 2px solid #dc3545 !important;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.25);
}

.features-box {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.features-header {
    padding: 8px 10px;
    font-size: 16px;
    font-weight: 600;
    color: #1A202C;
    border-bottom: 1px solid #e5e7eb;
}

.features-list {
    padding: 16px 18px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 14px;
    color: #374151;
}

.feature-yes {
    color: #10b981;
    font-weight: 600;
    flex-shrink: 0;
}

.feature-no {
    color: #94a3b8;
}

.icon-yes, .icon-no {
    width: 16px;
    height: 16px;
}

.mt-45 {
    margin-top: 45px;
}


.flight-metaa {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

    .flight-metaa span,
    .flight-metaa a {
        font-size: 14px;
        color: #4A5568;
        display: flex;
        align-items: center;
        gap: 8px;
    }

.section-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 14px;
    color: #111827;
}

.carinfo-card {
    background: #f1f5f9;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.value {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.label {
    font-size: 13px;
    color: #6b7280;
}

.carinfo-card i {
    font-size: 18px;
    color: #1d4ed8;
}

.carschedule-card .date-text {
    font-weight: 600;
    font-size: 15px;
}

.carschedule-card .sub-text {
    font-size: 13px;
    color: #6b7280;
}

.carsection-title {
    font-size: 16px;
    color: #1A202C;
    font-weight: 600;
}

.carmap-box {
    border-radius: 12px;
    overflow: hidden;
    margin-top: 10px;
}

.carlocation-details {
    margin-top: 12px;
    font-size: 14px;
    color: #374151;
}

    .carlocation-details p {
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .carlocation-details i {
        color: #1d4ed8;
    }

.schedule-info-card {
    background: #f1f5f9;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.schedule-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.schedule-date {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.schedule-label {
    font-size: 13px;
    color: #6b7280;
}

.schedule-info-card i {
    font-size: 18px;
    color: #1d4ed8;
}

.roomcancel-title {
    font-size: 16px !important;
    font-weight: 600;
    color: #1A202C;
    margin-bottom: 6px;
}

.cancel-subtext {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 16px;
}

/* Base box */
.cancel-box {
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 12px;
}

.green-box {
    background: #ecfdf5;
}

.yellow-box {
    background: #fefce8;
}

.red-box {
    background: #fef2f2;
}

.cancel-row {
    display: flex;
    align-items: center;
}

.cancel-left {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.cancel-icon {
    font-size: 16px;
    font-weight: bold;
    margin-top: 2px;
}

.green-icon {
    color: #10b981;
}

.yellow-icon {
    color: #f59e0b;
}

.red-icon {
    color: #ef4444;
}

.cancel-main-text {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.cancel-date-text {
    font-size: 13px;
    color: #6b7280;
}

.amenity-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #111827;
    padding: 3px 0;
}

.cancelicon {
    width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
}

.edit-title {
    font-size: 16px !important;
}

.doc-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    color: #374151;
}

    .doc-input:focus {
        border-color: #1d4ed8;
        box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.15);
        outline: none;
    }

.small-input {
    width: 33.33%;
    padding: 10px 10px;
}


/* end */



/* Admin css */

/* container */
.user-dropdown {
    --gap: .75rem;
    display: flex;
    align-items: center;
    gap: var(--gap);
}

    .user-dropdown.dropdown {
        position: relative;
    }

.avatar-btn {
    height: 40px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border: 0;
    background: transparent;
}

.avatar {
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.dropdown-divider {
    height: 1px;
}

.avatar-wrap {
    position: relative;
    display: inline-block;
}

.status-dot {
    position: absolute;
    right: -2px;
    top: -2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #2ecc71;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px rgba(44, 160, 44, 0.06);
}


.admin-user-info {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
}

.user-name {
    font-weight: 500;
    color: #0f172a;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.user-role {
    font-size: 0.78rem;
    color: #6b7280;
    font-weight: 500;
    margin-top: 2px;
}


.caret-icon {
    width: 14px;
    height: 14px;
    fill: #6b7280;
    vertical-align: middle;
}

.dropdown-header-card {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: .75rem 1rem;
    border-radius: 8px;
    background: #f1f8f6;
    margin: .25rem .75rem;
}


.dropdown-item:hover {
    background: #e6f0f7;
    color: #000;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-menu.to-top {
    min-width: 220px;
    max-width: 220px;
}

/* === navbar css start === */
.navbar-header {
    height: 4.5rem;
    background-color: var(--white);
    position: sticky;
    top: 0;
    padding: 1rem 1.5rem;
    z-index: 2;
}

.sidebar-toggle,
.sidebar-mobile-toggle {
    line-height: 1.2;
    color: var(--text-primary-light);
}

    .sidebar-toggle .icon,
    .sidebar-mobile-toggle .icon {
        font-size: 1.375rem;
    }

.sidebar-toggle {
    display: none;
}

@media (min-width: 1200px) {
    .sidebar-toggle {
        display: inline-block;
    }
}

.sidebar-toggle.active .icon.non-active {
    display: none;
}

.sidebar-toggle.active .icon.active {
    display: inline-block;
}

.sidebar-toggle .icon.active {
    display: none;
}

.sidebar-mobile-toggle {
    display: inline-block;
}

@media (min-width: 1200px) {
    .sidebar-mobile-toggle {
        display: none;
    }
}

.navbar-search {
    position: relative;
    display: none;
}

@media (min-width: 992px) {
    .navbar-search {
        display: inline-block;
    }
}

.navbar-search input {
    width: 24.25rem;
    height: 2.5rem;
    background-color: var(--neutral-50);
    border: 1px solid var(--input-form-light);
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    padding-block: 0.3125rem;
    padding-inline-start: 2.625rem;
    padding-inline-end: 1.25rem;
    color: var(--text-primary-light);
}

    .navbar-search input:focus {
        border-color: var(--primary-600);
    }

.navbar-search .icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-start: 0.9375rem;
    font-size: 1.125rem;
    color: var(--black);
}

[data-theme-toggle] {
    font-size: 0;
    position: relative;
}

    [data-theme-toggle]::after {
        position: absolute;
        content: "\f1bf";
        font-family: remixicon;
        font-style: normal;
        font-size: 1.25rem;
        color: var(--text-primary-light);
    }

    [data-theme-toggle][aria-label="dark"]::after {
        content: "\ef6f";
        color: #fff;
    }

.positioned-icon {
    inset-inline-start: 16px;
}

/* === navbar css end === */
/* === sidebar css start === */
.sidebar {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: -100%;
    width: 15.625rem;
    height: 100vh;
    background-color: var(--white);
    z-index: 3;
}

@media (min-width: 1200px) {
    .sidebar {
        inset-inline-start: 0;
        width: 13.75rem;
    }
}

@media (min-width: 1400px) {
    .sidebar {
        width: 17.1875rem;
    }
}

@media (min-width: 1650px) {
    .sidebar {
        width: 19.5rem;
    }
}

@media (min-width: 1200px) {
    .sidebar-close-btn {
        display: none;
    }
}

.sidebar.sidebar-open {
    inset-inline-start: 0;
}

.sidebar.active {
    width: 86px;
}

    .sidebar.active:hover {
        width: auto;
    }

    .sidebar.active .sidebar-menu li a i {
        margin-inline-end: 16px;
    }

@media (min-width: 1200px) {
    .sidebar.active:hover {
        inset-inline-start: 0;
    }
}

@media (min-width: 1400px) {
    .sidebar.active:hover {
        width: 17.1875rem;
    }
}

@media (min-width: 1650px) {
    .sidebar.active:hover {
        width: 19.5rem;
    }
}

.sidebar.active:hover .sidebar-logo img.light-logo {
    display: inline-block;
}

.sidebar.active:hover .sidebar-logo img.logo-icon {
    display: none;
}

.sidebar.active:hover .sidebar-menu li a span {
    display: inline-block;
}

.sidebar.active:hover .sidebar-menu li a .menu-icon {
    margin-inline-end: 0.5rem;
}

.sidebar.active:hover .sidebar-menu li.dropdown.dropdown-open .sidebar-submenu,
.sidebar.active:hover .sidebar-menu li.dropdown.open .sidebar-submenu {
    display: block !important;
}

.sidebar.active:hover .sidebar-menu li.sidebar-menu-group-title {
    display: inline-block;
}

.sidebar.active:hover .sidebar-menu li.dropdown a::after {
    display: inline-block;
}

.sidebar.active .sidebar-logo img.light-logo,
.sidebar.active .sidebar-logo img.dark-logo {
    display: none;
}

.sidebar.active .sidebar-logo img.logo-icon {
    display: inline-block;
}

.sidebar.active .sidebar-menu li a span {
    display: none;
}

.sidebar.active .sidebar-menu li a .menu-icon {
    margin-inline-end: 0;
}

.sidebar.active .sidebar-menu li.sidebar-menu-group-title {
    display: none;
}

.sidebar.active .sidebar-menu li.dropdown.dropdown-open .sidebar-submenu,
.sidebar.active .sidebar-menu li.dropdown.open .sidebar-submenu {
    display: none !important;
}

.sidebar.active .sidebar-menu li.dropdown a::after {
    display: none;
}

@media (max-width: 768px) {
    .sidebar-logo {
        border-inline-end: none !important;
        margin-left:10px;
    }
    .addition-div {
        max-width:2%;
    }
}

@media (min-width: 769px) {
    .addition-div {
        display: none !important;
    }
}

.sidebar-logo {
    height: 4.5rem;
    padding: 0.875rem 1rem;
    border-inline-end: 1px solid var(--neutral-200);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

    .sidebar-logo img {
        max-height: 4.5rem; 
        width: auto;
    }

        .sidebar-logo img.dark-logo {
            display: none;
        }

        .sidebar-logo img.logo-icon {
            display: none;
        }

.sidebar-menu-area {
    height: calc(100vh - 72px);
    /* padding: 0.75rem 1rem; */
    overflow-y: auto;
    border-inline-end: 1px solid var(--neutral-200);
}

    .sidebar-menu-area:hover::-webkit-scrollbar-thumb {
        background-color: var(--neutral-200);
    }

    .sidebar-menu-area::-webkit-scrollbar {
        width: 6px;
        background-color: var(--white);
    }

    .sidebar-menu-area::-webkit-scrollbar-thumb {
        background-color: var(--white);
    }

.sidebar-menu li.dropdown > a {
    position: relative;
}

    .sidebar-menu li.dropdown > a::after {
        content: "";
        position: absolute;
        inset-block-start: 50%;
        inset-inline-end: 0.75rem;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        background: url('../images/dropdown-arrow.svg') no-repeat center;
        background-size: contain;
    }

@media (min-width: 1650px) {
    .sidebar-menu li.dropdown > a::after {
        font-size: 1.375rem;
    }
}

.sidebar-menu li.dropdown.open > a,
.sidebar-menu li.dropdown.dropdown-open > a {
    background-color: #E5EFFF;
    color: #2D3748;
}

    .sidebar-menu li.dropdown.open > a:hover,
    .sidebar-menu li.dropdown.dropdown-open > a:hover {
        color: #718096;
    }

    .sidebar-menu li.dropdown.open > a::after,
    .sidebar-menu li.dropdown.dropdown-open > a::after {
        -webkit-transform: translateY(-50%) rotate(90deg);
        -ms-transform: translateY(-50%) rotate(90deg);
        transform: translateY(-50%) rotate(90deg);
    }

.sidebar-menu li.dropdown.open .sidebar-submenu {
    display: block;
}

.sidebar-menu li.active > a {
    background-color: #E5EFFF;
    color: #2d3748;
}

    .sidebar-menu li.active > a:hover {
        color: #2d3748;
    }

.sidebar-menu li a {
    padding: 0.725rem 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    color: var(--text-secondary-light);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    font-size: 14px;
}

@media (min-width: 1650px) {
    .sidebar-menu li a {
        font-size: 1rem;
    }
}

.sidebar-menu li a:hover {
    color: #1f7bf4;
}

.sidebar-menu li a .menu-icon {
    font-size: 1.125rem;
    margin-inline-end: 0.5rem;
}

.select-site {
    width: 100%;
    margin-bottom: 16px;
}

@media (min-width: 1650px) {
    .sidebar-menu li a .menu-icon {
        font-size: 1.375rem;
        margin-inline-end: 0.75rem;
    }
}

.sidebar-menu li a i {
    line-height: 1.2;
    width: 24px;
    margin-inline-end: 0.75rem;
    font-size: 1.375rem;
}

.sidebar-menu li a .circle-icon {
    font-size: 0.625rem;
}

.sidebar-menu .sidebar-submenu {
    padding-block-start: 0.75rem;
    display: none;
    padding-inline-start: 1.5rem;
    transition: none;
}

@media (min-width: 1650px) {
    .sidebar-menu .sidebar-submenu {
        padding-inline-start: 2.75rem;
    }
}

.sidebar-menu .sidebar-submenu li.active-page a {
    background-color: var(--button-secondary);
    color: var(--text-primary-light);
}

.sidebar-menu .sidebar-submenu li a {
    padding: 0.4375rem 0.75rem;
}

.sidebar-menu .sidebar-menu-group-title {
    color: var(--neutral-500);
    font-weight: 600;
    margin-block: 0.5rem;
    font-size: 0.875rem;
}

@media (min-width: 1650px) {
    .sidebar-menu .sidebar-menu-group-title {
        font-size: 1rem;
    }
}

.toggle-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 6px;
    padding: 8px;
    border: 1px solid #e2e8f0;
    margin-top: 5px !important;
    margin: 0px auto;
}

    .toggle-pill button {
        border: none;
        background: transparent;
        padding: 6px 14px;
        font-size: 0.9rem;
        color: #4b5563;
        border-radius: 0.375rem;
        cursor: pointer;
    }

        .toggle-pill button.active {
            background: #e6f0f7;
            color: #0f1724;
            font-weight: 600;
            box-shadow: 0 0 0 1px rgba(15, 23, 36, 0.03);
        }

.toggle-content {
    margin-top: 1rem;
}

.heading h6 {
    font-size: 18px;
    margin-top: 10px;
}

/* === sidebar css end === */
/* === breadcrumb css start === */
/* === breadcrumb css end === */
/* === dashboard body css start === */

.flightbg {
    background: #F7FAFC;
    padding: 5px;
}

.dashboard-main {
    margin-inline-start: 0;
    display: flex;
    flex-wrap: wrap;
    flex-flow: column;
    min-height: 100vh;
    transition: all 0.3s;
}

@media (min-width: 1200px) {
    .dashboard-main {
        margin-inline-start: 13.75rem;
    }
}

@media (min-width: 1400px) {
    .dashboard-main {
        margin-inline-start: 17.1875rem;
    }
}

@media (min-width: 1650px) {
    .dashboard-main {
        margin-inline-start: 19.5rem;
    }
}

.dashboard-main-body {
    padding: 0px;
}

@media (min-width: 1400px) {
    .dashboard-main-body {
        padding: 0px;
    }
}

@media (min-width: 1199px) {
    .dashboard-main.active {
        margin-inline-start: 5.375rem;
    }
}

/* === dashboard body css end === */
/* === footer css start === */
.d-footer {
    padding: 1.375rem 1.5rem;
    background-color: var(--white);
    margin-block-start: auto;
}

/* Booking page */

.action-bar {
    background: #fff;
    border: 1px solid #e6eef7;
    height: 60px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    align-items: center;
}

.pnr-input {
    min-width: 220px;
    max-width: 360px;
}

    .pnr-input .form-control {
        border-radius: 6px;
        border: 1px solid #e6eef7;
        height: 38px;
        font-size: 14px;
        color: #718096;
        background: #fbfdff;
    }

.btn-import {
    height: 38px;
    border-radius: 6px;
    margin-left: 8px;
    color: #1a202c;
    font-size: 14px;
    background: #edf2f7;
}

.btn-refresh {
    height: 38px;
    border-radius: 6px;
    margin-left: 8px;
    color: #2d3748;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
}

.pagination-center {
    min-width: 240px;
    text-align: center;
    color: #4b5563;
    /* muted dark */
    font-size: 0.95rem;
}

.pag-controls .btn {
    height: 36px;
    width: 36px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid #e6eef7;
    background: #fff;
}

.toggle-btn {
    height: 36px;
    width: 36px;
    border-radius: 8px;
    border: 1px solid #e6eef7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    margin-left: 10px;
}

/* DESKTOP HEADER */
.table-header {
    background: #f7fafc;
    display: grid;
    grid-template-columns: 0.7fr 2fr 1fr 1fr 1fr 0.5fr;
    align-items: center;
    padding: 10px 14px;
    margin-bottom: 16px;
    box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02);
}

    .table-header .col-label {
        font-size: 14px;
        color: #718096;
        font-weight: 600;
        padding: 6px 12px;
    }

        .table-header .col-label + .col-label {
            border-left: 1px solid rgba(14, 28, 50, 0.04);
        }

    .table-header .center {
        text-align: center;
    }

    .table-header .end {
        text-align: right;
    }

/* CARD GRID DESKTOP */
.reservation-pendin-grow,
.reservation-ticket-row {
    display: grid;
    grid-template-columns: 6px 140px 1fr 150px 150px 150px 80px;
}

/* ---------- MOBILE VIEW (<600px) ---------- */
@media (max-width: 600px) {


    .table-header {
        display: none !important;
    }

    .reservation-pendin-grow,
    .reservation-ticket-row {
        grid-template-columns: 1fr;
    }


        .reservation-pendin-grow > div,
        .reservation-ticket-row > div {
            position: relative;
            padding-top: 15px;
        }

            .reservation-pendin-grow > div::before,
            .reservation-ticket-row > div::before {
                content: attr(data-label);
                /* position: absolute; */
                top: 6px;
                left: 10px;
                font-size: 16px;
                margin-bottom: 10px;
                /* background: #e0e0e0; */
                font-weight: 600;
                /* width: 100%; */
                /* padding: 10px; */
                color: #24272b;
            }
}



.reservation-card {
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    /* overflow visible so dropdown menus are not clipped */
    overflow: visible;
    position: relative;
}

.reservation-row,
.reservation-ticket-row,
.reservation-Canceled-row,
.reservation-pendin-grow {
    display: grid;
    grid-template-columns: 6px 220px 1fr 220px 220px 180px 70px;
    border-radius: 6px;
    overflow: hidden;
}

    /* left vertical blue bar */
    .reservation-pendin-grow > .bar {
        background: linear-gradient(180deg, #1f7bf4);
    }

    .reservation-ticket-row > .bar {
        background: linear-gradient(180deg, #f79009);
    }

    .reservation-Canceled-row > .bar {
        background: linear-gradient(180deg, #F04438);
    }

/* main left cell with code & status */
.ref-cell {
    padding: 18px 16px;
    border-right: 1px solid #e2e8f0;
    text-align: center;
}

.ref-code {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f5f9ff;
    color: #1f7bf4;
    font-weight: 600;
    font-size: 12px;
    border: 1px solid rgba(37, 99, 235, 0.08);
}

    .status-pill::before {
        content: "";
        width: 8px;
        height: 8px;
        background: #1f7bf4;
        border-radius: 50%;
    }

.status-pill2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
    padding: 6px 10px;
    border-radius: 999px;
    background: #FFF5D8;
    color: #F78E09;
    font-weight: 600;
    font-size: 12px;
    border: 1px solid rgba(37, 99, 235, 0.08);
}

    .status-pill2::before {
        content: "";
        width: 8px;
        height: 8px;
        background: #F78E09;
        border-radius: 50%;
    }

.col-cell {
    padding: 12px;
    border-right: 1px solid #e2e8f0;
}

    .col-cell .sub-title {
        color: #718096;
        font-size: 12px;
        font-weight: 500;
    }

.muted-text {
    color: #1a202c;
    font-size: 13px;
}

.two-row {
    display: flex;
    flex-direction: column;
}

.compact-list {
    padding-left: 0;
    margin: 0;
    list-style: none;
    font-size: 13px;
}

.price-badge {
    font-weight: 500;
    font-size: 14px;
    color: #1a202c;
}

.published {
    display: inline-block;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    background: #eefaf0;
    color: #12b76a;
    font-weight: 500;
}

/* 📲 TABLET FIX (768px–1024px) */
@media (min-width: 768px) and (max-width: 1024px) {

    .reservation-pendin-grow,
    .reservation-ticket-row {
        grid-template-columns: 8px 120px 1fr 160px 160px 160px 60px;
        gap: 0;
    }

    .ref-cell {
        padding: 14px 10px;
    }

    .col-cell {
        padding: 10px;
    }

    .muted-text,
    .compact-list li {
        font-size: 12px;
    }

    .price-badge {
        font-size: 13px;
    }
}

@media (max-width: 768px) {

    .reservation-pendin-grow,
    .reservation-ticket-row {
        grid-template-columns: 1fr;
    }

    .col-cell,
    .ref-cell {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }

    .actions-col {
        display: flex !important;
        justify-content: space-between !important;
        padding: 12px !important;
        border: none;
    }

    .price-badge {
        height: auto;
    }

    hr {
        margin: 10px 0;
    }

    .input-group .btn {
        position: relative;
        z-index: 0 !important;
    }
}

/* right-most action column */

.input-group .btn {
    position: relative;
    z-index: 0 !important;
}

.action-bar-icon {
    height: 20px;
    width: 20px;
    object-fit: contain;
}

.toggle-btn {
    background: transparent;
    border: none;
    padding: 4px 8px;
}

@media (max-width: 576px) {
    .pagination-box {
        justify-content: space-between !important;
    }

    .mobile-tight {
        gap: 4px !important;
    }

    .pagination-box span {
        margin-right: 8px;
    }
}

.actions-col {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.arrow-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

    .arrow-btn:hover {
        background: #e1ebfb;
    }

.dot-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #e5efff;
    background: #e5efff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .dot-btn:hover {
        background: #e1ebfb;
    }

/* dropdown card styled like image */
.dropdown-menu.custom {
    min-width: 160px;
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
}

    .dropdown-menu.custom .dropdown-item {
        border-radius: 8px;
        /* margin:4px; */
    }

.mt-8 {
    margin-top: 18px !important;
}

/* responsive adjustments */
@media (max-width: 1100px) {
    .reservation-row {
        grid-template-columns: 6px 160px 1fr 160px 150px 120px 60px;
    }

    .ref-cell .ref-code {
        font-size: 16px;
    }
}

@media (max-width: 760px) {
    .reservation-row {
        grid-template-columns: 6px 1fr;
    }

    .ref-cell {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .col-cell {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .reservation-row > .bar {
        display: block;
    }

    .reservation-row > *:not(.bar) {
        grid-column: span 1;
    }

    .arrow-btn {
        margin-bottom: 0px;
    }
}

/* tiny helpers */
.created-meta {
    font-size: 14px;
    color: #1a202c;
}

.small-meta {
    font-size: 12px;
    color: #718096;
    margin-top: 6px;
}

.show-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #1f7bf4;
    cursor: pointer;
}

    .show-more img {
        width: 12px;
        height: 12px;
        display: inline-block;
        object-fit: contain;
        margin-top: 1px;
    }



@media (max-width: 575.98px) {
    .action-bar {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .pagination-center {
        order: 3;
    }

    .left-group,
    .right-group {
        justify-content: space-between;
    }
}

/* Sidebar card */

.filter-card {
    width: 100%;
    background: var(--panel-bg);
/*    border-radius: 8px;
    border: 1px solid #ebeff4;*/
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.04);
    /* padding: 18px; */
}

    .filter-card h5 {
        font-size: 16px !important;
        background: #f7fafc;
        padding: 10px 16px;
        border: 1px solid #e2e8f0;
    }

.filter-details {
    padding: 18px;
}

.field-space {
    margin-bottom: 15px;
}

.filter-label {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
    color: #1a202c;
}

.helper-text {
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px;
}

/* SELECT: Left text + Right arrow */
.form-select {
    height: 44px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    padding: 6px 12px;
    font-size: 14px;
    text-align: left !important;
    text-align-last: left !important;
    -moz-text-align-last: left;
    direction: ltr;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
}

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

input[type="checkbox"] {
    background-color: initial;
    cursor: default;
    appearance: auto;
    box-sizing: border-box;
    margin: 3px 3px 3px 4px;
    padding: initial;
    border: initial;
}

/* MULTI SELECT */
.multi-select {
    position: relative;
}

.multi-input {
    min-height: 35px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 10px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Chips Left */
.chips {
    order: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
    justify-content: flex-start;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--chip-bg);
    padding: 4px 4px;
    border-radius: 999px;
    border: 1px solid var(--chip-border);
    font-size: 12px;
    font-weight: 500;
}

    .chip .remove {
        background: transparent;
        border: none;
        cursor: pointer;
        font-size: 16px;
        color: #475569;
    }

/* CARET ALWAYS RIGHT */
.multi-input .caret {
    order: 2;
    /* always last */
    flex: 0 0 auto;
    margin-left: auto;
    /* push to right */
    pointer-events: none;
    font-size: 16px;
    color: var(--muted);
}

.multi-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e6edf5;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
    padding: 8px 10px;
    display: none;
    z-index: 50;
    max-height: 220px;
    overflow-y: auto;
}

    .multi-dropdown label {
        display: flex;
        gap: 8px;
        padding: 6px 0;
        font-size: 14px;
        cursor: pointer;
    }

/* ─── table header small-label ─── */
.small-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

/* ─── Booking top action bar ─── */
.booking-topbar {
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
}

.booking-import-group {
    display: flex;
    align-items: center;
    height: 36px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    flex: 0 0 290px;
}

    .booking-import-group input {
        flex: 1;
        border: none;
        outline: none;
        padding: 0 10px;
        font-size: 13px;
        color: #374151;
        background: transparent;
        height: 100%;
    }

    .booking-import-group input::placeholder {
        color: #94a3b8;
    }

    .booking-import-group .import-btn {
        flex: 0 0 auto;
        height: 100%;
        padding: 0 14px;
        border: none;
        border-left: 1px solid #cbd5e1;
        background: #1e40af;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.03em;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 5px;
        transition: background 0.15s;
        white-space: nowrap;
    }

        .booking-import-group .import-btn:hover {
            background: #1d4ed8;
        }

.booking-topbar-divider {
    width: 1px;
    height: 22px;
    background: #e2e8f0;
    flex-shrink: 0;
}

.booking-topbar-icon-btn {
    height: 36px;
    padding: 0 12px;
    border-radius: 7px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

    .booking-topbar-icon-btn:hover {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

    .booking-topbar-icon-btn.primary-action {
        background: #054688;
        border-color: #054688;
        color: #fff;
    }

        .booking-topbar-icon-btn.primary-action:hover {
            background: #0455a5;
            border-color: #0455a5;
        }

.booking-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .booking-pagination .page-count {
        font-size: 12px;
        color: #64748b;
        font-weight: 500;
        min-width: 80px;
        text-align: right;
    }

    .booking-pagination .pg-btn {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        border: 1px solid #e2e8f0;
        background: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.15s;
        padding: 0;
    }

        .booking-pagination .pg-btn:hover:not(:disabled) {
            background: #f1f5f9;
        }

        .booking-pagination .pg-btn:disabled {
            opacity: 0.35;
            cursor: default;
        }

/* ─── Empty state ─── */
.booking-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    color: #94a3b8;
}

    .booking-empty-state .empty-icon {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        background: #f1f5f9;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
    }

        .booking-empty-state .empty-icon i {
            font-size: 24px;
            color: #94a3b8;
        }

    .booking-empty-state h6 {
        font-size: 15px;
        font-weight: 600;
        color: #334155;
        margin-bottom: 4px;
    }

    .booking-empty-state p {
        font-size: 13px;
        color: #94a3b8;
        margin: 0;
    }

/* ─── Export buttons (CSV / PDF) ─── */
/* CSV / PDF buttons row */
.file-buttons {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    font-size: 13px;
    margin-bottom: 14px;
}

    .file-buttons .btn {
        flex: 1 1 50%;
        height: 38px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 600;
    }

.btn-export-csv {
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    color: #065f46;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s;
}

    .btn-export-csv:hover:not(:disabled) {
        background: #d1fae5;
        border-color: #34d399;
        color: #065f46;
    }

.btn-export-pdf {
    background: #eff6ff;
    border: 1px solid #93c5fd;
    color: #1e3a8a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s;
}

    .btn-export-pdf:hover:not(:disabled) {
        background: #dbeafe;
        border-color: #60a5fa;
        color: #1e3a8a;
    }

.apply-btn {
    width: 100%;
    height: 36px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    background: #054688;
    color: #fff;
}

    .apply-btn:hover {
        background: #0455a5;
        color: #fff;
    }

.placeholderr {
    display: inline-block;
    min-height: 1em;
    vertical-align: middle;
    cursor: wait;
    opacity: 0.5;
    font-size: 13px;
}

/* overlay */
.filter-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 998;
    display: none;
    transition: opacity 0.25s ease;
    opacity: 0;
}

/* right slide panel */
.filter-slide-panel {
    position: fixed;
    top: 0;
    right: -380px;
    width: 360px;
    max-width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.08);
    z-index: 999;
    padding: 15px;
    transition: right 0.35s ease;
    overflow-y: auto;
}

.close-filter {
    background: transparent;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #333;
}

.filter-slide-panel.open {
    right: 0;
}

.filter-overlay.show {
    display: block;
    opacity: 1;
}

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

.select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    pointer-events: none;
}

.custom-wide-modal {
    max-width: 92%;
}

.modal-content {
    border: 0;
    border-radius: 6px;
    overflow: hidden;
}

.modal-header.custom-header {
    background: #fff;
    color: #ffffff;
    padding: 16px 24px;
    position: relative;
}

.flli {
    color: #000;
}

.modal-header.custom-header h5 {
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.4px;
    font-size: 20px;
}

.status-pill-pop {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #eaf2ff;
    color: #1e66ff;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
}

    .status-pill-pop::before {
        content: "";
        width: 8px;
        height: 8px;
        background: #1f7bf4;
        border-radius: 50%;
    }

.meta-row {
    color: #718096;
    font-size: 14px;
}

.modal-body.custom-body {
    padding: 20px 22px;
    background: #fff;
    color: #222;
}

.close-top {
    position: absolute;
    right: 12px;
    top: 0px;
    width: 46px;
    height: 46px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 0;
    color: #030000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .close-top:hover {
        background: rgba(255, 255, 255, 0.12);
    }

/* two column layout inside modal body */
.details-left {
    border-right: 1px solid #eef2f6;
    padding-right: 22px;
}

@media (max-width: 767px) {
    .details-left {
        border-right: 0;
        padding-right: 0;
        padding-bottom: 12px;
    }
}

.small-heading {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 4px;
}

.big-value {
    font-size: 20px;
    font-weight: 700;
    color: #0b1220;
}


.img-preview {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid #e6eef6;
    background: #f7fbff;
}


.info-row {
    gap: 0.75rem;
    align-items: center;
}

.info-item {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* allow truncation */
}

    .info-item + .info-item {
        /* vertical divider between items */
        border-left: 1px solid rgba(0, 0, 0, 0.08);
    }

.info-label {
    font-size: 14px;
    color: #718096;
    margin-bottom: 0.25rem;
    white-space: nowrap;
}

.info-value {
    font-size: 16px;
    color: #1A202C;
    font-weight: 500;
    line-height: 1.05;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.total-item {
    text-align: right;
    padding-left: 1.5rem;
    min-width: 130px;
}

.total-label {
    font-size: 0.78rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
    white-space: nowrap;
}

.total-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0b1726;
}

.top-tabs .nav-link {
    color: #425466;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    margin-left: 10px;
}

    .top-tabs .nav-link.active {
        background: #E5EFFF;
        color: #2D3748;
        font-size: 14px;
        box-shadow: none;
    }


.card-air {
    border-radius: 6px;
    box-shadow: none;
    border: 1px solid #E2E8F0;
    margin: 0;
    margin-bottom: 10px;
}

    .card-air .card-header {
        background: transparent;
        border-bottom: 1px solid #eef3f7;
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 12px 16px;
    }

.section-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 600;
    color: #0b1726;
}

.price-badge-title {
    margin-left: auto;
    color: #0b1726;
    font-weight: 700;
    font-size: 1rem;
}

.sub-tabs .nav-link {
    color: #425466;
    padding: 2px 8px;
    border-radius: 6px;
    /* margin-bottom: 10px; */
}

    .sub-tabs .nav-link.active {
        background: #E5EFFF;
        color: #2D3748;
    }

.table thead th {
    background: #f8fafc;
    border: 1px solid #e6eef6;
    font-weight: 500;
    font-size: 12px;
    color: #718096;
    vertical-align: middle;
}

.table tbody td {
    vertical-align: middle;
    font-size: 14px;
    color: #1A202C;
    border: 1px solid #E2E8F0;
}

.card-body {
    padding: 10px !important;
}

/* Tariff details */

.Tariff-card {
    border-radius: 12px;
    border: 1px solid #e4ecf4;
    background: #fff;
    margin-top: 10px;
}


.tariff-info-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .75rem 1.25rem;
    border-bottom: 1px solid #edf2f7;
}

.tariff-info-item {
    display: flex;
    flex-direction: column;
    padding-right: 1.5rem;
    margin-right: 1.5rem;
    border-right: 1px solid rgba(148, 163, 184, .45);
    min-width: 8rem;
}

.info-item:last-child {
    border-right: none;
    margin-right: 0;
    /* padding-right:0; */
}

.info-label {
    font-size: 14px;
    color: #718096;
    margin-bottom: .1rem;
    white-space: nowrap;
}

.info-value {
    font-size: 14px;
    font-weight: 500;
    color: #1A202C;
}

.toggle-btn[aria-expanded="true"] img {
    transform: rotate(180deg);
}

.cabin-body {
    padding: 1.0rem 1.25rem 1.25rem;
}

.cabin-title {
    font-size: .95rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: .75rem;
}


.feature-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 2.5rem;
    row-gap: .55rem;
}

.feature-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #1A202C;
    min-width: 0;
}

.icon-check,
.icon-off {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: .45rem;
    font-size: .8rem;
}

.icon-check {
    border: 1.7px solid #2AC084;
    color: #2AC084;
    background: #ecfdf3;
}

.icon-off {
    border: 1.7px solid #cbd5e1;
    color: #cbd5e1;
    background: #f8fafc;
}

.icon-paid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: #e5edf8;
    color: #4b6cb7;
    font-size: .8rem;
    margin-right: .45rem;
}


.service-card {
    border-radius: 12px;
    border: 1px solid #E2E8F0;
    background: #ffffff;
}

    .service-card thead th {
        background: #F7FAFC;
        font-size: 12px;
        font-weight: 500;
        color: #718096;
        border-bottom: 1px solid #E2E8F0;
        border-left: 1px solid #E2E8F0;
        white-space: nowrap;
    }

    .service-card tbody td {
        border-top: 1px solid #E2E8F0;
        border-left: 1px solid #E2E8F0;
        color: #1A202C;
    }

    .service-card table tr td:first-child,
    .service-card table thead th:first-child {
        border-left: none !important;
    }


.fare-card {
    border: 1px solid #e5ecf4;
    border-radius: 12px;
    background: #fff;
}

.fare-title {
    padding: 0.9rem 1rem;
    font-weight: 500;
    color: #718096;
    border-bottom: 1px solid #e5ecf4;
    font-size: 12px;
}

.fare-table thead th {
    background: #F7FAFC;
    font-size: 14px;
    white-space: nowrap;
    color: #1A202C;
    font-weight: 600;
    border-bottom: 1px solid #e5ecf4;
    border-left: 1px solid #e5ecf4;
}


    .fare-table thead th:first-child,
    .fare-table tbody td:first-child {
        border-left: none !important;
    }

.fare-table tbody td {
    border-top: 1px solid #e8edf3;
    border-left: 1px solid #e5ecf4;
    vertical-align: top;
    padding: 0.55rem 0.65rem;
    font-size: .9rem;
    color: #222;
}

.fare-total-row td {
    font-weight: 700;
    background: #fafbfd;
}

.final-total {
    padding: 1rem;
    text-align: right;
    font-weight: 700;
    font-size: 16px;
    color: #1A202C;
}

.final-note {
    color: #718096;
    font-size: 14px;
    font-weight: 500;
    margin-right: 1rem;
}

.booking-table {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}


    .booking-table .table {
        margin-bottom: 0;
    }

.toggle-btn {
    border: 0;
    background: transparent;
    padding: 0;
}

    .toggle-btn img {
        width: 22px;
        transition: transform .2s ease;
    }

    .toggle-btn[aria-expanded="true"] img {
        transform: rotate(180deg);
    }

.rental-card {
    border-radius: 12px;
    border: 1px solid #e4ecf4;
    background: #fff;
    margin: 0.75rem;
    overflow: hidden;
}

.rental-header {
    padding: .75rem 1rem;
    border-bottom: 1px solid #edf2f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rental-title {
    font-size: .9rem;
    font-weight: 600;
    color: #111827;
}

/* tabs on right */
.rental-tabs .nav-link {
    font-size: .8rem;
    padding: .25rem .8rem;
    border-radius: 999px;
    border: 0;
    margin-left: .25rem;
    color: #4b5563;
    background: transparent;
}

    .rental-tabs .nav-link.active {
        background: #e4efff;
        color: #1e3a8a;
    }

.rental-top-info {
    padding: .7rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    border-bottom: 1px solid #edf2f7;
}

.rental-info-item {
    display: flex;
    flex-direction: column;
    padding-right: 1.5rem;
    margin-right: 1.5rem;
    border-right: 1px solid #e4ecf4;
    min-width: 9rem;
}

    .rental-info-item:last-child {
        border-right: none;
        margin-right: 0;
        padding-right: 0;
    }

.rental-label {
    font-size: .78rem;
    color: #6b7280;
    margin-bottom: .1rem;
}

.rental-value {
    font-size: .9rem;
    font-weight: 600;
    color: #111827;
}

.rental-body {
    display: flex;
    border-top: 1px solid #f1f5f9;
}

.rental-col {
    flex: 1;
    padding: .8rem 1rem 1rem;
}

    .rental-col + .rental-col {
        border-left: 1px solid #edf2f7;
    }

.rental-col-title {
    font-size: .8rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: .5rem;
}

.rental-row-label {
    font-size: .8rem;
    color: #6b7280;
    min-width: 80px;
}

.rental-row-value {
    font-size: .9rem;
    color: #111827;
}

.rental-row {
    display: flex;
    gap: 1.5rem;
    margin-bottom: .25rem;
}

.pricing-card {
    border-radius: 12px;
    border: 1px solid #e4ecf4;
    background: #fff;
    padding: 0;
    overflow: hidden;
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

    /* header row */
    .pricing-table thead th {
        background: #f8fafc;
        font-size: .78rem;
        font-weight: 600;
        color: #64748b;
        padding: .5rem .75rem;
        border-bottom: 1px solid #e4ecf4;
        border-left: 1px solid #e4ecf4;
        text-align: left;
        white-space: nowrap;
    }

        .pricing-table thead th:first-child {
            border-left: none;
        }

    /* body cells */
    .pricing-table tbody td {
        padding: .55rem .75rem;
        border-top: 1px solid #edf2f7;
        border-left: 1px solid #e4ecf4;
        color: #0f172a;
        vertical-align: middle;
    }

        .pricing-table tbody td:first-child {
            border-left: none;
        }

/* summary header row (Detail / Value) */
.summary-header td {
    background: #f8fafc;
    font-size: .78rem;
    color: #64748b;
    font-weight: 600;
}

/* summary rows on right */
.summary-row td {
    font-size: .88rem;
}

    .summary-row td:nth-child(2) {
        width: 160px;
        white-space: nowrap;
    }

/* bold total row */
.summary-total td {
    font-weight: 700;
}

/* customer details */

.table-wrapper {
    width: 100%;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e4ecf4;
    border-radius: 12px;
    overflow: hidden;
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead th {
    background: #f8fafc;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-align: left;
    border-bottom: 1px solid #e4ecf4;
    border-left: 1px solid #e4ecf4;
    white-space: nowrap;
}


tbody td {
    padding: 9px 12px;
    border-top: 1px solid #edf2f7;
    border-left: 1px solid #e4ecf4;
    vertical-align: middle;
    font-size: 14px;
}



.form-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 25px;
    background: #fff;
}

label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 4px;
}

/* input, select {
      height: 42px;
      border-radius: 8px !important;
      border: 1px solid #dce3eb !important;
      font-size: 0.88rem;
    } */


hr {
    margin: 10px 0 20px !important;
    border-color: 1px solid #e2e8f0 !important;
}

.btn-send {
    background: #0d4acf;
    color: #fff;
    padding: 8px 25px;
    border-radius: 6px;
    font-size: 0.95rem;
    margin-top: 10px;
}

.panel {
    background: #fff;
    border: 1px solid #e6eef8;
    border-radius: 10px;
    overflow: hidden;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid #eef4fa;
}

.panel-title {
    font-weight: 600;
}

/* tabs on right */
.panel-tabs .nav-link {
    font-size: .88rem;
    color: #4b5563;
    border-radius: 999px;
    padding: 6px 12px;
}

    .panel-tabs .nav-link.active {
        background: #e6f0fb;
        color: #0b3b6f;
        font-weight: 600;
        border: 1px solid #dbeafc;
    }

/* small section titles like "Card 1: ..." */
.card-section-title {
    padding: 12px 18px;
    font-weight: 500;
    font-size: 14px;
    color: #282b30;
    background: #ffffff;
    border: 1px solid #eef4fa;
}

.details-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}

    .details-table th {
        text-align: left;
        font-size: 12px;
        color: #718096;
        padding: 10px 14px;
        background: #F7FAFC;
        border-bottom: 1px solid #eef4fa;
        border-left: 1px solid #eef4fa;
    }

        .details-table th:first-child {
            border-left: none;
        }

    .details-table td {
        padding: 8px 16px;
        font-size: 14px;
        border-top: 1px solid #f1f6fb;
        border-left: 1px solid #eef4fa;
        vertical-align: middle;
    }

        .details-table td:first-child {
            border-left: none;
        }

.summary-box {
    padding: 18px;
}

.summary-row {
    /* display:flex; */
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f1f6fb;
    font-size: .95rem;
}

    .summary-row.total {
        font-weight: 700;
        border-top: 1px solid #eef4fa;
        padding-top: 12px;
    }



.info-card {
    background: #fff;
    border: 1px solid #e7eef8;
    border-radius: 8px;
    padding: 18px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.00);
}

.meta-row {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.meta-item {
    gap: 1rem;
    align-items: flex-start;
}

.label {
    color: #718096;
    font-size: 14px;
    min-width: 120px;
    font-weight: 5600;
}

.value {
    color: #1A202C;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 500;
}

.notice {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eef4fa;
    color: #0b1726;
    font-size: .92rem;
}

.paymentt-main-table th {
    background: #f3f6fb;
    font-size: 14px;
    font-weight: 600;
}

.paymentt-summary-table th {
    background: #f3f6fb;
    font-size: 14px;
    font-weight: 600;
}

.paymentt-summary-wrapper {
    border-left: 1px solid #dce2eb;
    margin-top: 10px;
    padding-left: 0;
}

.paymentt-summary-table td {
    font-size: 14px;
    padding: 10px 12px;
}

.paymentt-total-row td {
    font-weight: 700;
    font-size: 15px;
}

.panlebg {
    background: var(--panel-bg) !important;
    border: 1px solid #E2E8F0;
}

/* Manage Trip */

.manage-top-alert {
    background: #eaf3ff;
    border-left: 4px solid #4a90e2;
    padding: 10px 15px;
    font-size: 14px;
    color: #004a8f;
}

.manage-section-title {
    font-size: 18px;
    font-weight: 600;
}

.manage-trip-info-row span {
    font-size: 14px;
    color: #666;
}

.table thead th {
    background: #f6f8fa;
    font-weight: 600;
}

.manage-custom-tabs {
    border-bottom: none !important;
}

    .manage-custom-tabs .nav-link {
        margin-right: 8px;
        border-radius: 6px;
        font-size: 14px;
        padding: 8px 12px;
        color: #425466;
        font-weight: 500;
    }

        .manage-custom-tabs .nav-link.active {
            background: #E5EFFF;
            font-size: 14px;
            border: 1px solid #d1d5db;
            color: #111827;
            font-weight: 500;
        }

/* Card */
.empty-state {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.empty-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    color: #94a3b8;
    font-size: 18px;
}

.empty-title {
    font-weight: 600;
    color: #0f172a;
    font-size: 16px;
    margin-bottom: 4px;
}

.empty-text {
    color: #64748b;
    font-size: 14px;
    max-width: 360px;
    margin: 0 auto;
}

.emission-info-bar {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 15px 16px;
}

.emission-info-item {
    font-size: 14px;
    color: #718096;
}

.emission-info-value {
    font-size: 14px;
    font-weight: 500;
    color: #1A202C;
    margin-top: 2px;
}

.divider {
    width: 1px;
    background: #e5e7eb;
    margin: 0 20px;
}

/* Mobile stacking */
@media (max-width: 576px) {
    .divider {
        display: none;
    }
}

.thomalex-info-alert {
    background-color: #e8f2ff;
    color: #1f7bf4;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    display: flex;
    font-weight: 600;
    border: 1px solid #99c0ff;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 20px;
    margin: 0px auto;
}

    .thomalex-info-alert button {
        background: none;
        border: none;
        color: #6c757d;
        font-size: 18px;
        line-height: 1;
    }


.manage-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.manage-item {
    white-space: nowrap;
}

.separator {
    margin: 0 8px;
    color: #aaa;
}

.pass-name {
    font-size: 20px !important;
    color: #1A202C;
    font-weight: bold;
}

.fligt-bg {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eef1f6;
}

.trip-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 15px;
}

.status-pill {
    background: #e6f0ff;
    color: #2f6fe4;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
}

.manage-trip-label {
    font-size: 14px;
    color: #718096;
    margin-bottom: 3px;
}

.manage-trip-value {
    font-size: 14px;
    color: #111827;
    font-weight: 500;
}

.info-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between; /* ⭐ Total Price ko right le jayega */
}

/* Left side items grouped */
.info-left {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.item .info-box {
    display: block;
}

.item .manage-info-value {
    display: block;
    margin-top: 2px;
}

.divider {
    border-left: 1px solid #dcdcdc;
    height: 32px;
    margin: auto 16px;
}

.info-box {
    font-size: 14px;
    color: #6c7a8a;
}

.manage-info-value {
    font-size: 14px;
    font-weight: 500;
    color: #1A202C;
}

.bordert-b {
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
}

.custom-dropdownn {
    width: 220px;
    position: relative;
}

.dropdown-selected {
    padding: 6px 11px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.selected-dot {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: none; /* ⭐ Default hidden dot */
}

.dropdown-menu {
    position: absolute;
    top: 48px;
    width: auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0px 4px 18px rgba(0,0,0,0.08);
    padding: 10px 0;
    display: none;
    z-index: 10;
}

.dropdown-menu.car-sort-dropdown {
    z-index: 100;
}

.dropdown-item {
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .dropdown-item:hover {
        background: #eef4ff;
    }

.dot {
    height: 10px;
    width: 10px;
    border-radius: 50%;
}

    .dot.green {
        background: #16a34a;
    }

    .dot.blue {
        background: #3b82f6;
    }

    .dot.orange {
        background: #f59e0b;
    }

    .dot.red {
        background: #ef4444;
    }

.submit-btn {
    margin-top: 12px;
    width: 100%;
    background: #3b82f6;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}



/* ---------------- MOBILE VIEW ---------------- */
@media (max-width: 576px) {

    .heading h6 {
        font-size: 16px !important;
        margin-top: 10px;
    }

    /* Mobile: ALL items should stack */
    .info-container {
        display: block;
    }

    .info-left {
        display: block;
    }

    .item {
        width: 100%;
        margin-bottom: 15px;
    }

        /* Mobile: label + value same line */
        .item .info-box,
        .item .manage-info-value {
            display: inline;
        }

        .item .manage-info-value {
            margin-left: 5px;
        }

    .divider {
        display: none;
    }

    /* Total Price always last on mobile */
    .total-price {
        margin-top: 10px !important;
        display: block !important;
    }

    .manage-inline {
        display: block;
    }

    .manage-item {
        display: block;
        margin-bottom: 10px;
        white-space: normal;
    }

    .separator {
        display: none;
    }
}


/* Dropdown Menu */
.dropdown-menu {
    border-radius: 10px;
    padding: 8px;
    min-width: 160px;
}

.dropdown-item {
    padding: 8px 15px;
    font-size: 14px;
    border-radius: 6px;
}

    .dropdown-item:hover {
        background-color: #eef3ff;
    }

    .dropdown-item.active {
        background-color: #e5edff !important;
        color: #1d4ed8 !important;
    }

    .dropdown-item.text-danger:hover {
        background-color: #ffecec;
    }

.menu-btn {
    background: #f1f3f7;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    border: 1px solid #d8dce1;
}

    .menu-btn:hover {
        background: #e6e9ef;
    }

@media (max-width: 576px) {

    /* buttons number ke bilkul paas */
    .pagination-box {
        justify-content: flex-start !important;
        gap: 8px;
    }



        .pagination-box span {
            margin-right: 4px;
        }

    .mobile-tight {
        gap: 4px !important;
    }

    .pag-controls .btn {
        padding: 2px 6px !important;
    }
}


/* smaller screens */
@media (max-width:600px) {
    .meta-item {
        min-width: 150px;
    }

    .label {
        min-width: 110px;
        font-size: .82rem;
    }
}

@media (max-width:768px) {
    .panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: .6rem;
    }

    .panel-tabs {
        align-self: flex-end;
    }
}

@media (max-width:768px) {
    .rental-body {
        flex-direction: column;
    }

    .rental-col + .rental-col {
        border-left: none;
        border-top: 1px solid #edf2f7;
    }
}

/* responsive small-screen adjustments */
@media (max-width: 768px) {
    .card-air .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: .6rem;
    }

    .price-badge {
        margin-left: 0;
    }

    .table-responsive {
        overflow-x: auto !important;
        font-size: .92rem;
    }
}

@media (max-width: 640px) {
    .info-row {
        flex-direction: column;
        align-items: stretch;
    }

    .info-item + .info-item {
        border-left: none;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }

    .total-item {
        text-align: left;
        padding-left: 1rem;
    }
}

@media (max-width: 420px) {
    .filter-slide-panel {
        width: 100%;
        right: -100%;
    }

        .filter-slide-panel.open {
            right: 0;
        }
}

@media (max-width: 420px) {
    .filter-card {
        width: 100%;
    }
}

@media (max-width:1200px) {
    .feature-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width:768px) {
    .info-item {
        border-right: none;
        border-bottom: 1px solid rgba(148, 163, 184, .3);
        padding-bottom: .3rem;
        margin-bottom: .3rem;
    }

        .info-item:last-child {
            border-bottom: none;
        }

    .feature-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1.5rem;
    }
}

@media (max-width:576px) {
    .feature-list {
        grid-template-columns: 1fr;
    }
}

/* Site Selecetion*/

.sitenav-tabs {
    border-bottom: 1px solid #e2e8f0;
    background-color: #fff;
}

.sitenavbar-header {
    height: 4.5rem;
    background-color: var(--white);
    position: sticky;
    top: 0;
    margin: 0px auto;
    z-index: 1030;
    border-bottom: 1px solid #d0d5d9;
}

.navbar-dropdown {
    border-inline-start: 1px solid var(--neutral-200);
    height: 4.5rem;
    padding: 1rem;
    background-color: white;
    border-bottom: 1px solid #d0d5d9;
}


.sitenav-tabs .nav-link {
    color: #6c757d;
    border: none;
    background: transparent;
    font-weight: 500;
    font-size: 14px;
    padding: 14px 20px;
}

    .sitenav-tabs .nav-link.active {
        background-color: #ffffff;
        color: #377DFF;
        border-bottom: 2px solid #377DFF;
        font-weight: 600;
    }


.font-semibold {
    font-weight: 600 !important;
    font-size: 25px !important;
}

.text-gray-900 {
    color: #1A202C;
}

.fontsize {
    font-size: 20px !important;
}

.sitedashboard-main {
    margin-inline-start: 0;
    display: flex;
    flex-wrap: wrap;
    flex-flow: column;
    transition: all 0.3s;
}

@media (min-width: 1200px) {
    .sitedashboard-main {
        margin-inline-start: 13.75rem;
    }
}

@media (min-width: 1400px) {
    .sitedashboard-main {
        margin-inline-start: 17.1875rem;
    }
}

@media (min-width: 1650px) {
    .sitedashboard-main {
        margin-inline-start: 19.5rem;
    }
}

.sitedashboard-main-body {
    padding: 0px;
}

@media (min-width: 1400px) {
    .sitedashboard-main-body {
        padding: 0px;
    }
}

@media (min-width: 1199px) {
    .sitedashboard-main.active {
        margin-inline-start: 5.375rem;
    }
}


.sitebar {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: -100%;
    width: 15.625rem;
    background-color: var(--white);
    z-index: 3;
}

@media (min-width: 1200px) {
    .sitebar {
        inset-inline-start: 0;
        width: 13.75rem;
    }
}

@media (min-width: 1400px) {
    .sitebar {
        width: 17.1875rem;
    }
}

@media (min-width: 1650px) {
    .sitebar {
        width: 19.5rem;
    }
}

@media (min-width: 1200px) {
    .sitebar-close-btn {
        display: none;
    }
}

.sitebar.sitebar-open {
    inset-inline-start: 0;
}

.sitebar.active {
    width: 86px;
}

    .sitebar.active:hover {
        width: auto;
    }

    .sitebar.active .sitebar-menu li a i {
        margin-inline-end: 16px;
    }

@media (min-width: 1200px) {
    .sitebar.active:hover {
        inset-inline-start: 0;
    }
}

@media (min-width: 1400px) {
    .sitebar.active:hover {
        width: 17.1875rem;
    }
}

@media (min-width: 1650px) {
    .sitebar.active:hover {
        width: 19.5rem;
    }
}

.sitebar.active:hover .sitebar-logo img.light-logo {
    display: inline-block;
}

.sitebar.active:hover .sitebar-logo img.logo-icon {
    display: none;
}

.sitebar.active:hover .sitebar-menu li a span {
    display: inline-block;
}

.sitebar.active:hover .sitebar-menu li a .menu-icon {
    margin-inline-end: 0.5rem;
}

.sitebar.active:hover .sitebar-menu li.dropdown.dropdown-open .sitebar-submenu,
.sitebar.active:hover .sitebar-menu li.dropdown.open .sitebar-submenu {
    display: block !important;
}

.sitebar.active:hover .sitebar-menu li.sitebar-menu-group-title {
    display: inline-block;
}

.sitebar.active:hover .sitebar-menu li.dropdown a::after {
    display: inline-block;
}

.sitebar.active .sitebar-logo img.light-logo,
.sitebar.active .sitebar-logo img.dark-logo {
    display: none;
}

.sitebar.active .sitebar-logo img.logo-icon {
    display: inline-block;
}

.sitebar.active .sitebar-menu li a span {
    display: none;
}

.sitebar.active .sitebar-menu li a .menu-icon {
    margin-inline-end: 0;
}

.sitebar.active .sitebar-menu li.sitebar-menu-group-title {
    display: none;
}

.sitebar.active .sitebar-menu li.dropdown.dropdown-open .sitebar-submenu,
.sitebar.active .sitebar-menu li.dropdown.open .sitebar-submenu {
    display: none !important;
}

.sitebar.active .sitebar-menu li.dropdown a::after {
    display: none;
}

.sitebar-logo {
    height: 4.5rem;
    padding: 0.875rem 1rem;
    border-inline-end: 1px solid var(--neutral-200);
    border-block-end: 1px solid var(--neutral-200);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.site-name {
    font-size: 1.2rem;
    font-weight: 700;
}

@media(max-width:768px){
    .site-name{
        font-size:1rem;
    }
}
    .sitebar-logo img {
        max-height: 3.4375rem;
    }

    .sitebar-logo img.dark-logo {
        display: none;
    }

    .sitebar-logo img.logo-icon {
        display: none;
    }

.site-tabs .nav-link {
    font-weight: 500;
    color: #555;
}

    .site-tabs .nav-link.active {
        color: #0d6efd;
        border-bottom: 2px solid #0d6efd;
    }

.site-table th {
    font-size: 14px;
    color: #6b7280;
    white-space: nowrap;
}

.site-table td {
    font-size: 14px;
}

.site-table a {
    color: #054688;
    text-decoration: none;
    text-decoration: underline;
}

    .site-table a:hover {
        text-decoration: underline;
    }

.filter-row th {
    background: #fafafa;
}

.site-table .form-select {
    height: 40px;
    font-size: 14px;
    padding: 6px 10px;
    width: 150px;
}

.badge {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 20px;
}

.bg-success {
    background-color: #21ba45 !important;
    border-color: #21ba45 !important;
}

.org-table th {
    font-size: 14px;
    color: #6b7280;
    white-space: nowrap;
}

.org-table td {
    font-size: 14px;
    vertical-align: middle;
}

.org-table .btn-light {
    background: #f1f5f9;
    border: none;
}

.org-table .dropdown-menu {
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.customers-table th {
    font-size: 14px;
    color: #6b7280;
    white-space: nowrap;
}

.customers-table td {
    font-size: 14px;
    vertical-align: middle;
}

.customers-table td,
.customers-table th {
    padding: 14px 16px;
}

.create-org-btn {
    background-color: #054688;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 7px 18px;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}

    .create-org-btn:hover {
        background-color: #0658a9 !important;
        color: #c7c5c5 !important;
    }


.plus-icon {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

.card {
    padding: 10px;
}

.org-card {
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.Organization {
    color: #093E84;
}

.form-label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.form-control,
.form-select {
    height: 44px;
    font-size: 16px;
    font-weight: 400;
    color: var(--text-secondary-light);
}

.phone-code {
    max-width: 80px;
}

.logo-upload-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.logo-box {
    width: 160px;
    height: 60px;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: #475569;
    cursor: pointer;
    background: #f8fafc;
}

    .logo-box:hover {
        background: #f1f5f9;
    }


.border-bottom {
    border-bottom: 1px solid #c7c5c5;
}

.mb-6 {
    margin-bottom: 15px;
}

.mt-211 {
    margin-top: 40px !important;
}

.status-toggle {
    display: flex;
    align-items: center;
    gap: 14px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.switchslider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #f1f1f1;
    border-radius: 30px;
    transition: 0.3s;
}

    .switchslider::before {
        content: "";
        position: absolute;
        height: 20px;
        width: 20px;
        left: 2px;
        top: 2px;
        background-color: #fff;
        border-radius: 50%;
        box-shadow: 0 1px 4px rgba(0,0,0,0.2);
        transition: 0.3s;
    }

/* ✅ FIXED */
.switch input:checked + .switchslider {
    background-color: #2185d0;
}

    .switch input:checked + .switchslider::before {
        transform: translateX(20px);
    }

/* text */
.status-text {
    font-size: 15px;
    font-weight: 500;
    color: #111827;
}


.input-with-clear {
    position: relative;
}

.clear-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #6b7280;
    cursor: pointer;
}

.btn-cancel {
    background: #f1f5f9;
    border-radius: 8px;
    padding: 8px 18px;
}

.btn-save {
    background: #0f3d7a;
    color: #fff;
/*    border-radius: 8px;*/
    padding: 8px 22px;
}

    .btn-save:hover {
        background: #0c2f5e;
        color: #fff;
    }

.status-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .status-toggle label {
        margin: 0;
    }

.switch {
    position: relative;
    display: flex;
    align-items: center;
    width: 46px;
    height: 24px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.switchslider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #d1d5db;
    border-radius: 30px;
    transition: 0.3s;
}

    .switchslider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        border-radius: 50%;
        transition: 0.3s;
    }

.switch input:checked + .switchslider {
    background-color: #0a4ea3;
}

    .switch input:checked + .switchslider:before {
        transform: translateX(22px);
    }

.switchslider:hover {
    box-shadow: 0 0 0 4px rgba(10, 78, 163, 0.15);
}

.status-text {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    display: flex;
    align-items: center;
}





/* Hotal  */
.guest-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 18px;
    padding: 16px;
    z-index: 9999;
    width: 350px;
}

    .guest-dropdown.show {
        display: block;
    }

.room-block {
    padding-bottom: 12px;
    margin-bottom: 12px;
}

    .room-block h6 {
        font-weight: 600;
        margin-bottom: 8px;
    }

.remove-room {
    float: right;
    color: #3F8CFF;
    display: block;
}

.add-room {
    width: 100%;
    float: right;
    color: #3F8CFF;
}

.counter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

    .counter-row small {
        display: block;
        color: #64748b;
    }

.counter {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .counter button {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1px solid #3b82f6;
        background: #fff;
        color: #3b82f6;
        font-size: 18px;
        line-height: 1;
        text-align: center;
    }

    .counter span {
        min-width: 24px;
        text-align: center;
        display: inline-block;
    }


.hotal-dropdown-wrapper {
    position: relative;
    width: 100%;
}

/* Select box */
.hotal-dropdown {
    border: 1px solid #cbd5e0;
    border-radius: 10px;
    padding: 10px 13px;
    background: #fff;
    cursor: pointer;
}


    .hotal-dropdown::after {
        content: "";
        position: absolute;
        right: 14px;
        top: 50%;
        width: 8px;
        height: 8px;
        border-right: 2px solid #3b82f6;
        border-bottom: 2px solid #3b82f6;
        transform: translateY(-50%) rotate(45deg);
        transition: transform 0.25s ease;
    }

    /* Arrow rotate on open */
    .hotal-dropdown.active::after {
        transform: translateY(-50%) rotate(-135deg);
    }


.hotal-dropdown-label {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
}

.hotal-dropdown-placeholder {
    font-size: 14px;
    font-weight: 600;
    color: #94a3b8;
}

/* Dropdown menu */
.hotal-dropdown-menu-custom {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 15px 40px rgba(0,0,0,.12);
    display: none;
    z-index: 1000;
}

    .hotal-dropdown-menu-custom.show {
        display: block;
    }

/* Search */
.hotal-dropdown-search-input {
    border-radius: 10px;
}

/* Items */
.hotal-dropdown-item-custom {
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #334155;
    margin-top: 6px;
}

    .hotal-dropdown-item-custom:hover,
    .hotal-dropdown-placeholder.active {
        background: #eaf2ff;
    }


.hotal-radius-filter {
    width: 300px;
    color: #fff;
    font-family: system-ui, sans-serif;
}

/* Header */
.hotal-radius-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.thomalex-filter-option input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #CBD5E1;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
}

    .thomalex-filter-option input[type="radio"]:checked {
        border-color: #1f7bf4;
    }

        .thomalex-filter-option input[type="radio"]:checked::after {
            content: "";
            width: 10px;
            height: 10px;
            background: #1f7bf4;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

.thomalex-filter-option span {
    margin-left: 10px;
}

.bold-price {
    color: #1A202C;
    font-size: 20px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    padding: 10px;
}

.manageprice {
    font-size: 1.3rem;
    font-weight: 700;
    color: #000;
}

.swap-icon-mulity2 {
    position: absolute;
    left: 48%;
    top: calc(30% 0%) !important;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    padding: 7px 8px;
    z-index: 2;
    cursor: pointer;
    margin-top: 33px;
    transition: all 0.3s ease;
}

.sort-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

    .sort-link img {
        width: 12px;
        height: 12px;
    }



.styled-select-box select {
    margin-top: -15px;
}

.swap-icon-results {
    top: calc(65.4% - 0px);
}


/* Additional discount sizing */
.discount {
    width: 120px;
}

.fare-card-select .pricee {
    /* margin-top: -32px; */
}

.sidebar {
    width: 260px;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.select-site {
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    background: #F7FAFC;
    color: #1A202C;
}

    .select-site:focus {
        border-color: #054688;
        box-shadow: 0 0 0 3px rgba(5, 70, 136, 0.1);
        outline: none;
    }

.toggle-pill {
    padding: 4px;
    border: 1px solid #E2E8F0;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

    .toggle-pill button {
        /*flex: 1;*/
        padding: 8px 16px;
        font-size: 14px;
        font-weight: 500;
        color: #4B5563;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
    }

        .toggle-pill button:hover {
            color: #1A202C;
        }

        .toggle-pill button.active {
            background: #E5EFFF;
            color: #1A202C;
            font-weight: 600;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

.badge {
    padding: 6px 12px;
    font-size: 13px;
}


.form-check-selection {
    padding: 6px 22px;
    display: inline-block;
    color: #1a202c;
    transition: background 0.2s;
}

.dropdown-item i {
    font-size: 16px;
}


.Airsection-title {
    font-weight: 600;
    font-size: 20px;
    color: #093E84;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 8px;
    margin-bottom: 20px;
}


.iataCheck {
    height: 12em;
    min-height: 8em;
    max-height: 24em;
}

.Airform-control,
.Airform-select {
    height: 44px;
    font-size: 14px;
}


.Airtoggle-switch {
    width: 42px;
    height: 22px;
}


.Airmarkup-box {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    background: #fff;
}


.Airmulti-select {
    position: relative;
}

.Airmulti-select-input {
    height: 44px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: 6px;
    padding: 10px 40px 10px 12px;
    cursor: pointer;
    background: #fff;
    position: relative;
    padding-right: 28px;
}

    .Airmulti-select-input::after {
        content: "";
        position: absolute;
        right: 10px;
        top: 50%;
        width: 14px;
        height: 14px;
        transform: translateY(-50%);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-size: contain;
    }

.Airmulti-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    margin-top: 6px;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    z-index: 1000;
    display: none;
}

    .Airmulti-dropdown.show {
        display: block;
    }


.Airsearch-box {
    position: relative;
    margin-bottom: 10px;
}

    .Airsearch-box input {
        padding-right: 35px;
    }

    .Airsearch-box i {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
    }


.Airaction-links {
    font-size: 14px;
    margin-bottom: 8px;
}

    .Airaction-links span {
        cursor: pointer;
        margin-right: 15px;
        color: #0d6efd;
    }


.Aircheckbox-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    cursor: pointer;
}


.info-icon {
    width: 19px;
    height: 19px;
    font-size: 15px;
    line-height: 19px;
    border-radius: 50%;
    background: #e9f1ff;
    color: #0d6efd;
    text-align: center;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
}

.datetimepicker-input {
    cursor: pointer;
}

.datetimepicker-input--clearable {
    padding-right: 2.5rem;
}

.input-group:has(> .form-control.is-invalid) > .input-group-text {
    border-color: var(--bs-form-invalid-border-color);
}

.datetimepicker-input.is-invalid.datetimepicker-input--clearable {
    padding-right: 3.75rem;
}

.datetimepicker-input.is-invalid ~ .datetimepicker-clear {
    right: 2.5rem;
}

.datetimepicker-clear {
    position: absolute;
   
    top: calc(50% - 3px);
    right: 1.25rem;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.datetimepicker-clear:hover {
    opacity: 0.7;
}

.datetimepicker-clear img {
    width: 14px;
    height: 14px;
    display: block;
}


.table th {
    background: #f5f7fb;
    font-weight: 600;
}


:root {
    --header-height: 72px;
    --sidebar-width: 260px;
    --header-z-index: 1030;
    --sidebar-z-index: 1025;
    --nav-z-index: 1020;
}




.sitenavbar-header .user-dropdown {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sitenavbar-header .avatar-wrap {
    position: relative;
    display: inline-block;
}

.sitenavbar-header .status-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: #10b981;
    border: 2px solid #ffffff;
    border-radius: 50%;
}

.sitenavbar-header .user-info {
    text-align: left;
}

.sitenavbar-header .user-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--neutral-900);
    line-height: 1.2;
}

.sitenavbar-header .avatar-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
}

.sitenavbar-header .caret-icon {
    width: 20px;
    height: 20px;
}

@media (max-width: 768px) {
    .sitenavbar-header {
        /*        padding: 0.75rem 1rem;*/
        min-height: 60px;
    }
}


.dashboard-wrapper {
    min-height: calc(100vh - var(--header-height));
    position: relative;
}

    .dashboard-wrapper.no-sidebar {
        padding-left: 0;
    }

        .dashboard-wrapper.no-sidebar .sidebar {
            display: none;
        }

        .dashboard-wrapper.no-sidebar .dashboard-main {
            margin-left: 0;
        }

        .dashboard-wrapper.no-sidebar .sidebar-overlay {
            display: none !important;
        }


.sidebar-header {
    padding: 1.5rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    background: #fff;
}

.logo-area {
    flex: 1;
}

.sidebar-close {
    background: none;
    border: none;
    color: #718096;
    cursor: pointer;
    padding: 0.25rem;
    display: none;
    font-size: 1.5rem;
    line-height: 1;
}

    .sidebar-close:hover {
        color: var(--neutral-700);
    }


.sidebar-nav {
    padding: 1rem 0;
}

.sidebar-menu-item {
    margin-bottom: 0.25rem;
}

.sidebar-link,
.sidebar-link.dropdown-toggle {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.25rem;
    color: var(--neutral-600);
    text-decoration: none;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 500;
}

    .sidebar-link:hover {
        background: var(--neutral-100);
        color: var(--neutral-900);
    }

    .sidebar-link.active {
        background: #eff6ff;
        color: #2563eb;
        border-left-color: #2563eb;
    }

    .sidebar-link .menu-icon {
        font-size: 1.25rem;
        margin-right: 0.75rem;
        flex-shrink: 0;
    }

    .sidebar-link .menu-text {
        flex: 1;
    }

    .sidebar-link .dropdown-icon {
        font-size: 1rem;
        transition: transform 0.2s ease;
    }

.sidebar-menu-item.has-dropdown .sidebar-link .dropdown-icon {
    transform: rotate(0deg);
}

.sidebar-menu-item.has-dropdown.show .dropdown-icon {
    transform: rotate(180deg);
}


.sidebar-submenu {
    display: none;
    background: var(--neutral-50);
    padding-left: 1rem;
}

    .sidebar-submenu.show {
        display: block;
    }

.sidebar-sublink {
    display: flex;
    align-items: center;
    padding: 0.625rem 1.25rem 0.625rem 2.5rem;
    color: var(--neutral-500);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

    .sidebar-sublink:hover {
        color: var(--neutral-900);
        background: var(--neutral-100);
    }

    .sidebar-sublink.active {
        color: #2563eb;
        font-weight: 500;
    }

    .sidebar-sublink .submenu-icon {
        font-size: 1rem;
        margin-right: 0.625rem;
    }


.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1020;
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .sidebar-overlay.show {
        display: block;
        opacity: 1;
    }


.employee-nav {
    padding: 0 1.5rem;
    background: #ffffff;
    border-bottom: 1px solid var(--neutral-200);
    position: sticky;
    top: var(--header-height);
    z-index: var(--nav-z-index);
}


@media (max-width: 768px) {
    :root {
        --header-height: 60px;
    }

    .sidebar {
        transform: translateX(-100%);
    }

        .sidebar.open {
            transform: translateX(0);
        }

    .sidebar-close {
        display: block;
    }

    .dashboard-main {
        margin-left: 0;
    }

    .employee-nav {
        top: 60px;
        padding: 0 1rem;
    }

    .dashboard-main-body {
        padding: 1rem;
    }

    .sitenavbar-header .user-info {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .sidebar {
        width: 100%;
        max-width: 280px;
    }
}


body:has(.sitenavbar-header) .sidebar {
    top: 10px;
    height: 100vh;
}

body:has(.sitenavbar-header) .dashboard-wrapper {
    min-height: calc(100vh - var(--header-height));
}

body:has(.sitenavbar-header) .employee-nav,
body:has(.sitenavbar-header) .nav-tabs {
    position: sticky;
    top: 0;
}

iconify-icon {
    display: inline-block;
    vertical-align: middle;
}

.Aircheckbox-list {
    overflow-y: auto;
    max-height: 300px;
    min-height: 100px;
}

/* Added from right file */
.side-menu-icon {
    margin-right: 0.5rem;
    height: 20px;
    width: 20px;
}

.side-nav {
    background-color: var(--white) !important;
    width: 280px;
    font-size: .875rem;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 1020;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
    transition: width 0.25s ease;
}

/* Position side-nav below header when header is present */
body:has(.sitenavbar-header) .side-nav {
    top: 4.5rem;
    height: calc(100vh - 4.5rem);
}

/* Side-nav menu item text color */
.side-nav .nav-link {
    color: #6c757d;
}

    .side-nav .nav-link:hover {
        border-radius: 5px;
        color: #495057;
        background: #F6F7F9;
    }

    .side-nav .nav-link.active {
        border-radius: 5px;
        background: #E5EFFF;
        color: #1A202C;
    }

/* Ensure dropdowns/collapse work properly in side-nav */
.side-nav .collapse {
    transition: height 0.35s ease;
}

    .side-nav .collapse.show {
        display: block;
    }

.side-nav .collapsing {
    transition: height 0.35s ease;
    overflow: hidden;
}

/* Scrollbar styling for side-nav */
.side-nav::-webkit-scrollbar {
    width: 6px;
}

.side-nav::-webkit-scrollbar-track {
    background: var(--white);
}

.side-nav::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

.side-nav:hover::-webkit-scrollbar-thumb {
    background-color: var(--neutral-300);
}

/* Offset main content when side-nav is present */
.side-nav ~ .flex-grow-1 {
    margin-left: 280px;
    transition: margin-left 0.25s ease;
}

/* Responsive styles for smaller screens */
@media (max-width: 768px) {
    .side-nav {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

        .side-nav.open {
            transform: translateX(0);
        }

        .side-nav ~ .flex-grow-1 {
            margin-left: 0;
        }
}

.site-selection-link {
    border-bottom: 1px solid var(--neutral-200);
    border-style: dashed;
}

/* ===== Collapsible admin side-nav ===== */
/* White, rounded toggle button; font matches the nav items. */
.collapse-menu-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 1rem;
    background: var(--white);
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    color: #6c757d;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

    .collapse-menu-btn:hover {
        color: #495057;
        background: #F6F7F9;
    }

/* Chevron is masked so it inherits the button's font colour (incl. hover). */
.collapse-menu-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url('../images/leftarrow.svg') no-repeat center / contain;
    mask: url('../images/leftarrow.svg') no-repeat center / contain;
}

.side-nav.collapsed .collapse-menu-chevron {
    -webkit-mask-image: url('../images/rightarrow.svg');
    mask-image: url('../images/rightarrow.svg');
}

/* Dropdown caret */
.side-nav-caret {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url('../images/dropdown-arrow.svg') no-repeat center / contain;
    mask: url('../images/dropdown-arrow.svg') no-repeat center / contain;
    transition: transform 0.2s ease;
}

.side-nav .nav-dropdown > .nav-link[aria-expanded="true"] .side-nav-caret {
    transform: rotate(180deg);
}

/* Sub-menu items: left guide line with a comfortable gap */
.side-nav .nav-dropdown .collapse .side-nav-subnav {
    margin-left: 1rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--neutral-200);
}


.side-nav .nav-dropdown .collapse .side-nav-subnav .nav-link {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    white-space: nowrap;
}

/* Collapsed layout is a desktop affordance only, so the mobile slide-in
   drawer always keeps its full labels. */
@media (min-width: 769px) {
    .side-nav.collapsed {
        width: 72px;
    }

        .side-nav.collapsed ~ .flex-grow-1 {
            margin-left: 72px;
        }

        /* Hide every textual label; keep the icons. */
        .side-nav.collapsed .collapse-menu-text,
        .side-nav.collapsed .toggle-pill,
        .side-nav.collapsed .nav-link > span,
        .side-nav.collapsed .nav-dropdown .side-nav-caret,
        .side-nav.collapsed .nav-dropdown .collapse {
            display: none;
        }

        /* Centre the toggle chevron when collapsed. */
        .side-nav.collapsed .collapse-menu-btn {
            justify-content: center;
            padding-left: 0;
            padding-right: 0;
        }

        /* Centre the menu icons in the narrow rail. */
        .side-nav.collapsed .nav-link {
            justify-content: center;
            padding-left: 0;
            padding-right: 0;
        }

        .side-nav.collapsed .side-menu-icon {
            margin-right: 0;
        }

        /* Collapsed dropdowns */
        .side-nav.collapsed .nav-dropdown {
            position: relative;
        }

        /* Let the fly-out escape the rail's vertical scroll while a group is hovered. */
        .side-nav.collapsed:has(.nav-dropdown:hover) {
            overflow: visible;
        }

        .side-nav.collapsed .nav-dropdown:hover > .collapse {
            display: block;
            position: absolute;
            top: 0;
            left: 100%;
            margin-left: 6px;
            min-width: 220px;
            padding: 6px;
            background: var(--white);
            border: 1px solid var(--neutral-200);
            border-radius: 8px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
            z-index: 1050;
        }

        /* Drop the collapsed indent, guide line and re-align links inside the fly-out. */
        .side-nav.collapsed .nav-dropdown:hover > .collapse .nav.flex-column {
            margin-left: 0 !important;
            padding-left: 0;
            border-left: 0;
        }

        .side-nav.collapsed .nav-dropdown:hover > .collapse .nav-link {
            justify-content: flex-start;
            padding: 6px 12px;
            white-space: nowrap;
        }
}

/* The collapse toggle is hidden on mobile; the existing slide-in handles it. */
@media (max-width: 768px) {
    .collapse-menu-btn {
        display: none;
    }
}

/* Dark hover label shown for the collapsed rail's icons. */
.side-nav-tooltip {
    font-size: .8125rem;
}

/*Matrix*/

.compare-wrapper {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 20px;
}

.compare-table {
    table-layout: auto;
    min-width: max-content;
}

.compare-table th,
.compare-table td {
    text-align: center;
    vertical-align: top;
    padding: 14px 12px;
    border: 1px solid #e5e7eb;
    white-space: nowrap;
    min-width: 130px;
}

    .compare-table th:first-child,
    .compare-table td:first-child {
        text-align: left;
        font-weight: 600;
    }


.booingairline-name {
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 auto;
}

.booingairline-name img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}


.booingprice {
    color: #0d6efd;
    font-weight: 600;
    cursor: pointer;
}


.booingdash {
    color: #9ca3af;
}


.booingtable-responsive {
    overflow-x: auto;
}

.table-responsive {
   overflow-x: unset;
}

.datalist-room-for-menu {
    min-height: 260px;
}

.compare-table td,
.compare-table th {
    cursor: pointer;
}

    .compare-table td.hover-col,
    .compare-table th.hover-col {
        background: #eef4ff;
    }

    .compare-table td.active-col,
    .compare-table th.active-col {
        background: #eef4ff;
        color: #000;
        font-weight: 600;
    }

/*Result page search*/

.thomalesflight-header {
    background: #ffffff;
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e2e2;
}

.thomalesback-btn {
    font-size: 14px;
    padding: 8px 22px;
    background: #0a3478;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .thomalesback-btn:hover,
    .thomalesback-btn:focus {
        background: #08285c;
        color: #ffffff;
    }

/* Sign in / Register (B2C) - navy trigger per ADO Figma design (pairs with the Back button) */
.thomales-signin-btn {
    font-size: 14px;
    padding: 8px 22px;
    background: #054688;
    color: #ffffff;
    border: 1px solid #054688;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .thomales-signin-btn:hover,
    .thomales-signin-btn:focus {
        background: #1678c2;
        border-color: #1678c2;
        color: #ffffff;
    }

/* Cart auth modal actions - per ADO mockup: Login/Recovery = navy (sc-auth-lightblue), Register = green (sc-auth-green) */
.btn.sc-auth-green {
    background-color: #21ba45;
    border-color: #21ba45;
    color: #ffffff;
}

    .btn.sc-auth-green:hover,
    .btn.sc-auth-green:focus {
        background-color: #16ab39;
        border-color: #16ab39;
        color: #ffffff;
    }

.btn.sc-auth-lightblue {
    background-color: #054688;
    border-color: #054688;
    color: #ffffff;
}

    .btn.sc-auth-lightblue:hover,
    .btn.sc-auth-lightblue:focus {
        background-color: #1678c2;
        border-color: #1678c2;
        color: #ffffff;
    }

/* Route text */
.thomalesroute-text {
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    color: #000;
}

/* Icons section */
.thomalesinfo-section i {
    font-size: 18px;
}

.thomalessmall-text {
    font-weight: 600;
    font-size: 14px;
}

.thomaleslabel-text {
    font-size: 14px;
    color: #171717;
    font-weight: 700;
}

/* Modify button */
.thomalesmodify-btn {
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
}

.dropdown-selected {
    background: #e8e8e8;
    padding: 2px 8px 2px 10px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    white-space: nowrap;
    height: 24px;
}

.chip-container .advanced-close-btn {
    font-weight: bold;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 0 2px;
    margin-left: 2px;
    color: #666;
    transition: color 0.2s;
}

.advanced-close-btn:hover {
    color: #000;
}

.chip-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-height: 28px;
}

.custom-dropdown-wrapper {
    position: relative;
}

    .custom-dropdown-wrapper .custom-dropdown {
        border: 1px solid #ddd;
        padding: 8px 12px;
        border-radius: 4px;
        cursor: pointer;
        background: white;
    }

.status-toggle.disabled {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}

.list-item-draggable {
    transition: all 0.2s ease;
    background-color: white;
    padding: 8px;
    border-radius: 4px;
}

    .list-item-draggable:hover {
        background-color: #f8f9fa;
    }

    .list-item-draggable.drag-over {
        border-top: 2px solid #0d6efd;
    }

.fare-card-select {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .fare-card-select div {
        flex: 0 0 auto;
    }

    .fare-card-select ul {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: start;
    }

.fare-family-offers li {
    display: inline-flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.fare-family-offers li img{
    flex-shrink: 0;
}

.fare-family-offers span {
    line-height: 1.25rem;
}

/* Fare-price-difference warning alert */
.fare-price-warning {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: #FFFBEB;
    border: 1px solid #FCD34D;
    border-left: 4px solid #F59E0B;
    border-radius: 10px;
    color: #78350F;
    font-size: 14px;
    line-height: 1.5;
}

    .fare-price-warning-icon {
        flex-shrink: 0;
        margin-top: 1px;
    }

.warning-icon {
    flex-shrink: 0;
    vertical-align: middle;
}

@media (max-width: 576px) {
    .fare-price-warning {
        gap: 10px;
        padding: 10px 12px;
        font-size: 13px;
    }

        .fare-price-warning-icon {
            width: 18px;
            height: 18px;
        }
}

.flight-result-filter {
    position: relative;
}

    .flight-result-filter .filter-modal {
        left: 0;
        top: 50px;
    }

.change-sort {
    display: inline-flex;
    gap: 6px;
}

.list-item-container {
    margin-bottom: 0.5rem;
}

.list-item-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background-color: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    transition: all 0.2s ease;
}

    .list-item-content:hover {
        border-color: #adb5bd;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .list-item-content.sub-item {
        background-color: #e9ecef;
    }

.drag-handle {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 4px;
}

    .drag-handle:active {
        cursor: grabbing !important;
    }

.collapse-toggle {
    cursor: pointer;
    color: #6c757d;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

    .collapse-toggle:hover {
        color: #495057;
    }

.collapse-placeholder {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.input-field-wrapper {
    flex: 1;
    min-width: 150px;
}

    .input-field-wrapper input {
        width: 100%;
    }

.action-buttons {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
}

    .action-buttons .btn {
        padding: 4px 8px;
        border: none;
        background: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .action-buttons .btn img {
            max-width: 20px;
            max-height: 20px;
        }

.list-item-children {
    margin-top: 0.5rem;
    padding-left: 0;
}

.options-btn:disabled img {
    opacity: 0.5;
    filter: grayscale(100%);
}

.hotal-radius-label {
    font-size: 14px;
    color: #1A202C;
    font-weight: bold;
}

.hotal-dropdown-text {
    color: #1F7BF4;
    margin-left: 4px;
    cursor: pointer;
    font-weight: bold;
}

.hotal-radius-value {
    font-size: 14px;
    font-weight: 600;
    color: #3b82f6;
}

/* Slider */
.hotal-radius-slider input[type="range"] {
    width: 100%;
    appearance: none;
    height: 4px;
    background: linear-gradient( to right, #3b82f6 0%, #3b82f6 80%, #e5e7eb 80%, #e5e7eb 100% );
    border-radius: 10px;
    outline: none;
}

    /* Thumb */
    .hotal-radius-slider input[type="range"]::-webkit-slider-thumb {
        appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #3b82f6;
        border: 3px solid #fff;
        cursor: pointer;
    }

    .hotal-radius-slider input[type="range"]::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #3b82f6;
        border: 3px solid #fff;
        cursor: pointer;
    }

.responsive-panel {
    max-width: 530px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.add-room,
.remove-room {
    cursor: pointer;
}



/* Sidebar card */

.filter-card {
    /* width: 320px; */
    background: var(--panel-bg);
    border-radius: 8px;
    border: 1px solid #ebeff4;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.04);
    /* padding: 18px; */
    margin-top: 5px;
}

    .filter-card h5 {
        font-size: 16px !important;
        background: #f7fafc;
        padding: 10px 16px;
        border: 1px solid #e2e8f0;
    }

.filter-details {
    padding: 18px;
}

.field-space {
    margin-bottom: 15px;
}

.filter-label {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
    color: #1a202c;
}

.helper-text {
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px;
}

/* SELECT: Left text + Right arrow */
.form-select {
    height: 44px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    padding: 6px 12px;
    font-size: 14px;
    text-align: left !important;
    text-align-last: left !important;
    -moz-text-align-last: left;
    direction: ltr;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
}

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

input[type="checkbox"] {
    background-color: initial;
    cursor: default;
    appearance: auto;
    box-sizing: border-box;
    margin: 3px 3px 3px 4px;
    padding: initial;
    border: initial;
}

.dropdown-scrollable{
    overflow-y: auto;
}
.max-height-20 {
    max-height: 20rem;
}

.amenity-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 12px;
    margin-top: 8px;
}

.amenity-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 8px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    user-select: none;
    background: #fff;
}

    .amenity-card:hover {
        border-color: #94a3b8;
        background: #f8fafc;
    }

    .amenity-card.selected {
        border-color: #3b82f6;
        background: #eff6ff;
    }

    .amenity-card img {
        width: 48px;
        height: 48px;
        object-fit: contain;
    }

    .amenity-card input[type="checkbox"] {
        pointer-events: none; /* click is handled by the card div */
    }

    .amenity-card span {
        font-size: 0.75rem;
        text-align: center;
        color: #334155;
    }

@media (max-width: 768px) {
    .amenity-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.amenity-card input[type="checkbox"] {
    display: none;
}
.wizard-shell {
    height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


.wizard-tabbar {
    display: flex;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
    min-height: 50px;
    padding: 0 12px;
}

    .wizard-tabbar .nav-tabs {
        border: none;
    }

    .wizard-tabbar .nav-link {
        color: #495057;
        font-weight: 500;
        font-size: 15px;
        padding: 14px 16px;
        border: none;
        border-bottom: 3px solid transparent;
        border-radius: 0;
        cursor: pointer;
    }

        .wizard-tabbar .nav-link.active {
            color: #0d6efd;
            border-bottom-color: #0d6efd;
            background: transparent;
        }

        .wizard-tabbar .nav-link:hover:not(.active) {
            color: #0d6efd;
            border-bottom-color: #dee2e6;
        }


.wizard-body {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: hidden;
}


.wizard-preview {
    flex: 1;
    background: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    position: relative;
}

    .wizard-preview iframe {
        border: none;
        width: 75%;
    }

iframe.simple-widget {
    height: 500px;
    width: 100%;
}

iframe.expedia-widget {
    height: 600px;
}


.wizard-sidebar {
    width: 300px;
    flex-shrink: 0;
    background: #fff;
    border-left: 1px solid #dee2e6;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

    .wizard-sidebar .sidebar-title {
        font-size: 14px;
        font-weight: 600;
        color: #1a1a2e;
        padding: 16px 16px 8px;
        border-bottom: 1px solid #f0f0f0;
    }


    .wizard-sidebar .accordion-item {
        border: none;
        border-bottom: 1px solid #f0f0f0 !important;
        border-radius: 0 !important;
    }

    .wizard-sidebar .accordion-button {
        font-size: 13px;
        font-weight: 500;
        color: #333;
        background: #fff;
        padding: 12px 16px;
        box-shadow: none !important;
    }

        .wizard-sidebar .accordion-button:not(.collapsed) {
            color: #0d6efd;
            background: #f8f9ff;
        }

        .wizard-sidebar .accordion-button::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
            transform: rotate(0deg);
            transition: transform 0.2s ease;
        }

        .wizard-sidebar .accordion-button:not(.collapsed)::after {
            transform: rotate(90deg);
        }

    .wizard-sidebar .accordion-body {
        padding: 12px 16px 16px;
        font-size: 13px;
    }


.color-row .form-control-color {
    width: 36px;
    height: 32px;
    padding: 2px 3px;
    border-radius: 6px 0 0 6px;
    cursor: pointer;
}

.color-row .form-control[type="text"] {
    font-size: 12px;
    font-family: monospace;
}


.btn-save-preview {
    background: #0d6efd;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 7px 18px;
    border: none;
    border-radius: 6px;
    white-space: nowrap;
}

    .btn-save-preview:hover:not(:disabled) {
        background: #0b5ed7;
        color: #fff;
    }

    .btn-save-preview:disabled {
        opacity: 0.7;
    }


.preview-empty {
    text-align: center;
    color: #adb5bd;
}

    .preview-empty i {
        font-size: 3rem;
        display: block;
        margin-bottom: 10px;
    }

    .preview-empty p {
        font-size: 13px;
        margin: 0;
    }

.modal .flatpickr-calendar,
.modal .datetime-picker-dropdown,
.modal [class*="picker"],
.modal [class*="calendar"] {
    z-index: 10000 !important;
}

.modal-body {
    overflow: visible !important;
}

.modal-content {
    overflow: visible !important;
}

.modal-dialog {
    overflow: visible !important;
}

.dropdown-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 4px;
    margin-top: 4px;
}

.dropdown-group-header .group-label {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #6c757d;
white-space: nowrap;
display: flex;
align-items: center;
}

.dropdown-group-header .group-label i {
    font-size: 0.65rem;
    opacity: 0.8;
}

.dropdown-group-header .group-divider {
flex: 1;
height: 1px;
background-color: #e9ecef;
}

/* Constrain the upload area */
.logo-upload-right {
    width: 100%;
    max-width: 100%;
}

.logo-box {
    width: 100%;
    height: 160px;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    color: #94a3b8;
    font-size: 0.875rem;
    overflow: hidden;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
}

    .logo-box:hover {
        border-color: #3b82f6;
        background: #eff6ff;
    }

    .logo-box img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

/* Multi-image grid */
.image-upload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}

.image-upload-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

    .image-upload-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.image-upload-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: none;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

    .image-upload-remove:hover {
        background: #ef4444;
    }

.image-upload-add-tile {
    aspect-ratio: 1;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: #f8fafc;
    color: #94a3b8;
    font-size: 1.2rem;
    transition: border-color 0.2s, background 0.2s;
}

    .image-upload-add-tile:hover {
        border-color: #3b82f6;
        background: #eff6ff;
        color: #3b82f6;
    }

.image-upload-add-label {
    font-size: 0.7rem;
    text-align: center;
    background-color: transparent !important;
}


.sc-label {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 5px;

/* Car Search Form */
#car-advanced-search .dropdown-box {
    position: absolute;
    top: calc(100% + 6px);
    max-height: 260px;
    overflow-y: auto;
    z-index: 9999;
}
/* ONLY car top row dropdowns open upward */
.car-dropup {
    position: relative;
}

.sc-hint {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    background: #f3f4f6;
    color: #6b7280;

    padding: 1px 5px;
}

.sc-panel {
    background: #f8fafc;
    border: 1px solid #e9ecf1;
    padding: 20px;
    margin-bottom: 16px;
}


.sc-radio-group {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 6px;
}

.sc-radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #374151;
    cursor: pointer;
}



.validation-msg {
    font-size: 12px;
    color: #ef4444;
    margin-top: 4px;
    display: block;
}


.sc-upload-wrap .logo-upload-right {
    margin: 0;
}

.sc-upload-wrap .image-upload-add-tile {
    border: 2px dashed #d1d5db !important;
    border-radius: 10px !important;
    background: #f9fafb !important;
    min-height: 88px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    color: #9ca3af;
    transition: border-color .15s, background .15s;
    width: 100%;
}

    .sc-upload-wrap .image-upload-add-tile:hover {
        border-color: #2563eb !important;
        background: #eff6ff !important;
    }

.sc-upload-wrap .btn.btn-light {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    background: #1e3a5f !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    transition: background .15s;
}

    .sc-upload-wrap .btn.btn-light:hover:not(:disabled) {
        background: #2563eb !important;
    }

    .sc-upload-wrap .btn.btn-light:disabled {
        opacity: .55;
    }
}

    .car-dropup .dropdown-box {
        position: absolute;
        top: auto;
        bottom: calc(100% + 6px); /* open UP */

        max-height: 260px;
        overflow-y: auto;
        z-index: 9999;
    }
/* car calendar */

.calendar-container.dual-month .dual-calendar {
    display: flex;
}
/* popup only for pickup calendar */
.pickup-calendar-popup {
    transform: scale(0.85);
    transform-origin: top left;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 9999;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    padding: 12px;
    width: max-content;
    visibility: hidden;
}

    .pickup-calendar-popup.open-above {
        top: auto;
        bottom: calc(100% + 6px);
        transform-origin: bottom left;
    }

.dropoff-calendar-popup {
    transform: scale(0.85);
    transform-origin: top right;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    z-index: 9999;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    padding: 12px;
    width: max-content;
    visibility: hidden;
}

    .dropoff-calendar-popup.open-above {
        top: auto;
        bottom: calc(100% + 6px);
        transform-origin: bottom right;
    }



.time-sliders-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.time-slider-col {
    flex: 1 1 0;
    min-width: 220px; /* keeps each slider readable */
}

.time-sliders-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.time-slider-col {
    flex: 0 0 50%;
    max-width: 50%;
}

.time-slider__range {
    width: 90%;
    height: 7px;
    cursor: pointer;
    appearance: none;
    border-radius: 4px;
    background: linear-gradient( to right, #1976d2 0%, #1976d2 var(--p), #dcdcdc var(--p), #dcdcdc 100% );
}

    .time-slider__range::-webkit-slider-thumb {
        appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #1976d2;
        cursor: pointer;
    }

    .time-slider__range::-moz-range-thumb {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #1976d2;
        cursor: pointer;
    }


/* dropdown popup */
.car-datetime__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 2000;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    padding: 16px;
    width: 360px; /* adjust */
    max-width: 90vw; /* mobile safety */
}
/* middle dates — light band spanning full cell width */
.dualcal-in-range {
    background: rgba(66, 133, 244, 0.12);
    border-radius: 0;
    color: inherit;
}
/* pickup — filled circle, left-rounded */
.dualcal-start {
    background: #1976d2;
    color: white;
    border-radius: 6px 0 0 6px;
}
/* dropoff — filled circle, right-rounded */
.dualcal-end {
    background: #1976d2;
    color: white;
    border-radius: 0 6px 6px 0;
}
/* hover preview: same as confirmed end but slightly translucent */
.dualcal-end.dualcal-preview {
    background: rgba(25, 118, 210, 0.7);
}
/*radius Slider*/
.hotal-radius-filter {
    width: 300px;
    color: #fff;
    font-family: system-ui, sans-serif;
}
/* Header */
.hotal-radius-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hotal-radius-label {
    font-size: 14px;
    color: #1A202C;
    font-weight: bold;
}

.hotal-dropdown-text {
    color: #1F7BF4;
    margin-left: 4px;
    cursor: pointer;
    font-weight: bold;
}

.hotal-radius-value {
    font-size: 14px;
    font-weight: 600;
    color: #3b82f6;
}
/* Radius Slider */
.hotal-radius-slider input[type="range"] {
    width: 100%;
    appearance: none;
    height: 4px;
    border-radius: 10px;
    outline: none;
}
    /* Thumb */
    .hotal-radius-slider input[type="range"]::-webkit-slider-thumb {
        appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #3b82f6;
        border: 3px solid #fff;
        cursor: pointer;
    }

    .hotal-radius-slider input[type="range"]::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #3b82f6;
        border: 3px solid #fff;
        cursor: pointer;
    }

.responsive-panel {
    max-width: 530px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.fp-time-heading {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    margin-left: 5px;
    color: #1f7bf4;
}


/*Result page*/
/* Top chip */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #0d4b8f;
    color: #fff;
    padding: 4px 9px;
    font-size: 13px;
    border-radius: 7px;
    font-weight: 500;
    margin-bottom: 15px;
}

    .filter-chip div {
        background: #fff;
        color: #0d4b8f;
        width: 15px;
        height: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 13px;
        cursor: pointer;
    }

/* Section title */
.filter-title {
    font-weight: 700;
    font-size: 20px;
}

/* checkbox row */
.filter-top a {
    color: #0d6efd;
    font-weight: 500;
    text-decoration: none;
    margin-right: 2px;
    font-size: 14px;
}

.check-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.price-text {
    color: #6c757d;
    font-size: 14px;
}

.filter-show-more {
    color: #0d6efd;
    font-size: 13px;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
    padding: 8px 0 4px;
}

/* Sidebar box */
.filter-box {
    background: #fff;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}


.reset-flight {
    display: flex;
    justify-content: flex-end;
    align-items:center;
    gap: 5px;
    color: #000;
    line-height: 20px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 23px;
    margin-top: 10px;
}

    .reset-flight span {
/*        background: #000;*/
/*        color: #fff;*/
        width: 19px;
/*        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 13px;*/
        cursor: pointer;
    }

/* accordion button fix */
.accordion-button {
    padding-left: 0;
    padding-right: 0;
    font-weight: 700;
    background: none !important;
    box-shadow: none !important;
}

.accordion-item {
    border: none;
    border-bottom: 1px solid #eee;
}


/* ===== Validation styles ===== */
.thomalex-error-message {
    color: #e53935;
    font-size: 12px;
    margin-top: 4px;
    margin-left: 2px;
    display: block;
    min-height: 18px;
}

.input-error {
    border: 1.5px solid #e53935 !important;
}


.change-sort {
    display: flex;
    gap: 6px;
    align-items: center;
}

.travel-icon-align {
    vertical-align: middle;
}

.slider-close-icon {
    display: flex;
    flex-direction: row-reverse;
    margin-right: 10%;
    margin-top: 5%;
}

.Slider-open-arrow {
    position: fixed;
    top: 15px;
    left: 0px;
    z-index: 1040;
    display: none
}

@media (max-width: 768px) {
    .Slider-open-arrow {
        display: inline-block !important;
        background-color: transparent !important;
    }
        .Slider-open-arrow button:focus,
        .Slider-open-arrow button:active,
        .Slider-open-arrow:focus-visible {
            outline: none !important;
            box-shadow: none !important;
        }
}
.Airmulti-select.disabled {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}
.Airmulti-select-input.disabled {
    background-color: #e9ecef;
}


/* Hotel Styles*/
.thomalex-hotalresult {
    background: var(--white);
    border-bottom: 2px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(54, 54, 54, 0.1);
    position: relative;
    padding: 20px;
}

.filter {
    display: none;
}

.select-hotal {
    background: #1F7BF4;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    line-height: 45px;
    white-space: nowrap;
}

.hotel-back-btn {
    background: #1F7BF4;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    flex: 0 0 auto;
}

    .hotel-back-btn:hover,
    .hotel-back-btn:focus {
        background: #1665d8;
        color: #fff;
    }

.hotel-back-btn::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: url('../images/arrow-left.svg') no-repeat center / contain;
    mask: url('../images/arrow-left.svg') no-repeat center / contain;
}

.thomalex-hotal-section {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.hotal-filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #d0e0ff;
    padding: 4px 12px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    color: #1A202C;
    font-size: 14px;
}

.hotal-filter-arrow {
    width: 12px;
    height: 12px;
    transition: transform 0.3s ease;
}

.dropdown-toggle::after {
    border-top-color: #000 !important;
}

.hotal-filter-dropdown:focus-within .hotal-filter-arrow {
    transform: rotate(180deg);
}

.hotal-filter-dropdown {
    position: relative;
}

.hotal-filter-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 280px;
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    z-index: 1000;
    display: none;
}

.hotal-filter-dropdown:focus-within .hotal-filter-menu {
    display: block;
}

.hotal-filter-arrow {
    width: 12px;
    transition: 0.3s;
}

.hotal-distance-menu {
    position: absolute;
    top: 48px;
    left: 0;
    width: 300px;
    background: #fff;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
    display: none;
    z-index: 10;
}

.hotal-filter-title {
    font-weight: 500;
    margin-bottom: 12px;
    border-bottom: 1px solid #E2E8F0;
    padding-bottom: 10px;
    font-size: 16px;
}

.hotal-radius-label {
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hotal-mini-arrow {
    width: 10px;
}

.hotal-distance-value {
    font-weight: 600;
    color: #1f7bf4;
}

.hotal-distance-range {
    margin-top: 14px;
}

.hotal-hotelclass-menu {
    width: 240px !important;
}

.hotal-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 500;
    margin-bottom: 6px;
    transition: background 0.2s ease;
}

    .hotal-check-item:hover {
        background: #f3f7ff;
    }

    .hotal-check-item.active {
        background: #eaf2ff;
    }

    .hotal-check-item input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: #1f7bf4;
        cursor: pointer;
    }

/* ===== HOTEL NAME & ADDRESS ===== */
.hotalname {
    font-size: 16px !important;
    color: #1A202C;
    font-weight: bold;
    line-height: 22px;
    white-space: normal; /* ← CHANGE: allow wrap instead of truncate */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* ← max 2 lines */
    -webkit-box-orient: vertical;
    max-width: 100%;
}

.hotel-preferred-label {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
    padding: 2px 8px;
    border-radius: 4px;
    background-color: #054688;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

.no-star-rating {
    margin-left: 8px;
    font-size: 0.75em;
    font-weight: bold;
    color: #718096;
}

.hotaladdress {
    font-size: 12px;
    color: #4A5568;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin-top: 4px;
}

.hotalprice-total {
    color: #718096;
    font-size: 11px;
    line-height: 1.4;
    margin-top: 2px;
    text-align: left; /* ← left align */
    white-space: normal;
    word-break: break-word;
}


/* ===== HOTEL CARD ===== */
.hotel-card {
    background: #fff;
    border-radius: 16px;
    overflow: visible;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    display: flex;
    flex-direction: row;
    min-height: 220px;
    position: relative;
}

.hotel-card-preferred {
    box-shadow: 0 6px 18px rgba(0,0,0,.08), 0 0 0 2px #054688;
}

/* LEFT IMAGE */
.hotel-img-wrap {
    position: relative;
    width: 220px;
    min-width: 220px;
    min-height: 220px;
    flex-shrink: 0;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px 0 0 16px; /* ← round only left corners */
    overflow: hidden; /* ← keep image clipped to rounded corner */
}

    .hotel-img-wrap img {
        width: 100%;
        height: 100%;
        min-height: 220px;
        object-fit: cover;
        display: block;
    }

/* RIGHT INFO */
.hotel-info {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.hotel-footer {
    margin-top: auto;
}

/* Flight private/corporate fare label (legacy star indicator) */
.air-search-result-labels {
    font-size: 10px;
    text-align: center;
}

.air-search-result-labels-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    white-space: nowrap;
}

/* OFFER BADGE */
.hotel-offer {
    background: #e8f1ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 6px;
    white-space: nowrap;
}

.hotel-price-amount {
    font-size: 18px; /* ← REDUCE */
    font-weight: 700;
    color: #1A202C;
    white-space: nowrap;
    line-height: 1.2;
}

/* META ROW */
.hotel-meta {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
    margin: 8px 0;
    gap: 8px;
    flex: 1;
}

.hotel-rating {
    font-size: 14px;
    color: #374151;
    width: 100%;
    padding-top: 0;
}

/* PRICE */
.hotel-total {
    text-align: right; /* ← right align */
    flex-shrink: 0;
    width: auto;
}

/* ===== POLICY INDICATOR BADGE ===== */
.hotel-policy-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px 3px 6px;
    border-radius: 20px;
    white-space: nowrap;
    z-index: 1;
}

.hotel-policy-in {
    color: #1F7BF4;
    background-color: #EBF3FF;
}

.hotel-policy-out {
    color: #D41159;
    background-color: #FFF0F4;
}

.price {
    font-size: 18px;
    font-weight: 700;
}

.hotel-total .price {
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
    display: block;
    line-height: 1.2;
}

/* DETAILS LINK */
.hotel-details {
    border-top: 1px solid #eee;
    margin-top: 12px;
    padding-top: 8px;
}

    .hotel-details a {
        text-decoration: none;
        color: #0d6efd;
        font-size: 14px;
    }

.btn-select {
    background: #1F7BF4;
    color: #fff;
    font-size: 14px;
    width: 100px;
    font-weight: bold;
    border-radius: 10px;
    padding: 8px 20px;
}

.btn-sold-out {
    background: #e9ecef;
    color: #6c757d;
    font-size: 14px;
    width: 100px;
    font-weight: bold;
    border-radius: 10px;
    padding: 8px 20px;
    border: 1px solid #ced4da;
    cursor: not-allowed;
    opacity: 0.75;
}

/* ===== MAP ===== */
.map-wrapper {
    position: sticky;
    top: 16px;
    height: calc(100vh - 32px);
    border-radius: 16px;
    overflow: hidden;
}

.map-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.map-hotel-card {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 260px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    padding: 4px;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

    .map-hotel-card img {
        width: 100%;
        height: 140px;
        object-fit: cover;
    }

#hotelMap {
    position: sticky;
    top: 0;
    height: 100vh !important;
}

/* ===== HOTEL DETAIL ===== */
.hotalbg {
    background: #fff;
    padding: 20px;
}

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.gallery-left {
    height: 100%;
}

.gallery-right img {
    height: 220px;
}

.photo-overlay {
    position: relative;
}

    .photo-overlay::after {
        content: "+14 photos";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.5);
        color: #fff;
        font-size: 18px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
    }

.hotal-nav-tabs .hotal-nav-link {
    color: #6b7280;
    font-weight: 500;
    padding: 20px;
}

    .hotal-nav-tabs .hotal-nav-link.active {
        color: #0d6efd;
        border-bottom: 2px solid #0d6efd;
    }

.hotel-title {
    font-size: 34px;
    font-weight: 700;
    color: #1A202C;
    margin-top: 20px;
}

.stars {
    color: #fbbf24;
    font-size: 18px;
}

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

.discount-badge {
    display: inline-block;
    background: #e0f2fe;
    color: #0284c7;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 4px;
}

.hotalprice {
    font-size: 32px;
    font-weight: 700;
}

.hotal-section-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #1A202C;
}

.hotal-disc {
    color: #4A5568;
    font-size: 14px;
    font-weight: 400;
}

.amenities li {
    list-style: none;
    margin-bottom: 8px;
    color: #4A5568;
    font-size: 14px;
}

    .amenities li img {
        margin-right: 8px;
        vertical-align: middle;
    }

.room-meta span img {
    margin-right: 8px;
    vertical-align: middle;
}

.map-box iframe {
    border-radius: 12px;
    width: 100%;
    height: 280px;
    border: 0;
}

.land {
    color: #1A202C;
    font-size: 16px;
    font-weight: 600;
}

    .land img {
        margin-right: 8px;
        vertical-align: middle;
    }

.room-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    .room-tabs button {
        border: 1px solid #dbe3ef;
        background: #fff;
        padding: 6px 14px;
        border-radius: 8px;
        font-size: 14px;
        cursor: pointer;
    }

        .room-tabs button.active {
            border-color: #2f80ed;
            color: #2f80ed;
            font-weight: 500;
        }

.room-card {
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    border: 1px solid #E2E8F0;
}

.room-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: #555;
    margin: 8px 0;
}

.room-info {
    display: flex;
    gap: 24px;
    font-size: 13px;
    margin: 12px 0;
}

.room-desc,
.room-cancel {
    font-size: 13px;
    color: #555;
}

.room-images {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

    .room-images img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.more-photos {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
}

.price-muted {
    color: #718096 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

.hotal-discount {
    background: #e9f2ff;
    color: #2f80ed;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
}

.hotal-price {
    font-size: 32px;
    font-weight: 700;
    margin-top: 6px;
    color: #1A202C;
}

.hotal-price-info {
    font-size: 12px;
    color: #6c757d;
}

.room-price {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

.room-total {
    font-size: 12px;
    color: #6c757d;
}

/* ===== ROOM CARD – DETAIL LINES ===== */
.room-detail-line {
    margin-bottom: 6px;
    font-size: 14px;
}

.room-cancel-sm {
    margin-bottom: 6px;
    font-size: 13px;
    color: #374151;
}

.room-cancel-block {
    margin-bottom: 8px;
}

/* Guarantee badge */
.room-guarantee-badge {
    background: #fff3e0;
    border: 1px solid #ff9800;
    border-radius: 20px;
    padding: 2px 10px;
    color: #e65100;
    font-size: 13px;
    margin-left: 6px;
}

/* Amenity pills */
.room-amenities-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.room-amenity-tag {
    font-size: 12px;
    background: #f1f5f9;
    border-radius: 4px;
    padding: 2px 8px;
    color: #475569;
}

/* ===== ROOM CARD – PRICE PANEL (right column) ===== */
.room-card-price-panel {
    border-left: 1px solid #eee;
    padding-left: 20px;
    text-align: right;
}

.room-price-amount {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1A202C;
}

.room-price-total {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
}

.btn-add-to-cart {
    width: 100%;
    background: #0d6efd;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 0;
    font-size: 15px;
    font-weight: 500;
    margin-top: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

    .btn-add-to-cart:hover {
        background: #0b5ed7;
    }

.room-proposal-link {
    font-size: 13px;
    cursor: pointer;
    display: block;
    margin-top: 6px;
    color: #0d6efd;
    text-decoration: none;
}

.room-action-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    font-size: 13px;
}

.room-terms-link,
.room-pricing-link {
    cursor: pointer;
    color: #0d6efd;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
}

.room-terms-link {
    display: block;
    margin-bottom: 4px;
}

.room-pricing-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pricing-arrow-down {
    width: 12px;
    transition: transform 0.2s;
}

.pricing-arrow-up {
    width: 12px;
    transform: rotate(180deg);
    transition: transform 0.2s;
}

.details-arrow {
    width: 12px;
    height: 12px;
    transition: transform 0.2s;
}

.arrow-rotated {
    transform: rotate(180deg);
    transition: transform 0.2s;
}

/* ===== ROOM CARD – PRICING DETAILS EXPANDED ===== */
.room-pricing-box {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    margin-top: 12px;
    background: #fafafa;
}

.room-pricing-table {
    width: 100%;
    border-collapse: collapse;
}

    .room-pricing-table thead tr {
        background: #f0f4ff;
    }

    .room-pricing-table th {
        padding: 8px 12px;
        text-align: left;
        border: 1px solid #e0e0e0;
        font-size: 13px;
    }

    /* Prices read as prominently as the legacy Resvoyage panel: the cells inherited the card's
       small body text, which made the nightly rates look secondary to the weekday headers. */
    .room-pricing-table td {
        padding: 8px 12px;
        border: 1px solid #e0e0e0;
        font-size: 16px;
        font-weight: 700;
        color: #212529;
    }

    /* The "Week N" gutter cell is a label, not a price — keep it at header weight. */
    .room-pricing-table td.room-pricing-week {
        font-size: 13px;
        font-weight: 600;
        color: #555;
    }

/* ===== ROOM CARD – TERMS MODAL ===== */
.room-terms-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9000;
}

.room-terms-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 4px;
    padding: 28px 32px 24px;
    width: min(800px, 94vw);
    max-height: 88vh;
    overflow-y: auto;
    z-index: 9001;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
    font-size: 13px;
    color: #333;
}

.room-terms-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #dee2e6;
}

.room-terms-section-header {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 20px 0 6px;
}

.room-terms-section-header:first-of-type {
    margin-top: 4px;
}

.room-terms-hr {
    margin: 4px 0 12px;
    border: none;
    border-top: 1px solid #aaa;
    opacity: 1;
}

.room-terms-dates-row {
    display: flex;
    gap: 60px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.room-terms-dates-row > div strong {
    font-size: 13px;
    display: block;
    margin-bottom: 2px;
}

.room-terms-cancel-cols {
    display: flex;
    gap: 60px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.room-terms-cancel-cols > div strong {
    font-size: 13px;
    display: block;
    margin-bottom: 2px;
}

.room-terms-rule {
    padding-left: 1.5rem;
    margin-top: 4px;
}

.room-terms-rule p {
    margin-bottom: 4px;
}

.room-terms-close-row {
    text-align: right;
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid #dee2e6;
}

/* ===== ROOM FOOTER BAR (image 1 / alt layout) ===== */
.room-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid #E2E8F0;
    flex-wrap: wrap;
    gap: 12px;
}

.room-discount-badge {
    display: inline-block;
    background: #e0f2fe;
    color: #0284c7;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 4px;
}

.room-footer-price {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    text-align: right;
}

.room-footer-total {
    font-size: 12px;
    color: #6c757d;
    text-align: right;
}

.surroundings-desc {
    font-size: 14px;
    line-height: 1.6;
    max-width: 1000px;
}

.surroundings-card h6 {
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.surroundings-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.surroundings-card li {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
}

    .surroundings-card li:last-child {
        border-bottom: none;
    }

.surroundings-card span:last-child {
    color: #6c757d;
    white-space: nowrap;
}

.policy-desc {
    font-size: 14px;
    line-height: 1.6;
    max-width: 1000px;
    margin-bottom: 24px;
}

.policy-item {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
}

    .policy-item i {
        font-size: 18px;
        color: #111;
        margin-top: 3px;
        min-width: 20px;
    }

    .policy-item h6 {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .policy-item p {
        font-size: 13px;
        color: #6c757d;
        margin-bottom: 0;
    }

/* ===== CAR SECTION ===== */
.car-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.car-left {
    width: 260px;
    padding: 15px;
}

.brand-logo {
    position: absolute;
    top: 15px;
    left: 15px;
    border: 1px solid #ddd;
    padding: 4px 10px;
    font-weight: 700;
    border-radius: 6px;
    background: #fff;
}

.car-img {
    width: 100%;
    max-height: 160px;
    object-fit: contain;
    margin-top: 50px;
    height: auto;
}

.car-divider {
    width: 1px;
    background: #e5e7eb;
}

.car-right {
    padding: 20px;
}

.car-features span {
    display: inline-block;
    font-size: 13px;
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 6px;
    margin: 4px 4px 0 0;
}

.car-features img {
    margin-left: 8px;
    vertical-align: middle;
}

.text-luxury {
    font-size: 14px;
    color: #718096;
}

.carname {
    font-size: 18px !important;
    font-weight: bold;
    color: #1A202C;
}

.text-total {
    color: #718096;
    font-size: 12px;
}

.car-location {
    font-size: 14px;
    color: #1F7BF4;
    /*    margin-top: -20px;*/
  display: flex;
  align-items: center;
   gap: 6px;
}
.car-locations-block {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.car-locations-block {
    margin-top: 10px;
}
.car-price-section {
    margin-top: 12px;
    text-align: left;
}
.car-price {
    font-size: 22px;
    font-weight: 700;
}
.nav-link.active .travel-icon-align {
    filter: brightness(0);
}
.car-footer {
    padding: 12px 20px;
    border-top: 1px solid #e5e7eb;
}

.details-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}

.car-total .price {
    font-size: 26px;
    font-weight: 700;
}

.carrental-card {
    border-radius: 12px;
    border: none;
}

.carsection-title {
    font-weight: 600;
    margin-bottom: 15px;
}

.carlabel {
    font-size: 13px;
    color: #6c757d;
}

.carvalue {
    font-size: 15px;
    font-weight: 500;
}

.carinfo-block .carvalue {
    max-width: 600px;
}

.carprice-table td {
    vertical-align: middle;
    font-size: 14px;
}

.cartotal-box {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 600;
}

.taxes-table {
    border: 1px solid #dee2e6;
}

.table-bg thead th {
    color: #000 !important;
}

.taxes-table th,
.taxes-table td {
    border: 1px solid #dee2e6;
    padding: 12px;
    font-size: 14px;
}

.taxes-table thead th {
    font-weight: 600;
    background-color: #f8f9fa;
    color: #000;
}

.taxes-table tfoot td {
    background-color: #fff;
}

.mileage-table {
    border: 1px solid #dee2e6;
}

    .mileage-table th,
    .mileage-table td {
        border: 1px solid #dee2e6;
        padding: 12px;
        font-size: 14px;
    }

    .mileage-table thead th {
        font-weight: 600;
        background-color: #f8f9fa;
    }

.carlprice-total {
    color: #718096;
    font-size: 12px;
}

.carprice {
    font-size: 24px;
    color: #000;
    font-weight: 600;
}

.carfilter {
    color: #1A202C;
    font-size: 16px;
    font-weight: 600;
}

/* HotelModifySearch */
.thomalex-guest-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1050;
    min-width: 320px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: 16px;
}

.thomalex-location-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1050;
    min-width: 300px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    padding: 8px 0;
}

.location-item {
    padding: 10px 16px;
    cursor: pointer;
}

    .location-item:hover {
        background: #f8fafc;
    }

.location-title {
    font-weight: 600;
    font-size: 14px;
}

.location-sub {
    font-size: 12px;
    color: #64748b;
}

.thomalex-hotal-section > .modifysearch-destination {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .thomalex-hotal-section > .modifysearch-destination .thomalex-styled-input-box,
    .thomalex-hotal-section > .modifysearch-destination > * {
        height: 100%;
        margin: 0;
    }

/* Field widths: the destination starts widest because its label ("Where do you want
   to stay?") is the longest string in the bar. Past that starting size all four grow
   equally, so spare width is shared and guests/dates keep a comfortable size instead
   of the destination absorbing everything. */
.thomalex-modifysearch > .modifysearch-destination {
    flex: 1 1 300px;
    min-width: 250px;
}

.thomalex-modifysearch > .modifysearch-guests {
    flex: 1 1 210px;
    min-width: 175px;
}

.thomalex-modifysearch > .modifysearch-date {
    flex: 1 1 185px;
    min-width: 150px;
}

.thomalex-modifysearch .input-label {
    white-space: nowrap;
}

.thomalex-modifysearch .input-value {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* ===== HOTEL RESULTS LAYOUT ===== */

/* Base: flex row, all breakpoints ≥992px */
.hotel-results-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.hotel-filter-col {
    flex: 0 0 20%;
    overflow-y: auto;
}

/* Bootstrap col-lg-3 on the inner carsection sets width:25% relative to its parent.
   Override it so the filter content fills the full hotel-filter-col width. */
.hotel-filter-col .carsection {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.hotel-results-col {
    flex: 1;
    min-width: 0;
}

.hotel-map-col {
    flex: 0 0 25%;
}

/* Floating filter button — visible on mobile/tablet (<992px) */
@media (max-width: 991px) {
    .filter {
        display: flex;
        position: fixed;
        right: 15px;
        bottom: 50px;
        z-index: 9999;
        background: #054382;
        padding: 12px;
        border-radius: 50%;
        box-shadow: 0 2px 10px rgba(0,0,0,0.25);
        align-items: center;
        justify-content: center;
    }

    .filter img {
        width: 20px;
        height: 20px;
        display: block;
    }
}

/* Filter modal — slides in from right */
.modal-dialog-slideout {
    min-height: 100%;
    margin: 0 0 0 auto;
    max-width: 360px;
}

.modal.fade .modal-dialog-slideout {
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
}

.modal.show .modal-dialog-slideout {
    transform: translateX(0);
}

/* Filter component fills full width inside modal */
#filterModal .carsection {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
}

/* Mobile <768px: search bar — all fields full width, stacked */
@media (max-width: 767px) {
    .thomalex-modifysearch {
        flex-wrap: wrap !important;
    }

    .thomalex-modifysearch > div,
    .thomalex-modifysearch .select-hotal,
    .thomalex-modifysearch .hotel-back-btn {
        width: 100% !important;
        flex: 0 0 100% !important;
        min-width: 0;
    }
}

/* Large Desktop 1400px+ */
@media (min-width: 1400px) {
    .hotel-img-wrap {
        width: 260px;
        min-width: 260px;
    }

    .hotalname {
        font-size: 18px !important;
    }

    .hotel-total .price {
        font-size: 23px;
    }

    .hotel-total {
        min-width: 130px;
    }
}

/* Laptop 1024px - 1399px */
@media (min-width: 1024px) and (max-width: 1399px) {
    .hotel-img-wrap {
        width: 180px;
        min-width: 180px;
        min-height: 210px;
    }

    .hotel-card {
        min-height: 210px;
    }

    .hotel-img-wrap img {
        min-height: 210px;
    }

    .hotalname {
        font-size: 14px !important;
    }

    .hotel-info {
        padding: 12px 12px;
    }

    .hotel-total .price {
        font-size: 18px;
    }

    .hotel-total {
        min-width: 95px;
    }

    .hotalprice-total {
        font-size: 10px;
    }
}

/* Heights for desktop */
@media (min-width: 768px) {
    .gallery-left {
        height: 450px;
    }

    .gallery-right .col-12 {
        height: 100px;
    }
}

/* Tablet Landscape 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    .hotel-card {
        min-height: 180px;
    }

    .hotel-img-wrap {
        width: 150px;
        min-width: 150px;
        min-height: 180px;
    }

        .hotel-img-wrap img {
            min-height: 180px;
        }

    .hotalname {
        font-size: 13px !important;
    }

    .hotel-info {
        padding: 10px 10px;
    }

    .hotel-total .price {
        font-size: 16px;
    }

    .hotel-total {
        min-width: 85px;
    }

    .hotalprice-total {
        font-size: 9px;
    }

    .hotel-rating {
        font-size: 12px;
    }
}

/* iPad Portrait + Landscape */
@media (min-width: 768px) and (max-width: 1024px) {
    .thomalex-hotal-section {
        flex-wrap: wrap;
    }

/*    .thomalex-styled-input-box {
        width: calc(50% - 8px);
    }*/

    .select-hotal,
    .hotel-back-btn {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

    .hotel-back-btn {
        min-height: 45px;
    }

    .hotal-filter-menu,
    .hotal-distance-menu {
        width: 340px;
        left: 50%;
        transform: translateX(-50%);
    }

    .hotal-filter-btn {
        gap: 2px;
        padding: 3px 6px;
        color: #1A202C;
        font-size: 14px;
    }
}

/* Responsive room info */
@media (max-width: 991px) {
    .room-info {
        flex-direction: column;
        gap: 8px;
    }
}

/* Tablet Portrait 576px - 767px */
@media (min-width: 576px) and (max-width: 767px) {
    .hotel-card {
        min-height: 160px;
        flex-direction: row;
    }

    .hotel-img-wrap {
        width: 130px;
        min-width: 130px;
        min-height: 160px;
    }

        .hotel-img-wrap img {
            min-height: 160px;
        }

    .hotalname {
        font-size: 13px !important;
    }

    .hotel-info {
        padding: 10px 10px;
    }

    .hotel-total .price {
        font-size: 15px;
    }

    .hotel-total {
        min-width: 80px;
    }

    .hotalprice-total {
        font-size: 9px;
        white-space: normal;
    }

    .hotel-meta {
        flex-wrap: wrap;
    }
}

/* Mobile max 575px */
@media (max-width: 575px) {
    .hotel-card {
        flex-direction: column;
        min-height: unset;
    }

    .hotel-img-wrap {
        width: 100%;
        min-width: 100%;
        height: 180px;
        min-height: 180px;
        border-radius: 16px 16px 0 0; /* ← round top corners on mobile */
    }

        .hotel-img-wrap img {
            height: 180px;
            min-height: 180px;
        }

    .hotalname {
        font-size: 15px !important;
        white-space: normal;
        -webkit-line-clamp: 2;
    }

    .hotaladdress {
        white-space: normal;
        font-size: 12px;
    }

    .hotel-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .hotel-total {
        text-align: left;
        min-width: unset;
        width: 100%;
    }

        .hotel-total .price {
            font-size: 20px;
        }

    .hotel-info {
        padding: 12px;
    }

    .btn-select,
    .btn-sold-out {
        width: 100%;
        margin-top: 8px;
    }

    .hotalprice-total {
        white-space: normal;
        font-size: 11px;
    }
}

/* Mobile 767px and below */
@media (max-width: 767px) {
    .car-card-body {
        flex-direction: column;
    }

    .car-left {
        width: 100%;
    }

    .car-right {
        padding: 15px;
        text-align: left;
    }

    .car-location {
        margin-top: 6px;
        font-size: 13px;
        word-break: break-word;
    }
    .car-location img {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .car-total {
        text-align: right;
        margin-top: 12px;
    }

    .carprice {
        font-size: 20px;
    }

    .carprice-total {
        font-size: 11px;
    }

    .car-price-section {
        margin-top: 16px;
        text-align: right;
    }
    .car-footer {
        flex-direction: column;
        gap: 10px;
    }

    .select-hotal {
        width: 100%;
        display: block;
        font-size: 16px;
        line-height: 30px;
        text-align: center;
        margin-top: 10px;
        padding: 10px;
    }

    .hotel-back-btn {
        width: 100%;
        font-size: 16px;
        margin-top: 10px;
        padding: 10px;
    }

    .thomalex-hotal-section {
        flex-wrap: wrap;
    }

    .thomalex-styled-input-box,
    .select-hotal,
    .hotel-back-btn {
        width: 100%;
    }

    .hotal-distance-menu {
        position: fixed;
        left: 50%;
        bottom: 16px;
        top: auto;
        transform: translateX(-50%);
        width: calc(100% - 32px);
        max-width: 360px;
        border-radius: 18px;
        z-index: 999;
    }

    .hotal-filter-bar {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: left;
        gap: 6px !important;
        padding: 0;
    }

    .hotal-filter-dropdown {
        width: auto;
    }

    .hotal-filter-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #fff;
        border: 1px solid #d0e0ff;
        padding: 4px 12px;
        border-radius: 10px;
        font-weight: 600;
        cursor: pointer;
        color: #1A202C;
        font-size: 14px;
        white-space: nowrap;
    }

    .hotal-filter-arrow {
        width: 12px;
        height: 12px;
    }

    .chain {
        position: absolute;
        left: -60px;
    }
}


html {
    scroll-behavior: smooth;
}

/* =============================================
   Hotel Photo Gallery — Lightbox
   ============================================= */

.hotel-gallery-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hotel-gallery-close {
    position: absolute;
    top: 16px;
    right: 24px;
    background: none;
    border: none;
    color: white;
    font-size: 32px;
    cursor: pointer;
    z-index: 10000;
}

.hotel-gallery-counter {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 14px;
}

.hotel-gallery-nav {
    position: absolute;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 28px;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
}

.hotel-gallery-nav-prev {
    left: 16px;
}

.hotel-gallery-nav-next {
    right: 16px;
}

.hotel-gallery-img {
    max-height: 80vh;
    max-width: 90vw;
    object-fit: contain;
    border-radius: 8px;
}

.hotel-gallery-thumbs {
    position: absolute;
    bottom: 16px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    max-width: 90vw;
    padding: 0 16px;
}

.hotel-gallery-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0.5;
    border: 2px solid transparent;
}

.hotel-gallery-thumb--active {
    opacity: 1;
    border-color: white;
}

/* =============================================
   Hotel Detail Photo Grid — "+N photos" overlay
   ============================================= */

.hotel-photo-thumb-wrap {
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.hotel-photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hotel-photo-count-text {
    color: white;
    font-weight: bold;
    font-size: 16px;
}

/* =============================================
   Hotel Detail — Location + Map
   ============================================= */

/* Address */
.hotel-detail-address {
    font-size: 14px;
    color: #444;
    margin-bottom: 8px;
    line-height: 1.6;
}

/* ── Map wrapper ── */
.hotel-detail-map-wrapper {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    margin-top: 12px;
}

/* Map div - height responsive */
.hotel-detail-map {
    width: 100%;
    height: 280px;
}

/* Open in Maps button overlay */
.hotel-detail-open-maps-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #1a56db;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.hotel-detail-open-maps-btn:hover {
    background: #f0f4ff;
    text-decoration: none;
}

/* ── Responsive breakpoints ── */

/* Large desktop - map taller */
@media (min-width: 1200px) {
    .hotel-detail-map {
        height: 340px;
    }
}

/* Tablet */
@media (max-width: 991px) {
    .hotel-detail-map {
        height: 260px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .hotel-detail-map {
        height: 220px;
    }

    .hotel-detail-map-wrapper {
        border-radius: 8px;
    }

    .hotel-detail-open-maps-btn {
        font-size: 12px;
        padding: 4px 10px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .hotel-detail-map {
        height: 180px;
    }
}


/* Car detail page */
.car-details-vendor-logo img {
    border: none;
    outline: none;
    box-shadow: none;
}

.car-details-vendor-logo {
    margin-bottom: 8px;
    max-width: 70px;
}

.price-label {
    font-weight: 600;
}


.selected-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.radio-circle {
    width: 18px;
    height: 18px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    margin-right: 10px;
    background: transparent;
}

    .radio-circle.selected {
        width: 18px;
        height: 18px;
        border-color: #2f6fed;
        background: transparent;
        color: inherit;
    }

.hotal-filter-btn + .dropdown-menu {
    right: 0;
    left: auto;
    min-width: 220px;
}

    .hotal-filter-btn + .dropdown-menu .dropdown-item {
        white-space: nowrap;
    }

        .radio-circle.selected::after {
            content: "";
            width: 10px;
            height: 10px;
            background: #2f6fed;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

.mobile-filter-footer {
    padding: 12px;
    border-top: 1px solid #eee;
    background: #fff;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}


.search-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    width: 100%;
    align-items: end;
}

.search-field {
    display: flex;
    flex-direction: column;
    min-width: 250px; /* prevents shrinking */
}

.location-wrapper {
    position: relative; /* required for dropdown */
    width: 100%;
}

.calendar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

/* ── Hotel Detail Page ── */

.hotel-detail-content-row {
    align-items: stretch;
}

.hotel-detail-left-col {
    display: flex;
    flex-direction: column;
}

.hotel-detail-right-col {
    display: flex;
    flex-direction: column;
}

.hotel-detail-map-wrapper {
    flex: 1;
    min-height: 200px;
    max-height: 500px;
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    margin-top: 12px;
}

.hotel-detail-map {
    width: 100%;
    height: 100%;
    min-height: 200px;
}

.hotel-detail-open-maps-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #1a56db;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.hotel-detail-open-maps-btn:hover {
    background: #f0f4ff;
    text-decoration: none;
}

.hotel-detail-address {
    font-size: 14px;
    color: #444;
    margin-bottom: 8px;
    line-height: 1.6;
}

/* ── Room Card Links ── */
.room-action-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
    flex-wrap: nowrap;
}

.room-terms-link {
    cursor: pointer;
    font-size: 13px;
    color: #0d6efd;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    margin-bottom: 0;
}

.room-terms-link:hover {
    text-decoration: underline;
    color: #0d6efd;
}

.room-pricing-link {
    cursor: pointer;
    font-size: 13px;
    color: #0d6efd;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}

.room-pricing-link:hover {
    text-decoration: underline;
    color: #0d6efd;
}

.details-arrow {
    width: 12px;
    height: 12px;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

.arrow-rotated {
    transform: rotate(180deg);
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .hotel-detail-map-wrapper {
        flex: none;
        height: 260px;
        max-height: 260px;
    }
    .hotel-detail-map {
        height: 260px;
    }
}

@media (max-width: 767px) {
    .hotel-detail-map-wrapper {
        flex: none;
        height: 220px;
        max-height: 220px;
    }
    .hotel-detail-map {
        height: 220px;
    }
    .room-action-links {
        gap: 12px;
        flex-wrap: wrap;
    }
    .room-terms-link,
    .room-pricing-link {
        font-size: 12px;
    }
}

@media (max-width: 380px) {
    .room-action-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .hotel-detail-map-wrapper {
        height: 180px;
        max-height: 180px;
    }
    .hotel-detail-map {
        height: 180px;
    }
}

/* ── Hotel Room Card ── */
.hotel-room-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.hotel-room-card-body {
    display: flex;
    gap: 0;
    padding: 20px;
}

.hotel-room-card-left {
    flex: 1;
}

/* .hotel-room-card-right removed — no image grid */

.hotel-room-card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.hotel-room-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.hotel-room-available-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-left: 8px;
}

.hotel-room-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.hotel-room-meta-item {
    font-size: 13px;
    color: #444;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.hotel-room-info-cols {
    display: flex;
    gap: 24px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.hotel-room-info-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 100px;
}

.hotel-room-info-label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.hotel-room-info-value {
    font-size: 13px;
    color: #222;
}

.hotel-room-desc-section {
    margin-bottom: 10px;
}

.hotel-room-section-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    font-size: 13px;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.hotel-room-desc-text {
    font-size: 13px;
    color: #444;
    margin: 0;
    line-height: 1.5;
}

/* Cancellation policy / guarantee type highlight pills.
   Colours match the ResVoyage Semantic UI labels these replace:
   red #db2828, green #21ba45, orange #f2711c. */
.hotel-room-cancel-badge,
.hotel-room-guarantee-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    max-width: 100%;
    border: 1px solid transparent;
}

.hotel-room-cancel-badge svg,
.hotel-room-guarantee-badge svg {
    flex: 0 0 auto;
}

.hotel-room-cancel-badge--danger {
    background-color: #db2828;
    border-color: #db2828;
    color: #fff;
}

.hotel-room-cancel-badge--success {
    background-color: #21ba45;
    border-color: #21ba45;
    color: #fff;
}

.hotel-room-guarantee-badge--warn {
    background-color: #fff;
    border-color: #f2711c;
    color: #f2711c;
}

.hotel-room-guarantee-badge--danger {
    background-color: #fff;
    border-color: #db2828;
    color: #db2828;
}

.hotel-room-guarantee-badge--muted {
    background-color: #fff;
    border-color: rgba(34, 36, 38, .15);
    color: rgba(0, 0, 0, .87);
}

/* image grid classes removed — no room images */

.hotel-room-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-top: 1px solid #f0f0f0;
    flex-wrap: wrap;
    gap: 12px;
}

.hotel-room-footer-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.hotel-room-footer-right {
    text-align: right;
}

.hotel-room-price-large {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
}

@media (max-width: 767px) {
    .hotel-room-card-footer {
        flex-direction: column;
        align-items: flex-start;
    }
    .hotel-room-footer-right {
        text-align: left;
        width: 100%;
    }
    .hotel-room-info-cols {
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .hotel-room-card-body {
        padding: 14px;
    }
    .hotel-room-card-footer {
        padding: 10px 14px;
    }
}
a.proposal-link {
    color: #747f8a;
    text-decoration: underline;
    margin-top: 5px;
    cursor: pointer;
}

    a.proposal-link:hover {
        color: #292c2e;
    }

.proposal-footer {
    background-color: #f6f6f6;
    padding: 20px;
    text-align: center;
}

.proposal-offcanvas {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

    .proposal-offcanvas .offcanvas-header {
        flex: 0 0 auto !important;
    }

    .proposal-offcanvas .offcanvas-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .proposal-offcanvas .proposal-scroll {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }

    .proposal-offcanvas .proposal-footer {
        flex: 0 0 auto !important;
    }

.proposal-card {
    background: #fff;
    border-radius: 6px;
}

.proposal-label {
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}

.proposal-input {
    height: 45px;
}

.hotal-radius-slider {
    width: 80%;
}


/*Shopping Cart*/

.passenger-card {
    display: flex;
    gap: 12px;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    margin-bottom: 10px;
    cursor: pointer;
}

    .passenger-card.active {
        border-color: #2563eb;
        background: #eef2ff;
    }

.included-box {
    background: #F7FAFC;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
}

.qty-box {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: 30px;
}

    .qty-box button {
        width: 28px;
        height: 28px;
        border: 1px solid #cbd5f5;
        background: #fff;
        border-radius: 6px;
        display: flex;
        justify-content: center;
    }

.ovwerview-form-check {
    padding: 6px 6px;
    display: flex;
    color: #1a202c;
    transition: background 0.2s;
}

.ovwerview-check-label {
    font-size: 14px;
    color: #1a202c !important;
    cursor: pointer;
    margin-left: 10px;
}

.tab-content h6 {
    font-size: 16px !important;
}


.extra-service-content {
    max-height: 500px;
    overflow-y: auto;
    background: #fff;
}

.extra-section {
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.extra-section-title {
    font-weight: 600;
    margin-bottom: 12px;
}

/* Included */
.extra-included-box {
    background: #f8fafc;
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.extra-included-list {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.extra-included-item {
    color: #16a34a;
    font-weight: 500;
}

/* Options */
.extra-option-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .extra-option-item input {
        width: 18px;
        height: 18px;
        border-color: #0d6efd;
    }

    .extra-option-item span {
        color: #1A202C;
        font-size: 13px;
    }


/* Hotal  */
.guest-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 18px;
    padding: 16px;
    z-index: 9999;
    width: 350px;
}

    .guest-dropdown.show {
        display: block;
    }

.room-block {
    padding-bottom: 12px;
    margin-bottom: 12px;
}

    .room-block h6 {
        font-weight: 600;
        margin-bottom: 8px;
    }

.remove-room {
    float: right;
    color: #3F8CFF;
    display: block;
}

.add-room {
    width: 100%;
    float: right;
    color: #3F8CFF;
}

.counter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

    .counter-row small {
        display: block;
        color: #64748b;
    }

.counter {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .counter button {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1px solid #3b82f6;
        background: #fff;
        color: #3b82f6;
        font-size: 18px;
        line-height: 1;
        text-align: center;
    }

    .counter span {
        min-width: 20px;
        text-align: center;
    }


.hotal-dropdown-wrapper {
    position: relative;
    width: 100%;
}

/* Select box */
.hotal-dropdown {
    border: 1px solid #cbd5e0;
    border-radius: 10px;
    padding: 10px 13px;
    background: #fff;
    cursor: pointer;
}


    .hotal-dropdown::after {
        content: "";
        position: absolute;
        right: 14px;
        top: 50%;
        width: 8px;
        height: 8px;
        border-right: 2px solid #3b82f6;
        border-bottom: 2px solid #3b82f6;
        transform: translateY(-50%) rotate(45deg);
        transition: transform 0.25s ease;
    }

    /* Arrow rotate on open */
    .hotal-dropdown.active::after {
        transform: translateY(-50%) rotate(-135deg);
    }


.hotal-dropdown-label {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
}

.hotal-dropdown-placeholder {
    font-size: 14px;
    font-weight: 600;
    color: #94a3b8;
}

/* Dropdown menu */
.hotal-dropdown-menu-custom {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 15px 40px rgba(0,0,0,.12);
    display: none;
    z-index: 1000;
}

    .hotal-dropdown-menu-custom.show {
        display: block;
    }

/* Search */
.hotal-dropdown-search-input {
    border-radius: 10px;
}

/* Items */
.hotal-dropdown-item-custom {
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #334155;
    margin-top: 6px;
}

    .hotal-dropdown-item-custom:hover,
    .hotal-dropdown-placeholder.active {
        background: #eaf2ff;
    }


.hotal-radius-filter {
    width: 300px;
    color: #fff;
    font-family: system-ui, sans-serif;
}

/* Header */
.hotal-radius-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hotal-radius-label {
    font-size: 14px;
    color: #1A202C;
    font-weight: bold;
}

.hotal-dropdown-text {
    color: #1F7BF4;
    margin-left: 4px;
    cursor: pointer;
    font-weight: bold;
}

.hotal-radius-value {
    font-size: 14px;
    font-weight: 600;
    color: #3b82f6;
}

/* Slider */
.hotal-radius-slider input[type="range"] {
    width: 100%;
    appearance: none;
    height: 4px;
    background: linear-gradient( to right, #3b82f6 0%, #3b82f6 80%, #e5e7eb 80%, #e5e7eb 100% );
    border-radius: 10px;
    outline: none;
}

    /* Thumb */
    .hotal-radius-slider input[type="range"]::-webkit-slider-thumb {
        appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #3b82f6;
        border: 3px solid #fff;
        cursor: pointer;
    }

    .hotal-radius-slider input[type="range"]::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #3b82f6;
        border: 3px solid #fff;
        cursor: pointer;
    }

.responsive-panel {
    max-width: 530px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.fp-time-heading {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    margin-left: 5px;
    color: #1f7bf4;
}

.page-loader {
    position: fixed;
    inset: 0;
    background: rgb(53 49 49 / 80%);
    z-index: 99999 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.route-tabs {
    border-bottom: 1px solid #e5e7eb;
}

.route-tab {
    padding: 7px 14px;
    cursor: pointer;
}

    .route-tab.active-tab {
        background: #E5EFFF;
    }

.tab-labelextra {
    font-size: 13px;
    color: #718096;
    margin-bottom: 4px;
}

.tab-routeextra {
    font-size: 14px;
    color: #111827;
}

.bottom-lineextra {
    height: 1px;
    background: #e5e7eb;
}

/* ── Additional Services: service selector tabs ──────────────────────────── */
.svc-selector-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0 16px;
}

.svc-selector-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 14px;
    min-width: 110px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    background: var(--widget-menu-bg, #fff);
    color: var(--widget-menu-text, #1a202c);
    transition: background 0.15s;
}

    .svc-selector-tab:hover {
        filter: brightness(0.97);
    }

    .svc-selector-tab.active {
        background: var(--widget-menu-active-bg, #e5efff);
    }

.svc-tab-name {
    font-size: 14px;
    font-weight: 600;
    color: inherit;
    margin-bottom: 3px;
}

.svc-tab-price {
    font-size: 13px;
    font-weight: 500;
    color: inherit;
    opacity: 0.85;
}

.seat-legend {
    background: #fff;
    border-radius: 10px;
}

.legend-row {
    padding: 12px 0;
    border-top: 1px solid #e5e5e5;
}

    .legend-row:first-of-type {
        border-top: 0;
    }

.legend-box {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
}

.passengers-panel {
    background: #fff;
}

.passenger-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    cursor: pointer;
    border-radius: 6px;
    margin-bottom: 8px;
}

    .passenger-card:hover {
        background: #f5f7ff;
    }

    .passenger-card.active {
        background: #eef3ff;
    }

.font14 {
    font-size: 16px !important;
    font-weight: bold;
}

.passenger-card .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #093E84;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.passenger-content {
    display: none;
}

    .passenger-content.active {
        display: block;
    }

.legend-box {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
}

.available {
    background: #3b82f6;
}

.selected {
    background: #22c55e;
}

.front {
    background: #f59e0b;
}

.legroom {
    background: #2563eb;
}

.unavailable {
    background: #d1d5db;
    color: #6b7280;
}

.legend-row {
    padding: 10px 0;
    border-top: 1px solid #eee;
}

.seat-not-available {
    padding: 80px 20px;
}

.fw-not-available {
    font-size: 14px !important;
    color: #1A202C;
    font-weight: bold;
}

.icon-circle {
    width: 60px;
    height: 60px;
    margin: auto;
    border-radius: 50%;
    background: #E5EFFF;
    color: #3F8CFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 600;
}

.seat-container {
    margin: auto;
    padding: 20px 0px;
}

.seat-header {
    display: grid;
    grid-template-columns: 40px repeat(10,1fr);
    gap: 25px;
    text-align: justify;
    margin-bottom: 12px;
}

.seat-row {
    display: grid;
    grid-template-columns: 40px repeat(10,1fr);
    gap: 12px;
    margin-bottom: 12px;
    align-items: center;
}

.row-number {
    text-align: center;
}

.seat {
    border-radius: 10px;
    position: relative;
    display: block;
}

    .seat span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-size: 14px;
        font-weight: 600;
    }

    .seat.available,
    .seat.legroom,
    .seat.front,
    .seat.selected {
        cursor: pointer;
    }

    .seat.unavailable,
    .seat.other-pax {
        cursor: not-allowed;
    }

.seat.other-pax {
    background: #df5e60;
    color: #fff;
    width: 45px;
    height: 45px;
}

.available {
    background: #3F8CFF;
    width: 45px;
    height: 45px;
}

.unavailable {
    background: #E2E8F0;
    color: #8a97a8;
    width: 45px;
    height: 45px;
}

.selected {
    background: #16a34a;
    color: #fff;
    width: 45px;
    height: 45px;
}

.front {
    background: #f59e0b;
    color: #fff;
    width: 45px;
    height: 45px;
}

.legroom {
    background: #3F8CFF;
    color: #fff;
    width: 45px;
    height: 45px;
}

.seat.seat-chargeable {
    color: #fff;
}

.price-summ {
    width: 230px;
    margin-left: auto; /* pura block right side chala jayega */
}

.overview-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.overview-price-total {
    font-weight: 600;
    border-top: 1px solid #ddd;
    padding-top: 8px;
}

.collapse-arrow {
    transition: transform 0.3s ease;
}


.car-toggle[aria-expanded="true"] .collapse-arrow {
    transform: rotate(180deg);
}

.desci-info {
    background: #E5EFFF;
    border: 1px solid #99C0FF;
    border-radius: 8px;
    padding: 8px 6px;
    color: #1F7BF4;
    font-size: 13px;
    height: 50px;
    margin-bottom: 16px;
    text-align: center;
}

.mb-30 {
    margin-bottom: 30px;
}

.tooltip-icon {
    position: relative;
    cursor: pointer;
}

.tooltip-text {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    padding: 5px 8px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    transition: 0.3s;
}

.tooltip-icon:hover .tooltip-text {
    opacity: 1;
}

.price-breakdown-trigger {
    cursor: help;
    display: inline-block;
}

.price-breakdown-popover {
    max-width: 360px;
}

.price-breakdown-popover .popover-body {
    padding: 14px 16px;
    font-size: 14px;
    color: inherit;
}

.price-breakdown-popover .pb-section-header {
    font-weight: 600;
    margin-top: 8px;
}

.price-breakdown-popover .pb-section-header:first-child {
    margin-top: 0;
}

.price-breakdown-popover .pb-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 3px 0;
}

.price-breakdown-popover .pb-row.pb-subtotal {
    font-weight: 700;
}

.price-breakdown-popover .pb-row.pb-total {
    border-top: 1px solid #ddd;
    padding-top: 8px;
    margin-top: 10px;
    font-weight: 700;
}

@media (max-width: 576px) {
    .price-breakdown-popover {
        max-width: calc(100vw - 24px);
    }

    .price-breakdown-popover .popover-body {
        padding: 10px 12px;
        font-size: 13px;
    }

    .price-breakdown-popover .pb-row {
        gap: 12px;
    }
}

@media (hover: none) and (pointer: coarse) {
    .price-breakdown-trigger {
        cursor: pointer;
    }
}

.seat-info-popover {
    max-width: 220px;
}

.seat-info-popover .popover-body {
    padding: 12px 14px;
    font-size: 13px;
    text-align: center;
    color: #333;
}

.seat-info-popover .st-title {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 6px;
}

.seat-info-popover .st-description {
    margin-bottom: 4px;
}

.seat-info-popover .st-price {
    font-weight: 600;
}

.btn-close {
    width: 12px;
    height: 12px;
}

.thomalesmodify-btn .select-btn {
    background: #1F7BF4;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    margin: 0 auto;
    cursor: pointer;
    transition: 0.3s;
    width: auto;
}

.country-code {
    width: 70px;
    text-align: center;
}

.promolabel {
    font-size: 13px;
    font-weight: 500;
    color: #1A202C;
    margin-bottom: 6px;
    text-align: justify;
}

.free-cancel-box {
    background-color: #EDFCF3;
    padding: 8px 10px;
    border-radius: 12px;
    margin-top: 15px;
}

.cancel-iconn {
    width: 26px;
    height: 26px;
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.cancel-text {
    font-size: 14px;
    color: #1f2937;
}

/*Flexible dates*/

.Flexiblecustom-table {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
}

.Flexiblelogo {
    width: 40px;
    margin: 5px 0;
}

.logo-sm {
    width: 30px;
}

/* TEXT */
.Flexibleairline {
    font-size: 12px;
    color: #6c757d;
}

.Flexibleprice {
    font-weight: 600;
}

.old-price {
    text-decoration: line-through;
    font-size: 12px;
    color: #9aa0a6;
}

.new-price {
    font-weight: 700;
    color: #0d6efd;
}

.per {
    font-size: 11px;
    color: #8a94a6;
}

/* MOBILE */
.mobile-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 12px rgba(0,0,0,0.08);
    margin-top: 20px;
    padding: 10px;
}

.Flexiblecard-head {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    background: #f5f7fa;
}

.m-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-top: 1px solid #eee;
}

.center {
    text-align: center;
}

.Flexiblehighlight {
    background: #f8fafc;
}

.flexible-info-alert {
    background: #fffbea;
    border: 1px solid #eef2c2;
    border-radius: 8px;
    padding: 10px 12px;
    color: #a27a09;
    font-size: 13px;
    margin-bottom: 16px;
}

.flexlogo {
    height: 30px;
}

tr td .airline-name, .center .airline-name {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
}

@media (min-width: 768px) {
    .w-md-80 {
        width: 80%;
    }
}
.reset {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    color: #000;
    line-height: 20px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 23px;
    margin-top: 10px;
}

    .reset span {
        background: #000;
        color: #fff;
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 13px;
        cursor: pointer;
    }

.check-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 14px;
}
.price-text {
    color: #6c757d;
    font-size: 14px;
}
.accordion-item {
    border: none;
    border-bottom: 1px solid #eee;
}
.custom-modal{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s ease-out;
    z-index: 1055;
    overscroll-behavior: contain;
}
                .custom-modal.open {
                    opacity: 1;
                    visibility: visible;
                }
                .custom-modal .modal-dialog {
                    transform: translateY(50px);
                    opacity: 0;
                    transition: all 0.35s ease-out;
                }
                .custom-modal.open .modal-dialog {
                    transform: translateY(0);
                    opacity: 1;
                }
body:has(.custom-modal.open) {
    overflow: hidden;
    height: 100%;
}

.nav-link.active .travel-icon-align {
    filter: brightness(0);
}

@media(max-width:769px){
    .button-group {
        margin-left: 0 !important
    }
    .container-no-padding{
        padding: 0!important 
    }
}

.journey-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px 14px;
}

.route {
    font-weight: 600;
    font-size: 14px;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 20px;
}

.arrow {
    color: #007bff;
    font-weight: bold;
}

.date {
    font-size: 12px;
    color: #6c757d;
    margin-top: 3px;
}
.modify-link {
    font-size: 13px;
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
}

.modify-link:hover {
     text-decoration: underline;
}
@media(min-width:769px){
    .modify-search-btn {
        max-width: 80px
    }
}
.from-to-wrapper {
    position: relative;
}

@media (max-width: 768px) {
    .from-to-wrapper {
        flex-direction: column;
    }
}

.cart-empty-state {
    padding: 40px 16px;
}

.cart-empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 1.5px solid #d0d5dd;
    color: #667085;
    background: transparent;
}

.cart-empty-title {
    color: #344054;
    font-weight: 600;
}

/* ── Role Card ───────────────────────────────────────── */
.role-card {
    border: 1px solid #dee2e6;
    overflow: visible;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

    .role-card:hover {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    }

.role-card--active {
    border-color: #0a4ea333;
}

    .role-card--active .role-card__header {
        background-color: #f0f5ff;
        border-bottom: 1px solid #d0e0ff;
    }

.role-card--inactive .role-card__header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.role-card--invalid {
    border-color: #dc3545 !important;
    border-width: 2px !important;
}

    .role-card--invalid .role-card__header {
        background-color: #fdeaea;
    }

.role-card__error {
    color: #dc3545;
}

/* ── Scrollable Travel Group Box ────────────────────── */
.tg-scroll-box {
    max-height: 130px;
    overflow-y: auto;
    background-color: #fdfdfd;
    scrollbar-width: thin;
    scrollbar-color: #adb5bd transparent;
}

    .tg-scroll-box::-webkit-scrollbar {
        width: 5px;
    }

    .tg-scroll-box::-webkit-scrollbar-thumb {
        background: #adb5bd;
        border-radius: 4px;
    }

/* ── Chip-style Travel Group Toggles ────────────────── */
.tg-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid #dee2e6;
    background: #fff;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    white-space: nowrap;
}

    .tg-chip:hover {
        border-color: #0a4ea3;
        background: #f0f5ff;
        color: #0a4ea3;
    }

.tg-chip--selected {
    border-color: #0a4ea3;
    background: #0a4ea3;
    color: #e7f0ff;
    font-weight: 500;
}

/* ── Disabled state when role is inactive ───────────── */
.pe-none {
    pointer-events: none;
}

.w-20-px{
    width:20px;
}

.flight-plus-badge {
    display: inline-block;
    padding: 3px 10px;
    margin-bottom: 6px;
    border: 1px solid #e05c6a;
    border-radius: 12px;
    color: #e05c6a;
    font-size: 12px;
    font-weight: 500;
    background-color: #fff0f2;
}

.service-item img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}.bookingflightbg {
  background: #F7FAFC;
  padding: 5px;
}

/* Request Assistance form (Shopping Cart RA mode) */
.ra-form .thomalex-inner-tabs {
    padding: 0 16px;
    margin-bottom: 0;
    gap: 24px;
}

.ra-form .thomalex-inner-tabs .nav-link {
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 0;
    outline: none;
}

    .ra-form .thomalex-inner-tabs .nav-link:hover {
        color: #1a202c;
    }

    .ra-form .thomalex-inner-tabs .nav-link:focus,
    .ra-form .thomalex-inner-tabs .nav-link:focus-visible {
        outline: none;
        box-shadow: none;
    }

.ra-form .form-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #4a5568;
    margin-bottom: 4px;
}

.ra-leg-circle {
    position: relative;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 38px;
    height: 38px;
    margin-bottom: 8px;
    border-radius: 50%;
    border: 1px solid #d1d5db;
    background: #e5e7eb;
    color: #4a5568;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .ra-leg-circle::before,
    .ra-leg-circle::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background: currentColor;
        border-radius: 1px;
    }

    .ra-leg-circle-add::before {
        width: 12px;
        height: 2px;
        transform: translate(-50%, -50%);
    }

    .ra-leg-circle-add::after {
        width: 2px;
        height: 12px;
        transform: translate(-50%, -50%);
    }

    .ra-leg-circle-remove::before {
        width: 12px;
        height: 2px;
        transform: translate(-50%, -50%);
    }

    .ra-leg-circle:hover {
        background: #d1d5db;
        color: #1a202c;
    }

    .ra-leg-circle:focus,
    .ra-leg-circle:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px rgba(31, 123, 244, 0.25);
    }

.request-assistance-primary-btn {
    background: #0a3478;
    color: #ffffff;
    font-weight: 600;
    padding: 10px 28px;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    min-width: 180px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .request-assistance-primary-btn:hover,
    .request-assistance-primary-btn:focus,
    .request-assistance-primary-btn:focus-visible {
        background: #08285c;
        color: #ffffff;
        outline: none;
    }

    .request-assistance-primary-btn:disabled,
    .request-assistance-primary-btn[disabled] {
        background: #0a3478;
        color: #ffffff;
        opacity: 1;
        cursor: not-allowed;
    }

.ra-form-incart {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 16px;
    color: #4a5568;
    font-size: 0.9rem;
    text-align: center;
}

.seatmap-info-alert {
    background: #E5EFFF;
    border: 1px solid #99C0FF;
    padding: 10px 12px;
    color: #1F7BF4;
    font-size: 13px;
}

.table-header .col-label+.col-label {
  border-left: 1px solid rgba(14, 28, 50, 0.04);
}
@media (max-width: 600px) {
  .reservation-pendin-grow>div,
  .reservation-ticket-row>div {
    position: relative;
    padding-top: 15px;
  }

  .reservation-pendin-grow>div::before,
  .reservation-ticket-row>div::before {
    content: attr(data-label);
    /* position: absolute; */
    top: 6px;
    left: 10px;
    font-size: 16px;
    margin-bottom: 10px;
    /* background: #e0e0e0; */
    font-weight: 600;
    /* width: 100%; */
    /* padding: 10px; */
    color: #24272b;
  }
}

.reservation-row,
.reservation-ticket-row,
.reservation-Canceled-row,
.reservation-pendin-grow {
  display: grid;
  border-radius: 6px;
  overflow: hidden;
  /* grid-template-columns: 6px 220px 1fr 220px 220px 180px 70px; */
}

/* left vertical blue bar */
.reservation-pendin-grow>.bar {
  background: linear-gradient(180deg, #1f7bf4);
}

.reservation-ticket-row>.bar {
  background: linear-gradient(180deg, #f79009);
}

.reservation-Canceled-row>.bar {
  background: linear-gradient(180deg, #F04438);
}
@media (min-width: 768px) and (max-width: 1024px) {

  .swap-icon-mulity,
  .swap-icon-mulity2 {

    margin-top: -4% !important;

  }

}

@media (max-width: 768px) {
  hr {
    margin: 5px !important
  }

}

.action-bar-icon {
  height: 16px;
  width: 16px;
  object-fit: contain;
}

@media (max-width: 760px) {
  .reservation-row>.bar {
    display: block;
  }

  .reservation-row>*:not(.bar) {
    grid-column: span 1;
  }

}
.file-buttons {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  font-size: 13px;
  margin-bottom: 14px;
}

.file-buttons .btn {
  flex: 1 1 50%;
  height: 40px;
  border-radius: 8px;
}

.info-item+.info-item {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.card-air {
  border-radius: 6px;
  box-shadow: none;
  border: 1px solid #E2E8F0;
  margin: 15px;
  margin-top: 0px;
}

.toggle-btn img {
  width: 18px;
  transition: transform .2s ease;
}

.rental-col+.rental-col {
  border-left: 1px solid #edf2f7;
}


label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 1px;
}

.panlebg {
  background: var(--panel-bg) !important;
  border: 1px solid #E2E8F0;
  position: sticky;
    top: 72px;
    left: 0;
    width: 100%;
    z-index: 1;
  border-bottom: 1px solid #e5e7eb;
  
}

.booking-row-initial,
.booking-row-confirmed,
.booking-row-cancelled,
.booking-row-held,
.booking-row-pending,
.booking-row-eticket {
  display: grid;
  grid-template-columns: 6px 110px 1fr 110px 120px 130px 60px;
  align-items: stretch;
}

@media (min-width: 1400px) {
  .booking-row-initial,
  .booking-row-confirmed,
  .booking-row-cancelled,
  .booking-row-held,
  .booking-row-pending,
  .booking-row-eticket {
    grid-template-columns: 6px 130px 1fr 140px 140px 150px 75px;
  }
}

.booking-row-initial > .bar    { background: linear-gradient(180deg, #94a3b8, #64748b); }
.booking-row-confirmed > .bar  { background: linear-gradient(180deg, #22c55e, #16a34a); }
.booking-row-cancelled > .bar  { background: linear-gradient(180deg, #ef4444, #dc2626); }
.booking-row-held > .bar       { background: linear-gradient(180deg, #f79009, #d97706); }
.booking-row-pending > .bar    { background: linear-gradient(180deg, #1f7bf4, #1d4ed8); }
.booking-row-eticket > .bar    { background: linear-gradient(180deg, #8b5cf6, #7c3aed); }

/* ===== Booking status pill badges ===== */
.status-pill-initial,
.status-pill-confirmed,
.status-pill-cancelled,
.status-pill-held,
.status-pill-pending,
.status-pill-eticket {
 
  align-items: center;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
 
  margin-top: 4px;
}

.status-pill-initial   { background: #f1f5f9; color: #64748b; }
.status-pill-confirmed { background: #dcfce7; color: #16a34a; }
.status-pill-cancelled { background: #fee2e2; color: #dc2626; }
.status-pill-held      { background: #fff5d8; color: #f78e09; }
.status-pill-pending   { background: #eff6ff; color: #1f7bf4; }
.status-pill-eticket   { background: #f3e8ff; color: #7c3aed; }

/* ===== Booking Detail Popup — polish, scoped to .custom-wide-modal ===== */

/* 1. Header text: global rule had color:#fff on a white background */
.custom-wide-modal .modal-header.custom-header {
    color: var(--neutral-800);
    border-bottom: 1px solid var(--neutral-300);
}

/* 2. Close button: legible on white header */
.custom-wide-modal .close-top {
    background: var(--neutral-100);
    color: var(--neutral-700);
}
.custom-wide-modal .close-top:hover {
    background: var(--neutral-200);
    color: var(--neutral-900);
}

/* 3. Status dot colour matches the badge variant */
.custom-wide-modal .status-pill-pop.status-pill-initial::before   { background: #64748b; }
.custom-wide-modal .status-pill-pop.status-pill-confirmed::before { background: #16a34a; }
.custom-wide-modal .status-pill-pop.status-pill-cancelled::before { background: #dc2626; }
.custom-wide-modal .status-pill-pop.status-pill-held::before      { background: #f78e09; }
.custom-wide-modal .status-pill-pop.status-pill-pending::before   { background: #1f7bf4; }
.custom-wide-modal .status-pill-pop.status-pill-eticket::before   { background: #7c3aed; }

/* 4. Meta-row gap: a later global rule had bumped it to 2rem */
.custom-wide-modal .meta-row {
    gap: 0.5rem;
}

/* 5. Info-row: subtle surface behind the booking key fields */
.custom-wide-modal .info-row {
    background: var(--neutral-50);
}

/* 6. Total price cell: brand-tinted highlight */
.custom-wide-modal .total-item {
    background: var(--primary-50);
}
.custom-wide-modal .total-value {
    color: var(--primary-900);
}

/* 7. Top tabs: separator between tabs and content; stronger active colour */
.custom-wide-modal .top-tabs {
    border-bottom: 1px solid var(--neutral-300);
}
.custom-wide-modal .top-tabs .nav-link.active {
    color: var(--primary-900);
    font-weight: 600;
}

/* 8. Segment background */
.custom-wide-modal .bookingflightbg {
    padding: 6px;
}

/* 9. Card-air: flush to container edges (bookingflightbg padding is enough) */
.custom-wide-modal .card-air {
    margin-left: 0;
    margin-right: 0;
}

/* 10. Tables inside popup: horizontal rules only, no vertical box borders */
.custom-wide-modal .table thead th {
    border-left: none;
    border-right: none;
}
.custom-wide-modal .table tbody td {
    border-left: none;
    border-right: none;
}

/* 11. Customer table: row hover */
.custom-wide-modal .table tbody tr:hover > td {
    background: var(--neutral-50);
}

/* 12. Passenger pricing breakdown card */
.custom-wide-modal .pax-price-card {
    border: 1px solid var(--neutral-300);
    border-radius: var(--rounded-8);
    overflow: hidden;
    margin-bottom: 12px;
    background: #fff;
}
.custom-wide-modal .pax-price-header {
    background: var(--neutral-50);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-700);
    border-bottom: 1px solid var(--neutral-300);
}
.custom-wide-modal .pax-price-body {
    padding: 0;
}
.custom-wide-modal .pax-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 20px;
    font-size: 14px;
    border-bottom: 1px solid var(--neutral-100);
}
.custom-wide-modal .pax-price-row:last-child {
    border-bottom: none;
}
.custom-wide-modal .pax-price-row span:first-child {
    color: var(--neutral-500);
}
.custom-wide-modal .pax-price-row span:last-child {
    font-weight: 600;
    color: var(--neutral-800);
}
.custom-wide-modal .pax-price-discount-row span:last-child {
    color: #16a34a;
}
.custom-wide-modal .pax-price-total-row {
    background: var(--primary-50);
    border-top: 1px solid var(--neutral-300);
    border-bottom: none;
}
.custom-wide-modal .pax-price-total-row span:first-child {
    color: var(--neutral-700);
    font-weight: 600;
}
.custom-wide-modal .pax-price-total-row span:last-child {
    color: var(--primary-900);
    font-size: 15px;
}

.booking-card {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
}

.service-section-title {
    font-size: 18px !important;
    font-weight: 700;
    color: #004b8d;
    margin-bottom: 20px !important;
}

.service-sub-title {
    font-size: 18px !important;
    font-weight: 700;
    color: #004b8d;
    margin-bottom: 20px !important;
}

.service-sub-tittle {
    margin-top: 20px;
}

.service-sub-tittle h3 {
    font-size: 18px !important;
    font-weight: 700;
    color: #004882;
    margin-bottom: 5px;
}

.empty-section {
    border: 1px dashed #d9dee5;
    border-radius: 12px;
    padding: 24px;
    color: #6b7280;
    text-align: center;
}

.empty-section i.bi {
    font-size: 28px;
    display: block;
    color: #9ca3af;
}

.empty-section p {
    margin: 0;
    font-size: 14px;
}

/* Top action buttons */
.custom-btn {
    border-radius: 8px;
    font-weight: 600;
    padding: 10px 16px;
    border: none;
}

.btn-red {
    border-radius: 6px;
    background-color: #da2a27;
    color: #fff;
    font-weight: 400;
    font-size: 0.875rem;
    padding: 11px 16px;
    line-height: 1;
    margin: 0;
}

.btn-red:disabled,
.btn-red[disabled] {
    background-color: #e98785;
    cursor: not-allowed;
}

.btn-blue {
    background: #054689;
    color: #fff;
    font-weight: 400;
    font-size: 0.875rem;
    padding: 11px 16px;
    line-height: 1;
    margin: 0;
}

.btn-blue:disabled,
.btn-blue[disabled] {
    background-color: #6d8bb3;
    cursor: not-allowed;
}

.add-btn {
    background-color: #054688;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 400;
}

.add-btn:disabled,
.add-btn[disabled] {
    background-color: #6d8bb3;
    cursor: not-allowed;
}

.add-btn:hover:not(:disabled) {
    color: #fff;
    background-color: #03325f;
}

.flight-box {
    border: 1px solid #d9dee5;
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
}

.service-flight-time {
    font-size: 23px;
    font-weight: 700;
    color: #004882;
    line-height: 1.2;
}

.service-airport-name {
    font-size: 15px;
    font-weight: 700;
    color: #222;
}

.service-line {
    height: 1px;
    background: #bdbdbd;
    flex: 1;
    position: relative;
}

.left-dot::before,
.right-dot::after {
    content: "";
    width: 10px;
    height: 10px;
    background: #b8b8b8;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.left-dot::before {
    left: 0;
}

.right-dot::after {
    right: 0;
}

.flight-box .duration {
    font-size: 14px;
    color: #666;
    font-weight: 600;
    white-space: nowrap;
}

.service-airline-logo {
    width: 60px;
    height: 60px;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
    flex-shrink: 0;
}

.service-airline-logo-sm {
    width: 40px;
    height: 40px;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
    flex-shrink: 0;
}

.toggle-btn-flight {
    background: transparent;
    border: none;
    padding: 0;
    color: #054688;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    min-height: 60px;
}

.toggle-btn-flight i.bi {
    font-size: 56px;
    line-height: 1;
    transition: transform 0.2s;
}

.toggle-btn-flight .chevron-svg {
    width: 48px;
    height: 28px;
    color: #054688;
    transition: transform 0.2s;
}

.toggle-btn-flight.expanded i.bi,
.toggle-btn-flight.expanded .chevron-svg {
    transform: rotate(180deg);
}

.toggle-btn-flight:hover i.bi,
.toggle-btn-flight:hover .chevron-svg {
    color: #033567;
}

.flight-detail-panel {
    display: none;
}

.flight-detail-panel.open {
    display: block;
}

.toggle-flight-detail-box {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
}

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

.toggle-timeline .dot {
    width: 12px;
    height: 12px;
    background: #a8a8a8;
    border-radius: 50%;
}

.toggle-timeline .line {
    width: 2px;
    height: 120px;
    background: #a8a8a8;
}

.toggle-flight-heading {
    font-size: 16px !important;
    font-weight: 600;
    color: #111;
    margin-bottom: 0;
}

.toggle-duration-text {
    margin-top: 25px;
    font-size: 17px;
    color: #6b4a2b;
}

.toggle-flight-class {
    font-size: 16px;
    text-align: right;
    font-weight: 700;
}

.operator-text {
    font-size: 14px;
    color: #475569;
}

@media (min-width: 992px) {
    .crr-seg-col-timeline,
    .crr-seg-col-operator {
        flex: 0 0 30% !important;
        max-width: 30% !important;
        width: 30% !important;
    }

    .crr-seg-col-family {
        flex: 0 0 40% !important;
        max-width: 40% !important;
        width: 40% !important;
    }
}

.crr-fop-title {
    display: flex;
    flex-direction: column;
    font-size: 26px;
    color: #004882;
    margin-bottom: 0;
}

.crr-fop-title span {
    color: #555555;
    font-size: 14px;
    line-height: 1.2;
}

.font15 {
    font-size: 15px !important;
}

.service-table {
    width: 100%;
    margin-bottom: 0;
}

.service-table-ancillary {
    table-layout: fixed;
}

.service-table-ancillary th:nth-child(1),
.service-table-ancillary td:nth-child(1) {
    width: 37.5%;
}

.service-table-ancillary th:nth-child(2),
.service-table-ancillary td:nth-child(2) {
    width: 25%;
}

.service-table-ancillary th:nth-child(3),
.service-table-ancillary td:nth-child(3) {
    width: 25%;
}

.service-table-ancillary th:nth-child(4),
.service-table-ancillary td:nth-child(4) {
    width: 12.5%;
    text-align: right;
}

.service-table th {
    color: #7b8190;
    font-size: 14px;
    font-weight: 600;
    background: #fff;
    padding: 12px 14px;
    border: 0;
    vertical-align: top;
}

.service-table td {
    font-size: 14px;
    color: #1f2937;
    background: #fff;
    padding: 12px 14px;
    border: 0;
    border-left: 0;
    vertical-align: middle;
}

/* Price breakdown */
.service-price-breakdown p {
    margin-bottom: 8px;
    font-size: 16px;
}

.total-price {
    font-size: 18px !important;
    font-weight: 700;
    color: #0056a6;
}

/* Right summary card */
.service-summary-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    position: sticky;
    top: 20px;
}

.service-summary-title {
    font-size: 17px;
    font-weight: 600;
    color: #004b8d;
    line-height: 1.3;
}

.badge-gray {
    background: #ececec;
    color: #666;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.badge-green {
    background: #2ecb66;
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.badge-red {
    background: #e74c3c;
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.summary-od-head,
.summary-od-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.summary-od-logo {
    flex: 0 0 20%;
    max-width: 20%;
}

.summary-od-col {
    flex: 0 0 40%;
    max-width: 40%;
    line-height: 1.35;
}

.summary-od-col .fw-bold {
    color: #1a202c;
}

.side-card-header {
    padding: 12px;
    border-bottom: 1px solid #edf0f5;
    font-size: 16px;
    font-weight: 600;
    color: #1a202c;
}

.price-group-label {
    font-size: 14px;
    font-weight: 600;
    color: #1a202c;
    margin: 4px 0 8px;
}

@media (max-width: 991px) {
    .service-summary-card {
        margin-top: 24px;
        position: relative;
    }

    .flight-box .row {
        gap: 20px;
    }

    .service-section-title {
        font-size: 22px !important;
    }
}

@media (max-width: 767px) {
    .booking-card {
        padding: 16px;
    }

    .flight-box {
        text-align: center;
    }

    .flight-route {
        flex-direction: column;
        gap: 15px;
    }

    .top-btns {
        margin-top: 15px;
        justify-content: flex-start !important;
    }

    .toggle-flight-heading {
        font-size: 18px;
    }

    .operator-text {
        text-align: left;
        margin-top: 20px;
    }

    .toggle-flight-class {
        font-size: 18px;
        text-align: left;
        font-weight: 700;
        margin-top: 10px;
    }
}

/* ===== Simple Widget theming (Task 166260) =====
   Colours come from the widget's wizard configuration and are injected as
   CSS custom properties on .widget-simple by SimpleWidget.razor (ThemeStyle). */
.widget-simple {
    background-color: var(--widget-bg, rgba(0, 0, 0, 0.72));
    padding: 24px;
    border-radius: 8px;
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
}

.widget-simple .widget-simple-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.widget-simple .widget-simple-tabs .nav-link {
    color: var(--widget-menu-text, #fff);
    background-color: transparent;
    font-weight: 600;
    border: none;
}

.widget-simple .widget-simple-tabs .nav-link:hover {
    color: var(--widget-menu-active-bg, #ffffa0);
}

.widget-simple .widget-simple-tabs .nav-link.active {
    color: var(--widget-menu-active-bg, #ffffa0);
    background-color: transparent;
    border-bottom: 2px solid var(--widget-menu-active-bg, #ffffa0);
}

.widget-simple .widget-simple-tabs .nav-link .widget-tab-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: -2px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

/* Search button picks up the widget's button + text colours */
.widget-simple .search-btn {
    background-color: var(--widget-button, #69b524);
    color: var(--widget-search-btn-text, #fff);
}

.widget-simple .search-btn:hover {
    background-color: var(--widget-button, #69b524);
    color: var(--widget-search-btn-text, #fff);
    filter: brightness(0.95);
}

/* Text sitting directly on the widget background uses the label colour.
   (Not the input-box internal labels, which live on white fields.) */
.widget-simple > .widget-simple-label,
.widget-simple .trip-selector .trip-option,
.widget-simple .flexible-dates-label {
    color: var(--widget-label, #fff);
}

/* ----- Simple widget: compact single-row flight form ----- */
.widget-trip-selector {
    display: flex;
    gap: 22px;
    align-items: center;
}

.widget-trip-selector .trip-option {
    background: transparent;
    border: none;
    color: var(--widget-label, #fff);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    padding: 4px 0;
    cursor: pointer;
}

.widget-trip-selector .trip-option.active {
    color: var(--widget-menu-active-bg, #ffffa0);
}

.widget-simple-row {
    display: flex;
    gap: 0;
    align-items: stretch;
    flex-wrap: nowrap;
    position: relative;
}

/* RV-style: gapless, square-cornered, connected segments sharing 1px borders */
.widget-simple .widget-simple-row > .thomalex-styled-input-box,
.widget-simple .widget-simple-row > .search-btn {
    border-radius: 0;
    margin-left: -1px;
}

.widget-simple .widget-simple-row > .thomalex-styled-input-box:first-child {
    margin-left: 0;
}

.widget-simple .widget-simple-row > .thomalex-styled-input-box {
    flex: 1 1 0;
    min-width: 0;
}

.widget-simple .widget-simple-row > .thomalex-styled-input-box:hover,
.widget-simple .widget-simple-row > .thomalex-styled-input-box:focus-within {
    z-index: 2;
}

/* Passengers / guests segment inline in the main row */
.widget-simple-row > .widget-passengers {
    flex: 0 0 200px;
    min-width: 170px;
}

/* Keep the passengers/guests summary on one line (no vertical overflow when cramped) */
.widget-simple .widget-passengers .input-value > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #9ca3af;
    font-weight: 400;
}

/* Search button = last inline segment: full-height, square, no auto gap */
.widget-simple-row > .search-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-height: auto;
    padding: 0 30px;
    font-weight: 900;
    text-transform: uppercase;
}

.widget-simple-bottombar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 14px;
}

.widget-simple-bottombar > .widget-cabin {
    flex: 0 0 auto;
    min-width: 0;
    width: auto;
}

/* RV-style single-line fields: icon + placeholder/value only, fixed 52px height (no stacked label) */
.widget-simple .widget-simple-row > .thomalex-styled-input-box {
    height: 52px;
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

.widget-simple .widget-simple-row .input-label {
    display: none;
}

.widget-simple .widget-simple-row .input-value {
    font-size: 14px;
    width: 100%;
    color: #1f1f1f;
}

.widget-simple .input-value::placeholder {
    color: #9ca3af;
    opacity: 1;
    font-weight: 400;
}

.widget-simple .input-icon {
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.widget-simple .input-icon,
.widget-simple .dropdown-arrow {
    filter: brightness(0) saturate(100%) invert(50%);
}

.widget-simple .widget-simple-tabs .nav-link .travel-icon-align {
    filter: brightness(0) invert(1);
}

.widget-simple .add-flight-btn img {
    filter: brightness(0) saturate(100%) invert(50%);
    margin-right: 6px;
}

/* Nested location field (Hotels/Cars LocationSearchBox): square + single-line like the others (review #3) */
.widget-simple .widget-simple-row > div > .thomalex-styled-input-box {
    border-radius: 0;
    height: 52px;
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    width: 100%;
}

/* RV has no swap icon between Leaving/Going To */
.widget-simple .swap-icon {
    display: none;
}

/* Cabin: RV renders it as a transparent right-aligned dropdown (no white box / no label) */
.widget-simple-bottombar > .widget-cabin {
    border: none;
    background: transparent;
    padding: 0;
    text-align: left;
}

.widget-simple-bottombar > .widget-cabin .input-label {
    display: none;
}

.widget-simple-bottombar > .widget-cabin .input-value {
    color: var(--widget-label, #fff);
    justify-content: flex-start;
    gap: 8px;
}

.widget-simple .widget-cabin .dropdown-box {
    padding: 6px;
}

.widget-simple .widget-cabin .dropdown-box .dropdown-option {
    padding: 5px 12px;
    line-height: 1.25;
    text-align: left;
}

/* Mobile: stack the connected segments into a single column (phones only) */
@media (max-width: 575.98px) {
    .widget-simple-row {
        flex-wrap: wrap;
    }

    .widget-simple .widget-simple-row > .thomalex-styled-input-box,
    .widget-simple .widget-simple-row > .search-btn,
    .widget-simple-row > .widget-passengers {
        flex: 1 1 100%;
        margin-left: 0;
        margin-top: -1px;
    }

    .widget-simple .widget-simple-row > .thomalex-styled-input-box:first-child {
        margin-top: 0;
    }

    .widget-simple-bottombar {
        flex-direction: column;
        align-items: stretch;
    }

    .widget-simple-bottombar > .widget-cabin {
        flex: 1 1 auto;
    }
}

.widget-simple .passenger-row {
    padding: 8px 4px;
}

.widget-simple .passenger-title {
    display: block;
    font-weight: 600;
    color: #1a202c;
}

.widget-simple .add-room {
    color: #1a202c;
}

.widget-simple .passenger-sub {
    display: block;
    font-size: 12px;
    color: #718096;
}

.widget-simple .counter-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #cbd5e0;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.widget-simple .widget-flexible .flexible-dates-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.widget-expedia {
    font-family: 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
}

.widget-expedia-box {
    background: var(--widget-bg);
    border-radius: 6px;
    padding: 25px;
}

.expedia-main-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
}

.expedia-main-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 72px;
    padding: 8px 14px;
    background: var(--widget-menu-bg);
    color: var(--widget-menu-text);
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
}

.expedia-main-tab b {
    font-weight: 600;
}

.expedia-main-tab.active {
    background: var(--widget-menu-active-bg);
}

.expedia-main-tab svg,
.expedia-main-tab img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
    fill: currentColor;
}

.expedia-main-tab img {
    filter: brightness(0) invert(1);
}

.expedia-trip-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    background: var(--widget-menu-bg);
    border-radius: 3px;
}

.expedia-trip-option {
    padding: 8px 12px;
    color: var(--widget-menu-text);
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
}

.expedia-trip-option.active {
    background: var(--widget-menu-active-bg);
}

.expedia-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.expedia-col {
    flex: 1 1 140px;
    min-width: 0;
}

.expedia-col.span6 { flex: 1 1 calc(50% - 6px); }
.expedia-col.span4 { flex: 1 1 calc(33.333% - 8px); }
.expedia-col.span3 { flex: 1 1 150px; }
.expedia-col.span2 { flex: 1 1 90px; }

.expedia-label {
    display: block;
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--widget-label);
    white-space: nowrap;
}

.expedia-field {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 3px;
}

.expedia-field.has-error {
    border-color: #e53e3e;
}

.expedia-field-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    flex: 0 0 auto;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(45%);
}

.widget-expedia .expedia-add-flight img {
    filter: brightness(0) saturate(100%) invert(50%);
    margin-right: 6px;
}

.widget-expedia .dropdown-box {
    width: 270px;
}

.widget-expedia .passenger-label {
    flex: 1 1 auto;
    min-width: 0;
}

.widget-expedia .passenger-counter {
    gap: 10px;
    flex: 0 0 auto;
}

.widget-expedia .counter-btn {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border: 1px solid #cbd5e0;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.widget-expedia .counter-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.expedia-input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #1f1f1f;
}

.expedia-input::placeholder {
    color: #9aa0a6;
}

select.expedia-input {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 20px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23666666' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 10px 6px;
}

.expedia-advanced-toggle {
    display: inline-block;
    margin: 6px 0 12px;
    color: var(--widget-label);
    font-size: 14px;
    cursor: pointer;
}

.expedia-advanced-toggle::after {
    content: " \25BE";
}

.expedia-advanced-toggle.open::after {
    content: " \25B4";
}

.expedia-advanced {
    margin-bottom: 12px;
}

.expedia-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--widget-label);
    font-size: 14px;
    cursor: pointer;
}

.expedia-add-flight {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--widget-menu-text);
    cursor: pointer;
}

.expedia-remove-leg {
    width: 18px;
    align-self: center;
    cursor: pointer;
}

.expedia-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 6px;
}

.expedia-search-btn {
    padding: 10px 26px;
    border: none;
    border-radius: 4px;
    background: var(--widget-button);
    color: var(--widget-search-btn-text);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    cursor: pointer;
}

.expedia-search-btn:disabled {
    opacity: .7;
    cursor: default;
}

.expedia-hotel .expedia-row:first-child {
    margin-top: 50px;
}

@media (max-width: 575.98px) {
    .expedia-col,
    .expedia-col.span6,
    .expedia-col.span4,
    .expedia-col.span3,
    .expedia-col.span2 {
        flex: 1 1 100%;
    }

    .expedia-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .expedia-search-btn {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .booking-topbar {
        height: auto;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 10px;
        padding: 12px 16px;
    }

    .booking-import-group {
        flex: 0 0 100%;
        width: 100%;
        height: 44px;
        order: 1;
    }

        .booking-import-group input {
            min-width: 0;
            font-size: 14px;
        }

        .booking-import-group .import-btn {
            padding: 0 18px;
            font-size: 13px;
        }

    .booking-topbar > .flex-fill,
    .booking-topbar-divider {
        display: none !important;
    }

    .booking-topbar-icon-btn {
        flex: 1 1 0;
        justify-content: center;
        height: 40px;
        order: 2;
        font-size: 13px;
    }
}

.offers-matrix-header {
    color: #4A5568;
    font-size: 14px;
}

.offers-cabin-cell {
    padding: 8px 4px;
    border-left: 1px dashed #dedede;
}

    .offers-cabin-cell:first-child {
        border-left: none;
    }

    .offers-cabin-cell.offers-cabin-selected {
        background: #F3F8FF;
    }

.offers-cabin-price {
    font-weight: 700;
    font-size: 15px;
    color: #1A202C;
}

.offers-cabin-select {
    padding: 8px 20px;
    font-size: 14px;
}

.offers-details-toggle {
    font-size: 14px;
    text-decoration: none;
}

.offers-details-divider {
    border-top: 1px dashed #dedede;
    margin-top: 8px;
    padding-top: 8px;
}

.bubble {
    display: inline-block;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    margin-left: 4px;
    background: #2185d0;
    color: #fff;
    font-size: 10px;
    line-height: 20px;
    text-align: center;
    border-radius: 10px;
    vertical-align: middle;
}

.layover-duration {
    display: inline-block;
    font-size: 13px;
    color: #666;
    background: #f5f6f8;
    border-radius: 6px;
    padding: 6px 12px;
}