/* ============================================================
   Compliance footer band — premium, solid, professional
   ============================================================ */

.compliance {
  background: var(--surface-900);
  border-top: 1px solid var(--hairline-2, rgba(255, 255, 255, 0.06));
  color: var(--text-muted);
  padding: 0;
  margin-top: 32px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* --- Row scaffolding ------------------------------------------------ */
.compliance-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: center;
  padding: 24px 32px;
  border-bottom: 1px solid var(--hairline, rgba(255, 255, 255, 0.04));
}
.compliance-row:last-of-type { border-bottom: 0; }

.compliance-row-label {
  display: flex; flex-direction: column; gap: 4px;
}
.compliance-row-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.compliance-row-sub {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.01em;
}

.compliance-row-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* --- Payment cells -------------------------------------------------- */
.compliance-pay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 48px;
  padding: 4px 8px;
  background: var(--surface-700);
  border: 1px solid var(--hairline-2, rgba(255, 255, 255, 0.08));
  border-radius: var(--r-md, 8px);
  transition: transform var(--t, 180ms) var(--ease, ease),
              background var(--t, 180ms),
              border-color var(--t, 180ms);
  position: relative;
}
.compliance-pay:hover {
  transform: translateY(-2px);
  background: var(--surface-500, #395565);
  border-color: rgba(255, 255, 255, 0.18);
}
.compliance-pay--crypto { min-width: 40px; padding: 4px; }
.compliance-pay--crypto svg { display: block; }
.compliance-pay--fiat svg { display: block; height: 22px; width: auto; }

.compliance-pay-divider {
  height: 24px;
  width: 1px;
  background: var(--hairline-2, rgba(255, 255, 255, 0.10));
  margin: 0 6px;
  align-self: center;
}

/* --- Provider logos -------------------------------------------------- */
.compliance-provider {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 14px;
  background: var(--surface-700);
  border: 1px solid var(--hairline-2, rgba(255, 255, 255, 0.06));
  border-radius: var(--r-md, 8px);
  transition: transform var(--t, 180ms) var(--ease, ease),
              background var(--t, 180ms),
              border-color var(--t, 180ms);
}
.compliance-provider:hover {
  transform: translateY(-2px);
  background: var(--surface-500, #395565);
  border-color: rgba(255, 255, 255, 0.16);
}
.compliance-provider svg { display: block; height: 26px; width: auto; }

/* --- Trust chips (compliance & responsible gaming) ----------------- */
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--r-md, 8px);
  border: 1px solid var(--hairline-2, rgba(255, 255, 255, 0.08));
  background: var(--surface-700);
  color: var(--text-primary, #F7FAFC);
  white-space: nowrap;
  transition: transform var(--t, 180ms) var(--ease, ease),
              border-color var(--t, 180ms);
}
.trust-chip:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.20); }
.trust-chip strong { font-weight: 800; }
.trust-chip small { font-weight: 500; opacity: 0.7; font-size: 0.85em; }

/* 18+ — solid red square */
.trust-age {
  width: 40px;
  padding: 0;
  justify-content: center;
  background: #E5484D;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.20);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.trust-age-num {
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -0.02em;
}

/* GamCare — green */
.trust-gamcare {
  background: linear-gradient(180deg, #0F7A2F, #086221);
  border-color: rgba(3, 230, 37, 0.30);
  color: #FFFFFF;
}
.trust-gamcare svg { color: #FFFFFF; }
.trust-gamcare strong { color: #FFFFFF; }

/* BeGambleAware */
.trust-gba {
  background: linear-gradient(180deg, #16447E, #0E2F5A);
  border-color: rgba(20, 117, 225, 0.30);
  color: #FFFFFF;
}

/* GLI Certified */
.trust-gli {
  background: var(--surface-700);
  border-color: rgba(232, 179, 65, 0.30);
}
.trust-gli-mark {
  background: #E8B341;
  color: #1A1410;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

/* Crypto Gambling Foundation */
.trust-cgf {
  background: var(--surface-700);
  border-color: rgba(124, 92, 255, 0.30);
  color: var(--text-primary);
}
.trust-cgf svg { color: #7C5CFF; }

/* ResponsibleGambling */
.trust-rg {
  background: var(--surface-700);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--text-muted);
}
.trust-rg svg { color: var(--text-muted); }

/* --- Social icons -------------------------------------------------- */
.compliance-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--text-muted);
  background: var(--surface-700);
  border: 1px solid var(--hairline-2, rgba(255, 255, 255, 0.06));
  text-decoration: none;
  transition: color var(--t, 180ms),
              background var(--t, 180ms),
              border-color var(--t, 180ms),
              transform var(--t, 180ms);
}
.compliance-social-link:hover {
  color: var(--text-primary);
  background: var(--surface-500, #395565);
  border-color: rgba(255, 255, 255, 0.20);
  transform: translateY(-2px);
}
.compliance-social-link svg { display: block; }

/* --- Legal band ----------------------------------------------------- */
.compliance-legal-band {
  background: linear-gradient(180deg, var(--surface-900), #0B181F);
  padding: 28px 32px;
}
.compliance-legal-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
}
.compliance-legal-license {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 14px 14px;
  background: var(--surface-700);
  border: 1px solid var(--hairline-2, rgba(255, 255, 255, 0.10));
  border-radius: var(--r-md);
  min-width: 280px;
}
.compliance-legal-license > svg { flex: none; }
.compliance-legal-title {
  font-weight: 700;
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: 1.3;
}
.compliance-legal-sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}
.compliance-legal-sub strong { color: var(--text-primary); }

.compliance-legal-text p {
  margin: 0 0 6px;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.6;
  max-width: 100ch;
}
.compliance-copyright { color: var(--text-dim); margin-top: 8px !important; }

/* --- Responsive ---------------------------------------------------- */
@media (max-width: 1023px) {
  .compliance-row { padding: 22px 20px; gap: 14px; grid-template-columns: 1fr; }
  .compliance-row-label { text-align: left; }
  .compliance-row-items { gap: 8px; }
  .compliance-legal-band { padding: 22px 20px; }
  .compliance-legal-grid { grid-template-columns: 1fr; gap: 16px; }
  .compliance-legal-license { min-width: 0; }
}

@media (max-width: 600px) {
  .compliance-row { padding: 18px 16px; }
  .compliance-pay { height: 36px; min-width: 40px; }
  .compliance-pay--fiat svg { height: 18px; }
  .compliance-provider { height: 36px; padding: 0 10px; }
  .compliance-provider svg { height: 22px; }
  .trust-chip { height: 36px; padding: 0 10px; font-size: var(--text-xs); }
  .trust-age { width: 36px; }
  .compliance-social-link { width: 34px; height: 34px; }
  .compliance-legal-license { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
}