/* Faried Rental PS — gaya tambahan (CSS biasa, berlaku baik dengan build Vite maupun CDN) */
:root {
  --bg: #05070f;
  --panel: rgba(15, 23, 42, .72);
  --line: rgba(99, 102, 241, .22);
  --cyan: #22d3ee;
  --violet: #a855f7;
  --blue: #3b82f6;
}
[x-cloak] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { background: var(--bg); }
.font-display { font-family: "Chakra Petch", Inter, sans-serif; }

.bg-grid {
  background-image:
    radial-gradient(60rem 30rem at 15% -10%, rgba(59,130,246,.22), transparent 60%),
    radial-gradient(50rem 30rem at 95% 10%, rgba(168,85,247,.20), transparent 60%),
    linear-gradient(rgba(148,163,184,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.05) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px;
}
.panel { background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(8px); }
.text-gradient {
  background: linear-gradient(90deg, var(--cyan), var(--blue) 45%, var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.neon-border { position: relative; }
.neon-border::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.glow { box-shadow: 0 0 0 1px rgba(34,211,238,.25), 0 10px 40px -10px rgba(34,211,238,.45); }
.glow-violet { box-shadow: 0 0 0 1px rgba(168,85,247,.3), 0 10px 40px -10px rgba(168,85,247,.5); }

.btn-neon {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: .9rem; font-weight: 700; color: #04121a;
  background: linear-gradient(135deg, #22d3ee, #818cf8 55%, #a855f7);
  box-shadow: 0 8px 30px -8px rgba(99,102,241,.7);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s;
}
.btn-neon:hover { transform: translateY(-2px); box-shadow: 0 12px 36px -8px rgba(34,211,238,.8); }
.btn-neon:disabled, .btn-neon[aria-disabled="true"] { filter: grayscale(1); opacity: .5; cursor: not-allowed; transform: none; }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: .9rem; font-weight: 600; color: #e2e8f0;
  border: 1px solid rgba(148,163,184,.3); background: rgba(15,23,42,.5); transition: all .2s;
}
.btn-ghost:hover { border-color: var(--cyan); color: #fff; }
.btn-wa { background: #22c55e; color: #052e16; }
.btn-wa:hover { background: #4ade80; }

.badge-free {
  display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px;
  font-size: .78rem; font-weight: 800; letter-spacing: .03em; color: #052e16;
  background: linear-gradient(90deg, #4ade80, #22d3ee); box-shadow: 0 0 24px rgba(74,222,128,.45);
}
.badge-ok { background: rgba(34,197,94,.15); color: #4ade80; border: 1px solid rgba(34,197,94,.4); }
.badge-out { background: rgba(239,68,68,.15); color: #f87171; border: 1px solid rgba(239,68,68,.45); }

.input {
  width: 100%; border-radius: .75rem; background: rgba(2,6,23,.7); color: #f1f5f9;
  border: 1px solid rgba(148,163,184,.25); padding: .7rem .9rem; outline: none; transition: border-color .2s, box-shadow .2s;
}
.input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34,211,238,.18); }
.input:disabled { opacity: .5; }
.label { display: block; font-size: .85rem; font-weight: 600; color: #cbd5e1; margin-bottom: .35rem; }
.err { color: #f87171; font-size: .8rem; margin-top: .25rem; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

.float-y { animation: floaty 5s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
.pulse-ring { animation: ring 2s infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6) } 70% { box-shadow: 0 0 0 16px rgba(34,197,94,0) } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0) } }

.leaflet-container { background: #0b1222; border-radius: .9rem; }
/* Kartu habis: abu-abu, tapi badge "Habis" & tombol WhatsApp tetap berwarna */
.card-disabled { background: rgba(30, 41, 59, .55); border-color: rgba(100, 116, 139, .35); }
.card-disabled :is(h3, p, li, span, .text-white) { color: #8391a7 !important; }
.card-disabled .badge-free { background: #475569; box-shadow: none; }
.card-disabled .badge-out { color: #f87171 !important; }
.card-disabled .btn-wa { color: #052e16 !important; }

/* Admin */
.admin-table th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; padding: .6rem .75rem; }
.admin-table td { padding: .65rem .75rem; border-top: 1px solid rgba(148,163,184,.12); vertical-align: top; }