:root {
    --crs-page-background: var(--crs-page);
    --crs-card-background: var(--crs-card);
    --crs-navy-950: var(--crs-shell);
    --crs-navy-900: var(--crs-shell);
    --crs-navy-800: var(--crs-primary);
    --crs-navy-700: color-mix(in srgb, var(--crs-primary) 88%, var(--crs-shell-foreground));
    --crs-surface: var(--crs-card);
    --crs-surface-soft: var(--crs-page);
    --crs-surface-muted: color-mix(in srgb, var(--crs-primary) 7%, var(--crs-page));
    --crs-border-strong: color-mix(in srgb, var(--crs-border) 72%, var(--crs-text));
    --crs-radius-sm: 0.375rem;
    --crs-radius: 0.5rem;
    --crs-radius-lg: 0.75rem;
    --crs-shadow-sm: 0 1px 2px color-mix(in srgb, var(--crs-shell) 5%, transparent);
    --crs-shadow-md: 0 8px 24px color-mix(in srgb, var(--crs-shell) 8%, transparent);
    --crs-shadow: var(--crs-shadow-sm);
    --crs-focus: 0 0 0 0.2rem color-mix(in srgb, var(--crs-accent) 32%, transparent);
    --crs-text-body: 0.8125rem;
    --crs-text-label: 0.72rem;
    --crs-text-title: 1rem;
    --crs-text-price: 0.875rem;
    --crs-text-price-total: 1.125rem;
    --crs-control-h: 32px;
    --crs-control-h-lg: 36px;
    --crs-font-weight-body: 400;
    --crs-font-weight-label: 500;
    --crs-font-weight-title: 600;
    --crs-font-weight-emphasis: 700;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body.crs-app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow-x: hidden;
    background: var(--crs-surface-soft);
    color: var(--crs-text);
    font-family: "Inter", "Segoe UI", sans-serif;
    font-size: var(--crs-text-body);
    font-weight: var(--crs-font-weight-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

body.crs-app * {
    box-sizing: border-box;
}

body.crs-app .crs-main {
    width: 100%;
    flex: 1 0 auto;
    padding-top: 1rem;
    padding-bottom: 2rem;
}

body.crs-app h1,
body.crs-app h2 {
    color: var(--crs-heading);
    font-family: "Inter", "Segoe UI", sans-serif;
    font-weight: var(--crs-font-weight-title);
    letter-spacing: -0.02em;
}

body.crs-app h3,
body.crs-app h4,
body.crs-app h5,
body.crs-app h6 {
    color: var(--crs-heading-secondary);
    font-family: "Inter", "Segoe UI", sans-serif;
    font-weight: var(--crs-font-weight-title);
    letter-spacing: -0.02em;
}

body.crs-app a {
    color: var(--crs-heading-secondary);
    text-underline-offset: 0.16em;
}

body.crs-app a:hover {
    color: var(--crs-heading);
}

/* Application shell */
.crs-site-header {
    position: sticky;
    top: 0;
    z-index: 1040;
    background: var(--crs-navy-950);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--crs-shell-foreground) 8%, transparent), 0 4px 16px color-mix(in srgb, var(--crs-shell) 12%, transparent);
}

body.crs-app .crs-navbar,
body.crs-app .bg-primary {
    background: var(--crs-navy-950) !important;
}

body.crs-app .crs-navbar {
    min-height: 56px;
    padding: 0.35rem 0;
}

.crs-navbar .navbar-brand {
    min-width: 9rem;
}

.crs-navbar .hotel-brand-logo__img {
    height: 48px;
    max-width: 200px;
}

.crs-navbar .nav-link {
    position: relative;
    margin: 0 0.12rem;
    padding: 0.65rem 0.8rem !important;
    border-radius: var(--crs-radius-sm);
    color: color-mix(in srgb, var(--crs-shell-foreground) 78%, transparent) !important;
    font-size: 0.875rem;
    font-weight: 600;
    transition: color 160ms ease, background-color 160ms ease;
}

.crs-navbar .nav-link:hover,
.crs-navbar .nav-link:focus-visible {
    background: color-mix(in srgb, var(--crs-shell-foreground) 9%, transparent);
    color: var(--crs-shell-foreground) !important;
}

.crs-navbar .nav-link.active {
    background: color-mix(in srgb, var(--crs-accent) 15%, transparent);
    color: var(--crs-shell-foreground) !important;
}

.crs-navbar .nav-link.active::after {
    content: "";
    position: absolute;
    right: 0.8rem;
    bottom: 0.3rem;
    left: 0.8rem;
    height: 2px;
    border-radius: 1px;
    background: var(--crs-accent);
}

.crs-navbar .crs-register-link {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    margin-left: 0.5rem;
    padding: 0.35rem 0.75rem;
    white-space: nowrap;
    border: 1px solid var(--crs-accent);
    border-radius: var(--crs-radius-sm);
    background: var(--crs-accent);
    color: var(--crs-accent-foreground) !important;
    font-size: 0.8125rem;
    font-weight: var(--crs-font-weight-emphasis);
    line-height: 1;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.crs-navbar .crs-register-item {
    display: flex;
    align-items: center;
}

.crs-navbar .crs-register-link:hover,
.crs-navbar .crs-register-link.active {
    border-color: var(--crs-accent) !important;
    background: var(--crs-accent) !important;
    color: var(--crs-accent-foreground) !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--crs-accent) 24%, transparent);
}

.crs-navbar .crs-register-link:active {
    transform: translateY(1px);
}

.crs-navbar .crs-register-link:focus-visible {
    outline: 0;
    box-shadow: var(--crs-focus);
}

.crs-navbar .crs-register-link[aria-disabled="true"],
.crs-navbar .crs-register-link.disabled {
    pointer-events: none;
    opacity: 0.58;
}

.crs-navbar .dropdown-menu {
    padding: 0.4rem;
    border: 1px solid var(--crs-border);
    border-radius: var(--crs-radius);
    background: var(--crs-surface);
    color: var(--crs-text);
    box-shadow: var(--crs-shadow-md);
}

.crs-navbar .dropdown-item {
    min-height: 32px;
    display: flex;
    align-items: center;
    border-radius: 0.35rem;
    color: var(--crs-text);
}

.crs-navbar .dropdown-item:hover,
.crs-navbar .dropdown-item:focus,
.crs-navbar .dropdown-item.active {
    background: var(--crs-surface-muted) !important;
    color: var(--crs-heading-secondary) !important;
}

.crs-navbar .dropdown-divider {
    border-color: var(--crs-border);
    opacity: 1;
}

/* Shared surfaces and controls */
body.crs-app .card,
body.crs-app .summary-card,
body.crs-app .booking-container,
body.crs-app .containerStay,
body.crs-app .info-section,
body.crs-app .survey-container {
    border: 1px solid var(--crs-border);
    border-radius: var(--crs-radius) !important;
    background: var(--crs-surface);
    color: var(--crs-text);
    box-shadow: var(--crs-shadow-sm) !important;
}

body.crs-app .card-header,
body.crs-app .summary-header,
body.crs-app .profile-card .card-header {
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--crs-border);
    background: var(--crs-navy-900) !important;
    color: var(--crs-shell-foreground) !important;
}

body.crs-app .card-header h1,
body.crs-app .card-header h2,
body.crs-app .card-header h3,
body.crs-app .card-header h4,
body.crs-app .card-header h5,
body.crs-app .card-header h6,
body.crs-app .summary-header,
body.crs-app .profile-card .card-header h5 {
    color: var(--crs-shell-foreground) !important;
}

body.crs-app .card-body {
    padding: 0.75rem;
}

body.crs-app .btn,
body.crs-app button,
body.crs-app .button,
body.crs-app .book-now {
    min-height: var(--crs-control-h);
    border-radius: var(--crs-radius-sm);
    font-family: inherit;
    font-size: var(--crs-text-body);
    font-weight: var(--crs-font-weight-title);
    letter-spacing: 0;
}

body.crs-app .btn-primary,
body.crs-app .btn-dark,
body.crs-app .button,
body.crs-app .book-now:first-child {
    border-color: var(--crs-accent) !important;
    background: var(--crs-accent) !important;
    color: var(--crs-accent-foreground) !important;
    box-shadow: none;
}

body.crs-app .btn-primary:hover,
body.crs-app .btn-dark:hover,
body.crs-app .button:hover,
body.crs-app .book-now:first-child:hover {
    border-color: color-mix(in srgb, var(--crs-accent) 78%, var(--crs-accent-foreground)) !important;
    background: color-mix(in srgb, var(--crs-accent) 86%, var(--crs-card)) !important;
    color: var(--crs-accent-foreground) !important;
}

body.crs-app .btn-secondary,
body.crs-app .book-now:not(:first-child),
body.crs-app .btn-outline-primary,
body.crs-app .btn-outline-secondary,
body.crs-app .btn-outline-dark {
    border-color: var(--crs-border-strong) !important;
    background: var(--crs-surface) !important;
    color: var(--crs-text) !important;
}

body.crs-app .btn-secondary:hover,
body.crs-app .btn-secondary:focus,
body.crs-app .book-now:not(:first-child):hover,
body.crs-app .book-now:not(:first-child):focus,
body.crs-app .btn-outline-primary:hover,
body.crs-app .btn-outline-primary:focus,
body.crs-app .btn-outline-secondary:hover,
body.crs-app .btn-outline-secondary:focus,
body.crs-app .btn-outline-dark:hover,
body.crs-app .btn-outline-dark:focus {
    border-color: var(--crs-primary) !important;
    background: var(--crs-primary) !important;
    color: var(--crs-primary-foreground) !important;
}

body.crs-app .btn:disabled,
body.crs-app .btn.disabled,
body.crs-app button:disabled {
    cursor: not-allowed;
    opacity: 0.58;
    box-shadow: none !important;
}

body.crs-app .btn-info {
    border-color: var(--crs-info) !important;
    background: var(--crs-info) !important;
    color: var(--crs-info-foreground) !important;
}

body.crs-app .btn-success {
    border-color: var(--crs-success) !important;
    background: var(--crs-success) !important;
    color: var(--crs-success-foreground) !important;
}

body.crs-app .btn-danger {
    border-color: var(--crs-danger) !important;
    background: var(--crs-danger) !important;
    color: var(--crs-danger-foreground) !important;
}

body.crs-app .btn:focus-visible,
body.crs-app button:focus-visible,
body.crs-app a:focus-visible,
body.crs-app input:focus-visible,
body.crs-app select:focus-visible,
body.crs-app textarea:focus-visible {
    outline: 2px solid var(--crs-accent);
    outline-offset: 2px;
    box-shadow: var(--crs-focus) !important;
}

body.crs-app .form-label {
    margin-bottom: 0.25rem;
    color: var(--crs-text);
    font-size: var(--crs-text-label);
    font-weight: var(--crs-font-weight-label);
}

body.crs-app .form-control,
body.crs-app .form-select,
body.crs-app .input-group-text {
    min-height: var(--crs-control-h);
    border: 1px solid var(--crs-border-strong);
    border-radius: var(--crs-radius-sm);
    background-color: var(--crs-surface);
    color: var(--crs-text);
    font-family: inherit;
    font-size: var(--crs-text-body);
    font-weight: var(--crs-font-weight-body);
}

body.crs-app .form-control::placeholder,
body.crs-app textarea::placeholder {
    color: var(--crs-text-muted);
    opacity: 1;
}

body.crs-app .form-control:focus,
body.crs-app .form-select:focus {
    border-color: var(--crs-accent);
    box-shadow: var(--crs-focus);
}

body.crs-app .form-control:disabled,
body.crs-app .form-control[readonly],
body.crs-app .form-select:disabled,
body.crs-app .input-group-text {
    border-color: var(--crs-border);
    background-color: var(--crs-surface-muted);
    color: var(--crs-text-muted);
    opacity: 1;
}

body.crs-app .form-select option {
    background: var(--crs-surface);
    color: var(--crs-text);
}

body.crs-app .form-check-input:checked {
    border-color: var(--crs-accent);
    background-color: var(--crs-accent);
}

body.crs-app input:-webkit-autofill,
body.crs-app input:-webkit-autofill:hover,
body.crs-app input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--crs-text);
    box-shadow: 0 0 0 1000px var(--crs-card) inset !important;
    caret-color: var(--crs-text);
}

body.crs-app .required-field::after {
    color: var(--crs-text) !important;
}

body.crs-app .text-muted {
    color: var(--crs-text-muted) !important;
}

body.crs-app .text-dark,
body.crs-app .text-body,
body.crs-app .text-secondary {
    color: var(--crs-text) !important;
}

body.crs-app .text-light {
    color: var(--crs-shell-foreground) !important;
}

body.crs-app .bg-light {
    background-color: var(--crs-surface-muted) !important;
    color: var(--crs-text) !important;
}

body.crs-app .bg-dark {
    background-color: var(--crs-shell) !important;
    color: var(--crs-shell-foreground) !important;
}

body.crs-app .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--crs-text);
    --bs-table-border-color: var(--crs-border);
    --bs-table-striped-bg: var(--crs-surface-soft);
    --bs-table-striped-color: var(--crs-text);
    --bs-table-hover-bg: var(--crs-surface-muted);
    --bs-table-hover-color: var(--crs-text);
    margin-bottom: 0;
    color: var(--crs-text);
}

body.crs-app .table > :not(caption) > * > * {
    padding: 0.7rem 0.75rem;
    border-bottom-color: var(--crs-border);
    vertical-align: middle;
}

body.crs-app .table thead th,
body.crs-app th {
    border-color: var(--crs-navy-700);
    background: var(--crs-navy-800) !important;
    color: var(--crs-primary-foreground) !important;
    font-size: var(--crs-text-label);
    font-weight: var(--crs-font-weight-title);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.crs-app .alert {
    border: 1px solid var(--crs-border);
    border-width: 1px;
    border-radius: var(--crs-radius-sm);
    background: var(--crs-surface);
    color: var(--crs-text);
}

body.crs-app .alert-success {
    border-left: 4px solid var(--crs-success);
}

body.crs-app .alert-warning {
    border-left: 4px solid var(--crs-warning);
}

body.crs-app .alert-danger {
    border-left: 4px solid var(--crs-danger);
}

body.crs-app .alert-info {
    border-left: 4px solid var(--crs-info);
}

body.crs-app .alert-secondary {
    border-left: 4px solid var(--crs-border-strong);
}

body.crs-app .alert .alert-link {
    color: var(--crs-heading-secondary);
}

body.crs-app .badge {
    padding: 0.35em 0.55em;
    border-radius: 999px;
    font-weight: var(--crs-font-weight-title);
}

body.crs-app .badge.bg-primary {
    background: var(--crs-primary) !important;
    color: var(--crs-primary-foreground) !important;
}

body.crs-app .badge.bg-success {
    background: var(--crs-success) !important;
    color: var(--crs-success-foreground) !important;
}

body.crs-app .badge.bg-warning {
    background: var(--crs-warning) !important;
    color: var(--crs-warning-foreground) !important;
}

body.crs-app .badge.bg-danger {
    background: var(--crs-danger) !important;
    color: var(--crs-danger-foreground) !important;
}

body.crs-app .badge.bg-info {
    background: var(--crs-info) !important;
    color: var(--crs-info-foreground) !important;
}

body.crs-app .badge.bg-secondary,
body.crs-app .badge.bg-light {
    border: 1px solid var(--crs-border-strong);
    background: var(--crs-surface-muted) !important;
    color: var(--crs-text) !important;
}

body.crs-app .invalid-feedback,
body.crs-app .field-validation-error,
body.crs-app .validation-summary-errors {
    color: var(--crs-text) !important;
    font-weight: 600;
}

body.crs-app .accordion-item {
    margin-bottom: 0.7rem;
    overflow: hidden;
    border: 1px solid var(--crs-border);
    border-radius: var(--crs-radius) !important;
    background: var(--crs-surface);
    color: var(--crs-text);
    box-shadow: none;
}

body.crs-app .accordion-button {
    min-height: 50px;
    background: var(--crs-surface);
    color: var(--crs-text);
}

body.crs-app .accordion-button:not(.collapsed) {
    background: var(--crs-surface-muted);
    color: var(--crs-heading-secondary);
    box-shadow: inset 0 -1px 0 var(--crs-border);
}

body.crs-app .modal-content {
    overflow: hidden;
    border: 1px solid var(--crs-border);
    border-radius: var(--crs-radius);
    background: var(--crs-surface);
    color: var(--crs-text);
    box-shadow: 0 24px 64px color-mix(in srgb, var(--crs-shell) 28%, transparent);
}

body.crs-app .modal-footer {
    border-top-color: var(--crs-border);
}

body.crs-app .list-group-item {
    border-color: var(--crs-border);
    background: var(--crs-surface);
    color: var(--crs-text);
}

body.crs-app .list-group-item.active {
    border-color: var(--crs-primary);
    background: var(--crs-primary);
    color: var(--crs-primary-foreground);
}

body.crs-app .nav-tabs {
    border-bottom-color: var(--crs-border);
}

body.crs-app .nav-tabs .nav-link {
    border-color: transparent;
    color: var(--crs-text-muted);
}

body.crs-app .nav-tabs .nav-link:hover,
body.crs-app .nav-tabs .nav-link:focus {
    border-color: var(--crs-border);
    background: var(--crs-surface-muted);
    color: var(--crs-heading);
}

body.crs-app .nav-tabs .nav-link.active {
    border-color: var(--crs-border) var(--crs-border) var(--crs-surface);
    background: var(--crs-surface);
    color: var(--crs-heading-secondary);
}

body.crs-app .page-link {
    border-color: var(--crs-border);
    background: var(--crs-surface);
    color: var(--crs-text);
}

body.crs-app .page-link:hover,
body.crs-app .page-link:focus {
    border-color: var(--crs-primary);
    background: var(--crs-primary);
    color: var(--crs-primary-foreground);
}

body.crs-app .page-item.active .page-link {
    border-color: var(--crs-accent);
    background: var(--crs-accent);
    color: var(--crs-accent-foreground);
}

body.crs-app .modal-header {
    border-bottom: 1px solid color-mix(in srgb, var(--crs-shell-foreground) 10%, transparent);
    background: var(--crs-navy-900) !important;
    color: var(--crs-shell-foreground);
}

body.crs-app .modal-header .modal-title {
    color: var(--crs-shell-foreground);
}

body.crs-app .modal-header .btn-close {
    filter: invert(1) grayscale(1);
}

/* SweetAlert2 — dark CRS card skin (titles are h2; override light-on-white clash) */
body.crs-app .swal2-popup {
    background: var(--crs-card);
    color: var(--crs-text);
    border: 1px solid var(--crs-border);
    border-radius: var(--crs-radius);
    box-shadow: 0 24px 64px color-mix(in srgb, var(--crs-shell) 28%, transparent);
    font-family: inherit;
    font-size: var(--crs-text-body, 0.8125rem);
}

body.crs-app .swal2-title {
    color: var(--crs-heading) !important;
    font-size: var(--crs-text-title, 1rem);
    font-weight: var(--crs-font-weight-title, 600);
    letter-spacing: -0.01em;
}

body.crs-app .swal2-html-container,
body.crs-app .swal2-content {
    color: var(--crs-text);
    font-size: var(--crs-text-body, 0.8125rem);
    font-weight: var(--crs-font-weight-body, 400);
    line-height: 1.5;
}

body.crs-app .swal2-actions {
    gap: 0.5rem;
}

body.crs-app .swal2-actions .swal2-confirm {
    min-height: var(--crs-control-h-lg, 36px);
    padding: 0.4rem 1rem;
    border: 1px solid var(--crs-accent);
    border-radius: var(--crs-radius-sm);
    background: var(--crs-accent) !important;
    color: var(--crs-accent-foreground) !important;
    font-size: var(--crs-text-body, 0.8125rem);
    font-weight: var(--crs-font-weight-emphasis, 700);
    box-shadow: none;
}

body.crs-app .swal2-actions .swal2-confirm:hover,
body.crs-app .swal2-actions .swal2-confirm:focus {
    background: color-mix(in srgb, var(--crs-accent) 86%, var(--crs-shell)) !important;
    border-color: color-mix(in srgb, var(--crs-accent) 78%, var(--crs-shell));
    box-shadow: none;
}

body.crs-app .swal2-actions .swal2-cancel,
body.crs-app .swal2-actions .swal2-deny {
    min-height: var(--crs-control-h-lg, 36px);
    padding: 0.4rem 1rem;
    border: 1px solid var(--crs-border-strong);
    border-radius: var(--crs-radius-sm);
    background: transparent !important;
    color: var(--crs-text) !important;
    font-size: var(--crs-text-body, 0.8125rem);
    font-weight: var(--crs-font-weight-title, 600);
    box-shadow: none;
}

body.crs-app .swal2-actions .swal2-cancel:hover,
body.crs-app .swal2-actions .swal2-deny:hover {
    background: var(--crs-surface-muted) !important;
    border-color: var(--crs-accent);
    color: var(--crs-heading) !important;
}

body.crs-app .swal2-icon.swal2-warning {
    border-color: var(--crs-warning);
    color: var(--crs-warning);
}

body.crs-app .swal2-icon.swal2-warning .swal2-icon-content {
    color: var(--crs-warning);
}

body.crs-app .swal2-icon.swal2-success {
    border-color: var(--crs-success);
    color: var(--crs-success);
}

body.crs-app .swal2-icon.swal2-error {
    border-color: var(--crs-danger);
    color: var(--crs-danger);
}

body.crs-app .swal2-icon.swal2-info {
    border-color: var(--crs-info);
    color: var(--crs-info);
}

/* Search and booking journey */
.amenity-icon {
    line-height: 1.5;
}

.room-card-view .card {
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.room-card-view .txtplanname {
    cursor: pointer;
    transition: color 160ms ease;
}

.roomtype-carousel .carousel-item img,
#roomDetailsModal .carousel-item img {
    cursor: pointer;
}

.modal-room-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.modal-room-amenities {
    grid-column: 1 / -1;
}

.modal-amenity-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.modal-amenity-list .amenity-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 200px;
}

body.crs-app .maintitle {
    margin: 0.25rem 0 0.65rem;
    color: var(--crs-heading);
    font-size: clamp(1.15rem, 1.8vw, 1.45rem) !important;
}

body.crs-app .maintitle::before {
    content: "BOOK DIRECT";
    display: block;
    margin-bottom: 0.35rem;
    color: var(--crs-heading-secondary);
    font-size: 0.7rem;
    font-weight: var(--crs-font-weight-title);
    letter-spacing: 0.18em;
}

body.crs-app .searhCrs {
    position: relative;
    z-index: 10;
}

body.crs-app .booking-containerCrs {
    display: grid;
    grid-template-columns: minmax(180px, 1.1fr) minmax(245px, 1.3fr) minmax(120px, 0.75fr) minmax(160px, 0.9fr) auto;
    gap: 0.65rem;
    align-items: end;
    width: 100%;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--crs-shell-foreground) 10%, transparent);
    border-radius: var(--crs-radius);
    background: var(--crs-navy-900) !important;
    box-shadow: var(--crs-shadow-sm);
}

body.crs-app .booking-field,
body.crs-app .booking-fieldDateSelector {
    position: relative;
    width: 100% !important;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0;
}

body.crs-app .booking-field .icon1,
body.crs-app .booking-field .icon2 {
    position: absolute;
    left: 0.85rem;
    z-index: 2;
    color: var(--crs-shell-foreground);
}

body.crs-app .booking-field input,
body.crs-app .booking-field .person_filled_button {
    width: 100%;
    min-height: var(--crs-control-h-lg);
    padding: 0.45rem 0.7rem 0.45rem 2.25rem;
    border: 1px solid color-mix(in srgb, var(--crs-shell-foreground) 16%, transparent);
    border-radius: var(--crs-radius-sm);
    background: color-mix(in srgb, var(--crs-shell) 88%, var(--crs-shell-foreground));
    color: var(--crs-shell-foreground);
    text-align: left;
    font-size: var(--crs-text-body);
    font-weight: var(--crs-font-weight-label);
}

body.crs-app .booking-field input::placeholder {
    color: color-mix(in srgb, var(--crs-shell-foreground) 66%, transparent);
}

body.crs-app .booking-containerCrs > .d-flex {
    min-width: 195px;
    align-items: stretch;
}

body.crs-app .book-now {
    min-height: var(--crs-control-h-lg);
    padding: 0.4rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--crs-shell-foreground) 22%, transparent);
    background: transparent;
    color: var(--crs-shell-foreground);
    font-size: var(--crs-text-label);
    font-weight: var(--crs-font-weight-title);
    white-space: nowrap;
}

body.crs-app .book-now:first-child {
    font-weight: var(--crs-font-weight-emphasis);
}

body.crs-app .popup-container {
    top: calc(100% + 0.6rem);
    right: 0;
    left: auto;
    min-width: min(340px, calc(100vw - 2rem));
    padding: 1rem;
    border: 1px solid var(--crs-border);
    border-radius: var(--crs-radius);
    background: var(--crs-surface);
    color: var(--crs-text);
    box-shadow: var(--crs-shadow-md);
}

body.crs-app .popup-container .header {
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--crs-border);
    color: var(--crs-text);
}

body.crs-app .popup-container .counter button,
body.crs-app .popup-container .add-room button {
    min-width: 36px;
    min-height: 36px;
    border: 1px solid var(--crs-border-strong);
    background: var(--crs-surface);
    color: var(--crs-heading-secondary);
}

.booking-progress {
    margin: 0.9rem 0 1.25rem;
}

.booking-progress ol {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}

.booking-progress li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    color: var(--crs-text-muted);
    font-size: var(--crs-text-label);
    font-weight: var(--crs-font-weight-label);
}

.booking-progress li:not(:last-child)::after {
    content: "";
    flex: 1;
    height: 1px;
    margin-right: 0.5rem;
    background: var(--crs-border-strong);
}

.booking-progress li span {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--crs-border-strong);
    border-radius: 50%;
    background: var(--crs-surface);
    color: var(--crs-text-muted);
    font-size: 0.68rem;
    font-weight: var(--crs-font-weight-title);
}

.booking-progress li.is-active {
    color: var(--crs-text);
    font-weight: var(--crs-font-weight-title);
}

.booking-progress li.is-active span {
    border-color: var(--crs-accent);
    background: var(--crs-accent);
    color: var(--crs-accent-foreground);
}

body.crs-app .package-filter-wrapper {
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-color: var(--crs-border) transparent;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

body.crs-app .package-filter-list {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: max-content;
    min-width: max-content;
    isolation: isolate;
}

body.crs-app .package-filter-wrapper .package-filter-btn {
    position: relative;
    z-index: 0;
    flex: 0 0 auto;
    min-height: var(--crs-control-h);
    margin: 0;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--crs-border-strong);
    border-radius: 0;
    background: transparent;
    color: var(--crs-text);
    font-size: var(--crs-text-body);
    font-weight: var(--crs-font-weight-label);
    white-space: nowrap;
    text-transform: capitalize;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

body.crs-app .package-filter-wrapper .package-filter-btn + .package-filter-btn {
    margin-left: -1px;
}

body.crs-app .package-filter-wrapper .package-filter-btn:first-child {
    border-radius: 999px 0 0 999px;
}

body.crs-app .package-filter-wrapper .package-filter-btn:last-child {
    border-radius: 0 999px 999px 0;
}

body.crs-app .package-filter-wrapper .package-filter-btn:only-child {
    border-radius: 999px;
}

body.crs-app .package-filter-wrapper .package-filter-btn:hover,
body.crs-app .package-filter-wrapper .package-filter-btn:focus-visible {
    z-index: 2;
    border-color: var(--crs-accent);
    background: var(--crs-surface-muted);
    color: var(--crs-heading);
}

body.crs-app .package-filter-wrapper .package-filter-btn:focus-visible {
    outline-offset: -3px;
    box-shadow: none !important;
}

body.crs-app .package-filter-wrapper .package-filter-btn:focus:not(:focus-visible) {
    outline: 0;
    box-shadow: none !important;
}

body.crs-app .package-filter-wrapper .package-filter-btn.active {
    z-index: 1;
    border-color: var(--crs-primary) !important;
    background: var(--crs-primary) !important;
    color: var(--crs-primary-foreground) !important;
    font-weight: var(--crs-font-weight-title);
}

body.crs-app .package-filter-wrapper .package-filter-btn:disabled,
body.crs-app .package-filter-wrapper .package-filter-btn.disabled {
    border-color: var(--crs-border) !important;
    background: var(--crs-surface-muted) !important;
    color: var(--crs-text-muted) !important;
}

body.crs-app .crsContainer > .row > .booking-addons-panel {
    align-self: flex-start;
    padding: 1rem !important;
    border: 1px solid var(--crs-border) !important;
    border-radius: var(--crs-radius) !important;
    background: var(--crs-surface-muted) !important;
    box-shadow: var(--crs-shadow-sm);
}

body.crs-app .crsContainer > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 1rem;
    margin: 0;
}

body.crs-app .crsContainer > .row > [class*="col-md-"] {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
}

body.crs-app .room-card-view {
    padding: 0.6rem 0 !important;
}

body.crs-app .room-result-card {
    overflow: hidden;
    border: 1px solid var(--crs-border) !important;
    border-radius: var(--crs-radius) !important;
    background: var(--crs-surface-muted) !important;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

body.crs-app .room-result-card:hover {
    border-color: color-mix(in srgb, var(--crs-accent) 55%, var(--crs-border)) !important;
    box-shadow: var(--crs-shadow-md) !important;
}

body.crs-app .room-card-main {
    display: grid;
    grid-template-columns: minmax(250px, 34%) minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem 1rem 0.75rem;
}

body.crs-app .room-card-media {
    width: 100%;
    aspect-ratio: 16 / 10;
    align-self: start;
    overflow: hidden;
    border-radius: var(--crs-radius-sm);
    background: var(--crs-card);
}

body.crs-app .room-card-media .carousel,
body.crs-app .room-card-media .carousel-inner,
body.crs-app .room-card-media .carousel-item,
body.crs-app .room-card-media .carousel-item img {
    width: 100%;
    height: 100%;
    min-height: 0;
}

body.crs-app .room-card-media .carousel-item img {
    display: block;
    border-radius: 0;
    object-fit: cover;
    object-position: center;
}

body.crs-app .room-card-image-placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--crs-text-muted);
    background: var(--crs-card);
    font-size: 0.875rem;
}

body.crs-app .room-card-image-placeholder .bi {
    font-size: 1.5rem;
}

body.crs-app .room-card-content {
    min-width: 0;
    padding: 0.15rem 0;
}

body.crs-app .room-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

body.crs-app .room-card-title-group {
    min-width: 0;
}

body.crs-app .room-rate-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

body.crs-app .room-rate-label {
    color: var(--crs-text-muted);
    font-size: var(--crs-text-label);
    font-weight: var(--crs-font-weight-title);
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}

body.crs-app .room-title-heading {
    margin: 0;
}

body.crs-app .discounttag {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding: 0.15rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--crs-accent) 65%, var(--crs-border));
    border-radius: 999px;
    color: var(--crs-accent-foreground);
    background: var(--crs-accent);
    font-size: 0.7rem;
    font-weight: var(--crs-font-weight-title);
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
}

body.crs-app .room-title-button {
    display: inline-flex;
    max-width: 100%;
    min-height: 2rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--crs-radius-sm);
    color: var(--crs-heading);
    background: transparent;
    font: inherit;
    font-size: var(--crs-text-title);
    font-weight: var(--crs-font-weight-title);
    line-height: 1.35;
    text-align: left;
}

body.crs-app .room-title-button .fa-solid {
    flex: 0 0 auto;
    color: var(--crs-text-muted);
    font-size: 0.9rem;
}

body.crs-app .room-title-button:hover {
    color: var(--crs-heading-secondary);
}

body.crs-app .room-title-button:focus-visible {
    outline: 2px solid var(--crs-accent);
    outline-offset: 4px;
}

body.crs-app .room-card-price {
    display: flex;
    flex: 0 0 auto;
    align-items: baseline;
    gap: 0.45rem;
    margin: 0;
    color: var(--crs-heading);
    white-space: nowrap;
}

body.crs-app .room-card-price del {
    position: relative;
    display: inline-block;
    color: var(--crs-text-muted);
    font-size: var(--crs-text-price);
    font-weight: var(--crs-font-weight-label);
    text-decoration: none;
}

body.crs-app .room-card-price del::before,
body.crs-app .room-card-price del::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

body.crs-app .room-card-price del::before {
    background: linear-gradient(
        to bottom right,
        transparent calc(50% - 0.5px),
        var(--crs-danger) calc(50% - 0.5px),
        var(--crs-danger) calc(50% + 0.5px),
        transparent calc(50% + 0.5px)
    );
}

body.crs-app .room-card-price del::after {
    background: linear-gradient(
        to top right,
        transparent calc(50% - 0.5px),
        var(--crs-danger) calc(50% - 0.5px),
        var(--crs-danger) calc(50% + 0.5px),
        transparent calc(50% + 0.5px)
    );
}

body.crs-app .room-card-current-price {
    color: var(--crs-heading) !important;
    font-size: 1.25rem;
    font-weight: var(--crs-font-weight-title);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

body.crs-app .room-card-current-price sup {
    position: relative;
    top: -0.75em;
    margin-right: 0.03em;
    font-size: 0.5em;
    line-height: 0;
    vertical-align: baseline;
}

body.crs-app .room-guest-meta,
body.crs-app .room-description {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0.45rem 0 0;
    color: var(--crs-text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

body.crs-app .room-guest-meta .fa-solid {
    margin-top: 0.2rem;
    flex: 0 0 auto;
}

body.crs-app .room-card-footer {
    padding: 0 1rem 1rem;
}

body.crs-app .room-amenities {
    min-height: 2.75rem;
    padding: 0.55rem 0 0.75rem;
}

body.crs-app .room-amenities-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.1rem;
    margin: 0;
    padding: 0;
    color: var(--crs-text-muted);
    list-style: none;
}

body.crs-app .room-amenities-list .amenity-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

body.crs-app .room-amenities-list .amenity-item i {
    width: 1rem;
    color: var(--crs-text-muted);
    text-align: center;
}

body.crs-app .amenity-loading,
body.crs-app .amenity-error,
body.crs-app .amenity-empty {
    color: var(--crs-text-muted);
    font-size: 0.875rem;
}

body.crs-app .room-card-actions {
    display: grid !important;
    grid-template-columns: minmax(170px, 1fr) auto auto;
    align-items: center;
    gap: 0.75rem;
    margin: 0 !important;
    padding: 1rem 0 0;
    border-top: 1px solid var(--crs-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.crs-app .availability-calendar-toggle {
    display: inline-flex;
    min-width: 0;
    min-height: var(--crs-control-h);
    align-items: center;
    justify-self: start;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border: 0;
    border-radius: var(--crs-radius-sm);
    color: var(--crs-heading-secondary);
    background: transparent;
    font: inherit;
    font-size: var(--crs-text-body);
    font-weight: var(--crs-font-weight-title);
    text-align: left;
}

body.crs-app .availability-calendar-toggle:hover {
    background: color-mix(in srgb, var(--crs-primary) 10%, var(--crs-card));
}

body.crs-app .availability-calendar-toggle:focus-visible {
    outline: 2px solid var(--crs-accent);
    outline-offset: 2px;
}

body.crs-app .availability-toggle-chevron {
    transition: transform 160ms ease;
}

body.crs-app .availability-calendar-toggle[aria-expanded="true"] .availability-toggle-chevron {
    transform: rotate(180deg);
}

body.crs-app .room-availability-status {
    display: inline-flex;
    min-height: 1.75rem;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--crs-border);
    border-radius: 999px;
    color: var(--crs-text);
    background: color-mix(in srgb, var(--crs-card) 45%, transparent);
    font-size: var(--crs-text-label);
    font-weight: var(--crs-font-weight-title);
    line-height: 1.25;
    white-space: nowrap;
}

body.crs-app .room-availability-status-dot {
    width: 0.45rem;
    height: 0.45rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--crs-success);
}

body.crs-app .room-availability-status--success {
    color: var(--crs-success-text);
}

body.crs-app .room-availability-status--warning .room-availability-status-dot {
    background: var(--crs-warning);
}

body.crs-app .room-availability-status--warning {
    color: var(--crs-warning-text);
}

body.crs-app .room-availability-status--danger .room-availability-status-dot {
    background: var(--crs-danger);
}

body.crs-app .room-availability-status--danger {
    color: var(--crs-danger-text);
}

body.crs-app .room-card-actions .add-bed-btn {
    display: inline-flex;
    min-height: var(--crs-control-h-lg);
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--crs-accent);
    border-radius: var(--crs-radius-sm);
    color: var(--crs-accent-foreground);
    background: var(--crs-accent);
    font-size: var(--crs-text-body);
    font-weight: var(--crs-font-weight-emphasis);
}

body.crs-app .room-card-actions .add-bed-btn:hover,
body.crs-app .room-card-actions .add-bed-btn:active {
    border-color: color-mix(in srgb, var(--crs-accent) 78%, var(--crs-shell));
    color: var(--crs-accent-foreground);
    background: color-mix(in srgb, var(--crs-accent) 86%, var(--crs-shell));
}

body.crs-app .availability-panel[hidden] {
    display: none;
}

body.crs-app .availability-panel {
    display: block;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--crs-border);
}

body.crs-app .availability-slider-shell {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) 2.25rem;
    align-items: center;
    gap: 0.375rem;
}

body.crs-app .date-slider {
    display: flex;
    min-width: 0;
    gap: 0.4rem;
    overflow-x: auto;
    padding: 0.05rem;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body.crs-app .date-slider::-webkit-scrollbar {
    display: none;
}

body.crs-app .availability-slider-button {
    display: inline-flex;
    width: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    align-self: center;
    padding: 0;
    border: 1px solid var(--crs-border);
    border-radius: var(--crs-radius-sm);
    color: var(--crs-heading);
    background: var(--crs-card);
}

body.crs-app .availability-slider-button:hover:not(:disabled) {
    border-color: var(--crs-accent);
    background: color-mix(in srgb, var(--crs-primary) 10%, var(--crs-card));
}

body.crs-app .availability-slider-button:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

body.crs-app .date-item {
    display: flex;
    min-width: 5.5rem;
    flex: 0 0 5.5rem;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.45rem 0.4rem;
    border: 1px solid var(--crs-border);
    border-radius: var(--crs-radius-sm);
    color: var(--crs-text);
    background: var(--crs-card);
    line-height: 1.25;
    text-align: center;
}

body.crs-app .date-item__weekday {
    color: var(--crs-text-muted);
    font-size: 0.65rem;
    font-weight: var(--crs-font-weight-title);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

body.crs-app .date-item__date {
    color: var(--crs-heading);
    font-size: 0.8125rem;
    font-weight: var(--crs-font-weight-title);
}

body.crs-app .date-item__price {
    color: var(--crs-text);
    font-size: 0.82rem;
    font-weight: 600;
}

body.crs-app .date-item--unavailable {
    opacity: 0.72;
}

body.crs-app .availability-label {
    display: inline-flex;
    min-height: 1.15rem;
    align-items: center;
    justify-content: center;
    margin-top: 0.1rem;
    padding: 0.05rem 0.35rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: var(--crs-font-weight-title);
}

body.crs-app .availability-label.available {
    border-color: var(--crs-success);
    color: var(--crs-success-foreground);
    background: var(--crs-success);
}

body.crs-app .availability-label.unavailable {
    border-color: var(--crs-danger);
    color: var(--crs-danger-foreground);
    background: var(--crs-danger);
}

body.crs-app .availability-inline-message {
    display: flex;
    min-width: 100%;
    min-height: 4rem;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border: 1px dashed var(--crs-border);
    border-radius: var(--crs-radius-sm);
    color: var(--crs-text-muted);
    background: color-mix(in srgb, var(--crs-card) 42%, transparent);
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: center;
}

body.crs-app .availability-inline-message--error {
    border-color: var(--crs-danger);
    color: var(--crs-text);
}

body.crs-app .flatpickr-day.selected,
body.crs-app .flatpickr-day.startRange,
body.crs-app .flatpickr-day.endRange {
    border-color: var(--crs-accent) !important;
    color: var(--crs-accent-foreground) !important;
    background: var(--crs-accent) !important;
}

body.crs-app .booking-container,
body.crs-app .containerStay {
    max-width: none;
    padding: 1rem;
}

body.crs-app .booking-container .nights,
body.crs-app .summary-card .nights {
    background: var(--crs-accent);
    color: var(--crs-accent-foreground);
}

body.crs-app .booking-summary-container,
body.crs-app .booking-summary,
body.crs-app .payment-summary {
    color: var(--crs-text);
}

body.crs-app .booking-summary .total,
body.crs-app .payment-summary .total {
    color: var(--crs-heading-secondary);
}

/* Marketing, packages, account, payment and survey */
body.crs-app .why-love-section {
    margin-top: 1.5rem;
    padding: 1.25rem;
    border-radius: var(--crs-radius);
    background: var(--crs-surface-muted);
}

body.crs-app .feature-card {
    border: 1px solid var(--crs-border) !important;
    border-radius: var(--crs-radius) !important;
    background: var(--crs-surface) !important;
    box-shadow: none !important;
    transform: none !important;
}

body.crs-app .why-love-section > .container {
    margin-top: 0.75rem !important;
    padding: 0;
}

body.crs-app .why-love-section .package-card {
    min-height: 176px;
    padding: 0.9rem;
}

body.crs-app .why-love-section .package-header {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
}

body.crs-app .why-love-section .package-thumb {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--crs-accent) 40%, var(--crs-border));
    border-radius: var(--crs-radius-sm);
    background: color-mix(in srgb, var(--crs-accent) 12%, var(--crs-card));
    font-size: 1rem;
}

body.crs-app .why-love-section .package-title {
    margin: 0;
    line-height: 1.35;
}

body.crs-app .why-love-section .package-description {
    display: -webkit-box;
    margin: 0.75rem 0 0;
    overflow: hidden;
    color: var(--crs-text);
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

body.crs-app .feature-card:hover {
    border-color: color-mix(in srgb, var(--crs-accent) 45%, var(--crs-border)) !important;
    box-shadow: var(--crs-shadow-sm) !important;
    transform: translateY(-2px) !important;
}

body.crs-app .feature-icon {
    border-color: var(--crs-border);
    background: var(--crs-surface-muted);
}

body.crs-app .package-thumb,
body.crs-app .package-thumb span {
    color: var(--crs-heading-secondary) !important;
}

body.crs-app .faqs {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem !important;
    padding: clamp(0.85rem, 2vw, 1.25rem);
    border: 1px solid var(--crs-border);
    border-radius: var(--crs-radius);
    background: var(--crs-surface-muted) !important;
}

body.crs-app .faqs > .container {
    max-width: 1120px;
    margin-top: 0 !important;
    padding: 0;
}

body.crs-app .faqs .accordion {
    columns: 1;
}

body.crs-app .faqs .accordion-item {
    width: 100%;
    display: inline-block;
    margin: 0 0 0.75rem;
    break-inside: avoid;
}

body.crs-app .travel-info {
    margin-top: 1.5rem !important;
    padding-top: 1.25rem;
    border-top: 1px solid var(--crs-border);
}

body.crs-app .travel-info--standalone {
    margin-top: 0 !important;
    padding-top: 0;
    border-top: 0;
}

body.crs-app .crs-plain-text {
    white-space: pre-line;
}

body.crs-app .travel-info .row {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
}

body.crs-app .travel-info .card-body {
    padding: 1rem;
}

body.crs-app .travel-info__icon {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    margin-bottom: 0.75rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--crs-primary) 10%, var(--crs-card));
    color: var(--crs-heading-secondary);
    font-size: 1.15rem;
}

body.crs-app .travel-info .card-text {
    color: var(--crs-text);
    font-size: 0.84rem;
    line-height: 1.55;
}

body.crs-app .faqs h3 {
    margin-bottom: 1rem;
}

body.crs-app .hotel-map {
    overflow: hidden;
    border: 1px solid var(--crs-border);
    border-radius: var(--crs-radius);
    box-shadow: var(--crs-shadow-sm);
}

body.crs-app .packages-hero,
body.crs-app .profile-header,
body.crs-app .booking-details-header {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--crs-shell-foreground) 8%, transparent);
    border-radius: var(--crs-radius) !important;
    background: var(--crs-navy-900) !important;
    color: var(--crs-shell-foreground);
    box-shadow: var(--crs-shadow-sm);
}

body.crs-app .packages-page .container {
    max-width: 1180px;
}

body.crs-app .packages-hero {
    position: relative;
    margin-bottom: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

body.crs-app .packages-hero__eyebrow {
    color: var(--crs-shell-foreground);
    letter-spacing: 0.22em;
}

body.crs-app .packages-grid {
    margin-top: 0;
}

body.crs-app .packages-grid .package-card {
    position: relative;
    overflow: hidden;
    border-top: 3px solid var(--crs-accent) !important;
}

body.crs-app .packages-grid .package-card .card-body {
    padding: 0.9rem;
}

body.crs-app .packages-grid .package-description {
    display: -webkit-box;
    min-height: 4.5em;
    overflow: hidden;
    color: var(--crs-text);
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

body.crs-app .package-divider {
    height: 1px;
    margin: 1rem 0;
    background: var(--crs-border);
}

body.crs-app .package-stay-info span {
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: var(--crs-surface-muted);
    color: var(--crs-heading-secondary);
    font-size: 0.76rem;
    font-weight: var(--crs-font-weight-title);
}

body.crs-app .auth-page {
    max-width: 1040px;
}

body.crs-app .auth-page--login .row {
    min-height: min(58vh, 520px);
    align-items: center;
}

body.crs-app .auth-page .card {
    max-width: 560px;
    margin: 0 auto;
}

body.crs-app .packages-hero h1,
body.crs-app .profile-header h1,
body.crs-app .profile-header h2,
body.crs-app .booking-details-header h1,
body.crs-app .booking-details-header h2 {
    color: var(--crs-shell-foreground) !important;
    font-size: clamp(1.2rem, 2vw, 1.45rem);
}

body.crs-app .packages-hero::after {
    background: radial-gradient(circle, color-mix(in srgb, var(--crs-accent) 22%, transparent), transparent 68%) !important;
}

body.crs-app .package-card .package-badge,
body.crs-app .profile-avatar {
    border-color: color-mix(in srgb, var(--crs-accent) 55%, transparent) !important;
    background: var(--crs-accent) !important;
    color: var(--crs-accent-foreground) !important;
}

body.crs-app .package-card .package-badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    min-height: 30px;
    padding: 0.35rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--crs-accent) 55%, var(--crs-border));
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
}

body.crs-app .profile-card,
body.crs-app .booking-card,
body.crs-app .room-card,
body.crs-app .stat-card {
    border: 1px solid var(--crs-border) !important;
    border-radius: var(--crs-radius) !important;
    box-shadow: var(--crs-shadow-sm) !important;
    transform: none !important;
}

body.crs-app .stat-number,
body.crs-app .price,
body.crs-app .amount {
    color: var(--crs-heading-secondary);
}

body.crs-app .survey-container {
    max-width: 840px;
    padding: clamp(0.85rem, 2.5vw, 1.25rem);
    transform: none !important;
}

body.crs-app .survey-header {
    border: 0;
    background: transparent;
}

body.crs-app .survey-container .progress-bar {
    overflow: hidden;
    height: 8px;
    border-radius: 999px;
    background: var(--crs-surface-muted);
}

body.crs-app .survey-container .progress-fill {
    height: 100%;
    background: var(--crs-accent) !important;
}

body.crs-app .survey-container .summary-card {
    border-color: var(--crs-border) !important;
    background: var(--crs-surface-soft) !important;
}

body.crs-app .info-section,
body.crs-app .payment-summary,
body.crs-app .guest-details,
body.crs-app .policies-section {
    border-color: var(--crs-border) !important;
    border-radius: var(--crs-radius) !important;
    background: var(--crs-surface) !important;
    box-shadow: var(--crs-shadow-sm) !important;
}

/* CRS admin */
body.crs-admin {
    background: var(--crs-page);
}

body.crs-admin .crs-main {
    max-width: 100%;
    padding-right: clamp(1rem, 3vw, 2rem);
    padding-left: clamp(1rem, 3vw, 2rem);
}

body.crs-admin .container-fluid > h2:first-child {
    margin-bottom: 0.85rem !important;
    padding: 0.75rem 0.9rem;
    border-radius: var(--crs-radius);
    background: var(--crs-navy-900);
    color: var(--crs-shell-foreground);
    box-shadow: var(--crs-shadow-sm);
    font-size: 1.25rem;
}

body.crs-admin .row > [class*="col-"] > .card {
    height: 100%;
}

body.crs-admin .card-body h3 {
    color: var(--crs-heading-secondary);
    font-size: 1.25rem;
}

body.crs-admin .card-body h6.text-muted {
    color: var(--crs-text-muted) !important;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

body.crs-admin form.row,
body.crs-admin form .row {
    padding: 1rem;
    border: 1px solid var(--crs-border);
    border-radius: var(--crs-radius);
    background: var(--crs-surface);
    box-shadow: var(--crs-shadow-sm);
}

/* Footer, support and exit modal */
body.crs-app .custom-footer,
body.crs-app .crs-site-footer {
    position: static !important;
    width: 100%;
    height: auto;
    min-height: 56px;
    flex: 0 0 auto;
    padding: 0.8rem 1rem;
    border-top: 1px solid color-mix(in srgb, var(--crs-shell-foreground) 8%, transparent);
    background: var(--crs-navy-950) !important;
    color: color-mix(in srgb, var(--crs-shell-foreground) 68%, transparent);
    z-index: 10;
}

body.crs-app .custom-footer a {
    color: var(--crs-shell-foreground);
    text-decoration-color: var(--crs-accent);
}

body.crs-app .branding-badge {
    position: static;
    width: auto;
    max-width: 250px;
    min-height: 38px;
    box-shadow: none;
    border: 1px solid var(--crs-border);
    background: var(--crs-card);
    color: var(--crs-heading-secondary);
}

body.crs-app .crs-site-footer .footer-container {
    width: min(100%, 1320px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 auto;
}

body.crs-app .crs-footer-legal {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

body.crs-app .contact-widget__toggle {
    border: 2px solid color-mix(in srgb, var(--crs-accent) 72%, var(--crs-card));
    background: var(--crs-navy-800);
    color: var(--crs-primary-foreground);
    box-shadow: var(--crs-shadow-md);
}

body.crs-app .contact-widget__panel {
    overflow: hidden;
    border: 1px solid var(--crs-border);
    border-radius: var(--crs-radius);
    box-shadow: var(--crs-shadow-md);
}

body.crs-app .contact-widget__header {
    background: var(--crs-navy-900);
}

body.crs-app .contact-widget__title {
    color: var(--crs-shell-foreground);
}

body.crs-app .contact-widget__subtitle {
    color: color-mix(in srgb, var(--crs-shell-foreground) 68%, transparent);
}

body.crs-app #exitModal .exit-modal-content {
    border: 1px solid var(--crs-border);
    border-top: 4px solid var(--crs-accent);
    border-radius: var(--crs-radius);
    background: var(--crs-surface);
    box-shadow: 0 24px 64px color-mix(in srgb, var(--crs-shell) 32%, transparent);
}

@media (min-width: 992px) {
    body.crs-app .crsContainer > .row > .booking-addons-panel {
        position: sticky;
        top: 84px;
        max-height: calc(100vh - 104px);
        overflow-y: auto;
    }
}

@media (max-width: 1199.98px) {
    body.crs-app .booking-containerCrs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.crs-app .booking-containerCrs > .d-flex {
        grid-column: 1 / -1;
        min-width: 0;
    }
}

@media (max-width: 991.98px) {
    body.crs-app .crsContainer > .row {
        grid-template-columns: 1fr;
    }

    body.crs-app .faqs .accordion {
        columns: 1;
    }

    body.crs-app .crs-navbar .navbar-collapse {
        margin-top: 0.65rem;
        padding: 0.65rem;
        border: 1px solid color-mix(in srgb, var(--crs-shell-foreground) 10%, transparent);
        border-radius: var(--crs-radius);
        background: color-mix(in srgb, var(--crs-shell) 92%, var(--crs-shell-foreground));
    }

    .crs-navbar .hotel-brand-logo__img {
        height: 42px;
    }

    body.crs-app .crs-navbar .navbar-nav:last-child {
        gap: 0.35rem;
        padding-top: 0.35rem;
        border-top: 1px solid color-mix(in srgb, var(--crs-shell-foreground) 12%, transparent);
    }

    body.crs-app .crs-navbar .crs-register-link {
        width: 100%;
        margin-left: 0 !important;
        text-align: center;
    }

    .booking-progress li {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        font-size: 0.68rem;
    }

    .booking-progress li:not(:last-child)::after {
        position: absolute;
        top: 14px;
        left: 32px;
        width: calc(100% - 36px);
    }

}

@media (max-width: 767.98px) {
    body.crs-app .crs-main {
        padding-top: 0.75rem;
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }

    body.crs-app .booking-containerCrs {
        grid-template-columns: 1fr;
        padding: 0.8rem;
    }

    body.crs-app .booking-containerCrs > .d-flex {
        grid-column: auto;
        flex-direction: column;
    }

    body.crs-app .book-now {
        width: 100%;
    }

    .booking-progress {
        overflow-x: auto;
        padding-bottom: 0.35rem;
    }

    .booking-progress ol {
        min-width: 540px;
    }

    body.crs-app .room-card-main {
        grid-template-columns: 1fr;
        gap: 0.9rem;
        padding: 0.8rem 0.8rem 0.65rem;
    }

    body.crs-app .why-love-section {
        padding: 0.9rem;
    }

    body.crs-app .why-love-section .package-card {
        height: auto !important;
        min-height: 0;
        justify-content: flex-start;
    }

    body.crs-app .packages-hero {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    body.crs-app .room-card-footer {
        padding: 0 0.8rem 0.8rem;
    }

    body.crs-app .room-card-actions {
        grid-template-columns: 1fr;
        align-items: stretch !important;
    }

    body.crs-app .room-card-actions > * {
        width: 100%;
    }

    body.crs-app .availability-calendar-toggle,
    body.crs-app .room-availability-status {
        justify-self: stretch;
    }

    body.crs-app .room-card-actions .btn,
    body.crs-app .room-card-actions .counter-container {
        justify-self: stretch;
    }

    body.crs-app .availability-slider-shell {
        grid-template-columns: 2.25rem minmax(0, 1fr) 2.25rem;
        gap: 0.35rem;
    }

    body.crs-admin .row > [class*="col-"] {
        margin-bottom: 0.75rem;
    }

    body.crs-app .custom-footer .footer-container {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    body.crs-app .crs-footer-legal {
        justify-content: center;
    }
}

body.crs-app .account-dashboard {
    padding-block: clamp(1rem, 2vw, 1.5rem);
}

body.crs-app .account-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    align-items: start;
}

body.crs-app .account-summary,
body.crs-app .account-stays,
body.crs-app .account-contact-requests {
    background: var(--crs-card);
    border: 1px solid var(--crs-border);
    border-radius: var(--crs-radius-sm);
}

body.crs-app .account-booking-card {
    background: transparent;
    border: 1px solid var(--crs-border);
    border-radius: var(--crs-radius-sm);
}

body.crs-app .account-summary {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    position: sticky;
    top: 1rem;
}

body.crs-app .account-summary-avatar {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: 50%;
    background: var(--crs-surface-muted);
    color: var(--crs-heading-secondary);
    font-size: 1.1rem;
}

body.crs-app .account-eyebrow,
body.crs-app .account-booking-label {
    margin: 0 0 0.2rem;
    color: var(--crs-text-muted);
    font-size: 0.7rem;
    font-weight: var(--crs-font-weight-title);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.crs-app .account-summary h1,
body.crs-app .account-stays h2,
body.crs-app .account-booking-card h3 {
    margin: 0;
    color: var(--crs-heading);
}

body.crs-app .account-summary h1 {
    font-size: 1.25rem;
}

body.crs-app .account-summary-email,
body.crs-app .account-booking-pms {
    margin: 0;
    color: var(--crs-text-muted);
    overflow-wrap: anywhere;
}

body.crs-app .account-summary-email-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    align-items: center;
    margin-top: 0.3rem;
    min-width: 0;
}

body.crs-app .account-summary-email {
    min-width: 0;
    max-width: 100%;
}

body.crs-app .account-booking-pms {
    margin-top: 0.2rem;
}

body.crs-app .account-summary-email--missing {
    font-style: italic;
}

body.crs-app .account-email-verification {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.25rem;
    align-items: center;
    min-height: 1.35rem;
    padding: 0.15rem 0.45rem;
    border: 1px solid currentColor;
    border-radius: 0.35rem;
    background: var(--crs-surface-muted);
    font-size: 0.68rem;
    font-weight: var(--crs-font-weight-title);
    line-height: 1;
}

body.crs-app .account-email-verification--verified {
    color: var(--crs-success-text);
}

body.crs-app .account-email-verification--unverified {
    color: var(--crs-warning-text);
}

body.crs-app .account-facts {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--crs-border);
}

body.crs-app .account-facts div,
body.crs-app .account-booking-details div {
    display: grid;
    gap: 0.1rem;
}

body.crs-app .account-facts dt,
body.crs-app .account-booking-details dt {
    color: var(--crs-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

body.crs-app .account-facts dd,
body.crs-app .account-booking-details dd {
    margin: 0;
    color: var(--crs-text);
}

body.crs-app .account-reserve-button {
    min-height: 2.25rem;
}

body.crs-app .account-stays {
    min-width: 0;
    padding: 0.85rem 1rem;
}

body.crs-app .account-stays-header,
body.crs-app .account-booking-main,
body.crs-app .account-booking-footer,
body.crs-app .account-contact-requests summary,
body.crs-app .account-contact-list article > div {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
}

body.crs-app .account-stays h2 {
    font-size: 1.25rem;
}

body.crs-app .account-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

body.crs-app .account-counts span,
body.crs-app .account-booking-filters a {
    background: var(--crs-surface-muted);
    border: 1px solid var(--crs-border);
    border-radius: 0.375rem;
    color: var(--crs-text-muted);
    font-size: 0.75rem;
}

body.crs-app .account-counts span {
    padding: 0.25rem 0.5rem;
}

body.crs-app .account-counts strong {
    color: var(--crs-text);
}

body.crs-app .account-status-notice {
    margin-top: 0.75rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--crs-warning);
    border-radius: var(--crs-radius-sm);
    color: var(--crs-warning-text);
    background: var(--crs-surface-muted);
}

body.crs-app .account-booking-filters {
    display: flex;
    gap: 0.4rem;
    margin-block: 0.85rem;
    padding-bottom: 0.15rem;
    overflow-x: auto;
}

body.crs-app .account-booking-filters a {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.35rem;
    align-items: center;
    padding: 0.35rem 0.65rem;
    text-decoration: none;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

body.crs-app .account-booking-filters a:hover {
    background: color-mix(in srgb, var(--crs-accent) 10%, var(--crs-surface-muted));
    border-color: var(--crs-accent);
    color: var(--crs-text);
}

body.crs-app .account-booking-filters a.is-active {
    background: var(--crs-accent);
    border-color: var(--crs-accent);
    color: var(--crs-accent-foreground);
}

body.crs-app .account-booking-filters a.is-active:hover {
    background: var(--crs-accent);
    color: var(--crs-accent-foreground);
}

body.crs-app .account-booking-list {
    display: grid;
    gap: 0.65rem;
}

body.crs-app .account-booking-card {
    padding: 0.75rem 0.85rem;
}

body.crs-app .account-booking-card h3 {
    font-size: 1rem;
    overflow-wrap: anywhere;
}

body.crs-app .account-status {
    display: inline-flex;
    align-items: center;
    min-height: 1.65rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid currentColor;
    border-radius: 0.375rem;
    background: var(--crs-surface-muted);
    color: var(--crs-text-muted);
    font-size: 0.72rem;
    font-weight: var(--crs-font-weight-title);
    white-space: nowrap;
}

body.crs-app .account-status--upcoming,
body.crs-app .account-status--active-stay,
body.crs-app .account-status--completed {
    color: var(--crs-success-text);
}

body.crs-app .account-status--partially-cancelled,
body.crs-app .account-status--mixed,
body.crs-app .account-status--pending-pms {
    color: var(--crs-warning-text);
}

body.crs-app .account-status--cancelled,
body.crs-app .account-status--no-show,
body.crs-app .account-status--status-unavailable {
    color: var(--crs-danger-text);
}

body.crs-app .account-booking-details {
    display: grid;
    grid-template-columns: minmax(12rem, 1.5fr) minmax(10rem, 1fr) minmax(6rem, 0.65fr) minmax(6rem, 0.65fr);
    gap: 0.75rem;
    margin: 0.75rem 0;
    padding-block: 0.75rem;
    border-block: 1px solid var(--crs-border);
}

body.crs-app .account-booking-footer p {
    margin: 0;
    color: var(--crs-text-muted);
    font-size: 0.75rem;
}

body.crs-app .account-booking-footer .account-stale {
    color: var(--crs-warning-text);
}

body.crs-app .account-empty-state {
    padding: clamp(1.5rem, 4vw, 2.5rem) 1rem;
    text-align: center;
}

body.crs-app .account-empty-state > i {
    color: var(--crs-heading-secondary);
    font-size: 1.5rem;
}

body.crs-app .account-empty-state h3 {
    margin: 0.55rem 0 0.2rem;
    color: var(--crs-heading);
    font-size: 1.1rem;
}

body.crs-app .account-empty-state p {
    color: var(--crs-text-muted);
}

body.crs-app .account-contact-requests {
    margin-top: 0.75rem;
    overflow: hidden;
}

body.crs-app .account-contact-requests summary {
    min-height: 2.5rem;
    padding: 0.55rem 0.85rem;
    color: var(--crs-heading-secondary);
    cursor: pointer;
    font-weight: var(--crs-font-weight-title);
}

body.crs-app .account-contact-list {
    display: grid;
    gap: 0.4rem;
    padding: 0 0.85rem 0.85rem;
}

body.crs-app .account-contact-list article {
    padding: 0.55rem;
    border-top: 1px solid var(--crs-border);
}

body.crs-app .account-contact-list article span,
body.crs-app .account-contact-list article p {
    color: var(--crs-text-muted);
    font-size: 0.8rem;
}

body.crs-app .account-contact-list article p {
    margin: 0.3rem 0 0;
}

@media (max-width: 991.98px) {
    body.crs-app .account-dashboard-grid {
        grid-template-columns: 1fr;
    }

    body.crs-app .account-summary {
        grid-template-columns: auto 1fr;
        position: static;
    }

    body.crs-app .account-summary .account-facts,
    body.crs-app .account-summary .account-reserve-button {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    body.crs-app .account-stays-header,
    body.crs-app .account-booking-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    body.crs-app .account-booking-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    body.crs-app .account-booking-main {
        align-items: flex-start;
        flex-direction: column;
    }

    body.crs-app .account-booking-details {
        grid-template-columns: 1fr;
    }

    body.crs-app .account-booking-footer .btn {
        width: 100%;
    }

    body.crs-app .profile-header,
    body.crs-app .booking-details-header,
    body.crs-app .packages-hero {
        border-radius: var(--crs-radius-sm) !important;
    }

    body.crs-app .contact-widget {
        right: 0.75rem;
        bottom: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    body.crs-app *,
    body.crs-app *::before,
    body.crs-app *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media print {
    .crs-site-header,
    .crs-site-footer,
    .contact-widget,
    .branding-badge,
    .booking-progress {
        display: none !important;
    }

    body.crs-app,
    body.crs-app .crs-main {
        display: block;
        padding: 0;
        background: var(--crs-card);
    }
}