/* ================================================================
   MallSpace — Design System
   Monochrome — Text #000000 · Page background #FFFFFF · Surfaces/accents #eeeeee
   (Terracotta brand color fully retired — see --ms-terra-* vars, now neutral)
   ================================================================ */

:root {
    --ms-terra-600: #000000;
    --ms-terra-700: #000000;
    --ms-terra-100: #eeeeee;
    --ms-terra-50:  #eeeeee;
    --ms-ink-900:   #000000;
    --ms-ink-700:   #000000;
    --ms-ink-400:   #8F7D75;
    --ms-ink-200:   #DDD5CF;
    --ms-cream:     #FFFFFF;
    --ms-cream-100: #FFFFFF;
    --ms-font:      'Prompt', 'Noto Sans Thai', sans-serif;
    --ms-font-size-base: 16px;
    --ms-radius-sm: 4px;
    --ms-radius-md: 8px;
    --ms-radius-lg: 12px;
    --ms-radius-xl: 16px;
    --ms-shadow-sm: 0 1px 4px rgba(26,22,20,.07);
    --ms-shadow-md: 0 2px 12px rgba(26,22,20,.10);
    --ms-shadow-lg: 0 4px 24px rgba(26,22,20,.12);
}

/* ================================================================
   1. BASE
   ================================================================ */

/* !important required — Metronic's own style.bundle.css forces
   html,body{font-size:13px!important} (12px under 767.98px) at every
   breakpoint, which silently wins over any plain declaration here
   regardless of source order. Without !important the admin-configurable
   font size setting has zero visual effect no matter what's selected. */
html {
    font-size: var(--ms-font-size-base) !important;
}

body {
    font-family: var(--ms-font);
    background-color: var(--ms-cream);
    color: var(--ms-ink-700);
    font-size: var(--ms-font-size-base) !important;
    line-height: 1.65;
}

body.admin-theme {
    background-color: #FFFFFF;
}

[x-cloak] { display: none !important; }

/* Full-width layout — Bootstrap caps .container/.container-xxl etc. at a
   max-width per breakpoint (e.g. 1320px on xxl screens); override globally
   so every such container across the whole site (public + all dashboards)
   spans the full screen width instead, without editing each Blade view. */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    max-width: 100% !important;
}

/* Side breathing room now that containers span edge-to-edge above — Metronic's
   own bundle sets padding:0 30px at this same breakpoint/selector; double it. */
@media (min-width: 992px) {
    .container,
    .container-fluid,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        padding: 0 60px;
    }
}

/* ================================================================
   2. TYPOGRAPHY
   ================================================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ms-font);
    color: var(--ms-ink-900);
    font-weight: 700;
    line-height: 1.3;
}

.fs-1 { font-size: 2.15rem !important; }
.fs-2 { font-size: 1.7rem !important; }
.fs-3 { font-size: 1.35rem !important; }
.fs-4 { font-size: 1.12rem !important; }
.fs-5 { font-size: 0.95rem !important; }
.fs-6 { font-size: 0.87rem !important; }

.text-muted { color: var(--ms-ink-400) !important; }

/* Section heading (Home page hero sections, e.g. "ศูนย์การค้าที่ร่วมรายการ") */
.ms-section-title {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ms-ink-900);
}

/* ================================================================
   3. CARDS
   ================================================================ */

.card {
    border: 1px solid rgba(221,213,207,.7) !important;
    box-shadow: var(--ms-shadow-sm) !important;
    border-radius: 0;
    background-color: #fff !important;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(221,213,207,.6) !important;
    padding: 1.1rem 1.5rem !important;
    border-radius: 0;
}

.card-header .card-title {
    font-weight: 700 !important;
    color: var(--ms-ink-900) !important;
    font-size: 1rem !important;
}

.card-body {
    padding: 1.5rem !important;
}

.card-footer {
    background: transparent !important;
    border-top: 1px solid rgba(221,213,207,.6) !important;
    border-radius: 0;
    padding: 1rem 1.5rem !important;
}

/* Stat card highlight */
.ms-stat-card {
    border-left: 3px solid #000000 !important;
}

/* ================================================================
   4. FORMS
   ================================================================ */

.form-label {
    font-weight: 600 !important;
    font-size: 0.87rem !important;
    color: var(--ms-ink-700) !important;
    margin-bottom: 0.35rem !important;
}

.form-control,
.form-select {
    font-family: var(--ms-font) !important;
    border-color: var(--ms-ink-200) !important;
    border-radius: 0;
    color: var(--ms-ink-700) !important;
    background-color: #fff !important;
    padding: 0.55rem 0.9rem !important;
    font-size: 0.93rem !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}

.form-control:focus,
.form-select:focus {
    border-color: #000000 !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,.14) !important;
    outline: none !important;
}

.form-control::placeholder { color: #C0B4AE !important; }

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #000000 !important;
    border-width: 2px !important;
}

.invalid-feedback {
    font-size: 0.82rem !important;
    font-weight: 500 !important;
}

/* Input group */
.input-group-text {
    border-color: var(--ms-ink-200) !important;
    background-color: var(--ms-cream) !important;
    color: var(--ms-ink-400) !important;
    font-family: var(--ms-font) !important;
    border-radius: 0;
}

/* Checkbox / Radio — checked state must stay black so Metronic's white
   tick/circle icon (fixed white SVG fill, not themeable) stays visible;
   a light gray background here makes the icon disappear. */
.form-check-input:checked {
    background-color: #000000 !important;
    border-color: #000000 !important;
}
.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(0,0,0,.18) !important;
}

/* Textarea */
textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

/* ================================================================
   5. BUTTONS
   ================================================================ */

.btn {
    font-family: var(--ms-font) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    border-radius: 0;
    transition: all .18s ease !important;
    font-size: 0.9rem !important;
}

.btn-sm {
    font-size: 0.82rem !important;
    padding: 0.3rem 0.75rem !important;
    border-radius: 0;
}

.btn-lg {
    font-size: 1rem !important;
    padding: 0.7rem 1.6rem !important;
    border-radius: 0;
}

/* Primary */
.btn-primary {
    background-color: #dddddd !important;
    border-color: #000000 !important;
    color: #000000 !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-check:focus+.btn-primary,
.btn-check:active+.btn-primary,
.btn-check:checked+.btn-primary,
.btn-primary.active,
.btn.btn-primary.active,
.btn.btn-primary.show,
.btn.btn-primary:active:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:hover:not(.btn-active),
.btn-check:active+.btn.btn-primary,
.btn-check:checked+.btn.btn-primary,
.show>.btn-primary.dropdown-toggle,
.show>.btn.btn-primary {
    background-color: #cccccc !important;
    border-color: #000000 !important;
    color: #000000 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
}
.btn.btn-primary.active .svg-icon, .btn.btn-primary.active i,
.btn.btn-primary.show .svg-icon, .btn.btn-primary.show i,
.btn.btn-primary:active:not(.btn-active) .svg-icon, .btn.btn-primary:active:not(.btn-active) i,
.btn.btn-primary:focus:not(.btn-active) .svg-icon, .btn.btn-primary:focus:not(.btn-active) i,
.btn.btn-primary:hover:not(.btn-active) .svg-icon, .btn.btn-primary:hover:not(.btn-active) i,
.show>.btn.btn-primary .svg-icon, .show>.btn.btn-primary i {
    color: #000000 !important;
}

/* Outline primary */
.btn-outline-primary {
    color: #000000 !important;
    border-color: #000000 !important;
}
.btn-outline-primary:hover {
    background-color: #dddddd !important;
    color: #000000 !important;
}

/* Outline light (e.g. "ดูพื้นที่ก่อน" on the CTA band) — Metronic defaults this
   to near-white text/border (#f5f8fa), meant for a dark background. Now that
   .ms-section-cta etc. are light gray, that text is nearly invisible. */
.btn-outline-light,
.btn-outline-light:focus {
    color: #000000 !important;
    border-color: #000000 !important;
    box-shadow: none !important;
}
.btn-outline-light:hover,
.btn-check:checked+.btn-outline-light,
.btn-outline-light.active,
.btn-outline-light.dropdown-toggle.show,
.btn-outline-light:active {
    color: #000000 !important;
    background-color: #dddddd !important;
    border-color: #000000 !important;
}

/* Light button */
.btn-light {
    background-color: var(--ms-cream) !important;
    border-color: var(--ms-ink-200) !important;
    color: var(--ms-ink-700) !important;
}
.btn-light:hover {
    background-color: #dddddd !important;
    color: var(--ms-ink-900) !important;
}

/* Light-primary button (e.g. "ล้างทั้งหมด" clear-filter buttons) */
.btn-light-primary {
    color: #000000 !important;
    border-color: #dddddd !important;
    background-color: #dddddd !important;
}
.btn-check:checked+.btn.btn-light-primary,
.btn.btn-light-primary.active,
.btn.btn-light-primary.show,
.btn.btn-light-primary:active:not(.btn-active),
.btn.btn-light-primary:focus:not(.btn-active),
.btn.btn-light-primary:hover:not(.btn-active),
.show>.btn.btn-light-primary {
    color: #000000 !important;
    border-color: #cccccc !important;
    background-color: #cccccc !important;
}
.btn-light-primary .svg-icon, .btn.btn-light-primary i,
.btn-check:active+.btn.btn-light-primary i,
.btn-check:checked+.btn.btn-light-primary .svg-icon, .btn-check:checked+.btn.btn-light-primary i,
.btn.btn-light-primary.active .svg-icon, .btn.btn-light-primary.active i,
.btn.btn-light-primary.show .svg-icon, .btn.btn-light-primary.show i,
.btn.btn-light-primary:active:not(.btn-active) .svg-icon, .btn.btn-light-primary:active:not(.btn-active) i,
.btn.btn-light-primary:focus:not(.btn-active) .svg-icon, .btn.btn-light-primary:focus:not(.btn-active) i,
.btn.btn-light-primary:hover:not(.btn-active) .svg-icon, .btn.btn-light-primary:hover:not(.btn-active) i,
.show>.btn.btn-light-primary .svg-icon, .show>.btn.btn-light-primary i,
.btn-light-primary.dropdown-toggle:after {
    color: #000000 !important;
}

/* Other btn-light-* status variants (success/danger/warning/info/secondary/dark) */
.btn-light-success, .btn-light-danger, .btn-light-warning, .btn-light-info, .btn-light-secondary, .btn-light-dark {
    color: #000000 !important;
    border-color: #dddddd !important;
    background-color: #dddddd !important;
}
.btn.btn-light-success.active, .btn.btn-light-success.show, .btn.btn-light-success:active:not(.btn-active), .btn.btn-light-success:focus:not(.btn-active), .btn.btn-light-success:hover:not(.btn-active),
.btn.btn-light-danger.active, .btn.btn-light-danger.show, .btn.btn-light-danger:active:not(.btn-active), .btn.btn-light-danger:focus:not(.btn-active), .btn.btn-light-danger:hover:not(.btn-active),
.btn.btn-light-warning.active, .btn.btn-light-warning.show, .btn.btn-light-warning:active:not(.btn-active), .btn.btn-light-warning:focus:not(.btn-active), .btn.btn-light-warning:hover:not(.btn-active),
.btn.btn-light-info.active, .btn.btn-light-info.show, .btn.btn-light-info:active:not(.btn-active), .btn.btn-light-info:focus:not(.btn-active), .btn.btn-light-info:hover:not(.btn-active),
.btn.btn-light-secondary.active, .btn.btn-light-secondary.show, .btn.btn-light-secondary:active:not(.btn-active), .btn.btn-light-secondary:focus:not(.btn-active), .btn.btn-light-secondary:hover:not(.btn-active),
.btn.btn-light-dark.active, .btn.btn-light-dark.show, .btn.btn-light-dark:active:not(.btn-active), .btn.btn-light-dark:focus:not(.btn-active), .btn.btn-light-dark:hover:not(.btn-active) {
    color: #000000 !important;
    border-color: #cccccc !important;
    background-color: #cccccc !important;
}
.btn-light-success .svg-icon, .btn.btn-light-success i,
.btn-light-danger .svg-icon, .btn.btn-light-danger i,
.btn-light-warning .svg-icon, .btn.btn-light-warning i,
.btn-light-info .svg-icon, .btn.btn-light-info i,
.btn-light-secondary .svg-icon, .btn.btn-light-secondary i,
.btn-light-dark .svg-icon, .btn.btn-light-dark i,
.btn-light-success.dropdown-toggle:after, .btn-light-danger.dropdown-toggle:after,
.btn-light-warning.dropdown-toggle:after, .btn-light-info.dropdown-toggle:after,
.btn-light-secondary.dropdown-toggle:after, .btn-light-dark.dropdown-toggle:after {
    color: #000000 !important;
}

/* Admin primary — Ink */
body.admin-theme .btn-primary {
    background-color: #dddddd !important;
    border-color: #dddddd !important;
    color: #000000 !important;
}
body.admin-theme .btn-primary:hover,
body.admin-theme .btn-primary:focus,
body.admin-theme .btn-primary:active,
body.admin-theme .btn-primary:not(:disabled):not(.disabled):active {
    background-color: #cccccc !important;
    border-color: #cccccc !important;
    color: #000000 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
}

/* Safety net — no button's hover/focus/active text should ever render white.
   Every specific .btn-* variant above already forces black text on these
   states, but this catches any Metronic default (color:#fff) on a button
   variant we haven't explicitly touched, now or in the future. Scoped to
   .btn (Bootstrap's button class) only — NOT a bare `button` element
   selector, which would also catch the photo-lightbox close/prev/next
   controls (resources/views/tenant/units/show.blade.php) that intentionally
   keep white text/icons over their near-black rgba(0,0,0,.9) backdrop. */
.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.show,
.badge:hover {
    color: #000000 !important;
}
.btn:hover .svg-icon, .btn:hover i,
.btn:focus .svg-icon, .btn:focus i,
.btn:active .svg-icon, .btn:active i {
    color: #000000 !important;
}

/* ================================================================
   6. BADGES
   ================================================================ */

.badge {
    font-family: var(--ms-font) !important;
    font-weight: 600 !important;
    border-radius: 0;
    font-size: 0.78rem !important;
    letter-spacing: 0.01em !important;
}

.badge-circle {
    border-radius: 0;
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.72rem !important;
}

.badge-primary { background-color: #eeeeee !important; color: #000000 !important; }
.badge-light-primary { background-color: #eeeeee !important; color: #000000 !important; }

body.admin-theme .badge-primary { background-color: #eeeeee !important; color: #000000 !important; }
body.admin-theme .badge-light-primary { background-color: #eeeeee !important; color: #000000 !important; }

/* Status badges (booking/KYC/notification) — flattened to gray/black, no semantic color coding */
.badge-success,
.badge-light-success,
.badge-danger,
.badge-light-danger,
.badge-warning,
.badge-light-warning,
.badge-info,
.badge-light-info,
.badge-secondary,
.badge-light-secondary,
.badge-dark,
.badge-light-dark {
    background-color: #eeeeee !important;
    color: #000000 !important;
}

/* ================================================================
   7. NAV TABS
   ================================================================ */

.nav-tabs,
.nav-line-tabs {
    border-bottom: 2px solid #EDE5DF !important;
    gap: 0.25rem !important;
}

.nav-tabs .nav-link,
.nav-line-tabs .nav-link {
    font-family: var(--ms-font) !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    color: var(--ms-ink-400) !important;
    border: none !important;
    padding: 0.6rem 1rem !important;
    border-radius: 0;
    transition: color .15s, background .15s !important;
}

.nav-tabs .nav-link:hover,
.nav-line-tabs .nav-link:hover {
    color: #000000 !important;
    background-color: #eeeeee !important;
}

.nav-link.active,
.nav-tabs .nav-link.active,
.nav-line-tabs .nav-link.active,
.nav-line-tabs .nav-item .nav-link.active {
    color: #000000 !important;
    border-bottom: 2px solid #000000 !important;
    background-color: #eeeeee !important;
}

body.admin-theme .nav-link.active,
body.admin-theme .nav-tabs .nav-link.active,
body.admin-theme .nav-line-tabs .nav-link.active,
body.admin-theme .nav-line-tabs .nav-item .nav-link.active {
    color: var(--ms-ink-900) !important;
    border-bottom-color: var(--ms-ink-900) !important;
    background-color: #eeeeee !important;
}

/* ================================================================
   8. TABLES
   ================================================================ */

.table {
    font-size: 0.9rem !important;
    font-family: var(--ms-font) !important;
}

.table > thead > tr > th {
    background-color: var(--ms-cream) !important;
    border-bottom: 2px solid var(--ms-ink-200) !important;
    border-top: none !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: var(--ms-ink-400) !important;
    padding: 0.75rem 1rem !important;
    white-space: nowrap;
}

.table > tbody > tr > td {
    border-color: #F0EBE7 !important;
    padding: 0.85rem 1rem !important;
    vertical-align: middle !important;
    color: var(--ms-ink-700) !important;
}

.table-hover > tbody > tr:hover > td {
    background-color: #eeeeee !important;
}

/* ================================================================
   9. ALERTS / FLASH MESSAGES
   ================================================================ */

.alert {
    font-family: var(--ms-font) !important;
    border-radius: 0;
    border: none !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
}

.alert-success  { background-color: #eeeeee !important; color: #000000 !important; }
.alert-danger   { background-color: #eeeeee !important; color: #000000 !important; }
.alert-warning  { background-color: #eeeeee !important; color: #000000 !important; }
.alert-info     { background-color: #eeeeee !important; color: #000000 !important; }

.bg-light-success,
.bg-light-danger,
.bg-light-warning,
.bg-light-info,
.bg-light-primary,
.bg-light-secondary,
.bg-light-dark {
    background-color: #eeeeee !important;
}
.bg-primary,
.bg-success,
.bg-danger,
.bg-warning,
.bg-info,
.bg-secondary,
.bg-primary.hoverable:hover {
    background-color: #eeeeee !important;
    color: #000000 !important;
}
.link-primary,
.link-primary:focus,
.link-primary:hover {
    color: #000000 !important;
}
.border-success,
.border-danger,
.border-warning,
.border-info {
    border-color: #000000 !important;
}
.text-success,
.text-danger,
.text-warning,
.text-info,
.text-primary {
    color: #000000 !important;
}

/* ================================================================
   10. SIDEBAR / ASIDE
   ================================================================ */

/* Sidebar background — white, black text */
#kt_aside {
    background: #ffffff !important;
    border-right: 1px solid #dddddd !important;
}

/* No rounded corners anywhere inside the sidebar (menu items, icons, badges,
   avatars, toggle buttons, etc.) — blanket override instead of chasing every
   individual Metronic selector one by one. */
#kt_aside, #kt_aside * {
    border-radius: 0 !important;
}

/* Sidebar menu scroll fix. .aside-menu carries Bootstrap/Metronic's
   .flex-column-fluid class, which sets `flex: 1 0 auto` — flex-shrink is 0.
   A flex item with flex-shrink:0 structurally refuses to shrink below its
   content's natural height no matter what min-height says, so when the
   menu list is taller than the viewport it just grows past .aside's fixed
   top:0/bottom:0 box and gets silently clipped by .aside's overflow:hidden
   — the wrapper below never receives a bounded height to scroll within,
   so menu items past the fold are completely unreachable. Must override
   flex-shrink itself (min-height:0 alone does nothing while shrink is 0).
   !important on the wrapper guards against scripts.bundle.js's KTScroll/
   hover-scroll JS setting a competing inline style="overflow-y:..." on
   this element at runtime, which would otherwise beat a plain (non-
   important) external rule. */
.aside-menu {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
#kt_aside_menu_wrapper {
    height: 100% !important;
    max-height: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Logo area */
.aside-logo {
    background: #ffffff !important;
    border-bottom: 1px solid #dddddd !important;
    padding: 1.5rem 1rem !important;
    min-height: 70px !important;
    display: flex !important;
    align-items: center !important;
}

.aside-logo a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.aside-logo .ms-logo-icon {
    width: 32px;
    height: 32px;
    background: #eeeeee;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 900;
    color: #000000;
    flex-shrink: 0;
}

.aside-logo .ms-logo-text {
    font-size: 1.1rem;
    font-weight: 800;
    color: #000000;
    letter-spacing: -0.01em;
}

.aside-logo .ms-logo-sub {
    font-size: 0.65rem;
    color: rgba(0,0,0,.4);
    font-weight: 400;
    display: block;
    margin-top: -2px;
}

/* Menu section headings */
.menu-section {
    font-size: 0.65rem !important;
    letter-spacing: 0.1em !important;
    font-weight: 700 !important;
    color: rgba(0,0,0,.4) !important;
    text-transform: uppercase !important;
}

/* Menu items */
.menu-link {
    border-radius: 0;
    margin: 2px 10px !important;
    padding: 0.5rem 0.75rem !important;
    transition: background .15s, color .15s !important;
}

.menu-link .menu-title {
    font-weight: 500 !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.01em !important;
}

.menu-link:not(.active):not(:disabled) {
    color: #000000 !important;
}

.menu-link:not(.active):hover {
    background-color: #eeeeee !important;
    color: #000000 !important;
}

/* Metronic sets color:#fff directly on .menu-title (and .menu-icon) as a
   child-targeting hover rule — a color inherited from the parent .menu-link
   above, even with !important, never overrides a rule that targets the
   child element itself. Must patch the child selector explicitly. */
.menu-link:not(.active):hover .menu-title {
    color: #000000 !important;
}
.menu-link:not(.active):hover .menu-icon,
.menu-link:not(.active):hover .menu-icon .svg-icon,
.menu-link:not(.active):hover .menu-icon i {
    color: #000000 !important;
}

.menu-link.active,
.menu-item.here > .menu-link {
    background-color: #dddddd !important;
    color: #000000 !important;
    box-shadow: none !important;
}

.menu-link.active .menu-title,
.menu-item.here > .menu-link .menu-title {
    color: #000000 !important;
    font-weight: 600 !important;
}

/* Sub-menu items */
.menu-sub .menu-link {
    padding-left: 1.5rem !important;
}

/* Sub-bullet dots */
.menu-bullet .bullet { background-color: rgba(0,0,0,.3) !important; }
.menu-link:hover .menu-bullet .bullet { background-color: rgba(0,0,0,.6) !important; }
.menu-link.active .menu-bullet .bullet { background-color: #000000 !important; }

/* Accordion arrow — Metronic draws this as a background-image SVG (not a
   font glyph), so the `color` property above has no effect on it at all.
   On hover/active states Metronic swaps in a pure-white (#FFFFFF) SVG,
   which goes invisible against our light backgrounds. invert(1) flips
   white -> black without needing to hand-reproduce every directional SVG
   variant Metronic ships (open/closed, LTR/RTL, etc). */
.menu-arrow::after {
    color: rgba(0,0,0,.4) !important;
}
.menu-link:not(.active):hover .menu-arrow::after,
.menu-link.active .menu-arrow::after,
.menu-item.here > .menu-link .menu-arrow::after {
    filter: invert(1) !important;
}

/* Admin sidebar — Ink accent override */
body.admin-theme .menu-link.active,
body.admin-theme .menu-item.here > .menu-link {
    background-color: #dddddd !important;
    box-shadow: none !important;
}

body.admin-theme .badge-primary { background-color: #eeeeee !important; color: #000000 !important; }
body.admin-theme .badge-light-primary { background-color: #eeeeee !important; color: #000000 !important; }
body.admin-theme .nav-link.active,
body.admin-theme .nav-tabs .nav-link.active,
body.admin-theme .nav-line-tabs .nav-link.active,
body.admin-theme .nav-line-tabs .nav-item .nav-link.active {
    color: var(--ms-ink-900) !important;
    border-bottom-color: var(--ms-ink-900) !important;
    background-color: #eeeeee !important;
}

/* ================================================================
   11. TOPBAR / HEADER
   ================================================================ */

#kt_header {
    background: #fff !important;
    border-bottom: 1px solid #EDE5DF !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.06) !important;
    min-height: 64px !important;
}

#kt_header h1 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--ms-ink-900) !important;
}

/* Mobile hamburger */
.ms-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 0;
    border: none;
    background: var(--ms-cream);
    cursor: pointer;
    color: var(--ms-ink-700);
    font-size: 1.1rem;
    transition: background .15s;
}
.ms-hamburger:hover { background: var(--ms-cream-100); }

/* User dropdown */
.ms-user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: .5rem;
    background-color: #fff;
    border: 1px solid var(--ms-ink-200);
    border-radius: 0;
    box-shadow: var(--ms-shadow-lg);
    z-index: 107;
    min-width: 220px;
}

.ms-user-dropdown .menu-link {
    margin: 2px 6px !important;
    border-radius: 0;
    color: var(--ms-ink-700) !important;
    font-weight: 500 !important;
}
.ms-user-dropdown .menu-link:hover {
    background-color: #eeeeee !important;
    color: #000000 !important;
}

/* User avatar */
.symbol-label {
    border-radius: 0;
    background-color: #eeeeee !important;
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
}

/* ================================================================
   12. BREADCRUMBS
   ================================================================ */

.breadcrumb {
    background: none !important;
    padding: 0 !important;
    margin-bottom: 1.25rem !important;
}

.breadcrumb-item {
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    color: var(--ms-ink-400) !important;
}

.breadcrumb-item a {
    color: var(--ms-ink-400) !important;
    text-decoration: none !important;
    transition: color .15s !important;
}

.breadcrumb-item a:hover { color: #000000 !important; }
.breadcrumb-item.active { color: #000000 !important; font-weight: 600 !important; }

.breadcrumb-item + .breadcrumb-item::before {
    color: #C0B4AE !important;
    content: "/" !important;
}

/* ================================================================
   13. PAGINATION
   ================================================================ */

.pagination .page-link {
    font-family: var(--ms-font) !important;
    font-weight: 600 !important;
    color: var(--ms-ink-400) !important;
    border-color: var(--ms-ink-200) !important;
    border-radius: 0;
    margin: 0 2px !important;
    font-size: 0.85rem !important;
    transition: all .15s !important;
}

.pagination .page-link:hover {
    background-color: #eeeeee !important;
    color: #000000 !important;
    border-color: #000000 !important;
}

.pagination .page-item.active .page-link {
    background-color: #eeeeee !important;
    border-color: #000000 !important;
    color: #000000 !important;
}

/* ================================================================
   14. MODAL OVERLAY
   ================================================================ */

.ms-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(26,22,20,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1090;
    padding: 1rem;
    backdrop-filter: blur(2px);
}

.ms-modal-panel {
    width: 100%;
    max-width: 520px;
    border-radius: 0;
    background: #fff;
    box-shadow: var(--ms-shadow-lg);
}

/* ================================================================
   15. AVAILABILITY CALENDAR (M2)
   ================================================================ */

.ms-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.ms-calendar-grid--selectable { user-select: none; }

.ms-calendar-head {
    text-align: center;
    font-weight: 700;
    color: var(--ms-ink-400);
    padding: 4px 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ms-calendar-day {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    border: 1px solid #EDE5DF;
    font-weight: 500;
    font-size: 0.88rem;
    background-color: #fff;
    color: var(--ms-ink-700);
    cursor: pointer;
    transition: all .12s ease;
}

.ms-calendar-day:hover { border-color: #000000; color: #000000; }
.ms-calendar-day.is-today { font-weight: 800; border-color: #000000; }
.ms-calendar-day.is-blocked { background-color: #eeeeee; border-color: #000000; color: #000000; }
.ms-calendar-day.is-booked  { background-color: #eeeeee; border-color: #000000; color: #000000; cursor: not-allowed; }
.ms-calendar-day.is-empty   { visibility: hidden; cursor: default; }
.ms-calendar-day.is-range   { outline: 2px solid #000000; outline-offset: -2px; }

.ms-calendar-legend-swatch {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 0;
    vertical-align: middle;
    margin-right: 6px;
}
.ms-calendar-legend-swatch--available { background-color: #fff; border: 1px solid #000000; }
.ms-calendar-legend-swatch--blocked   { background-color: #eeeeee; border: 1px solid #000000; }
.ms-calendar-legend-swatch--booked    { background-color: #eeeeee; border: 2px solid #000000; }

/* Month cards — landlord month-picker calendar */
.ms-month-card {
    padding: 18px 12px;
    border: 1.5px solid #EDE5DF;
    border-radius: 0;
    text-align: center;
    background: #fff;
    cursor: pointer;
    transition: all .12s ease;
}
.ms-month-card:hover { border-color: #000000; }
.ms-month-card.is-blocked { background-color: #eeeeee; border-color: #000000; }
.ms-month-card.is-booked { background-color: #eeeeee; border: 2px solid #000000; cursor: not-allowed; }
.ms-month-card.is-busy { pointer-events: none; opacity: .6; }
.ms-month-card--readonly { cursor: default; }
.ms-month-card--readonly:hover { border-color: #EDE5DF; }
.ms-month-card--readonly.is-blocked:hover,
.ms-month-card--readonly.is-booked:hover { border-color: #000000; }
.ms-month-card-label { font-weight: 700; font-size: 0.92rem; color: var(--ms-ink-700); margin-bottom: 4px; }
.ms-month-card-status { font-size: 0.75rem; color: var(--ms-ink-500); }

/* ================================================================
   16. TENANT SEARCH — UNIT CARDS (M3)
   ================================================================ */

.ms-filter-drawer { width: 300px; }

.ms-unit-card {
    cursor: pointer;
    transition: box-shadow .2s ease, transform .2s ease;
    border-radius: 0;
    overflow: hidden;
}

.ms-unit-card:hover {
    box-shadow: var(--ms-shadow-lg) !important;
    transform: translateY(-2px);
}

.ms-unit-card-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.ms-unit-card-image--placeholder {
    background: #FFFFFF;
    color: #000000;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
}

/* ================================================================
   17. LOADING SKELETON
   ================================================================ */

.ms-skeleton {
    background: linear-gradient(90deg, #EEEBE8 0%, #E4E0DC 50%, #EEEBE8 100%);
    background-size: 200% 100%;
    border-radius: 0;
    animation: ms-skeleton-wave 1.5s ease infinite;
}

.ms-skeleton-line { height: 12px; }

@keyframes ms-skeleton-wave {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ================================================================
   18. MAP
   ================================================================ */

.ms-map-container {
    height: 500px;
    border-radius: 0;
    overflow: hidden;
    border: 1px solid var(--ms-ink-200);
}

/* ================================================================
   19. UNIT DETAIL GALLERY (M3 T5)
   ================================================================ */

.ms-gallery-main {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0;
}

.ms-gallery-main--placeholder {
    background: #FFFFFF;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    border-radius: 0;
}

.ms-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.ms-gallery-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0;
    cursor: pointer;
    opacity: .6;
    border: 2px solid transparent;
    transition: opacity .15s, border-color .15s;
}

.ms-gallery-thumb:hover { opacity: .85; }
.ms-gallery-thumb.is-active { opacity: 1; border-color: #000000; }

/* ================================================================
   20. STICKY CTA (Mobile)
   ================================================================ */

.ms-sticky-cta {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background-color: #fff;
    padding: 12px 16px;
    border-top: 1px solid #EDE5DF;
    z-index: 100;
    box-shadow: 0 -4px 16px rgba(26,22,20,.08);
}

@media (max-width: 991.98px) {
    .ms-unit-detail { padding-bottom: 90px; }
    .ms-calendar-day { font-size: 0.78rem; }
}

.ms-calendar-day--readonly { cursor: default; }
.ms-calendar-day--readonly:hover { border-color: #EDE5DF; color: var(--ms-ink-700); }

/* ================================================================
   21. LIGHTBOX
   ================================================================ */

.ms-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.ms-lightbox-img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 0;
}

.ms-lightbox-close {
    position: absolute;
    top: 16px; right: 20px;
    background: rgba(255,255,255,.12);
    border: none; color: #fff;
    font-size: 1.4rem; line-height: 1;
    width: 42px; height: 42px;
    border-radius: 0;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.ms-lightbox-close:hover { background: rgba(255,255,255,.25); }

.ms-lightbox-nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.12);
    border: none; color: #fff;
    font-size: 2rem; line-height: 1;
    width: 50px; height: 70px;
    border-radius: 0;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.ms-lightbox-nav:hover { background: rgba(255,255,255,.25); }
.ms-lightbox-nav--prev { left: 12px; }
.ms-lightbox-nav--next { right: 12px; }

/* ================================================================
   22. EMPTY STATES
   ================================================================ */

.ms-empty-illustration { max-width: 180px; opacity: .7; }

.ms-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--ms-ink-400);
}

.ms-empty-state h5 {
    color: var(--ms-ink-700);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.ms-empty-state p {
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

/* ================================================================
   23. MISCELLANEOUS
   ================================================================ */

/* JSON display in admin */
.ms-json-pre { white-space: pre-wrap; font-size: 0.8rem; }

/* Logout in dropdown */
.ms-user-dropdown .menu-link.border-0 {
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
}
.ms-user-dropdown .menu-link.border-0:hover {
    background-color: #eeeeee !important;
    color: #000000 !important;
}

/* Divider */
.ms-divider {
    border: none;
    border-top: 1px solid #EDE5DF;
    margin: 1rem 0;
}

/* Price display */
.ms-price {
    font-weight: 700;
    color: #000000;
    font-size: 1.2rem;
}

/* Mall profile page (Company Profile / Landing) */
.ms-mall-hero-img {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    border-radius: 0;
}

.ms-prose {
    white-space: pre-line;
    color: var(--ms-ink-700);
    line-height: 1.7;
}

.ms-floorplan-caption {
    font-size: 0.78rem;
    color: var(--ms-ink-500);
    margin-top: 6px;
    font-weight: 600;
}

.ms-price-unit {
    font-weight: 400;
    font-size: 0.82rem;
    color: var(--ms-ink-400);
}

/* Status indicator dot */
.ms-status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 0;
    margin-right: 6px;
}

/* ================================================================
   24. DRAWER OVERLAY
   ================================================================ */

.drawer-overlay {
    background: rgba(26,22,20,.45) !important;
    backdrop-filter: blur(2px) !important;
}

/* ================================================================
   25. RESPONSIVE
   ================================================================ */

@media (max-width: 767.98px) {
    body { font-size: 14px; }
    .card-body { padding: 1.1rem !important; }
    .card-header { padding: 0.9rem 1.1rem !important; }
    .table > thead > tr > th,
    .table > tbody > tr > td { padding: 0.6rem 0.75rem !important; }
    .btn-lg { padding: 0.65rem 1.2rem !important; }
    .ms-map-container { height: 350px; }
}

/* ================================================================
   26. SEARCH HERO — Marketplace discovery header
   ================================================================ */

.ms-search-hero {
    background: #FFFFFF;
    border-bottom: 1px solid var(--ms-ink-200);
    padding: 36px 0 28px;
    margin: 0 0 32px;
}

@media (max-width: 991.98px) {
    .ms-search-hero { padding: 28px 0 24px; }
}

.ms-search-hero-title {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--ms-ink-900);
    margin-bottom: 6px;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.ms-search-hero-sub {
    color: #000000;
    font-size: 0.92rem;
    margin-bottom: 22px;
    font-weight: 400;
}

/* Quick filter bar */
.ms-quick-filter-bar {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 0;
    box-shadow: var(--ms-shadow-md);
    border: 1px solid rgba(221,213,207,.7);
    overflow: hidden;
    /* max-width: 720px; */
}

.ms-qf-field {
    flex: 1;
    padding: 10px 16px;
    border-right: 1px solid var(--ms-ink-200);
    min-width: 0;
}

.ms-qf-field label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ms-ink-400);
    margin-bottom: 2px;
    white-space: nowrap;
}

.ms-qf-field select,
.ms-qf-field input[type="date"] {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ms-ink-900);
    width: 100%;
    outline: none;
    font-family: var(--ms-font);
    cursor: pointer;
}

.ms-qf-field select option { font-weight: 400; }

.ms-qf-search-btn {
    background: #dddddd !important;
    color: #000000 !important;
    border: none !important;
    padding: 0 26px !important;
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background .18s;
    border-radius: 0;
    font-family: var(--ms-font);
}

.ms-qf-search-btn:hover { background: #cccccc !important; }

@media (max-width: 767px) {
    .ms-quick-filter-bar { display: none !important; }
    .ms-search-hero-title { font-size: 1.3rem; }
    .ms-search-hero-sub { font-size: 0.85rem; }
}

/* ================================================================
   27. FILTER SIDEBAR — Section headers + category chips
   ================================================================ */

.ms-filter-wrap {
    background: #fff;
    border-radius: 0;
    border: 1px solid rgba(221,213,207,.7);
    box-shadow: var(--ms-shadow-sm);
    overflow: hidden;
}

.ms-filter-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--ms-ink-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ms-filter-header-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ms-ink-900);
    margin: 0;
}

.ms-filter-body {
    padding: 16px 18px;
}

.ms-filter-section {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--ms-ink-200);
}

.ms-filter-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.ms-filter-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ms-ink-400);
    margin-bottom: 8px;
    display: block;
}

.ms-filter-section select,
.ms-filter-section input[type="date"],
.ms-filter-section input[type="number"] {
    font-size: 0.85rem;
}

/* Category chips */
.ms-category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ms-chip-input { position: absolute; opacity: 0; width: 0; height: 0; }

.ms-chip-label {
    display: inline-block;
    padding: 5px 11px;
    border: 1.5px solid var(--ms-ink-200);
    border-radius: 0;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ms-ink-700);
    cursor: pointer;
    transition: all .15s;
    background: #fff;
    user-select: none;
    line-height: 1.3;
}

.ms-chip-input:checked + .ms-chip-label {
    background: #eeeeee;
    border-color: #000000;
    color: #000000;
    font-weight: 600;
}

.ms-chip-label:hover {
    border-color: #000000;
    color: #000000;
    background: #eeeeee;
}

/* Category accordion — Landlord unit form */
.ms-category-accordion {
    border: 1px solid var(--ms-ink-200);
    border-radius: 0;
}

.ms-category-group {
    border-bottom: 1px solid var(--ms-ink-200);
}
.ms-category-group:last-child { border-bottom: none; }

.ms-category-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: var(--ms-cream);
    flex-wrap: wrap;
}

.ms-category-toggle-btn {
    background: none;
    border: none;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ms-ink-500);
    cursor: pointer;
    padding: 2px 6px;
}
.ms-category-toggle-btn:hover { color: #000000; }

.ms-category-group-body {
    padding: 12px 14px 14px 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    background: #fff;
}

/* Category accordion — Tenant search filter (chip style) */
.ms-category-filter-group { margin-bottom: 10px; }
.ms-category-filter-group:last-child { margin-bottom: 0; }

.ms-category-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 4px 0;
    user-select: none;
}

.ms-category-filter-header-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ms-ink-700);
}

.ms-category-filter-toggle {
    font-size: 0.7rem;
    color: var(--ms-ink-400);
}

.ms-category-filter-children {
    margin-top: 8px;
    padding-left: 4px;
}

/* Price range row */
.ms-price-range-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ms-price-range-row .input-group-text {
    font-size: 0.8rem;
    background: var(--ms-cream);
    border-color: var(--ms-ink-200);
    color: var(--ms-ink-400);
    padding: 0 8px;
}

.ms-price-range-row input { min-width: 0; }

.ms-price-range-sep {
    color: var(--ms-ink-400);
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* ================================================================
   28. RESULTS BAR + VIEW TOGGLE
   ================================================================ */

.ms-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--ms-ink-200);
    gap: 12px;
}

.ms-results-count {
    font-size: 0.88rem;
    color: var(--ms-ink-400);
}

.ms-results-count strong {
    color: var(--ms-ink-900);
    font-weight: 700;
    font-size: 1rem;
}

.ms-view-toggle {
    display: flex;
    background: var(--ms-cream);
    border: 1px solid var(--ms-ink-200);
    border-radius: 0;
    overflow: hidden;
    padding: 3px;
    gap: 2px;
    flex-shrink: 0;
}

.ms-view-btn {
    padding: 5px 14px;
    border: none;
    background: transparent;
    border-radius: 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ms-ink-400);
    cursor: pointer;
    transition: all .15s;
    line-height: 1.2;
    font-family: var(--ms-font);
    white-space: nowrap;
}

.ms-view-btn.is-active {
    background: #fff;
    color: var(--ms-ink-900);
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    font-weight: 600;
}

.ms-filter-mobile-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    border-radius: 0;
}

/* ================================================================
   29. UNIT CARDS v2 — Improved marketplace cards
   ================================================================ */

.ms-unit-card-v2 {
    cursor: pointer;
    border-radius: 0;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
    border: 1px solid rgba(221,213,207,.6) !important;
}

.ms-unit-card-v2:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(26,22,20,.13) !important;
}

.ms-unit-card-img-wrap {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #FFFFFF;
}

.ms-unit-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.ms-unit-card-v2:hover .ms-unit-card-img-wrap img {
    transform: scale(1.05);
}

.ms-unit-card-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #000000;
    font-size: 0.78rem;
    gap: 6px;
}

.ms-unit-card-img-placeholder-icon {
    font-size: 2.2rem;
    opacity: .3;
}

.ms-unit-card-zone-tag {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(255,255,255,.85);
    color: #000000;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 0;
    backdrop-filter: blur(6px);
    letter-spacing: .03em;
}

.ms-unit-card-v2-body {
    padding: 14px 16px 16px;
}

.ms-unit-card-mall-name {
    font-size: 0.73rem;
    color: var(--ms-ink-400);
    font-weight: 500;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ms-unit-card-rating {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ms-ink-500);
    margin-bottom: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

.ms-unit-card-unit-code {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ms-ink-900);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.ms-unit-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    color: var(--ms-ink-400);
    margin-bottom: 10px;
}

.ms-unit-card-meta-dot {
    width: 3px;
    height: 3px;
    border-radius: 0;
    background: var(--ms-ink-200);
    flex-shrink: 0;
}

.ms-unit-card-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 22px;
    margin-bottom: 12px;
}

.ms-cat-pill {
    font-size: 0.67rem;
    padding: 2px 8px;
    border-radius: 0;
    background: #eeeeee;
    color: #000000;
    font-weight: 600;
    letter-spacing: .02em;
}

.ms-cat-pill-more {
    font-size: 0.67rem;
    padding: 2px 8px;
    border-radius: 0;
    background: var(--ms-cream-100);
    color: var(--ms-ink-400);
    font-weight: 500;
}

.ms-unit-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--ms-ink-200);
    padding-top: 12px;
}

.ms-unit-card-price-block { line-height: 1.1; }

.ms-unit-card-price-amount {
    font-size: 1.2rem;
    font-weight: 800;
    color: #000000;
}

.ms-unit-card-price-per {
    font-size: 0.74rem;
    color: var(--ms-ink-400);
    font-weight: 400;
}

.ms-unit-card-cta {
    font-size: 0.78rem !important;
    padding: 5px 13px !important;
    border-radius: 0;
    font-weight: 600 !important;
}

@media (max-width: 575.98px) {
    .ms-unit-card-v2-body { padding: 12px 14px 14px; }
    .ms-unit-card-unit-code { font-size: 0.92rem; }
}

/* ================================================================
   30. UNIT DETAIL PAGE — Step 3 Polish
   ================================================================ */

/* Full-width unit header */
.ms-unit-header { padding-bottom: 20px; border-bottom: 1px solid var(--ms-ink-200); }

.ms-unit-title {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--ms-ink-900);
    margin-bottom: 8px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.ms-unit-location {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.88rem;
    color: var(--ms-ink-500);
    flex-wrap: wrap;
}

.ms-unit-location-link {
    color: #000000;
    font-weight: 600;
    text-decoration: none;
}
.ms-unit-location-link:hover { text-decoration: underline; }

.ms-zone-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 0;
    font-size: 0.77rem;
    font-weight: 700;
    background: #eeeeee;
    color: #000000;
    border: 1px solid rgba(0,0,0,.25);
    letter-spacing: .02em;
}
.ms-zone-badge--secondary {
    background: var(--ms-cream);
    color: var(--ms-ink-500);
    border-color: var(--ms-ink-200);
}

/* Info sections */
.ms-info-section { padding: 24px 0; border-bottom: 1px solid var(--ms-ink-200); }
.ms-info-section:last-child { border-bottom: none; padding-bottom: 0; }

.ms-info-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ms-ink-900);
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

/* Specs grid */
.ms-specs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (min-width: 576px) { .ms-specs-grid { grid-template-columns: repeat(4, 1fr); } }

.ms-spec-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 16px;
    background: var(--ms-cream);
    border-radius: 0;
    border: 1px solid rgba(221,213,207,.6);
}
.ms-spec-icon { font-size: 1.1rem; line-height: 1; }
.ms-spec-label { font-size: 0.66rem; color: var(--ms-ink-400); text-transform: uppercase; font-weight: 700; letter-spacing: .05em; margin-top: 2px; }
.ms-spec-value { font-size: 0.9rem; font-weight: 700; color: var(--ms-ink-900); }

/* Amenity items */
.ms-amenity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }

.ms-amenity-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--ms-ink-200);
    border-radius: 0;
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--ms-ink-700);
}
.ms-amenity-icon { font-size: 1.15rem; line-height: 1; flex-shrink: 0; }

/* Category pills — large, clickable */
.ms-cat-pill-lg {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 0;
    background: var(--ms-cream);
    color: var(--ms-ink-700);
    border: 1.5px solid var(--ms-ink-200);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s;
    letter-spacing: .01em;
}
.ms-cat-pill-lg:hover { background: #eeeeee; border-color: rgba(0,0,0,.4); color: #000000; }

/* Pricing tiers */
.ms-pricing-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }

.ms-pricing-tier {
    padding: 16px 14px;
    border-radius: 0;
    border: 1.5px solid var(--ms-ink-200);
    background: #fff;
    text-align: center;
}
.ms-pricing-tier.is-featured,
.ms-pricing-tier--best { border-color: #000000; background: #FFFFFF; }

.ms-pricing-tier-label { font-size: 0.7rem; font-weight: 700; color: #000000; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }

.ms-pricing-tier-save {
    display: inline-block;
    background: #eeeeee;
    color: #000000;
    font-size: 0.6rem;
    padding: 1px 5px;
    border-radius: 0;
    font-weight: 600;
    margin-left: 3px;
    text-transform: none;
    letter-spacing: 0;
    vertical-align: middle;
}

.ms-pricing-tier-price { font-size: 1.15rem; font-weight: 800; color: var(--ms-ink-900); line-height: 1.1; }
.ms-pricing-tier.is-featured .ms-pricing-tier-price,
.ms-pricing-tier--best .ms-pricing-tier-price { color: #000000; }
.ms-pricing-tier-price span { font-size: 0.72rem; font-weight: 400; color: var(--ms-ink-400); margin-left: 1px; }

/* Sticky Price Card */
.ms-price-sticky-card {
    position: sticky;
    top: 80px;
    background: #fff;
    border-radius: 0;
    border: 1.5px solid rgba(221,213,207,.8);
    box-shadow: 0 4px 32px rgba(26,22,20,.1);
    overflow: hidden;
}

.ms-price-card-header { padding: 22px 24px 18px; border-bottom: 1px solid var(--ms-ink-200); }

.ms-price-hero { display: flex; align-items: baseline; gap: 1px; margin-bottom: 6px; }
.ms-price-hero-currency { font-size: 1.15rem; font-weight: 700; color: #000000; padding-bottom: 2px; }
.ms-price-hero-amount { font-size: 2.5rem; font-weight: 900; color: #000000; line-height: 1; letter-spacing: -0.03em; }
.ms-price-hero-period { font-size: 0.88rem; color: var(--ms-ink-400); margin-left: 5px; font-weight: 400; }

.ms-price-alt-options { display: flex; gap: 14px; font-size: 0.76rem; color: var(--ms-ink-400); margin-top: 4px; flex-wrap: wrap; }

.ms-price-card-body { padding: 18px 24px; }

/* Trust badges */
.ms-trust-badges { border-top: 1px solid var(--ms-ink-200); padding: 14px 24px 16px; display: flex; flex-direction: column; gap: 8px; }
.ms-trust-badge { display: flex; align-items: center; gap: 9px; font-size: 0.76rem; color: var(--ms-ink-400); line-height: 1.3; }

/* Gallery counter overlay */
.ms-gallery-counter {
    position: absolute;
    bottom: 12px; right: 12px;
    background: rgba(255,255,255,.85);
    color: #000000;
    font-size: 0.74rem;
    padding: 3px 10px;
    border-radius: 0;
    backdrop-filter: blur(4px);
    pointer-events: none;
}

/* Booking form inside price card */
.ms-price-card-body .ms-booking-cta-form label { font-size: 0.78rem; }
.ms-price-card-body .form-label { font-size: 0.78rem !important; margin-bottom: 4px !important; }

/* Live price preview box (inside booking CTA) */
.ms-cta-price-preview {
    background: var(--ms-cream);
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 0;
    padding: 10px 12px;
    margin-bottom: 10px;
    font-size: 0.76rem;
}
.ms-cta-price-row {
    display: flex;
    justify-content: space-between;
    color: var(--ms-ink-400);
    margin-bottom: 4px;
}
.ms-cta-price-total {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 0.82rem;
    color: #000000;
    border-top: 1px solid rgba(0,0,0,.2);
    padding-top: 6px;
    margin-top: 4px;
}

/* Color utility */
.text-terra { color: #000000 !important; }

/* Mobile responsiveness */
@media (max-width: 991.98px) {
    .ms-price-sticky-card { position: static; box-shadow: var(--ms-shadow-sm); }
    .ms-unit-title { font-size: 1.3rem; }
    .ms-specs-grid { grid-template-columns: repeat(2, 1fr); }
    .ms-amenity-grid { grid-template-columns: repeat(2, 1fr); }
    .ms-pricing-tiers { grid-template-columns: repeat(2, 1fr); }
}

/* ================================================================
   31. DASHBOARD POLISH — Step 4
   ================================================================ */

/* Welcome Banner */
.ms-welcome-banner {
    background: #eeeeee;
    border: 1px solid rgba(0,0,0,.18);
    border-radius: 0;
    padding: 22px 28px;
}

.ms-welcome-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ms-ink-900);
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}

.ms-welcome-sub {
    font-size: 0.88rem;
    color: var(--ms-ink-400);
}

/* Dashboard Stat Cards */
.ms-stat-card {
    background: #fff;
    border: 1px solid rgba(221,213,207,.7);
    border-radius: 0;
    padding: 20px 22px;
    height: 100%;
    box-shadow: 0 1px 4px rgba(26,22,20,.05);
}

.ms-stat-card-value {
    font-size: 2.1rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 4px;
}

.ms-stat-card-label {
    font-size: 0.8rem;
    color: var(--ms-ink-400);
    font-weight: 500;
}

/* Stat Icon Circles */
.ms-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    line-height: 1;
}

.ms-stat-icon--terra       { background: #eeeeee; }
.ms-stat-icon--green       { background: #eeeeee; }
.ms-stat-icon--amber       { background: #eeeeee; }
.ms-stat-icon--purple      { background: #eeeeee; }
.ms-stat-icon--blue        { background: #eeeeee; }

/* Color utilities */
.ms-text-purple { color: #000000 !important; }
.ms-text-blue   { color: #000000 !important; }

/* Pending Confirmations Alert */
.ms-pending-alert {
    background: #eeeeee;
    border-radius: 0;
    padding: 20px 24px;
    color: #000000;
}

.ms-pending-alert-icon  { font-size: 1.8rem; line-height: 1; flex-shrink: 0; }
.ms-pending-alert-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 2px; }
.ms-pending-alert-sub   { font-size: 0.82rem; opacity: .85; }

/* Dark CTA Card (Tenant Dashboard) */
.ms-cta-dark-card {
    background: #eeeeee;
    border-radius: 0;
    padding: 32px 24px;
    text-align: center;
    color: #000000;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ms-cta-dark-icon  { font-size: 2.5rem; margin-bottom: 14px; display: block; line-height: 1; }
.ms-cta-dark-title { font-size: 1.1rem; font-weight: 800; color: #000000; margin-bottom: 8px; }
.ms-cta-dark-sub   { font-size: 0.82rem; color: rgba(0,0,0,.6); margin-bottom: 22px; line-height: 1.5; }

@media (max-width: 991.98px) {
    .ms-welcome-banner { padding: 16px 20px; }
    .ms-welcome-title  { font-size: 1.2rem; }
    .ms-stat-card      { padding: 16px 18px; }
    .ms-stat-card-value { font-size: 1.7rem; }
    .ms-cta-dark-card  { padding: 28px 20px; height: auto; }
}

/* ================================================================
   32. AUTH PAGES — Step 5 Polish
   ================================================================ */

.ms-auth-wrap {
    display: flex;
    min-height: 100vh;
}

/* Left brand panel */
.ms-auth-brand {
    flex: 0 0 44%;
    background: #eeeeee;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 52px;
    position: relative;
    overflow: hidden;
}

/* Decorative circles */
.ms-auth-brand::before {
    content: '';
    position: absolute;
    width: 420px; height: 420px;
    background: rgba(0,0,0,.06);
    border-radius: 0;
    bottom: -120px; right: -120px;
    pointer-events: none;
}
.ms-auth-brand::after {
    content: '';
    position: absolute;
    width: 220px; height: 220px;
    background: rgba(0,0,0,.04);
    border-radius: 0;
    top: -70px; left: -70px;
    pointer-events: none;
}

.ms-auth-brand-inner {
    position: relative;
    z-index: 1;
    max-width: 340px;
    width: 100%;
}

.ms-auth-logo {
    font-size: 2.4rem;
    font-weight: 900;
    color: #000000;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 6px;
}

.ms-auth-logo-terra { color: #000000; }

.ms-auth-logo-sub {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(0,0,0,.5);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 36px;
    display: block;
}

.ms-auth-tagline {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(0,0,0,.9);
    line-height: 1.5;
    margin-bottom: 36px;
}

.ms-auth-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ms-auth-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: rgba(0,0,0,.75);
    font-size: 0.87rem;
    line-height: 1.4;
}

.ms-auth-feature-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.ms-auth-divider {
    width: 40px; height: 2px;
    background: #000000;
    border-radius: 0;
    margin: 28px 0;
    opacity: .4;
}

/* Right form panel */
.ms-auth-form-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 28px;
    background: #fff;
    overflow-y: auto;
}

.ms-auth-form-box {
    width: 100%;
    max-width: 390px;
}

.ms-auth-form-title {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--ms-ink-900);
    margin-bottom: 5px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.ms-auth-form-sub {
    font-size: 0.88rem;
    color: var(--ms-ink-400);
    margin-bottom: 28px;
}

/* Terracotta focus ring on inputs */
.ms-auth-form-panel .form-control:focus,
.ms-auth-form-panel .form-select:focus {
    border-color: #000000;
    box-shadow: 0 0 0 .18rem rgba(0,0,0,.18);
}

/* Switch link */
.ms-auth-switch {
    text-align: center;
    font-size: 0.85rem;
    color: var(--ms-ink-400);
    margin-top: 20px;
}

.ms-auth-switch a {
    color: #000000;
    font-weight: 600;
    text-decoration: none;
}
.ms-auth-switch a:hover { text-decoration: underline; }

/* Mobile logo (shown when brand panel is hidden) */
.ms-auth-mobile-logo {
    font-size: 1.7rem;
    font-weight: 900;
    color: var(--ms-ink-900);
    letter-spacing: -0.04em;
    line-height: 1;
}

@media (max-width: 991.98px) {
    .ms-auth-form-panel {
        padding: 36px 20px;
        min-height: 100vh;
        justify-content: flex-start;
        padding-top: 48px;
    }
    .ms-auth-form-box { max-width: 420px; }
}

/* ================================================================
   33. CHECKOUT, QR & BOOKING DETAIL — Step 6 Polish
   ================================================================ */

/* Checkout: countdown timer banner */
.ms-checkout-timer-bar {
    background: #eeeeee;
    border: 1px solid rgba(0,0,0,.25);
    border-radius: 0;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.ms-checkout-timer-label { font-size: 0.82rem; color: var(--ms-ink-400); }
.ms-checkout-timer-value {
    font-size: 1.9rem;
    font-weight: 900;
    color: #000000;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Checkout: unit info block */
.ms-checkout-unit-block {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(221,213,207,.6);
    margin-bottom: 16px;
}
.ms-checkout-unit-icon {
    width: 52px; height: 52px;
    background: #eeeeee;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.ms-checkout-unit-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ms-ink-900);
    margin-bottom: 2px;
}
.ms-checkout-unit-sub {
    font-size: 0.82rem;
    color: var(--ms-ink-400);
}
.ms-checkout-info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--ms-ink-900);
    padding: 6px 0;
}
.ms-checkout-info-row + .ms-checkout-info-row {
    border-top: 1px solid rgba(221,213,207,.4);
}
.ms-checkout-info-icon { font-size: 1rem; flex-shrink: 0; width: 22px; text-align: center; }
.ms-checkout-info-label { color: var(--ms-ink-400); min-width: 100px; font-size: 0.82rem; }

/* Checkout: payment method selector */
.ms-pay-methods { display: flex; gap: 10px; margin-bottom: 16px; }
.ms-pay-method-btn {
    flex: 1;
    padding: 12px 8px 10px;
    border: 2px solid rgba(221,213,207,.8);
    border-radius: 0;
    background: #fff;
    cursor: pointer;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ms-ink-400);
    transition: border-color .15s, background .15s, color .15s;
    line-height: 1.3;
}
.ms-pay-method-btn:hover { border-color: rgba(0,0,0,.4); background: #eeeeee; }
.ms-pay-method-btn.active {
    border-color: #000000;
    background: #dddddd;
    color: #000000;
}
.ms-pay-method-icon { font-size: 1.5rem; display: block; margin-bottom: 5px; line-height: 1; }

/* Checkout: price summary rows */
.ms-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    font-size: 0.9rem;
    color: var(--ms-ink-900);
}
.ms-price-row + .ms-price-row { border-top: 1px solid rgba(221,213,207,.5); }
.ms-price-row-label { color: var(--ms-ink-400); }
.ms-price-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0 4px;
    border-top: 2px solid var(--ms-ink-900);
    margin-top: 4px;
}
.ms-price-total-label { font-size: 1rem; font-weight: 700; color: var(--ms-ink-900); }
.ms-price-total-value {
    font-size: 1.5rem;
    font-weight: 900;
    color: #000000;
    letter-spacing: -0.02em;
}

/* QR Page */
.ms-qr-outer { max-width: 440px; margin: 0 auto; }
.ms-qr-amount-display {
    font-size: 2.6rem;
    font-weight: 900;
    color: var(--ms-ink-900);
    letter-spacing: -0.03em;
    line-height: 1;
}
.ms-qr-amount-currency {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ms-ink-400);
    vertical-align: top;
    margin-top: 6px;
    display: inline-block;
}
.ms-qr-ref {
    font-size: 0.75rem;
    color: var(--ms-ink-400);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.ms-qr-frame {
    background: #fff;
    border: 2px solid rgba(221,213,207,.8);
    border-radius: 0;
    padding: 16px;
    display: inline-block;
    box-shadow: 0 4px 20px rgba(26,22,20,.08);
}
.ms-qr-countdown { font-size: 0.85rem; color: var(--ms-ink-400); }
.ms-qr-countdown strong { color: #000000; font-variant-numeric: tabular-nums; }
.ms-qr-status-icon { font-size: 3.5rem; line-height: 1; display: block; margin-bottom: 12px; }

/* Booking status timeline */
.ms-timeline-wrap {
    display: flex;
    align-items: flex-start;
    position: relative;
    overflow-x: auto;
    padding: 4px 0 8px;
    gap: 0;
}
.ms-tl-step {
    flex: 1;
    min-width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.ms-tl-step::after {
    content: '';
    position: absolute;
    top: 13px;
    left: calc(50% + 14px);
    right: calc(-50% + 14px);
    height: 2px;
    background: rgba(221,213,207,.8);
    z-index: 0;
}
.ms-tl-step:last-child::after { display: none; }
.ms-tl-dot {
    width: 28px; height: 28px;
    border-radius: 0;
    background: rgba(221,213,207,.8);
    border: 2px solid rgba(221,213,207,.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--ms-ink-400);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    margin-bottom: 5px;
}
.ms-tl-step.tl-done .ms-tl-dot {
    background: #eeeeee;
    border-color: #000000;
    color: #000000;
}
.ms-tl-step.tl-done::after { background: #eeeeee; }
.ms-tl-step.tl-current .ms-tl-dot {
    background: #fff;
    border-color: #000000;
    color: #000000;
    box-shadow: 0 0 0 3px rgba(0,0,0,.18);
}
.ms-tl-label {
    font-size: 0.62rem;
    color: var(--ms-ink-400);
    text-align: center;
    line-height: 1.3;
    font-weight: 500;
}
.ms-tl-step.tl-done .ms-tl-label,
.ms-tl-step.tl-current .ms-tl-label {
    color: #000000;
    font-weight: 700;
}

/* Booking info rows */
.ms-info-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    font-size: 0.88rem;
}
.ms-info-row + .ms-info-row { border-top: 1px solid rgba(221,213,207,.4); }
.ms-info-label { color: var(--ms-ink-400); min-width: 110px; flex-shrink: 0; font-size: 0.82rem; padding-top: 1px; }
.ms-info-value { color: var(--ms-ink-900); font-weight: 500; }

@media (max-width: 575.98px) {
    .ms-pay-methods { flex-direction: column; }
    .ms-checkout-timer-bar { flex-direction: column; align-items: flex-start; gap: 6px; }
    .ms-price-total-value { font-size: 1.25rem; }
    .ms-qr-amount-display { font-size: 2rem; }
}

/* ================================================================
   34. BOOKING LIST PAGES — Step 7 Polish
   ================================================================ */

/* Pill-style status tabs */
.ms-status-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 22px;
}
.ms-status-tab {
    padding: 6px 16px;
    border-radius: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ms-ink-400);
    background: #fff;
    border: 1.5px solid rgba(221,213,207,.9);
    text-decoration: none;
    transition: all .15s;
    white-space: nowrap;
    line-height: 1.4;
}
.ms-status-tab:hover {
    border-color: rgba(0,0,0,.4);
    color: #000000;
    background: #eeeeee;
    text-decoration: none;
}
.ms-status-tab.is-active {
    background: #dddddd;
    border-color: #000000;
    color: #000000;
}

/* Booking ref — monospace pill */
.ms-booking-ref {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ms-ink-900);
    letter-spacing: .03em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Unit cell: small icon + code + mall stacked */
.ms-booking-unit-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.ms-booking-unit-icon {
    width: 36px; height: 36px;
    background: #eeeeee;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.ms-booking-unit-code {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ms-ink-900);
    line-height: 1.2;
    white-space: nowrap;
}
.ms-booking-mall-name {
    font-size: 0.73rem;
    color: var(--ms-ink-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
}

/* Tenant avatar circle (initials) */
.ms-tenant-avatar {
    width: 34px; height: 34px;
    border-radius: 0;
    background: #eeeeee;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #000000;
    flex-shrink: 0;
    letter-spacing: .01em;
    text-transform: uppercase;
}

/* Booking date range */
.ms-booking-date {
    font-size: 0.82rem;
    color: var(--ms-ink-900);
    white-space: nowrap;
    line-height: 1.3;
}
.ms-booking-date-days {
    font-size: 0.72rem;
    color: var(--ms-ink-400);
    margin-top: 1px;
}

/* Amount in terracotta */
.ms-booking-amount {
    font-weight: 700;
    color: #000000;
    font-size: 0.9rem;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

/* Urgent row — landlord paid-needs-confirm highlight */
.ms-booking-row-urgent td:first-child {
    box-shadow: inset 3px 0 0 #000000;
}

/* Empty-state for booking lists */
.ms-booking-empty {
    padding: 56px 24px;
    text-align: center;
}
.ms-booking-empty-icon {
    font-size: 3rem;
    line-height: 1;
    display: block;
    margin-bottom: 14px;
    opacity: .45;
}
.ms-booking-empty-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ms-ink-900);
    margin-bottom: 5px;
}
.ms-booking-empty-sub {
    font-size: 0.85rem;
    color: var(--ms-ink-400);
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .ms-booking-mall-name { max-width: 120px; }
    .ms-status-tab { padding: 5px 12px; font-size: 0.78rem; }
}

/* ============================================================
   35. PUBLIC / LANDING PAGE — Step 10 Polish
   ============================================================ */

/* Public layout body */
body.ms-public { font-family: var(--ms-font); background: #fff; }

/* Navbar */
.ms-nav {
    position: sticky; top: 0; z-index: 100;
    background: #fff; border-bottom: 1px solid #f0ebe8;
    padding: .85rem 0;
}

/* Breadcrumb on public pages (search/unit detail) */
.ms-public-breadcrumb {
    background: #FFFFFF; border-bottom: 1px solid #f0ebe8;
    padding: 14px 0;
}

/* Hero — fallback section (no slide images available) */
.ms-hero {
    background: #eeeeee;
    padding: 80px 0 60px;
    color: #000000;
    position: relative;
}

/* Hero heading/lead — shared between the fallback section above and the
   photo-overlay version below, via home/partials/hero-content.blade.php */
.ms-hero-heading { font-size: 5.5rem; font-weight: 700; line-height: 1.1; color: #000000; }
.ms-hero-lead     { font-size: 1.4rem; color: rgba(0,0,0,.75); }
.ms-hero-accent { color: #000000; }

/* Hero content overlaid directly on the slide photo — keeps the same
   heading/search-box regardless of which slide is showing, instead of a
   separate block below the carousel (reduces overall hero height).
   Dark semi-transparent scrim (not solid) so the photo stays visible,
   with white heading/lead text for contrast against it. */
.ms-hero-slide-wrap { position: relative; }
.ms-hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    background: rgba(0,0,0,.45);
    z-index: 2;
    pointer-events: none;
}
.ms-hero-overlay .container { width: 100%; }
.ms-hero-overlay a,
.ms-hero-overlay form,
.ms-hero-overlay input,
.ms-hero-overlay select,
.ms-hero-overlay button {
    pointer-events: auto;
}
.ms-hero-overlay .ms-hero-heading {
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.ms-hero-overlay .ms-hero-lead {
    color: rgba(255,255,255,.9);
    text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.ms-hero-overlay .ms-hero-accent { color: #ffffff; }
@media (max-width: 768px) {
    /* On mobile the overlay drops out of the photo (position:static, plain
       gray background below the image) — so its text needs to go back to
       black here, not the white used for the on-photo desktop version. */
    .ms-hero-overlay { position: static; background: #eeeeee; padding: 24px 0; }
    .ms-hero-overlay .ms-hero-heading { color: #000000; text-shadow: none; }
    .ms-hero-overlay .ms-hero-lead { color: rgba(0,0,0,.75); text-shadow: none; }
    .ms-hero-overlay .ms-hero-accent { color: #000000; }
    .ms-hero-slide-wrap .ms-carousel-img { height: 320px; }
}

/* Search box inside hero */
.ms-search-box {
    background: #fff; border-radius: 0;
    padding: 1.25rem; box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.ms-search-box-title {
    font-size: 1.15rem; font-weight: 700; line-height: 1.4;
    color: #000000; margin-bottom: 1rem;
}
.ms-search-box select,
.ms-search-box input {
    border: 1.5px solid #e8e2de; border-radius: 0;
    padding: .65rem 1rem; font-family: var(--ms-font);
    font-size: .95rem; width: 100%; background: #FFFFFF;
}
.ms-search-box select:focus,
.ms-search-box input:focus { outline: none; border-color: #000000; background: #fff; }

/* Search box slot — below 992px it stays a plain stacked column (col-12,
   flows under the heading text as today). From 992px up it's pinned to the
   right edge of the actual viewport (not the Bootstrap container edge —
   .ms-hero-overlay/.ms-hero are the positioned ancestors and both span the
   full browser width), 100px in from that edge, vertically centered. */
@media (min-width: 992px) {
    .ms-hero-search-slot {
        position: absolute;
        top: 50%;
        right: 100px;
        transform: translateY(-50%);
        width: 400px;
        max-width: calc(100% - 140px);
        padding: 0;
        z-index: 3;
    }
}
.ms-search-label { color: var(--ms-ink-900); font-size: .85rem; }
.ms-btn-search  { padding: .75rem; font-size: 1rem; }

/* "How it works" step icon */
.ms-step-icon {
    width: 56px; height: 56px; border-radius: 0;
    background: #eeeeee; color: #000000;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin: 0 auto 1rem;
}

/* Generic section spacing */
.ms-section         { padding: 64px 0; }
.ms-section--cream  { background: #FFFFFF; }
.ms-section--light  { background: #FFFFFF; }

/* Mall image cards (grid on Home page) — proportions/shadow borrowed from .ms-unit-card-v2 */
.ms-mall-card {
    display: block;
    border-radius: 0;
    overflow: hidden;
    border: 1px solid rgba(221,213,207,.6) !important;
    text-decoration: none; color: inherit;
    transition: transform .2s, box-shadow .2s;
    background: #fff;
}
.ms-mall-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(26,22,20,.13);
    color: inherit;
}
.ms-mall-card-img-wrap {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #FFFFFF;
}
.ms-mall-card-img-wrap img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .35s ease;
}
.ms-mall-card:hover .ms-mall-card-img-wrap img { transform: scale(1.05); }
.ms-mall-card-img-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: #000000;
}
.ms-mall-card-img-placeholder-icon { font-size: 2.4rem; opacity: .3; }
.ms-mall-card-unit-badge {
    position: absolute; top: 10px; right: 10px;
    background: rgba(255,255,255,.85); color: #000000;
    font-size: .68rem; font-weight: 600;
    padding: 3px 9px; border-radius: 0;
    backdrop-filter: blur(6px); letter-spacing: .03em;
}
.ms-mall-card-body { padding: 14px 16px 16px; }
.ms-mall-card-name {
    font-size: 1rem; color: var(--ms-ink-900);
    margin-bottom: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-mall-card-meta { font-size: .8rem; color: var(--ms-ink-400); }

/* CTA section */
.ms-section-cta {
    padding: 72px 0;
    background: #eeeeee;
    color: #000000; text-align: center;
}
.ms-cta-sub  { color: rgba(0,0,0,.75); font-size: 1.05rem; margin-bottom: 2rem; }
.ms-btn-cta  { padding: .75rem 2rem; font-size: 1rem; }

/* Footer */
.ms-footer {
    background: #eeeeee; color: rgba(0,0,0,.65);
    padding: 2.5rem 0; font-size: .9rem;
}

/* Hero Carousel. Root cause of "changing the vh number does nothing": with
   no explicit `height`, an <img> defaults to height:auto, i.e. its natural
   aspect-ratio height at its rendered width. Our uploaded mall photos are
   tall enough at full container width (~1900px wide) that this natural
   height already exceeds 60vh/45vh on a typical screen — so min-height,
   which only raises a height that's currently SMALLER than it, was never
   the binding constraint and had zero visible effect no matter what number
   we put there. Must use `height` (a hard box size, not a floor) so
   object-fit:cover actually has something fixed to crop into, regardless
   of any given photo's own proportions. Scoped to min-width:768px like
   xNomad's own reference; below that .ms-hero-slide-wrap .ms-carousel-img
   further down still takes over with its own fixed mobile height. */
.ms-carousel-img {
    object-fit: cover;
    object-position: center top;
    width: 100%;
}

@media (min-width: 768px) {
    .ms-carousel-img {
        height: 70vh;
    }
}

@media (max-width: 768px) {
    .ms-hero-heading { font-size: 2.4rem; }
}

/* Carousel prev/next arrows — Bootstrap centers the icon within its 15%-wide
   click zone by default, leaving it floating well inside the edge instead
   of hugging it. Keep the full-width click zone (still a good hit target)
   but push the icon itself to the outer edge of that zone. */
.carousel-control-prev,
.carousel-control-next {
    padding: 0px;
}
.carousel-control-prev { justify-content: flex-start; }
.carousel-control-next { justify-content: flex-end; }

/* ================================================================
   36. LANDLORD FORM THUMBNAILS + PUBLIC NAV/FOOTER — Step 11 Polish
   ================================================================ */

/* Mall cover image */
.ms-img-cover-thumb { width: 240px; height: 160px; object-fit: cover; border-radius: 0; border: 1px solid #e0e0e0; }
.ms-img-cover-delete-btn { top: 6px !important; right: 6px !important; padding: 2px 8px !important; }

/* Unit image thumbnails */
.ms-img-thumb-wrap { width: 120px; }
.ms-img-thumb      { width: 120px; height: 90px; object-fit: cover; border-radius: 0; border: 1px solid #e0e0e0; }
.ms-img-delete-btn { top: 4px !important; right: 4px !important; width: 22px !important; height: 22px !important; font-size: .7rem !important; border-radius: 0; }
.ms-img-new-badge  { bottom: 4px; left: 4px; font-size: .65rem; }

/* Space Management table thumbnail (small) */
.ms-space-table-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 0; border: 1px solid #e0e0e0; }
.ms-space-table-thumb-placeholder {
    width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
    background: #eeeeee; border: 1px solid #e0e0e0; font-size: 1.25rem;
}

/* Public navbar logo colours */
.ms-logo-primary { color: var(--ms-ink-900); }
.ms-logo-accent  { color: #000000; }

/* Footer links */
.ms-footer-brand      { font-size: 1.1rem; }
.ms-footer-link       { color: rgba(0,0,0,.75); text-decoration: none; }
.ms-footer-link:hover { color: rgba(0,0,0,1); }
.ms-footer-nav-link       { color: rgba(0,0,0,.65); text-decoration: none; }
.ms-footer-nav-link:hover { color: rgba(0,0,0,.9); }
.ms-footer-social-link       { color: rgba(0,0,0,.65); text-decoration: none; display: flex; align-items: center; gap: .5rem; }
.ms-footer-social-link:hover { color: rgba(0,0,0,.85); }
.ms-social-badge         { border-radius: 0; padding: 1px 6px; font-size: .7rem; font-weight: 700; flex-shrink: 0; }
.ms-social-badge--line   { background: #eeeeee; color: #000000; }
.ms-social-badge--fb     { background: #eeeeee; color: #000000; }
.ms-social-badge--ig     { background: #eeeeee; color: #000000; }
.ms-footer-bottom        { border-top: 1px solid rgba(0,0,0,.1); padding-top: 1.25rem; font-size: .8rem; color: rgba(0,0,0,.4); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; align-items: center; }
.ms-footer-legal-links   { display: flex; gap: 1.25rem; }
.ms-footer-legal-link       { color: rgba(0,0,0,.5); text-decoration: none; }
.ms-footer-legal-link:hover { color: rgba(0,0,0,.85); }

/* Cookie consent banner */
.ms-cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #eeeeee; color: rgba(0,0,0,.9); padding: 1rem 1.5rem; box-shadow: 0 -4px 20px rgba(0,0,0,.3); border-top: 1px solid #dddddd; }
.ms-cookie-icon   { font-size: 1.4rem; flex-shrink: 0; }
.ms-cookie-text   { margin: 0; font-size: .875rem; line-height: 1.5; color: rgba(0,0,0,.85); }
.ms-cookie-dismiss { background: rgba(0,0,0,.08); color: #000000; white-space: nowrap; }
.ms-cookie-body   { min-width: 0; }

/* ================================================================
   37. TENANT BOOKING FLOW + LAYOUT + ADMIN — Step 12 Polish
   ================================================================ */

/* Checkout page */
.ms-countdown-icon     { font-size: 1.6rem; line-height: 1; }
.ms-payment-tab-hint   { font-size: .7rem; opacity: .7; }
.ms-promptpay-desc     { font-size: .85rem; }
.ms-mock-alert         { font-size: .82rem; }

/* Booking show (tenant) */
.ms-accordion-caret    { font-size: .7rem; color: var(--ms-ink-400); }
.ms-charge-id          { font-size: .75rem; color: var(--ms-ink-400); }

/* PromptPay QR page */
.ms-mock-badge-icon    { font-size: 1.2rem; }
.ms-amount-label       { font-size: .82rem; }
.ms-qr-instruction     { font-size: .82rem; max-width: 280px; margin: 0 auto 1.5rem; }
.ms-mock-divider       { border-top: 1px solid rgba(221,213,207,.6); padding-top: 20px; margin-top: 8px; }
.ms-mock-sim-label     { font-size: .78rem; }

/* Unit detail page */
.ms-gallery-zoom             { cursor: zoom-in; }
.ms-unit-placeholder-icon    { font-size: 3rem; margin-bottom: 8px; opacity: .4; }
.ms-price-amount             { font-size: 1.35rem; line-height: 1.1; }
.ms-price-per-day-label      { font-size: .75rem; }

/* Landlord bookings table */
.ms-booking-ref-truncate     { max-width: 130px; }

/* Sidebar alert badge */
.ms-menu-alert-badge         { font-size: .65rem !important; padding: 4px !important; }

/* Admin modal */
.ms-admin-modal-backdrop     { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1050; }
.ms-admin-modal-container    { position: fixed; inset: 0; z-index: 1060; }
.ms-admin-modal-centering    { display: flex; align-items: center; justify-content: center; height: 100%; padding: 1rem; }
.ms-admin-modal-dialog       { max-width: 500px; width: 100%; }

/* Admin chart canvas */
.ms-chart-canvas             { max-height: 260px; }

/* ================================================================
   38. ADMIN PANEL REMAINING + MISC — Step 13 Polish
   ================================================================ */

/* Table column widths */
.ms-th-36  { width: 36px; }
.ms-th-90  { width: 90px; }
.ms-th-100 { width: 100px; }
.ms-th-120 { width: 120px; }

/* Empty-state illustration */
.ms-illustration-sm { height: 120px; }

/* Slides list */
.ms-drag-handle { cursor: grab; }
.ms-slide-thumb { width: 100px; height: 60px; object-fit: cover; border-radius: 0; border: 1px solid #f0ebe8; }

/* Slides form */
.ms-slide-preview-img { max-width: 100%; max-height: 300px; object-fit: cover; border-radius: 0; border: 1.5px solid #f0ebe8; }
.ms-tips-list         { line-height: 2; }

/* Auth: register-closed */
.ms-lock-icon { font-size: 3rem; margin-bottom: 1rem; }

/* Review components */
.ms-star-btn     { font-size: 1.6rem; line-height: 1; padding: 0; }
.ms-review-count { font-size: .8rem; }

/* Public page (Terms / Privacy / etc.) */
.ms-page-content-wrap { max-width: 860px; }
.ms-page-title        { font-size: 1.6rem; color: var(--ms-ink-900); }
.ms-page-body         { color: #000000; }
.page-content h2      { font-size: 1.1rem; font-weight: 700; color: var(--ms-ink-900); margin-top: 2rem; margin-bottom: .75rem; }
.page-content h3      { font-size: 1rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: .5rem; }
.page-content p       { margin-bottom: 1rem; }
.page-content ul,
.page-content ol      { margin-bottom: 1rem; padding-left: 1.5rem; }
.page-content li      { margin-bottom: .35rem; }
.page-content strong  { color: var(--ms-ink-900); }
.page-content code    { background: #f5f0ee; padding: 1px 5px; border-radius: 0; font-size: .9em; }

/* Announcements table */
.ms-btn-close-sm  { font-size: .6rem; }

/* Notifications table */
.ms-row-clickable { cursor: pointer; }

/* Admin pages editor */
.ms-textarea-code { line-height: 1.6; }

/* Scheduler / Deploy panel */
.ms-output-area         { white-space: pre-wrap; max-height: 120px; overflow-y: auto; }
.ms-output-area-sm      { white-space: pre-wrap; max-height: 100px; overflow-y: auto; }
.ms-section-divider     { border-bottom: 1px solid #f0ebe7; }
.ms-cron-code           { font-size: 13px; word-break: break-all; }
.ms-step-circle         { width: 28px; height: 28px; font-size: 13px; font-weight: bold; }
.ms-cron-table          { max-width: 380px; }
.ms-table-head-bg       { background: #f5f5f5; }
.ms-table-highlight-row { background: #fff8f0; }
.ms-schedule-item       { background: #f9f9f9; border: 1px solid #eee; }

/* Analytics settings — platform badges */
.ms-badge-gtm    { background: #eeeeee; color: #000000; border-radius: 0; padding: 3px 8px; font-size: .75rem; font-weight: 700; }
.ms-badge-ga4    { background: #eeeeee; color: #000000; border-radius: 0; padding: 3px 8px; font-size: .75rem; font-weight: 700; }
.ms-badge-gtm-sm { background: #eeeeee; color: #000000; border-radius: 0; padding: 1px 6px; font-size: .7rem; font-weight: 700; }
.ms-badge-ga4-sm { background: #eeeeee; color: #000000; border-radius: 0; padding: 1px 6px; font-size: .7rem; font-weight: 700; }
.ms-code-preview { margin: 0; padding: 1rem; font-size: .75rem; background: #eeeeee; color: #000000; border-radius: 0; overflow-x: auto; }

/* Settings shared utilities */
.ms-setting-empty     { font-size: .85rem; }
.ms-setting-link-desc { font-size: .8rem; }

/* Contact settings — platform badges (form labels) */
.ms-badge-line { background: #eeeeee; color: #000000; border-radius: 0; padding: 2px 7px; font-size: .75rem; font-weight: 700; }
.ms-badge-fb   { background: #eeeeee; color: #000000; border-radius: 0; padding: 2px 7px; font-size: .75rem; font-weight: 700; }
.ms-badge-ig   { background: #eeeeee; color: #000000; border-radius: 0; padding: 2px 7px; font-size: .75rem; font-weight: 700; }

/* Contact settings — live preview card */
.ms-sticky-preview      { position: sticky; top: 80px; }
.ms-footer-preview      { background: #eeeeee; color: rgba(0,0,0,.65); padding: 1.5rem; font-size: .85rem; border-radius: 0; }
.ms-preview-brand       { color: #000000; margin-bottom: .25rem; }
.ms-preview-tagline     { margin-bottom: .75rem; }
.ms-preview-contacts    { margin-bottom: .75rem; }
.ms-preview-contact-row { margin-bottom: .25rem; }
.ms-preview-social-row  { margin-top: .5rem; }
.ms-preview-line-badge  { background: #dddddd; color: #000000; border-radius: 0; padding: 3px 10px; font-size: .75rem; }
.ms-preview-fb-badge    { background: #dddddd; color: #000000; border-radius: 0; padding: 3px 10px; font-size: .75rem; }
.ms-preview-ig-badge    { background: #dddddd; color: #000000; border-radius: 0; padding: 3px 10px; font-size: .75rem; }

/* General settings */
.ms-registration-toggle { background: #FFFFFF; border: 1.5px solid #f0ebe8; }
.ms-status-card-row     { background: #FFFFFF; }

/* SEO settings — Google preview box */
.ms-google-preview       { font-family: Arial, sans-serif; }
.ms-google-preview-url   { font-size: .75rem; color: #202124; margin-bottom: 2px; }
.ms-google-preview-title { font-size: 1.1rem; color: #1a0dab; font-weight: 400; line-height: 1.3; margin-bottom: 4px; cursor: pointer; }
.ms-google-preview-desc  { font-size: .85rem; color: #4d5156; line-height: 1.5; }

/* Appearance settings — live font preview box */
.ms-appearance-preview { background: #fdf7f5; border: 1.5px solid #f0ebe8; color: var(--ms-ink-900); }