/* Hotel FOMO Notifications v6 — Advanced UI */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500&display=swap');

/* ── Popup shell ───────────────────────────────────────── */
.hotel-fomo-popup {
    position: fixed;
    z-index: 999999;
    max-width: 340px;
    width: calc(100vw - 32px);
    background: #ffffff;
    border-radius: 20px;
    box-shadow:
        0 4px 24px rgba(0,0,0,0.10),
        0 1px 4px rgba(0,0,0,0.06),
        0 0 0 0.5px rgba(0,0,0,0.06);
    overflow: hidden;
    font-family: 'DM Sans', sans-serif;
    transition:
        transform 0.48s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.32s ease;
}

/* Position */
.hotel-fomo-popup.pos-bottom-left  { bottom: 24px; left: 20px; }
.hotel-fomo-popup.pos-bottom-right { bottom: 24px; right: 20px; }

/* Hidden */
.hotel-fomo-hidden { opacity: 0; pointer-events: none; }
.hotel-fomo-popup.pos-bottom-left.hotel-fomo-hidden  { transform: translateX(-24px) scale(0.95); }
.hotel-fomo-popup.pos-bottom-right.hotel-fomo-hidden { transform: translateX(24px) scale(0.95); }

/* Visible */
.hotel-fomo-popup.hotel-fomo-visible { opacity: 1; transform: translateX(0) scale(1); }

/* ── Gold shimmer top bar ───────────────────────────────── */
.hotel-fomo-shimmer {
    height: 3px;
    background: linear-gradient(90deg, #c8a030 0%, #f5d060 45%, #c8a030 100%);
    background-size: 200% 100%;
    animation: hotelFomoShimmer 2s linear infinite;
}
@keyframes hotelFomoShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Main content row ──────────────────────────────────── */
.hotel-fomo-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px 14px 14px;
}

/* ── Avatar ────────────────────────────────────────────── */
.hotel-fomo-avatar-wrap { position: relative; flex-shrink: 0; }

.hotel-fomo-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.5px;
    animation: hotelFomoPulse 2.5s ease-out infinite;
}
@keyframes hotelFomoPulse {
    0%,70%,100% { box-shadow: 0 0 0 0   rgba(124,58,237,0); }
    35%          { box-shadow: 0 0 0 9px rgba(124,58,237,0.18); }
}

.hotel-fomo-avatar-check {
    position: absolute;
    bottom: -1px; right: -1px;
    width: 18px; height: 18px;
    background: #22c55e;
    border-radius: 50%;
    border: 2px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hotel-fomo-avatar-check svg { width: 9px; height: 9px; display: block; }

/* ── Text content ──────────────────────────────────────── */
.hotel-fomo-content { flex: 1; min-width: 0; }

.hotel-fomo-booking-label {
    font-size: 11px;
    font-weight: 600;
    color: #22c55e;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 3px;
}

.hotel-fomo-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    animation: hotelFomoBlink 1.5s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes hotelFomoBlink {
    0%,100% { opacity: 1; } 50% { opacity: 0.25; }
}

.hotel-fomo-name {
    font-family: 'Playfair Display', serif;
    font-size: 15px;
    font-weight: 500;
    color: #1a1a2e;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hotel-fomo-suite-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
}
.hotel-fomo-suite-row svg { color: #b8862a; flex-shrink: 0; opacity: 0.9; }

.hotel-fomo-service {
    font-size: 12.5px;
    font-weight: 700;
    color: #b8862a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Meta pills row ────────────────────────────────────── */
.hotel-fomo-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.hotel-fomo-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.4;
}
.hotel-fomo-pill svg { width: 9px; height: 9px; flex-shrink: 0; }

.hotel-fomo-pill-location {
    background: rgba(79,70,229,0.09);
    color: #4f46e5;
}
.hotel-fomo-pill-time {
    background: rgba(0,0,0,0.05);
    color: #888;
}


/* ── Close button ──────────────────────────────────────── */
.hotel-fomo-close {
    position: absolute;
    top: 10px; right: 12px;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.06);
    color: #999;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
    line-height: 1;
    padding: 0;
}
.hotel-fomo-close:hover { background: rgba(0,0,0,0.12); color: #555; }

/* ── Viewers bar ───────────────────────────────────────── */
.hotel-fomo-viewers {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(124,58,237,0.05);
    border-top: 0.5px solid rgba(124,58,237,0.12);
    padding: 7px 14px;
}

.hotel-fomo-mini-avatars { display: flex; }

.hotel-fomo-mini-av {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid #ffffff;
    margin-right: -5px;
    font-size: 8px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hotel-fomo-viewers-text {
    font-size: 11px;
    color: #7c3aed;
    font-weight: 600;
    margin-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Dark mode ─────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .hotel-fomo-popup {
        background: #1e1e2e;
        box-shadow: 0 4px 28px rgba(0,0,0,0.45), 0 0 0 0.5px rgba(255,255,255,0.07);
    }
    .hotel-fomo-name             { color: #f0f0ff; }
    .hotel-fomo-pill-time        { background: rgba(255,255,255,0.08); color: #aaa; }
    .hotel-fomo-pill-location    { background: rgba(99,102,241,0.18); color: #a5b4fc; }
    .hotel-fomo-viewers          { background: rgba(124,58,237,0.12); border-color: rgba(124,58,237,0.22); }
    .hotel-fomo-viewers-text     { color: #a5b4fc; }
    .hotel-fomo-close            { background: rgba(255,255,255,0.08); color: #666; }
    .hotel-fomo-close:hover      { background: rgba(255,255,255,0.14); color: #aaa; }
    .hotel-fomo-avatar-check,
    .hotel-fomo-mini-av          { border-color: #1e1e2e; }
}

/* ── Mobile ────────────────────────────────────────────── */
@media (max-width: 480px) {
    .hotel-fomo-popup {
        max-width: calc(100vw - 24px);
        bottom: 16px !important;
        left: 12px !important;
        right: auto !important;
    }
}