/* ============================================================
   VERIXID — SHARED CSS
   Digunakan oleh: /security, /privacy, /terms, /acceptable-use
   ============================================================ */

/* ─── LEGAL BODY ─────────────────────────────────────────── */
.legal-body {
  width     : 100%;
  max-width : 640px;
  margin    : 2rem auto 0;
  display   : flex;
  flex-direction: column;
  gap       : 0;
}

.legal-notice {
  font-size    : 0.9rem;
  line-height  : 1.7;
  color        : rgb(74, 74, 74);
  background   : #fff;
  border       : 1px solid var(--slate-200);
  border-radius: 10px;
  padding      : 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.legal-section {
  padding-bottom : 2rem;
  margin-bottom  : 2rem;
  border-bottom  : 1px solid var(--slate-200);
}

.legal-section:last-child {
  border-bottom  : none;
  margin-bottom  : 0;
}

.legal-heading {
  font-size    : 1rem;
  font-weight  : 700;
  color        : #171717;
  margin       : 0 0 0.875rem;
}

.legal-subheading {
  font-size    : 0.875rem;
  font-weight  : 700;
  color        : rgb(74, 74, 74);
  margin       : 1.25rem 0 0.5rem;
}

.legal-section p {
  font-size    : 0.875rem;
  line-height  : 1.75;
  color        : rgb(74, 74, 74);
  margin       : 0 0 0.875rem;
}

.legal-section p:last-child {
  margin-bottom: 0;
}

.legal-section a {
  color           : #0067b8;
  text-decoration : none;
}

.legal-section a:hover {
  text-decoration: underline;
}

.legal-section code {
  font-family  : 'JetBrains Mono', 'Fira Code', monospace;
  font-size    : 0.8rem;
  color        : #fff;
  background   : var(--color-surface-alt, #1a1a1a);
  padding      : 0.1em 0.4em;
  border-radius: 4px;
}

.legal-section em {
  color      : var(--color-text-secondary, #999);
  font-style : italic;
}

.legal-list {
  margin      : 0 0 0.875rem;
  padding-left: 1.25rem;
  display     : flex;
  flex-direction: column;
  gap         : 0.5rem;
}

.legal-list li {
  font-size  : 0.875rem;
  line-height: 1.65;
  color      : rgb(74, 74, 74);
}

/* ─── SECURITY PAGE ──────────────────────────────────────── */
.sec-section {
  width     : 100%;
  max-width : 640px;
  margin    : 3rem auto 0;
}

.sec-label {
  font-size     : 0.75rem;
  font-weight   : 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color         : #0067b8;
  margin        : 0 0 0.375rem;
}

.sec-title {
  font-size  : 1.1875rem;
  font-weight: 700;
  color      : #171717;
  margin     : 0 0 1.75rem;
}

/* Security cards grid */
.sec-grid {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 1rem;
}

@media (max-width: 480px) {
  .sec-grid { grid-template-columns: 1fr; }
}

.sec-card {
  background   : #fff;
  border       : 1px solid var(--slate-200);
  border-radius: 10px;
  padding      : 1.25rem;
}

.sec-card-icon {
  width        : 1.5rem;
  height       : 1.5rem;
  color        : #0067b8;
  margin-bottom: 0.75rem;
}

.sec-card-icon svg {
  width : 100%;
  height: 100%;
}

.sec-card-title {
  font-size  : 0.875rem;
  font-weight: 700;
  color      : #171717;
  margin     : 0 0 0.5rem;
}

.sec-card-desc {
  font-size  : 0.8375rem;
  line-height: 1.65;
  color      : rgb(74, 74, 74);
  margin     : 0;
}

/* Infrastructure list */
.sec-infra-list {
  display       : flex;
  flex-direction: column;
  gap           : 1.25rem;
}

.sec-infra-item {
  display    : flex;
  gap        : 1rem;
  align-items: flex-start;
}

.sec-infra-dot {
  width       : 8px;
  height      : 8px;
  min-width   : 8px;
  border-radius: 50%;
  background  : #0067b8;
  margin-top  : 0.4rem;
}

.sec-infra-name {
  font-size  : 0.875rem;
  font-weight: 700;
  color      : #171717;
  margin     : 0 0 0.25rem;
}

.sec-infra-desc {
  font-size  : 0.8375rem;
  line-height: 1.65;
  color      : rgb(74, 74, 74);
  margin     : 0;
}

/* Disclosure box */
.sec-disclosure {
  background   : #fff;
  border       : 1px solid var(--slate-200);
  border-radius: 10px;
  padding      : 1.5rem;
}

.sec-disclosure-title {
  font-size  : 0.9375rem;
  font-weight: 700;
  color      : #171717;
  margin     : 0 0 0.625rem;
}

.sec-disclosure-desc {
  font-size  : 0.875rem;
  line-height: 1.7;
  color      : rgb(74, 74, 74);
  margin     : 0;
}

.sec-disclosure-desc a {
  color          : #0067b8;
  text-decoration: none;
}

.sec-disclosure-desc a:hover {
  text-decoration: underline;
}