:root {
    --hms-ink: #132021;
    --hms-ink-2: #233334;
    --hms-muted: #6f7a78;
    --hms-primary: #0f3b3e;
    --hms-primary-2: #174f50;
    --hms-warm: #c9853f;
    --hms-warm-2: #e8b66f;
    --hms-warm-dark: #9d632b;
    --hms-cream: #fff7ed;
    --hms-soft: #f8efe3;
    --hms-line: rgba(201, 133, 63, .24);
    --hms-success: #0f766e;
    --hms-danger: #b42318;
    --hms-shadow: 0 28px 80px rgba(15, 59, 62, .18);
    --hms-shadow-soft: 0 18px 48px rgba(15, 59, 62, .12);
    --hms-radius: 1.55rem;
    --hms-radius-lg: 2rem;
}

html { scroll-behavior: smooth; }

body {
    color: var(--hms-ink);
    background:
        radial-gradient(circle at 8% 4%, rgba(232, 182, 111, .22), transparent 30rem),
        radial-gradient(circle at 98% 14%, rgba(15, 59, 62, .10), transparent 30rem),
        linear-gradient(180deg, #fffaf4 0%, #fff 42%, #fffaf3 100%);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--hms-warm-dark); }
a:hover { color: var(--hms-warm); }

::selection { background: rgba(201, 133, 63, .25); }

.hms-top-strip {
    position: relative;
    z-index: 1041;
    background: linear-gradient(90deg, #0e2e31, #174f50 52%, #7a4b22);
    color: rgba(255,255,255,.78);
    font-size: .82rem;
    letter-spacing: .01em;
}
.hms-top-strip a { color: #fff; text-decoration: none; }
.hms-top-strip .hms-top-dot {
    width: .35rem;
    height: .35rem;
    border-radius: 99px;
    display: inline-block;
    background: var(--hms-warm-2);
    box-shadow: 0 0 0 .22rem rgba(232,182,111,.16);
}

.hms-navbar {
    min-height: 78px;
    border-bottom: 1px solid rgba(255,255,255,.42);
    backdrop-filter: blur(22px);
    background: rgba(255,255,255,.88) !important;
    box-shadow: 0 14px 44px rgba(15,59,62,.08);
}
.hms-navbar-container { min-height: 78px; }
.hms-navbar-brand { min-width: 0; }
.hms-brand-logo,
.hms-brand-mark { flex: 0 0 auto; }
.hms-brand-logo {
    height: 46px;
    width: auto;
    max-width: 172px;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(15,59,62,.13));
}
.hms-brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 17px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,0)),
        linear-gradient(135deg, var(--hms-primary), var(--hms-warm));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    box-shadow: 0 13px 28px rgba(15,59,62,.20);
}
.hms-brand-text {
    color: #0f2021;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -.02em;
}
.hms-navbar .nav-link {
    border-radius: 999px;
    color: rgba(19, 32, 33, .76);
    font-weight: 700;
    padding: .6rem .9rem;
    transition: all .18s ease;
}
.hms-navbar .nav-link:hover,
.hms-navbar .nav-link.active {
    background: linear-gradient(135deg, rgba(201,133,63,.14), rgba(15,59,62,.08));
    color: var(--hms-primary) !important;
}
.dropdown-menu {
    border: 1px solid rgba(201,133,63,.16) !important;
    box-shadow: 0 22px 60px rgba(15,59,62,.15) !important;
}

.btn {
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
    font-weight: 700;
}
.btn-primary,
.btn-success {
    border: 0 !important;
    background:
        linear-gradient(135deg, #f0bd75 0%, #c9853f 42%, #85511f 100%) !important;
    box-shadow: 0 14px 32px rgba(201,133,63,.28), inset 0 1px 0 rgba(255,255,255,.28);
    color: #fff !important;
}
.btn-primary:hover,
.btn-success:hover {
    filter: brightness(1.03) saturate(1.05);
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(201,133,63,.34), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-outline-primary {
    border-color: rgba(201,133,63,.55);
    color: var(--hms-warm-dark);
    background: rgba(255,255,255,.68);
}
.btn-outline-primary:hover {
    background: var(--hms-primary);
    border-color: var(--hms-primary);
    color: #fff;
    transform: translateY(-1px);
}
.btn-outline-secondary {
    border-color: rgba(15,59,62,.18);
    color: var(--hms-primary);
}
.hms-booking-nav.active {
    box-shadow: 0 0 0 .2rem rgba(201,133,63,.16), 0 14px 28px rgba(201,133,63,.24);
}
.text-primary { color: var(--hms-warm-dark) !important; }
.bg-primary,
.text-bg-primary { background-color: var(--hms-warm) !important; }

.hms-page-section { padding: 5.5rem 0; }
.hms-kicker {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 900;
    font-size: .74rem;
    color: var(--hms-warm-dark);
}
.hms-kicker:before {
    content: "";
    width: 1.75rem;
    height: 1px;
    background: currentColor;
    opacity: .72;
}

.hms-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background-image:
        linear-gradient(105deg, rgba(9,31,33,.93) 0%, rgba(15,59,62,.78) 42%, rgba(9,31,33,.28) 100%),
        var(--hms-hero-photo),
        radial-gradient(circle at 20% 15%, rgba(232,182,111,.35), transparent 26rem),
        linear-gradient(135deg, #0f3b3e, #24170c);
    background-size: cover, cover, auto, auto;
    background-position: center, center, center, center;
    min-height: 650px;
}
.hms-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.026) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.8), transparent 78%);
    pointer-events: none;
}
.hms-hero:after {
    content: "";
    position: absolute;
    right: -12rem;
    bottom: -14rem;
    width: 35rem;
    height: 35rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,182,111,.28), transparent 62%);
    filter: blur(8px);
}
.hms-hero-panel { position: relative; z-index: 2; }
.hms-hero h1 {
    letter-spacing: -.055em;
    line-height: .98;
    text-wrap: balance;
    text-shadow: 0 18px 55px rgba(0,0,0,.33);
}
.hms-hero .lead { max-width: 620px; }
.hms-hero-photo-frame {
    position: relative;
    min-height: 520px;
    border-radius: 2.4rem;
    border: 1px solid rgba(255,255,255,.24);
    overflow: hidden;
    box-shadow: 0 40px 110px rgba(0,0,0,.34);
    background: rgba(255,255,255,.10);
}
.hms-hero-photo-frame img {
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
    transform: scale(1.02);
}
.hms-hero-photo-frame:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(7,24,26,.58) 100%);
}
.hms-floating-badge {
    position: absolute;
    left: 1.2rem;
    bottom: 1.2rem;
    z-index: 2;
    padding: .9rem 1rem;
    border-radius: 1.25rem;
    background: rgba(255,255,255,.92);
    color: var(--hms-ink);
    box-shadow: 0 18px 44px rgba(0,0,0,.22);
    backdrop-filter: blur(12px);
}
.hms-hero-image { min-height: 520px; object-fit: cover; opacity: .95; }

.hms-search-card,
.hms-glass-card {
    border: 1px solid rgba(255,255,255,.45);
    border-radius: var(--hms-radius-lg);
    box-shadow: var(--hms-shadow);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(18px);
}
.hms-search-card .form-control,
.hms-search-card .form-select,
.hms-card .form-control,
.hms-card .form-select {
    border-radius: 1rem;
    border-color: rgba(15,59,62,.13);
    background-color: rgba(255,255,255,.92);
}
.hms-search-card .form-control:focus,
.hms-search-card .form-select:focus,
.hms-card .form-control:focus,
.hms-card .form-select:focus {
    border-color: rgba(201,133,63,.65);
    box-shadow: 0 0 0 .22rem rgba(201,133,63,.14);
}
.form-label { font-weight: 700; color: rgba(19,32,33,.78); }

.hms-card {
    border: 1px solid rgba(201, 133, 63, .18);
    border-radius: var(--hms-radius);
    box-shadow: var(--hms-shadow-soft);
    overflow: hidden;
    background: rgba(255,255,255,.94);
}
.hms-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.hms-card-hover:hover {
    transform: translateY(-7px);
    box-shadow: var(--hms-shadow);
    border-color: rgba(201,133,63,.38);
}
.hms-card-hover img { transition: transform .4s ease, filter .4s ease; }
.hms-card-hover:hover img { transform: scale(1.035); filter: saturate(1.06) contrast(1.02); }
.hms-img-cover { width: 100%; height: 100%; object-fit: cover; }
.hms-room-img { height: 292px; object-fit: cover; }
.hms-room-list-img { min-height: 286px; object-fit: cover; }
.hms-image-shell { position: relative; overflow: hidden; border-radius: var(--hms-radius); }
.hms-image-shell:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(9,31,33,.48));
    pointer-events: none;
}

.hms-soft-bg { background: var(--hms-cream); }
main > section.hms-soft-bg.py-5.border-bottom {
    position: relative;
    overflow: hidden;
    color: #fff;
    background-image:
        linear-gradient(115deg, rgba(9,31,33,.94) 0%, rgba(15,59,62,.84) 48%, rgba(137,80,29,.66) 100%),
        var(--hms-page-photo),
        radial-gradient(circle at 10% 10%, rgba(232,182,111,.32), transparent 28rem),
        linear-gradient(135deg, #0f3b3e, #25170b) !important;
    background-size: cover, cover, auto, auto !important;
    background-position: center, center, center, center !important;
    border-bottom: 0 !important;
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}
main > section.hms-soft-bg.py-5.border-bottom:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 82% 12%, rgba(255,255,255,.13), transparent 18rem),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: auto, 76px 76px, 76px 76px;
    opacity: .8;
    pointer-events: none;
}
main > section.hms-soft-bg.py-5.border-bottom > .container { position: relative; z-index: 1; }
main > section.hms-soft-bg.py-5.border-bottom .hms-kicker { color: rgba(232,182,111,.96); margin-bottom: .35rem; }
main > section.hms-soft-bg.py-5.border-bottom h1 {
    color: #fff;
    letter-spacing: -.045em;
    line-height: 1.02;
    text-shadow: 0 18px 55px rgba(0,0,0,.26);
}
main > section.hms-soft-bg.py-5.border-bottom .lead,
main > section.hms-soft-bg.py-5.border-bottom .text-muted {
    color: rgba(255,255,255,.74) !important;
    max-width: 780px;
}
main > section.hms-soft-bg.py-5.border-bottom .breadcrumb a { color: rgba(255,255,255,.78); }
main > section.hms-soft-bg.py-5.border-bottom .breadcrumb .active { color: rgba(255,255,255,.62); }
main > section.hms-soft-bg.py-5.border-bottom .hms-card {
    color: var(--hms-ink);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(18px);
}
main > section.hms-soft-bg.py-5.border-bottom .btn-outline-primary {
    color: #fff;
    border-color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.10);
}
main > section.hms-soft-bg.py-5.border-bottom .btn-outline-primary:hover {
    background: #fff;
    border-color: #fff;
    color: var(--hms-primary);
}

.hms-soft-tile {
    border: 1px solid rgba(201,133,63,.19);
    border-radius: 1.2rem;
    background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,250,244,.90));
    padding: 1.05rem;
}
.hms-icon-pill,
.hms-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .58rem .85rem;
    border: 1px solid rgba(201,133,63,.20);
    border-radius: 999px;
    background: rgba(255,255,255,.86);
    color: var(--hms-ink);
    font-size: .9rem;
    box-shadow: 0 8px 22px rgba(15,59,62,.05);
}
.hms-hero .hms-trust-pill {
    background: rgba(255,255,255,.13) !important;
    border-color: rgba(255,255,255,.25) !important;
    backdrop-filter: blur(10px);
}
.hms-status-step {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(232,182,111,.24), rgba(15,59,62,.10));
    color: var(--hms-warm-dark);
    font-weight: 900;
}
.hms-price { color: var(--hms-warm-dark); letter-spacing: -.03em; }
.hms-sticky { position: sticky; top: 102px; }
.hms-divider { border-color: rgba(201,133,63,.24); opacity: 1; }
.hms-auth-shell {
    min-height: 74vh;
    display: flex;
    align-items: center;
}
.hms-auth-shell.hms-soft-bg {
    background:
        linear-gradient(115deg, rgba(9,31,33,.93), rgba(15,59,62,.76), rgba(137,80,29,.54)),
        radial-gradient(circle at 18% 18%, rgba(232,182,111,.30), transparent 28rem) !important;
}
.hms-table-card .table > :not(caption) > * > * { padding: 1rem; }
.hms-empty {
    border: 1px dashed rgba(201,133,63,.32);
    border-radius: var(--hms-radius);
    background: rgba(255,250,246,.82);
}
.hms-feature-stat {
    border-left: 1px solid rgba(255,255,255,.22);
    padding-left: 1rem;
}
.hms-feature-stat strong { display: block; color: #fff; font-size: 1.35rem; line-height: 1; }
.hms-feature-stat span { color: rgba(255,255,255,.70); font-size: .86rem; }
.hms-section-label-card {
    background: linear-gradient(135deg, #0f3b3e, #1c5759);
    color: #fff;
    border-radius: var(--hms-radius-lg);
    box-shadow: var(--hms-shadow);
}
.hms-section-label-card .hms-kicker { color: var(--hms-warm-2); }
.hms-gallery-mosaic img,
.hms-mosaic-img {
    border-radius: 1.25rem;
    object-fit: cover;
    box-shadow: 0 18px 42px rgba(15,59,62,.18);
}
.hms-room-badge-overlay {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    background: rgba(255,255,255,.90) !important;
    color: var(--hms-primary) !important;
    backdrop-filter: blur(10px);
}
.hms-final-cta {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 10% 12%, rgba(232,182,111,.28), transparent 25rem),
        linear-gradient(135deg, #0f3b3e, #3f2c19 75%);
}
.hms-final-cta:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 78px 78px;
    pointer-events: none;
}
.hms-final-cta > * { position: relative; z-index: 1; }

.hms-footer {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 0%, rgba(232,182,111,.18), transparent 22rem),
        linear-gradient(135deg, #0b2325, #121b1c 52%, #382414);
    color: rgba(255,255,255,.76);
}
.hms-footer:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.026) 1px, transparent 1px);
    background-size: 72px 72px;
    opacity: .8;
}
.hms-footer .container { position: relative; z-index: 1; }
.hms-footer a { color: rgba(255,255,255,.9); text-decoration: none; }
.hms-footer a:hover { color: #fff; }
.hms-print-safe-note { font-size: .875rem; color: var(--hms-muted); }
.hms-flash-container { margin-top: 1rem; margin-bottom: 0; }
.alert { border-radius: 1.15rem !important; }

/* Public-facing pages should not show the CodeIgniter debug toolbar icon.
   Correct production fix: set CI_ENVIRONMENT=production. This CSS is only a UI fallback for local/public preview. */
#toolbarContainer,
#debug-icon,
.ci-toolbar,
.ci-debugbar,
.debug-toolbar,
.debug-bar {
    display: none !important;
    visibility: hidden !important;
}

@media (max-width: 991.98px) {
    .hms-top-strip { display: none; }
    .hms-navbar { min-height: 68px; }
    .hms-navbar-container { min-height: 68px; }
    .hms-navbar .navbar-collapse {
        border-top: 1px solid rgba(201, 133, 63, .18);
        margin-top: .85rem;
        padding-top: .85rem;
        background: rgba(255,255,255,.92);
        border-radius: 1.15rem;
        padding: .85rem;
    }
    .hms-navbar .nav-link,
    .hms-booking-nav { width: 100%; text-align: left; }
    .hms-hero { min-height: auto; }
    .hms-hero-photo-frame { min-height: 320px; }
    .hms-hero-photo-frame img { min-height: 320px; }
    .hms-hero-image { min-height: 320px; }
    .hms-sticky { position: static; }
    .hms-page-section { padding: 3.75rem 0; }
    main > section.hms-soft-bg.py-5.border-bottom {
        padding-top: 3.6rem !important;
        padding-bottom: 3.6rem !important;
    }
}
@media (max-width: 575.98px) {
    .hms-brand-text { max-width: 175px; font-size: 1rem; }
    .hms-brand-logo,
    .hms-brand-mark { height: 40px; }
    .hms-brand-mark { width: 40px; border-radius: 14px; }
    .hms-room-list-img,
    .hms-room-img { height: 230px; min-height: 230px; }
    .display-4,
    .display-5 { font-size: 2.35rem; }
    .hms-hero h1 { font-size: 2.55rem; }
    .hms-search-card,
    .hms-glass-card { border-radius: 1.35rem; }
}
.min-vh-75 { min-height: 75vh; }

/* Hotfix: homepage hero image proportion
   Keeps the premium look, but prevents the hero photo from becoming too tall/oversized. */
.hms-hero {
    min-height: auto;
}

.hms-hero > .container {
    padding-top: clamp(3rem, 4.5vw, 5.25rem) !important;
    padding-bottom: clamp(3rem, 4.5vw, 5.25rem) !important;
}

.hms-hero .row {
    align-items: center !important;
}

.hms-hero h1 {
    font-size: clamp(2.85rem, 5.1vw, 5.25rem);
}

.hms-hero .lead {
    font-size: clamp(1rem, 1.25vw, 1.22rem);
}

.hms-hero .hms-search-card {
    max-width: 600px;
    margin-left: auto;
}

.hms-hero-photo-frame {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9.5;
    max-height: 390px;
    border-radius: 1.75rem;
    margin-top: 1.35rem !important;
}

.hms-hero-photo-frame img {
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    object-fit: cover;
    object-position: center center;
    transform: none;
}

.hms-hero-photo-frame:after {
    background: linear-gradient(180deg, rgba(7,24,26,0) 45%, rgba(7,24,26,.46) 100%);
}

.hms-floating-badge {
    max-width: min(86%, 360px);
}

@media (min-width: 992px) {
    .hms-hero .col-lg-6:last-child {
        max-width: 610px;
        margin-left: auto;
    }
}

@media (min-width: 1400px) {
    .hms-hero-photo-frame {
        max-height: 410px;
    }
}

@media (max-width: 1199.98px) {
    .hms-hero h1 {
        font-size: clamp(2.7rem, 5.3vw, 4.45rem);
    }
    .hms-hero-photo-frame {
        max-height: 340px;
    }
}

@media (max-width: 991.98px) {
    .hms-hero > .container {
        padding-top: 3rem !important;
        padding-bottom: 3.25rem !important;
    }
    .hms-hero .hms-search-card {
        max-width: none;
        margin-left: 0;
    }
}

/* Public-facing pages should not show the CodeIgniter debug toolbar icon.
   Correct production fix: set CI_ENVIRONMENT=production. This CSS is only a UI fallback for local/public preview. */
#toolbarContainer,
#debug-icon,
.ci-toolbar,
.ci-debugbar,
.debug-toolbar,
.debug-bar {
    display: none !important;
    visibility: hidden !important;
}


/* Hotfix: stronger homepage contrast + logo-only header
   Purpose: make texts inside the booking/search card and hero trust items readable,
   and hide duplicate hotel name when a logo is already configured. */
.hms-brand-logo-only {
    max-width: 220px;
    height: 50px;
}
.hms-navbar-brand:has(.hms-brand-logo-only) {
    gap: 0 !important;
}
.hms-hero .hms-search-card,
.hms-hero .hms-glass-card {
    color: var(--hms-ink) !important;
}
.hms-hero .hms-search-card .hms-kicker {
    color: var(--hms-warm-dark) !important;
}
.hms-hero .hms-search-card h1,
.hms-hero .hms-search-card h2,
.hms-hero .hms-search-card h3,
.hms-hero .hms-search-card .h1,
.hms-hero .hms-search-card .h2,
.hms-hero .hms-search-card .h3 {
    color: var(--hms-ink) !important;
    text-shadow: none !important;
}
.hms-hero .hms-search-card p,
.hms-hero .hms-search-card .text-muted {
    color: #5d6967 !important;
}
.hms-hero .hms-search-card label,
.hms-hero .hms-search-card .form-label {
    color: #1d302f !important;
    opacity: 1 !important;
    text-shadow: none !important;
}
.hms-hero .hms-search-card .form-control,
.hms-hero .hms-search-card .form-select {
    color: #122021 !important;
    background-color: #fff !important;
}
.hms-hero .hms-search-card .form-control::placeholder {
    color: #89928f !important;
}
.hms-hero .hms-search-card .btn-primary {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.20);
}
.hms-hero .hms-trust-pill.text-white,
.hms-hero .hms-trust-pill {
    background: rgba(255,255,255,.94) !important;
    border-color: rgba(255,255,255,.72) !important;
    color: #122021 !important;
    text-shadow: none !important;
}
.hms-feature-stat {
    border-left-color: rgba(232,182,111,.50) !important;
    background: rgba(6, 26, 28, .34);
    border-radius: 1rem;
    padding: .95rem 1rem;
    backdrop-filter: blur(10px);
}
.hms-feature-stat strong {
    color: #fff8ec !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.28);
}
.hms-feature-stat span {
    color: rgba(255,248,236,.88) !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.22);
}
@media (max-width: 575.98px) {
    .hms-brand-logo-only {
        max-width: 170px;
        height: 44px;
    }
}

/* Hotfix: footer CTA contrast
   The generic .hms-footer a color rule made .btn-light text appear white on a light button.
   These rules keep footer links white, but make footer buttons readable. */
.hms-footer .btn,
.hms-footer a.btn {
    text-decoration: none !important;
    opacity: 1 !important;
}
.hms-footer .btn-light,
.hms-footer a.btn-light {
    background: linear-gradient(135deg, #f7e5c9 0%, #e6bd7d 100%) !important;
    border: 1px solid rgba(247,229,201,.92) !important;
    color: #122021 !important;
    text-shadow: none !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.38) !important;
}
.hms-footer .btn-light:hover,
.hms-footer a.btn-light:hover,
.hms-footer .btn-light:focus,
.hms-footer a.btn-light:focus {
    background: linear-gradient(135deg, #f3d29d 0%, #bd7b35 100%) !important;
    border-color: rgba(243,210,157,.95) !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.24) !important;
}
.hms-footer .btn-outline-light,
.hms-footer a.btn-outline-light {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.78) !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.28) !important;
}
.hms-footer .btn-outline-light:hover,
.hms-footer a.btn-outline-light:hover,
.hms-footer .btn-outline-light:focus,
.hms-footer a.btn-outline-light:focus {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #122021 !important;
    text-shadow: none !important;
}

/* Hotfix: auth/guest account hero contrast
   Purpose: texts on dark premium auth background must stay readable. */
.hms-auth-shell > .container > .row > [class*="col-"]:first-child,
.hms-auth-shell > .container > .row > [class*="col-"]:first-child h1,
.hms-auth-shell > .container > .row > [class*="col-"]:first-child h2,
.hms-auth-shell > .container > .row > [class*="col-"]:first-child h3 {
    color: #fff8ec !important;
    text-shadow: 0 3px 20px rgba(0,0,0,.28) !important;
}
.hms-auth-shell > .container > .row > [class*="col-"]:first-child .hms-kicker {
    color: #f3d29d !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.30) !important;
}
.hms-auth-shell > .container > .row > [class*="col-"]:first-child p,
.hms-auth-shell > .container > .row > [class*="col-"]:first-child .lead,
.hms-auth-shell > .container > .row > [class*="col-"]:first-child .text-muted {
    color: rgba(255,248,236,.86) !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.22) !important;
}
.hms-auth-shell > .container > .row > [class*="col-"]:first-child .hms-soft-tile {
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(255,255,255,.60) !important;
    box-shadow: 0 16px 36px rgba(0,0,0,.18) !important;
    color: #122021 !important;
    text-shadow: none !important;
}
.hms-auth-shell > .container > .row > [class*="col-"]:first-child .hms-soft-tile strong {
    color: #122021 !important;
    text-shadow: none !important;
}
.hms-auth-shell > .container > .row > [class*="col-"]:first-child .hms-soft-tile span,
.hms-auth-shell > .container > .row > [class*="col-"]:first-child .hms-soft-tile .text-muted {
    color: #586562 !important;
    text-shadow: none !important;
}

/* Hotfix: consistent page header contrast
   Some public page headers (for example /booking/selection) can render white text
   on a light warm background when the image overlay rule is not applied by cache/order.
   This forces non-home page headers to use a readable premium dark gradient. */
section.hms-soft-bg.py-5.border-bottom,
main section.hms-soft-bg.py-5.border-bottom {
    position: relative !important;
    overflow: hidden !important;
    color: #fff8ec !important;
    background:
        radial-gradient(circle at 82% 10%, rgba(232, 182, 111, .18), transparent 22rem),
        linear-gradient(115deg, rgba(9,31,33,.98) 0%, rgba(15,59,62,.94) 50%, rgba(80,50,25,.92) 100%) !important;
    border-bottom: 0 !important;
    padding-top: 4.85rem !important;
    padding-bottom: 4.85rem !important;
}
section.hms-soft-bg.py-5.border-bottom::before,
main section.hms-soft-bg.py-5.border-bottom::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 72px 72px;
    opacity: .55;
    pointer-events: none;
}
section.hms-soft-bg.py-5.border-bottom > .container,
main section.hms-soft-bg.py-5.border-bottom > .container {
    position: relative;
    z-index: 1;
}
section.hms-soft-bg.py-5.border-bottom .hms-kicker,
main section.hms-soft-bg.py-5.border-bottom .hms-kicker {
    color: #f3d29d !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.22) !important;
}
section.hms-soft-bg.py-5.border-bottom h1,
section.hms-soft-bg.py-5.border-bottom h2,
main section.hms-soft-bg.py-5.border-bottom h1,
main section.hms-soft-bg.py-5.border-bottom h2 {
    color: #fff8ec !important;
    text-shadow: 0 8px 28px rgba(0,0,0,.34) !important;
}
section.hms-soft-bg.py-5.border-bottom p,
section.hms-soft-bg.py-5.border-bottom .lead,
section.hms-soft-bg.py-5.border-bottom .text-muted,
main section.hms-soft-bg.py-5.border-bottom p,
main section.hms-soft-bg.py-5.border-bottom .lead,
main section.hms-soft-bg.py-5.border-bottom .text-muted {
    color: rgba(255,248,236,.84) !important;
    text-shadow: 0 3px 18px rgba(0,0,0,.22) !important;
}
section.hms-soft-bg.py-5.border-bottom .btn-outline-primary,
main section.hms-soft-bg.py-5.border-bottom .btn-outline-primary {
    color: #fff8ec !important;
    border-color: rgba(255,248,236,.70) !important;
    background: rgba(255,255,255,.08) !important;
}
section.hms-soft-bg.py-5.border-bottom .btn-outline-primary:hover,
main section.hms-soft-bg.py-5.border-bottom .btn-outline-primary:hover {
    color: #122021 !important;
    border-color: #fff8ec !important;
    background: #fff8ec !important;
}

/* Hotfix: facility image sizing
   Facility CMS sometimes contains icon-style images instead of real room/facility photos.
   This keeps real photos landscape and prevents square icons from becoming huge. */
.hms-facility-media {
    height: clamp(170px, 18vw, 220px);
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 45%, rgba(232,182,111,.16), transparent 16rem),
        linear-gradient(135deg, #fffaf4, #f2e5d4);
}
.hms-facility-media::after {
    background: linear-gradient(180deg, transparent 58%, rgba(9,31,33,.18));
}
.hms-facility-img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.hms-facility-img-contain {
    width: min(42%, 132px);
    height: min(42%, 132px);
    max-width: 132px;
    max-height: 132px;
    object-fit: contain;
    object-position: center center;
    filter: drop-shadow(0 16px 28px rgba(15,59,62,.20));
    transform: none !important;
}
.hms-card-hover:hover .hms-facility-img-contain {
    transform: translateY(-2px) scale(1.03) !important;
    filter: drop-shadow(0 18px 32px rgba(15,59,62,.22));
}
@media (max-width: 575.98px) {
    .hms-facility-media { height: 180px; }
    .hms-facility-img-contain {
        width: 118px;
        height: 118px;
    }
}

/* Hotfix: facilities page image display
   The facilities public page may receive icon-style images from CMS. Icons should not be
   rendered as full-width facility photos, while real landscape photos should remain photo-driven. */
.hms-page-facilities .card,
body.hms-page-facilities .card {
    overflow: hidden;
    border: 1px solid rgba(180,126,61,.18) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 34px rgba(15, 31, 33, .07) !important;
}
.hms-page-facilities .card > img,
.hms-page-facilities .card-img-top,
body.hms-page-facilities .card > img,
body.hms-page-facilities .card-img-top {
    width: 100% !important;
    height: clamp(175px, 18vw, 235px) !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, #fffaf4, #f2e5d4) !important;
}
.hms-page-facilities .card > img.hms-facility-icon-img,
.hms-page-facilities .card-img-top.hms-facility-icon-img,
body.hms-page-facilities .card > img.hms-facility-icon-img,
body.hms-page-facilities .card-img-top.hms-facility-icon-img {
    width: 118px !important;
    height: 118px !important;
    max-width: 118px !important;
    max-height: 118px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 1.75rem auto .85rem !important;
    padding: 16px !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 50% 42%, rgba(232,182,111,.22), transparent 5rem),
        linear-gradient(135deg, #fffaf4, #f3e8d7) !important;
    box-shadow: inset 0 0 0 1px rgba(180,126,61,.18), 0 16px 28px rgba(15,59,62,.10) !important;
    filter: none !important;
}
.hms-page-facilities .card-body,
body.hms-page-facilities .card-body {
    padding: 1.25rem 1.35rem 1.45rem !important;
}
.hms-page-facilities .card-title,
body.hms-page-facilities .card-title {
    color: #122021 !important;
    font-weight: 800 !important;
}
.hms-page-facilities .card-text,
body.hms-page-facilities .card-text {
    color: #586562 !important;
    line-height: 1.72 !important;
}
@media (max-width: 575.98px) {
    .hms-page-facilities .card > img,
    .hms-page-facilities .card-img-top,
    body.hms-page-facilities .card > img,
    body.hms-page-facilities .card-img-top {
        height: 190px !important;
    }
    .hms-page-facilities .card > img.hms-facility-icon-img,
    .hms-page-facilities .card-img-top.hms-facility-icon-img,
    body.hms-page-facilities .card > img.hms-facility-icon-img,
    body.hms-page-facilities .card-img-top.hms-facility-icon-img {
        width: 104px !important;
        height: 104px !important;
        max-width: 104px !important;
        max-height: 104px !important;
    }
}


/* Conversion UX hotfix: booking progress, friendly status labels, WhatsApp CTA, mobile polish */
.hms-progress-wrap {
    position: relative;
    z-index: 2;
    padding: 1rem 0;
}

.hms-booking-progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.hms-progress-step {
    position: relative;
    min-width: 0;
}

.hms-progress-step::after {
    content: '';
    position: absolute;
    top: 1.15rem;
    left: calc(100% - .25rem);
    width: calc(.75rem + .5rem);
    height: 2px;
    background: rgba(26, 48, 46, .16);
}

.hms-progress-step:last-child::after {
    display: none;
}

.hms-progress-step,
.hms-progress-step-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--hms-text);
    text-decoration: none;
}

.hms-progress-number {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    border: 1px solid rgba(26, 48, 46, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.25rem;
    background: #fff;
    font-weight: 800;
    color: var(--hms-muted);
}

.hms-progress-text {
    display: grid;
    line-height: 1.2;
    min-width: 0;
}

.hms-progress-text strong {
    font-size: .95rem;
    white-space: nowrap;
}

.hms-progress-text small {
    color: var(--hms-muted);
    font-size: .78rem;
}

.hms-progress-step.is-complete .hms-progress-number {
    background: rgba(24, 102, 79, .12);
    border-color: rgba(24, 102, 79, .25);
    color: #18664f;
}

.hms-progress-step.is-complete .hms-progress-number::before {
    content: '✓';
    font-size: .95rem;
}

.hms-progress-step.is-complete .hms-progress-number {
    font-size: 0;
}

.hms-progress-step.is-active .hms-progress-number {
    background: linear-gradient(135deg, var(--hms-gold), var(--hms-gold-dark));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(184, 135, 75, .28);
}

.hms-progress-step.is-active .hms-progress-text strong {
    color: var(--hms-emerald);
}

.hms-status-badge {
    padding: .48rem .7rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.hms-floating-whatsapp {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .75rem 1rem;
    border-radius: 999px;
    background: #1f9d55;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    box-shadow: 0 18px 42px rgba(18, 82, 52, .34);
    border: 1px solid rgba(255,255,255,.35);
}

.hms-floating-whatsapp:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 22px 48px rgba(18, 82, 52, .42);
}

.hms-wa-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    letter-spacing: -.02em;
}

.hms-wa-text {
    white-space: nowrap;
}

.hms-card form .form-label,
.hms-search-card .form-label {
    color: var(--hms-text);
    font-weight: 700;
}

.hms-card .table td,
.hms-card .table th {
    vertical-align: middle;
}

@media (max-width: 991.98px) {
    .hms-booking-progress {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .hms-progress-step::after {
        display: none;
    }
    .hms-progress-wrap {
        padding: .85rem 0;
    }
}

@media (max-width: 575.98px) {
    .hms-booking-progress {
        grid-template-columns: 1fr;
        gap: .5rem;
    }
    .hms-progress-step,
    .hms-progress-step-link {
        padding: .65rem .75rem;
        background: #fff;
        border: 1px solid rgba(26, 48, 46, .1);
        border-radius: 1rem;
    }
    .hms-progress-number {
        width: 2rem;
        height: 2rem;
        flex-basis: 2rem;
    }
    .hms-floating-whatsapp {
        right: .875rem;
        bottom: .875rem;
        padding: .65rem .75rem;
    }
    .hms-wa-text {
        display: none;
    }
    .hms-table-card table {
        min-width: 760px;
    }
}

/* Hotfix: booking progress active number contrast
   Some CSS variables were renamed in earlier premium visual patches. If --hms-gold,
   --hms-gold-dark, --hms-emerald, or --hms-text are missing, the active progress
   background can become invalid, leaving a white number on a white circle. */
:root {
    --hms-gold: var(--hms-warm, #c9853f);
    --hms-gold-dark: var(--hms-warm-dark, #9d632b);
    --hms-emerald: var(--hms-primary, #0f3b3e);
    --hms-text: var(--hms-ink, #132021);
}

.hms-progress-step.is-active .hms-progress-number,
.hms-booking-progress .hms-progress-step.is-active .hms-progress-number {
    background: linear-gradient(135deg, #e8b66f 0%, #c9853f 48%, #9d632b 100%) !important;
    border-color: rgba(157, 99, 43, .35) !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .22);
    box-shadow: 0 14px 30px rgba(157, 99, 43, .28) !important;
}

.hms-progress-step:not(.is-active):not(.is-complete) .hms-progress-number,
.hms-booking-progress .hms-progress-step:not(.is-active):not(.is-complete) .hms-progress-number {
    color: #5f6b68 !important;
    background: #ffffff !important;
}

.hms-progress-step.is-active .hms-progress-text strong,
.hms-booking-progress .hms-progress-step.is-active .hms-progress-text strong {
    color: #0f3b3e !important;
}

@media (max-width: 767.98px) {
    .hms-progress-step.is-active .hms-progress-number,
    .hms-booking-progress .hms-progress-step.is-active .hms-progress-number {
        font-size: .95rem !important;
    }
}

/* Hotfix: confirmation/page header inner card text contrast
   Page headers use a dark premium background and force .text-muted to light text.
   That rule also affected white summary cards inside the header (for example
   the "Nomor Booking" card on booking confirmation). Restore dark text inside
   header cards so labels remain readable. */
section.hms-soft-bg.py-5.border-bottom .hms-card,
main section.hms-soft-bg.py-5.border-bottom .hms-card {
    color: #132021 !important;
    text-shadow: none !important;
}

section.hms-soft-bg.py-5.border-bottom .hms-card .text-muted,
section.hms-soft-bg.py-5.border-bottom .hms-card .small,
section.hms-soft-bg.py-5.border-bottom .hms-card p,
main section.hms-soft-bg.py-5.border-bottom .hms-card .text-muted,
main section.hms-soft-bg.py-5.border-bottom .hms-card .small,
main section.hms-soft-bg.py-5.border-bottom .hms-card p {
    color: #5f6f6c !important;
    text-shadow: none !important;
}

section.hms-soft-bg.py-5.border-bottom .hms-card .hms-price,
main section.hms-soft-bg.py-5.border-bottom .hms-card .hms-price {
    color: #9d632b !important;
    text-shadow: none !important;
}

section.hms-soft-bg.py-5.border-bottom .hms-card .badge,
main section.hms-soft-bg.py-5.border-bottom .hms-card .badge {
    text-shadow: none !important;
}

/* FASE 41D-2C-HF6: screenshot-ready mobile booking evidence */
.booking-evidence,
.booking-evidence-next-steps {
    max-width: 920px;
}

.booking-evidence {
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(32, 59, 95, 0.14);
    box-shadow: 0 18px 50px rgba(31, 45, 61, 0.10);
}

.booking-evidence__header {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 1.5rem;
    border-bottom: 2px solid rgba(32, 59, 95, 0.16);
}

.booking-evidence__brand {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
}

.booking-evidence__logo {
    width: auto;
    max-width: 88px;
    height: auto;
    max-height: 72px;
    object-fit: contain;
    flex: 0 0 auto;
}

.booking-evidence__hotel-name {
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 800;
    color: #203b5f;
}

.booking-evidence__muted {
    margin-top: .2rem;
    color: #6b7280;
    font-size: .9rem;
    overflow-wrap: anywhere;
}

.booking-evidence__reference {
    min-width: 240px;
    text-align: right;
}

.booking-evidence__reference span,
.booking-evidence__reference small {
    display: block;
    color: #6b7280;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.booking-evidence__reference strong {
    display: block;
    margin: .25rem 0;
    color: #203b5f;
    font-size: 1.45rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.booking-evidence__status-row {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    padding: 1rem 1.5rem 0;
}

.booking-evidence__status {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: .35rem .75rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
}

.booking-evidence__status--reservation { background: #eaf2ff; color: #174f95; }
.booking-evidence__status--payment { background: #edf8f1; color: #146c43; }

.booking-evidence__notice {
    margin: 1rem 1.5rem 0;
    padding: .9rem 1rem;
    border: 1px solid transparent;
    border-radius: .8rem;
    overflow-wrap: anywhere;
}

.booking-evidence__notice--warning { background: #fff8e5; border-color: #efd98f; color: #714d00; }
.booking-evidence__notice--info { background: #edf7ff; border-color: #b9d9ef; color: #164f72; }
.booking-evidence__notice--neutral { background: #f7f9fc; border-color: #dfe4eb; color: #334155; }

.booking-evidence__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 1.5rem 1.5rem 0;
}

.booking-evidence__section {
    min-width: 0;
    padding: 1.1rem;
    border: 1px solid #e5e8ee;
    border-radius: .9rem;
    background: #fff;
}

.booking-evidence__section--wide {
    margin: 1rem 1.5rem 0;
}

.booking-evidence__section h2 {
    margin: 0 0 .85rem;
    color: #203b5f;
    font-size: 1.02rem;
    font-weight: 800;
}

.booking-evidence__details {
    margin: 0;
}

.booking-evidence__details > div {
    display: grid;
    grid-template-columns: minmax(92px, .75fr) minmax(0, 1.25fr);
    gap: .75rem;
    padding: .35rem 0;
}

.booking-evidence__details dt {
    color: #6b7280;
    font-weight: 500;
}

.booking-evidence__details dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
    overflow-wrap: anywhere;
}

.booking-evidence__rooms,
.booking-evidence__amounts {
    display: grid;
    gap: .65rem;
}

.booking-evidence__room,
.booking-evidence__amounts > div {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid #eef0f3;
}

.booking-evidence__room:last-child,
.booking-evidence__amounts > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.booking-evidence__room span {
    display: block;
    margin-top: .15rem;
    color: #6b7280;
    font-size: .88rem;
}

.booking-evidence__room-meta {
    flex: 0 0 auto;
    color: #4b5563;
    text-align: right;
}

.booking-evidence__discount { color: #087a55; }
.booking-evidence__grand-total {
    padding-top: .75rem;
    border-top: 2px solid #203b5f !important;
    font-size: 1.1rem;
}

.booking-evidence__nett-note {
    margin: .8rem 0 0;
    color: #087a55;
    font-size: .85rem;
}

.booking-evidence__footer {
    margin-top: 1.25rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e8ee;
    background: #f8fafc;
    color: #64748b;
    font-size: .84rem;
    text-align: center;
}

@media (max-width: 767.98px) {
    .booking-evidence-actions .btn,
    .booking-evidence-actions form,
    .booking-evidence-actions form .btn {
        width: 100%;
    }

    .booking-evidence__header {
        flex-direction: column;
        padding: 1.15rem;
    }

    .booking-evidence__brand {
        width: 100%;
    }

    .booking-evidence__logo {
        max-width: 68px;
        max-height: 58px;
    }

    .booking-evidence__reference {
        min-width: 0;
        width: 100%;
        padding-top: .9rem;
        border-top: 1px solid #e5e8ee;
        text-align: left;
    }

    .booking-evidence__reference strong {
        font-size: 1.25rem;
    }

    .booking-evidence__status-row,
    .booking-evidence__notice {
        margin-left: 1.15rem;
        margin-right: 1.15rem;
    }

    .booking-evidence__status-row {
        padding-left: 0;
        padding-right: 0;
    }

    .booking-evidence__grid {
        grid-template-columns: minmax(0, 1fr);
        padding: 1.15rem 1.15rem 0;
    }

    .booking-evidence__section--wide {
        margin-left: 1.15rem;
        margin-right: 1.15rem;
    }

    .booking-evidence__details > div {
        grid-template-columns: minmax(0, 1fr);
        gap: .15rem;
    }

    .booking-evidence__details dd {
        text-align: left;
    }

    .booking-evidence__room,
    .booking-evidence__amounts > div {
        align-items: flex-start;
    }

    .booking-evidence__room-meta {
        max-width: 42%;
    }
}

/* FASE 41D-2C-HF6-HOTFIX-1: Mobile Evidence Capture Safety + WhatsApp logo */
.hms-wa-icon {
    font-size: 0;
}

.hms-wa-icon::before {
    content: "";
    display: block;
    width: 1.35rem;
    height: 1.35rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23fff' d='M16 3A12 12 0 0 0 5.7 21.2L4 29l7.9-1.6A12 12 0 1 0 16 3zm0 21.8c-1.8 0-3.5-.5-5-1.4l-.4-.2-3.9.8.8-3.8-.2-.4A9.7 9.7 0 1 1 16 24.8zm5.4-7.3c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.2-.2.3-.8.9-1 1.1-.2.2-.4.2-.7.1-1.7-.8-2.8-1.5-3.9-3.4-.3-.5.3-.5.8-1.6.1-.2 0-.4 0-.6-.1-.2-.7-1.7-.9-2.3-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4-.3.3-1.2 1.2-1.2 2.9s1.2 3.3 1.4 3.6c.2.2 2.4 3.7 5.8 5.2.8.4 1.4.7 1.9.9.8.3 1.6.3 2.2.2.7-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4-.1-.2-.3-.2-.6-.3z'/%3E%3C/svg%3E");
}

.hms-confirmation-page {
    padding-top: 1.25rem;
}

.hms-confirmation-page .booking-evidence-actions {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}

.booking-evidence-progress {
    margin-top: 1.5rem;
}

@media (max-width: 575.98px) {
    .hms-confirmation-page {
        padding-top: .75rem;
    }

    .hms-confirmation-page .container {
        padding-left: .625rem;
        padding-right: .625rem;
    }

    .booking-evidence-progress {
        margin-top: 1rem;
    }
}