/* ═══════════════════════════════════════════════════════════
   ClaimPals — shared "claim landing page" styles
   Generic version of the personal-injury page template (pi.css)
   from the Slater Green framework, re-themed Navy & Silver.
   Used by: secured-loan.php, scam-or-fraud.php — and any
   future claim page built from this template.
   ═══════════════════════════════════════════════════════════ */

/* ── Page Hero ───────────────────────────────────────────── */
.clm-hero {
  position: relative;
  overflow: hidden;
  padding: 7rem 0 5rem;
  background:
    radial-gradient(ellipse 70% 60% at 15% 50%, rgba(95,162,42,.14) 0%, transparent 55%),
    linear-gradient(155deg, #081D36 0%, #0B2A4D 40%, #10315A 70%, #0A2340 100%);
}

/* Value props */
.clm-value-props { display: flex; flex-direction: column; gap: .55rem; }
.clm-vp-item {
  display: flex; align-items: center; gap: .6rem;
  font-size: .9rem; color: rgba(255,255,255,.8);
}
.clm-vp-item .bi { color: #22c55e; font-size: 1rem; flex-shrink: 0; }

/* ── Claim detail cards (types of mis-selling / scam) ─────── */
.clm-detail-card {
  background: var(--sg-white);
  border-radius: var(--sg-radius-xl);
  padding: 2rem 1.75rem;
  border: 1px solid rgba(11,42,77,.07);
  box-shadow: var(--sg-shadow-sm);
  transition: var(--sg-transition);
  position: relative;
  overflow: hidden;
}
.clm-detail-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  transition: var(--sg-transition);
}
.clm-detail-card:hover { transform: translateY(-6px); box-shadow: var(--sg-shadow-lg); }

.clm-detail-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  transition: var(--sg-transition);
}
.clm-icon-blue  { background: rgba(59,130,246,.1); color: #3b82f6; }
.clm-icon-amber { background: rgba(245,158,11,.1);  color: #f59e0b; }
.clm-icon-green { background: rgba(34,197,94,.1);   color: #22c55e; }
.clm-icon-red   { background: rgba(239,68,68,.1);   color: #ef4444; }
.clm-icon-teal  { background: rgba(20,184,166,.1);  color: #14b8a6; }
.clm-icon-purple{ background: rgba(139,92,246,.1);  color: #8b5cf6; }

.clm-detail-card:hover .clm-icon-blue   { background: #3b82f6; color: #fff; }
.clm-detail-card:hover .clm-icon-amber  { background: #f59e0b; color: #fff; }
.clm-detail-card:hover .clm-icon-green  { background: #22c55e; color: #fff; }
.clm-detail-card:hover .clm-icon-red    { background: #ef4444; color: #fff; }
.clm-detail-card:hover .clm-icon-teal   { background: #14b8a6; color: #fff; }
.clm-detail-card:hover .clm-icon-purple { background: #8b5cf6; color: #fff; }

.clm-detail-card:has(.clm-icon-blue)::after   { background: #3b82f6; }
.clm-detail-card:has(.clm-icon-amber)::after  { background: #f59e0b; }
.clm-detail-card:has(.clm-icon-green)::after  { background: #22c55e; }
.clm-detail-card:has(.clm-icon-red)::after    { background: #ef4444; }
.clm-detail-card:has(.clm-icon-teal)::after   { background: #14b8a6; }
.clm-detail-card:has(.clm-icon-purple)::after { background: #8b5cf6; }

.clm-detail-card h4 {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 700;
  color: var(--sg-green); margin-bottom: .5rem;
}
.clm-detail-card p { font-size: .88rem; color: #6b7280; margin-bottom: .85rem; line-height: 1.6; }

.clm-detail-list {
  list-style: none; padding: 0; margin: 0 0 1rem;
}
.clm-detail-list li {
  font-size: .82rem; color: #374151;
  padding: .3rem 0;
  border-bottom: 1px solid rgba(11,42,77,.05);
  padding-left: 1.2rem;
  position: relative;
}
.clm-detail-list li::before {
  content: '›';
  position: absolute; left: 0;
  color: var(--sg-gold); font-weight: 700;
}
.clm-detail-list li:last-child { border-bottom: none; }

.clm-detail-value {
  font-size: .82rem; color: #9ca3af;
  border-top: 1px solid rgba(11,42,77,.07);
  padding-top: .75rem; margin-top: .5rem;
}
.clm-detail-value strong { color: var(--sg-green); }

/* ── "What your claim could include" guide ────────────────── */
.clm-guide { background: var(--sg-body-bg); }

.clm-guide-table {
  background: var(--sg-white);
  border-radius: var(--sg-radius-xl);
  overflow: hidden;
  box-shadow: var(--sg-shadow);
  border: 1px solid rgba(11,42,77,.07);
}

.clm-guide-header {
  display: flex; justify-content: space-between;
  background: var(--sg-green);
  color: rgba(255,255,255,.8);
  font-size: .75rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .9rem 1.5rem;
}

.clm-guide-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(11,42,77,.06);
  transition: background .2s;
}
.clm-guide-row:hover { background: rgba(11,42,77,.025); }
.clm-guide-row:last-of-type { border-bottom: none; }

.clm-guide-item {
  display: flex; align-items: center; gap: .6rem;
  font-size: .88rem; color: #374151; font-weight: 500;
}
.clm-guide-item .bi { font-size: 1rem; flex-shrink: 0; color: var(--sg-gold); }

.clm-guide-note {
  font-size: .82rem; font-weight: 600;
  color: var(--sg-green); white-space: nowrap;
}

.clm-guide-footer {
  font-size: .72rem; color: #9ca3af;
  background: #f9fafb;
  padding: .7rem 1.5rem;
  border-top: 1px solid rgba(11,42,77,.07);
  font-style: italic;
}

/* ── Sidebar cards ────────────────────────────────────────── */
.clm-sidebar-card {
  background: var(--sg-white);
  border-radius: var(--sg-radius-lg);
  padding: 1.6rem;
  box-shadow: var(--sg-shadow-sm);
  border: 1px solid rgba(11,42,77,.07);
  position: relative;
  overflow: hidden;
}
.clm-sidebar-card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, var(--sg-gold) 0%, var(--sg-gold-dark) 100%);
}

.clm-sidebar-icon {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--sg-gold) 0%, var(--sg-gold-dark) 100%);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: var(--sg-white);
  margin-bottom: .85rem;
}
.clm-sidebar-card h5 {
  font-family: var(--font-display);
  font-weight: 700; color: var(--sg-green);
  margin-bottom: .5rem; font-size: 1rem;
}
.clm-sidebar-card p { font-size: .88rem; color: #4b5563; margin: 0; line-height: 1.6; }

.clm-sidebar-list {
  list-style: none; padding: 0; margin: .5rem 0 0;
}
.clm-sidebar-list li {
  display: flex; align-items: center; gap: .6rem;
  font-size: .88rem; color: #374151;
  padding: .4rem 0;
  border-bottom: 1px solid rgba(11,42,77,.05);
}
.clm-sidebar-list li:last-child { border-bottom: none; }
.clm-sidebar-list .bi { color: var(--sg-gold); font-size: .9rem; }

/* ── Bottom CTA ───────────────────────────────────────────── */
.clm-bottom-cta {
  background: linear-gradient(135deg, var(--sg-green) 0%, #081D36 100%);
  border-top: 1px solid rgba(95,162,42,.18);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .clm-guide-row { flex-direction: column; align-items: flex-start; gap: .3rem; }
}
@media (max-width: 575px) {
  .clm-hero { padding: 5.5rem 0 3.5rem; }
}