/* Shared controls */
.check-list {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center
}

    .check-list label {
        display: flex;
        gap: 5px;
        align-items: center;
        font-size: 13px
    }

.btn-modern {
    height: 42px;
    border: 0;
    border-radius: 11px;
    padding: 0 15px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: .16s ease;
    white-space: nowrap
}

    .btn-modern.primary {
        background: var(--button-bg);
        color: var(--button-text);
        box-shadow: 0 8px 18px color-mix(in srgb,var(--button-bg) 18%,transparent)
    }

        .btn-modern.primary:hover {
            transform: translateY(-1px)
        }

    .btn-modern.soft {
        background: #eef4ff;
        color: #174170;
        border: 1px solid #dae7fb
    }

        .btn-modern.soft:hover {
            background: #e3efff
        }
/* Modern custom date picker */
.trv-date-wrap {
    position: relative;
    display: flex;
    align-items: center
}

.trv-date-display {
    width: 100%;
    height: 42px;
    min-height: 42px;
    border: 1px solid #cdd7e4;
    border-radius: 11px;
    background: #fff;
    padding: 8px 42px 8px 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: #111827;
    outline: none
}

    .trv-date-display:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px color-mix(in srgb,var(--primary) 13%,transparent)
    }

.trv-date-btn {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 27px;
    height: 27px;
    border: 0;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #eef5ff;
    color: var(--primary);
    font-size: 0
}

    .trv-date-btn:before {
        content: "";
        width: 15px;
        height: 15px;
        background: currentColor;
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1.5A2.5 2.5 0 0 1 22 6.5v12A2.5 2.5 0 0 1 19.5 21h-15A2.5 2.5 0 0 1 2 18.5v-12A2.5 2.5 0 0 1 4.5 4H6V3a1 1 0 0 1 1-1Zm12.5 8h-15v8.5c0 .28.22.5.5.5h14c.28 0 .5-.22.5-.5V10ZM5 6a.5.5 0 0 0-.5.5V8h15V6.5A.5.5 0 0 0 19 6H5Z"/></svg>') center/contain no-repeat
    }

.date-input-wrap {
    position: relative
}

    .date-input-wrap .date-input-icon {
        display: none !important
    }

    .date-input-wrap input[type=date]::-webkit-calendar-picker-indicator {
        opacity: 0;
        display: none
    }

.trv-datepicker {
    position: absolute;
    z-index: 10000;
    width: 304px;
    background: #fff;
    border: 1px solid #d7e1ef;
    border-radius: 16px;
    box-shadow: 0 24px 65px rgba(15,23,42,.22);
    padding: 12px;
    display: none
}

    .trv-datepicker.open {
        display: block
    }

.trv-datepicker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px
}

.trv-datepicker-title {
    font-weight: 800;
    color: #0f172a;
    font-size: 14px
}

.trv-datepicker-nav {
    width: 32px;
    height: 32px;
    border: 1px solid #dbe5f1;
    border-radius: 10px;
    background: #f8fafc;
    color: #334155;
    font-size: 18px;
    line-height: 1
}

.trv-datepicker-grid {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 4px
}

.trv-datepicker-dayname {
    text-align: center;
    font-size: 11px;
    color: #64748b;
    font-weight: 800;
    padding: 5px 0
}

.trv-datepicker-day {
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: #142033;
    font-weight: 600
}

    .trv-datepicker-day:hover {
        background: #eef4ff;
        color: var(--primary)
    }

    .trv-datepicker-day.muted {
        color: #a5b4c6;
        background: #fafafa
    }

    .trv-datepicker-day.today {
        box-shadow: inset 0 0 0 1px var(--primary);
        color: var(--primary)
    }

    .trv-datepicker-day.selected {
        background: var(--primary);
        color: #fff
    }

.trv-datepicker-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px
}

    .trv-datepicker-actions button {
        border: 1px solid #dbe5f1;
        background: #f8fafc;
        color: #334155;
        border-radius: 10px;
        height: 32px;
        padding: 0 10px;
        font-weight: 700
    }

        .trv-datepicker-actions button:last-child {
            background: var(--primary);
            border-color: var(--primary);
            color: #fff
        }
/* Default hotel search landing page */
.home-search-page {
    display: grid;
    gap: 18px
}

.home-hero-card {
    background: linear-gradient(135deg,#fff,#f8fbff);
    border: 1px solid #dae4f0;
    border-radius: 22px;
    box-shadow: 0 18px 45px rgba(15,23,42,.08);
    overflow: hidden
}

.home-hero-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    border-bottom: 1px solid #e4ecf6;
    background: linear-gradient(135deg,color-mix(in srgb,var(--primary) 8%,#fff),#fff)
}

.home-hero-title h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1.1;
    font-weight: 850;
    letter-spacing: -.035em;
    color: #0f172a
}

.home-hero-title p {
    margin: 7px 0 0;
    color: #64748b;
    font-size: 14px
}

.home-quick-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.home-pill {
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: #eef4ff;
    border: 1px solid #d7e5fb;
    color: var(--primary);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    font-size: 12.5px
}

.hotel-search-form {
    padding: 22px 24px;
    display: grid;
    gap: 18px
}

.hotel-search-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px 16px;
    align-items: end
}

.hotel-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0
}

    .hotel-field label {
        font-size: 10px;
        font-weight: 600;
        color: #1f2937
    }

        .hotel-field label .req {
            color: #ef4444
        }

    .hotel-field input, .hotel-field select {
        height: 42px;
        width: 100%;
        border: 1px solid #cfd9e7;
        border-radius: 11px;
        background: #fff;
        padding: 8px 12px;
        color: #142033
    }

    .hotel-field.wide {
        grid-column: span 2
    }

    .hotel-field.readonly strong {
        height: 42px;
        display: flex;
        align-items: center;
        color: #111827;
        font-weight: 650
    }

.source-check {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    font-weight: 700
}

    .source-check input {
        width: 17px;
        height: 17px
    }

.star-options {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    min-height: 42px;
    align-items: center
}

    .star-options label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 28px;
        min-width: 34px;
        border-radius: 8px;
        background: #fff4ed;
        border: 1px solid #fed7aa;
        color: #f05a24;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer
    }

    .star-options input {
        display: none
    }

        .star-options input:checked + span, .star-options label:hover span {
            background: #f05a24;
            color: #fff
        }

    .star-options label span {
        display: inline-flex;
        height: 100%;
        width: 100%;
        align-items: center;
        justify-content: center;
        border-radius: 7px;
        padding: 0 6px
    }

.room-control {
    height: 42px;
    border: 1px solid #cfd9e7;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 12px;
    background: #fff
}

    .room-control span {
        font-weight: 650;
        color: #142033
    }

    .room-control b {
        color: var(--primary);
        font-size: 18px
    }

.home-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid #edf2f7;
    padding-top: 18px
}

.hotel-search-btn {
    min-width: 150px;
    height: 48px;
    border: 0;
    border-radius: 999px;
    background: #087df2;
    color: #fff;
    font-weight: 850;
    font-size: 15px;
    box-shadow: 0 12px 24px rgba(8,125,242,.22)
}

.hotel-reset-btn {
    height: 42px;
    border: 1px solid #dae4f0;
    background: #fff;
    color: #334155;
    border-radius: 12px;
    font-weight: 700;
    padding: 0 14px
}

.home-info-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px
}

.home-info-card {
    background: #fff;
    border: 1px solid #dae4f0;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(15,23,42,.06);
    padding: 18px
}

    .home-info-card span {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        background: #eef4ff;
        color: var(--primary);
        display: grid;
        place-items: center;
        font-weight: 900;
        margin-bottom: 12px
    }

    .home-info-card h3 {
        margin: 0 0 6px;
        font-size: 16px
    }

    .home-info-card p {
        margin: 0;
        color: #64748b;
        line-height: 1.55;
        font-size: 13px
    }

@media(max-width:1200px) {
    .hotel-search-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .hotel-field.wide {
        grid-column: span 2
    }

    .home-info-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:700px) {
    .home-hero-head {
        align-items: flex-start;
        flex-direction: column;
        padding: 18px
    }

    .hotel-search-form {
        padding: 18px
    }

    .hotel-search-grid {
        grid-template-columns: 1fr
    }

    .hotel-field.wide {
        grid-column: auto
    }

    .home-form-actions {
        justify-content: stretch;
        flex-direction: column
    }

    .hotel-search-btn, .hotel-reset-btn {
        width: 100%
    }

    .home-hero-title h1 {
        font-size: 23px
    }
}

/* #region Reusable searchable select */
.trv-search-select {
    position: relative;
    min-width: 0;
}

    .trv-search-select > select[data-searchable-native] {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
        padding: 0 !important;
        margin: -1px !important;
    }

.trv-search-select-trigger {
    width: 100%;
    min-height: 40px;
    padding: 0 11px 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #fff;
    color: #64748b;
    font: inherit;
    font-size: 13px;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    outline: 0;
    box-sizing: border-box;
}

    .trv-search-select-trigger.has-value {
        color: #0f172a;
    }

    .trv-search-select-trigger:hover {
        border-color: #94a3b8;
    }

    .trv-search-select-trigger:focus-visible,
    .trv-search-select.is-open .trv-search-select-trigger {
        border-color: var(--primary, #0F2A5F);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary, #0F2A5F) 13%, transparent);
    }

    .trv-search-select-trigger[aria-invalid="true"] {
        border-color: #ef4444;
        background: #fff7f7;
    }

    .trv-search-select-trigger:disabled {
        cursor: not-allowed;
        background: #f8fafc;
        color: #94a3b8;
    }

    .trv-search-select-trigger span {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .trv-search-select-trigger svg {
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .18s ease;
    }

.trv-search-select.is-open .trv-search-select-trigger svg {
    transform: rotate(180deg);
}

.trv-search-select-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 5px);
    z-index: 180;
    padding: 7px;
    border: 1px solid #d7e1ed;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .18);
}

    .trv-search-select-panel[hidden] {
        display: none !important;
    }

.trv-search-select-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

    .trv-search-select-input-wrap svg {
        position: absolute;
        left: 11px;
        top: 50%;
        width: 16px;
        height: 16px;
        transform: translateY(-50%);
        fill: none;
        stroke: #64748b;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        pointer-events: none;
        z-index: 1;
    }

/* Higher specificity keeps shared page-level input rules from overriding icon spacing. */
.trv-search-select .trv-search-select-input-wrap input {
    width: 100%;
    height: 38px;
    min-height: 38px;
    padding: 0 12px 0 38px !important;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #f8fafc;
    color: #0f172a;
    font: inherit;
    font-size: 12px;
    line-height: 38px;
    outline: 0;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

    .trv-search-select .trv-search-select-input-wrap input::-webkit-search-decoration,
    .trv-search-select .trv-search-select-input-wrap input::-webkit-search-cancel-button,
    .trv-search-select .trv-search-select-input-wrap input::-webkit-search-results-button,
    .trv-search-select .trv-search-select-input-wrap input::-webkit-search-results-decoration {
        display: none;
    }

    .trv-search-select .trv-search-select-input-wrap input:focus {
        border-color: var(--primary, #0F2A5F);
        background: #fff;
    }

.trv-search-select-options {
    max-height: 250px;
    overflow: auto;
    margin-top: 6px;
}

.trv-search-select-option {
    width: 100%;
    min-height: 34px;
    padding: 7px 9px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #334155;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

    .trv-search-select-option:hover,
    .trv-search-select-option:focus-visible {
        background: #eff6ff;
        outline: 0;
    }

    .trv-search-select-option.is-selected {
        background: #eef2ff;
        color: var(--primary, #0F2A5F);
    }

    .trv-search-select-option span {
        flex: 1;
    }

    .trv-search-select-option svg {
        display: none;
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.3;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .trv-search-select-option.is-selected svg {
        display: block;
    }

.trv-search-select-empty {
    padding: 16px 10px;
    color: #64748b;
    text-align: center;
    font-size: 11px;
}

.trv-searchable-field {
    z-index: 55;
}
/* #endregion */

/* #region Standard application notifications */
.trv-toast-region {
    position: fixed;
    right: 18px;
    top: 18px;
    z-index: 20000;
    width: min(390px,calc(100vw - 24px));
    display: grid;
    gap: 10px;
    pointer-events: none
}

.trv-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 13px;
    border: 1px solid #dbe4ef;
    border-left-width: 4px;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15,23,42,.17);
    animation: trv-toast-in .18s ease-out
}

    .trv-toast.is-leaving {
        animation: trv-toast-out .18s ease-in forwards
    }

.trv-toast-icon {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 900
}

.trv-toast-copy {
    min-width: 0;
    flex: 1
}

    .trv-toast-copy strong {
        display: block;
        color: #0f172a;
        font-size: 12px
    }

    .trv-toast-copy p {
        margin: 3px 0 0;
        color: #64748b;
        font-size: 11px;
        line-height: 1.45
    }

.trv-toast-close {
    border: 0;
    background: transparent;
    color: #94a3b8;
    font-size: 18px;
    cursor: pointer
}

.trv-toast.is-success {
    border-left-color: #10b981
}

    .trv-toast.is-success .trv-toast-icon {
        background: #ecfdf5;
        color: #047857
    }

.trv-toast.is-info {
    border-left-color: #3b82f6
}

    .trv-toast.is-info .trv-toast-icon {
        background: #eff6ff;
        color: #1d4ed8
    }

.trv-toast.is-warning {
    border-left-color: #f59e0b
}

    .trv-toast.is-warning .trv-toast-icon {
        background: #fffbeb;
        color: #b45309
    }

.trv-toast.is-error {
    border-left-color: #ef4444
}

    .trv-toast.is-error .trv-toast-icon {
        background: #fef2f2;
        color: #b91c1c
    }

.trv-message-dialog {
    width: min(440px,calc(100vw - 28px));
    padding: 0;
    border: 0;
    border-radius: 17px;
    background: transparent;
    box-shadow: none
}

    .trv-message-dialog::backdrop {
        background: rgba(15,23,42,.48);
        backdrop-filter: blur(3px)
    }

.trv-message-dialog-card {
    margin: 0;
    padding: 22px;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    border: 1px solid #dbe4ef;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 26px 70px rgba(15,23,42,.3)
}

.trv-message-dialog-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 19px;
    font-weight: 900
}

.trv-message-dialog-copy h2 {
    margin: 1px 0 6px;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.2
}

.trv-message-dialog-copy p {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-line
}

.trv-message-dialog-actions {
    grid-column: 1/-1;
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 5px
}

    .trv-message-dialog-actions button {
        min-height: 38px;
        padding: 0 15px;
        border-radius: 10px;
        font: inherit;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer
    }

.trv-dialog-primary {
    border: 0;
    background: var(--button-bg,var(--primary,#0F2A5F));
    color: var(--button-text,#fff)
}

.trv-dialog-secondary {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155
}

.trv-message-dialog.is-error .trv-message-dialog-icon {
    background: #fef2f2;
    color: #b91c1c
}

.trv-message-dialog.is-warning .trv-message-dialog-icon {
    background: #fffbeb;
    color: #b45309
}

.trv-message-dialog.is-info .trv-message-dialog-icon {
    background: #eff6ff;
    color: #1d4ed8
}

.trv-message-dialog.is-success .trv-message-dialog-icon {
    background: #ecfdf5;
    color: #047857
}

@keyframes trv-toast-in {
    from {
        opacity: 0;
        transform: translateY(-8px)
    }
}

@keyframes trv-toast-out {
    to {
        opacity: 0;
        transform: translateX(18px)
    }
}

@media(max-width:640px) {
    .trv-toast-region {
        left: 12px;
        right: 12px;
        top: 12px;
        width: auto
    }

    .trv-message-dialog-card {
        padding: 18px
    }
}
/* #endregion */