/* DomainSpace — AI-Certified Valuation Certificate
   Public page at /certificate.html?id=DXC-YYYY-XXXXXX
   Print-friendly: looks great when user "Print to PDF". */

:root {
  --cert-bg:      #fdfaf3;
  --cert-paper:   #ffffff;
  --cert-ink:     #1a1a1a;
  --cert-muted:   #6b6b6b;
  --cert-rule:    #d9c97e;
  --cert-accent:  #b9892e;
  --cert-accent2: #8a661e;
  --cert-stamp:   #b1361b;
}

.cert-body {
  background: #000;
  color: var(--cert-ink);
  font-family: 'Georgia', 'Times New Roman', 'EB Garamond', serif;
  min-height: 100vh;
  padding: 0;
}

/* === Site-themed topbar so the cert page feels connected to DomainSpace === */
.cert-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: #0a0a0a;
  border-bottom: 1px solid #1a1a1a;
  position: sticky;
  top: 0;
  z-index: 10;
}
.cert-topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  font-family: 'Helvetica', sans-serif;
  font-weight: 700;
}
.cert-topbar-logo {
  width: 32px; height: 32px;
  background: #1d9bf0;
  color: #fff;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  letter-spacing: 0.5px;
}
.cert-topbar-name { font-size: 16px; }
.cert-topbar-nav { display: flex; gap: 16px; }
.cert-topbar-link {
  color: #999;
  text-decoration: none;
  font-family: 'Helvetica', sans-serif;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 9999px;
  transition: background 0.15s, color 0.15s;
}
.cert-topbar-link:hover { background: rgba(29, 155, 240, 0.12); color: #1d9bf0; }

.cert-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 16px;
}

.cert-loading {
  padding: 48px 32px;
  text-align: center;
  color: #999;
  font-family: 'Helvetica', sans-serif;
}
.cert-error {
  background: #0a0a0a;
  padding: 48px 32px;
  text-align: center;
  border: 1px solid #1a1a1a;
  border-radius: 8px;
  color: #ccc;
  font-family: 'Helvetica', sans-serif;
}
.cert-error h1 { margin-top: 0; color: #f87171; font-family: 'Helvetica', sans-serif; }
.cert-error a { color: #1d9bf0; }

.cert {
  background: var(--cert-paper);
  border: 6px double var(--cert-rule);
  padding: 56px 64px 48px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  position: relative;
}

/* Decorative corner flourishes */
.cert::before, .cert::after {
  content: '';
  position: absolute;
  width: 48px; height: 48px;
  border: 2px solid var(--cert-accent);
}
.cert::before { top: 18px; left: 18px;   border-right: none; border-bottom: none; }
.cert::after  { bottom: 18px; right: 18px; border-left: none;  border-top: none; }

.cert-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--cert-rule);
  padding-bottom: 20px;
  margin-bottom: 28px;
}

.cert-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cert-logo {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--cert-accent), var(--cert-accent2));
  color: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 1px;
  font-family: 'Helvetica', sans-serif;
  box-shadow: 0 2px 8px rgba(185, 137, 46, 0.3);
}

.cert-brand-name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.cert-brand-sub {
  font-size: 12px;
  color: var(--cert-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.cert-stamp {
  width: 110px; height: 110px;
  border: 3px solid var(--cert-stamp);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--cert-stamp);
  transform: rotate(-8deg);
  position: relative;
}
.cert-stamp::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--cert-stamp);
  border-radius: 50%;
  opacity: 0.6;
}
.cert-stamp-inner {
  text-align: center;
  font-family: 'Helvetica', sans-serif;
  z-index: 1;
}
.cert-stamp-line1 {
  display: block;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
}
.cert-stamp-line2 {
  display: block;
  font-size: 22px;
  font-weight: 700;
  margin-top: 2px;
}

.cert-body-section {
  text-align: center;
  margin: 32px 0 40px;
}
.cert-label {
  font-size: 13px;
  color: var(--cert-muted);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 8px 0;
}
.cert-domain {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 12px 0;
  color: var(--cert-ink);
  word-break: break-all;
}
.cert-value {
  font-size: 64px;
  font-weight: 700;
  color: var(--cert-accent);
  margin: 16px 0 4px;
  letter-spacing: 1px;
}
.cert-range {
  color: var(--cert-muted);
  font-size: 14px;
  font-style: italic;
}

.cert-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 40px 0 32px;
  padding: 20px 0;
  border-top: 1px solid var(--cert-rule);
  border-bottom: 1px solid var(--cert-rule);
}
.cert-meta-cell { text-align: center; }
.cert-meta-label {
  font-size: 10px;
  color: var(--cert-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 4px;
}
.cert-meta-value {
  font-size: 14px;
  font-weight: 600;
}
.cert-meta-value.mono {
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 12px;
}

.cert-section-title {
  font-size: 11px;
  color: var(--cert-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--cert-rule);
  padding-bottom: 4px;
}

.cert-factors { margin: 28px 0; }
.cert-factors ul {
  list-style: '\2728  ';
  padding-left: 22px;
  margin: 0;
  font-size: 14px;
  color: var(--cert-ink);
  columns: 2;
  column-gap: 32px;
}
.cert-factors li { margin: 4px 0; break-inside: avoid; }

.cert-comps { margin: 28px 0; }
.cert-comps-sub {
  font-size: 11px;
  color: var(--cert-muted);
  font-style: italic;
  margin: 0 0 8px;
}
.cert-comps-sub a {
  color: var(--cert-accent);
  text-decoration: none;
}
.cert-comps-sub a:hover { text-decoration: underline; }
.cert-comps table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cert-comps th, .cert-comps td {
  padding: 6px 4px;
  text-align: left;
  border-bottom: 1px solid #eee5d4;
}
.cert-comps th {
  font-weight: 600;
  color: var(--cert-muted);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1px;
}
.cert-comps .num { text-align: right; font-variant-numeric: tabular-nums; }

.cert-reasoning { margin: 28px 0; }
.cert-reasoning p {
  font-size: 14px;
  line-height: 1.6;
  font-style: italic;
  color: #333;
  margin: 8px 0 0;
}

.cert-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--cert-rule);
  font-size: 11px;
  color: var(--cert-muted);
}
.cert-verify-label {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 9px;
  margin-bottom: 4px;
}
.cert-verify-url {
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 11px;
  color: var(--cert-ink);
  word-break: break-all;
}
.cert-issuer { text-align: right; }
.cert-issuer-addr { font-size: 10px; opacity: 0.8; margin-top: 2px; }

.cert-disclaimer {
  margin-top: 24px;
  font-size: 10px;
  color: var(--cert-muted);
  line-height: 1.5;
  text-align: center;
  font-style: italic;
  border-top: 1px dotted #ccc;
  padding-top: 12px;
}

.cert-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}
.cert-actions .btn {
  padding: 10px 22px;
  border-radius: 4px;
  font-family: 'Helvetica', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid var(--cert-accent);
  background: var(--cert-accent);
  color: white;
  transition: opacity 0.2s;
}
.cert-actions .btn:hover { opacity: 0.9; }
.cert-actions .btn-outline {
  background: transparent;
  color: var(--cert-accent);
}

/* === Listing card "Certified" badge === */
.cert-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #fff4d0, #ffe2a0);
  color: #8a661e;
  border: 1px solid #d9c97e;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
}
.cert-badge::before { content: '\2728'; }
.cert-badge:hover { opacity: 0.85; }

/* === Buy-certificate CTA + modal === */
.cert-cta {
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed var(--cert-rule);
  border-radius: 8px;
  background: linear-gradient(135deg, #fffbf0, #faf3e0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cert-cta-text {
  font-size: 13px;
  color: #5a4a1e;
}
.cert-cta-text strong { color: var(--cert-accent); }
.cert-cta button {
  background: var(--cert-accent);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cert-cta button:hover { background: var(--cert-accent2); }
.cert-cta button:disabled { opacity: 0.6; cursor: not-allowed; }

/* === Print styles === */
@media print {
  body, .cert-body { background: white !important; padding: 0 !important; margin: 0 !important; }
  .cert-page { max-width: none; margin: 0; padding: 0 !important; }
  .cert-topbar { display: none !important; }
  .cert {
    box-shadow: none !important;
    border-width: 4px !important;
    padding: 36px 48px !important;
    page-break-inside: avoid;
  }
  .no-print { display: none !important; }
  @page { size: letter; margin: 0.4in; }
}

/* === Certificates tab (list view in main app) === */
.cert-intro {
  text-align: center;
  padding: 56px 20px;
}
.cert-intro-icon {
  font-size: 48px;
  margin-bottom: 8px;
}
.cert-list-intro {
  margin-bottom: 16px;
  font-size: 14px;
}
.cert-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cert-row {
  display: flex;
  gap: 20px;
  padding: 18px 20px;
  border: 1px solid #e5e0c7;
  border-radius: 8px;
  background: linear-gradient(135deg, #fffdf6, #fdfaf3);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  align-items: stretch;
  flex-wrap: wrap;
}
.cert-row-main { flex: 1; min-width: 280px; }
.cert-row-domain {
  font-size: 20px;
  font-weight: 700;
  font-family: 'Georgia', serif;
  color: var(--cert-ink, #1a1a1a);
  margin-bottom: 4px;
  word-break: break-all;
}
.cert-row-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--cert-muted, #6b6b6b);
}
.cert-row-meta .mono {
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 11px;
  background: rgba(0,0,0,0.04);
  padding: 2px 6px;
  border-radius: 4px;
}
.cert-row-status {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
  background: #eee;
  color: #666;
}
.cert-row-status.ok       { background: #e0f5e0; color: #2a6b2a; }
.cert-row-status.refunded { background: #fde8e8; color: #a13a3a; }
.cert-row-status.expired  { background: #f4ecd5; color: #8a661e; }

.cert-row-numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.cert-row-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--cert-muted, #6b6b6b);
  margin-bottom: 2px;
}
.cert-row-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--cert-accent, #b9892e);
}
.cert-row-value-sm {
  font-size: 13px;
  font-weight: 600;
  color: var(--cert-ink, #1a1a1a);
}
.cert-row-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  min-width: 160px;
}
.cert-row-actions .btn {
  padding: 8px 14px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  border: 2px solid var(--cert-accent, #b9892e);
}
.cert-row-actions .btn-primary {
  background: var(--cert-accent, #b9892e);
  color: white;
}
.cert-row-actions .btn-outline {
  background: transparent;
  color: var(--cert-accent, #b9892e);
}
.cert-row-actions .btn:hover { opacity: 0.85; }

@media (max-width: 720px) {
  .cert-row { flex-direction: column; }
  .cert-row-numbers { grid-template-columns: repeat(2, 1fr); }
  .cert-row-actions { min-width: 0; flex-direction: row; }
}

/* === Responsive === */
@media (max-width: 720px) {
  .cert { padding: 32px 20px; }
  .cert-header { flex-direction: column; gap: 16px; align-items: center; text-align: center; }
  .cert-domain { font-size: 32px; }
  .cert-value  { font-size: 44px; }
  .cert-meta-grid { grid-template-columns: repeat(2, 1fr); }
  .cert-factors ul { columns: 1; }
  .cert-footer { flex-direction: column; gap: 16px; align-items: center; text-align: center; }
  .cert-issuer { text-align: center; }
}