/*
Theme Name: Parking Public
Author: Parking MIS
Version: 0.2.0
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700;800&display=swap');

:root{
  --pp-bg:      #08101e;
  --pp-text:    #e8f0ff;
  --pp-text-2:  rgba(232,240,255,.72);
  --pp-text-3:  rgba(232,240,255,.50);
  --pp-border:  rgba(255,255,255,.10);
  --pp-accent:  #4f7cff;
  --pp-accent2: #a78bfa;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(1000px 600px at 15% 0%,  rgba(79,124,255,.13),  transparent 55%),
    radial-gradient(900px  500px at 85% 5%,  rgba(167,139,250,.10), transparent 55%),
    var(--pp-bg);
  color: var(--pp-text);
  line-height: 1.5;
}

a { color: inherit; }
a:hover { opacity: .88; }

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Header ── */
.site-header {
  border-bottom: 1px solid var(--pp-border);
  background: rgba(8,16,30,0.65);
  backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: 100;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
}

.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
}

.brand__icon {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, var(--pp-accent), var(--pp-accent2));
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
}

.brand__name {
  display: block;
  font-weight: 800; font-size: 15px; letter-spacing: .2px;
}

.brand__tag {
  display: block;
  font-size: 11px; color: var(--pp-text-2);
}

/* ── Nav ── */
.site-nav {
  display: flex; gap: 8px; align-items: center;
}

.site-nav a {
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  color: var(--pp-text-2);
  font-size: 14px; font-weight: 600;
  transition: background .12s, border-color .12s, color .12s;
}

.site-nav a:hover {
  border-color: var(--pp-border);
  background: rgba(255,255,255,.05);
  color: var(--pp-text);
}

.site-nav__btn--login {
  background: linear-gradient(135deg,
    rgba(79,124,255,.85),
    rgba(99,102,241,.85)
  ) !important;
  border-color: rgba(79,124,255,.5) !important;
  color: #fff !important;
}

.site-nav__btn--login:hover {
  border-color: rgba(79,124,255,.8) !important;
  opacity: .92;
}

.site-nav__btn--logout {
  border-color: var(--pp-border) !important;
  background: rgba(255,255,255,.05) !important;
}

/* ── Footer ── */
.site-footer {
  margin-top: 48px;
  border-top: 1px solid var(--pp-border);
  color: var(--pp-text-2);
}

.site-footer__inner {
  padding: 20px 0;
  font-size: 12px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}