:root {
  --navy-deep: #0f1233;
  --navy: #181c4a;
  --rose: #e8a0b4;
  --gold: #e3c27a;
}

* {
  box-sizing: border-box;
}

body {
  background: radial-gradient(ellipse at 30% 0%, #1a1060 0%, var(--navy) 40%, var(--navy-deep) 100%) !important;
  color: var(--text);
  min-height: 100vh;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  font-size: 0.95rem;
}

.app-navbar {
  background: rgba(15, 18, 51, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(227, 194, 122, 0.25);
}

.app-main {
  flex: 1;
}

a {
  color: var(--gold);
}

a:hover {
  color: var(--rose);
}

.card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(227, 194, 122, 0.2);
  color: #f4f0ec;
  border-radius: 14px;
}

.card .form-control,
.form-control,
.form-select {
  background: #0a0e28 !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: #ffffff !important;
  border-radius: var(--radius-sm) !important;
  padding: .55rem .9rem !important;
  transition: border-color .2s, background .2s, box-shadow .2s;
}

.form-control:focus,
.form-select:focus {
  background: #0d1232 !important;
  color: #ffffff !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 .22rem rgba(227,194,122,.22), 0 4px 18px rgba(0,0,0,.35) !important;
  outline: none;
}


.form-control::placeholder {
  color: rgba(237,234,245,0.45) !important;
}

.form-select option {
  background: #161b3d;
  color: var(--text);
}

label {
  color: #d8d3ea;
}

.btn-gold {
  background: var(--gold);
  border-color: var(--gold);
  color: #1a1a2e;
  font-weight: 600;
}

.btn-gold:hover {
  background: var(--rose);
  border-color: var(--rose);
  color: #1a1a2e;
}

.auth-wrapper {
  max-width: 440px;
  margin: 3rem auto;
}

.hero-portal {
  text-align: center;
  padding: 4rem 1rem 2rem;
}

.hero-portal h1 {
  font-weight: 700;
  background: linear-gradient(90deg, var(--gold), var(--rose));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.badge-role-admin {
  background: var(--gold);
  color: #1a1a2e;
}

.badge-role-user {
  background: #6c7ae0;
}

.badge-status-hadir {
  background: #3ec98b;
}

.badge-status-tidak_hadir {
  background: #e05263;
}

.badge-status-pending {
  background: #7a7f9e;
}

.guest-link-row input {
  font-family: monospace;
  font-size: 0.85rem;
}

.app-footer {
  border-top: 1px solid rgba(227, 194, 122, 0.15);
}

.table {
  color: #f4f0ec;
}

.table> :not(caption)>*>* {
  background: transparent;
  color: #f4f0ec;
  border-color: rgba(255, 255, 255, 0.1);
}

.verify-code-input {
  letter-spacing: 0.6rem;
  font-size: 1.6rem;
  text-align: center;
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════
   Widget Pencarian Lokasi — mirip Google Maps
   ════════════════════════════════════════════════════════ */
.location-field-wrap { position: relative; }

/* ── Panel dropdown (saran kiri + peta mini kanan) ── */
.location-suggestions-panel {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 9999;
  flex-direction: row;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7);
  border: 1px solid rgba(227,194,122,0.28);
  background: #10122a;
  min-height: 200px;
}

.location-suggestions-panel.is-open {
  display: flex;
}

/* Kolom kiri: daftar saran */
.location-suggestions {
  flex: 0 0 52%;
  max-height: 300px;
  overflow-y: auto;
  border-right: 1px solid rgba(255,255,255,0.07);
}

.location-suggestions::-webkit-scrollbar { width: 3px; }
.location-suggestions::-webkit-scrollbar-thumb { background: rgba(227,194,122,0.3); border-radius: 4px; }

/* Kolom kanan: peta hover */
.location-hover-map {
  flex: 1;
  position: relative;
  background: #0c0e22;
}

.loc-hover-map-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* ── Baris saran ── */
.location-suggestion-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.12s;
}

.location-suggestion-item:last-child { border-bottom: none; }

.location-suggestion-item:hover,
.location-suggestion-item.is-active,
.location-suggestion-item.is-hovered {
  background: rgba(227,194,122,0.13);
}

.loc-suggest-icon {
  flex: 0 0 auto;
  font-size: 1rem;
  color: rgba(227,194,122,0.75);
}

.loc-suggest-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.loc-suggest-text strong {
  font-size: 0.88rem;
  color: #f4f0ec;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loc-suggest-text small {
  font-size: 0.74rem;
  color: rgba(237,234,245,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loc-suggest-arrow {
  flex: 0 0 auto;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.18);
  transition: color 0.15s, transform 0.15s;
}

.location-suggestion-item:hover .loc-suggest-arrow,
.location-suggestion-item.is-hovered .loc-suggest-arrow {
  color: rgba(227,194,122,0.6);
  transform: translateX(3px);
}

.location-suggestion-empty {
  padding: 1rem 0.85rem;
  font-size: 0.84rem;
  color: rgba(244,240,236,0.55);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── Peta besar (setelah pilih lokasi) ── */
.location-map-preview {
  display: none;
  margin-top: 0.75rem;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(227,194,122,0.25);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.location-map-preview iframe {
  width: 100%;
  height: 200px;
  display: block;
  border: none;
}

/* Responsive */
@media (max-width: 600px) {
  .location-hover-map { display: none; }
  .location-suggestions { flex: 1; border-right: none; }
}

/* form-text & fm-hint */
.form-text, .form-text *, .fm-hint {
  color: rgba(237,234,245,0.65) !important;
  font-size: 0.78rem;
  margin-top: .3rem;
  line-height: 1.3;
}

  height: 220px;
  border: 0;
  display: block;
}