@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%;
}

.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-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;
    /* margin-left: 12px; */
}

.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;
    /* padding-top: 50px; */
}

    .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-option {
    display: block;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
}

    .dropdown-option:hover {
        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;
}

/* 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;
    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;
}

.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;
    left: 48%;
    top: calc(30% 0%);
    transform: translate(-50%, -50%);
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    padding: 7px 8px;
    z-index: 2;
    cursor: pointer;
    margin-top: 78px;
    transition: all 0.3s ease;
}

.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: 49.9%;
    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 {
        /* background-color: #dce7f2; */
        color: #fff;
        border-color: #007bff;
    }

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

.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;
    /* margin-left: 20px; */
}

.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;
}

/* 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;
    display: none;
    z-index: 100;
}

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

.traveler-search {
    position: relative;
    margin-bottom: 10px;
}

    .traveler-search input {
        width: 100%;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 6px 12px 6px 32px;
        font-size: 14px;
    }

    .traveler-search::before {
        content: "";
        position: absolute;
        left: 10px;
        top: 9px;
        width: 16px;
        height: 16px;
        background: url("../images/search-icon.svg") no-repeat center center;
        background-size: 16px 16px;
        opacity: 0.7;
    }

.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;
}

/* 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;
    /* margin-left: 10px; */
}

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

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

/* 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: 0 0 300px;
}

.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;
    /* margin-top: 15px; */
    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: 360px;
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        z-index: 1000;
    }

    .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;
    }

        .range-slider input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            pointer-events: auto;
            width: 18px;
            height: 18px;
            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: 3;
        }

        .range-slider input[type="range"]::-moz-range-thumb {
            pointer-events: auto;
            width: 18px;
            height: 18px;
            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: 3;
        }

#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 {
  background: #fff;
  border: 1px solid #007bff;
  color: #007bff;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
} */

    .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;
    /* hide initially */
}

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

.remove-btn {
    cursor: pointer;
}

/* 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: 29.6%;
    top: calc(29.4% - 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-results:hover {
        /* background-color: #dce7f2; */
        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);
    /* left: 0; */
    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;
    }

/* Layover Section */
.layover {
    border-top: 1px solid #e2e8f0;
    margin-top: 16px;
    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;
    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;
}

/* 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%;
        }

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

.form-control {
    /* text-align: center; */
    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 30px;
    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;
    }

.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;
    /* background: #fff; */
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid #e6e9ef;
}

/* ---------- LEFT FLIGHT SECTION ---------- */
.thomalex-flight-box {
    flex: 1.0;
    position: relative;
    border-right: 1px dashed #d9dbe0;
    padding: 0;
    min-width: 320px;
    border-radius: 12px;
    background: #fff;
}

.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;
/*    height: 22px;*/
}

.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;
    min-width: 300px;
    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;
    text-align: center;
    padding: 18px 10px;
    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;
    }

.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: 10px;
}

.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;
    width: 84px;
    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;
}

/* 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;
}



.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;
    /* border-bottom: 1px solid #CBD5E0;
         border-top: 1px solid #CBD5E0; */
}

.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;
/*    min-width: 580px;*/
}

/* 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;
        }


/* 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;
        /* width: 100%;
      height: 120px; */
    }

.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;
}

    .flight-right-select::-webkit-scrollbar {
        display: none;
    }

.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;
    }

.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: 14px;
}

.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-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;
}

.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;
    text-align: right;
}

.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: 160px;
    height: 110px;
    object-fit: cover;
    border-radius: 10px;
}

.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: hidden;
}

.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:last-of-type {
        border-bottom: 1px solid #e5e7eb;
    }

    .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: 18px;
    margin-bottom: 20px;
    background: #fff;
}


.flight-payment-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.flight-radio-option {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 6px 9px;
    display: flex;
    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: 10px;
            height: 10px;
            background: #2563eb;
            border-radius: 50%;
            position: absolute;
            top: 2px;
            left: 2px;
        }

.flight-card-box {
    border: 2px solid #E2E8F0;
    border-radius: 10px;
    padding: 14px;
    background: #fff;
    min-height: 120px;
}

/* .flight-card-box.active {
  border-color: #2f80ed;
} */

.mastercard-logo {
    width: 42px;
    height: auto;
}

.flight-new-card-box {
    border: 2px solid #E2E8F0;
    border-radius: 10px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #1F7BF4;
    text-align: center;
    cursor: pointer;
}


.payment-option {
    background: #F7FAFC;
    padding: 14px;
    width: 100%;
    border: 1px solid #CBD5E0;
}

.note-box {
    position: relative;
    width: 100%;
}

.custom-textarea {
    width: 100%;
    height: 120px;
    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;
}

.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: #3F8CFF;
    color: #fff;
    font-weight: 600;
    padding: 8px 22px;
    border-radius: 8px;
    border: none;
}

    .flightbtn-complete:hover {
        background: #2563eb;
        color: #fff;
    }

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

.new-form-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #1A202C;
    margin-bottom: 18px;
    border-top: 1px solid #E2E8F0;
}

.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-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;
}

.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;
}

.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;
}

.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.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;
}

.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: 3.4375rem;
    }

        .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: hidden;
}

.reservation-row,
.reservation-ticket-row,
.reservation-Canceled-row,
.reservation-pendin-grow {
    display: grid;
    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);
    }

/* 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;
    }

/* CSV / PDF buttons row */
.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;
    }

.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: 12px;
    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: 15px;
    margin-top: 0px;
}

    .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;
    white-space: nowrap;
}

.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-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 {
        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;
    }
}

/* small tweak for mobile */
@media (max-width: 420px) {
    .filter-slide-panel {
        width: 100%;
        right: -100%;
    }

        .filter-slide-panel.open {
            right: 0;
        }
}

@media (max-width: 420px) {
    .filter-card {
        padding: 14px;
        width: 100%;
    }
}

/* responsive: fewer columns on smaller screens */
@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;
    /* padding-top: 50px; */
}

.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;
}


.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;
}


.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);
}

/* Position side-nav below header when header is present */
body:has(.sitenavbar-header) .side-nav {
    top: 4.5rem;
    /*    height: calc(100vh - 4.5rem);*/
    height: 100%;
}

/* 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;
}

/* 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;
}

/*Matrix*/

.compare-wrapper {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    margin-bottom: 20px;
}


.compare-table th,
.compare-table td {
    text-align: center;
    vertical-align: middle;
    padding: 14px 12px;
    border: 1px solid #e5e7eb;
    white-space: nowrap;
}

    .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;
}


.booingprice {
    color: #0d6efd;
    font-weight: 600;
    cursor: pointer;
}


.booingdash {
    color: #9ca3af;
}


.booingtable-responsive {
    overflow-x: auto;
}

.table-responsive {
/*    overflow-x: unset;*/
}

.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 18px;
    background: #e8e8e8;
}

/* 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 span
{
    line-height: 1.25rem;
}

.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%);
}

.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;
}

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;
}
}

.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: absolute;
    top: 80px;
    left: 20px;
    z-index: 1000;
    display: none
}

@media (max-width: 768px) {
    .Slider-open-arrow {
        display: inline-block !important;
    }
}