/*
 * Advance-offer "offer pass" skin — shared by the pricing page and the room page.
 * Trigger pill, hover notification and details popup, all drawn from the active
 * theme (--color-primary / --color-accent) instead of fixed navy + gold.
 *
 * `body:not(#adv)` only raises specificity so the skin wins over the page-level
 * and per-template rules without needing !important.
 */

:is(.rate-advance-offer, .rate-advance-hover-popover, .room-card-advance-offer, .room-advance-offer, .room-image-advance-wrap, .room-sidebar-advance-wrap, .rate-advance-modal, .room-advance-modal) {
    --adv-p: var(--color-primary, #06386D);
    --adv-p-deep: color-mix(in srgb, var(--adv-p) 76%, #000);
    --adv-a: var(--color-accent, #E4A81C);
    --adv-hi: color-mix(in srgb, var(--adv-a) 42%, #fff);
    --adv-tint: color-mix(in srgb, var(--adv-p) 8%, #fff);
    --adv-ok: #4ade80;
    /* The % chip: one bright colour on purpose, so the offer always stands out from the theme. */
    --adv-spot: #ffc83d;
    --adv-spot-ink: #3a2600;
}

/* ---------- Trigger pill ---------- */
html body:not(#adv) :is(.rate-advance-trigger, .room-advance-trigger, .room-card-advance-trigger) {
    gap: 7px;
    padding: 7px 13px 7px 8px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--adv-p), var(--adv-p-deep));
    color: #fff;
    font-size: 8px;
    letter-spacing: .08em;
    box-shadow: 0 4px 0 var(--adv-p-deep), 0 10px 20px color-mix(in srgb, var(--adv-p) 32%, transparent);
    animation: adv-glow 2.8s ease-in-out infinite;
}
html body:not(#adv) :is(.rate-advance-trigger, .room-advance-trigger, .room-card-advance-trigger):hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--adv-p) 88%, #fff), var(--adv-p));
    transform: translateY(-2px);
}
/* The % is a coupon stub: notched sides, a dashed inner border and a shine that sweeps across. */
html body:not(#adv) :is(.rate-advance-trigger, .room-advance-trigger, .room-card-advance-trigger) b,
html body:not(#adv) .rate-advance-modal-body .rate-advance-db-offer strong,
html body:not(#adv) :is(.room-advance-tooltip, .room-advance-modal-body) .room-db-offer strong {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    padding: 5px 13px;
    border: 0;
    border-radius: 7px;
    background: linear-gradient(135deg, #ffe08a, var(--adv-spot));
    color: var(--adv-spot-ink);
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: .04em;
    box-shadow: none;
    -webkit-mask: radial-gradient(circle 4.5px at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 4.5px at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat;
    mask: radial-gradient(circle 4.5px at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 4.5px at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat;
    animation: none;
}
html body:not(#adv) :is(.rate-advance-trigger, .room-advance-trigger, .room-card-advance-trigger) b::after,
html body:not(#adv) .rate-advance-modal-body .rate-advance-db-offer strong::after,
html body:not(#adv) :is(.room-advance-tooltip, .room-advance-modal-body) .room-db-offer strong::after {
    content: '';
    position: absolute;
    inset: 2px 7px;
    border: 1px dashed color-mix(in srgb, var(--adv-spot-ink) 38%, transparent);
    border-radius: 5px;
    pointer-events: none;
}
html body:not(#adv) :is(.rate-advance-trigger, .room-advance-trigger, .room-card-advance-trigger) b::before,
html body:not(#adv) .rate-advance-modal-body .rate-advance-db-offer strong::before,
html body:not(#adv) :is(.room-advance-tooltip, .room-advance-modal-body) .room-db-offer strong::before {
    content: '';
    position: absolute;
    top: -40%;
    bottom: -40%;
    left: -70%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent);
    transform: skewX(-20deg);
    animation: adv-shine 3.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes adv-shine {
    0%, 55% { left: -70%; }
    100% { left: 140%; }
}
html body:not(#adv) :is(.rate-advance-trigger, .room-advance-trigger, .room-card-advance-trigger)::after {
    right: 5px;
    top: 5px;
    background: var(--adv-hi);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--adv-hi) 30%, transparent);
    animation: adv-dot 1.8s ease-in-out infinite;
}
html body:not(#adv) :is(.rate-advance-trigger, .room-advance-trigger, .room-card-advance-trigger) svg { color: var(--adv-hi); }

/* Round badges on the room photo / sidebar */
html body:not(#adv) :is(.room-image-advance-offer, .room-sidebar-advance) {
    background: linear-gradient(135deg, var(--adv-p), var(--adv-p-deep));
    color: #fff;
    box-shadow: 0 4px 0 var(--adv-p-deep), 0 10px 20px color-mix(in srgb, var(--adv-p) 32%, transparent);
}
html body:not(#adv) :is(.room-image-advance-offer, .room-sidebar-advance):hover { background: var(--adv-p); color: #fff; }
html body:not(#adv) :is(.room-image-advance-offer strong, .room-sidebar-advance strong, .room-sidebar-advance b) { color: var(--adv-spot); text-shadow: 0 0 12px color-mix(in srgb, var(--adv-spot) 60%, transparent); }

@keyframes adv-glow {
    0%, 100% { box-shadow: 0 4px 0 var(--adv-p-deep), 0 10px 20px color-mix(in srgb, var(--adv-p) 28%, transparent); }
    50% { box-shadow: 0 4px 0 var(--adv-p-deep), 0 10px 26px color-mix(in srgb, var(--adv-p) 55%, transparent); }
}
@keyframes adv-spot {
    0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--adv-spot) 40%, transparent), 0 4px 12px color-mix(in srgb, var(--adv-spot) 45%, transparent); }
    50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--adv-spot) 20%, transparent), 0 4px 16px color-mix(in srgb, var(--adv-spot) 75%, transparent); }
}
@keyframes adv-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .55; } }

/* ---------- Hover notification ---------- */
html body:not(#adv) :is(.rate-advance-tooltip, .rate-advance-hover-popover, .room-advance-tooltip, .room-card-advance-tooltip) {
    padding: 0 14px 14px;
    border: 1px solid color-mix(in srgb, var(--adv-hi) 50%, transparent);
    border-radius: 22px 8px 22px 8px;
    background:
        radial-gradient(280px 130px at 100% 0, color-mix(in srgb, var(--adv-hi) 22%, transparent), transparent 70%),
        linear-gradient(160deg, var(--adv-p), var(--adv-p-deep));
    box-shadow: 0 24px 50px color-mix(in srgb, var(--adv-p-deep) 50%, transparent), inset 0 1px 0 rgba(255, 255, 255, .14);
    scrollbar-color: var(--adv-hi) transparent;
}
html body:not(#adv) :is(.rate-advance-tooltip, .rate-advance-hover-popover, .room-advance-tooltip, .room-card-advance-tooltip)::after {
    content: 'ADVANCE OFFER';
    position: absolute;
    left: 18px;
    top: 0;
    padding: 4px 11px 5px;
    border-radius: 0 0 9px 9px;
    background: var(--adv-hi);
    color: var(--adv-p-deep);
    font-family: inherit;
    font-size: 7px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .18em;
}
html body:not(#adv) :is(.rate-advance-tooltip, .rate-advance-hover-popover)::before {
    border-color: color-mix(in srgb, var(--adv-hi) 50%, transparent);
    background: var(--adv-p);
}
html body:not(#adv) :is(.rate-advance-tooltip, .rate-advance-hover-popover)::-webkit-scrollbar-thumb { background: var(--adv-hi); }
html body:not(#adv) .rate-advance-hover-popover .rate-advance-notification-discount { background: linear-gradient(135deg, #ffe08a, var(--adv-spot)); color: var(--adv-spot-ink) !important; font-weight: 900; box-shadow: 0 6px 16px color-mix(in srgb, var(--adv-spot) 50%, transparent); }

/* Date / eligibility card */
html body:not(#adv) :is(.rate-advance-tooltip, .rate-advance-hover-popover, .room-advance-tooltip, .room-card-advance-tooltip) :is(.rate-advance-eligible-date, .room-advance-date) {
    border: 1px dashed color-mix(in srgb, var(--adv-hi) 55%, transparent);
    border-left-width: 1px;
    border-radius: 14px 6px 14px 6px;
    background: rgba(255, 255, 255, .07);
}
html body:not(#adv) :is(.rate-advance-tooltip, .rate-advance-hover-popover, .room-advance-tooltip, .room-card-advance-tooltip) :is(.rate-advance-eligible-date, .room-advance-date)::before { background: var(--adv-hi); }
html body:not(#adv) :is(.rate-advance-tooltip, .rate-advance-hover-popover, .room-advance-tooltip, .room-card-advance-tooltip) :is(.rate-advance-eligible-date b, .room-advance-date b) { color: var(--adv-hi); }
html body:not(#adv) :is(.rate-advance-tooltip, .rate-advance-hover-popover, .room-advance-tooltip, .room-card-advance-tooltip) :is(strong, .rate-advance-service-head span) { color: var(--adv-hi); }
html body:not(#adv) :is(.rate-advance-tooltip, .rate-advance-hover-popover, .room-advance-tooltip, .room-card-advance-tooltip) .rate-advance-status::before { background: var(--adv-hi); }
html body:not(#adv) :is(.rate-advance-tooltip, .rate-advance-hover-popover, .room-advance-tooltip, .room-card-advance-tooltip) .rate-advance-status.is-eligible::before { background: var(--adv-ok); }

/* Cancellation / reminder notices follow the theme too */
html body:not(#adv) :is(.rate-advance-tooltip, .rate-advance-hover-popover) .rate-cancellation-notice.is-preview {
    border-color: color-mix(in srgb, var(--adv-hi) 55%, transparent);
    background: linear-gradient(110deg, color-mix(in srgb, var(--adv-hi) 24%, transparent), color-mix(in srgb, var(--adv-hi) 6%, transparent));
}
html body:not(#adv) :is(.rate-advance-tooltip, .rate-advance-hover-popover) .rate-cancellation-notice.is-preview::before { background: var(--adv-hi); }
html body:not(#adv) :is(.rate-advance-tooltip, .rate-advance-hover-popover) .rate-cancellation-notice.is-preview small { color: var(--adv-hi); }

/* Section dividers become a perforation line */
html body:not(#adv) .room-advance-tooltip .room-advance-section {
    border-top: 2px dashed rgba(255, 255, 255, .22);
}
html body:not(#adv) :is(.rate-advance-tooltip, .rate-advance-hover-popover, .room-advance-tooltip, .room-card-advance-tooltip) :is(.rate-advance-service, .rate-advance-db-offer) {
    border-color: color-mix(in srgb, var(--adv-hi) 35%, transparent);
}
html body:not(#adv) .rate-advance-db-offer { border-left-color: var(--adv-hi); }
html body:not(#adv) :is(.rate-advance-tooltip, .rate-advance-hover-popover) :is(.rate-payment-reminder b, .rate-payment-reminder small) { color: var(--adv-hi); }
html body:not(#adv) :is(.rate-advance-tooltip, .rate-advance-hover-popover) .rate-payment-reminder b { border-color: color-mix(in srgb, var(--adv-hi) 45%, transparent); background: color-mix(in srgb, var(--adv-hi) 16%, transparent); }

/* ---------- Details popup ---------- */
html body:not(#adv) :is(.rate-advance-modal, .room-advance-modal) {
    border: 1px solid color-mix(in srgb, var(--adv-a) 55%, #fff);
    border-radius: 16px 34px 16px 34px;
    background: var(--adv-tint);
    box-shadow: 0 40px 100px color-mix(in srgb, var(--adv-p-deep) 60%, transparent);
}
html body:not(#adv) :is(.rate-advance-modal, .room-advance-modal)::backdrop {
    background: color-mix(in srgb, var(--adv-p-deep) 70%, transparent);
    backdrop-filter: blur(6px);
}
html body:not(#adv) :is(.rate-advance-modal-head, .room-advance-modal-head) {
    position: relative;
    border-bottom: 0;
    padding: 20px 22px 22px;
    background:
        radial-gradient(360px 160px at 100% 0, color-mix(in srgb, var(--adv-hi) 26%, transparent), transparent 70%),
        linear-gradient(120deg, var(--adv-p), var(--adv-p-deep));
}
/* ticket perforation along the header's lower edge */
html body:not(#adv) :is(.rate-advance-modal-head, .room-advance-modal-head)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: repeating-linear-gradient(90deg, var(--adv-hi) 0 9px, transparent 9px 16px);
}
html body:not(#adv) :is(.rate-advance-modal-head svg) { color: var(--adv-hi); }
html body:not(#adv) :is(.rate-advance-modal-close, .room-advance-modal-close):hover {
    border-color: var(--adv-hi);
    background: var(--adv-hi);
    color: var(--adv-p-deep);
}
html body:not(#adv) :is(.rate-advance-modal-body, .room-advance-modal-body) { scrollbar-color: var(--adv-a) transparent; }

html body:not(#adv) :is(.rate-advance-modal-body, .room-advance-modal-body) :is(.rate-advance-eligible-date, .room-advance-date) {
    border: 1px solid color-mix(in srgb, var(--adv-a) 45%, #fff);
    border-left: 5px solid var(--adv-a);
    border-radius: 14px 6px 14px 6px;
    background: linear-gradient(110deg, color-mix(in srgb, var(--adv-hi) 34%, #fff), #fff 70%);
}
html body:not(#adv) :is(.rate-advance-modal-body, .room-advance-modal-body) :is(.rate-advance-eligible-date, .room-advance-date)::before { background: var(--adv-a); }
html body:not(#adv) :is(.rate-advance-modal-body, .room-advance-modal-body) :is(.rate-advance-eligible-date small, .room-advance-date small, .room-advance-section > small) { color: var(--adv-p); }
html body:not(#adv) :is(.rate-advance-modal-body, .room-advance-modal-body) :is(.rate-advance-eligible-date b, .room-advance-date b) { color: var(--adv-p-deep); }
html body:not(#adv) :is(.rate-advance-modal-body, .room-advance-modal-body) :is(.rate-modal-intro strong, .room-advance-section strong) { color: var(--adv-p-deep); }
html body:not(#adv) :is(.rate-advance-modal-body, .room-advance-modal-body) .rate-advance-status { border-color: color-mix(in srgb, var(--adv-p) 20%, #fff); background: var(--adv-tint); color: var(--adv-p-deep) !important; }

/* Popup (light surface): reminder, preview notice and offer chip in theme colors */
html body:not(#adv) .rate-advance-modal-body .rate-payment-reminder { border-top-color: color-mix(in srgb, var(--adv-p) 22%, #fff); }
html body:not(#adv) .rate-advance-modal-body .rate-payment-reminder small { color: var(--adv-p); }
html body:not(#adv) .rate-advance-modal-body .rate-payment-reminder b { border-color: color-mix(in srgb, var(--adv-a) 45%, #fff); background: color-mix(in srgb, var(--adv-hi) 30%, #fff); color: var(--adv-p-deep); }
html body:not(#adv) .rate-advance-modal-body .rate-payment-checkin { color: color-mix(in srgb, var(--adv-p) 62%, #fff); }
html body:not(#adv) .rate-advance-modal-body .rate-cancellation-notice.is-preview {
    border-color: color-mix(in srgb, var(--adv-a) 45%, #fff);
    background: linear-gradient(110deg, color-mix(in srgb, var(--adv-hi) 30%, #fff), #fff 70%);
}
html body:not(#adv) .rate-advance-modal-body .rate-cancellation-notice.is-preview::before { background: var(--adv-a); }
html body:not(#adv) .rate-advance-modal-body .rate-cancellation-notice.is-preview small { color: var(--adv-p); }
html body:not(#adv) .rate-advance-modal-body .rate-advance-db-offer { border-left-color: var(--adv-a); }
html body:not(#adv) .rate-advance-modal-body .rate-advance-service-head span { color: var(--adv-p); }

/* ---- Coupon treatment for the notification and the popup ---- */
/* Notification: an amber ticket header (sticks while the body scrolls), a dashed
   perforation under it and a half-circle notch cut out of both sides. */
html body:not(#adv) :is(.rate-advance-tooltip, .rate-advance-hover-popover, .room-advance-tooltip, .room-card-advance-tooltip) {
    -webkit-mask: radial-gradient(circle 8px at 0 34px, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 8px at 100% 34px, #0000 96%, #000) right / 51% 100% no-repeat;
    mask: radial-gradient(circle 8px at 0 34px, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 8px at 100% 34px, #0000 96%, #000) right / 51% 100% no-repeat;
}
html body:not(#adv) :is(.rate-advance-tooltip, .rate-advance-hover-popover, .room-advance-tooltip, .room-card-advance-tooltip)::before {
    content: 'ADVANCE OFFER';
    position: sticky;
    top: 0;
    right: auto;
    left: auto;
    z-index: 3;
    display: block;
    width: auto;
    height: 34px;
    margin: 0 -14px 14px;
    padding: 0 20px;
    border: 0;
    border-bottom: 2px dashed color-mix(in srgb, var(--adv-spot-ink) 42%, transparent);
    border-radius: 21px 7px 0 0;
    background: linear-gradient(135deg, #ffe08a, var(--adv-spot));
    color: var(--adv-spot-ink);
    font-family: inherit;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .24em;
    line-height: 34px;
    transform: none;
}
html body:not(#adv) :is(.rate-advance-tooltip, .rate-advance-hover-popover, .room-advance-tooltip, .room-card-advance-tooltip)::after { display: none; }

/* Popup: same notches where the header meets the body, and a dashed perforation line. */
html body:not(#adv) :is(.rate-advance-modal, .room-advance-modal) {
    -webkit-mask: radial-gradient(circle 11px at 0 84px, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 84px, #0000 96%, #000) right / 51% 100% no-repeat;
    mask: radial-gradient(circle 11px at 0 84px, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 84px, #0000 96%, #000) right / 51% 100% no-repeat;
}
html body:not(#adv) :is(.rate-advance-modal-head, .room-advance-modal-head) {
    box-sizing: border-box;
    height: 84px;
    padding-top: 0;
    padding-bottom: 0;
}
html body:not(#adv) :is(.rate-advance-modal-head, .room-advance-modal-head)::after {
    left: 22px;
    right: 22px;
    bottom: 0;
    height: 0;
    background: none;
    border-bottom: 2px dashed color-mix(in srgb, var(--adv-hi) 75%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    html body:not(#adv) :is(.rate-advance-trigger, .room-advance-trigger, .room-card-advance-trigger),
    html body:not(#adv) :is(.rate-advance-trigger, .room-advance-trigger, .room-card-advance-trigger)::after,
    html body:not(#adv) :is(.rate-advance-trigger, .room-advance-trigger, .room-card-advance-trigger) b::before,
    html body:not(#adv) .rate-advance-modal-body .rate-advance-db-offer strong::before,
html body:not(#adv) :is(.room-advance-tooltip, .room-advance-modal-body) .room-db-offer strong::before { animation: none; }
}

/* "With advance offer ₹x / night" shown under the room's starting price */
html body:not(#adv) .room-offer-night {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 8px;
    width: fit-content;
    max-width: 100%;
    margin-top: 6px;
    padding: 5px 11px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--adv-spot, #ffc83d) 30%, #fff);
    color: var(--color-primary-hover, var(--color-primary, #031F46));
    font-size: 11px;
    font-weight: 800;
}
html body:not(#adv) .room-offer-night > span:last-child { font-weight: 900; }

/* ---- Room page popup + notification: same layout language as the pricing page ---- */
html body:not(#adv) .room-advance-modal-head > div:first-child { position: relative; padding-left: 36px; }
html body:not(#adv) .room-advance-modal-head > div:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    background: var(--adv-hi);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z'/%3E%3Cpath d='m9 16 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z'/%3E%3Cpath d='m9 16 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body:not(#adv) .room-modal-intro { padding: 18px 20px 0; }
html body:not(#adv) .room-modal-intro strong { display: block; color: var(--adv-p-deep); font-size: 16px; }
html body:not(#adv) .room-modal-intro p { margin: 4px 0 0; color: #64748b; font-size: 10px; line-height: 1.5; }
html body:not(#adv) .room-advance-tooltip .room-modal-intro { display: none; }

html body:not(#adv) .room-advance-modal-body .room-cancellation-notice {
    border-color: color-mix(in srgb, var(--adv-a) 45%, #fff);
    background: linear-gradient(110deg, color-mix(in srgb, var(--adv-hi) 30%, #fff), #fff 70%);
}
html body:not(#adv) .room-advance-modal-body .room-cancellation-notice small { color: var(--adv-p); }
html body:not(#adv) .room-advance-modal-body .room-cancellation-notice strong { color: var(--adv-p-deep); }

html body:not(#adv) :is(.room-advance-tooltip, .room-advance-modal-body) .room-popup-services {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}
html body:not(#adv) :is(.room-advance-tooltip, .room-advance-modal-body) .room-popup-services > small { grid-column: 1 / -1; }
html body:not(#adv) :is(.room-advance-tooltip, .room-advance-modal-body) .room-offer-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #dce4ee;
    border-radius: 5px 12px 5px 12px;
    background: #fff;
    font-size: 9px;
    line-height: 1.4;
}
html body:not(#adv) .room-advance-modal-body .room-offer-item span { color: var(--adv-p-deep); font-weight: 800; }
html body:not(#adv) .room-advance-modal-body .room-offer-item b { flex: 0 0 auto; color: var(--adv-p); font-size: 8px; font-weight: 900; }
html body:not(#adv) .room-advance-tooltip .room-offer-item { border-color: color-mix(in srgb, var(--adv-hi) 35%, transparent); background: rgba(255, 255, 255, .06); }
html body:not(#adv) .room-advance-tooltip .room-offer-item span { color: #fff; font-weight: 700; }
html body:not(#adv) .room-advance-tooltip .room-offer-item b { flex: 0 0 auto; color: var(--adv-hi); font-size: 8px; font-weight: 900; }