/* ================================================================
   CYBE DEMO HOTEL — Neumorphic Layer  (v1)
   Inner neumorphic surfaces for dark & light themes.
   Gold (#c9a84c) used only on corners / borders / accents.
   ================================================================ */

/* ── CSS custom properties for neumorphic shadows ── */
[data-theme="dark"] {
  /* Dark neumorphic: pressed-in feeling — light top-left, dark bottom-right */
  --neu-bg:          #080818;        /* base surface colour */
  --neu-light:       rgba(20,20,50,0.85);
  --neu-dark:        rgba(0,0,5,0.95);

  /* Inner shadow: concave / pressed */
  --neu-inner:
    inset 4px 4px 10px rgba(0,0,5,0.85),
    inset -4px -4px 10px rgba(20,20,50,0.6);

  /* Inner shadow — deeper, for panels */
  --neu-inner-deep:
    inset 6px 6px 16px rgba(0,0,5,0.9),
    inset -6px -6px 16px rgba(20,20,50,0.65);

  /* Raised outer neumorphic (used for cards that sit ON a sunken surface) */
  --neu-raised:
    4px 4px 12px rgba(0,0,5,0.9),
    -4px -4px 12px rgba(20,20,50,0.55);

  --neu-radius-gold:  12px;          /* rounded corners that show gold border */
  --neu-border-gold:  1px solid rgba(201,168,76,0.22);
}

[data-theme="light"] {
  --neu-bg:        #ede9e0;
  --neu-light:     rgba(255,253,248,0.9);
  --neu-dark:      rgba(190,182,165,0.75);

  --neu-inner:
    inset 4px 4px 10px rgba(190,182,165,0.8),
    inset -4px -4px 10px rgba(255,253,248,0.9);

  --neu-inner-deep:
    inset 6px 6px 16px rgba(175,168,150,0.85),
    inset -6px -6px 16px rgba(255,253,248,0.95);

  --neu-raised:
    4px 4px 12px rgba(175,168,150,0.8),
    -4px -4px 12px rgba(255,253,248,0.9);

  --neu-radius-gold:  12px;
  --neu-border-gold:  1px solid rgba(201,168,76,0.28);
}

/* ================================================================
   BODY — sunken background (the whole page feels pressed)
   ================================================================ */
body {
  background-color: var(--bg);
}

/* ================================================================
   LOADER DIALOG — inner neumorphic
   ================================================================ */
.loader-dialog {
  background: var(--neu-bg) !important;
  box-shadow:
    var(--neu-inner),
    0 24px 80px rgba(0,0,0,0.65) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
}

/* Loader bar track */
.loader-bar {
  background: var(--neu-bg);
  box-shadow: var(--neu-inner);
  border-radius: 4px;
  height: 3px !important;
  width: 160px;
}

/* ================================================================
   NAVBAR — concave strip at top
   ================================================================ */
nav {
  background: var(--neu-bg) !important;
  box-shadow:
    var(--neu-inner),
    0 4px 20px rgba(0,0,0,0.4) !important;
  border-bottom: var(--neu-border-gold) !important;
}

/* Mobile menu panel — inner neumorphic */
.mobile-menu {
  background: var(--neu-bg) !important;
  box-shadow:
    inset 3px 0 10px rgba(0,0,5,0.7),
    inset 0 4px 10px rgba(0,0,5,0.5) !important;
  border-left: var(--neu-border-gold) !important;
}

/* Toggle track */
.toggle-track {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
}

/* ================================================================
   HERO SECTION — no neumorphic on hero itself (it's a photo bg)
   but content card gets subtle inset
   ================================================================ */
/* Hero stays photo-bg. No change needed. */

/* ================================================================
   SECTIONS — all <section> and major section wrappers
   ================================================================ */
section,
.rooms-section,
.contact-section,
.social-section,
.gallery-section,
.testi-section,
.app-section,
.about-strip,
.rating-strip {
  background: var(--bg2) !important;
  box-shadow: var(--neu-inner-deep);
  border-radius: 0;           /* sections are full-width, no radius */
  position: relative;
}

/* Every other section gets a slightly different tint for depth rhythm */
section:nth-of-type(even),
.rooms-section,
.gallery-section,
.app-section {
  background: var(--neu-bg) !important;
}

/* ================================================================
   ROOM CARDS — raised on the sunken section
   ================================================================ */
.room-card {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
  overflow: hidden;
}

.room-card:hover {
  box-shadow:
    6px 6px 18px rgba(0,0,5,0.9),
    -6px -6px 18px rgba(20,20,50,0.55),
    0 0 0 1px rgba(201,168,76,0.5) !important;
  border-color: rgba(201,168,76,0.5) !important;
}

[data-theme="light"] .room-card:hover {
  box-shadow:
    6px 6px 18px rgba(175,168,150,0.85),
    -6px -6px 18px rgba(255,253,248,0.95),
    0 0 0 1px rgba(201,168,76,0.45) !important;
}

/* Room card body — inner recess */
.room-card-body {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
}

/* ================================================================
   TESTIMONIAL CARDS — raised
   ================================================================ */
.testi-card {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
}

.testi-card:hover {
  box-shadow:
    6px 6px 18px rgba(0,0,5,0.9),
    -6px -6px 18px rgba(20,20,50,0.55),
    0 0 0 1px rgba(201,168,76,0.45) !important;
}

[data-theme="light"] .testi-card {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
}

/* ================================================================
   GALLERY CARDS — raised tiles
   ================================================================ */
.gallery-card {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
}

.gallery-card:hover {
  box-shadow:
    6px 6px 18px rgba(0,0,5,0.88),
    -6px -6px 18px rgba(20,20,50,0.5),
    0 0 0 1px rgba(201,168,76,0.4) !important;
}

/* ================================================================
   CONTACT FORM — inner concave panel
   ================================================================ */
.contact-form {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner-deep) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
}

/* Form inputs — deeper inner press */
.form-input,
.modal-input {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 8px !important;
}

.form-input:focus,
.modal-input:focus {
  border-color: rgba(201,168,76,0.7) !important;
  box-shadow:
    var(--neu-inner),
    0 0 0 2px rgba(201,168,76,0.18) !important;
}

/* ================================================================
   CONTACT INFO ICONS — raised circles
   ================================================================ */
.contact-icon {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
}

/* ================================================================
   CART ITEMS / PROFILE SECTIONS — inner panels
   ================================================================ */
.cart-item-card,
.cart-summary,
.profile-header,
.profile-section {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
}

/* ================================================================
   SCREEN OVERLAYS (Cart / Profile full-screen)
   ================================================================ */
.cybe-screen {
  background: var(--bg2) !important;
  box-shadow: var(--neu-inner-deep) !important;
}

.cybe-screen-header {
  background: var(--neu-bg) !important;
  box-shadow:
    0 2px 8px rgba(0,0,5,0.6),
    var(--neu-inner) !important;
  border-bottom: var(--neu-border-gold) !important;
}

/* ================================================================
   MODALS — inner concave box
   ================================================================ */
.modal-box,
.cybe-auth-box {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner-deep) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
}

/* ================================================================
   ROOM DETAIL PANEL (RDP)
   ================================================================ */
.rdp-panel {
  background: var(--neu-bg) !important;
  box-shadow:
    inset 4px 0 12px rgba(0,0,5,0.7),
    -8px 0 60px rgba(0,0,0,0.6) !important;
}

.rdp-header {
  background: linear-gradient(to bottom,
    var(--neu-bg) 0%,
    transparent 100%) !important;
}

.rdp-sticky-bar {
  background: var(--neu-bg) !important;
  box-shadow:
    var(--neu-inner),
    0 -2px 12px rgba(0,0,0,0.4) !important;
  border-top: var(--neu-border-gold) !important;
}

.rdp-amenity-item {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 8px !important;
}

.rdp-similar-card {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 8px !important;
}

/* ================================================================
   SOCIAL BUTTONS
   ================================================================ */
.social-btn {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
}

.social-btn:hover {
  box-shadow:
    var(--neu-inner),
    0 0 16px rgba(201,168,76,0.3) !important;
  border-color: rgba(201,168,76,0.55) !important;
}

/* ================================================================
   FOOTER — sunken strip
   ================================================================ */
footer {
  background: var(--neu-bg) !important;
  box-shadow:
    var(--neu-inner-deep),
    inset 0 4px 20px rgba(0,0,0,0.5) !important;
  border-top: var(--neu-border-gold) !important;
}

.footer-bottom {
  border-top: var(--neu-border-gold) !important;
}

/* ================================================================
   MAP WRAPPER
   ================================================================ */
.cybe-map-wrap {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
}

.cybe-map-btn {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border-top: var(--neu-border-gold) !important;
}

/* ================================================================
   iOS / PWA DIALOG
   ================================================================ */
.cybe-dialog-box {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner-deep) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
}

.cybe-dialog-icon {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 14px !important;
}

/* ================================================================
   FAB BUTTONS — inner pressed state on active
   ================================================================ */
.cybe-fab-btn:active {
  box-shadow:
    var(--neu-inner),
    0 1px 3px rgba(0,0,0,0.4) !important;
}

/* ================================================================
   ABOUT STRIP — stats raised chips
   ================================================================ */
.about-stat {
  background: var(--neu-bg);
  box-shadow: var(--neu-raised);
  border: var(--neu-border-gold);
  border-radius: var(--neu-radius-gold);
  padding: 20px 32px;
}

/* ================================================================
   LIGHT MODE OVERRIDES
   Ensure enough contrast on lighter surfaces
   ================================================================ */
[data-theme="light"] .footer-brand-text,
[data-theme="light"] .footer-col a { color: rgba(10,10,31,0.55) !important; }

[data-theme="light"] .room-card:hover {
  box-shadow:
    6px 6px 18px rgba(175,168,150,0.88),
    -6px -6px 18px rgba(255,253,248,0.95),
    0 0 0 1px rgba(201,168,76,0.45) !important;
}

[data-theme="light"] .testi-name { color: #0a0a1f !important; }
[data-theme="light"] .testi-text { color: rgba(10,10,31,0.72) !important; }

[data-theme="light"] .social-btn:hover {
  box-shadow:
    var(--neu-inner),
    0 0 16px rgba(201,168,76,0.2) !important;
}

/* ================================================================
   SECTION SEPARATORS — gold line between sections
   ================================================================ */
section + section::before,
.app-section + footer::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.3), transparent);
  margin: 0;
}

/* ================================================================
   SCROLLBAR — deeper track to match neumorphic feel
   ================================================================ */
::-webkit-scrollbar-track {
  background: var(--neu-bg);
  box-shadow: var(--neu-inner);
}

/* ================================================================
   BOOKING HISTORY ITEMS
   ================================================================ */
.booking-history-item {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 8px !important;
}

/* ================================================================
   TRUST BADGES IN CART
   ================================================================ */
.cart-trust-badge {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
}

/* ================================================================
   GOLD SEPARATOR — keep as-is (already gold)
   ================================================================ */

/* ================================================================
   RESPONSIVE TWEAKS
   ================================================================ */
@media (max-width: 600px) {
  .room-card,
  .testi-card,
  .gallery-card {
    border-radius: 10px !important;
  }
  .contact-form,
  .modal-box,
  .cybe-auth-box {
    border-radius: 10px !important;
  }
}

/* ================================================================
   PAGE TEMPLATE — #cybe-page-main wrapper
   ================================================================ */
#cybe-page-main {
  background: var(--bg2);
  box-shadow: var(--neu-inner-deep);
  min-height: 100vh;
  padding-top: 70px;
}

/* ================================================================
   AUTH PAGE — [cybe_register] shortcode
   ================================================================ */
.cybe-auth-wrap {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner-deep) !important;
  border-radius: 20px !important;
  border: var(--neu-border-gold) !important;
  overflow: hidden;
}

.cybe-auth-card {
  background: transparent !important;
}

/* Tab bar — sunken track */
.cybe-auth-tabs {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border-radius: 12px !important;
  padding: 4px !important;
}

.cybe-auth-tab {
  border-radius: 8px !important;
  transition: box-shadow 0.2s, background 0.2s !important;
}

.cybe-auth-tab.active {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  color: var(--gold) !important;
}

/* Tab sliding indicator */
.cybe-auth-tab-indicator {
  background: transparent !important;
  box-shadow: var(--neu-raised) !important;
  border-radius: 8px !important;
}

/* Input fields */
.cybe-auth-input {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 10px !important;
}

.cybe-auth-input:focus {
  border-color: rgba(201,168,76,0.65) !important;
  box-shadow:
    var(--neu-inner),
    0 0 0 2px rgba(201,168,76,0.15) !important;
}

/* Password strength bar track */
.cybe-auth-pw-bar {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border-radius: 4px !important;
}

/* Submit button — raised */
.cybe-auth-btn {
  box-shadow: var(--neu-raised) !important;
  border-radius: 10px !important;
}

.cybe-auth-btn:active {
  box-shadow: var(--neu-inner) !important;
}

/* ================================================================
   BOOKING PAGE — [cybe_booking] shortcode
   ================================================================ */
.cybe-bk-wrap {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner-deep) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 20px !important;
}

.cybe-bk-card {
  background: transparent !important;
}

/* Inner panels / layout */
.cybe-bk-inner,
.cybe-bk-layout {
  background: transparent !important;
}

/* Form inputs */
.cybe-bk-input,
.cybe-bk-select,
.cybe-bk-textarea {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 10px !important;
}

.cybe-bk-input:focus,
.cybe-bk-select:focus,
.cybe-bk-textarea:focus {
  border-color: rgba(201,168,76,0.65) !important;
  box-shadow:
    var(--neu-inner),
    0 0 0 2px rgba(201,168,76,0.15) !important;
}

/* Summary panel — sunken */
.cybe-bk-summary {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner-deep) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
}

/* Room detail panel inside booking */
.cybe-bk-room-detail {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
}

/* Room choice grid cards — raised */
.cybe-bk-choice-wrap {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
}

.cybe-bk-choice-wrap:hover {
  box-shadow:
    6px 6px 18px rgba(0,0,5,0.88),
    -6px -6px 18px rgba(20,20,50,0.5),
    0 0 0 1px rgba(201,168,76,0.45) !important;
}

[data-theme="light"] .cybe-bk-choice-wrap:hover {
  box-shadow:
    6px 6px 18px rgba(175,168,150,0.88),
    -6px -6px 18px rgba(255,253,248,0.95),
    0 0 0 1px rgba(201,168,76,0.4) !important;
}

/* Coupon row */
.cybe-bk-coupon-wrap {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 10px !important;
}

/* Submit / pay button */
.cybe-bk-btn {
  box-shadow: var(--neu-raised) !important;
  border-radius: 10px !important;
}
.cybe-bk-btn:active {
  box-shadow: var(--neu-inner) !important;
}

/* Confirmed banner */
.cybe-bk-confirmed-banner {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner-deep) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
}

/* ================================================================
   RECEIPT PAGE — [cybe_booking_receipt] shortcode
   ================================================================ */
.cybe-receipt-wrap {
  background: var(--bg2) !important;
  box-shadow: var(--neu-inner-deep) !important;
  min-height: 100vh;
}

/* Luxury receipt card */
.cybe-lx-receipt {
  background: var(--neu-bg) !important;
  box-shadow:
    var(--neu-raised),
    0 20px 60px rgba(0,0,0,0.5) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 16px !important;
}

/* Receipt header */
.cybe-lx-header {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border-bottom: var(--neu-border-gold) !important;
  border-radius: 16px 16px 0 0 !important;
}

/* Receipt body rows */
.cybe-lx-body {
  background: transparent !important;
}

/* Individual data rows — subtle inner recess */
.cybe-lx-row {
  border-bottom: 1px solid rgba(201,168,76,0.08) !important;
}

/* QR code area */
.cybe-lx-qr-row {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border-radius: 12px !important;
  border: var(--neu-border-gold) !important;
  padding: 16px !important;
}

/* Room banner image */
.cybe-lx-room-banner {
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: var(--neu-raised) !important;
}

/* Paid badge */
.cybe-lx-paid-badge,
.paid-badge {
  box-shadow: var(--neu-raised) !important;
  border-radius: 999px !important;
}

/* Footer strip of receipt */
.cybe-lx-footer {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border-top: var(--neu-border-gold) !important;
  border-radius: 0 0 16px 16px !important;
}

/* Download / action buttons */
.cybe-bk-download-btn,
.cybe-receipt-back-btn,
.cybe-proof-btns .cybe-bk-btn {
  box-shadow: var(--neu-raised) !important;
  border-radius: 10px !important;
}
.cybe-bk-download-btn:active,
.cybe-receipt-back-btn:active {
  box-shadow: var(--neu-inner) !important;
}

/* Proof panel */
.cybe-proof-panel {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner-deep) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
}

.cybe-proof-step {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 10px !important;
}

.cybe-proof-step-num {
  box-shadow: var(--neu-inner) !important;
  border-radius: 50% !important;
}

/* Loading state */
.cybe-receipt-loading {
  background: var(--bg2) !important;
  box-shadow: var(--neu-inner-deep) !important;
}

.cybe-receipt-spinner {
  border-top-color: var(--gold) !important;
}

/* Error state */
.cybe-receipt-error {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner-deep) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
}

/* ================================================================
   T&C MODAL (inside booking page)
   ================================================================ */
.cybe-tnc-modal {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner-deep) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 16px !important;
}

.cybe-tnc-letter-head {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border-radius: 12px 12px 0 0 !important;
  border-bottom: var(--neu-border-gold) !important;
}

.cybe-tnc-body {
  background: transparent !important;
  box-shadow: var(--neu-inner) !important;
}

.cybe-tnc-footer {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border-top: var(--neu-border-gold) !important;
  border-radius: 0 0 16px 16px !important;
}

.cybe-tnc-accept-btn {
  box-shadow: var(--neu-raised) !important;
  border-radius: 10px !important;
}
.cybe-tnc-accept-btn:active {
  box-shadow: var(--neu-inner) !important;
}

/* ================================================================
   SUCCESS OVERLAY (post-payment)
   ================================================================ */
.cybe-success-dialog {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner-deep) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
}

.cybe-success-circle,
.cybe-success-icon {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
}

.cybe-success-bar {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border-radius: 4px !important;
}

/* ================================================================
   ROOMS PAGE (shortcode [cybe_rooms])
   ================================================================ */

/* The rooms shortcode page wrapper */
.cybe-rooms-page-wrap,
.rooms-shortcode-wrap {
  background: var(--bg2) !important;
  box-shadow: var(--neu-inner-deep) !important;
  min-height: 60vh;
  padding: 40px 20px;
}

/* ================================================================
   PROFILE PAGE (if standalone page)
   ================================================================ */
.cybe-page-wrapper {
  background: transparent;
}

.cybe-page-content {
  background: transparent;
}

/* ================================================================
   GENERAL PAGE CONTENT — WordPress editor content
   ================================================================ */
.entry-content,
.page-content,
.wp-block-group,
.wp-block-cover {
  background: var(--neu-bg);
  box-shadow: var(--neu-inner);
  border-radius: var(--neu-radius-gold);
  border: var(--neu-border-gold);
  padding: 32px !important;
  margin-bottom: 24px;
}

/* WP block images */
.wp-block-image img,
.wp-block-cover img {
  border-radius: 10px;
  box-shadow: var(--neu-raised);
}

/* WP tables */
.wp-block-table table,
table {
  background: var(--neu-bg);
  box-shadow: var(--neu-inner);
  border-radius: 10px;
  overflow: hidden;
}

table th {
  background: var(--neu-bg);
  box-shadow: var(--neu-inner);
  color: var(--gold);
  border-bottom: var(--neu-border-gold) !important;
}

table td {
  border-bottom: 1px solid rgba(201,168,76,0.07) !important;
}

/* Blockquotes */
blockquote {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border-left: 3px solid var(--gold) !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 16px 20px !important;
}

/* ================================================================
   RESPONSIVE PAGE ADJUSTMENTS
   ================================================================ */
@media (max-width: 600px) {
  .cybe-auth-wrap,
  .cybe-bk-wrap,
  .cybe-lx-receipt,
  .cybe-proof-panel,
  .cybe-tnc-modal,
  .cybe-success-dialog {
    border-radius: 12px !important;
  }
}

/* ================================================================
   COMPLETE NEUMORPHIC PASS — Missing Components
   ================================================================ */

/* ── BUTTONS (primary CTAs) ── */
.btn-primary,
.btn-submit,
.btn-book,
.cybe-wa-btn {
  box-shadow: var(--neu-raised) !important;
}
.btn-primary:active,
.btn-submit:active,
.btn-book:active,
.cybe-wa-btn:active {
  box-shadow: var(--neu-inner) !important;
}

/* ── HAMBURGER button ── */
.hamburger {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border-radius: 8px !important;
  border: var(--neu-border-gold) !important;
}
.hamburger:active {
  box-shadow: var(--neu-inner) !important;
}

/* ── TOGGLE THUMB ── */
.toggle-thumb {
  box-shadow: var(--neu-raised) !important;
}
[data-theme="light"] .toggle-thumb {
  box-shadow: var(--neu-raised) !important;
}

/* ── APP STORE BUTTONS ── */
.app-btn--android,
.app-btn--ios {
  box-shadow: var(--neu-raised) !important;
}
.app-btn--android:active,
.app-btn--ios:active {
  box-shadow: var(--neu-inner) !important;
}

/* ── APP MOCKUP CARDS ── */
.app-mockup {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 20px !important;
  padding: 8px !important;
}
.app-mockup img {
  border-radius: 14px !important;
  box-shadow: var(--neu-inner) !important;
}

/* ── FOOTER COLUMNS ── */
.footer-inner {
  background: transparent;
}
.footer-brand {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
  padding: 24px !important;
}
.footer-col {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
  padding: 24px !important;
}

/* ── WP ADMIN NOTICES ── */
.notice,
.notice-success,
.notice-error {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border-radius: 8px !important;
  border-left: 3px solid rgba(201,168,76,0.6) !important;
}
.notice-success { border-left-color: rgba(91,138,0,0.7) !important; }
.notice-error   { border-left-color: rgba(220,50,50,0.7) !important; }

/* ================================================================
   ROOM DETAIL PANEL — sub-elements
   ================================================================ */
.rdp-body {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner-deep) !important;
}

.rdp-section {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border-bottom: var(--neu-border-gold) !important;
}

.rdp-thumbs {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border-top: var(--neu-border-gold) !important;
}

.rdp-thumb {
  box-shadow: var(--neu-raised) !important;
  border-radius: 4px !important;
}
.rdp-thumb.active {
  box-shadow:
    var(--neu-inner),
    0 0 0 2px rgba(201,168,76,0.6) !important;
}

.rdp-highlights {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border-bottom: var(--neu-border-gold) !important;
}

.rdp-hl-item {
  box-shadow: inset 1px 0 0 rgba(201,168,76,0.1) !important;
}

.rdp-back,
.rdp-share-btn,
.rdp-fullscreen-btn {
  box-shadow: var(--neu-raised) !important;
  border-radius: 4px !important;
}
.rdp-back:active,
.rdp-share-btn:active,
.rdp-fullscreen-btn:active {
  box-shadow: var(--neu-inner) !important;
}

.rdp-book-btn {
  box-shadow: var(--neu-raised) !important;
}
.rdp-book-btn:active {
  box-shadow: var(--neu-inner) !important;
}

.rdp-price-row {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  border: var(--neu-border-gold) !important;
}

.rdp-video-wrap {
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 10px !important;
}

.rdp-type-badge {
  box-shadow: var(--neu-raised) !important;
  border-radius: 4px !important;
}

.rdp-availability-badge {
  box-shadow: var(--neu-raised) !important;
  border-radius: 4px !important;
}

/* ================================================================
   BOOKING PAGE — sub-elements
   ================================================================ */
.cybe-bk-field {
  background: transparent;
}

.cybe-bk-row {
  border-bottom: 1px solid rgba(201,168,76,0.07) !important;
  padding: 8px 0 !important;
}

.cybe-bk-summary-row {
  border-bottom: 1px solid rgba(201,168,76,0.08) !important;
  padding: 8px 0 !important;
}

.cybe-bk-summary-total {
  border-top: var(--neu-border-gold) !important;
  box-shadow: var(--neu-inner) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  margin-top: 8px !important;
}

.cybe-bk-rd-gallery {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 10px !important;
  overflow: hidden;
}

.cybe-bk-rd-main-img {
  box-shadow: var(--neu-inner) !important;
}

.cybe-bk-rd-thumbs {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border-top: var(--neu-border-gold) !important;
  padding: 8px !important;
}

.cybe-bk-rd-info {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 10px !important;
  padding: 16px !important;
}

.cybe-bk-rd-chip {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
}

/* ================================================================
   RECEIPT — sub-elements
   ================================================================ */
.cybe-lx-section-label {
  color: var(--gold) !important;
  letter-spacing: 0.3em;
}

.cybe-lx-tear {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
}

.cybe-lx-divider {
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.3), transparent) !important;
  height: 1px !important;
}

.cybe-lx-logo {
  box-shadow: var(--neu-raised) !important;
  border-radius: 50% !important;
  border: var(--neu-border-gold) !important;
}

.cybe-lx-contact {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border-radius: 8px !important;
  border: var(--neu-border-gold) !important;
  padding: 12px 16px !important;
}

/* ================================================================
   LX CART — Full Screen (all elements)
   ================================================================ */
.lx-cart {
  background: var(--bg2) !important;
  box-shadow: var(--neu-inner-deep) !important;
  min-height: 100vh;
  position: relative;
}

/* Ambient orbs — softer in neumorphic context */
.lx-cart-orb1,
.lx-cart-orb2 {
  opacity: 0.04 !important;
}

.lx-cart-inner {
  background: transparent !important;
}

/* Brand / logo strip */
.lx-cart-brand {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border-bottom: var(--neu-border-gold) !important;
  padding: 20px 24px !important;
}

.lx-cart-logo {
  box-shadow: var(--neu-raised) !important;
  border-radius: 50% !important;
  border: var(--neu-border-gold) !important;
}

.lx-cart-divider {
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.35), transparent) !important;
  height: 1px !important;
  margin: 12px 0 !important;
}

/* Header bar */
.lx-cart-header {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border-bottom: var(--neu-border-gold) !important;
  padding: 16px 24px !important;
}

.lx-cart-header-icon {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 10px !important;
  padding: 10px !important;
}

/* Count pill */
.lx-cart-count-pill {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 999px !important;
  padding: 4px 14px !important;
  color: var(--gold) !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
}

/* Clear all button */
.lx-cart-clear {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
}
.lx-cart-clear:active {
  box-shadow: var(--neu-inner) !important;
}

/* Cart item cards */
.lx-cart-item {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
  margin-bottom: 12px !important;
  transition: box-shadow 0.2s, border-color 0.2s !important;
}
.lx-cart-item:hover {
  box-shadow:
    6px 6px 18px rgba(0,0,5,0.88),
    -6px -6px 18px rgba(20,20,50,0.5),
    0 0 0 1px rgba(201,168,76,0.4) !important;
}

.lx-cart-item-body {
  background: transparent !important;
}

.lx-cart-item-icon {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 10px !important;
}

.lx-cart-item-num {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 50% !important;
}

/* Chips */
.lx-cart-chip {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 999px !important;
}
.lx-cart-chip-gold {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: 1px solid rgba(201,168,76,0.5) !important;
  color: var(--gold) !important;
  border-radius: 999px !important;
}

/* Remove button */
.lx-cart-rm-btn {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 8px !important;
}
.lx-cart-rm-btn:hover {
  box-shadow: var(--neu-inner) !important;
  border-color: rgba(220,50,50,0.5) !important;
}

/* Item actions */
.lx-cart-item-actions {
  border-top: var(--neu-border-gold) !important;
  padding-top: 10px !important;
  margin-top: 10px !important;
}

/* Cart footer */
.lx-cart-footer {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border-top: var(--neu-border-gold) !important;
  padding: 20px 24px !important;
}

.lx-cart-footer-note {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
}

/* Book button */
.lx-cart-book-btn {
  box-shadow: var(--neu-raised) !important;
  border-radius: 10px !important;
}
.lx-cart-book-btn:active {
  box-shadow: var(--neu-inner) !important;
}

/* Explore button */
.lx-cart-explore-btn {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 10px !important;
}
.lx-cart-explore-btn:active {
  box-shadow: var(--neu-inner) !important;
}

/* More link */
.lx-cart-more-link {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  display: inline-block;
}

/* Empty state */
.lx-cart-empty {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner-deep) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
  padding: 48px 32px !important;
  text-align: center;
}

.lx-cart-empty-ring {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 50% !important;
  width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px !important;
}

/* Gate (logged-out) */
.lx-cart-gate {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner-deep) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 20px !important;
  padding: 48px 36px !important;
  max-width: 480px;
  margin: 60px auto !important;
  text-align: center;
}

.lx-cart-gate-lock {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 50% !important;
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px !important;
  color: var(--gold);
}

.lx-cart-gate-primary {
  box-shadow: var(--neu-raised) !important;
  border-radius: 10px !important;
}
.lx-cart-gate-primary:active {
  box-shadow: var(--neu-inner) !important;
}

.lx-cart-gate-ghost {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 10px !important;
  padding: 12px 24px !important;
  display: inline-block;
}

/* ================================================================
   CP PROFILE PAGE — all elements
   ================================================================ */
.cp-screen,
.cp-screens {
  background: var(--bg2) !important;
  box-shadow: var(--neu-inner-deep) !important;
  min-height: 100vh;
}

/* Topbar */
.cp-topbar {
  /* transparent so cover photo shows through */
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: none !important;
  padding: 14px 20px !important;
}

.cp-topbar-actions {
  display: flex;
  gap: 8px;
}

/* Name Header (replaces removed hero) */
.cp-name-header {
  background: var(--neu-bg) !important;
  border-bottom: var(--neu-border-gold) !important;
  box-shadow: var(--neu-inner) !important;
}

.cp-name-header-name {
  color: var(--gold, #c9a84c) !important;
}

.cp-name-icon-btn {
  background: rgba(201,168,76,.12) !important;
  border-color: rgba(201,168,76,.3) !important;
  box-shadow: var(--neu-raised) !important;
}

.cp-badge-dot {
  box-shadow: var(--neu-raised) !important;
  border-radius: 50% !important;
}

/* Subheader */
.cp-subheader {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border-bottom: var(--neu-border-gold) !important;
  padding: 12px 20px !important;
}

/* Stats strip */
.cp-stats-strip {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border-bottom: var(--neu-border-gold) !important;
  padding: 16px 0 !important;
}

.cp-stat {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 10px !important;
  padding: 12px 20px !important;
  text-align: center;
}

.cp-stat-sep {
  background: rgba(201,168,76,0.2) !important;
  width: 1px !important;
}

/* Cards */
.cp-card {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
  margin-bottom: 12px !important;
}

.cp-form-card {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner-deep) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
  padding: 24px !important;
  margin-bottom: 12px !important;
}

/* Rows */
.cp-row {
  background: transparent !important;
  border-bottom: 1px solid rgba(201,168,76,0.07) !important;
  padding: 14px 16px !important;
  transition: background 0.2s;
}
.cp-row:hover {
  background: rgba(201,168,76,0.03) !important;
}
.cp-row--danger:hover {
  background: rgba(220,50,50,0.04) !important;
}
.cp-row--info {
  background: rgba(201,168,76,0.03) !important;
}

.cp-row-divider {
  background: rgba(201,168,76,0.12) !important;
  height: 1px !important;
  margin: 4px 0 !important;
}

/* Row icons */
.cp-row-icon {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 10px !important;
}

.cp-row-icon--gold {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: 1px solid rgba(201,168,76,0.4) !important;
  color: var(--gold) !important;
  border-radius: 10px !important;
}

.cp-row-icon--danger {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: 1px solid rgba(220,50,50,0.3) !important;
  color: rgba(220,80,80,0.9) !important;
  border-radius: 10px !important;
}

/* Inputs */
.cp-input {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 10px !important;
}
.cp-input:focus {
  border-color: rgba(201,168,76,0.65) !important;
  box-shadow:
    var(--neu-inner),
    0 0 0 2px rgba(201,168,76,0.15) !important;
}

.cp-pw-wrap {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 10px !important;
}

.cp-eye {
  background: transparent !important;
  color: var(--gold) !important;
}

/* Buttons */
.cp-btn {
  box-shadow: var(--neu-raised) !important;
  border-radius: 10px !important;
}
.cp-btn:active {
  box-shadow: var(--neu-inner) !important;
}

.cp-icon-btn {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 10px !important;
}
.cp-icon-btn:active {
  box-shadow: var(--neu-inner) !important;
}

/* Chips */
.cp-chip {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 999px !important;
}
.cp-chip--gold {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: 1px solid rgba(201,168,76,0.5) !important;
  color: var(--gold) !important;
  border-radius: 999px !important;
}

/* Booking history */
.cp-booking-list {
  background: transparent;
}

.cp-bk-card {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
  margin-bottom: 10px !important;
  transition: box-shadow 0.2s !important;
}
.cp-bk-card:hover {
  box-shadow:
    6px 6px 18px rgba(0,0,5,0.88),
    -6px -6px 18px rgba(20,20,50,0.5),
    0 0 0 1px rgba(201,168,76,0.4) !important;
}

.cp-bk-top {
  border-bottom: var(--neu-border-gold) !important;
  padding-bottom: 10px !important;
}

.cp-bk-badge {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 999px !important;
  padding: 3px 12px !important;
}

.cp-bk-accent {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
}

.cp-bk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cp-bk-cancel {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: 1px solid rgba(220,50,50,0.3) !important;
  color: rgba(220,80,80,0.9) !important;
  border-radius: 8px !important;
}
.cp-bk-cancel:active {
  box-shadow: var(--neu-inner) !important;
}

/* Modal */
.cp-modal {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner-deep) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 16px !important;
}

.cp-modal-body {
  background: transparent !important;
}

.cp-modal-icon {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 50% !important;
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px !important;
}

.cp-modal-btns {
  border-top: var(--neu-border-gold) !important;
  padding-top: 16px !important;
  display: flex;
  gap: 10px;
}

.cp-modal-confirm {
  box-shadow: var(--neu-raised) !important;
  border-radius: 8px !important;
}
.cp-modal-confirm:active {
  box-shadow: var(--neu-inner) !important;
}

.cp-modal-keep {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 8px !important;
}
.cp-modal-keep:active {
  box-shadow: var(--neu-inner) !important;
}

.cp-overlay {
  background: rgba(0,0,0,0.7) !important;
  backdrop-filter: blur(6px) !important;
}

/* Empty state */
.cp-empty {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner-deep) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
  padding: 48px 32px !important;
  text-align: center;
}

.cp-empty-icon {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 50% !important;
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px !important;
  color: var(--gold);
}

/* Row count */
.cp-row-count {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 999px !important;
  padding: 2px 10px !important;
  font-size: 11px !important;
  color: var(--gold) !important;
}

/* Form hint */
.cp-form-hint {
  opacity: 0.65;
  font-size: 11px !important;
}

/* Feedback */
.cp-feedback {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
}

/* ================================================================
   CRP ROOMS CATALOGUE PAGE
   ================================================================ */

/* Hero banner */
.crp-hero {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner-deep) !important;
  border-bottom: var(--neu-border-gold) !important;
  position: relative;
  overflow: hidden;
}

.crp-hero-overlay {
  background: linear-gradient(to bottom,
    rgba(0,0,15,0.3) 0%,
    var(--neu-bg) 100%) !important;
}

.crp-hero-content {
  position: relative;
  z-index: 2;
}

.crp-hero-tag {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 999px !important;
  padding: 4px 16px !important;
  display: inline-block;
  color: var(--gold) !important;
}

/* Filter bar */
.crp-filter-bar {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
  padding: 12px 16px !important;
  margin-bottom: 24px !important;
}

.crp-filter-inner {
  background: transparent !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.crp-filter-btn {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 999px !important;
  padding: 6px 18px !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  cursor: pointer;
  transition: box-shadow 0.2s, border-color 0.2s !important;
}
.crp-filter-btn:hover,
.crp-filter-btn.active {
  box-shadow: var(--neu-inner) !important;
  border-color: rgba(201,168,76,0.55) !important;
  color: var(--gold) !important;
}

/* Sort select */
.crp-sort {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
}

.crp-sort-select {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text) !important;
  outline: none !important;
}

/* Grid container */
.crp-grid {
  background: transparent;
}

/* Count badge */
.crp-count {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 999px !important;
  padding: 4px 14px !important;
  font-size: 11px !important;
  color: var(--gold) !important;
}

/* Meta strip */
.crp-meta {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border-top: var(--neu-border-gold) !important;
  padding: 10px 16px !important;
}

/* CTA section */
.crp-cta {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner-deep) !important;
  border-top: var(--neu-border-gold) !important;
  padding: 60px 20px !important;
  text-align: center;
}

.crp-cta-inner {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 20px !important;
  padding: 40px 32px !important;
  max-width: 600px;
  margin: 0 auto !important;
}

/* Empty state */
.crp-empty {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner-deep) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
  padding: 60px 32px !important;
  text-align: center;
  margin: 40px auto !important;
}

/* ================================================================
   SCAN PAGE
   ================================================================ */
.cybe-scan-section {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
  margin-bottom: 16px !important;
  overflow: hidden;
}

.cybe-scan-section-head {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border-bottom: var(--neu-border-gold) !important;
  padding: 12px 20px !important;
  color: var(--gold) !important;
  letter-spacing: 0.2em !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
}

.cybe-scan-section-body {
  background: transparent !important;
  padding: 8px 0 !important;
}

.cybe-scan-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 20px !important;
  border-bottom: 1px solid rgba(201,168,76,0.06) !important;
  transition: background 0.15s;
}
.cybe-scan-row:hover {
  background: rgba(201,168,76,0.03) !important;
}

.cybe-scan-key {
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  flex-shrink: 0;
  min-width: 120px;
}

.cybe-scan-val {
  font-size: 13px !important;
  color: var(--text) !important;
  font-weight: 500 !important;
}

.cybe-scan-cell {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 12px !important;
}

.cybe-scan-link {
  color: var(--gold) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(201,168,76,0.3) !important;
  transition: border-color 0.2s !important;
}
.cybe-scan-link:hover {
  border-color: var(--gold) !important;
}

.cybe-scan-vis {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 10px !important;
  padding: 20px !important;
}

.cybe-scan-empty {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner-deep) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
  padding: 60px 32px !important;
  text-align: center;
}

/* ================================================================
   MAIL PREVIEW (admin)
   ================================================================ */
.cybe-mail-preview-wrap {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner-deep) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
  padding: 24px !important;
}

.cybe-mail-card {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: var(--neu-radius-gold) !important;
  padding: 24px !important;
  margin-bottom: 16px !important;
}

.cybe-mail-field {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  margin-bottom: 10px !important;
}

.cybe-mail-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.cybe-mail-stat {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 10px !important;
  padding: 12px 20px !important;
  text-align: center;
  flex: 1;
}

.cybe-mail-desc {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inner) !important;
  border: var(--neu-border-gold) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
}

/* ================================================================
   LIGHT MODE — lx-cart / cp / crp overrides
   ================================================================ */
[data-theme="light"] .lx-cart-item:hover {
  box-shadow:
    6px 6px 18px rgba(175,168,150,0.88),
    -6px -6px 18px rgba(255,253,248,0.95),
    0 0 0 1px rgba(201,168,76,0.4) !important;
}
[data-theme="light"] .cp-bk-card:hover {
  box-shadow:
    6px 6px 18px rgba(175,168,150,0.88),
    -6px -6px 18px rgba(255,253,248,0.95),
    0 0 0 1px rgba(201,168,76,0.4) !important;
}
[data-theme="light"] .lx-cart-empty-ring,
[data-theme="light"] .lx-cart-gate-lock,
[data-theme="light"] .cp-empty-icon,
[data-theme="light"] .cp-modal-icon {
  box-shadow: var(--neu-raised) !important;
}

/* ================================================================
   RESPONSIVE — pages
   ================================================================ */
@media (max-width: 600px) {
  .lx-cart-gate {
    border-radius: 14px !important;
    padding: 36px 20px !important;
    margin: 30px 16px !important;
  }
  .cp-form-card {
    padding: 16px !important;
    border-radius: 12px !important;
  }
  .crp-cta-inner {
    padding: 28px 20px !important;
    border-radius: 14px !important;
  }
  .cybe-scan-section {
    border-radius: 10px !important;
  }
}