@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  --background: 36 45% 96%;
  --foreground: 22 22% 15%;
  --card: 0 0% 100%;
  --card-foreground: 22 22% 15%;
  --popover: 0 0% 100%;
  --popover-foreground: 22 22% 15%;
  --primary: 25 45% 50%;
  --primary-foreground: 36 45% 96%;
  --primary-glow: 26 56% 61%;
  --primary-soft: 30 50% 92%;
  --secondary: 32 47% 81%;
  --secondary-foreground: 22 22% 15%;
  --muted: 33 35% 92%;
  --muted-foreground: 24 12% 38%;
  --accent: 36 41% 60%;
  --accent-foreground: 22 22% 15%;
  --accent-soft: 36 50% 92%;
  --sand: 32 47% 81%;
  --terracotta: 18 55% 55%;
  --champagne: 36 41% 70%;
  --espresso: 22 22% 15%;
  --espresso-deep: 20 25% 12%;
  --ivory: 36 45% 96%;
  --warm-mist: 30 40% 88%;
  --destructive: 0 65% 52%;
  --destructive-foreground: 0 0% 100%;
  --border: 30 30% 84%;
  --input: 30 30% 84%;
  --ring: 25 45% 50%;
  --radius: 1.5rem;
  --gradient-hero: linear-gradient(135deg, hsl(36 45% 96% / 0.85), hsl(30 50% 92% / 0.75));
  --gradient-caramel: linear-gradient(135deg, hsl(25 45% 50%), hsl(26 56% 61%));
  --gradient-warm: linear-gradient(135deg, hsl(32 47% 88%), hsl(36 45% 96%));
  --gradient-gold: linear-gradient(135deg, hsl(36 50% 70%), hsl(36 41% 50%));
  --gradient-radial: radial-gradient(circle at 30% 20%, hsl(26 56% 61% / 0.22), transparent 60%);
  --gradient-overlay: linear-gradient(180deg, hsl(22 22% 15% / 0) 0%, hsl(22 22% 15% / 0.15) 35%, hsl(22 22% 15% / 0.65) 100%);
  --gradient-cinematic: linear-gradient(180deg, hsl(22 22% 12% / 0.45) 0%, hsl(22 22% 12% / 0.25) 40%, hsl(22 22% 12% / 0.75) 100%);
  --gradient-espresso: linear-gradient(135deg, hsl(20 25% 12%), hsl(22 22% 18%));
  --shadow-soft: 0 4px 24px -8px hsl(25 45% 30% / 0.12);
  --shadow-card: 0 10px 40px -12px hsl(22 22% 15% / 0.10);
  --shadow-elegant: 0 24px 70px -22px hsl(25 45% 30% / 0.30);
  --shadow-glow: 0 0 50px hsl(26 56% 61% / 0.35);
  --shadow-luxe: 0 30px 80px -25px hsl(20 25% 12% / 0.4);
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-cinema: cubic-bezier(0.65, 0, 0.35, 1);
  --sidebar-background: 20 25% 12%;
  --sidebar-foreground: 36 30% 88%;
  --sidebar-primary: 26 56% 61%;
  --sidebar-primary-foreground: 20 25% 12%;
  --sidebar-accent: 22 22% 18%;
  --sidebar-accent-foreground: 36 41% 70%;
  --sidebar-border: 22 18% 22%;
  --sidebar-ring: 26 56% 61%;
}
.dark {
  --background: 20 25% 10%;
  --foreground: 36 30% 92%;
  --card: 22 22% 14%;
  --card-foreground: 36 30% 92%;
  --popover: 22 22% 14%;
  --popover-foreground: 36 30% 92%;
  --primary: 26 56% 61%;
  --primary-foreground: 20 25% 10%;
  --primary-soft: 25 30% 18%;
  --secondary: 22 18% 18%;
  --secondary-foreground: 36 30% 92%;
  --muted: 22 18% 18%;
  --muted-foreground: 36 15% 65%;
  --accent: 36 41% 60%;
  --accent-foreground: 20 25% 10%;
  --border: 22 18% 22%;
  --input: 22 18% 22%;
  --ring: 26 56% 61%;
}
* { border-color: hsl(var(--border)); }
html { scroll-behavior: smooth; }
body { margin: 0; background-color: hsl(var(--background)); color: hsl(var(--foreground)); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4 { font-family: 'Playfair Display', Georgia, serif; letter-spacing: -0.025em; }
::selection { background: hsl(var(--primary) / 0.25); }
.glass { backdrop-filter: blur(24px); background: hsl(var(--background) / 0.75); border: 1px solid rgb(255 255 255 / 0.4); box-shadow: var(--shadow-card); }
.glass-dark { backdrop-filter: blur(24px); background: hsl(var(--foreground) / 0.05); border: 1px solid rgb(255 255 255 / 0.2); }
.glass-warm { background: hsl(36 45% 96% / 0.80); backdrop-filter: blur(24px); border: 1px solid hsl(30 30% 84% / 0.6); box-shadow: var(--shadow-card); }
.container-spa { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) { .container-spa { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .container-spa { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1400px) { .container-spa { max-width: 1400px; } }
.section-spa { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 768px) { .section-spa { padding-top: 6rem; padding-bottom: 6rem; } }
@media (min-width: 1024px) { .section-spa { padding-top: 7rem; padding-bottom: 7rem; } }
.luxe-divider { height: 1px; background: linear-gradient(90deg, transparent, hsl(var(--accent) / 0.4), transparent); }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }
.bg-gradient-hero { background: var(--gradient-hero); }
.bg-gradient-caramel { background: var(--gradient-caramel); }
.bg-gradient-warm { background: var(--gradient-warm); }
.bg-gradient-gold { background: var(--gradient-gold); }
.bg-gradient-radial { background: var(--gradient-radial); }
.bg-gradient-overlay { background: var(--gradient-overlay); }
.bg-gradient-cinematic { background: var(--gradient-cinematic); }
.bg-gradient-espresso { background: var(--gradient-espresso); }
.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-elegant { box-shadow: var(--shadow-elegant); }
.shadow-glow { box-shadow: var(--shadow-glow); }
.shadow-luxe { box-shadow: var(--shadow-luxe); }
.transition-smooth { transition: all 0.3s var(--transition-smooth); }
.transition-spring { transition: all 0.5s var(--transition-spring); }
.transition-cinema { transition: all 0.9s var(--transition-cinema); }
.font-display { font-family: 'Playfair Display', Georgia, serif; }
.font-serif-luxe { font-family: 'Cormorant Garamond', Georgia, serif; }
@keyframes fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes float-slow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes scale-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
@keyframes ken-burns { 0% { transform: scale(1.02) translate3d(0, 0, 0); } 100% { transform: scale(1.18) translate3d(-1%, -1.5%, 0); } }
@keyframes slide-fade-in { from { opacity: 0; transform: translateY(40px); filter: blur(6px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes accordion-down { from { height: 0; } to { height: var(--radix-accordion-content-height); } }
@keyframes accordion-up { from { height: var(--radix-accordion-content-height); } to { height: 0; } }
.animate-fade-up { animation: fade-up 0.8s var(--transition-smooth) both; }
.animate-fade-in { animation: fade-in 0.9s ease-out both; }
.animate-float-slow { animation: float-slow 6s ease-in-out infinite; }
.animate-scale-in { animation: scale-in 0.6s var(--transition-spring) both; }
.animate-ken-burns { animation: ken-burns 12s ease-out forwards; }
.animate-slide-fade { animation: slide-fade-in 1s var(--transition-cinema) both; }
.animate-accordion-down { animation: accordion-down 0.2s ease-out; }
.animate-accordion-up { animation: accordion-up 0.2s ease-out; }
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.25s; }
.stagger-3 { animation-delay: 0.4s; }
.stagger-4 { animation-delay: 0.55s; }
.stagger-5 { animation-delay: 0.7s; }
.hover-lift { transition: all 0.5s var(--transition-spring); }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-elegant); }
.hover-zoom-img { overflow: hidden; }
.hover-zoom-img img { transition: transform 0.9s var(--transition-cinema); }
.hover-zoom-img:hover img { transform: scale(1.06); }

/* Compatibility aliases for legacy components preserved from the original ZIP. */
.bg-gradient-sage { background: var(--gradient-caramel); }
.bg-mint { background-color: hsl(120 38% 90%); }
.text-mint-foreground { color: hsl(130 30% 20%); }

/* v4 readability polish: slightly stronger contrast while keeping the original luxury UI language. */
body { font-weight: 500; }
p, li, label, input, textarea, select, button { letter-spacing: -0.005em; }
.text-muted-foreground { color: hsl(24 14% 30%) !important; }
.bg-espresso .text-primary-foreground\/70, .bg-espresso .text-primary-foreground\/75 { color: hsl(36 32% 88% / 0.86) !important; }
.bg-espresso .text-primary-foreground\/50, .bg-espresso .text-primary-foreground\/60 { color: hsl(36 28% 86% / 0.72) !important; }
.font-display { font-weight: 650; }
input, textarea, select { color: hsl(var(--foreground)); font-weight: 500; }
input::placeholder, textarea::placeholder { color: hsl(24 12% 38% / 0.85); }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display:block; }

/* v7 footer readability polish: stronger contrast for dark espresso footer. */
footer.bg-espresso {
  background: linear-gradient(135deg, hsl(20 25% 9%), hsl(22 22% 14%));
  color: hsl(36 45% 97%);
}
footer.bg-espresso, footer.bg-espresso * {
  text-rendering: optimizeLegibility;
}
footer.bg-espresso .font-display,
footer.bg-espresso h4 {
  color: hsl(36 48% 98%) !important;
  text-shadow: 0 1px 18px hsl(20 25% 6% / 0.24);
}
footer.bg-espresso p,
footer.bg-espresso li {
  color: hsl(36 40% 94% / 0.94) !important;
  font-weight: 600;
}
footer.bg-espresso .text-primary-foreground\/90 {
  color: hsl(36 48% 98% / 0.98) !important;
}
footer.bg-espresso .text-primary-foreground\/70,
footer.bg-espresso .text-primary-foreground\/75 {
  color: hsl(36 40% 94% / 0.94) !important;
}
footer.bg-espresso .text-primary-foreground\/60 {
  color: hsl(36 34% 90% / 0.86) !important;
}
footer.bg-espresso .text-primary-foreground\/50 {
  color: hsl(36 30% 88% / 0.80) !important;
}
footer.bg-espresso a {
  color: hsl(36 40% 95% / 0.95);
  font-weight: 650;
}
footer.bg-espresso a:hover {
  color: hsl(var(--accent));
  text-decoration-color: hsl(var(--accent) / 0.55);
}
footer.bg-espresso svg {
  stroke-width: 2.3;
}
footer.bg-espresso .border-primary-foreground\/10 {
  border-color: hsl(36 36% 90% / 0.20) !important;
}
footer.bg-espresso .bg-primary-foreground\/5 {
  background-color: hsl(36 45% 96% / 0.10) !important;
}
footer.bg-espresso .border-primary-foreground\/15 {
  border-color: hsl(36 45% 96% / 0.28) !important;
}

/* v8 footer override: readable standard weight, not overly bold. */
footer.bg-espresso p,
footer.bg-espresso li {
  color: hsl(36 36% 93% / 0.90) !important;
  font-weight: 400 !important;
}
footer.bg-espresso a {
  color: hsl(36 38% 94% / 0.92) !important;
  font-weight: 500 !important;
}
footer.bg-espresso .font-display,
footer.bg-espresso h4 {
  font-weight: 600 !important;
  text-shadow: 0 1px 14px hsl(20 25% 6% / 0.16) !important;
}
footer.bg-espresso svg { stroke-width: 2 !important; }
.language-toggle button { min-width: 0; }

/* v9 soft-elegant UI/UX refresh for mobile spa sales homepage. */
:root {
  --background: 34 48% 97%;
  --foreground: 22 20% 16%;
  --card: 36 48% 98%;
  --muted: 33 36% 93%;
  --muted-foreground: 24 12% 34%;
  --primary-soft: 30 56% 93%;
  --secondary: 32 46% 86%;
  --accent-soft: 38 50% 90%;
  --gradient-hero: linear-gradient(135deg, hsl(36 48% 98%), hsl(30 56% 94%) 52%, hsl(24 42% 91%));
  --gradient-warm: linear-gradient(135deg, hsl(36 55% 97%), hsl(31 48% 93%) 55%, hsl(25 40% 91%));
  --gradient-radial: radial-gradient(circle at 22% 18%, hsl(26 56% 61% / 0.16), transparent 58%);
  --shadow-card: 0 14px 48px -24px hsl(22 22% 15% / 0.16);
  --shadow-elegant: 0 28px 70px -32px hsl(25 45% 30% / 0.28);
}
html, body {
  background:
    radial-gradient(circle at 10% 4%, hsl(36 60% 96% / 0.95), transparent 34rem),
    radial-gradient(circle at 95% 18%, hsl(26 56% 61% / 0.09), transparent 38rem),
    linear-gradient(180deg, hsl(var(--background)), hsl(34 48% 96%));
}
body {
  font-weight: 440;
  line-height: 1.62;
}
h1, h2, h3, h4, .font-display {
  font-weight: 520 !important;
  letter-spacing: -0.022em;
}
p, li, label, input, textarea, select, button, a {
  font-weight: 440;
}
strong, .font-semibold {
  font-weight: 560 !important;
}
.text-muted-foreground {
  color: hsl(24 13% 32%) !important;
}
.bg-card, .soft-card, .glass-warm {
  box-shadow: var(--shadow-card);
}
.bg-gradient-warm, .soft-elegant-band {
  background:
    radial-gradient(circle at 10% 0%, hsl(36 62% 98%), transparent 34rem),
    radial-gradient(circle at 92% 10%, hsl(26 56% 61% / .10), transparent 28rem),
    var(--gradient-warm);
}
.soft-elegant-band { position: relative; overflow: hidden; }
.soft-elegant-band:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, hsl(36 48% 98% / .48), transparent);
}
.soft-elegant-band > * { position: relative; }
.smart-home-section { padding-top: 0; }
.smart-concierge-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  gap: 1.25rem;
  padding: clamp(1.1rem, 2vw, 1.65rem);
  border-radius: 2rem;
  border: 1px solid hsl(var(--border) / .68);
  background:
    radial-gradient(circle at 12% 5%, hsl(36 62% 98%), transparent 34rem),
    radial-gradient(circle at 86% 18%, hsl(26 56% 61% / .14), transparent 25rem),
    hsl(36 48% 98% / .92);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-elegant);
}
.smart-concierge-shell:after {
  content: "";
  position: absolute;
  right: 10%;
  top: -22%;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: hsl(36 50% 70% / .14);
  filter: blur(4px);
  pointer-events: none;
  animation: float-slow 7s ease-in-out infinite;
}
.smart-concierge-copy, .smart-recommendation-card { position: relative; z-index: 1; }
.smart-concierge-copy {
  padding: clamp(1.1rem, 3vw, 2rem);
}
.smart-need-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .72rem;
}
.smart-need-card {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 3.35rem;
  padding: .78rem .9rem;
  border-radius: 1.2rem;
  border: 1px solid hsl(var(--border) / .74);
  background: hsl(var(--card) / .72);
  color: hsl(var(--foreground) / .82);
  text-align: left;
  font-size: .9rem;
  transition: all .3s var(--transition-smooth);
  box-shadow: 0 10px 28px -20px hsl(22 22% 15% / .16);
}
.smart-need-card:hover,
.smart-need-card.is-active {
  border-color: hsl(var(--primary) / .34);
  background: hsl(var(--primary-soft) / .92);
  color: hsl(var(--primary));
  transform: translateY(-2px);
}
.smart-need-icon {
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .9rem;
  background: hsl(36 55% 98% / .9);
  color: hsl(var(--primary));
  flex: 0 0 auto;
}
.smart-recommendation-card {
  border-radius: 1.7rem;
  border: 1px solid hsl(var(--border) / .70);
  background:
    linear-gradient(180deg, hsl(36 55% 98% / .95), hsl(31 48% 95% / .92));
  padding: clamp(1.25rem, 2.6vw, 2rem);
  box-shadow: 0 22px 56px -30px hsl(25 45% 30% / .32);
}
.smart-match-card {
  border-radius: 1.4rem;
  border: 1px solid hsl(var(--border) / .74);
  background: hsl(var(--card) / .78);
  padding: 1rem;
}
.smart-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 999px;
  padding: .38rem .62rem;
  background: hsl(var(--primary-soft));
  color: hsl(var(--primary));
  font-size: .75rem;
  font-weight: 500;
}
.smart-mini {
  min-height: 4.8rem;
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  border-radius: 1.15rem;
  border: 1px solid hsl(var(--border) / .66);
  background: hsl(36 50% 98% / .70);
  padding: .85rem;
  color: hsl(var(--foreground) / .76);
  font-size: .78rem;
  line-height: 1.45;
}
.smart-package-line {
  margin-top: 1rem;
  border-radius: 1rem;
  background: hsl(var(--primary-soft) / .75);
  color: hsl(var(--foreground) / .78);
  padding: .8rem .9rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .84rem;
}
.soft-feature-card {
  border-radius: 1.55rem;
  border: 1px solid hsl(var(--border) / .70);
  background: hsl(var(--card) / .82);
  padding: 1.45rem;
  box-shadow: var(--shadow-card);
}
.soft-closing-card {
  border-radius: 2rem;
  padding: 1.45rem;
  border: 1px solid hsl(var(--border) / .72);
  background:
    radial-gradient(circle at 88% 10%, hsl(36 50% 70% / .18), transparent 18rem),
    hsl(var(--card) / .86);
  box-shadow: var(--shadow-card);
}
footer.bg-espresso p,
footer.bg-espresso li,
footer.bg-espresso a {
  font-weight: 420 !important;
}
footer.bg-espresso .font-display,
footer.bg-espresso h4 {
  font-weight: 540 !important;
}
@media (max-width: 1024px) {
  .smart-concierge-shell { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .smart-home-section { margin-top: -3.25rem; }
  .smart-concierge-shell { border-radius: 1.45rem; padding: .85rem; }
  .smart-concierge-copy { padding: 1rem; }
  .smart-need-grid { grid-template-columns: 1fr; }
  .smart-package-line { flex-direction: column; gap: .25rem; }
}

/* v11: half-screen responsive hero slider. */
.hero-half-slider {
  isolation: isolate;
}
.hero-half-slider .animate-ken-burns {
  transform-origin: center;
}
@media (max-width: 640px) {
  .hero-half-slider {
    height: 58svh !important;
    min-height: 430px !important;
    max-height: 540px !important;
  }
  .hero-half-slider h1 {
    text-shadow: 0 10px 26px hsl(20 30% 8% / .24);
  }
  .hero-half-slider p {
    max-width: 92%;
  }
}
@media (min-width: 1024px) {
  .hero-half-slider {
    height: 50svh !important;
  }
}

/* v12: prevent content overlap below the half-height hero slider. */
.hero-half-slider {
  margin-bottom: 0 !important;
  overflow: hidden;
}
.hero-half-slider + .smart-home-section,
.smart-home-section {
  margin-top: 0 !important;
  padding-top: clamp(2.25rem, 4.5vw, 4.5rem) !important;
  position: relative;
  z-index: 1;
}
.hero-half-slider .container-spa,
.hero-half-slider [class*="container-spa"] {
  max-height: 100%;
}
@media (max-width: 640px) {
  .hero-half-slider {
    height: 60svh !important;
    min-height: 470px !important;
    max-height: 620px !important;
  }
  .hero-half-slider + .smart-home-section,
  .smart-home-section {
    padding-top: 2.25rem !important;
  }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .hero-half-slider {
    min-height: 480px !important;
  }
  .hero-half-slider + .smart-home-section,
  .smart-home-section {
    padding-top: 3rem !important;
  }
}


/* v14: refined soft-white and warm-gold typography for the frontend hero slider. */
.hero-slider-eyebrow {
  color: hsl(42 80% 96%);
  border-color: hsl(42 45% 82% / 0.28) !important;
  text-shadow: 0 2px 12px hsl(28 38% 8% / 0.28);
}
.hero-slider-title {
  color: hsl(42 85% 97%);
  text-shadow: 0 8px 28px hsl(24 36% 8% / 0.34), 0 2px 8px hsl(25 35% 10% / 0.22);
}
.hero-slider-title-accent {
  color: hsl(40 62% 74%);
  text-shadow: 0 8px 24px hsl(24 44% 8% / 0.28), 0 1px 6px hsl(24 35% 12% / 0.18);
}
.hero-slider-subtitle,
.hero-slider-meta,
.hero-slider-rating,
.hero-slider-rating-label {
  color: hsl(42 62% 92%);
  text-shadow: 0 4px 18px hsl(24 32% 8% / 0.24);
}
.hero-slider-rating-label {
  color: hsl(40 36% 84%);
}
.hero-half-slider .glass,
.hero-half-slider .glass-dark {
  border-color: hsl(42 45% 82% / 0.22);
}
@media (max-width: 640px) {
  .hero-slider-title {
    text-shadow: 0 8px 24px hsl(24 38% 8% / 0.36), 0 2px 8px hsl(25 35% 10% / 0.24);
  }
  .hero-slider-subtitle,
  .hero-slider-meta,
  .hero-slider-eyebrow {
    color: hsl(42 54% 94%);
  }
}

/* Demo mode badge and read-only affordances. */
.nadi-demo-badge {
  position: fixed;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 99999;
  background: #f97316;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  pointer-events: none;
  white-space: nowrap;
}
.demo-disabled-action {
  opacity: .58 !important;
  cursor: not-allowed !important;
  filter: grayscale(.05);
}
.demo-readonly-note {
  border: 1px solid rgba(249, 115, 22, .28);
  background: rgba(249, 115, 22, .08);
  color: #9a3412;
  border-radius: 18px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
}