/**
 * A41-DS — Modo escuro "Céu Noturno"
 * Fundo #010445 · superfícies #020659 · texto #FFF / #A5A7C5 · Rosé + glow nos CTAs
 * Requer tokens --page-bg e --surface nas páginas (claro: branco; escuro: sobrescritos abaixo).
 */

/* ---------- Toggle (um ícone por vez + transição suave) ---------- */
.theme-toggle {
  --theme-toggle-dur: 0.38s;
  --theme-toggle-ease: cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--border-mid);
  background: transparent;
  color: var(--text-dark);
  cursor: pointer;
  transition: border-color var(--t-fast, 150ms ease), background var(--t-fast, 150ms ease), color var(--t-fast, 150ms ease),
    box-shadow var(--theme-toggle-dur) var(--theme-toggle-ease);
}
.theme-toggle:hover {
  border-color: var(--rose);
  color: var(--rose);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
}
.theme-toggle > svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: 0;
  pointer-events: none;
  display: block;
  transform: translate(-50%, -50%);
  transition:
    opacity var(--theme-toggle-dur) var(--theme-toggle-ease),
    transform var(--theme-toggle-dur) var(--theme-toggle-ease);
}

/* Modo claro (ou sem data-theme): só lua */
html:not([data-theme="dark"]) .theme-toggle > svg[data-icon="moon"] {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}
html:not([data-theme="dark"]) .theme-toggle > svg[data-icon="sun"] {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0.2turn) scale(0.55);
  pointer-events: none;
}

/* Modo escuro: só sol */
html[data-theme="dark"] .theme-toggle > svg[data-icon="moon"] {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-0.2turn) scale(0.55);
  pointer-events: none;
}
html[data-theme="dark"] .theme-toggle > svg[data-icon="sun"] {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle > svg {
    transition-duration: 0.01ms;
    transition-delay: 0s !important;
  }
  .theme-toggle {
    transition-duration: 0.01ms;
  }
}

html[data-theme="dark"] .theme-toggle {
  border-color: rgba(255, 255, 255, 0.25);
  color: #e8e9ff;
}
html[data-theme="dark"] .theme-toggle:hover {
  border-color: var(--rose);
  color: #fff;
  box-shadow: 0 0 18px rgba(219, 73, 85, 0.35);
}

/* ---------- Scroll — viewport (Firefox) ---------- */
html:not([data-theme="dark"]) {
  scrollbar-width: thin;
  scrollbar-color: rgba(1, 4, 69, 0.42) #e0e4ee;
}

/* ---------- Tokens modo escuro ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #010445;
  --surface: #020659;
  --bg-light: #12185c;
  --bg-section: #020659;
  --border: rgba(255, 255, 255, 0.12);
  --border-mid: rgba(255, 255, 255, 0.2);
  --text-dark: #f2f3ff;
  --text-body: #a5a7c5;
  --text-muted: #8b90b8;
  --text-light: #ffffff;
  --shadow-sm: 0 2px 20px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 40px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-rose: 0 0 28px rgba(219, 73, 85, 0.5);
  --rose-light: rgba(219, 73, 85, 0.2);
  --rose-border: rgba(219, 73, 85, 0.45);
  scrollbar-width: thin;
  scrollbar-color: rgba(219, 73, 85, 0.65) #000733;
}

html[data-theme="dark"] body {
  background: var(--page-bg);
  color: var(--text-body);
}

/* CTAs rosé */
html[data-theme="dark"] .btn-rose:hover:not(:disabled),
html[data-theme="dark"] .btn-rose:focus-visible {
  box-shadow: 0 0 20px rgba(219, 73, 85, 0.4), var(--shadow-rose);
}
html[data-theme="dark"] .btn-rose-sm:hover,
html[data-theme="dark"] .btn-rose-sm:focus-visible {
  box-shadow: 0 0 16px rgba(219, 73, 85, 0.35);
}

html[data-theme="dark"] .btn-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
html[data-theme="dark"] .btn-outline:hover,
html[data-theme="dark"] .btn-outline:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: #fff;
}

html[data-theme="dark"] .btn-blue:hover,
html[data-theme="dark"] .btn-blue:focus-visible {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Navbar glass */
html[data-theme="dark"] .navbar {
  background: rgba(1, 4, 69, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
  /* safe-area já vem do index; mantém leitura em notch */
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}

html[data-theme="dark"] .nav-links a:hover,
html[data-theme="dark"] .nav-links a:focus-visible {
  color: #fff;
}

html[data-theme="dark"] .hamburger:hover {
  background: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .hamburger-line {
  background: #e8e9ff;
}

html[data-theme="dark"] .mobile-menu {
  background: var(--surface);
  border-bottom-color: var(--rose);
}
html[data-theme="dark"] .mobile-menu li a {
  color: var(--text-dark);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .mobile-menu li a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--rose);
}

/* Barra de navegação inferior (mobile) */
html[data-theme="dark"] .app-bottom-nav {
  background: rgba(1, 4, 69, 0.94);
  -webkit-backdrop-filter: blur(0.875rem);
  backdrop-filter: blur(0.875rem);
  border-top-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 -0.5rem 1.5rem rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .app-bottom-nav__link {
  color: rgba(255, 255, 255, 0.62);
}

html[data-theme="dark"] .app-bottom-nav__link:hover,
html[data-theme="dark"] .app-bottom-nav__link:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .app-bottom-nav__icon {
  color: #e8e9ff;
}

/* Breadcrumb */
html[data-theme="dark"] .breadcrumb {
  background: var(--page-bg);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .breadcrumb-inner,
html[data-theme="dark"] .breadcrumb-inner a {
  color: var(--text-muted);
}
html[data-theme="dark"] .breadcrumb-inner a:hover {
  color: #fff;
}
html[data-theme="dark"] .breadcrumb-current {
  color: var(--text-dark);
}

/* Landing — availability */
html[data-theme="dark"] .avail-bar {
  background: var(--surface);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .avail-mobile-toggle {
  background: var(--surface);
  color: var(--text-dark);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .avail-mobile-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .avail-field:hover {
  background: rgba(255, 255, 255, 0.05);
}
html[data-theme="dark"] .avail-label,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .card-name,
html[data-theme="dark"] .benefit-texts h4,
html[data-theme="dark"] .footer-col-title {
  color: var(--text-dark);
}
html[data-theme="dark"] .avail-input {
  color: var(--text-dark);
}
html[data-theme="dark"] .avail-select-menu {
  background: var(--surface);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-lg);
}
html[data-theme="dark"] .avail-select-option {
  color: var(--text-dark);
}
html[data-theme="dark"] .avail-select-option:hover,
html[data-theme="dark"] .avail-select-option:focus {
  color: var(--text-dark);
}

html[data-theme="dark"] .section-eyebrow {
  color: rgba(255, 255, 255, 0.65);
}

html[data-theme="dark"] .lofts-section {
  background: var(--page-bg);
}

html[data-theme="dark"] .loft-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-md);
}

html[data-theme="dark"] .direct-section {
  background: var(--page-bg);
}

html[data-theme="dark"] .benefit-item {
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .footer {
  background: var(--surface);
  border-top-color: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .footer-col a:hover {
  color: #fff;
}
html[data-theme="dark"] .seal {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-muted);
}
html[data-theme="dark"] .footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* ---------- le-petit-rose ---------- */
html[data-theme="dark"] .gallery-section {
  background: var(--page-bg);
}
html[data-theme="dark"] .gallery-all-btn {
  background: rgba(2, 6, 89, 0.92);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-dark);
}
html[data-theme="dark"] .gallery-all-btn:hover {
  background: rgba(2, 6, 89, 1);
  box-shadow: var(--shadow-sm);
}
html[data-theme="dark"] .carousel-nav {
  background: rgba(2, 6, 89, 0.9);
  color: var(--text-dark);
}
html[data-theme="dark"] .carousel-nav:hover {
  background: rgba(2, 6, 89, 1);
}

html[data-theme="dark"] .room-title,
html[data-theme="dark"] .amenities-title,
html[data-theme="dark"] .policies-title,
html[data-theme="dark"] .gallery-more-title {
  color: var(--text-dark);
}

html[data-theme="dark"] .policy-pix strong {
  color: var(--text-dark);
}

html[data-theme="dark"] .booking-card,
html[data-theme="dark"] .policy-item,
html[data-theme="dark"] .amenity-item {
  background: var(--surface);
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .policy-item summary {
  color: var(--text-dark);
}
html[data-theme="dark"] .policy-item summary:hover,
html[data-theme="dark"] .policy-item[open] summary {
  background: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .booking-field label {
  color: #c8caf0;
}
html[data-theme="dark"] .booking-field input,
html[data-theme="dark"] .booking-field select {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dark);
}
html[data-theme="dark"] .booking-fields {
  border-color: rgba(255, 255, 255, 0.2);
}
html[data-theme="dark"] .booking-field {
  border-color: rgba(255, 255, 255, 0.15);
}
html[data-theme="dark"] .lightbox {
  background: rgba(1, 4, 69, 0.94);
}

/* ---------- checkout-reserva ---------- */
html[data-theme="dark"] .checkout-page {
  background: transparent;
}
html[data-theme="dark"] .demo-banner {
  background: rgba(219, 73, 85, 0.15);
  border-color: var(--rose);
  color: var(--text-dark);
}
html[data-theme="dark"] .stepper li {
  background: var(--surface);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
}
html[data-theme="dark"] .stepper li.is-active {
  border-color: var(--rose);
  color: var(--text-dark);
}
html[data-theme="dark"] .stepper li.is-done {
  color: #7dffc0;
  border-color: var(--success);
}
html[data-theme="dark"] .step-panel,
html[data-theme="dark"] .checkout-sidebar {
  background: var(--surface);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-md);
}
html[data-theme="dark"] .step-title,
html[data-theme="dark"] .sidebar-title {
  color: var(--text-dark);
}
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .pix-copy-row input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-dark);
}
html[data-theme="dark"] .field label,
html[data-theme="dark"] .pay-method-legend {
  color: #d8daf0;
}
html[data-theme="dark"] .segmented {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}
html[data-theme="dark"] .segmented label {
  color: var(--text-muted);
}
html[data-theme="dark"] .segmented input:checked + span {
  background: var(--rose);
  color: #fff;
}
html[data-theme="dark"] .segmented label:has(input:checked) {
  background: var(--rose);
  color: #fff;
}
@supports not selector(:has(*)) {
  html[data-theme="dark"] .segmented input:checked + span {
    background: var(--rose);
    color: #fff;
  }
}
html[data-theme="dark"] .upsell-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .upsell-item strong {
  color: var(--text-dark);
}
html[data-theme="dark"] .pix-qr-wrap {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.2);
}
html[data-theme="dark"] .pix-seal {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dark);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Le Petit — bloco “Mais fotos” + selos do card */
html[data-theme="dark"] .gallery-more {
  background: var(--page-bg);
}
html[data-theme="dark"] .booking-seal {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

/* ---------- Logo — variante clara no modo escuro (assets em logo-andar41/) ---------- */
.nav-brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.nav-logo--dark {
  display: none;
}
html[data-theme="dark"] .nav-logo--light {
  display: none;
}
html[data-theme="dark"] .nav-logo--dark {
  display: block;
}

.footer-logo-wrap {
  display: inline-block;
  line-height: 0;
  margin-bottom: 14px;
}
.footer-logo-wrap .footer-logo {
  margin-bottom: 0;
  display: block;
}
.footer-logo--dark {
  display: none;
}
html[data-theme="dark"] .footer-logo-wrap .footer-logo--light {
  display: none;
}
html[data-theme="dark"] .footer-logo-wrap .footer-logo--dark {
  display: block;
}

/* ---------- UGC / vídeo vertical ---------- */
html[data-theme="dark"] .ugc-section {
  background:
    radial-gradient(ellipse 85% 55% at 18% 22%, rgba(219, 73, 85, 0.14) 0%, transparent 58%),
    radial-gradient(ellipse 72% 48% at 95% 82%, rgba(2, 6, 89, 0.45) 0%, transparent 52%),
    linear-gradient(168deg, #04082c 0%, #010445 48%, #020659 100%);
}
html[data-theme="dark"] .ugc-section::before {
  background: radial-gradient(ellipse 100% 40% at 50% 110%, rgba(219, 73, 85, 0.08) 0%, transparent 55%);
}
html[data-theme="dark"] .ugc-title {
  color: var(--text-dark);
}
html[data-theme="dark"] .ugc-quote p {
  color: var(--text-body);
}
html[data-theme="dark"] .ugc-quote-mark {
  color: rgba(219, 73, 85, 0.35);
}
html[data-theme="dark"] .ugc-video-shell {
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-md);
}

/* ---------- Scroll — WebKit (Chrome, Edge, Safari) ---------- */
html::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
html::-webkit-scrollbar-corner {
  background: transparent;
}
html::-webkit-scrollbar-track {
  background: #e0e4ee;
  border-radius: 999px;
}
html::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(1, 4, 69, 0.55) 0%, rgba(1, 4, 69, 0.32) 100%);
  border-radius: 999px;
  border: 2px solid #e0e4ee;
  background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(219, 73, 85, 0.75) 0%, rgba(219, 73, 85, 0.45) 100%);
  border-color: #e0e4ee;
}

html[data-theme="dark"]::-webkit-scrollbar-track {
  background: #000733;
}
html[data-theme="dark"]::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(219, 73, 85, 0.85) 0%, rgba(2, 6, 89, 0.65) 100%);
  border: 2px solid #000733;
  background-clip: padding-box;
}
html[data-theme="dark"]::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(219, 73, 85, 1) 0%, rgba(219, 73, 85, 0.55) 100%);
}