.hotel-deactivation-reminder {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(100% - 32px, 1120px);
    margin: 14px auto;
    padding: 13px 16px;
    border: 1px solid #f1d08b;
    border-radius: 14px;
    background: linear-gradient(110deg, #fffaf0, #fff);
    color: #26384a;
    box-shadow: 0 8px 24px rgba(99, 72, 19, .08);
}
.hotel-deactivation-reminder.is-urgent {
    border-color: #efb8ae;
    background: linear-gradient(110deg, #fff5f2, #fff);
}
.hotel-deactivation-ring {
    position: relative;
    display: grid;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(#d59a24 0 var(--countdown-fill), #e5eaf0 var(--countdown-fill) 100%);
}
.is-urgent .hotel-deactivation-ring {
    background: conic-gradient(#c64e40 0 var(--countdown-fill), #f0e4e1 var(--countdown-fill) 100%);
}
.hotel-deactivation-ring::before {
    position: absolute;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    content: "";
}
.hotel-deactivation-ring span {
    position: relative;
    z-index: 1;
    color: #172b3d;
    font-size: 1rem;
    font-weight: 850;
    line-height: 1;
}
.hotel-deactivation-ring small { margin-left: 1px; font-size: .63rem; }
.hotel-deactivation-copy { display: grid; gap: 3px; min-width: 0; }
.hotel-deactivation-copy strong { color: #26384a; font-size: .9rem; }
.hotel-deactivation-copy span { color: #657487; font-size: .78rem; line-height: 1.45; }
.hotel-deactivation-dismiss {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    margin-left: auto;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #64748b;
}
.hotel-deactivation-dismiss:hover { background: rgba(21, 40, 58, .07); color: #172b3d; }
.hotel-deactivation-dismiss:focus-visible { outline: 3px solid rgba(23, 105, 194, .3); }
@media (max-width: 600px) {
    .hotel-deactivation-reminder { width: calc(100% - 24px); gap: 10px; margin: 10px auto; padding: 11px; }
    .hotel-deactivation-ring { width: 46px; height: 46px; flex-basis: 46px; }
    .hotel-deactivation-ring::before { width: 36px; height: 36px; }
    .hotel-deactivation-copy strong { font-size: .82rem; }
    .hotel-deactivation-copy span { font-size: .72rem; }
}