/* ============================================================
   CFC — GIVE.HTML PAGE STYLES
   ============================================================ */

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
    html { scroll-behavior:smooth; }
    
    body {
      font-family: 'Lato', sans-serif;
      color: #f0e8d0;
      overflow-x: hidden;
      background-color: #0D1B3E;
      background-position: center top;
      position: relative;
    }
    /* Overlay to control fade intensity */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-color: rgba(8, 15, 36, 0.93);
      pointer-events: none;
      z-index: 0;
    }
    /* Ensure all direct children sit above the overlay */
    body > * { position: relative; z-index: 1; }

    :root {
      --navy:  #0D1B3E;
      --royal: #4B0082;
      --gold:  #C9A84C;
      --gold-l:#E2C06A;
      --white: #f0e8d0;
    }

    /* ── Nav ── */
    #navbar { position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(8,15,36,.97); box-shadow:0 2px 20px rgba(201,168,76,.2); transition:background .4s,box-shadow .4s; }
    #navbar.scrolled { background:rgba(5,10,26,1); box-shadow:0 2px 24px rgba(201,168,76,.25); }
    .gold-text   { color:var(--gold); }
    .gold-border { border:1px solid var(--gold); }
    .gold-divider {
      width:80px; height:3px;
      background:linear-gradient(90deg,transparent,var(--gold),transparent);
      margin:1rem auto;
    }
    .nav-link {
      font-family:'Cinzel',serif; font-size:.8rem; letter-spacing:.08em;
      color:#f0e8d0; transition:color .2s; padding:.25rem 0; position:relative;
    }
    .nav-link::after {
      content:''; position:absolute; bottom:-2px; left:0; right:0;
      height:2px; background:var(--gold); transform:scaleX(0); transition:transform .25s;
    }
    .nav-link:hover { color:var(--gold); }
    .nav-link:hover::after { transform:scaleX(1); }
    .nav-link.active { color:var(--gold); }
    .nav-link.active::after { transform:scaleX(1); }
    .btn-gold {
      display:inline-block; padding:.75rem 2rem;
      background:linear-gradient(135deg,var(--gold-l),var(--gold));
      color:#0D1B3E; font-family:'Cinzel',serif; font-weight:700;
      letter-spacing:.05em; border-radius:4px;
      transition:transform .2s,box-shadow .2s;
    }
    .btn-gold:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(201,168,76,.4); }
    .btn-outline {
      display:inline-block; padding:.75rem 2rem;
      border:2px solid var(--gold); color:var(--gold);
      font-family:'Cinzel',serif; font-weight:700; letter-spacing:.05em;
      border-radius:4px; transition:background .2s,color .2s,transform .2s;
    }
    .btn-outline:hover { background:var(--gold); color:#0D1B3E; transform:translateY(-2px); }
    #mobile-menu { display:none; }
    #mobile-menu.open { display:block; }

    /* ── Page hero ── */
    /* ── Page hero with faded photo background ── */
    .page-hero {
      padding-top:130px; padding-bottom:80px;
      position:relative; overflow:hidden;
      background-color: #080f24;
    }
    /* Real photo layer — faded */
    .page-hero::before {
      content:'';
      position:absolute; inset:0;
      background-image: url('../../../images/give/offering-bowl.jpeg');
      background-position: center center;
      opacity: 0.72;
      filter: grayscale(0%);
    }
    /* Gradient overlay on top of photo */
    .page-hero::after {
      content:'';
      position:absolute; inset:0;
      background: linear-gradient(
        to bottom,
        rgba(8,15,36,.55) 0%,
        rgba(75,0,130,.30) 50%,
        rgba(8,15,36,.65) 100%
      );
    }
    /* All children must sit above the overlays */
    .page-hero > * { position:relative; z-index:2; }

    /* ── Reveal ── */
    .reveal { opacity:0; transform:translateY(30px); transition:opacity .65s ease,transform .65s ease; }
    .reveal.visible { opacity:1; transform:translateY(0); }

    /* ── Pattern bg ── */
    .pattern-bg {
      background-image:radial-gradient(circle at 1px 1px,rgba(201,168,76,.06) 1px,transparent 0);
      background-size:32px 32px;
    }

    /* ── Section label ── */
    .section-label {
      display:flex; align-items:center; gap:10px; margin-bottom:1.5rem;
    }
    .section-label-icon {
      width:40px; height:40px; border-radius:50%;
      background:linear-gradient(135deg,var(--gold-l),var(--gold));
      display:flex; align-items:center; justify-content:center;
      color:#0D1B3E; font-size:1rem; flex-shrink:0;
    }

    /* ── Mobile Money Card ── */
    .momo-card {
      border-radius:14px; overflow:hidden;
      border:1px solid rgba(201,168,76,.25);
      background:linear-gradient(145deg,rgba(75,0,130,.18),rgba(13,27,62,.92));
      transition:transform .3s,box-shadow .3s,border-color .3s;
    }
    .momo-card:hover {
      transform:translateY(-4px);
      box-shadow:0 14px 35px rgba(0,0,0,.35), 0 0 18px rgba(201,168,76,.1);
      border-color:rgba(201,168,76,.5);
    }
    .momo-header {
      padding:1rem 1.25rem;
      display:flex; align-items:center; gap:12px;
    }
    .momo-logo {
      width:48px; height:48px; border-radius:10px;
      display:flex; align-items:center; justify-content:center;
      font-family:'Cinzel',serif; font-weight:900; font-size:.95rem;
      flex-shrink:0;
    }
    .momo-body { padding:0 1.25rem 1.25rem; }
    .info-row {
      display:flex; justify-content:space-between; align-items:center;
      padding:.6rem 0;
      border-bottom:1px solid rgba(201,168,76,.12);
    }
    .info-row:last-of-type { border-bottom:none; }
    .info-label { color:#9ca3af; font-size:.75rem; }
    .info-value { color:#f0e8d0; font-weight:700; font-size:.85rem; letter-spacing:.02em; }

    /* ── Dial badge ── */
    .dial-badge {
      display:inline-flex; align-items:center; gap:6px;
      padding:.4rem 1rem; border-radius:999px;
      background:rgba(201,168,76,.12);
      border:1px solid rgba(201,168,76,.35);
      color:var(--gold); font-family:'Cinzel',serif;
      font-weight:700; font-size:.8rem; letter-spacing:.08em;
    }

    /* ── Copy button ── */
    .copy-btn {
      width:30px; height:30px; border-radius:6px;
      background:rgba(201,168,76,.1); border:1px solid rgba(201,168,76,.3);
      color:var(--gold); display:inline-flex; align-items:center; justify-content:center;
      cursor:pointer; transition:background .2s,transform .15s;
      font-size:.75rem; flex-shrink:0;
    }
    .copy-btn:hover { background:rgba(201,168,76,.25); transform:scale(1.1); }
    .copy-btn.copied { background:rgba(0,200,100,.15); border-color:rgba(0,200,100,.4); color:#4ade80; }

    /* ── Bank Card ── */
    .bank-card {
      border-radius:20px; padding:2rem;
      background:linear-gradient(135deg,#1a003a 0%,#0d1b3e 45%,#2a0050 100%);
      border:1px solid rgba(201,168,76,.35);
      position:relative; overflow:hidden;
      box-shadow:0 20px 60px rgba(0,0,0,.4);
    }
    .bank-card::before {
      content:''; position:absolute;
      width:280px; height:280px; border-radius:50%;
      background:radial-gradient(circle,rgba(201,168,76,.08),transparent 70%);
      top:-80px; right:-80px; pointer-events:none;
    }
    .bank-card::after {
      content:''; position:absolute;
      width:200px; height:200px; border-radius:50%;
      background:radial-gradient(circle,rgba(75,0,130,.15),transparent 70%);
      bottom:-60px; left:-60px; pointer-events:none;
    }
    .bank-chip {
      width:44px; height:34px; border-radius:6px;
      background:linear-gradient(135deg,var(--gold-l),var(--gold-dark,#9E7B2E));
      display:flex; align-items:center; justify-content:center;
      margin-bottom:1.5rem;
    }
    .bank-chip-lines { display:grid; grid-template-rows:repeat(3,1fr); gap:4px; width:60%; }
    .bank-chip-line { height:4px; background:rgba(0,0,0,.3); border-radius:2px; }
    .bank-field { margin-bottom:1rem; }
    .bank-field-label { font-size:.62rem; letter-spacing:.15em; color:rgba(201,168,76,.7); text-transform:uppercase; margin-bottom:.2rem; font-family:'Cinzel',serif; }
    .bank-field-value { font-size:.95rem; font-weight:700; color:#f0e8d0; letter-spacing:.05em; display:flex; align-items:center; gap:8px; }
    .bank-logo-area {
      position:absolute; top:1.5rem; right:1.5rem;
      text-align:right;
    }

    /* ── Progress bar ── */
    .progress-track {
      width:100%; height:14px; border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(201,168,76,.2);
      overflow:hidden; position:relative;
    }
    .progress-fill {
      height:100%; border-radius:999px;
      background:linear-gradient(90deg,#9E7B2E,var(--gold-l));
      position:relative; transition:width 1.5s cubic-bezier(.4,0,.2,1);
      /* JS will set width after page load */
    }
    .progress-fill::after {
      content:''; position:absolute; top:0; right:0; bottom:0;
      width:30px;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.35));
      border-radius:999px;
    }
    .progress-shine {
      position:absolute; top:2px; left:4px; right:4px; height:4px;
      background:rgba(255,255,255,.2); border-radius:999px;
    }

    /* ── Cathedral card ── */
    .cathedral-card {
      border-radius:20px; overflow:hidden;
      border:1px solid rgba(201,168,76,.35);
      background:linear-gradient(145deg,rgba(75,0,130,.25),rgba(13,27,62,.95));
      position:relative;
    }
    .cathedral-card::before {
      content:''; position:absolute; inset:0;
      background:url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22><path d=%22M20 4 L20 36 M4 20 L36 20%22 stroke=%22rgba(201,168,76,0.04)%22 stroke-width=%221%22/></svg>');
      pointer-events:none;
    }

    /* ── Security badge ── */
    .secure-badge {
      display:inline-flex; align-items:center; gap:6px;
      padding:.4rem 1rem; border-radius:999px;
      background:rgba(74,222,128,.08);
      border:1px solid rgba(74,222,128,.25);
      color:#4ade80; font-size:.72rem; letter-spacing:.05em;
    }

    /* ── Step circle ── */
    .step-circle {
      width:52px; height:52px; border-radius:50%; flex-shrink:0;
      background:linear-gradient(135deg,var(--gold-l),var(--gold));
      display:flex; align-items:center; justify-content:center;
      font-family:'Cinzel',serif; font-weight:900; font-size:1.2rem; color:#0D1B3E;
    }

    /* ── Ticker ── */
    @keyframes tickerScroll { from{transform:translateX(100%)} to{transform:translateX(-100%)} }
    .ticker-inner { animation:tickerScroll 30s linear infinite; white-space:nowrap; }
    .ticker-inner:hover { animation-play-state:paused; }

.giving-tab {
    padding:.5rem 1.2rem; border-radius:999px; cursor:pointer;
    font-family:'Cinzel',serif; font-size:.72rem; letter-spacing:.08em;
    border:1px solid rgba(201,168,76,.3); color:#9ca3af;
    background:transparent; transition:all .2s;
  }
  .giving-tab:hover { border-color:var(--gold); color:var(--gold); }
  .giving-tab.active-tab {
    background:linear-gradient(135deg,var(--gold-l),var(--gold));
    color:#0D1B3E; border-color:var(--gold); font-weight:700;
  }

      .give-card {
        background: linear-gradient(145deg, rgba(75,0,130,.2), rgba(13,27,62,.92));
        border: 1px solid rgba(201,168,76,.25);
        border-radius: 20px;
        overflow: hidden;
        transition: transform .3s, box-shadow .3s, border-color .3s;
      }
      .give-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 50px rgba(0,0,0,.4), 0 0 25px rgba(201,168,76,.12);
        border-color: rgba(201,168,76,.55);
      }
      .give-card-header {
        padding: 1.5rem 1.75rem;
        border-bottom: 1px solid rgba(201,168,76,.15);
        display: flex; align-items: center; gap: 1rem;
      }
      .give-card-icon {
        width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.4rem;
      }
      .give-card-body { padding: 1.5rem 1.75rem; }
      .give-field {
        display: flex; justify-content: space-between; align-items: center;
        padding: .65rem 0;
        border-bottom: 1px solid rgba(255,255,255,.06);
      }
      .give-field:last-of-type { border-bottom: none; }
      .give-field-label { color: #9ca3af; font-size: .75rem; }
      .give-field-value {
        color: #f0e8d0; font-weight: 700; font-size: .85rem;
        display: flex; align-items: center; gap: 8px;
      }
      .give-field-placeholder {
        color: #4b5563; font-style: italic; font-size: .8rem;
      }
      /* Provider logo badges */
      .provider-badge {
        padding: .3rem .8rem; border-radius: 8px;
        font-family: 'Cinzel', serif; font-weight: 900;
        font-size: .8rem; letter-spacing: .05em;
      }
      /* Copy button */
      .copy-btn {
        width: 28px; height: 28px; border-radius: 6px;
        background: rgba(201,168,76,.1); border: 1px solid rgba(201,168,76,.3);
        color: var(--gold); display: inline-flex; align-items: center;
        justify-content: center; cursor: pointer;
        transition: background .2s; font-size: .7rem; flex-shrink: 0;
      }
      .copy-btn:hover { background: rgba(201,168,76,.25); }
      .copy-btn.copied { background: rgba(74,222,128,.15); border-color: rgba(74,222,128,.4); color: #4ade80; }
    
  
    /* ══ GIVE PAGE MOBILE ══ */
    @media (max-width: 640px) {
      .give-card { padding: 1.25rem 1rem !important; }
      .give-card-icon { width: 44px !important; height: 44px !important; }
      .give-card-header { padding: 1rem !important; }
      .give-card-body { padding: 1rem !important; }
      .give-field-value { font-size: .78rem !important; }
      .give-field-label { font-size: .7rem !important; }
      /* How to give steps */
      .step-number { width: 44px !important; height: 44px !important; font-size: 1rem !important; }
    }