/* /connect/views/giving.css — Member "Give" v2 ("Vibrant Community")
 * Refinement layer loaded AFTER views.css so it wins the cascade.
 * A focused, confident give panel with a large amount display and tactile
 * quick-amount chips; the history table reflows to cards on mobile.
 *
 * Colour comes only from --bcc-* design tokens. The only literal colours are
 * neutral shadow alpha (rgba(0,0,0,a) / rgba(255,255,255,a)) and the
 * intentional on-gradient ink #fff — none are thematic brand hex.
 *
 * Breakpoints mirror the shell: desktop >= 1025 | tablet 768-1024 |
 * mobile 481-767 | small phone <= 480.
 * ================================================================ */

/* Hidden attribute must beat the display rules below. */
#bcc-view-giving [hidden] { display: none !important; }

/* ================================================================
   1. PAGE + HERO
=============================================================== */
.gvx-page { display: flex; flex-direction: column; }

.gvx-hero {
  position:      relative;
  overflow:      hidden;
  padding:       var(--bcc-s10) var(--bcc-s8);
  margin-bottom: var(--bcc-s6);
  border:        1px solid var(--bcc-border-strong);
  border-radius: var(--bcc-r-xl);
  background:    linear-gradient(135deg, var(--bcc-primary) 0%, var(--bcc-primary-hover) 52%, var(--bcc-accent) 132%);
  box-shadow:    var(--bcc-shadow-2);
}
.gvx-hero::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse at 88% 8%, rgba(255,255,255,.14) 0%, transparent 55%),
              linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.22) 100%);
  pointer-events: none;
}
.gvx-hero-inner { position: relative; z-index: 1; max-width: 560px; }
.gvx-hero-chip {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           46px;
  height:          46px;
  margin-bottom:   var(--bcc-s3);
  border-radius:   var(--bcc-r-md);
  background:      rgba(255,255,255,.16);
  color:           #fff;
  backdrop-filter: blur(4px);
}
.gvx-hero-title {
  font-family:    var(--bcc-font-display);
  font-size:      var(--bcc-t-4xl);
  font-weight:    600;
  letter-spacing: -.01em;
  line-height:    1.1;
  color:          #fff;
  margin:         0 0 var(--bcc-s1);
}
.gvx-hero-sub {
  font-size: var(--bcc-t-md);
  color:     rgba(255,255,255,.85);
  margin:    0;
}

/* ================================================================
   2. SUCCESS / CANCEL FLASH
=============================================================== */
.gvx-flash {
  display:       flex;
  align-items:   center;
  gap:           var(--bcc-s3);
  padding:       var(--bcc-s3) var(--bcc-s4);
  margin-bottom: var(--bcc-s5);
  border:        1px solid var(--bcc-border-strong);
  border-radius: var(--bcc-r-md);
  background:    var(--bcc-surface-2);
  color:         var(--bcc-ink-2);
  font-size:     var(--bcc-t-sm);
}
.gvx-flash-icon { display: inline-flex; align-items: center; flex-shrink: 0; }
.gvx-flash.is-success {
  background:   var(--bcc-success-soft);
  border-color: var(--bcc-success);
  color:        var(--bcc-success);
}
.gvx-flash.is-cancel {
  background:   var(--bcc-warning-soft);
  border-color: var(--bcc-warning);
  color:        var(--bcc-warning);
}

/* ================================================================
   3. GIVE PANEL — confident, focused card
=============================================================== */
.gvx-give-card {
  position:      relative;
  overflow:      hidden;
  max-width:     560px;
  margin:        0 auto;
  border-color:  var(--bcc-border-strong);
  box-shadow:    var(--bcc-shadow-2);
}
.gvx-give-card::before {
  content:    '';
  position:   absolute;
  left: 0; right: 0; top: 0;
  height:     4px;
  background: linear-gradient(90deg, var(--bcc-primary), var(--bcc-accent));
}
.gvx-give-head { margin-bottom: var(--bcc-s5); }
.gvx-give-title { margin: 0 0 var(--bcc-s1); }
.gvx-give-sub {
  font-size: var(--bcc-t-sm);
  color:     var(--bcc-ink-3);
  margin:    0;
}

/* ── No-Stripe warning ───────────────────────────────────────── */
.gvx-warn {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--bcc-s2);
  padding:       var(--bcc-s3) var(--bcc-s4);
  margin-bottom: var(--bcc-s5);
  border:        1px solid var(--bcc-warning);
  border-radius: var(--bcc-r-md);
  background:    var(--bcc-warning-soft);
  color:         var(--bcc-ink-2);
  font-size:     var(--bcc-t-xs);
  line-height:   1.5;
}
.gvx-warn .bcc-icon { color: var(--bcc-warning); margin-top: 1px; }

/* ── Large amount display ────────────────────────────────────── */
.gvx-amount-display {
  font-size:      clamp(2.5rem, 9vw, 3.5rem);
  font-weight:    700;
  letter-spacing: -.03em;
  line-height:    1;
  text-align:     center;
  padding:        var(--bcc-s4) 0 var(--bcc-s2);
  color:          var(--bcc-ink);
  background:     linear-gradient(135deg, var(--bcc-primary), var(--bcc-accent));
  -webkit-background-clip: text;
  background-clip:         text;
  -webkit-text-fill-color: transparent;
}

/* ── Tactile quick-amount chips ──────────────────────────────── */
.gvx-quick { gap: var(--bcc-s2); }
.gvx-quick-btn {
  height:        46px;
  border:        1px solid var(--bcc-border-strong);
  border-radius: var(--bcc-r-md);
  background:    var(--bcc-surface-2);
  color:         var(--bcc-ink-2);
  font-size:     var(--bcc-t-sm);
  font-weight:   600;
  box-shadow:    inset 0 1px 0 rgba(255,255,255,.05);
  transition:    background var(--bcc-dur-2) var(--bcc-ease),
                 color      var(--bcc-dur-2) var(--bcc-ease),
                 border-color var(--bcc-dur-2) var(--bcc-ease),
                 transform  var(--bcc-dur-2) var(--bcc-ease),
                 box-shadow var(--bcc-dur-2) var(--bcc-ease);
}
.gvx-quick-btn:hover {
  background:   var(--bcc-surface-3);
  color:        var(--bcc-ink);
  border-color: var(--bcc-border-strong);
  transform:    translateY(-1px);
}
.gvx-quick-btn:active { transform: translateY(0) scale(.98); }
.gvx-quick-btn.active {
  background:   linear-gradient(180deg, var(--bcc-primary), var(--bcc-primary-hover));
  color:        #fff;
  border-color: var(--bcc-primary);
  box-shadow:   0 4px 14px rgba(var(--bcc-primary-rgb),.35), inset 0 1px 0 rgba(255,255,255,.16);
}

/* ── Fund chips ──────────────────────────────────────────────── */
.gvx-fund-chips { gap: var(--bcc-s2); }
.gvx-fund-chip {
  height:        40px;
  padding:       0 var(--bcc-s4);
  border:        1px solid var(--bcc-border-strong);
  border-radius: var(--bcc-r-pill);
  background:    transparent;
  color:         var(--bcc-ink-2);
  font-size:     var(--bcc-t-sm);
  font-weight:   600;
  transition:    background var(--bcc-dur-2) var(--bcc-ease),
                 color      var(--bcc-dur-2) var(--bcc-ease),
                 border-color var(--bcc-dur-2) var(--bcc-ease),
                 box-shadow var(--bcc-dur-2) var(--bcc-ease);
}
.gvx-fund-chip:hover:not(.active) {
  background:   var(--bcc-surface-3);
  color:        var(--bcc-ink);
  border-color: var(--bcc-primary);
}
.gvx-fund-chip.active {
  background:   linear-gradient(180deg, var(--bcc-primary), var(--bcc-primary-hover));
  color:        #fff;
  border-color: transparent;
  box-shadow:   0 3px 12px rgba(var(--bcc-primary-rgb),.35);
}

/* ── Frequency segmented control ─────────────────────────────── */
.gvx-freq-btn { height: 40px; font-weight: 600; }
.gvx-freq-btn:hover:not(.active) { background: var(--bcc-surface-3); color: var(--bcc-ink); }
.gvx-freq-btn.active {
  background: linear-gradient(180deg, var(--bcc-primary), var(--bcc-primary-hover));
  color:      #fff;
  box-shadow: 0 3px 12px rgba(var(--bcc-primary-rgb),.35);
}

/* ── Give CTA + secure note ──────────────────────────────────── */
.gvx-give-btn { gap: var(--bcc-s2); }
.gvx-secure {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
}
.gvx-secure .bcc-icon { color: var(--bcc-success); }

/* ================================================================
   4. GIVING HISTORY
=============================================================== */
.gvx-history-title { display: flex; align-items: center; gap: var(--bcc-s2); }
.gvx-history-title .bcc-icon { color: var(--bcc-accent); }

.gvx-table-wrap {
  background:    var(--bcc-surface-1);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-lg);
  /* Was `overflow: hidden`, which clipped wide tables at 768-1024px and
     defeated .bcc-table-wrap's horizontal scroll. Allow horizontal
     scrolling; border-radius still clips the corners. */
  overflow-x:    auto;
}
.gvx-empty { display: flex; flex-direction: column; align-items: center; }
.gvx-empty-icon { color: var(--bcc-primary); opacity: .7; margin-bottom: var(--bcc-s2); }
.gvx-empty-icon .bcc-icon { width: 2.25rem; height: 2.25rem; }
.gvx-empty-sub { font-size: var(--bcc-t-xs); color: var(--bcc-ink-3); margin: 2px 0 0; }

/* ================================================================
   5. RESPONSIVE
=============================================================== */

/* ── Tablet 768-1024 ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .gvx-hero { padding: var(--bcc-s8) var(--bcc-s6); }
}

/* ── Mobile 481-767 ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .gvx-hero { padding: var(--bcc-s6) var(--bcc-s5); }
  .gvx-give-card { max-width: none; }

  /* Quick-amount tiles are a 4-up grid (views.css .gv-quick-amounts);
     collapse to 2-up on phones before the ≤480 pass. */
  .gvx-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* History table reflows to stacked cards */
  .gvx-table-wrap { border: none; background: transparent; overflow: visible; border-radius: 0; }
  .gvx-table,
  .gvx-table tbody,
  .gvx-table tr,
  .gvx-table td { display: block; width: 100%; }
  .gvx-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
  }
  .gvx-table tr {
    background:    var(--bcc-surface-1);
    border:        1px solid var(--bcc-border);
    border-radius: var(--bcc-r-lg);
    box-shadow:    var(--bcc-shadow-1);
    padding:       var(--bcc-s2) var(--bcc-s4);
    margin-bottom: var(--bcc-s3);
  }
  .gvx-table tbody tr:hover { background: var(--bcc-surface-1); }
  .gvx-table td {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--bcc-s4);
    padding:         var(--bcc-s2) 0;
    border-bottom:   1px dashed var(--bcc-border);
    text-align:      right;
  }
  .gvx-table td:last-child { border-bottom: none; }
  .gvx-table td::before {
    content:        attr(data-label);
    font-size:      var(--bcc-t-xs);
    font-weight:    600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color:          var(--bcc-ink-3);
  }
  .gvx-table td:first-child { color: var(--bcc-ink); }
}

/* ── Small phone <= 480 ──────────────────────────────────────── */
@media (max-width: 480px) {
  .gvx-hero-title { font-size: var(--bcc-t-2xl); }
  .gvx-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gvx-quick-btn,
  .gvx-fund-chip,
  .gvx-freq-btn { min-height: 44px; }
}

/* ── Large desktop >= 1025 ───────────────────────────────────── */
@media (min-width: 1025px) {
  .gvx-give-card { max-width: 600px; }
}

/* ================================================================
   6. REDUCED MOTION
=============================================================== */
@media (prefers-reduced-motion: reduce) {
  .gvx-page *,
  .gvx-page *::before,
  .gvx-page *::after,
  .gvx-flash * {
    transition-duration: .001ms !important;
    animation-duration:  .001ms !important;
  }
  .gvx-quick-btn:hover,
  .gvx-quick-btn:active { transform: none; }
}