/* YoLongevity auth portál — sötét navy + arany (HU-MIG-001)
   Design-pass 2026-08-15: Cormorant Garamond wordmark, medalion-crest, vízjel-szignatúra.
   Szerverre: /var/lib/caddy/auth/ui/custom.css — módosítás után `systemctl restart caddy`! */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --yl-edge: #060c1c;
  --yl-navy: #0a1228;
  --yl-card: #0f1b38;
  --yl-line: #24365f;
  --yl-gold: #d4af37;
  --yl-gold-hi: #e6c455;
  --yl-gold-lo: #b8912e;
  --yl-parchment: #fdfbf5;
  --yl-text: #ece7da;
  --yl-muted: #93a0b8;
}

html, body, .app-page {
  background: radial-gradient(1100px 700px at 50% -10%, #17295a 0%, var(--yl-navy) 58%, var(--yl-edge) 100%) !important;
  color: var(--yl-text) !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
}

/* Szignatúra: az embléma vízjelként a kártya mögött (multiply: a PNG fehérje eltűnik) */
.app-page { position: relative; }
.app-page::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url('/auth/assets/images/custom-logo.png') center 42% / min(125vmin, 1150px) no-repeat;
  mix-blend-mode: soft-light;
  opacity: 0.5;
  pointer-events: none;
}

/* Belépés-ceremónia kártya */
.app-container {
  position: relative;
  background: rgba(15, 27, 56, 0.94) !important;
  border: 1px solid rgba(212, 175, 55, 0.30) !important;
  border-radius: 20px !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.58) !important;
  animation: yl-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes yl-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .app-container { animation: none; }
}

/* Medalion */
.logo-img {
  width: 108px !important;
  height: 108px !important;
  background: var(--yl-parchment) !important;
  border-radius: 50% !important;
  padding: 4px !important;
  box-shadow: 0 0 0 2px var(--yl-gold), 0 0 28px rgba(212, 175, 55, 0.35) !important;
}

/* Wordmark: a template "Sign In" felirata helyett serif YoLongevity */
.logo-txt { font-size: 0 !important; line-height: 0 !important; }
.logo-txt::after {
  content: "YoLongevity";
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.05rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yl-gold);
  margin-top: 0.6rem;
}
/* Eyebrow arany hajszálvonallal */
.logo-box::after {
  content: "MISSION CONTROL";
  display: block;
  width: fit-content;
  margin: 0.55rem auto 0;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(212, 175, 55, 0.45);
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.46em;
  text-indent: 0.46em; /* a letter-spacing jobb oldali többletét kiegyenlíti */
  color: var(--yl-muted);
}

/* Szövegek */
h1, h2, h3, label, p, span, .app-content { color: var(--yl-text); }
label, .text-gray-500, .text-gray-400, .text-secondary-500 {
  color: var(--yl-muted) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
}

/* Input mezők */
.app-inp-box {
  background: #0b1631 !important;
  border: 1px solid var(--yl-line) !important;
  border-radius: 12px !important;
}
div.app-inp-box:focus-within {
  outline: none !important;
  border-color: var(--yl-gold) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.22) !important;
}
.app-inp-txt, .app-inp-txt:focus, input {
  background: transparent !important;
  color: var(--yl-text) !important;
  caret-color: var(--yl-gold);
  font-family: 'Inter', sans-serif !important;
}
.app-inp-txt:focus, input:focus, input:focus-visible, button:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
.app-inp-prf-img { background: transparent !important; color: var(--yl-gold) !important; border: 0 !important; }
.app-inp-prf-img svg, .app-inp-box svg, .app-inp-box i { fill: var(--yl-gold) !important; color: var(--yl-gold) !important; }

/* Gombok */
.app-btn-pri, button[type="submit"] {
  background: linear-gradient(180deg, var(--yl-gold-hi), #c09a24) !important;
  color: var(--yl-navy) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.30) !important;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.app-btn-pri:hover, button[type="submit"]:hover { filter: brightness(1.08); transform: translateY(-1px); }
.app-btn-pri:focus-visible, button[type="submit"]:focus-visible {
  outline: 2px solid var(--yl-gold-hi) !important;
  outline-offset: 3px;
}
.app-btn-sec {
  background: transparent !important;
  color: var(--yl-gold) !important;
  border: 1px solid rgba(212, 175, 55, 0.5) !important;
  border-radius: 12px !important;
}

/* Linkek */
a, .text-primary-600, .text-primary-500 { color: var(--yl-gold) !important; }
a:hover { color: var(--yl-gold-hi) !important; }

/* Portál-oldal (belépés után): szolgáltatás-sorok arany kártyaként */
.app-container ul li, .app-container .border, .app-container [class*="divide"] > * {
  border-color: var(--yl-line) !important;
  background: transparent !important;
  border-radius: 10px;
}
.app-container ul li:hover { background: rgba(212, 175, 55, 0.08) !important; }
.app-container .bg-gray-50, .app-container .bg-white { background: transparent !important; }

/* MFA / kód-oldalak: QR-kód világos dobozban marad olvasható */
img[src*="qr"], canvas { background: var(--yl-parchment) !important; border-radius: 12px; padding: 8px; }

/* A login-oldali lebegő QR-belépés gomb elrejtése (nem használjuk) */
#qr, #bookmarks { display: none !important; }

/* Mobil: a template fix kártya-szélessége nem férne ki */
@media (max-width: 520px) {
  .app-container, .app-content {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
  }
  .app-page { padding-left: 12px; padding-right: 12px; box-sizing: border-box; }
  .logo-img { width: 88px !important; height: 88px !important; }
  .logo-txt::after { font-size: 1.55rem; letter-spacing: 0.11em; }
  .logo-box::after { font-size: 0.6rem; letter-spacing: 0.36em; text-indent: 0.36em; }
}