/* Yupitaar Invest — Shared Stylesheet (nav bar + T&C modal only)
   Every page-specific style lives inline in each page's own <style> block.
   This file only needs to cover what auth.js's renderNav() and
   showTnCModal() inject into the page, since those are the only
   shared HTML fragments built at runtime rather than hardcoded per page. */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 24px;
  background: #07091a;
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
  position: sticky;
  top: 0;
  z-index: 100;
  flex-wrap: wrap;
  gap: 8px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

.logo-mark {
  width: 29px;
  height: 29px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}

.logo-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18.5px;
  font-weight: 500;
  color: #ffffff;
}

.nav-links {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.nav-btn {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.13);
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
  font-family: inherit;
}

.nav-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.22);
}

.nav-btn-gold {
  background: #BA7517;
  border: none;
  color: #ffffff;
  font-weight: 500;
}

.nav-btn-gold:hover {
  background: #BA7517;
  opacity: 0.88;
}

/* ============================================================
   T&C MODAL (built by auth.js's showTnCModal on first signup)
   ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal {
  background: #0d1120;
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 28px;
  max-width: 440px;
  width: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.modal-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 6px;
}

.modal-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  margin-bottom: 18px;
}

.checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 14px;
}

.checkbox-group input[type="checkbox"] {
  margin-top: 3px;
  accent-color: #EF9F27;
  flex-shrink: 0;
  cursor: pointer;
}

.checkbox-group label {
  font-size: 12.5px;
  color: rgba(255,255,255,0.7);
  line-height: 1.55;
  cursor: pointer;
}

.checkbox-group label a {
  color: #EF9F27;
  text-decoration: underline;
}

.alert {
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.5;
}

.alert-error {
  background: rgba(216,90,48,0.12);
  border: 0.5px solid rgba(216,90,48,0.35);
  color: #F0997B;
}

.btn {
  padding: 11px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.btn-full { width: 100%; }

.btn-gold {
  background: #BA7517;
  color: #ffffff;
}

.btn-gold:hover { opacity: 0.88; }

/* ============================================================
   NAV DROPDOWNS (About / Services groupings)
   Built by renderNav(); opened on hover (desktop) or tap (touch).
   ============================================================ */

.nav-dropdown {
  position: relative;
  display: inline-block;
}

.nav-drop-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.nav-chev {
  font-size: 10px;
  line-height: 1;
  opacity: 0.7;
  transition: transform 0.15s;
}

.nav-dropdown.open .nav-chev { transform: rotate(180deg); }

.nav-drop-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  background: #0d1120;
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 6px;
  z-index: 200;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}

.nav-dropdown.open .nav-drop-menu { display: block; }

/* Desktop: also open on hover for a snappier feel. Touch devices skip this. */
@media (hover: hover) and (pointer: fine) {
  .nav-dropdown:hover .nav-drop-menu { display: block; }
  .nav-dropdown:hover .nav-chev { transform: rotate(180deg); }
}

.nav-drop-item {
  display: block;
  padding: 10px 12px;
  border-radius: 7px;
  font-size: 14px;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s;
}

.nav-drop-item:hover {
  background: rgba(255,255,255,0.07);
  color: #ffffff;
}

.nav-drop-item-logout { color: #E0A15A; }
.nav-drop-item-logout:hover { background: rgba(224,161,90,0.12); color: #EF9F27; }

/* ============================================================
   SHARED FOOTER — single source of truth for EVERY page.
   Injected by renderDisclaimer() into <div id="disclaimer-container">.
   No page should hard-code its own footer; they all use this.
   ============================================================ */

.disclaimer {
  border-top: 0.5px solid rgba(255,255,255,0.08);
  padding: 18px 24px;
  margin-top: 22px;
}

.disclaimer p {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  text-align: center;
}

.disclaimer a { color: rgba(255,255,255,0.68); }

.footer {
  padding: 14px 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-left { font-size: 13.5px; color: rgba(255,255,255,0.5); }

.footer-right a {
  font-size: 13.5px;
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  margin-left: 16px;
}

.footer-right a:hover { color: rgba(255,255,255,0.9); }

/* ============================================================
   Responsive: collapse nav on narrow screens
   ============================================================ */

@media (max-width: 560px) {
  .nav { padding: 11px 16px; }
  .nav-btn { padding: 6px 11px; font-size: 13px; }
  .logo-name { font-size: 16px; }
  .nav-links { gap: 5px; }
  .nav-drop-menu { min-width: 160px; }
  .footer-left, .footer-right a { font-size: 13px; }
  .disclaimer p { font-size: 12.5px; }
}