/* Kingdom Church — Giving page visual refresh
   Add this stylesheet only to the /give Blade view. */
:root {
  --give-ink: #080D18;
  --give-blue: #5B8CFF;
  --give-teal: #72E5D1;
  --give-white: #F7F9FC;
  --give-muted: #B8C4D8;
}
.give-page,
body.give-page {
  background: var(--give-ink);
  color: var(--give-white);
}
.give-page .hero,
.give-page .page-hero,
.give-page .inner-hero,
.give-page .page-banner,
.give-page .give-hero,
body.give-page main > section:first-child {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(470px, 62vh, 720px);
  display: flex;
  align-items: center;
  background:
    radial-gradient(ellipse at 82% 22%, rgba(91,140,255,.24), transparent 34%),
    radial-gradient(ellipse at 72% 90%, rgba(114,229,209,.12), transparent 35%),
    linear-gradient(120deg, #080D18 0%, #111D33 54%, #10182A 100%) !important;
  color: var(--give-white) !important;
}
.give-page .hero::before,
.give-page .page-hero::before,
.give-page .inner-hero::before,
.give-page .page-banner::before,
.give-page .give-hero::before,
body.give-page main > section:first-child::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(54vw, 700px);
  aspect-ratio: 1;
  right: -12%;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(160,190,255,.22);
  border-radius: 50%;
  box-shadow: 0 0 0 60px rgba(91,140,255,.035), 0 0 0 120px rgba(91,140,255,.025);
  animation: give-orbit 18s linear infinite;
  pointer-events: none;
}
.give-page .hero::after,
.give-page .page-hero::after,
.give-page .inner-hero::after,
.give-page .page-banner::after,
.give-page .give-hero::after,
body.give-page main > section:first-child::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 340px;
  height: 340px;
  right: 9%;
  top: 14%;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(91,140,255,.17), rgba(114,229,209,.05));
  filter: blur(2px);
  animation: give-float 8s ease-in-out infinite alternate;
  pointer-events: none;
}
.give-page h1,
.give-page .hero h1,
.give-page .page-hero h1,
.give-page .inner-hero h1,
.give-page .page-banner h1,
.give-page .give-hero h1 {
  max-width: 900px;
  color: #fff !important;
  font-size: clamp(3.2rem, 7vw, 6.8rem) !important;
  line-height: .98 !important;
  letter-spacing: -.065em !important;
  text-wrap: balance;
}
.give-page h1 em,
.give-page h1 i,
.give-page .hero h1 span,
.give-page .page-hero h1 span,
.give-page .give-hero h1 span {
  color: var(--give-blue) !important;
  background: linear-gradient(100deg, #82A8FF, #72E5D1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.give-page p,
.give-page .hero p,
.give-page .page-hero p,
.give-page .inner-hero p,
.give-page .page-banner p,
.give-page .give-hero p {
  color: #D1DBEA;
  max-width: 650px;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.8;
}
.give-page .btn-primary,
.give-page .button-primary,
.give-page a.button,
.give-page button[type="submit"] {
  background: linear-gradient(115deg, #5B8CFF, #72A0FF) !important;
  color: #08101F !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 999px !important;
  padding: 15px 25px !important;
  font-weight: 750 !important;
  box-shadow: 0 12px 35px rgba(55,104,225,.25);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.give-page .btn-primary:hover,
.give-page .button-primary:hover,
.give-page a.button:hover,
.give-page button[type="submit"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(55,104,225,.35);
  filter: brightness(1.06);
}
.give-page .panel,
.give-page .card,
.give-page .giving-card,
.give-page .donation-card,
.give-page form,
.give-page .form-card {
  border: 1px solid rgba(174,196,236,.15);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(24,37,61,.94), rgba(12,21,38,.94));
  color: var(--give-white);
  box-shadow: 0 22px 70px rgba(0,0,0,.18);
}
.give-page input,
.give-page select,
.give-page textarea {
  color: #fff;
  background: rgba(4,10,21,.65);
  border: 1px solid rgba(174,196,236,.25);
  border-radius: 12px;
}
.give-page input:focus,
.give-page select:focus,
.give-page textarea:focus {
  outline: 2px solid rgba(91,140,255,.65);
  outline-offset: 2px;
}
.give-page .eyebrow,
.give-page .section-label,
.give-page .hero-label {
  color: var(--give-teal) !important;
  letter-spacing: .22em;
  font-weight: 800;
}
@keyframes give-orbit { to { transform: translateY(-50%) rotate(360deg); } }
@keyframes give-float { from { transform: translate3d(0,0,0) scale(.94); } to { transform: translate3d(-18px,18px,0) scale(1.04); } }
@media (max-width: 700px) {
  .give-page .hero,
  .give-page .page-hero,
  .give-page .inner-hero,
  .give-page .page-banner,
  .give-page .give-hero,
  body.give-page main > section:first-child { min-height: 430px; padding-block: 72px; }
  .give-page .hero::before,
  .give-page .page-hero::before,
  .give-page .inner-hero::before,
  .give-page .page-banner::before,
  .give-page .give-hero::before,
  body.give-page main > section:first-child::before { width: 100vw; right: -45%; opacity: .6; }
  .give-page .hero::after,
  .give-page .page-hero::after,
  .give-page .inner-hero::after,
  .give-page .page-banner::after,
  .give-page .give-hero::after,
  body.give-page main > section:first-child::after { width: 200px; height: 200px; right: -5%; }
}
@media (prefers-reduced-motion: reduce) {
  .give-page *,
  .give-page *::before,
  .give-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
