/* ==========================================================================
   RORO NUSANTARA — app.css (global shared styles)
   Dimuat SETELAH tailwind (main.css) agar bisa meng-override utility.
   ========================================================================== */

:root {
  --rn-wa: #25d366;
  --rn-primary: #6a020a;
  --rn-primary-2: #8b1e1e;
  --rn-gold: #d97706;
  --rn-emerald: #00533c;
}

html { scroll-behavior: smooth; }

/* Selection brand */
::selection { background: rgba(106, 2, 10, .18); }

/* Focus visible — aksesibilitas keyboard */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(217, 119, 6, .65);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Hormati preferensi reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Utility yang dipakai beberapa halaman tetapi tidak terdefinisi */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Gambar: latar placeholder agar tidak "kosong" saat loading */
img { background-color: rgba(163, 177, 198, .15); }

/* Skip link (aksesibilitas) */
.rn-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--rn-primary); color: #fff; padding: .6rem 1rem;
  border-radius: 0 0 .75rem 0; font-weight: 700; font-size: .8rem;
}
.rn-skip-link:focus { left: 0; }

/* ==========================================================================
   Mobile drawer (di-inject app.js untuk header yang nav-nya hidden di mobile)
   ========================================================================== */
.rn-burger {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e8edf3; color: #334155;
  box-shadow: 4px 4px 10px rgba(163,177,198,.5), -4px -4px 10px #fff;
  border: 0; cursor: pointer; flex-shrink: 0;
}
.rn-drawer {
  position: absolute; top: calc(100% + .5rem); left: 1rem; right: 1rem;
  z-index: 60; display: none; flex-direction: column; gap: .25rem;
  background: #eef1f6; border-radius: 1.25rem; padding: .75rem;
  box-shadow: 8px 8px 20px rgba(163,177,198,.55), -8px -8px 20px rgba(255,255,255,.9);
  max-height: 70vh; overflow-y: auto;
}
.rn-drawer.rn-open { display: flex; }
.rn-drawer a {
  display: block; padding: .65rem .9rem; border-radius: .8rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .03em; color: #334155;
  text-transform: uppercase;
}
.rn-drawer a:hover { color: var(--rn-primary); background: rgba(106,2,10,.06); }
.rn-drawer a[aria-current="page"] { color: #fff; background: linear-gradient(135deg, #8b1e1e, #6a020a); }

/* ==========================================================================
   Toast global (dipakai app.js untuk newsletter / copy / form feedback)
   ========================================================================== */
.rn-toast {
  position: fixed; bottom: 6rem; left: 50%; transform: translate(-50%, 120%);
  z-index: 90; background: #1e293b; color: #f8fafc;
  padding: .75rem 1.1rem; border-radius: 9999px; font-size: .8rem; font-weight: 600;
  box-shadow: 0 12px 30px rgba(2,6,23,.35); opacity: 0; transition: all .3s ease;
  max-width: min(92vw, 480px); text-align: center;
}
.rn-toast.rn-show { transform: translate(-50%, 0); opacity: 1; }

/* ==========================================================================
   DARK MODE GLOBAL
   Halaman yang sudah punya dark style sendiri (tur, rent-car-detail) tetap
   konsisten; halaman lain mendapat fallback gelap yang layak.
   ========================================================================== */
html.dark {
  --clay-bg: #1a2029;
  --shadow-light: #262f3c;
  --shadow-dark: rgba(0, 0, 0, .55);
  --shadow-inset-dark: rgba(0, 0, 0, .5);
}
html.dark body { background-color: #151a22; color: #e2e8f0; }

/* Remap token warna Material-3 ala Stitch saat dark */
html.dark .bg-surface,
html.dark .bg-background { background-color: #151a22 !important; }
html.dark .bg-surface-container-low { background-color: #1b222c !important; }
html.dark .bg-surface-container-lowest { background-color: #212a36 !important; }
html.dark .bg-surface-container,
html.dark .bg-surface-container-high { background-color: #1e2630 !important; }
html.dark .bg-surface-container-highest { background-color: #242e3a !important; }
html.dark .bg-surface\/90 { background-color: rgba(21, 26, 34, .92) !important; }
html.dark .text-on-surface { color: #e6ebf2 !important; }
html.dark .text-on-surface-variant { color: #a7b2c1 !important; }
html.dark .text-outline { color: #8b96a5 !important; }
html.dark .border-outline-variant\/30,
html.dark .border-outline-variant\/20 { border-color: rgba(148, 163, 184, .16) !important; }

/* Clay/neumorphic shared classes — varian gelap */
html.dark .clay-card,
html.dark .clay-card-sm,
html.dark .clay-convex,
html.dark .clay-convex-sm,
html.dark .clay-extruded,
html.dark .clay-extruded-sm,
html.dark .clay-floating,
html.dark .clay-raised,
html.dark .clay-btn,
html.dark .clay-btn-raised,
html.dark .clay-btn-neutral,
html.dark .clay-button {
  background: #1e252f !important;
  box-shadow: 6px 6px 14px #12161c, -6px -6px 14px #2a3340 !important;
  border-color: rgba(255, 255, 255, .05) !important;
  color: #e2e8f0;
}
html.dark .clay-sunken,
html.dark .clay-sunken-pill,
html.dark .clay-sunken-sm,
html.dark .clay-concave,
html.dark .clay-input,
html.dark .clay-surface {
  background: #171d26 !important;
  box-shadow: inset 4px 4px 8px #10141a, inset -4px -4px 8px #232c39 !important;
  border-color: rgba(255, 255, 255, .04) !important;
  color: #dbe3ec;
}
html.dark .rn-burger { background: #1e252f; color: #e2e8f0; box-shadow: 4px 4px 10px #12161c, -4px -4px 10px #2a3340; }
html.dark .rn-drawer { background: #1b222c; box-shadow: 8px 8px 20px #10141a, -8px -8px 20px #262f3c; }
html.dark .rn-drawer a { color: #cbd5e1; }
html.dark .rn-drawer a:hover { background: rgba(255,255,255,.06); color: #ffb3ad; }

/* Input & select di mode gelap */
html.dark input, html.dark select, html.dark textarea { color-scheme: dark; }
html.dark input, html.dark select, html.dark textarea { color: #e6ebf2; }
html.dark input::placeholder, html.dark textarea::placeholder { color: #7c8899; }

/* Footer terang (bg-slate-100 dsb) tetap gelap saat dark */
html.dark footer.bg-slate-100,
html.dark .bg-slate-100\/40,
html.dark .bg-slate-100\/60 { background-color: #171d26 !important; }