/* ============================================================
   RESCUE 3D ICON POLISH — site-wide upgrades
   Bumps existing flat icon containers to gradient + 3D depth
   without changing layout. Loaded on every page.
   ============================================================ */

/* ---- TRUST CARD CHECKMARKS — premium gradient + ring depth ---- */
.trust-icon {
  width: 26px !important;
  height: 26px !important;
  background: radial-gradient(circle at 30% 30%, rgba(74, 222, 128, 0.45), rgba(34, 197, 94, 0.15) 70%) !important;
  border: 1px solid rgba(74, 222, 128, 0.45) !important;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 4px rgba(0, 0, 0, 0.25) !important;
}
.trust-icon svg {
  width: 14px !important;
  height: 14px !important;
  stroke: #4ADE80 !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

/* ---- PROBLEM CARD ICON BUBBLES — bold 3D circle w/ gradient ---- */
.problem-card-icon {
  width: 44px !important;
  height: 44px !important;
  background: linear-gradient(145deg, #E84A2F 0%, #C23A20 50%, #7A2412 100%) !important;
  border: 1px solid rgba(232, 74, 47, 0.6) !important;
  border-radius: 50% !important;
  color: #FFE9B0 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  box-shadow:
    0 6px 14px rgba(232, 74, 47, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    inset 0 -3px 6px rgba(0, 0, 0, 0.3) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  position: relative;
}
.problem-card-icon::before {
  content: '';
  position: absolute;
  top: 4px; left: 6px;
  width: 14px; height: 6px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
  filter: blur(1px);
  pointer-events: none;
}

/* ---- PROCESS STEP NUMBER BADGES — gold/red gradient + glow ---- */
.process-step::before {
  background: linear-gradient(145deg, #E84A2F 0%, #C23A20 60%, #7A2412 100%) !important;
  border: 1px solid rgba(232, 74, 47, 0.5) !important;
  color: #FFE9B0 !important;
  font-weight: 800 !important;
  box-shadow:
    0 4px 10px rgba(232, 74, 47, 0.4),
    0 2px 3px rgba(0, 0, 0, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* ---- WARRANTY CARD ICON — premium shield ---- */
.warranty-card-icon {
  background: radial-gradient(circle at 35% 35%, rgba(200, 155, 60, 0.3), rgba(200, 155, 60, 0.05) 70%) !important;
  border: 1px solid rgba(200, 155, 60, 0.4) !important;
  box-shadow:
    0 6px 18px rgba(200, 155, 60, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -3px 6px rgba(0, 0, 0, 0.25) !important;
}
.warranty-card-icon svg {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}

/* ---- WHY-US CARDS — left rail glow + subtle inner shine ---- */
.why-us-card {
  position: relative;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.why-us-card:hover {
  transform: translateY(-3px);
  border-left-color: #C89B3C !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(200, 155, 60, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ---- TESTIMONIAL CARDS — paper depth ---- */
.testimonial-card {
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.testimonial-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
.testimonial-card-stars {
  filter: drop-shadow(0 1px 2px rgba(200, 155, 60, 0.35));
}
.testimonial-card-avatar {
  background: linear-gradient(145deg, #E84A2F, #7A2412) !important;
  color: #FFE9B0 !important;
  font-weight: 800 !important;
  box-shadow:
    0 3px 8px rgba(232, 74, 47, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 3px rgba(0, 0, 0, 0.3) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ---- PRIMARY/SECONDARY BUTTONS — premium 3D embossed ---- */
.btn-primary,
.h-cta-primary,
.h-nav-cta,
.nav-cta {
  background: linear-gradient(145deg, #E84A2F 0%, #C23A20 60%, #9A2D18 100%) !important;
  box-shadow:
    0 6px 16px rgba(232, 74, 47, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 4px rgba(0, 0, 0, 0.25) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.btn-primary:hover,
.h-cta-primary:hover,
.h-nav-cta:hover,
.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 22px rgba(232, 74, 47, 0.45),
    0 4px 8px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.25) !important;
}

.btn-secondary {
  background: rgba(20, 36, 64, 0.6) !important;
  border: 1px solid rgba(200, 155, 60, 0.45) !important;
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.btn-secondary:hover {
  transform: translateY(-2px);
  border-color: #C89B3C !important;
  box-shadow:
    0 8px 18px rgba(200, 155, 60, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* ---- COVERAGE / RELATED LINKS — depth + lift ---- */
.coverage-link {
  background: linear-gradient(145deg, rgba(20, 36, 64, 0.55), rgba(13, 27, 46, 0.65)) !important;
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.coverage-link:hover {
  transform: translateY(-2px);
  border-color: rgba(200, 155, 60, 0.5) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(200, 155, 60, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

/* ---- BRANDS BAR — give it a proper 3D feel ---- */
.brands-bar {
  background:
    linear-gradient(180deg, transparent, rgba(20, 36, 64, 0.55), transparent),
    radial-gradient(ellipse at center, rgba(200, 155, 60, 0.06), transparent 70%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}
.brands-bar-eyebrow {
  background: linear-gradient(180deg, #E8C76A, #C89B3C 60%, #8B6B22);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.brands-bar-list {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ---- BIG CTA / EMERGENCY SECTION — emergency glow ---- */
.big-cta {
  background:
    radial-gradient(ellipse at top, rgba(232, 74, 47, 0.18), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(200, 155, 60, 0.08), transparent 60%),
    var(--navy) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.big-cta h2 em { color: #E84A2F; text-shadow: 0 2px 8px rgba(232, 74, 47, 0.4); }

/* ---- SECTION EYEBROWS — gold gradient text ---- */
.section-eyebrow,
.h-eyebrow {
  background: linear-gradient(180deg, #E8C76A, #C89B3C 60%, #8B6B22);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* ---- HERO H1 EM — accented red ---- */
.hero h1 em,
.h-page-title em {
  background: linear-gradient(180deg, #FF6B4A 0%, #E84A2F 50%, #9A2D18 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(232, 74, 47, 0.35));
}

/* ---- TOPBAR PULSE — subtle glow ---- */
.topbar-pulse,
.h-topbar-pulse {
  box-shadow:
    0 0 8px rgba(74, 222, 128, 0.6),
    0 0 16px rgba(74, 222, 128, 0.3) !important;
}

/* ---- NAV BURGER — solid card on mobile ---- */
.nav-burger,
.h-nav-burger {
  background: rgba(232, 74, 47, 0.12) !important;
  border: 1px solid rgba(232, 74, 47, 0.3) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.nav-burger span,
.h-nav-burger span {
  background: #E84A2F !important;
  box-shadow: 0 1px 2px rgba(232, 74, 47, 0.4);
}

/* ---- FOOTER — subtle top divider glow ---- */
.footer,
.h-footer {
  position: relative;
}
.footer::before,
.h-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 155, 60, 0.4), transparent);
}

/* ---- PRICING ROW — subtle hover lift ---- */
.pricing-row {
  transition: background 0.2s ease;
}
.pricing-row:hover {
  background: rgba(200, 155, 60, 0.06) !important;
}
.pricing-row-price {
  background: linear-gradient(180deg, #E8C76A, #C89B3C);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800 !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

/* ---- COMPARE TABLE — premium feel ---- */
.compare-table th {
  background: linear-gradient(180deg, rgba(20, 36, 64, 0.8), rgba(13, 27, 46, 0.95)) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* ---- FAQ ITEMS — subtle interactive depth ---- */
.faq-item {
  transition: background 0.2s ease, border-color 0.2s ease;
}
.faq-item[open] {
  background: rgba(200, 155, 60, 0.04) !important;
  border-color: rgba(200, 155, 60, 0.3) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.faq-item summary {
  cursor: pointer;
}

/* ---- ACCESSIBILITY: respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .why-us-card, .testimonial-card, .coverage-link,
  .btn-primary, .btn-secondary, .h-cta-primary, .h-nav-cta, .nav-cta {
    transition: none !important;
  }
  .why-us-card:hover, .testimonial-card:hover, .coverage-link:hover,
  .btn-primary:hover, .btn-secondary:hover, .h-cta-primary:hover, .h-nav-cta:hover, .nav-cta:hover {
    transform: none !important;
  }
}