/* ==========================================================================
   ResortPro — admin design system (Bootstrap 5.3 theme layer)
   ========================================================================== */
:root {
    --rp-primary: #0f5c55;
    --rp-primary-hover: #0b4741;
    --rp-primary-soft: #e6f4f2;
    --rp-accent: #f2b544;
    --rp-bg: #f6f1e7;
    --rp-surface: #ffffff;
    --rp-border: #e8dfcf;
    --rp-text: #1d2a24;
    --rp-muted: #6f7a73;
    --rp-sidebar: #1d2a24;
    --rp-sidebar-text: #a59a86;
    --rp-sidebar-hover: rgba(255, 255, 255, .06);
    --rp-sidebar-width: 264px;
    --rp-topbar-height: 68px;
    --rp-radius: 14px;
    --rp-radius-sm: 10px;
    --rp-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .05);
    --rp-shadow-lg: 0 10px 40px rgba(15, 23, 42, .12);

    --bs-body-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-color: var(--rp-text);
    --bs-body-bg: var(--rp-bg);
    --bs-border-color: var(--rp-border);
    --bs-primary: #0f5c55;
    --bs-primary-rgb: 15, 92, 85;
    --bs-link-color: #0f5c55;
    --bs-link-color-rgb: 15, 92, 85;
    --bs-link-hover-color: #0b4741;
    --bs-border-radius: 10px;
    --bs-border-radius-lg: 14px;
}

body { background: var(--rp-bg); font-size: .9rem; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -.01em; color: var(--rp-text); }
a { text-decoration: none; }
.text-muted { color: var(--rp-muted) !important; }
.fw-semibold { font-weight: 600 !important; }
.small, small { font-size: .8rem; }

/* ---------- Buttons ---------- */
.btn { font-weight: 600; border-radius: var(--rp-radius-sm); padding: .55rem 1rem; font-size: .875rem; }
.btn-sm { padding: .35rem .7rem; font-size: .8rem; border-radius: 8px; }
.btn-lg { padding: .8rem 1.4rem; font-size: 1rem; }
.btn-primary {
    --bs-btn-bg: var(--rp-primary); --bs-btn-border-color: var(--rp-primary);
    --bs-btn-hover-bg: var(--rp-primary-hover); --bs-btn-hover-border-color: var(--rp-primary-hover);
    --bs-btn-active-bg: var(--rp-primary-hover); --bs-btn-active-border-color: var(--rp-primary-hover);
    --bs-btn-disabled-bg: var(--rp-primary); --bs-btn-disabled-border-color: var(--rp-primary);
    box-shadow: 0 4px 12px rgba(15, 92, 85, .22);
}
.btn-outline-primary {
    --bs-btn-color: var(--rp-primary); --bs-btn-border-color: var(--rp-primary);
    --bs-btn-hover-bg: var(--rp-primary); --bs-btn-hover-border-color: var(--rp-primary);
    --bs-btn-active-bg: var(--rp-primary-hover);
}
.btn-light { --bs-btn-bg: #efe6d4; --bs-btn-border-color: #efe6d4; --bs-btn-hover-bg: #e8dfcf; --bs-btn-hover-border-color: #e8dfcf; color: #33413a; }
.btn-soft-danger { background: #fef2f2; color: #b91c1c; border: 0; }
.btn-soft-danger:hover { background: #fee2e2; color: #991b1b; }
.btn-icon { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Forms ---------- */
.form-label { font-weight: 600; font-size: .8rem; color: #33413a; margin-bottom: .35rem; }
.form-control, .form-select {
    border-radius: var(--rp-radius-sm); border-color: #dbe1ea; padding: .6rem .85rem; font-size: .875rem;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus { border-color: #6fa596; box-shadow: 0 0 0 4px rgba(15, 92, 85, .12); }
.form-control-lg { padding: .8rem 1rem; font-size: .95rem; }
.form-text { color: var(--rp-muted); font-size: .76rem; }
.form-check-input:checked { background-color: var(--rp-primary); border-color: var(--rp-primary); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(15, 92, 85, .12); border-color: #6fa596; }
.input-group-text { background: #faf5ea; border-color: #dbe1ea; color: var(--rp-muted); border-radius: var(--rp-radius-sm); }
.required::after { content: " *"; color: #dc2626; }
.form-section-title { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rp-muted); margin: 1.5rem 0 1rem; }
.form-section-title:first-child { margin-top: 0; }

/* ---------- App shell ---------- */
.rp-app { display: flex; min-height: 100vh; }

.rp-sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--rp-sidebar-width); background: var(--rp-sidebar);
    display: flex; flex-direction: column; z-index: 1040; transition: transform .25s ease;
    background-image: radial-gradient(circle at 0 0, rgba(20, 184, 166, .14), transparent 45%);
}
.rp-sidebar-brand { height: var(--rp-topbar-height); display: flex; align-items: center; gap: .7rem; padding: 0 1.4rem; color: #fff; font-weight: 800; font-size: 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.rp-sidebar-brand:hover { color: #fff; }
.rp-logo-mark { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2f7f86, #0f5c55); color: #fff; font-size: 1.05rem; box-shadow: 0 6px 16px rgba(20, 184, 166, .35); flex-shrink: 0; }
.rp-sidebar-brand img { max-height: 34px; max-width: 150px; }
.rp-sidebar-context { margin: 1rem 1rem .25rem; padding: .7rem .85rem; border-radius: 12px; background: rgba(255, 255, 255, .05); color: #e8dfcf; font-size: .8rem; }
.rp-sidebar-context small { display: block; color: var(--rp-sidebar-text); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.rp-sidebar-context strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-nav { flex: 1; overflow-y: auto; padding: .5rem .85rem 1rem; }
.rp-nav::-webkit-scrollbar { width: 4px; }
.rp-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 4px; }
.rp-nav-section { color: #6f7a73; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 1.1rem .75rem .45rem; }
.rp-nav-link { display: flex; align-items: center; gap: .75rem; padding: .62rem .75rem; margin-bottom: 2px; color: var(--rp-sidebar-text); border-radius: 10px; font-weight: 500; position: relative; transition: background .15s, color .15s; }
.rp-nav-link i { font-size: 1.05rem; width: 20px; text-align: center; }
.rp-nav-link:hover { background: var(--rp-sidebar-hover); color: #e8dfcf; }
.rp-nav-link.active { background: rgba(20, 184, 166, .14); color: #f2b544; font-weight: 600; }
.rp-nav-link.active::before { content: ""; position: absolute; left: -.85rem; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #f2b544; }
.rp-sidebar-footer { padding: 1rem; border-top: 1px solid rgba(255, 255, 255, .06); }
.rp-plan-chip { display: flex; align-items: center; gap: .65rem; padding: .75rem; border-radius: 12px; background: linear-gradient(135deg, rgba(20, 184, 166, .18), rgba(245, 158, 11, .1)); color: #e8dfcf; font-size: .78rem; }
.rp-plan-chip i { font-size: 1.2rem; color: #fbbf24; }
.rp-plan-chip a { color: #f2b544; font-weight: 600; }

.rp-main { flex: 1; margin-left: var(--rp-sidebar-width); min-width: 0; display: flex; flex-direction: column; }
.rp-topbar { position: sticky; top: 0; z-index: 1030; height: var(--rp-topbar-height); display: flex; align-items: center; gap: 1rem; padding: 0 1.75rem; background: rgba(255, 255, 255, .85); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--rp-border); }
.rp-search { position: relative; flex: 1; max-width: 420px; }
.rp-search i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: #a59a86; }
.rp-search input { padding-left: 2.4rem; background: #f6f1e7; border-color: transparent; }
.rp-search input:focus { background: #fff; }
.rp-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.rp-icon-btn { position: relative; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #4a5550; background: transparent; border: 0; font-size: 1.15rem; }
.rp-icon-btn:hover { background: #efe6d4; color: var(--rp-text); }
.rp-dot { position: absolute; top: 6px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ef4444; color: #fff; font-size: .65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.rp-user-btn { display: flex; align-items: center; gap: .6rem; padding: .3rem .5rem .3rem .3rem; border-radius: 12px; border: 0; background: transparent; text-align: left; }
.rp-user-btn:hover { background: #efe6d4; }
.rp-user-btn strong { display: block; font-size: .82rem; line-height: 1.2; }
.rp-user-btn small { display: block; color: var(--rp-muted); font-size: .72rem; }
.dropdown-menu { border: 1px solid var(--rp-border); border-radius: 12px; box-shadow: var(--rp-shadow-lg); padding: .4rem; font-size: .875rem; }
.dropdown-item { border-radius: 8px; padding: .5rem .75rem; display: flex; align-items: center; gap: .6rem; }
.dropdown-item:active { background: var(--rp-primary); }
.rp-notifications { width: 340px; padding: 0; }
.rp-notifications .rp-notif-head { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1rem; border-bottom: 1px solid var(--rp-border); }
.rp-notif-item { display: block; padding: .75rem 1rem; border-bottom: 1px solid #efe6d4; color: var(--rp-text); }
.rp-notif-item:hover { background: #faf5ea; color: var(--rp-text); }
.rp-notif-item.unread { background: #eef5f1; }
.rp-notif-item small { color: var(--rp-muted); }

.rp-content { padding: 1.75rem; flex: 1; }
.rp-footer { padding: 1rem 1.75rem; color: var(--rp-muted); font-size: .78rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }

.rp-sidebar-backdrop { display: none; }

/* ---------- Page header ---------- */
.rp-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.rp-page-header h1 { font-size: 1.5rem; margin: 0; }
.rp-page-header p { margin: .25rem 0 0; color: var(--rp-muted); }
.breadcrumb { font-size: .78rem; margin-bottom: .35rem; }
.breadcrumb-item a { color: var(--rp-muted); }
.breadcrumb-item.active { color: #a59a86; }

/* ---------- Banner ---------- */
.rp-banner { display: flex; align-items: center; gap: .75rem; padding: .7rem 1.75rem; font-size: .85rem; font-weight: 500; }
.rp-banner form { margin-left: auto; }
.rp-banner-warning { background: #fffbeb; color: #92400e; border-bottom: 1px solid #fde68a; }
.rp-banner-danger { background: #fef2f2; color: #991b1b; border-bottom: 1px solid #fecaca; }
.rp-banner-dark { background: #1d2a24; color: #e8dfcf; }
.rp-banner-dark .btn { color: #fff; border-color: rgba(255, 255, 255, .3); }

/* ---------- Cards ---------- */
.rp-card { background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: var(--rp-radius); box-shadow: var(--rp-shadow); }
.rp-card-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--rp-border); }
.rp-card-header h5, .rp-card-header h6 { margin: 0; font-size: .98rem; }
.rp-card-header p { margin: .15rem 0 0; color: var(--rp-muted); font-size: .8rem; }
.rp-card-body { padding: 1.35rem; }
.rp-card-footer { padding: 1rem 1.35rem; border-top: 1px solid var(--rp-border); background: #fbf7ef; border-radius: 0 0 var(--rp-radius) var(--rp-radius); }

.rp-stat { position: relative; overflow: hidden; padding: 1.25rem 1.35rem; height: 100%; }
.rp-stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.rp-stat-label { color: var(--rp-muted); font-size: .8rem; font-weight: 600; }
.rp-stat-value { font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; margin-top: .35rem; line-height: 1.1; }
.rp-stat-meta { margin-top: .6rem; font-size: .76rem; color: var(--rp-muted); }
.rp-stat-icon { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.rp-tone-teal { background: #dcebe4; color: #0f5c55; }
.rp-tone-blue { background: #dbeafe; color: #1d4ed8; }
.rp-tone-violet { background: #ece2ea; color: #6d28d9; }
.rp-tone-amber { background: #fef3c7; color: #b45309; }
.rp-tone-rose { background: #ffe4e6; color: #be123c; }
.rp-tone-green { background: #dcfce7; color: #15803d; }
.rp-tone-slate { background: #e8dfcf; color: #33413a; }
.rp-tone-cyan { background: #cffafe; color: #0e7490; }

.rp-chart { position: relative; height: 290px; }
.rp-chart-sm { height: 240px; }

/* ---------- Tables ---------- */
.rp-table { margin: 0; font-size: .85rem; }
.rp-table > :not(caption) > * > * { padding: .85rem 1rem; border-bottom-color: #ece4d6; vertical-align: middle; }
.rp-table thead th { background: #faf5ea; color: var(--rp-muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--rp-border); white-space: nowrap; }
.rp-table tbody tr:hover { background: #fbf7ef; }
.rp-table tbody tr:last-child td { border-bottom: 0; }
.rp-entity { display: flex; align-items: center; gap: .7rem; color: var(--rp-text); min-width: 180px; }
.rp-entity:hover { color: var(--rp-primary); }
.rp-entity strong { display: block; font-weight: 600; }
.rp-entity small { display: block; color: var(--rp-muted); font-size: .76rem; }
.rp-code { background: #f3ecdf; color: #0f5c55; padding: .15rem .45rem; border-radius: 6px; font-size: .75rem; }

/* DataTables integration */
div.dataTables_wrapper div.dataTables_length select { width: auto; display: inline-block; padding: .3rem 2rem .3rem .6rem; }
div.dataTables_wrapper div.dataTables_filter input { margin-left: .5rem; width: 220px; display: inline-block; }
.rp-dt-toolbar { padding: 1rem 1.35rem; display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--rp-border); }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { padding: 1rem 1.35rem !important; font-size: .8rem; color: var(--rp-muted); }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { padding: 1rem 1.35rem 0; font-size: .8rem; }
.page-link { border-radius: 8px !important; margin: 0 2px; border: 0; color: #4a5550; font-weight: 600; font-size: .8rem; }
.page-item.active .page-link { background: var(--rp-primary); }
table.dataTable { margin-top: .75rem !important; margin-bottom: 0 !important; }
div.dataTables_processing { border-radius: 10px; box-shadow: var(--rp-shadow-lg); border: 0; }

/* ---------- Badges & avatars ---------- */
.rp-badge { font-weight: 600; font-size: .7rem; padding: .38em .7em; border-radius: 20px; letter-spacing: .01em; }
.rp-badge-success { background: #dcfce7; color: #166534; }
.rp-badge-primary { background: #dbeafe; color: #1e40af; }
.rp-badge-info { background: #cffafe; color: #155e75; }
.rp-badge-warning { background: #fef3c7; color: #92400e; }
.rp-badge-danger { background: #fee2e2; color: #991b1b; }
.rp-badge-secondary { background: #f3ecdf; color: #4a5550; }
.rp-badge-dark { background: #1d2a24; color: #f3ecdf; }
.rp-avatar { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2f7f86, #0f5c55); color: #fff; font-weight: 700; font-size: .8rem; flex-shrink: 0; object-fit: cover; }
.rp-avatar-sm { width: 34px; height: 34px; font-size: .72rem; }
.rp-avatar-lg { width: 72px; height: 72px; font-size: 1.4rem; }
.rp-avatar-xl { width: 96px; height: 96px; font-size: 1.8rem; }

/* ---------- Lists / timeline / empty ---------- */
.rp-list { list-style: none; margin: 0; padding: 0; }
.rp-list li { display: flex; gap: .85rem; align-items: center; padding: .85rem 1.35rem; border-bottom: 1px solid #efe6d4; }
.rp-list li:last-child { border-bottom: 0; }
.rp-timeline { list-style: none; margin: 0; padding: 0 1.35rem; }
.rp-timeline li { position: relative; padding: .8rem 0 .8rem 1.6rem; border-left: 2px solid #ece4d6; }
.rp-timeline li::before { content: ""; position: absolute; left: -6px; top: 1.05rem; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--rp-primary); }
.rp-timeline small { color: var(--rp-muted); }
.rp-empty { text-align: center; padding: 2.5rem 1rem; color: var(--rp-muted); }
.rp-empty i { font-size: 2.2rem; color: #d4c7af; display: block; margin-bottom: .5rem; }
.rp-kv { display: grid; grid-template-columns: 140px 1fr; gap: .55rem 1rem; font-size: .85rem; }
.rp-kv dt { color: var(--rp-muted); font-weight: 500; }
.rp-kv dd { margin: 0; font-weight: 600; word-break: break-word; }

/* ---------- Tabs ---------- */
.rp-tabs { border-bottom: 1px solid var(--rp-border); gap: .25rem; padding: 0 1.35rem; }
.rp-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--rp-muted); font-weight: 600; padding: 1rem .6rem; margin-bottom: -1px; border-radius: 0; }
.rp-tabs .nav-link:hover { color: var(--rp-text); }
.rp-tabs .nav-link.active { color: var(--rp-primary); border-bottom-color: var(--rp-primary); background: transparent; }

/* ---------- Permission matrix ---------- */
.rp-perm-group { border: 1px solid var(--rp-border); border-radius: 12px; overflow: hidden; height: 100%; }
.rp-perm-group-head { display: flex; justify-content: space-between; align-items: center; padding: .7rem 1rem; background: #faf5ea; border-bottom: 1px solid var(--rp-border); font-weight: 700; font-size: .82rem; }
.rp-perm-group-body { padding: .6rem 1rem; }
.rp-perm-group .form-check { padding-top: .25rem; padding-bottom: .25rem; }
.rp-perm-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .45rem 0; border-bottom: 1px dashed #ece4d6; font-size: .82rem; }
.rp-perm-row:last-child { border-bottom: 0; }
.rp-perm-row .form-select { width: 120px; padding: .25rem 1.8rem .25rem .6rem; font-size: .76rem; }

/* ---------- Progress / usage ---------- */
.rp-usage { margin-bottom: 1rem; }
.rp-usage-head { display: flex; justify-content: space-between; font-size: .82rem; margin-bottom: .4rem; }
.progress { height: 8px; border-radius: 8px; background: #ece4d6; }
.progress-bar { background: var(--rp-primary); border-radius: 8px; }

/* ---------- Toasts ---------- */
.rp-toasts { position: fixed; top: 1rem; right: 1rem; z-index: 1090; display: flex; flex-direction: column; gap: .6rem; max-width: calc(100vw - 2rem); }
.rp-toast { display: flex; align-items: flex-start; gap: .7rem; min-width: 300px; max-width: 420px; padding: .9rem 1rem; border-radius: 12px; background: #fff; box-shadow: var(--rp-shadow-lg); border: 1px solid var(--rp-border); border-left: 4px solid var(--rp-primary); animation: rpSlideIn .25s ease; font-size: .85rem; }
.rp-toast i { font-size: 1.15rem; margin-top: -1px; }
.rp-toast .btn-close { margin-left: auto; font-size: .65rem; }
.rp-toast-success { border-left-color: #16a34a; } .rp-toast-success i { color: #16a34a; }
.rp-toast-error { border-left-color: #dc2626; } .rp-toast-error i { color: #dc2626; }
.rp-toast-warning { border-left-color: #d97706; } .rp-toast-warning i { color: #d97706; }
.rp-toast-info { border-left-color: #0284c7; } .rp-toast-info i { color: #0284c7; }
.rp-toast.hide { opacity: 0; transform: translateX(20px); transition: all .25s; }
@keyframes rpSlideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

.modal-content { border: 0; border-radius: 16px; box-shadow: var(--rp-shadow-lg); }
.modal-header, .modal-footer { border-color: var(--rp-border); padding: 1rem 1.35rem; }
.modal-body { padding: 1.35rem; }

.btn .spinner-border { width: 1rem; height: 1rem; border-width: .15em; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .rp-sidebar { transform: translateX(-100%); }
    .rp-main { margin-left: 0; }
    body.rp-sidebar-open .rp-sidebar { transform: none; box-shadow: var(--rp-shadow-lg); }
    body.rp-sidebar-open .rp-sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 1035; }
    .rp-topbar, .rp-content, .rp-banner, .rp-footer { padding-left: 1rem; padding-right: 1rem; }
}
@media (min-width: 992px) {
    body.rp-sidebar-collapsed .rp-sidebar { transform: translateX(-100%); }
    body.rp-sidebar-collapsed .rp-main { margin-left: 0; }
}
@media (max-width: 575.98px) {
    .rp-content { padding: 1rem; }
    .rp-page-header h1 { font-size: 1.25rem; }
    .rp-stat-value { font-size: 1.35rem; }
    .rp-kv { grid-template-columns: 1fr; gap: .1rem; }
    .rp-kv dd { margin-bottom: .6rem; }
    .rp-notifications { width: 300px; }
    .rp-toast { min-width: 0; }
    div.dataTables_wrapper div.dataTables_filter input { width: 160px; }
}

/* ==========================================================================
   Phase 2 — property, rooms, customers
   ========================================================================== */

/* Status filter chips */
.rp-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.rp-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border-radius: 30px; background: #fff; border: 1px solid var(--rp-border); font-size: .8rem; font-weight: 600; color: #4a5550; }
.rp-chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.rp-chip strong { color: var(--rp-text); }

/* Room status board */
.rp-floor { margin-bottom: 1.5rem; }
.rp-floor-title { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rp-muted); margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem; }
.rp-floor-title::after { content: ""; flex: 1; height: 1px; background: var(--rp-border); }
.rp-rooms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.rp-room-tile { position: relative; border-radius: 12px; background: #fff; border: 1px solid var(--rp-border); border-top: 4px solid var(--tile, #a59a86); padding: .8rem .85rem .7rem; box-shadow: var(--rp-shadow); transition: transform .15s, box-shadow .15s; }
.rp-room-tile:hover { transform: translateY(-2px); box-shadow: var(--rp-shadow-lg); }
.rp-room-tile .num { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.rp-room-tile .type { font-size: .74rem; color: var(--rp-muted); margin-top: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-room-tile .state { display: flex; align-items: center; justify-content: space-between; margin-top: .7rem; font-size: .74rem; font-weight: 700; color: var(--tile); }
.rp-room-tile .dropdown-toggle::after { display: none; }
.rp-room-tile .rp-tile-menu { position: absolute; top: .45rem; right: .35rem; }
.rp-st-available { --tile: #16a34a; } .rp-st-reserved { --tile: #0891b2; } .rp-st-occupied { --tile: #2563eb; }
.rp-st-cleaning { --tile: #d97706; } .rp-st-maintenance { --tile: #dc2626; } .rp-st-blocked { --tile: #1d2a24; }
.rp-st-available .dot, .dot.rp-st-available { background: #16a34a; } .dot.rp-st-reserved { background: #0891b2; } .dot.rp-st-occupied { background: #2563eb; }
.dot.rp-st-cleaning { background: #d97706; } .dot.rp-st-maintenance { background: #dc2626; } .dot.rp-st-blocked { background: #1d2a24; }

/* Image grids (gallery, room photos) */
.rp-image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .85rem; }
.rp-image-card { position: relative; border-radius: 12px; overflow: hidden; background: #f3ecdf; border: 1px solid var(--rp-border); }
.rp-image-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.rp-image-card .rp-image-actions { position: absolute; top: .45rem; right: .45rem; display: flex; gap: .3rem; opacity: 0; transition: opacity .15s; }
.rp-image-card:hover .rp-image-actions, .rp-image-card:focus-within .rp-image-actions { opacity: 1; }
.rp-image-card .rp-image-actions .btn { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.95); border: 0; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.rp-image-card .rp-image-meta { padding: .5rem .6rem; background: #fff; }
.rp-image-card .rp-image-meta .form-control, .rp-image-card .rp-image-meta .form-select { padding: .25rem .5rem; font-size: .75rem; }
.rp-image-card .rp-cover-badge { position: absolute; top: .45rem; left: .45rem; }
.rp-image-card .rp-drag { position: absolute; bottom: .45rem; left: .45rem; cursor: grab; color: #fff; background: rgba(15,23,42,.55); border-radius: 6px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }
.rp-image-card.sortable-ghost { opacity: .4; }
@media (hover: none) { .rp-image-card .rp-image-actions { opacity: 1; } }
.rp-dropzone { border: 2px dashed #d4c7af; border-radius: 14px; padding: 1.75rem 1rem; text-align: center; background: #faf5ea; color: var(--rp-muted); cursor: pointer; transition: all .15s; }
.rp-dropzone:hover, .rp-dropzone.dragover { border-color: var(--rp-primary); background: var(--rp-primary-soft); color: var(--rp-primary); }
.rp-dropzone i { font-size: 1.8rem; display: block; margin-bottom: .35rem; }

/* Room type cards */
.rp-rt-card { overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.rp-rt-cover { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #dcebe4, #e0f2fe); display: flex; align-items: center; justify-content: center; color: #6fa596; font-size: 2.2rem; }
.rp-rt-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rp-rt-cover .badge { position: absolute; top: .75rem; left: .75rem; }
.rp-rt-cover .rp-drag { position: absolute; top: .65rem; right: .65rem; cursor: grab; color: #fff; background: rgba(15,23,42,.5); border-radius: 8px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.rp-rt-price { font-size: 1.25rem; font-weight: 800; }
.rp-rt-price small { font-size: .75rem; color: var(--rp-muted); font-weight: 500; }
.rp-rt-facts { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .78rem; color: #4a5550; }
.rp-rt-facts i { color: var(--rp-muted); margin-right: .2rem; }

/* Amenities */
.rp-amenity-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .5rem; }
.rp-amenity-pick label { display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; border: 1px solid var(--rp-border); border-radius: 10px; cursor: pointer; font-size: .82rem; transition: all .12s; background: #fff; }
.rp-amenity-pick input { display: none; }
.rp-amenity-pick label i { font-size: 1.05rem; color: var(--rp-muted); }
.rp-amenity-pick input:checked + label { border-color: var(--rp-primary); background: var(--rp-primary-soft); color: var(--rp-primary); font-weight: 600; }
.rp-amenity-pick input:checked + label i { color: var(--rp-primary); }
.rp-amenity-row { display: flex; align-items: center; gap: .85rem; padding: .75rem 1.35rem; border-bottom: 1px solid #efe6d4; }
.rp-amenity-row:last-child { border-bottom: 0; }
.rp-amenity-icon { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--rp-primary-soft); color: var(--rp-primary); font-size: 1.1rem; flex-shrink: 0; }
.rp-icon-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: .35rem; max-height: 170px; overflow-y: auto; }
.rp-icon-picker input { display: none; }
.rp-icon-picker label { height: 42px; border: 1px solid var(--rp-border); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; cursor: pointer; color: #4a5550; }
.rp-icon-picker input:checked + label { border-color: var(--rp-primary); background: var(--rp-primary-soft); color: var(--rp-primary); }

/* Profile header (customer) */
.rp-profile-head { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.rp-profile-head .rp-avatar-xl { box-shadow: 0 0 0 4px #fff, 0 6px 18px rgba(15,23,42,.12); }
.rp-doc-thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.rp-map { width: 100%; height: 260px; border: 0; border-radius: 12px; background: #e8dfcf; }

/* Setup checklist */
.rp-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.rp-checklist li a { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border-radius: 10px; background: rgba(255,255,255,.75); color: var(--rp-text); font-weight: 600; font-size: .85rem; border: 1px solid rgba(15, 92, 85,.12); }
.rp-checklist li a:hover { background: #fff; }
.rp-checklist li i { font-size: 1.15rem; color: #d4c7af; }
.rp-checklist li.done i { color: #16a34a; }
.rp-checklist li.done span { text-decoration: line-through; color: var(--rp-muted); }

/* ==========================================================================
   Phase 3 — bookings, tape chart, availability
   ========================================================================== */

/* Quick view pills */
.rp-pills { display: flex; gap: .4rem; flex-wrap: wrap; }
.rp-pills a { padding: .45rem .85rem; border-radius: 30px; font-size: .8rem; font-weight: 600; color: #4a5550; background: #fff; border: 1px solid var(--rp-border); display: inline-flex; align-items: center; gap: .45rem; }
.rp-pills a:hover { border-color: #a9c9bd; color: var(--rp-primary); }
.rp-pills a.active { background: var(--rp-primary); border-color: var(--rp-primary); color: #fff; }
.rp-pills a .count { background: rgba(15, 23, 42, .08); border-radius: 20px; padding: 0 .45rem; font-size: .72rem; }
.rp-pills a.active .count { background: rgba(255, 255, 255, .25); }

/* Tape chart */
.rp-tape-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rp-tape { --label: 150px; --cell: minmax(58px, 1fr); min-width: calc(150px + var(--days) * 58px); font-size: .78rem; }
.rp-tape-row { display: grid; grid-template-columns: var(--label) repeat(var(--days), var(--cell)); position: relative; border-bottom: 1px solid #ece4d6; min-height: 46px; }
.rp-tape-row > * { grid-row: 1; }
.rp-tape-head { position: sticky; top: 0; z-index: 3; background: #faf5ea; border-bottom: 1px solid var(--rp-border); min-height: 0; }
.rp-tape-head .rp-tape-day { text-align: center; padding: .45rem .1rem; border-left: 1px solid #ece4d6; color: var(--rp-muted); line-height: 1.15; }
.rp-tape-head .rp-tape-day strong { display: block; font-size: .95rem; color: var(--rp-text); }
.rp-tape-head .rp-tape-day.weekend { background: #f3ecdf; }
.rp-tape-head .rp-tape-day.today { background: var(--rp-primary); color: #dcebe4; }
.rp-tape-head .rp-tape-day.today strong { color: #fff; }
.rp-tape-occ { display: block; margin-top: .2rem; font-size: .66rem; font-weight: 700; }
.rp-tape-label { position: sticky; left: 0; z-index: 2; background: #fff; padding: .5rem .8rem; border-right: 1px solid var(--rp-border); display: flex; flex-direction: column; justify-content: center; }
.rp-tape-head .rp-tape-label { background: #faf5ea; }
.rp-tape-label strong { font-size: .9rem; }
.rp-tape-label small { color: var(--rp-muted); font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-tape-group { background: #faf5ea; font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rp-muted); padding: .4rem .8rem; border-bottom: 1px solid #ece4d6; position: sticky; left: 0; }
.rp-tape-cell { border-left: 1px solid #efe6d4; display: block; }
.rp-tape-cell.weekend { background: #fbf7ef; }
.rp-tape-cell.today { background: rgba(15, 92, 85, .05); }
.rp-tape-cell:hover { background: var(--rp-primary-soft); }
.rp-tape-cell:hover::after { content: "+"; display: flex; height: 100%; align-items: center; justify-content: center; color: var(--rp-primary); font-weight: 700; font-size: 1rem; }
.rp-tape-bar { z-index: 1; align-self: center; margin: 5px 3px; padding: .3rem .55rem; border-radius: 8px; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 6px rgba(15, 23, 42, .15); line-height: 1.25; transition: transform .12s, box-shadow .12s; }
.rp-tape-bar:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(15, 23, 42, .2); }
.rp-tape-bar small { display: block; font-weight: 500; opacity: .85; font-size: .68rem; }
.rp-tape-bar.cut-left { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.rp-tape-bar.cut-right { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.rp-tape-bar.block { background: repeating-linear-gradient(45deg, #fee2e2, #fee2e2 6px, #fecaca 6px, #fecaca 12px); color: #991b1b; box-shadow: none; }
.rp-bar-pending { background: #f2b544; } .rp-bar-confirmed { background: #0f5c55; } .rp-bar-checked_in { background: #2563eb; } .rp-bar-checked_out { background: #a59a86; }
.rp-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .76rem; color: var(--rp-muted); }
.rp-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.rp-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

/* FullCalendar theming */
.fc { --fc-border-color: #ece4d6; --fc-today-bg-color: rgba(15, 92, 85, .06); --fc-button-bg-color: #efe6d4; --fc-button-border-color: #efe6d4; --fc-button-text-color: #33413a; --fc-button-hover-bg-color: #e8dfcf; --fc-button-hover-border-color: #e8dfcf; --fc-button-active-bg-color: #0f5c55; --fc-button-active-border-color: #0f5c55; font-size: .82rem; }
.fc .fc-button { font-weight: 600; border-radius: 8px !important; box-shadow: none !important; text-transform: capitalize; }
.fc .fc-button-primary:not(:disabled).fc-button-active { color: #fff; }
.fc .fc-toolbar-title { font-size: 1.15rem; font-weight: 700; }
.fc .fc-daygrid-event { border-radius: 6px; padding: 1px 4px; font-weight: 600; }
.fc a { color: inherit; }

/* Booking form */
.rp-room-option { border: 1px solid var(--rp-border); border-radius: 14px; margin-bottom: .85rem; overflow: hidden; background: #fff; }
.rp-room-option-head { display: flex; gap: .9rem; align-items: center; padding: .85rem 1rem; background: #fbf7ef; border-bottom: 1px solid var(--rp-border); }
.rp-room-option-head img, .rp-room-option-head .ph { width: 64px; height: 48px; border-radius: 8px; object-fit: cover; background: linear-gradient(135deg, #dcebe4, #e0f2fe); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #6fa596; }
.rp-room-option.unfit .rp-room-option-head { opacity: .6; }
.rp-room-chips { display: flex; flex-wrap: wrap; gap: .45rem; padding: .85rem 1rem; }
.rp-room-chip { border: 1.5px solid var(--rp-border); background: #fff; border-radius: 10px; padding: .4rem .75rem; font-weight: 700; font-size: .85rem; cursor: pointer; transition: all .12s; }
.rp-room-chip:hover { border-color: #a9c9bd; }
.rp-room-chip.selected { background: var(--rp-primary); border-color: var(--rp-primary); color: #fff; }
.rp-room-chip small { font-weight: 500; opacity: .75; margin-left: .2rem; }
.rp-selected-room { display: grid; grid-template-columns: 1fr 110px 110px 36px; gap: .5rem; align-items: center; padding: .6rem 0; border-bottom: 1px dashed #ece4d6; }
.rp-selected-room:last-child { border-bottom: 0; }
@media (max-width: 575.98px) { .rp-selected-room { grid-template-columns: 1fr 1fr 36px; } .rp-selected-room > div:first-child { grid-column: 1 / -1; } }
.rp-summary { position: sticky; top: calc(var(--rp-topbar-height) + 1rem); }
.rp-summary-row { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; font-size: .85rem; }
.rp-summary-row.total { border-top: 1px solid var(--rp-border); margin-top: .5rem; padding-top: .8rem; font-size: 1.1rem; font-weight: 800; }
.rp-guest-result { display: flex; gap: .7rem; align-items: center; padding: .6rem .8rem; border-radius: 10px; cursor: pointer; }
.rp-guest-result:hover, .rp-guest-result.active { background: var(--rp-primary-soft); }
.rp-guest-picked { display: flex; gap: .8rem; align-items: center; padding: .85rem 1rem; border-radius: 12px; background: var(--rp-primary-soft); border: 1px solid #a9c9bd; }

/* Booking detail */
.rp-booking-head { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.rp-booking-head .rp-stay { display: flex; align-items: center; gap: 1rem; }
.rp-booking-head .rp-stay-date { text-align: center; }
.rp-booking-head .rp-stay-date small { display: block; color: var(--rp-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.rp-booking-head .rp-stay-date strong { display: block; font-size: 1.15rem; }
.rp-booking-head .rp-stay-nights { padding: .25rem .7rem; border-radius: 20px; background: #f3ecdf; font-size: .78rem; font-weight: 700; color: #4a5550; }
.rp-night-table td, .rp-night-table th { padding: .35rem .6rem !important; font-size: .8rem; }

/* Availability heatmap */
.rp-heat { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: .78rem; }
.rp-heat th { font-weight: 600; color: var(--rp-muted); text-align: center; padding: .25rem; white-space: nowrap; }
.rp-heat th.type { text-align: left; color: var(--rp-text); min-width: 150px; }
.rp-heat td { text-align: center; border-radius: 6px; padding: .5rem .2rem; font-weight: 700; min-width: 40px; }
.rp-heat .h-full { background: #dcfce7; color: #166534; } .rp-heat .h-some { background: #fef3c7; color: #92400e; } .rp-heat .h-none { background: #fee2e2; color: #991b1b; }
.rp-heat th.today { color: var(--rp-primary); }

/* Selectable option cards (plan / payment method) inside admin modals */
.rp-plan-option { position: relative; display: block; cursor: pointer; }
.rp-plan-option input { position: absolute; opacity: 0; }
.rp-plan-option .rp-plan-card { border: 1.5px solid var(--rp-border); border-radius: 12px; padding: .75rem 1rem; transition: all .15s; display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: #fff; }
.rp-plan-option:hover .rp-plan-card { border-color: #a9c9bd; }
.rp-plan-option input:checked + .rp-plan-card { border-color: var(--rp-primary); background: #eef5f1; box-shadow: 0 0 0 4px rgba(15, 92, 85, .1); }
.rp-plan-option input:focus-visible + .rp-plan-card { outline: 2px solid var(--rp-primary); outline-offset: 2px; }

/* ==========================================================================
   BRAND THEME — matches the homepage ("a hotelier's notebook"):
   warm paper, ink sidebar, lagoon / terracotta / sun, Fraunces headings,
   Caveat for small handwritten notes, ink-offset buttons.
   ========================================================================== */
:root {
    --rp-ink: #1d2a24;
    --rp-ink-2: #44524b;
    --rp-paper: #f6f1e7;
    --rp-paper-2: #efe6d4;
    --rp-card: #fffdf8;
    --rp-terra: #d9653b;
    --rp-sun: #f2b544;
    --rp-lagoon: #0f5c55;
    --rp-serif: "Fraunces", Georgia, "Times New Roman", serif;
    --rp-hand: "Caveat", "Segoe Print", cursive;

    --rp-primary: #0f5c55;
    --rp-primary-hover: #0b4741;
    --rp-primary-soft: #e3efe9;
    --rp-accent: #d9653b;
    --rp-bg: #f6f1e7;
    --rp-surface: #fffdf8;
    --rp-border: #e8dfcf;
    --rp-text: #1d2a24;
    --rp-muted: #6f7a73;
    --rp-sidebar: #1d2a24;
    --rp-sidebar-text: #b4c0b8;
    --rp-sidebar-hover: rgba(246, 241, 231, .07);
    --rp-shadow: 0 1px 0 rgba(29, 42, 36, .05), 0 10px 26px -16px rgba(60, 40, 10, .35);
    --rp-shadow-lg: 0 24px 48px -20px rgba(60, 40, 10, .38);

    --bs-body-color: #1d2a24;
    --bs-body-bg: #f6f1e7;
    --bs-border-color: #e8dfcf;
    --bs-primary: #0f5c55;
    --bs-primary-rgb: 15, 92, 85;
    --bs-link-color: #0f5c55;
    --bs-link-color-rgb: 15, 92, 85;
    --bs-link-hover-color: #d9653b;
    --bs-link-hover-color-rgb: 217, 101, 59;
}

body {
    background-color: var(--rp-paper);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.25  0 0 0 0 0.1  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
::selection { background: var(--rp-sun); color: var(--rp-ink); }

/* Typography: serif display for headings and big numbers */
h1, h2, h3, h4, h5,
.rp-page-header h1, .rp-card-header h5, .rp-stat-value, .rp-auth-box h1, .rp-error-code,
.rp-booking-head .rp-stay-date strong, .rp-rt-price, .rp-price, .rp-toy-head strong {
    font-family: var(--rp-serif);
    font-variation-settings: "SOFT" 50, "opsz" 72;
    letter-spacing: -.015em;
}
.rp-page-header h1 { font-size: 1.85rem; font-weight: 600; letter-spacing: -.025em; }
.rp-card-header h5, .rp-card-header h6 { font-weight: 600; font-size: 1.05rem; }
.rp-stat-value { font-weight: 600; font-size: 1.85rem; letter-spacing: -.03em; }
.rp-hand { font-family: var(--rp-hand); color: var(--rp-terra); font-size: 1.3rem; line-height: 1.2; }

/* Breadcrumbs echo the homepage "kicker" */
.breadcrumb { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.breadcrumb-item a { color: var(--rp-terra); }
.breadcrumb-item.active { color: var(--rp-muted); }
.breadcrumb-item + .breadcrumb-item::before { color: #c9bda6; }

/* Sidebar: deep ink with sun accents */
.rp-sidebar { background: var(--rp-sidebar); background-image: radial-gradient(circle at 0 0, rgba(242, 181, 68, .10), transparent 42%), radial-gradient(circle at 100% 100%, rgba(47, 127, 134, .18), transparent 50%); }
.rp-sidebar-brand { font-family: var(--rp-serif); font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; border-bottom-color: rgba(246, 241, 231, .08); }
.rp-brand-svg { width: 34px; height: 34px; flex-shrink: 0; transition: transform .6s; }
.rp-sidebar-brand:hover .rp-brand-svg { transform: rotate(-20deg); }
.rp-sidebar-context { background: rgba(246, 241, 231, .06); border: 1px dashed rgba(246, 241, 231, .12); }
.rp-sidebar-context strong { font-family: var(--rp-serif); font-weight: 600; font-size: .95rem; }
.rp-nav-section { color: #7f8c84; }
.rp-nav-link.active { background: rgba(242, 181, 68, .12); color: var(--rp-sun); }
.rp-nav-link.active::before { background: var(--rp-sun); }
.rp-plan-chip { background: linear-gradient(135deg, rgba(242, 181, 68, .16), rgba(217, 101, 59, .12)); }
.rp-plan-chip a { color: var(--rp-sun); }

/* Topbar on paper */
.rp-topbar { background: rgba(246, 241, 231, .86); border-bottom-color: var(--rp-border); }
.rp-search input { background: var(--rp-paper-2); }
.rp-search input:focus { background: var(--rp-card); }
.rp-icon-btn:hover, .rp-user-btn:hover { background: var(--rp-paper-2); }
.rp-user-btn strong { font-family: var(--rp-serif); }

/* Cards & surfaces */
.rp-card, .rp-tile, .modal-content, .dropdown-menu { background: var(--rp-card); }
.rp-card { border-color: var(--rp-border); border-radius: 18px; }
.rp-card-header { border-bottom-color: var(--rp-border); }
.rp-card-footer { background: #faf5ea; border-top-color: var(--rp-border); border-radius: 0 0 18px 18px; }
.rp-dt-toolbar { border-bottom-color: var(--rp-border); }
.rp-list li, .rp-amenity-row { border-bottom-color: #f0e8da; }

/* Buttons: ink outline + offset shadow (same as the homepage) */
.btn-primary {
    --bs-btn-bg: var(--rp-lagoon); --bs-btn-border-color: var(--rp-ink);
    --bs-btn-hover-bg: var(--rp-lagoon); --bs-btn-hover-border-color: var(--rp-ink);
    --bs-btn-active-bg: #0b4741; --bs-btn-active-border-color: var(--rp-ink);
    --bs-btn-disabled-bg: #6f8f87; --bs-btn-disabled-border-color: #6f8f87;
    border-width: 1.5px; box-shadow: 2px 2px 0 var(--rp-ink); transition: transform .12s, box-shadow .12s;
}
.btn-primary:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--rp-ink); }
.btn-primary:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: 0 0 0 var(--rp-ink); }
.btn-primary:disabled { box-shadow: none; }
.btn-light { --bs-btn-bg: var(--rp-paper-2); --bs-btn-border-color: var(--rp-paper-2); --bs-btn-hover-bg: #e6dac3; --bs-btn-hover-border-color: #e6dac3; --bs-btn-active-bg: #ddd0b6; color: var(--rp-ink); }
.btn-outline-primary { --bs-btn-color: var(--rp-lagoon); --bs-btn-border-color: var(--rp-lagoon); --bs-btn-hover-bg: var(--rp-lagoon); --bs-btn-hover-border-color: var(--rp-lagoon); }
.btn-warning { --bs-btn-bg: var(--rp-sun); --bs-btn-border-color: var(--rp-ink); --bs-btn-hover-bg: #e9a92f; --bs-btn-hover-border-color: var(--rp-ink); color: var(--rp-ink); box-shadow: 2px 2px 0 var(--rp-ink); }
.btn-danger { --bs-btn-bg: #c4532c; --bs-btn-border-color: #c4532c; --bs-btn-hover-bg: #a8441f; --bs-btn-hover-border-color: #a8441f; }
.btn-soft-danger { background: #f8e3d9; color: #a63d1c; }
.btn-soft-danger:hover { background: #f2d2c3; color: #8a3014; }
.btn-link { color: var(--rp-lagoon); }

/* Forms */
.form-control, .form-select { background-color: var(--rp-card); border-color: #ddd2bf; }
.form-control:focus, .form-select:focus { border-color: #6fa596; box-shadow: 0 0 0 4px rgba(15, 92, 85, .12); background-color: #fff; }
.input-group-text { background: var(--rp-paper-2); border-color: #ddd2bf; }
.form-check-input:checked { background-color: var(--rp-lagoon); border-color: var(--rp-lagoon); }
.form-label { color: var(--rp-ink-2); }

/* Tables */
.rp-table thead th { background: #f7f1e6; border-bottom-color: var(--rp-border); color: #7d7462; }
.rp-table > :not(caption) > * > * { border-bottom-color: #f0e8da; }
.rp-table tbody tr:hover { background: #fbf6ec; }
.page-item.active .page-link { background: var(--rp-lagoon); }
.rp-code { background: var(--rp-paper-2); color: var(--rp-lagoon); }

/* Warm status badges */
.rp-badge-success { background: #e3efd9; color: #3d6b2a; }
.rp-badge-primary { background: #dde9ee; color: #1f5f78; }
.rp-badge-info { background: #dcecee; color: #1d6470; }
.rp-badge-warning { background: #f8e7c3; color: #8a5a12; }
.rp-badge-danger { background: #f6dcd2; color: #a63d1c; }
.rp-badge-secondary { background: #ece5d8; color: #5b5446; }
.rp-badge-dark { background: var(--rp-ink); color: var(--rp-paper); }

/* Icon tones in the same palette */
.rp-tone-teal { background: #dcebe4; color: #0f5c55; }
.rp-tone-blue { background: #dde9ee; color: #1f5f78; }
.rp-tone-violet { background: #ece2ea; color: #7a4a6b; }
.rp-tone-amber { background: #f8e7c3; color: #a8700f; }
.rp-tone-rose { background: #f6dcd2; color: #b4462a; }
.rp-tone-green { background: #e3efd9; color: #3d6b2a; }
.rp-tone-slate { background: #ebe5da; color: #4a4f45; }
.rp-tone-cyan { background: #dcecee; color: #1d6470; }

.rp-avatar { background: linear-gradient(135deg, #2f7f86, #0f5c55); }
.progress { background: #ece4d6; }
.progress-bar { background: var(--rp-lagoon); }
.rp-timeline li { border-left-color: #e8dfcf; }
.rp-timeline li::before { border-color: var(--rp-terra); background: var(--rp-card); }
.rp-empty i { color: #d4c7af; }
.rp-chip, .rp-pills a { background: var(--rp-card); border-color: var(--rp-border); }
.rp-pills a.active { background: var(--rp-ink); border-color: var(--rp-ink); color: var(--rp-paper); }
.rp-tabs .nav-link.active { color: var(--rp-lagoon); border-bottom-color: var(--rp-terra); }
.rp-banner-warning { background: #fbf0d6; color: #7a5410; border-bottom-color: #f1d99a; }
.rp-banner-dark { background: var(--rp-ink); }

/* Calendar, room board, tape chart in the brand palette */
.rp-bar-pending { background: #d99a2b; } .rp-bar-confirmed { background: var(--rp-lagoon); } .rp-bar-checked_in { background: #2f7f86; } .rp-bar-checked_out { background: #a59a86; }
.rp-st-available { --tile: #3d6b2a; } .rp-st-reserved { --tile: #1d6470; } .rp-st-occupied { --tile: #1f5f78; }
.rp-st-cleaning { --tile: #c38411; } .rp-st-maintenance { --tile: #b4462a; } .rp-st-blocked { --tile: var(--rp-ink); }
.dot.rp-st-available { background: #3d6b2a; } .dot.rp-st-reserved { background: #1d6470; } .dot.rp-st-occupied { background: #1f5f78; }
.dot.rp-st-cleaning { background: #c38411; } .dot.rp-st-maintenance { background: #b4462a; } .dot.rp-st-blocked { background: var(--rp-ink); }
.rp-tape-head, .rp-tape-head .rp-tape-label { background: #f7f1e6; }
.rp-tape-head .rp-tape-day.today { background: var(--rp-lagoon); }
.rp-tape-label { background: var(--rp-card); }
.rp-tape-group { background: #f7f1e6; color: var(--rp-terra); }
.fc { --fc-border-color: #ece4d6; --fc-today-bg-color: rgba(242, 181, 68, .12); --fc-button-bg-color: var(--rp-paper-2); --fc-button-border-color: var(--rp-paper-2); --fc-button-hover-bg-color: #e6dac3; --fc-button-active-bg-color: var(--rp-lagoon); --fc-button-active-border-color: var(--rp-lagoon); }
.rp-heat .h-full { background: #e3efd9; color: #3d6b2a; } .rp-heat .h-some { background: #f8e7c3; color: #8a5a12; } .rp-heat .h-none { background: #f6dcd2; color: #a63d1c; }

/* Toasts and notes */
.rp-toast { background: var(--rp-card); border-color: var(--rp-border); }
.rp-notifications .rp-notif-item.unread { background: #fbf3e2; }
.form-select.w-auto { padding-right: 2.5rem; min-width: 8.5rem; }
.accordion { --bs-accordion-bg: var(--rp-card); --bs-accordion-border-color: var(--rp-border); --bs-accordion-active-bg: #f7f1e6; --bs-accordion-active-color: var(--rp-ink); --bs-accordion-btn-focus-box-shadow: 0 0 0 4px rgba(15, 92, 85, .12); }
.accordion-button strong { font-family: var(--rp-serif); font-weight: 600; }

/* Print (reports, invoices from the panel) */
@media print {
    .rp-sidebar, .rp-topbar, .rp-no-print, .rp-page-header .btn, .rp-page-header .dropdown, .rp-banner, .rp-toast-wrap, footer { display: none !important; }
    .rp-main { margin: 0 !important; padding: 0 !important; }
    body { background: #fff !important; }
    .rp-card { box-shadow: none !important; break-inside: avoid; }
}
.text-uppercase::placeholder { text-transform: none; }

/* Website theme picker (hotel settings + Super Admin) */
.rp-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.rp-theme-option { display: block; cursor: pointer; position: relative; }
.rp-theme-option input { position: absolute; opacity: 0; }
.rp-theme-card { display: block; border: 1.5px solid var(--rp-border); border-radius: 16px; overflow: hidden; background: var(--rp-card); transition: border-color .15s, box-shadow .15s, transform .15s; height: 100%; }
.rp-theme-option:hover .rp-theme-card { border-color: #a9c9bd; transform: translateY(-2px); }
.rp-theme-option input:checked + .rp-theme-card { border-color: var(--rp-ink); box-shadow: 3px 3px 0 var(--rp-ink); }
.rp-theme-option input:focus-visible + .rp-theme-card { outline: 2px solid var(--rp-primary); outline-offset: 2px; }
.rp-theme-option.is-locked { cursor: not-allowed; }
.rp-theme-option.is-locked .rp-theme-thumb { filter: grayscale(.5); opacity: .7; }
.rp-theme-meta { display: block; padding: .75rem .9rem .85rem; }
.rp-theme-meta strong { font-family: var(--rp-serif); font-size: 1.02rem; }
.rp-theme-thumb { display: flex; flex-direction: column; aspect-ratio: 16 / 10; padding: 0; overflow: hidden; border-bottom: 1px solid var(--rp-border); font-size: .62rem; }
.rp-theme-thumb .tt-nav { display: flex; align-items: center; gap: .35rem; padding: .35rem .55rem; border-bottom: 1px solid; }
.rp-theme-thumb .tt-nav i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.rp-theme-thumb .tt-nav b { font-size: .7rem; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-theme-thumb .tt-nav em { font-style: normal; color: #fff; padding: .12rem .45rem; font-size: .55rem; font-weight: 600; }
.rp-theme-thumb .tt-hero { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem; padding: .5rem .6rem; }
.rp-theme-thumb .tt-hero b { font-size: 1.05rem; line-height: 1; }
.rp-theme-thumb .tt-search { display: flex; gap: .25rem; padding: .25rem; align-self: stretch; }
.rp-theme-thumb .tt-search i { flex: 1; height: 9px; border-radius: 2px; display: block; }
.rp-theme-thumb .tt-search em { width: 26px; height: 9px; display: block; }
.rp-theme-thumb .tt-cards { display: flex; gap: .3rem; padding: .35rem .6rem .45rem; }
.rp-theme-thumb .tt-cards > span { flex: 1; height: 26px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.rp-theme-thumb .tt-cards i { display: block; height: 14px; }

/* ---------- Website & Notifications: banner preview, palettes, colour preview ---------- */
.rp-banner-preview { position: relative; aspect-ratio: 16 / 8; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #f2c98a 0%, #e9a46a 55%, #0f5c55 55.5%, #0b3f3a 100%) center / cover no-repeat; border: 1px solid var(--rp-border); display: flex; align-items: flex-end; }
.rp-banner-preview .rp-bp-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .04) 40%, rgba(0, 0, 0, .7)); transition: background .2s; }
.rp-banner-preview[data-shading="strong"] .rp-bp-shade { background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .25) 40%, rgba(0, 0, 0, .85)); }
.rp-banner-preview[data-shading="none"] .rp-bp-shade { background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .55)); }
.rp-bp-text { position: relative; padding: 1rem 1.1rem; color: #fff; display: grid; gap: .1rem; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
.rp-bp-text small { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.rp-bp-text strong { font-family: "Fraunces", Georgia, serif; font-size: clamp(1.2rem, 2.6vw, 1.7rem); font-weight: 600; line-height: 1.1; }
.rp-bp-source { position: absolute; top: .6rem; right: .6rem; background: rgba(20, 20, 20, .62); color: #fff; font-size: .72rem; padding: .2rem .55rem; border-radius: 999px; }
.rp-palettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .4rem; }
.rp-palettes button { border: 1.5px solid var(--rp-border); background: var(--rp-surface); border-radius: 10px; padding: .4rem .5rem; text-align: left; display: grid; gap: .25rem; }
.rp-palettes button:hover { border-color: var(--rp-primary, #0f5c55); }
.rp-palettes i { display: inline-block; width: 13px; height: 13px; border-radius: 50%; margin-right: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.rp-palettes span { font-size: .72rem; font-weight: 600; }
.rp-colour-preview { --a: #0f5c55; --p: #f6f1e7; --c: #fffdf8; --i: #1d2a24; --h: #f2b544; --s: #d9653b; --on: #fff;
    border-radius: 14px; overflow: hidden; border: 1px solid var(--rp-border); background: var(--p); color: var(--i); font-size: .82rem; }
.rp-colour-preview .cp-nav { display: flex; justify-content: space-between; align-items: center; padding: .6rem .8rem; border-bottom: 1px solid color-mix(in srgb, var(--i) 14%, var(--p)); }
.rp-colour-preview .cp-btn { background: var(--a); color: var(--on); border-radius: 8px; padding: .3rem .65rem; font-weight: 600; font-size: .75rem; }
.rp-colour-preview .cp-body { padding: .8rem; }
.rp-colour-preview .cp-kicker { font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--s); }
.rp-colour-preview .cp-h { display: block; font-family: "Fraunces", Georgia, serif; font-size: 1.15rem; margin: .1rem 0 .3rem; }
.rp-colour-preview p { color: color-mix(in srgb, var(--i) 75%, var(--p)); margin-bottom: .6rem; }
.rp-colour-preview .cp-card { position: relative; background: var(--c); border: 1px solid color-mix(in srgb, var(--i) 14%, var(--p)); border-radius: 12px; padding: .65rem .75rem; display: grid; gap: .1rem; }
.rp-colour-preview .cp-tag { position: absolute; top: -.55rem; right: .6rem; background: var(--h); color: #1b1b1b; font-size: .62rem; font-weight: 700; padding: .1rem .45rem; border-radius: 99px; }
.rp-colour-preview .cp-muted { color: color-mix(in srgb, var(--i) 58%, var(--p)); font-size: .74rem; }
.rp-colour-preview .cp-link { color: var(--a); font-weight: 600; font-size: .76rem; }
.rp-colour-preview .cp-foot { padding: .5rem .8rem; background: color-mix(in srgb, var(--i) 94%, #000); color: color-mix(in srgb, var(--p) 72%, var(--i)); font-size: .72rem; }
.rp-colour-preview.is-dark .cp-foot { background: color-mix(in srgb, var(--p) 70%, #000); color: color-mix(in srgb, var(--i) 65%, var(--p)); }
.rp-palettes .rp-pal-dots { display: flex; gap: 2px; }
#colourFields .form-control-color { flex: 0 0 44px; max-width: 44px; padding: .2rem; }

/* ---------- Super Admin → Settings: logo previews on light / dark ---------- */
.rp-logo-tile { height: 88px; border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 1rem; border: 1px solid var(--rp-border); }
.rp-logo-tile.is-light { background: #f6f1e7; }
.rp-logo-tile.is-dark { background: #1d2a24; background-image: radial-gradient(circle at 0 0, rgba(242, 181, 68, .12), transparent 50%); border-color: #1d2a24; }
.rp-logo-tile img { max-height: 52px; max-width: 100%; object-fit: contain; }
.rp-logo-empty { font-size: .8rem; color: #6f7a73; }
.rp-logo-tile.is-dark .rp-logo-empty { color: #b4c0b8; }
.rp-logo-size-preview { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; padding: .5rem 1.2rem; border-radius: 12px; background: #f3ede2; border: 1px solid var(--rp-border); overflow: hidden; }
.rp-lsp-brand { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; }
.rp-lsp-brand img { width: auto; max-width: 100%; object-fit: contain; }
.rp-lsp-brand b { font-family: "Fraunces", Georgia, serif; font-size: 1.35rem; color: #1d2a24; white-space: nowrap; }
.rp-lsp-links { display: flex; align-items: center; gap: .9rem; flex-shrink: 0; }
.rp-lsp-links i { width: 54px; height: 8px; border-radius: 4px; background: #d9d1c1; }
.rp-lsp-links em { font-style: normal; font-size: .78rem; font-weight: 600; color: #fff; background: #1d2a24; border-radius: 999px; padding: .45rem .9rem; }
@media (max-width: 767px) { .rp-lsp-links i { display: none; } }
/* Super Admin → Settings: homepage navigation bar modes */
.rp-nav-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; }
.rp-nav-mode { cursor: pointer; margin: 0; }
.rp-nav-mode input { position: absolute; opacity: 0; pointer-events: none; }
.rp-nav-mode-card { display: grid; gap: .35rem; height: 100%; padding: .8rem; border: 1.5px solid var(--rp-border); border-radius: 12px; background: var(--rp-surface); transition: border-color .15s, box-shadow .15s; }
.rp-nav-mode:hover .rp-nav-mode-card { border-color: #cbbf9f; }
.rp-nav-mode input:checked + .rp-nav-mode-card { border-color: var(--rp-primary); box-shadow: 0 0 0 3px rgba(15, 92, 85, .14); }
.rp-nav-mode input:focus-visible + .rp-nav-mode-card { outline: 2px solid var(--rp-primary); outline-offset: 2px; }
.rp-nav-mode-demo { position: relative; display: grid; gap: 5px; align-content: start; height: 62px; padding: 16px 10px 8px; border-radius: 8px; background: #f3ede2; overflow: hidden; }
.rp-nav-mode-demo .nm-bar { position: absolute; left: 0; right: 0; top: 0; height: 11px; background: #1d2a24; }
.rp-nav-mode-demo .nm-line { height: 6px; border-radius: 3px; background: #d9d1c1; }
.rp-nav-mode-demo .nm-line.short { width: 60%; }
.rp-nav-mode-demo.is-fixed .nm-line { animation: rpNmScroll 3s ease-in-out infinite; }
.rp-nav-mode-demo.is-autohide .nm-line { animation: rpNmScroll 3s ease-in-out infinite; }
.rp-nav-mode-demo.is-autohide .nm-bar { animation: rpNmHide 3s ease-in-out infinite; }
.rp-nav-mode-demo.is-static .nm-line, .rp-nav-mode-demo.is-static .nm-bar { animation: rpNmScroll 3s ease-in-out infinite; }
@keyframes rpNmScroll { 0%, 15% { transform: translateY(0); } 50%, 65% { transform: translateY(-18px); } 100% { transform: translateY(0); } }
@keyframes rpNmHide { 0%, 15% { transform: translateY(0); } 35%, 65% { transform: translateY(-100%); } 85%, 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .rp-nav-mode-demo * { animation: none !important; } }
/* Super Admin → Settings → Homepage footer */
.rp-footer-links { display: grid; gap: .5rem; }
.rp-footer-link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: .5rem; align-items: center; }
@media (max-width: 575px) { .rp-footer-link { grid-template-columns: 1fr; } }
.rp-footer-preview { display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: center; padding: 1.4rem 1.6rem; border-radius: 12px; background: #f3ede2; border: 1px solid var(--rp-border); border-top: 2px solid #1d2a24; color: #1d2a24; }
.rp-footer-preview .fp-brand { font-family: "Fraunces", Georgia, serif; font-size: 1.2rem; }
.rp-footer-preview .fp-note { font-family: "Caveat", cursive; font-size: 1.15rem; color: #d9653b; margin: .2rem 0 0; }
.rp-footer-preview .fp-social { display: flex; gap: .4rem; margin-top: .5rem; }
.rp-footer-preview .fp-social:empty { display: none; }
.rp-footer-preview .fp-social i { width: 30px; height: 30px; border: 1.5px solid #1d2a24; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; }
.rp-footer-preview .fp-links { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-weight: 600; font-size: .9rem; color: #44524b; }
.rp-footer-preview .fp-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .2rem 1rem; color: #6f7a73; }
@media (max-width: 767px) { .rp-footer-preview { grid-template-columns: 1fr; } }
.rp-email-footer-preview { background: #f6f1e7; border-radius: 12px; border: 1px solid var(--rp-border); padding: 1rem; display: grid; justify-items: center; gap: .8rem; }
.rp-email-footer-preview .efp-card { width: min(100%, 420px); background: #fffdf8; border: 1px solid #e8dfcf; border-radius: 12px; padding: 1rem; text-align: center; color: #a59a86; font-size: .82rem; }
.rp-email-footer-preview .efp-foot { display: grid; gap: .2rem; text-align: center; font-size: .74rem; color: #a59a86; max-width: 460px; }
.rp-email-footer-preview .efp-social b { color: #0f5c55; font-weight: 600; }
.rp-nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #f2b544; color: #1d2a24; font-size: .7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
/* Custom domains */
.rp-tab-count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: .2rem; border-radius: 999px; background: #efe6d4; color: #44524b; font-size: .7rem; font-weight: 700; text-align: center; }
.nav-link.active .rp-tab-count { background: var(--rp-primary); color: #fff; }
.rp-domain { font-size: .86rem; color: var(--rp-text, #1d2a24); background: #f3ede2; padding: .1rem .4rem; border-radius: 6px; word-break: break-all; }
.rp-dns-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--rp-muted); font-weight: 700; }
.rp-dns-table td { vertical-align: middle; }
.rp-dns-value { word-break: break-all; }
.rp-domain-status { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem; border-radius: 12px; border: 1px solid var(--rp-border); background: #fbf7ef; }
.rp-domain-status > i { font-size: 1.6rem; line-height: 1; }
.rp-domain-steps { display: grid; gap: .5rem; padding-left: 0; list-style: none; margin: 0; }
.rp-domain-steps li { display: flex; gap: .6rem; align-items: center; font-size: .9rem; }
.rp-domain-steps li i { font-size: 1.05rem; }
/* Super Admin → Settings → Cookie notice preview */
.rp-ck-preview { position: relative; height: 220px; border-radius: 12px; border: 1px solid var(--rp-border); background: #f3ede2; overflow: hidden; transition: opacity .2s; }
.rp-ck-preview.is-off { opacity: .45; }
.rp-ck-page { padding: 22px; display: grid; gap: 10px; }
.rp-ck-page i { height: 10px; border-radius: 5px; background: #ddd4c2; }
.rp-ck-page i.short { width: 55%; }
.rp-ck-box { position: absolute; font-size: .8rem; line-height: 1.45; display: grid; gap: 8px; padding: 12px 14px; }
.rp-ck-box p { margin: 0; }
.rp-ck-box strong { display: block; }
.rp-ck-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.rp-ck-btns span { padding: 5px 12px; border-radius: 999px; font-weight: 600; font-size: .75rem; }
.rp-ck-btns .ck-p-decline { border: 1.5px solid currentColor; }
.rp-ck-preview[data-pos="bar"] .rp-ck-box { left: 0; right: 0; bottom: 0; grid-template-columns: 1fr auto; align-items: center; }
.rp-ck-preview[data-pos="left"] .rp-ck-box, .rp-ck-preview[data-pos="right"] .rp-ck-box { bottom: 12px; width: 260px; border-radius: 12px; }
.rp-ck-preview[data-pos="left"] .rp-ck-box { left: 12px; } .rp-ck-preview[data-pos="right"] .rp-ck-box { right: 12px; }
.rp-ck-preview[data-theme="dark"] .rp-ck-box { background: #1d2a24; color: #e8ede9; }
.rp-ck-preview[data-theme="dark"] .ck-p-accept { background: #f2b544; color: #1d2a24; }
.rp-ck-preview[data-theme="light"] .rp-ck-box { background: #fffdf8; color: #1d2a24; border: 1px solid #e8dfcf; box-shadow: 0 10px 30px -14px rgba(0,0,0,.35); }
.rp-ck-preview[data-theme="light"] .ck-p-accept { background: #0f5c55; color: #fff; }
@media (max-width: 575px) { .rp-ck-preview[data-pos="bar"] .rp-ck-box { grid-template-columns: 1fr; } }
/* Website banner slideshow manager */
.rp-slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; }
.rp-slide { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--rp-border); background: #f3ede2; aspect-ratio: 16 / 10; }
.rp-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-slide.is-removed img { opacity: .3; filter: grayscale(1); }
.rp-slide-no { position: absolute; top: 6px; left: 6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: rgba(20, 20, 20, .7); color: #fff; font-size: .7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.rp-slide-tools { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 4px; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
.rp-slide-tools button, .rp-slide-remove { width: 26px; height: 26px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .9); color: #1d2a24; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; cursor: pointer; margin: 0; }
.rp-slide-remove { margin-left: auto; }
.rp-slide-remove input { position: absolute; opacity: 0; pointer-events: none; }
.rp-slide-remove:has(input:checked), .rp-slide.is-removed .rp-slide-remove { background: #b4462a; color: #fff; }
.rp-slide.is-new { border: 2px dashed var(--rp-primary); }
.rp-slide-new { position: absolute; top: 6px; right: 6px; padding: 1px 7px; border-radius: 999px; background: var(--rp-primary); color: #fff; font-size: .65rem; font-weight: 700; letter-spacing: .03em; }
.rp-slide-tools .rp-slide-drop { margin-left: auto; background: #b4462a; color: #fff; }