/* =========================================================
   UTP Market Search CSS
   Hotels Search Board
   ========================================================= */

html { scrollbar-gutter: stable; }

.utp-workspace-layout { padding-bottom: 110px; }

.utp-workspace-layout__content {
    width: 100%;
    max-width: none;
    margin: 0;
}

.utp-workspace-window {
    width: min(1240px, calc(100vw - 64px));
    margin: 0 auto 96px;
    padding: 18px 22px 30px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid #ececec;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.14), inset 0 1px 0 #fff;
}

.utp-workspace-window .utp-module-toolbar,
.utp-workspace-window nav { margin: 0 0 24px; }

.utp-market-product-strip {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin: 0 0 24px;
    padding: 0 0 20px;
    border-bottom: 1px solid rgba(11, 22, 34, 0.08);
}

.utp-market-product {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 13px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(11, 22, 34, 0.10);
    color: #0B1622;
    font-size: 12px;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

.utp-market-product.is-active {
    background: rgba(245, 121, 59, 0.10);
    border-color: #F5793B;
    color: #F5793B;
}

.utp-market-product.is-disabled { cursor: default; opacity: .78; }
.utp-market-product__icon { font-size: 14px; line-height: 1; }
.utp-market-mode-switch { display: none; }

/* Search canvas */
.utp-hotels-search,
.utp-market-search {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.utp-market-search-panel {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
    overflow: visible;
    border-radius: 22px;
    background:
        radial-gradient(circle at 16% -30%, rgba(245,121,59,.12), transparent 42%),
        linear-gradient(145deg, #151b29 0%, #0c1421 58%, #101725 100%);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 42px rgba(4,10,20,.24), inset 0 1px 0 rgba(255,255,255,.05);
}

/* Compact asymmetric board */
.utp-search-board {
    display: grid;
    grid-template-columns: 1.12fr .94fr 1.02fr .82fr;
    grid-template-areas:
        "destination destination stay stay"
        "guests residence client submit";
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
}

.utp-search-card--destination { grid-area: destination; }
.utp-search-card--stay        { grid-area: stay; }
.utp-search-card--guests      { grid-area: guests; }
.utp-search-card--residence   { grid-area: residence; }
.utp-search-card--client      { grid-area: client; }
.utp-search-card--submit      { grid-area: submit; }

.utp-search-card {
    position: relative;
    min-width: 0;
    min-height: 76px;
    display: grid;
    grid-template-columns: 46px minmax(0,1fr) 18px;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    padding: 10px 13px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(31,39,55,.96), rgba(18,27,42,.96));
    border: 1px solid rgba(164,177,198,.27);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}

.utp-search-card:hover,
.utp-search-card:focus-within {
    border-color: rgba(245,121,59,.66);
    background: linear-gradient(145deg, rgba(34,42,58,.98), rgba(19,28,43,.98));
    box-shadow: 0 8px 22px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.04);
}

.utp-search-card__icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    border: 1px solid rgba(245,121,59,.88);
    color: #fff;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    background: rgba(245,121,59,.035);
}

.utp-search-card__content {
    min-width: 0;
    width: 100%;
}

.utp-search-card__arrow {
    justify-self: end;
    color: rgba(226,232,240,.62);
    font-size: 25px;
    font-weight: 300;
    line-height: 1;
}

.utp-search-card__arrow--accent { color: #F5793B; font-size: 20px; }

/* Search card typography */
.utp-search-board .utp-field,
.utp-search-board .utp-platform-country-picker,
.utp-search-board .utp-date-range,
.utp-search-board .utp-guests-selector {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.utp-search-board .utp-field__label,
.utp-search-board .utp-booking-field__label,
.utp-search-board .utp-platform-country-picker .utp-booking-field__label {
    display: block;
    margin: 0 0 5px;
    color: rgba(160,174,196,.72);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .10em;
    text-transform: uppercase;
}

/* No white input surfaces */
.utp-search-board .utp-field__input,
.utp-search-board .utp-field__trigger,
.utp-search-board .utp-platform-country-picker__input,
.utp-search-board select.utp-field__input {
    width: 100%;
    min-width: 0;
    height: 30px;
    min-height: 30px;
    margin: 0;
    padding: 0 26px 0 0;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 14px;
    font-weight: 760;
    line-height: 30px;
}

.utp-search-board .utp-field__input::placeholder,
.utp-search-board .utp-platform-country-picker__input::placeholder {
    color: rgba(255,255,255,.88);
    opacity: 1;
}

.utp-search-board select.utp-field__input {
    appearance: auto;
    cursor: pointer;
}

.utp-search-board select.utp-field__input option {
    color: #111827;
    background: #fff;
}

/* Destination */
.utp-search-card--destination .utp-field__input {
    font-size: 15px;
    font-weight: 800;
}

/* Stay: keep canonical date-range component, visually unify it inside one card */
.utp-search-card--stay {
    grid-template-columns: 46px minmax(0,1fr);
}

.utp-search-card--stay .utp-date-range {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px !important;
    align-items: end;
}

.utp-search-card--stay .utp-date-range > * {
    min-width: 0 !important;
    max-width: 100% !important;
}

.utp-search-board input[type="date"] {
    color-scheme: dark;
}

.utp-search-board input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: .72;
    cursor: pointer;
}

/* Guests */
.utp-search-card--guests .utp-guests-selector { position: relative !important; }

/* Residence dropdown toggle stays subtle */
.utp-search-board .utp-platform-country-picker__control { position: relative; }
.utp-search-board .utp-platform-country-picker__toggle {
    position: absolute;
    top: 50%;
    right: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #fff;
}

/* Search action is a card, not an orange button */
.utp-search-card--submit {
    border-color: rgba(245,121,59,.88);
    background:
        radial-gradient(circle at 0% 50%, rgba(245,121,59,.10), transparent 48%),
        linear-gradient(145deg, rgba(31,39,55,.98), rgba(18,27,42,.98));
}

.utp-search-card--submit:hover {
    border-color: #F5793B;
    box-shadow: 0 8px 24px rgba(245,121,59,.13), inset 0 1px 0 rgba(255,255,255,.04);
    transform: translateY(-1px);
}

.utp-search-card--submit .utp-primary-button {
    width: 100%;
    height: auto;
    min-height: 30px;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

/* Floating component panels remain readable, but are not white form fields */
.utp-market-search-panel:has(.utp-search-input__suggestions:not([hidden])),
.utp-market-search-panel:has(.utp-platform-country-picker__dropdown:not([hidden])),
.utp-market-search-panel:has(.utp-guests-selector.is-open) {
    z-index: 5000;
}

.utp-search-input__suggestions,
.utp-search-board .utp-platform-country-picker__dropdown {
    position: absolute;
    z-index: 6000;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 292px;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 8px;
    border-radius: 14px;
    background: #151e2d;
    border: 1px solid rgba(164,177,198,.28);
    box-shadow: 0 20px 44px rgba(0,0,0,.34);
    color: #fff;
}

.utp-search-input__suggestions[hidden],
.utp-search-input__suggestions:empty,
.utp-search-board .utp-platform-country-picker__dropdown[hidden] {
    display: none !important;
}

.utp-search-input__suggestion,
.utp-search-input__suggestions button,
.utp-search-input__suggestions [role="option"],
.utp-search-board .utp-platform-country-picker__option {
    color: #fff;
    background: transparent;
}

.utp-search-input__suggestion:hover,
.utp-search-input__suggestion:focus,
.utp-search-input__suggestion.is-active,
.utp-search-input__suggestions button:hover,
.utp-search-input__suggestions button:focus,
.utp-search-input__suggestions [role="option"]:hover,
.utp-search-input__suggestions [role="option"]:focus,
.utp-search-board .utp-platform-country-picker__option:hover,
.utp-search-board .utp-platform-country-picker__option--active {
    background: rgba(245,121,59,.10);
}

.utp-search-board .utp-platform-country-picker__code,
.utp-search-input__suggestion-subtitle {
    color: rgba(203,213,225,.62);
}

.utp-search-board .utp-guests-selector__panel {
    position: absolute !important;
    z-index: 6000 !important;
    top: calc(100% + 8px) !important;
    right: auto !important;
    left: 0 !important;
    width: 360px !important;
    max-width: min(360px, calc(100vw - 32px)) !important;
    max-height: min(390px, calc(100vh - 190px)) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    padding: 14px !important;
    border-radius: 16px !important;
}

.utp-search-board .utp-guests-selector__panel h2,
.utp-search-board .utp-guests-selector__panel h3 {
    margin-top: 0 !important;
    margin-bottom: 5px !important;
}

.utp-search-board .utp-guests-selector__panel p {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

.utp-search-board .utp-guests-selector__panel > * {
    margin-bottom: 10px;
}

.utp-search-board .utp-guests-selector__panel button {
    min-height: 32px;
}

.utp-search-board .utp-guests-selector__panel::-webkit-scrollbar {
    width: 7px;
}

/* Tablet: preserve the board feeling without turning it into a mobile form */
@media (max-width: 1050px) {
    .utp-search-board {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "destination stay"
            "guests residence"
            "client submit";
    }
}

@media (max-width: 820px) {
    .utp-workspace-window {
        width: min(100% - 28px, 1240px);
        padding-left: 16px;
        padding-right: 16px;
    }

    .utp-search-board {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "destination destination"
            "stay stay"
            "guests residence"
            "client submit";
    }
}


/* Filters */
.utp-hotels-filters {
    margin: 26px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid rgba(11, 22, 34, 0.08);
}

.utp-hotels-filters__header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}

.utp-hotels-filters__eyebrow {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #F5793B;
}

.utp-hotels-filters__header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.3;
    color: #5F6B78;
}

.utp-hotels-filters__chips {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.utp-filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid rgba(11, 22, 34, 0.10);
    background: #ffffff;
    color: #0B1622;
    font-size: 12px;
    font-weight: 850;
    line-height: 1;
    cursor: default;
    box-shadow: none !important;
}

.utp-filter-chip.is-active {
    color: #F5793B;
    background: rgba(245, 121, 59, 0.10);
    border-color: #F5793B;
}

/* =========================================================
   Results Header
   ========================================================= */

.utp-results-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;

    margin: 22px 0 26px;
}

.utp-results-header__left {
    flex: 1;
}

.utp-results-header__title {
    margin: 0;

    color: #0B1622 !important;

    font-size: 42px;

    font-weight: 900;

    line-height: 1.1;
}

.utp-results-header__summary {
    margin: 10px 0 0;

    color: #64748B !important;

    font-size: 16px;

    font-weight: 500;
}

.utp-results-header__right {
    display: flex;
    gap: 8px;
}

.utp-results-header__view {
    height: 42px;

    padding: 0 18px;

    border: 1px solid #d7dde5;

    border-radius: 999px;

    background: #fff;

    color: #0B1622 !important;

    cursor: pointer;

    font-weight: 700;

    transition: .15s;
}

.utp-results-header__view:hover {
    border-color: #F5793B;
}

.utp-results-header__view--active {
    background: #fff6ef;

    border-color: #F5793B;

    color: #F5793B !important;
}

/* Results */
.utp-hotels-results {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
}

.utp-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 18px;
}

.utp-results-header__eyebrow {
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ff7a45;
}

.utp-results-header__title {
    margin: 0;
    font-size: 24px;
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: -0.035em;
    color: #0B1622;
}

.utp-results-header__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.utp-results-header__pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 8px 13px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(11, 22, 34, 0.10);
    font-size: 12px;
    font-weight: 800;
    color: #0B1622;
}

.utp-results-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.utp-results-overview .utp-sales-widget--sort {
    overflow: visible;
    z-index: 20;
}

.utp-results-overview .utp-sales-widget--sort .utp-control-panel {
    top: calc(100% + 8px);
    right: 0;
    left: auto;
}
.utp-hotel-card.is-filtered-out {
    display: none !important;
}

/* =========================================================
   Hotel Card v1
   ========================================================= */

.utp-hotel-card {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    min-height: 180px;

    overflow: hidden;

    border-radius: 22px;

    background: #ffffff;

    border: 1px solid rgba(15,23,42,.08);

    box-shadow:
        0 12px 34px rgba(15,23,42,.08);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.utp-hotel-card:hover {

    transform: translateY(-2px);

    border-color: rgba(245,121,59,.35);

    box-shadow:
        0 18px 42px rgba(15,23,42,.12);
}

.utp-hotel-card__offers {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 800;
    color: #64748b;
}

/* --------------------------------------------------------- */

.utp-hotel-card__media {

    position: relative;

    overflow: hidden;

    background: #f4f4f4;
}

.utp-hotel-card__image {

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.utp-hotel-card__image-placeholder {

    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#f6f7f9;

    color:#94a3b8;

    font-size:13px;
    font-weight:800;
}

/* --------------------------------------------------------- */

.utp-hotel-card__body{

    display:flex;

    justify-content:space-between;

    gap:34px;

    padding:22px 24px;
}

/* --------------------------------------------------------- */

.utp-hotel-card__content{

    flex:1;

    min-width:0;
}

.utp-hotel-card__topline{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:18px;
}

.utp-hotel-card__title{

    margin:0;

    font-size:22px;

    line-height:1.2;

    font-weight:900;

    color:#0B1622;
}

.utp-hotel-card__shortlist{

    border:0;

    background:none;

    cursor:pointer;

    font-size:22px;

    color:#94a3b8;

    transition:.15s;
}

.utp-hotel-card__shortlist:hover{

    color:#F5793B;
}

/* --------------------------------------------------------- */

.utp-hotel-card__stars{

    margin-top:8px;

    color:#F5793B;

    font-size:15px;

    letter-spacing:2px;
}

.utp-hotel-card__address{

    margin-top:10px;

    color:#64748b;

    font-size:14px;
}

.utp-hotel-card__rating{

    margin-top:14px;

    display:flex;

    gap:8px;

    align-items:center;

    font-size:14px;
}

.utp-hotel-card__rating strong{

    color:#0B1622;

    font-size:18px;
}

.utp-hotel-card__rating span{

    color:#16a34a;

    font-weight:700;
}

/* --------------------------------------------------------- */

.utp-hotel-card__badges{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:16px;
}

.utp-hotel-card__badge{

    padding:6px 12px;

    border-radius:999px;

    background:#fff6ef;

    color:#d97706;

    font-size:12px;

    font-weight:800;
}

/* --------------------------------------------------------- */

.utp-hotel-card__aside{

    min-width:170px;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    align-items:flex-end;

    text-align:right;
}

.utp-hotel-card__price-label{

    font-size:11px;

    font-weight:900;

    text-transform:uppercase;

    color:#64748b;

    letter-spacing:.08em;
}

.utp-hotel-card__price{

    margin-top:6px;

    font-size:30px;

    font-weight:900;

    color:#0B1622;
}

.utp-hotel-card__cta{

    margin-top:18px;

    color:#F5793B;

    text-decoration:none;

    font-weight:900;

    font-size:15px;
}

.utp-hotel-card__cta:hover{

    text-decoration:underline;
}

.utp-search-empty {
    padding: 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px dashed rgba(255, 255, 255, 0.5);
    color: #334155;
}

/* Responsive */
@media (max-width: 1180px) {
    .utp-hotels-search__bar {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(0, 1.1fr)
            minmax(0, .9fr);
        gap: 12px;
    }

    .utp-hotels-search__bar .utp-platform-country-picker {
        grid-column: 1 / 3;
    }

    .utp-hotels-search__bar .utp-primary-button {
        grid-column: 3;
    }
}

@media (max-width: 980px) {
    .utp-workspace-window {
        width: min(100% - 32px, 1120px);
        padding: 16px 16px 24px;
    }

    .utp-market-search-panel {
        padding: 16px;
    }

    .utp-hotels-search__bar {
        grid-template-columns: 1fr;
    }

    .utp-hotels-search__bar .utp-primary-button {
        grid-column: auto;
    }

    .utp-hotels-search__bar .utp-date-range {
        grid-template-columns: 1fr;
    }

    .utp-hotels-search__bar .utp-guests-selector__panel {
        left: 0 !important;
        right: auto !important;
        width: min(380px, calc(100vw - 48px)) !important;
    }
}

@media (max-width: 760px) {
    .utp-workspace-window .utp-workspace-modules,
    .utp-workspace-modules,
    .utp-market-product-strip {
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding-bottom: 12px;
    }

    .utp-workspace-modules__item,
    .utp-market-product,
    .utp-filter-chip {
        white-space: nowrap;
    }

    .utp-results-header,
    .utp-hotels-filters__header {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .utp-results-header__meta,
    .utp-hotels-filters__chips {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 10px;
    }

    .utp-hotel-card {
        grid-template-columns: 1fr;
    }

    .utp-hotel-card__body {
        flex-direction: column;
    }

    .utp-hotel-card__aside {
        align-items: flex-start;
        text-align: left;
    }
}
/* ==========================================
   RESULTS MAP
========================================== */

.utp-results-map {
    margin-top: 1.5rem;
}

.utp-results-map[hidden] {
    display: none !important;
}

.utp-results-map .utp-hotels-map__canvas {
    width: 100%;
    height: 72vh;
    min-height: 600px;

    border-radius: var(--utp-radius-xl);
    overflow: hidden;

    border: 1px solid var(--utp-color-border);
    background: var(--utp-color-surface);
}
/* =========================================================
   Results Command Deck
   Static visual prototype
   ========================================================= */

.utp-results-command-deck {
    display: grid;
    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(0, 1.15fr)
        minmax(0, 1fr)
        minmax(0, 0.95fr)
        minmax(0, 0.9fr);
    gap: 14px;

    margin: 0 0 26px;
    padding: 18px;

    border-radius: 24px;

    background:
        linear-gradient(
            180deg,
            rgba(248, 250, 252, 0.98),
            rgba(244, 247, 250, 0.96)
        );

    border: 1px solid rgba(11, 22, 34, 0.08);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 14px 34px rgba(15, 23, 42, 0.06);
}

.utp-results-module {
    position: relative;

    min-width: 0;
    min-height: 158px;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    padding: 18px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;

    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(255, 122, 69, 0.14),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #232938 0%,
            #181e2a 100%
        );

    color: #ffffff;
    text-align: left;

    cursor: default;

    box-shadow:
        0 14px 28px rgba(15, 23, 42, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.utp-results-module::before {
    content: "";

    position: absolute;
    inset: 0 auto auto 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #ff5e44,
            #ff9438 54%,
            transparent
        );

    opacity: 0.92;
}

.utp-results-module::after {
    content: "";

    position: absolute;
    right: -54px;
    bottom: -72px;

    width: 150px;
    height: 150px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 122, 69, 0.10),
            transparent 68%
        );

    pointer-events: none;
}

.utp-results-module:hover,
.utp-results-module:focus-visible {
    transform: translateY(-3px);

    border-color: rgba(255, 122, 69, 0.34);

    box-shadow:
        0 20px 40px rgba(15, 23, 42, 0.22),
        0 0 0 1px rgba(255, 122, 69, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);

    outline: none;
}

.utp-results-module__top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.utp-results-module__icon {
    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 34px;

    border-radius: 11px;

    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.08);

    color: #ff8a3d;

    font-size: 17px;
    font-weight: 900;
    line-height: 1;
}

.utp-results-module__title {
    min-width: 0;

    color: rgba(255, 255, 255, 0.76);

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.09em;
    line-height: 1.2;
    text-transform: uppercase;
}

.utp-results-module__arrow {
    color: rgba(255, 255, 255, 0.46);

    font-size: 18px;
    font-weight: 800;
    line-height: 1;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.utp-results-module:hover
.utp-results-module__arrow,
.utp-results-module:focus-visible
.utp-results-module__arrow {
    color: #ff8a3d;
    transform: translateX(3px);
}

.utp-results-module__status {
    position: relative;
    z-index: 1;

    display: block;

    margin-top: auto;
    padding-top: 26px;

    color: #ffffff;

    font-size: 19px;
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.utp-results-module__summary {
    position: relative;
    z-index: 1;

    display: block;

    margin-top: 7px;

    color: rgba(226, 232, 240, 0.64);

    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
}

.utp-results-module--map {
    background:
        radial-gradient(
            circle at 14% 0%,
            rgba(255, 122, 69, 0.20),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #2b2f3d 0%,
            #1d2330 52%,
            #151b27 100%
        );
}

.utp-results-module--map
.utp-results-module__status {
    color: #ff9a55;
}

/* Tablet */
@media (max-width: 1080px) {
    .utp-results-command-deck {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .utp-results-module--ranking,
    .utp-results-module--map {
        grid-column: span 1;
    }
}

/* Small tablet */
@media (max-width: 820px) {
    .utp-results-command-deck {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        padding: 14px;
    }

    .utp-results-module {
        min-height: 145px;
    }

    .utp-results-module--map {
        grid-column: 1 / -1;
    }
}

/* Mobile */
@media (max-width: 560px) {
    .utp-results-command-deck {
        grid-template-columns: 1fr;
        gap: 10px;

        margin-bottom: 20px;
        padding: 10px;

        border-radius: 20px;
    }

    .utp-results-module {
        min-height: 126px;
        padding: 16px;
        border-radius: 17px;
    }

    .utp-results-module__status {
        padding-top: 18px;
    }

    .utp-results-module--map {
        grid-column: auto;
    }
}
/* =========================================================
   Results Command Center
   Static workspace visual pass
   ========================================================= */

.utp-results-command-center {
    margin: 0 0 28px;
    padding: 20px;

    border-radius: 26px;

    background:
        linear-gradient(
            180deg,
            rgba(248, 250, 252, 0.98),
            rgba(242, 246, 250, 0.96)
        );

    border: 1px solid rgba(11, 22, 34, 0.08);

    box-shadow:
        0 18px 42px rgba(15, 23, 42, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.utp-results-command-center__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;

    margin: 0 0 18px;
    padding: 0 2px 16px;

    border-bottom: 1px solid rgba(11, 22, 34, 0.08);
}

.utp-results-command-center__eyebrow {
    display: block;

    margin: 0 0 7px;

    color: #F5793B;

    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.utp-results-command-center__title {
    margin: 0;

    color: #0B1622;

    font-size: 25px;
    font-weight: 950;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.utp-results-command-center__description {
    max-width: 360px;
    margin: 0;

    color: #64748B;

    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
    text-align: right;
}

/* Reset the earlier outer deck panel */
.utp-results-command-center
.utp-results-command-deck {
    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(0, 1.08fr)
        minmax(0, 1fr)
        minmax(0, 0.95fr)
        minmax(0, 0.92fr);

    gap: 14px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Modules */
.utp-results-command-center
.utp-results-module {
    min-height: 196px;
    padding: 20px;

    border-radius: 21px;

    cursor: pointer;
}

.utp-results-command-center
.utp-results-module--rules {
    background:
        radial-gradient(
            circle at 14% 0%,
            rgba(255, 122, 69, 0.22),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #292f3f 0%,
            #1d2331 54%,
            #151b27 100%
        );
}

.utp-results-command-center
.utp-results-module__top {
    align-items: start;
}

.utp-results-command-center
.utp-results-module__icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;

    border-radius: 12px;

    font-size: 18px;
}

.utp-results-command-center
.utp-results-module__title {
    padding-top: 4px;

    font-size: 10px;
    letter-spacing: 0.11em;
}

.utp-results-command-center
.utp-results-module__arrow {
    padding-top: 5px;
}

.utp-results-command-center
.utp-results-module__status {
    padding-top: 34px;

    font-size: 21px;
    line-height: 1.12;
}

.utp-results-command-center
.utp-results-module__summary {
    max-width: 220px;

    margin-top: 9px;

    font-size: 12px;
    line-height: 1.5;
}

/* Give the lead module more visual weight */
.utp-results-command-center
.utp-results-module--rules
.utp-results-module__status {
    font-size: 24px;
}

.utp-results-command-center
.utp-results-module--rules::after {
    width: 210px;
    height: 210px;

    right: -76px;
    bottom: -96px;
}

/* Responsive */
@media (max-width: 1120px) {
    .utp-results-command-center
    .utp-results-command-deck {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .utp-results-command-center
    .utp-results-module--rules {
        grid-column: span 2;
    }

    .utp-results-command-center
    .utp-results-module--map {
        grid-column: span 1;
    }
}

@media (max-width: 820px) {
    .utp-results-command-center {
        padding: 16px;
        border-radius: 22px;
    }

    .utp-results-command-center__header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .utp-results-command-center__description {
        max-width: none;
        text-align: left;
    }

    .utp-results-command-center
    .utp-results-command-deck {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .utp-results-command-center
    .utp-results-module {
        min-height: 170px;
    }

    .utp-results-command-center
    .utp-results-module--rules {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .utp-results-command-center {
        margin-bottom: 22px;
        padding: 12px;
    }

    .utp-results-command-center__header {
        margin-bottom: 12px;
        padding: 4px 4px 14px;
    }

    .utp-results-command-center__title {
        font-size: 22px;
    }

    .utp-results-command-center
    .utp-results-command-deck {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .utp-results-command-center
    .utp-results-module,
    .utp-results-command-center
    .utp-results-module--rules {
        grid-column: auto;
        min-height: 142px;
        padding: 17px;
    }

    .utp-results-command-center
    .utp-results-module__status {
        padding-top: 22px;
    }
}
/* =========================================================
   Command Deck — lighter glass stations
   ========================================================= */

/* Remove the visible outer workspace card */
.utp-results-command-center {
    margin: 4px 0 30px;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;
}

/* Keep only a light structural header */
.utp-results-command-center__header {
    margin: 0 0 16px;
    padding: 0 2px 14px;

    border-bottom:
        1px solid rgba(11, 22, 34, 0.08);
}

/* New station proportions */
.utp-results-command-center
.utp-results-command-deck {
    grid-template-columns:
        minmax(0, 1.38fr)
        minmax(0, 1fr)
        minmax(0, 0.90fr)
        minmax(0, 0.90fr)
        minmax(0, 1.22fr);

    gap: 13px;
}

/* Lighter, translucent stations */
.utp-results-command-center
.utp-results-module {
    min-height: 190px;

    background:
        radial-gradient(
            circle at 12% 0%,
            rgba(255, 122, 69, 0.16),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(55, 64, 82, 0.94),
            rgba(39, 47, 64, 0.92)
        );

    border:
        1px solid rgba(255, 255, 255, 0.14);

    box-shadow:
        0 16px 34px rgba(15, 23, 42, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Lead station */
.utp-results-command-center
.utp-results-module--rules {
    background:
        radial-gradient(
            circle at 12% 0%,
            rgba(255, 122, 69, 0.21),
            transparent 44%
        ),
        linear-gradient(
            145deg,
            rgba(63, 70, 89, 0.96),
            rgba(42, 50, 68, 0.93)
        );
}

/* Map becomes a second lead station */
.utp-results-command-center
.utp-results-module--map {
    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(255, 122, 69, 0.24),
            transparent 46%
        ),
        radial-gradient(
            circle at 92% 90%,
            rgba(102, 126, 165, 0.18),
            transparent 52%
        ),
        linear-gradient(
            145deg,
            rgba(65, 73, 94, 0.96),
            rgba(39, 48, 66, 0.93)
        );
}

/* Stronger status on the two lead stations */
.utp-results-command-center
.utp-results-module--rules
.utp-results-module__status,
.utp-results-command-center
.utp-results-module--map
.utp-results-module__status {
    font-size: 24px;
}

/* Slightly clearer secondary text */
.utp-results-command-center
.utp-results-module__summary {
    color: rgba(235, 240, 247, 0.70);
}

/* Softer hover */
.utp-results-command-center
.utp-results-module:hover,
.utp-results-command-center
.utp-results-module:focus-visible {
    transform: translateY(-3px);

    border-color: rgba(255, 138, 61, 0.42);

    box-shadow:
        0 22px 44px rgba(15, 23, 42, 0.20),
        0 0 0 1px rgba(255, 122, 69, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

/* Tablet layout */
@media (max-width: 1120px) {
    .utp-results-command-center
    .utp-results-command-deck {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .utp-results-command-center
    .utp-results-module--rules,
    .utp-results-command-center
    .utp-results-module--map {
        grid-column: span 2;
    }
}

/* =========================================================
   UTP Market — Workspace Activity
   Compact widgets + Mission Feed
   ========================================================= */

.utp-sales-overview {
    position: relative;
    display: block;
    width: 100%;
    margin: 20px 0 0;
    padding: 0;
}


/* =========================================================
   Section header
   ========================================================= */

.utp-sales-overview__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;

    margin: 0 0 9px;
    padding: 0 0 8px;

    border-bottom: 1px solid rgba(15, 27, 45, 0.10);
}

.utp-sales-overview__eyebrow {
    display: block;
    margin: 0 0 4px;

    color: #ff713d;

    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.utp-sales-overview__title {
    margin: 0;

    color: #111d2d;

    font-size: clamp(20px, 1.8vw, 24px);
    font-weight: 750;
    line-height: 1.08;
    letter-spacing: -0.03em;
}


/* =========================================================
   Main layout
   Locked architecture:
   4 stacked widgets + full-height Mission Feed
   ========================================================= */

.utp-sales-overview__layout {
    display: grid;
    grid-template-columns: minmax(280px, 34%) minmax(0, 66%);
    align-items: stretch;
    gap: 14px;

    width: 100%;
    min-width: 0;
}

.utp-sales-overview__widgets {
    display: grid;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 5px;

    min-width: 0;
}


/* =========================================================
   Small widgets
   ========================================================= */

.utp-sales-widget {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;

    box-sizing: border-box;
    min-width: 0;
    min-height: 62px;
    padding: 9px 15px;

    overflow: hidden;

    border: 1px solid rgba(15, 27, 45, 0.09);
    border-radius: 13px;

    background: rgba(255, 255, 255, 0.97);
    color: #111d2d;

    box-shadow:
        0 1px 2px rgba(15, 27, 45, 0.02),
        0 5px 15px rgba(15, 27, 45, 0.025);

    text-decoration: none;

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}

a.utp-sales-widget:hover,
a.utp-sales-widget:focus-visible {
    transform: translateY(-1px);

    border-color: rgba(255, 113, 61, 0.24);

    box-shadow:
        0 2px 4px rgba(15, 27, 45, 0.03),
        0 9px 22px rgba(15, 27, 45, 0.05);

    outline: none;
}

.utp-sales-widget__title {
    margin: 0 0 5px;

    color: #111d2d;

    font-size: 9px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.utp-sales-widget__body {
    display: flex;
    flex-direction: column;
    gap: 1px;

    min-width: 0;
}

.utp-sales-widget__primary {
    display: block;

    min-width: 0;
    overflow: hidden;

    color: #172338;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.utp-sales-widget__secondary {
    display: block;

    min-width: 0;
    overflow: hidden;

    color: rgba(17, 29, 45, 0.66);

    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.utp-sales-widget__meta {
    display: block;
    margin-top: 3px;

    min-width: 0;
    overflow: hidden;

    color: rgba(17, 29, 45, 0.43);

    font-size: 9px;
    font-weight: 600;
    line-height: 1.15;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   Mission Feed
   ========================================================= */

.utp-sales-hero {
    position: relative;
    display: flex;
    flex-direction: column;

    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 17px 21px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 15px;

    background:
        radial-gradient(
            circle at 14% 10%,
            rgba(255, 113, 61, 0.08),
            transparent 29%
        ),
        linear-gradient(
            135deg,
            #303743 0%,
            #343c4a 48%,
            #202a38 100%
        );

    color: #ffffff;

    box-shadow:
        0 9px 27px rgba(9, 16, 28, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.utp-sales-hero::after {
    content: "";
    position: absolute;
    right: -110px;
    bottom: -135px;

    width: 230px;
    height: 230px;

    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   Mission Feed header
   ========================================================= */

.utp-sales-hero__header {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin: 0 0 13px;
    padding: 0 0 10px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.utp-sales-hero__live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.utp-sales-hero__live-dot {
    position: relative;

    width: 6px;
    height: 6px;
    flex: 0 0 6px;

    border-radius: 50%;
    background: #ff713d;

    box-shadow: 0 0 0 3px rgba(255, 113, 61, 0.11);

    animation: utp-mission-feed-pulse 2.4s ease-in-out infinite;
}

.utp-sales-hero__eyebrow {
    color: #ff713d;

    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.utp-sales-hero__updated {
    color: rgba(255, 255, 255, 0.42);

    font-size: 9px;
    font-weight: 600;
    line-height: 1.15;
}


/* =========================================================
   Mission Feed content grid
   ========================================================= */

.utp-sales-hero__content {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(210px, 0.92fr);
    align-items: start;
    gap: 21px;

    min-height: 0;
    flex: 1;
}

.utp-sales-hero__primary {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    min-width: 0;
    padding: 4px 21px 2px 0;

    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.utp-sales-hero__event {
    display: inline-flex;
    align-self: flex-start;

    margin: 0 0 8px;
    padding: 4px 8px;

    border: 1px solid rgba(255, 113, 61, 0.22);
    border-radius: 999px;

    background: rgba(255, 113, 61, 0.09);
    color: #ff8a61;

    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.utp-sales-hero__title {
    margin: 0;

    color: #ffffff;

    font-size: clamp(24px, 2.15vw, 32px);
    font-weight: 760;
    line-height: 1.04;
    letter-spacing: -0.035em;
}

.utp-sales-hero__meta {
    margin: 7px 0 0;

    color: rgba(255, 255, 255, 0.62);

    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
}

.utp-sales-hero__value {
    display: block;
    margin: 13px 0 0;

    color: #ff713d;

    font-size: clamp(27px, 2.55vw, 36px);
    font-weight: 780;
    line-height: 1;
    letter-spacing: -0.04em;
}

.utp-sales-hero__reference {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-top: 11px;

    color: rgba(255, 255, 255, 0.42);

    font-size: 9px;
    font-weight: 600;
    line-height: 1.15;
}

.utp-sales-hero__reference strong {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 700;
}


/* =========================================================
   Around the workspace
   ========================================================= */

.utp-sales-hero__secondary {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    min-width: 0;
    padding-top: 5px;
}

.utp-sales-hero__next-label {
    display: block;
    margin: 0 0 8px;

    color: rgba(255, 255, 255, 0.40);

    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.utp-sales-hero__cities {
    display: grid;
    gap: 0;

    min-width: 0;
}

.utp-sales-hero__city {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;

    min-width: 0;
    padding: 8px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}

.utp-sales-hero__city:first-child {
    padding-top: 0;
}

.utp-sales-hero__city:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.utp-sales-hero__city > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.utp-sales-hero__city > div:last-child {
    align-items: flex-end;
    text-align: right;
}

.utp-sales-hero__city strong {
    color: rgba(255, 255, 255, 0.91);

    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
}

.utp-sales-hero__city span {
    margin-top: 2px;

    color: rgba(255, 255, 255, 0.42);

    font-size: 9px;
    font-weight: 500;
    line-height: 1.15;
}


/* =========================================================
   Motion
   ========================================================= */

@keyframes utp-mission-feed-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 3px rgba(255, 113, 61, 0.09);
        opacity: 0.76;
    }

    50% {
        box-shadow: 0 0 0 5px rgba(255, 113, 61, 0.02);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .utp-sales-hero__live-dot {
        animation: none;
    }

    .utp-sales-widget {
        transition: none;
    }
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1050px) {
    .utp-sales-overview__layout {
        grid-template-columns: minmax(255px, 34%) minmax(0, 66%);
    }

    .utp-sales-hero {
        padding: 16px 19px;
    }

    .utp-sales-hero__content {
        gap: 18px;
    }

    .utp-sales-hero__primary {
        padding-right: 18px;
    }
}

@media (max-width: 860px) {
    .utp-sales-overview__layout {
        grid-template-columns: 1fr;
    }

    .utp-sales-overview__widgets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
    }

    .utp-sales-widget {
        min-height: 82px;
    }

    .utp-sales-hero {
        height: auto;
        min-height: 300px;
    }
}

@media (max-width: 640px) {
    .utp-sales-overview {
        margin-top: 18px;
    }

    .utp-sales-overview__header {
        margin-bottom: 11px;
        padding-bottom: 10px;
    }

    .utp-sales-overview__widgets {
        grid-template-columns: 1fr;
    }

    .utp-sales-widget {
        min-height: 74px;
        padding: 12px 15px;
    }

    .utp-sales-hero {
        min-height: 0;
        padding: 16px;
        border-radius: 14px;
    }

    .utp-sales-hero__header {
        align-items: flex-start;
        margin-bottom: 13px;
    }

    .utp-sales-hero__updated {
        max-width: 90px;
        text-align: right;
    }

    .utp-sales-hero__content {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .utp-sales-hero__primary {
        padding: 0 0 17px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .utp-sales-hero__secondary {
        padding-top: 0;
    }

    .utp-sales-hero__title {
        font-size: 26px;
    }

    .utp-sales-hero__value {
        font-size: 30px;
    }
}
/* =========================================================
   Workspace Activity — Hero rotator
   ========================================================= */

.utp-sales-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    isolation: isolate;
}

.utp-sales-hero__header {
    grid-column: 1;
    grid-row: 1;
}

.utp-sales-hero__slide {
    grid-column: 1;
    grid-row: 2;

    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 0;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(7px);

    transition:
        opacity 320ms ease,
        transform 320ms ease,
        visibility 0s linear 320ms;
}

.utp-sales-hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);

    transition:
        opacity 320ms ease,
        transform 320ms ease,
        visibility 0s linear 0s;
}

.utp-sales-hero__slide[hidden] {
    display: grid;
}

@media (prefers-reduced-motion: reduce) {
    .utp-sales-hero__slide,
    .utp-sales-hero__slide.is-active {
        transform: none;
        transition: none;
    }
}
/* =========================================================
   Results Workspace
   Compact controls + Hero map
   ========================================================= */

.utp-results-overview .utp-sales-overview__widgets {
    grid-template-rows: repeat(4, 78px);
    gap: 5px;
}

.utp-results-overview .utp-sales-widget {
    min-height: 78px;
}

.utp-results-overview .utp-results-map-workspace {
    height: 327px;
    min-height: 327px;
    padding: 17px 21px;
}

.utp-results-overview .utp-results-map-workspace__content {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 0;

    overflow: hidden;

    border-radius: 13px;
}

.utp-results-overview .utp-results-map-hero {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.utp-results-overview .utp-results-map-hero__canvas {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 240px;

    overflow: hidden;

    border-radius: 13px;
}

.utp-results-overview .utp-sales-widget--search-rules {
    overflow: visible;
    z-index: 23;
}

.utp-results-overview .utp-sales-widget--search-rules .utp-control-panel {
    top: calc(100% + 8px);
    right: 0;
    left: auto;
}

/* ==========================================================
   Budget Panel
   ========================================================== */

.utp-budget-panel__fields {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-bottom:18px;
}

.utp-budget-panel__field {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.utp-budget-panel__field span {
    font-size:12px;
    font-weight:600;
    color:rgba(255,255,255,.72);
}

.utp-budget-panel__field input {
    width:100%;
    height:40px;
    padding:0 12px;

    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;

    background:#2a303c;
    color:#fff;
}

.utp-budget-panel__range {
    position: relative;
    height: 44px;
    margin: 8px 0;
}

.utp-budget-panel__track {
    position:absolute;
    left:0;
    right:0;
    top:15px;

    height:4px;

    border-radius:999px;
    background:rgba(255,255,255,.14);
}

.utp-budget-panel__range input[type=range] {
    position:absolute;

    left:0;
    top:7px;

    width:100%;

    background:none;
    pointer-events:none;

    appearance:none;
    -webkit-appearance:none;
}

.utp-budget-panel__range input::-webkit-slider-thumb {
    appearance:none;
    -webkit-appearance:none;

    width:16px;
    height:16px;

    border:0;
    border-radius:50%;

    background:#ff8a00;

    cursor:pointer;
    pointer-events:auto;
}

.utp-budget-panel__range input::-moz-range-thumb {
    width:16px;
    height:16px;

    border:0;
    border-radius:50%;

    background:#ff8a00;

    cursor:pointer;
    pointer-events:auto;
}

.utp-budget-panel__reset {
    width:100%;
    height:40px;

    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;

    background:transparent;
    color:#fff;

    cursor:pointer;

    transition:.18s;
}

.utp-budget-panel__reset:hover {
    border-color:#ff8a00;
    color:#ff8a00;
}
.utp-results-overview .utp-sales-widget--budget {
    overflow: visible;
    z-index: 21;
}

.utp-results-overview .utp-sales-widget--budget .utp-control-panel {
    top: calc(100% + 8px);
    right: 0;
    left: auto;
}

/* =========================================================
   Results Hero — expand control
   ========================================================= */

.utp-sales-hero__expand {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 0;

    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.72);

    cursor: pointer;

    transition: color 180ms ease;
}

.utp-sales-hero__expand:hover,
.utp-sales-hero__expand:focus-visible {
    color: #ffffff;
    outline: none;
}

/* UTP Hotels Search — offer price / shortlist contrast fix */

.utp-hotel-card__base-price {
    display: block;
    margin-top: 4px;
    color: #94a3b8 !important;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.15;
    text-decoration-line: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: #94a3b8;
    opacity: 1;
}

.utp-hotel-card__shortlist {
    color: #94a3b8 !important;
}

.utp-hotel-card__shortlist:hover,
.utp-hotel-card__shortlist:focus-visible {
    color: #F5793B !important;
}

.utp-hotel-card__shortlist:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}
/* UTP Hotel Page — RoomCard visual separation + title clipping fix */

/* The title was touching/clipping against the card edge. */
.utp-room-card__header {
    padding-top: 14px;
    padding-bottom: 12px;
}

.utp-room-card__identity {
    min-width: 0;
    padding-left: 18px;
    padding-right: 18px;
}

.utp-room-card__title {
    margin: 0;
    padding: 2px 0 3px;
    line-height: 1.2;
    overflow: visible;
}

/* Keep rate conditions visually separated instead of one text line. */
.utp-room-rate__conditions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.utp-room-rate__board {
    color: #223047 !important;
    font-weight: 700;
}

/* Cancellation is a distinct status badge. */
.utp-room-rate__cancellation {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #edf8f2;
    border: 1px solid #cbe8d8;
    color: #277653 !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}

/* Public offer badge. */
.utp-room-rate__offer {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff4ec;
    color: #e56724 !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* Inventory remains a separate operational indicator. */
.utp-room-rate__availability {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff0e9;
    color: #e65f27 !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.utp-room-rate__base-price {
    display: block;
    margin-top: 2px;
    color: #94a3b8 !important;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.1;
    text-decoration-line: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: #94a3b8;
    opacity: 1;
}

.utp-room-rate__price-label {
    color: #8190a5 !important;
}

.utp-room-rate__price {
    color: #101827 !important;
}


/* ==========================================================================
   Hotels V1 Final — search cancellation visibility + room price spacing
   ========================================================================== */

.utp-hotel-card__badge--cancellation {
    border: 1px solid #cbe8d8;
    background: #edf8f2;
    color: #277653;
}

.utp-hotel-card__badge--offer {
    background: #fff4ec;
    color: #e56724;
}

.utp-hotel-card__badge--board {
    background: #fff6ef;
    color: #d97706;
}

.utp-room-rate {
    column-gap: 28px;
}

.utp-room-rate__price-block {
    display: grid;
    min-width: 190px;
    justify-items: end;
    align-content: center;
    gap: 6px;
    padding-left: 18px;
}

.utp-room-rate__price-label {
    margin: 0;
    line-height: 1;
}

.utp-room-rate__base-price {
    margin: 0 !important;
    line-height: 1.05;
}

.utp-room-rate__price {
    display: block;
    margin: 0;
    line-height: 1.05;
}

.utp-room-rate__form {
    margin: 3px 0 0;
}

.utp-room-rate__select {
    margin: 0;
}


/* ==========================================================================
   Travel Foundation — tablet portrait only
   Desktop geometry above remains canonical. The global UTP gate owns <768px.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    .utp-hotels-search__bar{
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 12px;
    }

    .utp-hotels-search__bar > .utp-field:first-child{
        grid-column: 1 / -1;
    }

    .utp-hotels-search__bar .utp-date-range{
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .utp-hotels-search__bar .utp-platform-country-picker{
        grid-column: auto;
    }

    .utp-hotels-search__bar .utp-primary-button{
        grid-column: 1 / -1;
        width: 100%;
    }
}


/* Native date input interaction repair. */
.utp-hotels-search__bar .utp-date-range__field,
.utp-hotels-search__bar .utp-date-range__field .utp-field__control {
    overflow: visible;
}

.utp-hotels-search__bar .utp-field__input[type="date"]:focus {
    outline: 2px solid rgba(255, 110, 64, 0.42);
    outline-offset: 2px;
}


/* =========================================================
   Guests & Rooms — compact UTP override
   ========================================================= */
.utp-search-board .utp-guests-selector__panel {
    width: 300px !important;
    max-width: min(300px, calc(100vw - 24px)) !important;
    max-height: min(330px, calc(100vh - 150px)) !important;
    padding: 10px !important;
    border-radius: 14px !important;
}

.utp-search-board .utp-guests-selector__panel h2 {
    margin: 0 0 2px !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
}

.utp-search-board .utp-guests-selector__panel h3 {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
}

.utp-search-board .utp-guests-selector__panel p {
    margin: 0 0 8px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
}

.utp-search-board .utp-guests-selector__panel > * {
    margin-bottom: 6px !important;
}

.utp-search-board .utp-guests-selector__panel [class*="room"],
.utp-search-board .utp-guests-selector__panel [class*="row"],
.utp-search-board .utp-guests-selector__panel [class*="section"] {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.utp-search-board .utp-guests-selector__panel button {
    min-height: 28px !important;
}

.utp-search-board .utp-guests-selector__panel button:not([class*="done"]):not([class*="primary"]) {
    min-width: 28px !important;
    width: auto;
    padding: 0 8px !important;
}

.utp-search-board .utp-guests-selector__panel [class*="done"],
.utp-search-board .utp-guests-selector__panel .utp-primary-button {
    min-height: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
}

.utp-search-board .utp-guests-selector__panel hr {
    margin: 6px 0 !important;
}


/* =========================================================
   UTP Hotels Search Board — Interaction Visual Pass
   ========================================================= */

/* Canonical line icons */
.utp-search-card__icon svg {
    width: 21px;
    height: 21px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.utp-search-card__icon {
    color: rgba(255,255,255,.94);
    background: rgba(245,121,59,.025);
}

/* Remove component-level duplicate icon inside Guests trigger */
.utp-search-board .utp-guests-selector__icon {
    display: none !important;
}

/* Date icons: make native calendar controls visible on dark cards */
.utp-search-board input[type="date"] {
    color-scheme: dark !important;
}

.utp-search-board input[type="date"]::-webkit-calendar-picker-indicator {
    display: block !important;
    opacity: .92 !important;
    filter: invert(1) brightness(2) !important;
    cursor: pointer;
}

/* Slightly calmer active state */
.utp-search-card:focus-within {
    border-color: rgba(245,121,59,.78);
    box-shadow:
        0 0 0 1px rgba(245,121,59,.08),
        0 8px 22px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.04);
}

/* Destination autocomplete — continuation of the card */
.utp-search-board .utp-search-input__suggestions {
    top: calc(100% + 7px);
    padding: 6px;
    border-radius: 13px;
    background: #151d2b;
    border: 1px solid rgba(148,163,184,.24);
    box-shadow: 0 18px 42px rgba(0,0,0,.34);
}

.utp-search-board .utp-search-input__suggestion,
.utp-search-board .utp-search-input__suggestions button,
.utp-search-board .utp-search-input__suggestions [role="option"] {
    min-height: 38px;
    padding: 7px 9px;
    border-radius: 9px;
    color: #f8fafc;
    font-size: 12px;
    font-weight: 760;
}

.utp-search-board .utp-search-input__suggestion:hover,
.utp-search-board .utp-search-input__suggestion:focus,
.utp-search-board .utp-search-input__suggestion.is-active,
.utp-search-board .utp-search-input__suggestions button:hover,
.utp-search-board .utp-search-input__suggestions [role="option"]:hover {
    background: rgba(245,121,59,.09);
}

.utp-search-board .utp-search-input__suggestion-subtitle {
    color: rgba(203,213,225,.58);
    font-size: 11px;
}

/* Residence dropdown — same material */
.utp-search-board .utp-platform-country-picker__dropdown {
    top: calc(100% + 7px);
    min-width: 220px;
    padding: 6px;
    border-radius: 13px;
    background: #151d2b;
    border: 1px solid rgba(148,163,184,.24);
    box-shadow: 0 18px 42px rgba(0,0,0,.34);
}

.utp-search-board .utp-platform-country-picker__option {
    min-height: 36px;
    padding: 7px 9px;
    border-radius: 9px;
    color: #f8fafc;
    font-size: 12px;
}

.utp-search-board .utp-platform-country-picker__option:hover,
.utp-search-board .utp-platform-country-picker__option--active {
    background: rgba(245,121,59,.09);
}

/* Client native select: closed state belongs to card */
.utp-search-card--client select.utp-field__input {
    color: #fff !important;
    cursor: pointer;
}
.utp-search-card--client select.utp-field__input option {
    color: #111827;
    background: #fff;
}

/* Guests & Rooms — subordinate popover, not a modal */
.utp-search-board .utp-guests-selector__panel {
    top: calc(100% + 7px) !important;
    left: 0 !important;
    right: auto !important;
    width: 278px !important;
    max-width: min(278px, calc(100vw - 20px)) !important;
    max-height: min(286px, calc(100vh - 120px)) !important;
    padding: 9px !important;
    overflow-y: auto !important;
    border-radius: 13px !important;
    background: #151d2b !important;
    border: 1px solid rgba(148,163,184,.24) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.34) !important;
    color: #f8fafc !important;
}

.utp-search-board .utp-guests-selector__header {
    margin: 0 0 7px !important;
    padding: 1px 2px 5px !important;
    border-bottom: 1px solid rgba(148,163,184,.12);
}

.utp-search-board .utp-guests-selector__header strong {
    color: #f8fafc !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    font-weight: 820 !important;
}

.utp-search-board .utp-guests-selector__header span {
    display: none !important;
}

.utp-search-board .utp-guests-selector__section {
    min-height: 38px !important;
    margin: 0 0 7px !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.035) !important;
    border: 1px solid rgba(148,163,184,.12) !important;
}

.utp-search-board .utp-guests-selector__section-title span,
.utp-search-board .utp-guests-selector__counter-label {
    color: rgba(226,232,240,.86) !important;
    font-size: 11px !important;
    font-weight: 760 !important;
}

.utp-search-board .utp-guests-selector__rooms {
    gap: 7px !important;
}

.utp-search-board .utp-guests-selector__room {
    padding: 8px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.025) !important;
    border: 1px solid rgba(148,163,184,.11) !important;
}

.utp-search-board .utp-guests-selector__room-header {
    margin-bottom: 4px !important;
}

.utp-search-board .utp-guests-selector__room-title {
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 820 !important;
}

.utp-search-board .utp-guests-selector__counter {
    gap: 7px !important;
    padding: 4px 0 !important;
}

.utp-search-board .utp-guests-stepper,
.utp-search-board .utp-guests-selector__counter-controls {
    gap: 6px !important;
}

.utp-search-board .utp-guests-stepper__button,
.utp-search-board .utp-guests-selector__counter-button {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    border: 1px solid rgba(148,163,184,.23) !important;
    background: rgba(255,255,255,.045) !important;
    color: #fff !important;
    font-size: 13px !important;
}

.utp-search-board .utp-guests-stepper__button:hover,
.utp-search-board .utp-guests-selector__counter-button:hover {
    border-color: rgba(245,121,59,.80) !important;
    color: #F5793B !important;
    background: rgba(245,121,59,.07) !important;
}

.utp-search-board .utp-guests-stepper__value,
.utp-search-board .utp-guests-selector__counter-value {
    min-width: 16px !important;
    color: #fff !important;
    font-size: 12px !important;
}

.utp-search-board .utp-guests-selector__children {
    margin-top: 3px !important;
    padding-top: 5px !important;
    border-top: 1px solid rgba(148,163,184,.11) !important;
}

.utp-search-board .utp-guests-selector__children-header {
    margin-bottom: 5px !important;
}

.utp-search-board .utp-guests-selector__ages {
    gap: 5px !important;
    margin-bottom: 6px !important;
}

.utp-search-board .utp-guests-selector__age-label {
    color: rgba(203,213,225,.70) !important;
    font-size: 10px !important;
}

.utp-search-board .utp-guests-selector__age-select {
    height: 31px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(148,163,184,.20) !important;
    background: rgba(255,255,255,.045) !important;
    color: #fff !important;
    font-size: 11px !important;
}

.utp-search-board .utp-guests-selector__age-select option {
    color: #111827;
    background: #fff;
}

.utp-search-board .utp-guests-selector__remove-room,
.utp-search-board .utp-guests-selector__remove-child {
    padding: 4px 7px !important;
    border-radius: 7px !important;
    border: 1px solid rgba(148,163,184,.20) !important;
    background: transparent !important;
    color: rgba(226,232,240,.72) !important;
    font-size: 10px !important;
}

.utp-search-board .utp-guests-selector__add-child {
    min-height: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    border: 1px dashed rgba(245,121,59,.58) !important;
    background: transparent !important;
    color: #F5793B !important;
    font-size: 10px !important;
}

.utp-search-board .utp-guests-selector__add-child:hover {
    background: rgba(245,121,59,.07) !important;
}

.utp-search-board .utp-guests-selector__footer {
    position: sticky !important;
    bottom: -9px !important;
    margin: 7px -9px -9px !important;
    padding: 7px 9px 9px !important;
    background: linear-gradient(180deg, rgba(21,29,43,0), #151d2b 34%) !important;
}

.utp-search-board .utp-guests-selector__done {
    width: auto !important;
    min-width: 74px !important;
    height: 29px !important;
    min-height: 29px !important;
    display: block !important;
    margin-left: auto !important;
    padding: 0 13px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(245,121,59,.72) !important;
    background: rgba(245,121,59,.05) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 820 !important;
}

.utp-search-board .utp-guests-selector__done:hover {
    background: rgba(245,121,59,.12) !important;
}

/* Scrollbars inside UTP popovers */
.utp-search-board .utp-guests-selector__panel::-webkit-scrollbar,
.utp-search-board .utp-search-input__suggestions::-webkit-scrollbar,
.utp-search-board .utp-platform-country-picker__dropdown::-webkit-scrollbar {
    width: 6px;
}
.utp-search-board .utp-guests-selector__panel::-webkit-scrollbar-thumb,
.utp-search-board .utp-search-input__suggestions::-webkit-scrollbar-thumb,
.utp-search-board .utp-platform-country-picker__dropdown::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,.28);
    border-radius: 999px;
}


/* =========================================================
   UTP Hotels Search Board — Refinement Pass
   1) Remove outer grey shell around black search canvas
   2) Keep functional calendar triggers visible/light
   3) Guests popup width = Guests card
   4) Residence dropdown width = Residence card
   ========================================================= */

/* Remove extra grey layer: the black search canvas is the only search surface */
.utp-market-search-panel {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.utp-search-board {
    padding: 16px !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at 16% -30%, rgba(245,121,59,.12), transparent 42%),
        linear-gradient(145deg, #151b29 0%, #0c1421 58%, #101725 100%) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow:
        0 18px 42px rgba(4,10,20,.24),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Calendar triggers stay functional and visibly light */
.utp-search-board input[type="date"] {
    color-scheme: dark !important;
}

.utp-search-board input[type="date"]::-webkit-calendar-picker-indicator {
    display: block !important;
    opacity: 1 !important;
    filter: invert(1) brightness(2.2) contrast(1.1) !important;
    cursor: pointer !important;
}

.utp-search-card--stay .utp-field__control {
    position: relative;
}

/* Guests becomes a natural extension of its card */
.utp-search-card--guests {
    position: relative;
}

.utp-search-card--guests .utp-guests-selector__panel {
    top: calc(100% + 7px) !important;
    left: -68px !important; /* card icon + gap + padding */
    right: auto !important;
    width: calc(100% + 86px) !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border-radius: 0 0 14px 14px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.28) !important;
}

/* Visually connect popup to card */
.utp-search-card--guests .utp-guests-selector__panel::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
    background: #151d2b;
    border-left: 1px solid rgba(148,163,184,.24);
    border-right: 1px solid rgba(148,163,184,.24);
}

/* Residence dropdown becomes full-width extension of Residence card */
.utp-search-card--residence {
    position: relative;
}

.utp-search-card--residence .utp-platform-country-picker__dropdown {
    top: calc(100% + 7px) !important;
    left: -68px !important;
    right: auto !important;
    width: calc(100% + 86px) !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    border-radius: 0 0 14px 14px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.28) !important;
}

.utp-search-card--residence .utp-platform-country-picker__dropdown::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
    background: #151d2b;
    border-left: 1px solid rgba(148,163,184,.24);
    border-right: 1px solid rgba(148,163,184,.24);
}

/* Keep the extension compact */
.utp-search-card--guests .utp-guests-selector__panel {
    max-height: min(300px, calc(100vh - 140px)) !important;
}

.utp-search-card--residence .utp-platform-country-picker__dropdown {
    max-height: 260px !important;
}

/* On tablet, don't overrun viewport */
@media (max-width: 1050px) {
    .utp-search-card--guests .utp-guests-selector__panel,
    .utp-search-card--residence .utp-platform-country-picker__dropdown {
        left: -68px !important;
        width: calc(100% + 86px) !important;
        max-width: calc(100vw - 48px) !important;
    }
}


/* =========================================================
   UTP Hotels Search — Canonical controls pass
   Typography uses locked Platform tokens.
   Date pickers use real DOM buttons from PlatformDateRangePicker.
   ========================================================= */

/* Locked UTP typography roles across every Search Board control */
.utp-search-board,
.utp-search-board input,
.utp-search-board select,
.utp-search-board button {
    font-family: var(--utp-ui-font-family, var(--utp-font-family)) !important;
}

.utp-search-board .utp-field__label,
.utp-search-board .utp-booking-field__label,
.utp-search-board .utp-platform-country-picker .utp-booking-field__label {
    font-family: var(--utp-ui-font-family, var(--utp-font-family)) !important;
    font-size: var(--utp-ui-font-eyebrow, var(--utp-type-micro)) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.utp-search-board .utp-field__input,
.utp-search-board .utp-field__trigger,
.utp-search-board .utp-platform-country-picker__input,
.utp-search-board select.utp-field__input,
.utp-search-board .utp-primary-button {
    font-family: var(--utp-ui-font-family, var(--utp-font-family)) !important;
    font-size: var(--utp-ui-font-body, var(--utp-type-body)) !important;
    font-weight: 760 !important;
    line-height: 30px !important;
}

/* Residence must use exactly the same value typography as the other cards */
.utp-search-card--residence .utp-platform-country-picker__input {
    font-size: var(--utp-ui-font-body, var(--utp-type-body)) !important;
    font-weight: 760 !important;
    line-height: 30px !important;
}

/* Date control: real button belongs to each date field, so it stays correct
   at every viewport width. */
.utp-search-card--stay .utp-date-range__control {
    position: relative !important;
}

.utp-search-card--stay .utp-date-range__input {
    padding-right: 34px !important;
}

/* Hide only the browser-painted glyph. The native input remains a date input. */
.utp-search-card--stay input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

.utp-search-card--stay .utp-date-range__picker {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255,255,255,.94) !important;
    cursor: pointer !important;
}

.utp-search-card--stay .utp-date-range__picker:hover,
.utp-search-card--stay .utp-date-range__picker:focus-visible {
    color: #F5793B !important;
    background: rgba(245,121,59,.08) !important;
    outline: none !important;
}

.utp-search-card--stay .utp-date-range__picker svg {
    display: block !important;
    width: 17px !important;
    height: 17px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* Kill all previous experimental date overlays/triggers. */
.utp-search-card--stay .utp-date-range__field .utp-field__control::after,
.utp-search-card--stay .utp-date-picker-trigger {
    content: none !important;
    display: none !important;
}


/* =========================================================
   UTP Hotels Search — restore transparent outer control shell
   Keep only the black Search Board surface.
   ========================================================= */

.utp-ui-workspace-home__control.utp-ui-control-surface--dark:has(.utp-market-search) {
    padding: 0 !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.utp-ui-workspace-home__control.utp-ui-control-surface--dark:has(.utp-market-search)
.utp-ui-workspace-home__controls {
    margin: 0 !important;
    padding: 0 !important;
}


/* Hotels product home — contextual blocks below the canonical search canvas. */
.utp-market-hotels-home {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 20px 0 0;
}

.utp-market-hotels-home__card {
    display: flex;
    min-width: 0;
    min-height: 134px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid var(--utp-color-border, #dbe2ea);
    border-radius: var(--utp-radius-lg, 14px);
    background: var(--utp-color-surface, #fff);
    font-family: var(--utp-font-family);
}

.utp-market-hotels-home__eyebrow {
    margin: 0 0 10px;
    color: var(--utp-color-primary, #ff5a3d);
    font-size: var(--utp-type-micro, 11px);
    font-weight: var(--utp-weight-bold, 700);
    line-height: 1.2;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.utp-market-hotels-home__title {
    display: block;
    margin: 0 0 8px;
    color: var(--utp-color-text, #172033);
    font-size: var(--utp-type-body, 15px);
    font-weight: var(--utp-weight-semibold, 600);
    line-height: 1.25;
}

.utp-market-hotels-home__text {
    display: block;
    margin: 0;
    color: var(--utp-color-muted, #8793a8);
    font-size: var(--utp-type-secondary, 13px);
    font-weight: var(--utp-weight-regular, 400);
    line-height: 1.45;
}

.utp-market-hotels-home__card--planned {
    opacity: .78;
}

@media (max-width: 1100px) {
    .utp-market-hotels-home {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   MARKET FRONT DOOR V2 — Directory-family architectural surface
   Visual-only home treatment. Search structure/logic stays intact.
   ========================================================= */

/* On Market Home only, remove the old white outer room while keeping
   the canonical module navigation untouched. */
html body .utp-platform-workspace-window:has(.utp-ui-workspace-home .utp-market-search) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html body .utp-platform-workspace-window:has(.utp-ui-workspace-home .utp-market-search) > .utp-workspace-modules {
    margin-left: 0;
    margin-right: 0;
}

/* The Platform home control becomes the same architectural family as
   Directory Home: dark translucent room, subtle quadrant lines. */
html body .utp-ui-workspace-home__control.utp-ui-control-surface--dark:has(.utp-market-search) {
    position: relative;
    min-height: 250px;
    display: grid;
    align-items: center;
    box-sizing: border-box;
    margin-top: 32px;
    padding: 28px 26px !important;
    overflow: visible;
    border: 1px solid rgba(148,163,184,.34) !important;
    border-radius: 26px !important;
    background: linear-gradient(135deg,rgba(29,40,57,.90),rgba(29,31,42,.88) 52%,rgba(20,31,47,.90)) !important;
    box-shadow: 0 22px 64px rgba(2,6,23,.18) !important;
    backdrop-filter: blur(20px);
}

html body .utp-ui-workspace-home__control.utp-ui-control-surface--dark:has(.utp-market-search)::before,
html body .utp-ui-workspace-home__control.utp-ui-control-surface--dark:has(.utp-market-search)::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    background: rgba(148,163,184,.16);
}

html body .utp-ui-workspace-home__control.utp-ui-control-surface--dark:has(.utp-market-search)::before {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
}

html body .utp-ui-workspace-home__control.utp-ui-control-surface--dark:has(.utp-market-search)::after {
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
}

html body .utp-ui-workspace-home__control.utp-ui-control-surface--dark:has(.utp-market-search) .utp-ui-workspace-home__controls {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

/* Keep the existing Hotels Search Board exactly as the working instrument;
   only remove its redundant second outer dark shell. */
html body .utp-ui-workspace-home__control:has(.utp-market-search) .utp-market-search-panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Slight upholstery pass so the existing board sits comfortably in the room. */
html body .utp-ui-workspace-home__control:has(.utp-market-search) .utp-search-board {
    gap: 9px;
}

html body .utp-ui-workspace-home__control:has(.utp-market-search) .utp-search-card {
    min-height: 72px;
    padding-top: 9px;
    padding-bottom: 9px;
}

@media (min-width:768px) and (max-width:950px) {
    html body .utp-ui-workspace-home__control.utp-ui-control-surface--dark:has(.utp-market-search) {
        min-height: 230px;
        padding: 22px 20px !important;
    }
}

/* =========================================================
   MARKET FRONT DOOR V3 — remove the final legacy search wallpaper
   Keep the existing search controls/layout/behaviour unchanged.
   The Directory-family architectural room is now the only outer surface.
   ========================================================= */
html body .utp-ui-workspace-home__control:has(.utp-market-search) .utp-search-board {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}